STCOR-936 - implement App-reordering, user preference management in stripes-core.

index.js

@@ -15,6 +15,7 @@ export { default as useOkapiKy } from './src/useOkapiKy';
 export { default as withOkapiKy } from './src/withOkapiKy';
 export { default as useCustomFields } from './src/useCustomFields';
 export { default as createReactQueryClient } from './src/createReactQueryClient';
+export { useAppOrderContext } from './src/components/MainNav/AppOrderProvider';
 
 /* components */
 export { default as AppContextMenu } from './src/components/MainNav/CurrentApp/AppContextMenu';

package.json

@@ -26,7 +26,8 @@
     "okapiInterfaces": {
       "users-bl": "5.0 6.0",
       "authtoken": "1.0 2.0",
-      "configuration": "2.0"
+      "configuration": "2.0",
+      "settings": "1.0"
     },
     "optionalOkapiInterfaces": {
       "consortia": "1.0",
@@ -38,6 +39,16 @@
       {
         "permissionName": "settings.enabled",
         "displayName": "UI: settings area is enabled"
+      },
+      {
+        "permissionName": "mod-settings.owner.read.stripes-core.prefs.manage",
+        "displayName": "UI: read the user's own preference for the order of links in the main navigation.",
+        "visible": false
+      },
+      {
+        "permissionName": "mod-settings.owner.write.stripes-core.prefs.manage",
+        "displayName": "UI: update the user's own preference for the order of links in the main navigation.",
+        "visible": false
       }
     ]
   },

src/RootWithIntl.js

@@ -35,6 +35,7 @@ import {
   ForgotUserNameCtrl,
   AppCtxMenuProvider,
   SessionEventContainer,
+  AppOrderProvider,
 } from './components';
 import StaleBundleWarning from './components/StaleBundleWarning';
 import { StripesContext } from './StripesContext';
@@ -65,55 +66,57 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
                     <>
                       <MainContainer>
                         <AppCtxMenuProvider>
-                          <MainNav stripes={connectedStripes} queryClient={queryClient} />
-                          {typeof connectedStripes?.config?.staleBundleWarning === 'object' && <StaleBundleWarning />}
-                          <HandlerManager
-                            event={events.LOGIN}
-                            stripes={connectedStripes}
-                          />
-                          { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
-                            <ModuleContainer id="content">
-                              <OverlayContainer />
-                              {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} queryClient={queryClient} />}
-                              <Switch>
-                                <TitledRoute
-                                  name="home"
-                                  path="/"
-                                  key="root"
-                                  exact
-                                  component={<Front stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="ssoRedirect"
-                                  path="/sso-landing"
-                                  key="sso-landing"
-                                  component={<SSORedirect stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="oidcRedirect"
-                                  path="/oidc-landing"
-                                  key="oidc-landing"
-                                  component={<OIDCRedirect stripes={stripes} />}
-                                />
-                                <TitledRoute
-                                  name="logoutTimeout"
-                                  path="/logout-timeout"
-                                  component={<Logout />}
-                                />
-                                <TitledRoute
-                                  name="settings"
-                                  path="/settings"
-                                  component={<Settings stripes={connectedStripes} />}
-                                />
-                                <TitledRoute
-                                  name="logout"
-                                  path="/logout"
-                                  component={<Logout />}
-                                />
-                                <ModuleRoutes stripes={connectedStripes} />
-                              </Switch>
-                            </ModuleContainer>
-                          )}
+                          <AppOrderProvider>
+                            <MainNav stripes={connectedStripes} queryClient={queryClient} />
+                            {typeof connectedStripes?.config?.staleBundleWarning === 'object' && <StaleBundleWarning />}
+                            <HandlerManager
+                              event={events.LOGIN}
+                              stripes={connectedStripes}
+                            />
+                            { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
+                              <ModuleContainer id="content">
+                                <OverlayContainer />
+                                {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} queryClient={queryClient} />}
+                                <Switch>
+                                  <TitledRoute
+                                    name="home"
+                                    path="/"
+                                    key="root"
+                                    exact
+                                    component={<Front stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="ssoRedirect"
+                                    path="/sso-landing"
+                                    key="sso-landing"
+                                    component={<SSORedirect stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="oidcRedirect"
+                                    path="/oidc-landing"
+                                    key="oidc-landing"
+                                    component={<OIDCRedirect stripes={stripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="logoutTimeout"
+                                    path="/logout-timeout"
+                                    component={<Logout />}
+                                  />
+                                  <TitledRoute
+                                    name="settings"
+                                    path="/settings"
+                                    component={<Settings stripes={connectedStripes} />}
+                                  />
+                                  <TitledRoute
+                                    name="logout"
+                                    path="/logout"
+                                    component={<Logout />}
+                                  />
+                                  <ModuleRoutes stripes={connectedStripes} />
+                                </Switch>
+                              </ModuleContainer>
+                            )}
+                          </AppOrderProvider>
                         </AppCtxMenuProvider>
                       </MainContainer>
                       <Callout ref={setCalloutDomRef} />

src/components/MainNav/AppList/AppList.js

@@ -91,7 +91,7 @@ class AppList extends Component {
         {
           apps.map(app => {
             const isHidden = hiddenItemIds.includes(app.id);
-
+            // const isHidden = false;
             return (
               <li
                 className={classnames(css.navItem, { [css.hidden]: isHidden })}

src/components/MainNav/AppList/components/AppListDropdown/AppListDropdown.js

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import sortBy from 'lodash/sortBy';
 
 import { NavListItem, NavListSection } from '@folio/stripes-components';
 
@@ -20,7 +20,7 @@
     striped
   >
     {
-      sortBy(apps, app => app.displayName.toLowerCase()).map(app => (
+      apps.map(app => (
         <NavListItem
           key={app.id}
           data-test-app-list-dropdown-item

src/components/MainNav/AppList/components/ResizeContainer/ResizeContainer.js

@@ -7,6 +7,7 @@
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import css from './ResizeContainer.css';
+import isEqual from 'lodash/isEqual';
 
 class ResizeContainer extends React.Component {
   static propTypes = {
@@ -40,9 +41,12 @@
   }
 
   componentDidUpdate(prevProps) {
+    const { currentAppId, items } = this.props;
     // Update hidden items when the current app ID changes
     // to make sure that no items are hidden behind the current app label
-    if (this.props.currentAppId && this.props.currentAppId !== prevProps.currentAppId) {
+    if (currentAppId !== prevProps.currentAppId ||
+      items !== prevProps.items
+    ) {
       this.updateHiddenItems();
     }
   }
@@ -79,7 +83,7 @@
    * Determine hidden items on mount and resize
    */
   updateHiddenItems = (callback) => {
-    const { hideAllWidth, offset } = this.props;
+    const { hideAllWidth, offset, items } = this.props;
     const { cachedItemWidths } = this.state;
     const shouldHideAll = window.innerWidth <= hideAllWidth;
     const wrapperEl = this.wrapperRef.current;
@@ -92,7 +96,7 @@
       shouldHideAll ? Object.keys(cachedItemWidths) :
 
         // Find items that should be hidden
-        Object.keys(cachedItemWidths).reduce((acc, id) => {
+        items.reduce((acc, { id }) => {
           const itemWidth = cachedItemWidths[id];
           const shouldBeHidden = (itemWidth + acc.accWidth + offset) > wrapperWidth;
           const hidden = shouldBeHidden ? acc.hidden.concat(id) : acc.hidden;
@@ -101,7 +105,8 @@
             hidden,
             accWidth: acc.accWidth + itemWidth,
           };
-        }, {
+        },
+        {
           hidden: [],
           accWidth: 0,
         }).hidden;

src/components/MainNav/AppOrderProvider.js

@@ -0,0 +1,164 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import { useQuery } from 'react-query';
+
+import { useStripes } from '../../StripesContext';
+import { useModules } from '../../ModulesContext';
+import { LastVisitedContext } from '../LastVisited';
+import usePreferences from '../../hooks/usePreferences';
+import { packageName } from '../../constants';
+import settingsIcon from './settings.svg';
+
+
+const APPORDER_PREF_NAME = 'user-main-nav-order';
+const APPORDER_PREF_SCOPE = 'stripes-core.prefs.manage';
+
+export const AppOrderContext = createContext({
+  isLoading: true,
+  listOrder: [],
+  apps: [],
+  updateList: () => {},
+  reset: () => {},
+});
+
+export const useAppOrderContext = () => {
+  return useContext(AppOrderContext);
+};
+
+function getProvisionedApps(appModules, stripes, pathname, lastVisited, formatMessage) {
+  const apps = appModules.map((entry) => {
+    const name = entry.module.replace(packageName.PACKAGE_SCOPE_REGEX, '');
+    const perm = `module.${name}.enabled`;
+
+    if (!stripes.hasPerm(perm)) {
+      return null;
+    }
+
+    const id = `clickable-${name}-module`;
+
+    const pathRoot = pathname.split('/')[1];
+    const entryRoot = entry.route.split('/')[1];
+    const active = pathRoot === entryRoot;
+
+    const last = lastVisited[name];
+    const home = entry.home || entry.route;
+    const href = (active || !last) ? home : lastVisited[name];
+
+    return {
+      id,
+      href,
+      active,
+      name,
+      ...entry,
+    };
+  }).filter(app => app);
+
+  /**
+   * Add Settings to apps array manually
+   * until Settings becomes a standalone app
+   */
+
+  if (stripes.hasPerm('settings.enabled')) {
+    apps.push({
+      displayName: formatMessage({ id: 'stripes-core.settings' }),
+      name: 'settings',
+      id: 'clickable-settings',
+      href: lastVisited.x_settings || '/settings',
+      active: pathname.startsWith('/settings'),
+      description: 'FOLIO settings',
+      iconData: {
+        src: settingsIcon,
+        alt: 'Tenant Settings',
+        title: 'Settings',
+      },
+      route: '/settings'
+    });
+  }
+  return apps;
+}
+
+export const AppOrderProvider = ({ children }) => {
+  const { lastVisited } = useContext(LastVisitedContext);
+  const { app } = useModules();
+  const stripes = useStripes();
+  const { pathname } = useLocation();
+  const { formatMessage } = useIntl();
+  const { getPreference, setPreference, removePreference } = usePreferences();
+
+  const { data: userAppList, isLoading, refetch: refetchAppList } = useQuery(`${stripes?.user?.user?.id}-pref-query`, () => {
+    return getPreference({ key: APPORDER_PREF_NAME, scope: APPORDER_PREF_SCOPE });
+  });
+
+  // returns list of apps in user-defined order. By alpha if no order defined.
+  const apps = useMemo(() => {
+    if (!stripes) return [];
+    const platformApps = getProvisionedApps(app, stripes, pathname, lastVisited, formatMessage);
+
+    let orderedApps = userAppList || []; // the persisted, user-preferred app order.
+    let navList = []; // contains the ultimate reordered array of app nav items.
+
+    // No length in the persisted apps means apps ordered by alpha (default)
+    if (!orderedApps?.length) {
+      // default ordered apps just contain a subset of the fields in the app object...
+      orderedApps = platformApps.map(({ name }) => ({ name }));
+      navList = platformApps;
+    } else {
+      // reorder apps to the persisted preference value...
+      navList = orderedApps.map((listing) => {
+        const { name: appName } = listing;
+        const appIndex = platformApps.findIndex((module) => appName === module.name);
+
+        if (appIndex !== -1) {
+          return platformApps[appIndex];
+        }
+
+        return false;
+      });
+
+      // find the apps from the platform that are not saved in user-reordered list and tack them on at the end.
+      // these cover permission changes/apps added... can be labeled as 'new' in the preference settings.
+      platformApps.forEach((platApp) => {
+        const orderedIndex = orderedApps.findIndex((oa) => oa.name === platApp.name);
+        if (orderedIndex === -1) {
+          orderedApps.push({
+            name: platApp.name,
+            isNew: true,
+          });
+        }
+      });
+    }
+
+    return { navList, orderedApps };
+  }, [formatMessage, app, lastVisited, userAppList, pathname]); // omitted: stripes
+
+  const updateList = async (list) => {
+    // clean the 'isNew' field;
+    list.forEach((item) => {
+      if (Object.prototype.hasOwnProperty.call(item, 'isNew')) {
+        delete item.isNew;
+      }
+    });
+    await setPreference({ key: APPORDER_PREF_NAME, scope: APPORDER_PREF_SCOPE, value: list });
+    await refetchAppList();
+  };
+
+  // resetting the app order preference just removes the entry from settings.
+  const reset = async () => {
+    await removePreference({ key: APPORDER_PREF_NAME, scope: APPORDER_PREF_SCOPE });
+    await refetchAppList();
+  };
+
+  return (
+    <AppOrderContext.Provider value={{
+      isLoading,
+      apps: apps.navList,
+      appNavOrder: apps.orderedApps,
+      updateList,
+      reset
+    }}
+    >
+      {children}
+    </AppOrderContext.Provider>
+  );
+};