ui: tests pass and production build ok; config honors REACT_APP_API_HOST; divider usability improved; add Jest+Babel config

Author: ndrix

dusseldorf/ui/README.md

@@ -2,7 +2,8 @@
 
 This component is the graphical user interface for Project Dusseldorf, for more info on the project, please check https://aka.ms/dusseldorf.
 
-This component provides a simple but rich UI to make it easier to work with Dusseldorf.  It's a static web page build in React, and talks to the REST API.  By default, it is hosted as a static component within the API repository under the `/ui` path. 
+This component provides a simple but rich UI to make it easier to work with Dusseldorf.  It's a static web page build in React, and talks to the REST API.  By default, it is hosted as a static component within the API repository under the `/ui` path.  
+
 
 
 # Running Locally

dusseldorf/ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dusseldorf",
-  "version": "2025.3.19",
+  "version": "2025.11.28",
   "description": "out of band network request platform. https://aka.ms/dusseldorf",
   "author": "[email protected]",
   "contributors": [

dusseldorf/ui/package.json

@@ -55,7 +55,7 @@ export const App = ({ msal }: IAppProps) => {
     const [domains, setDomains] = useState<string[]>();
 
     useEffect(() => {
-        if (!domains) {
+        if (!domains || domains.length === 0) {            
             DusseldorfAPI.GetDomains()
                 .then((newDomains) => {
                     if (newDomains.length === 0) {

dusseldorf/ui/src/App.tsx

@@ -452,6 +452,7 @@ export class DusseldorfAPI {
 
         return this.get("domains")
             .then((resp) => {
+                console.log(resp);
                 if (resp.ok) {
                     return resp.json();
                 } else {

dusseldorf/ui/src/DusseldorfApi.ts

@@ -16,7 +16,7 @@ const API_HOST = (() => {
     const envHost = process.env.REACT_APP_API_HOST;
     if (envHost && envHost.trim() !== "") return envHost.trim();
     try {
-        const lsHost = window?.localStorage?.getItem("api_host");
+        const lsHost = localStorage?.getItem("api_host");
         if (lsHost && lsHost.trim() !== "") return lsHost.trim();
     } catch {
         // ignore access errors (e.g., privacy mode)
@@ -40,7 +40,7 @@ export default {
     client_id:  config.client_id,
     tenant_id:  config.tenant_id,
     // redir_url:  MYURL,
-
+    
     // success or not
     loaded:     false,
 

dusseldorf/ui/src/DusseldorfConfig.ts

@@ -82,7 +82,7 @@ export class Logger {
         this.Trace(msg, 'warn');
     };
 
-    static Error = (msg: any) => {
+    static Error = (msg: string | Error | unknown) => {
         const msgStr = String(msg)
         console.log(this.RED + msgStr + this.RESET)
         this.Trace(msgStr, 'error');