From 6ab1a0ea44fff7cceba316cad74ee751ee4edf9f Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Sun, 9 Jun 2024 22:49:46 -0400
Subject: [PATCH] STCOR-773 list UI apps under apps/modules/interfaces column

Follow-up to the original PR (#1385). 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-773
---
 CHANGELOG.md                                  |  1 +
 .../About/AboutApplicationVersions.js         |  1 +
 src/components/About/AboutModules.js          |  4 +++
 src/discoverServices.js                       | 33 ++++++++++++-------
 4 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 492b0fe96..5f72cfd8c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * Idle-session timeout and "Keep working?" modal. Refs STCOR-776.
 * 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.
+* 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)
diff --git a/src/components/About/AboutApplicationVersions.js b/src/components/About/AboutApplicationVersions.js
index 7de809407..26b2e7ca9 100644
--- a/src/components/About/AboutApplicationVersions.js
+++ b/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}>
diff --git a/src/components/About/AboutModules.js b/src/components/About/AboutModules.js
index 5fc9ca7d5..6a1e1d247 100644
--- a/src/components/About/AboutModules.js
+++ b/src/components/About/AboutModules.js
@@ -8,8 +8,10 @@ import css from './About.css';
 
 
 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>}
@@ -22,6 +24,8 @@ AboutInterfaces.propTypes = {
 };
 
 const AboutModules = ({ list }) => {
+  list.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
     <List
       listStyle="bullets"
diff --git a/src/discoverServices.js b/src/discoverServices.js
index 04a888423..405fbe18a 100644
--- a/src/discoverServices.js
+++ b/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,25 @@ 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: d.provides?.map((i) => {
+                    return { name: i.id + ' ' + i.version };
+                  }) || [],
+                };
+              })
+
+            ],
           },
         },
       };