Merge pull request #2482 from msupply-foundation/2479-URL-QR

mark-prins · web-flow · commit 4edd6ca9e5b4 · 2023-11-16T15:17:03.000+13:00
Show server URL &amp; QR
diff --git a/client/packages/android/app/src/main/java/org/openmsupply/client/NativeApi.java b/client/packages/android/app/src/main/java/org/openmsupply/client/NativeApi.java
@@ -29,10 +29,13 @@
 import java.net.HttpURLConnection;
 import java.net.InetAddress;
 import java.net.MalformedURLException;
+import java.net.NetworkInterface;
+import java.net.SocketException;
 import java.net.URL;
 import java.nio.charset.StandardCharsets;
 import java.util.ArrayDeque;
 import java.util.Deque;
+import java.util.Enumeration;
 
 import javax.net.ssl.SSLHandshakeException;
 
@@ -344,15 +347,34 @@ public void onResolveFailed(NsdServiceInfo serviceInfo, int errorCode) {
         });
     }
 
+    // Attempt to get a non-loopback address for the local server
+    // and fallback to loopback if there is an error
+    private String getLocalAddress(NsdServiceInfo serviceInfo){
+        try {
+            for (Enumeration<NetworkInterface> en = NetworkInterface.getNetworkInterfaces(); en.hasMoreElements();) {
+                NetworkInterface intf = en.nextElement();
+                for (Enumeration<InetAddress> enumIpAddr = intf.getInetAddresses(); enumIpAddr.hasMoreElements();) {
+                    InetAddress inetAddress = enumIpAddr.nextElement();
+                    if (!inetAddress.isLoopbackAddress() && !inetAddress.isLinkLocalAddress() && inetAddress.isSiteLocalAddress()) {
+                        return inetAddress.getHostAddress();
+                    }
+                }
+            }
+        } catch (SocketException ex) {
+            Log.e(OM_SUPPLY, ex.toString());
+        }
+        return serviceInfo.getHost().getHostAddress();
+    }
     private JSObject serviceInfoToObject(NsdServiceInfo serviceInfo) {
         String serverHardwareId = parseAttribute(serviceInfo, discoveryConstants.HARDWARE_ID_KEY);
+        Boolean isLocal = serverHardwareId.equals(discoveryConstants.hardwareId);
         return new JSObject()
                 .put("protocol", parseAttribute(serviceInfo, discoveryConstants.PROTOCOL_KEY))
                 .put("clientVersion", parseAttribute(serviceInfo, discoveryConstants.CLIENT_VERSION_KEY))
                 .put("port", serviceInfo.getPort())
-                .put("ip", serviceInfo.getHost().getHostAddress())
+                .put("ip", isLocal ? getLocalAddress(serviceInfo) : serviceInfo.getHost().getHostAddress())
                 .put("hardwareId", serverHardwareId)
-                .put("isLocal", serverHardwareId.equals(discoveryConstants.hardwareId));
+                .put("isLocal", isLocal);
 
     }
 
@@ -472,6 +494,13 @@ public class FrontEndHost {
         JSObject data;
 
         public FrontEndHost(JSObject data) {
+            String ip = data.getString("ip");
+            // attempt to translate loopback addresses to an actual IP address
+            // so that we can display the local server IP for users to connect to the API
+            if (data.getBool("isLocal") && (ip.equals("127.0.0.1") || ip.equals("localhost"))) {
+                NsdServiceInfo serviceInfo = createLocalServiceInfo();
+                data.put("ip", getLocalAddress(serviceInfo));
+            }
             this.data = data;
         }
 
diff --git a/client/packages/common/src/intl/locales/en/common.json b/client/packages/common/src/intl/locales/en/common.json
@@ -359,6 +359,7 @@
   "message.copy-success": "Copied to clipboard successfully",
   "messages.ago": "{{time}} ago",
   "messages.cant-delete-generic": "You cannot delete one or more of the selected items",
+  "messages.click-to-expand": "Click to expand",
   "messages.confirm-cancel-generic": "You will lose any changes you have made to this form",
   "messages.confirm-delete-generic": "This will permanently remove data",
   "messages.confirm-delete-shipment": "This will permanently remove Shipment #{{number}}",
diff --git a/client/packages/common/src/ui/discovery/DiscoveredServers.tsx b/client/packages/common/src/ui/discovery/DiscoveredServers.tsx
@@ -13,8 +13,6 @@ import {
   FrontEndHost,
   useNativeClient,
   GqlProvider,
-  useInitialisationStatus,
-  InitialisationStatusType,
   frontEndHostDiscoveryGraphql,
   IconButton,
   RefreshIcon,
@@ -160,16 +158,9 @@ const DiscoveredServer: React.FC<DiscoveredServerProps> = ({
   server,
   connect,
 }) => {
-  const { data: initStatus } = useInitialisationStatus();
   const t = useTranslation('app');
   const { error } = useNotification();
 
-  const getSiteName = () => {
-    if (initStatus?.status == InitialisationStatusType.Initialised)
-      return initStatus?.siteName;
-    return t('messages.not-initialised');
-  };
-
   const handleConnectionResult = async (result: ConnectionResult) => {
     if (result.success) return;
 
@@ -190,20 +181,7 @@ const DiscoveredServer: React.FC<DiscoveredServerProps> = ({
           <CheckboxEmptyIcon fontSize="small" color="primary" />
         </Box>
         <Box flexShrink={0} flexBasis="200px">
-          <Typography
-            sx={{
-              color:
-                initStatus?.status == InitialisationStatusType.Initialised
-                  ? 'inherit'
-                  : 'gray.light',
-              fontSize: 20,
-              fontWeight: 'bold',
-              lineHeight: 1,
-            }}
-          >
-            {getSiteName()}
-          </Typography>
-          <Typography sx={{ fontSize: 11 }}>
+          <Typography sx={{ fontSize: 14, fontWeight: 'bold' }}>
             {frontEndHostDisplay(server)}
           </Typography>
         </Box>
diff --git a/client/packages/electron/src/electron.ts b/client/packages/electron/src/electron.ts
@@ -6,6 +6,7 @@ import {
   Menu,
   MenuItemConstructorOptions,
   shell,
+  webContents,
 } from 'electron';
 import dnssd from 'dnssd';
 import { IPC_MESSAGES } from './shared';
@@ -183,6 +184,11 @@ const tryToConnectToServer = (window: BrowserWindow, server: FrontEndHost) => {
 };
 
 const connectToServer = (window: BrowserWindow, server: FrontEndHost) => {
+  // translate loopback addresses to allow for clients, such as CCA to connect
+  // to the API by IP address
+  if (server.isLocal && isLoopback(server.ip)) {
+    server.ip = getIpAddress('public');
+  }
   discovery.stop();
   connectedServer = server;
 
@@ -276,15 +282,14 @@ const start = (): void => {
     if (!(typeof hardwareId === 'string')) return;
 
     const ip = addresses.find(isV4Format);
-
     if (!ip) return;
 
     discoveredServers.push({
       port,
       protocol,
       ip,
       clientVersion: clientVersion || '',
-      isLocal: ip === getIpAddress() || ip === '127.0.0.1',
+      isLocal: ip === getIpAddress() || isLoopback(ip),
       hardwareId,
     });
   });
@@ -303,6 +308,11 @@ const start = (): void => {
   );
 };
 
+const isLoopback = (ip: string) =>
+  ip === '127.0.0.1' ||
+  ip.toLowerCase() === 'localhost' ||
+  ip.toLowerCase() === '::1';
+
 app.on('ready', start);
 
 app.on('window-all-closed', () => {
@@ -446,6 +456,40 @@ const helpMenu: MenuItemConstructorOptions = {
         );
       },
     },
+    {
+      label: 'Clear Data',
+      click: () => {
+        dialog
+          .showMessageBox({
+            type: 'question',
+            title: 'Confirmation',
+            message:
+              'This will clear all local data and close the application. Are you sure?',
+            buttons: ['Yes', 'No'],
+          })
+          .then(result => {
+            // Bail if the user pressed "No" or escaped (ESC) from the dialog box
+            if (result.response !== 0) {
+              return;
+            }
+            store.clear();
+            const contents = webContents.getFocusedWebContents();
+            if (contents) {
+              contents.executeJavaScript(`localStorage.clear();`);
+            }
+            app.exit();
+          });
+      },
+    },
+    {
+      label: 'Developer Tools',
+      click: () => {
+        const contents = webContents.getFocusedWebContents();
+        if (contents) {
+          contents.openDevTools();
+        }
+      },
+    },
     { role: 'about' },
   ],
 };
diff --git a/client/packages/host/package.json b/client/packages/host/package.json
@@ -27,18 +27,19 @@
   },
   "dependencies": {
     "@fontsource-variable/inter": "^5.0.5",
+    "@openmsupply-client/coldchain": "^0.0.0",
     "@openmsupply-client/common": "^0.0.1",
     "@openmsupply-client/config": "^0.0.0",
     "@openmsupply-client/dashboard": "^0.0.0",
     "@openmsupply-client/inventory": "^0.0.0",
     "@openmsupply-client/invoices": "^0.0.0",
     "@openmsupply-client/requisitions": "^0.0.0",
     "@openmsupply-client/system": "^0.0.0",
-    "@openmsupply-client/coldchain": "^0.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "history": "^5.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-qr-code": "^2.0.12",
     "swc-loader": "^0.2.0",
     "webpack-bundle-analyzer": "^4.9.0"
   },
diff --git a/client/packages/host/src/components/Sync/ServerInfo.tsx b/client/packages/host/src/components/Sync/ServerInfo.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  AppBarButtonsPortal,
+  Box,
+  Tooltip,
+  Typography,
+  frontEndHostUrl,
+  useNativeClient,
+  usePopover,
+  useTranslation,
+} from '@openmsupply-client/common';
+import QRCode from 'react-qr-code';
+import { ClickAwayListener } from '@mui/base';
+
+const ServerInfoComponent = () => {
+  const { connectedServer } = useNativeClient();
+  const t = useTranslation();
+  const { show, hide, Popover } = usePopover();
+  const serverUrl = !!connectedServer
+    ? frontEndHostUrl(connectedServer)
+    : window.location.origin;
+
+  return (
+    <AppBarButtonsPortal>
+      <Box display="flex" flexDirection="column" padding={1}>
+        <Tooltip title={t('messages.click-to-expand')}>
+          <Box
+            display="flex"
+            justifyContent="flex-end"
+            onClick={show}
+            sx={{ cursor: 'pointer' }}
+          >
+            <QRCode value={serverUrl} size={50} />
+          </Box>
+        </Tooltip>
+        <Popover onClick={hide}>
+          <ClickAwayListener onClickAway={hide}>
+            <Box
+              padding={2}
+              sx={{
+                backgroundColor: 'background.white',
+                borderRadius: 1,
+                boxShadow: theme => theme.shadows[3],
+              }}
+            >
+              <QRCode value={serverUrl} size={256} />
+            </Box>
+          </ClickAwayListener>
+        </Popover>
+        <Box display="flex">
+          <Typography color={'gray.dark'} fontWeight={'bold'} paddingRight={1}>
+            {t('label.server')}:
+          </Typography>
+          <Typography color={'gray.main'}>{serverUrl}</Typography>
+        </Box>
+      </Box>
+    </AppBarButtonsPortal>
+  );
+};
+
+export const ServerInfo = React.memo(ServerInfoComponent);
diff --git a/client/packages/host/src/components/Sync/Sync.tsx b/client/packages/host/src/components/Sync/Sync.tsx
@@ -16,6 +16,7 @@ import {
 } from '@openmsupply-client/common';
 import { useSync } from '@openmsupply-client/system';
 import { SyncProgress } from '../SyncProgress';
+import { ServerInfo } from './ServerInfo';
 
 const STATUS_POLLING_INTERVAL = 1000;
 
@@ -103,7 +104,7 @@ const useUpdateUser = () => {
   };
 };
 
-export const Sync: React.FC = () => {
+export const Sync = () => {
   const t = useTranslation('app');
   const {
     syncStatus,
@@ -122,6 +123,7 @@ export const Sync: React.FC = () => {
 
   return (
     <Grid style={{ padding: 15 }} justifyContent="center">
+      <ServerInfo />
       <Grid
         container
         flexDirection="column"
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -14125,6 +14125,11 @@ pvutils@^1.1.3:
   resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3"
   integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+
 qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
@@ -14314,6 +14319,14 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-qr-code@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.12.tgz#98f99e9ad5ede46d73ab819e2dd9925c5f5d7a2d"
+  integrity sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==
+  dependencies:
+    prop-types "^15.8.1"
+    qr.js "0.0.0"
+
 react-query@^3.34.12:
   version "3.39.3"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
