STCOR-859 list UI apps under apps/modules/interfaces column (#1489)

Follow-up to the original PR (#1385, STCOR-773). There were at
least two gotchas there:
1. The attribute key in the response changed from `ui-modules` to
   `uiModules`
2. Since frontend and backend applications are stored under separate
   keys, the discovery reducer needed to grab values from both keys.

Refs STCOR-859

CHANGELOG.md

@@ -17,6 +17,7 @@
 * Use keycloak URLs in place of users-bl for tenant-switch. Refs US1153537.
 * Fix 404 error page when logging in after changing password in Eureka. Refs STCOR-845.
 * Always retrieve `clientId` and `tenant` values from `config.tenantOptions` in stripes.config.js. Retires `okapi.tenant`, `okapi.clientId`, and `config.isSingleTenant`. Refs STCOR-787.
+* List UI apps in "Applications/modules/interfaces" column. STCOR-773
 
 ## [10.1.1](https://github.com/folio-org/stripes-core/tree/v10.1.1) (2024-03-25)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v10.1.0...v10.1.1)

src/components/About/AboutApplicationVersions.js

@@ -21,6 +21,7 @@ const AboutApplicationVersions = ({ message, applications }) => {
       </Headline>
       <Headline>{message}</Headline>
       {Object.values(applications)
+        .sort((a, b) => a.name.localeCompare(b.name))
         .map((app) => {
           return (
             <ul key={app.name}>

src/components/About/AboutModules.js

@@ -7,9 +7,11 @@ import {
 import css from './About.css';
 
 
-const AboutInterfaces = ({ list }) => {
+const AboutInterfaces = ({ list = [] }) => {
+  list.sort((a, b) => a.name.localeCompare(b.name));
   return (
     <List
+      listStyle="bullets"
       listClass={css.paddingLeftOfListItems}
       items={list}
       itemFormatter={(item) => <li key={item.name}>{item.name}</li>}
@@ -21,7 +23,9 @@ AboutInterfaces.propTypes = {
   list: PropTypes.arrayOf(PropTypes.object),
 };
 
-const AboutModules = ({ list }) => {
+const AboutModules = ({ list = [] }) => {
+  list.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <List
       listStyle="bullets"

src/discoverServices.js

@@ -46,8 +46,8 @@ function parseApplicationDescriptor(store, descriptor) {
     list.push(...descriptor.moduleDescriptors?.map((i) => dispatchDescriptor(i)));
   }
 
-  if (descriptor['ui-modules']) {
-    list.push(...descriptor['ui-modules']?.map((i) => dispatchDescriptor(i)));
+  if (descriptor.uiModules) {
+    list.push(...descriptor.uiModules?.map((i) => dispatchDescriptor(i)));
   }
 
   list.push(dispatchApplication(descriptor));
@@ -76,7 +76,7 @@ function parseApplicationDescriptor(store, descriptor) {
           { "id": "mod-users-18.2.0", "name": "mod-users", "version": "18.2.0" },
           ...
         ],
-        "ui-modules": [
+        "uiModules": [
           { "name": "folio_stripes-core", "version": "8.1.2" },
           ...
         ],
@@ -246,14 +246,23 @@ export function discoveryReducer(state = {}, action) {
           ...state.applications,
           [action.data.id]: {
             name: action.data.id,
-            modules: action.data.moduleDescriptors.map((d) => {
-              return {
-                name: d.id,
-                interfaces: d.provides?.map((i) => {
-                  return { name: i.id + ' ' + i.version };
-                }) || [],
-              };
-            }),
+            modules: [
+              ...action.data.moduleDescriptors.map((d) => {
+                return {
+                  name: d.id,
+                  interfaces: d.provides?.map((i) => {
+                    return { name: i.id + ' ' + i.version };
+                  }) || [],
+                };
+              }),
+              ...action.data.uiModules.map((d) => {
+                return {
+                  name: d.id,
+                  interfaces: [],
+                };
+              })
+
+            ],
           },
         },
       };

src/discoverServices.test.js

@@ -98,6 +98,48 @@ describe('discoverServices', () => {
 });
 
 describe('discoveryReducer', () => {
+  it('handles DISCOVERY_APPLICATIONS', () => {
+    let state = {};
+    const moduleDescriptors = [
+      { id: 'mod-a', provides: [{ id: 'if-a', version: '1.0' }] },
+      { id: 'mod-b' },
+    ];
+    const uiModules = [
+      { id: 'folio_c' },
+      { id: 'folio_d' },
+    ];
+    const action = {
+      type: 'DISCOVERY_APPLICATIONS',
+      data: {
+        id: 'a',
+        moduleDescriptors,
+        uiModules,
+      },
+    };
+
+    const mapped = {
+      applications: {
+        [action.data.id]: {
+          name: action.data.id,
+          modules: [
+            ...moduleDescriptors.map((d) => (
+              {
+                name: d.id,
+                interfaces: d.provides?.map((i) => {
+                  return { name: i.id + ' ' + i.version };
+                }) || []
+              })),
+            ...uiModules.map((d) => ({ name: d.id, interfaces: [] })),
+          ],
+        },
+      },
+    };
+
+    state = discoveryReducer(state, action);
+
+    expect(state).toMatchObject(mapped);
+  });
+
   it('handles DISCOVERY_OKAPI', () => {
     let state = {
       okapi: '0.0.0'