feat(preferences): match collection preferences visual

Author: grantfitzsimmons

specifyweb/frontend/js_src/lib/components/Preferences/Aside.tsx

@@ -21,6 +21,12 @@ export function PreferencesAside({
   readonly references: React.RefObject<WritableArray<HTMLElement | undefined>>;
   readonly prefType?: PreferenceType;
 }): JSX.Element {
+  const preferenceRoutes: Record<PreferenceType, string> = {
+    user: '/specify/user-preferences/',
+    collection: '/specify/collection-preferences/',
+    global: '/specify/global-preferences/',
+  };
+  const preferencesPath = preferenceRoutes[prefType];
   const definitions = usePrefDefinitions(prefType);
   const navigate = useNavigate();
   const location = useLocation();
@@ -30,13 +36,10 @@ export function PreferencesAside({
     () =>
       isInOverlay || activeCategory === undefined
         ? undefined
-        : navigate(
-            `/specify/user-preferences/#${definitions[activeCategory][0]}`,
-            {
-              replace: true,
-            }
-          ),
-    [isInOverlay, definitions, activeCategory]
+        : navigate(`${preferencesPath}#${definitions[activeCategory][0]}`, {
+            replace: true,
+          }),
+    [isInOverlay, definitions, activeCategory, preferencesPath]
   );
 
   const [freezeCategory, setFreezeCategory] = useFrozenCategory();

specifyweb/frontend/js_src/lib/components/Preferences/BasePreferences.tsx

@@ -94,15 +94,16 @@ export class BasePreferences<DEFINITIONS extends GenericPreferences> {
       if (typeof this.resourcePromise === 'object') return this.resourcePromise;
 
       const { values, defaultValues } = this.options;
+      const isAppResourceEndpoint = values.fetchUrl.includes('app.resource');
 
-      const valuesResource = fetchResourceId(
-        values.fetchUrl,
-        values.resourceName
-      ).then(async (appResourceId) =>
-        typeof appResourceId === 'number'
-          ? fetchResourceData(values.fetchUrl, appResourceId)
-          : createDataResource(values.fetchUrl, values.resourceName)
-      );
+      const valuesResource = isAppResourceEndpoint
+        ? fetchGlobalResource(values.fetchUrl, values.resourceName)
+        : fetchResourceId(values.fetchUrl, values.resourceName).then(
+            async (appResourceId) =>
+              typeof appResourceId === 'number'
+                ? fetchResourceData(values.fetchUrl, appResourceId)
+                : createDataResource(values.fetchUrl, values.resourceName)
+          );
 
       const defaultValuesResource =
         defaultValues === undefined
@@ -425,6 +426,8 @@ const mimeType = 'application/json';
 /**
  * Fetch ID of app resource containing preferences
  */
+const appResourceMimeType = 'text/plain';
+
 export const fetchResourceId = async (
   fetchUrl: string,
   resourceName: string
@@ -449,6 +452,32 @@ const fetchResourceData = async (
     headers: { Accept: mimeType },
   }).then(({ data }) => data);
 
+const fetchGlobalResource = async (
+  fetchUrl: string,
+  resourceName: string
+): Promise<ResourceWithData> => {
+  const url = cacheableUrl(
+    formatUrl(fetchUrl, {
+      name: resourceName,
+      quiet: '',
+    })
+  );
+  const { data, status, response } = await ajax<string>(url, {
+    headers: { Accept: appResourceMimeType },
+    expectedErrors: [Http.NO_CONTENT],
+  });
+
+  const parsedId = f.parseInt(response.headers.get('X-Record-ID') ?? undefined);
+
+  return {
+    id: parsedId ?? -1,
+    data: status === Http.OK ? data : '',
+    metadata: null,
+    mimetype: response.headers.get('Content-Type') ?? appResourceMimeType,
+    name: resourceName,
+  };
+};
+
 /**
  * Fetch default values overrides, if exist
  */

specifyweb/frontend/js_src/lib/components/Preferences/globalPreferencesLoader.ts

@@ -0,0 +1,36 @@
+import { ajax } from '../../utils/ajax';
+import { Http } from '../../utils/ajax/definitions';
+import { formatUrl } from '../Router/queryString';
+import { contextUnlockedPromise, foreverFetch } from '../InitialContext';
+import { type PartialPreferences } from './BasePreferences';
+import { globalPreferenceDefinitions } from './GlobalDefinitions';
+import { globalPreferences } from './globalPreferences';
+import { parseGlobalPreferences } from './globalPreferencesUtils';
+
+export const loadGlobalPreferences = async (): Promise<void> => {
+  const entryPoint = await contextUnlockedPromise;
+  if (entryPoint !== 'main') {
+    await foreverFetch();
+    return;
+  }
+
+  const { data, status } = await ajax<string>(
+    formatUrl('/context/app.resource', {
+      name: 'GlobalPreferences',
+      quiet: '',
+    }),
+    {
+      headers: { Accept: 'text/plain' },
+      expectedErrors: [Http.NO_CONTENT],
+      errorMode: 'visible',
+    }
+  );
+
+  const { raw } = parseGlobalPreferences(
+    status === Http.NO_CONTENT ? null : data
+  );
+
+  globalPreferences.setRaw(
+    raw as PartialPreferences<typeof globalPreferenceDefinitions>
+  );
+};