chore(deps-dev): bump eslint-plugin-formatjs from 4.11.1 to 4.13.1

.github/workflows/deployment-test.yml

@@ -104,7 +104,7 @@ jobs:
 
   test:
     needs: [deploy]
-    timeout-minutes: 15
+    timeout-minutes: 30
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/playwright.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   playwright:
-    timeout-minutes: 15
+    timeout-minutes: 30
     runs-on: ubuntu-latest
 
     steps:

apps/client/index.html

@@ -8,6 +8,7 @@
     <meta name="awsSecretAccessKey" content="{{clientAwsSecretAccessKey}}" />
     <meta name="awsSessionToken" content="{{clientAwsSessionToken}}" />
     <meta name="cognitoEndpoint" content="{{cognitoEndpoint}}" />
+    <meta name="edgeEndpoint" content="{{edgeEndpoint}}" />
     <meta name="identityPoolId" content="{{identityPoolId}}" />
     <meta name="region" content="{{region}}" />
     <meta name="userPoolWebClientId" content="{{userPoolWebClientId}}" />

apps/client/package.json

@@ -27,17 +27,17 @@
     "@aws-sdk/client-iot-events": "3.515.0",
     "@aws-sdk/client-iotsitewise": "3.515.0",
     "@aws-sdk/credential-providers": "3.515.0",
-    "@cloudscape-design/collection-hooks": "^1.0.36",
+    "@cloudscape-design/collection-hooks": "^1.0.37",
     "@cloudscape-design/component-toolkit": "^1.0.0-beta.38",
     "@cloudscape-design/components": "^3.0.518",
     "@cloudscape-design/design-tokens": "3.0.34",
     "@cloudscape-design/global-styles": "^1.0.23",
-    "@iot-app-kit/core": "10.0.0",
-    "@iot-app-kit/dashboard": "10.0.0",
-    "@tanstack/react-query": "^5.22.2",
+    "@iot-app-kit/core": "10.2.0",
+    "@iot-app-kit/dashboard": "10.2.0",
+    "@tanstack/react-query": "^5.24.1",
     "aws-amplify": "^5.3.11",
     "axios": "^1.6.7",
-    "cytoscape": "^3.27.0",
+    "cytoscape": "^3.28.1",
     "jotai": "^2.6.4",
     "nanoid": "3.1.31",
     "react": "^18.2.0",
@@ -49,7 +49,7 @@
     "react-use": "^17.4.2",
     "tiny-invariant": "^1.3.1",
     "uuid": "^9.0.1",
-    "vite": "^5.0.12",
+    "vite": "^5.1.5",
     "web-vitals": "^3.5.0"
   },
   "devDependencies": {
@@ -59,23 +59,23 @@
     "@hookform/devtools": "^4.3.1",
     "@originjs/vite-plugin-federation": "^1.3.3",
     "@tanstack/eslint-plugin-query": "^5.20.1",
-    "@tanstack/react-query-devtools": "^5.24.0",
+    "@tanstack/react-query-devtools": "^5.24.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.1.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.2.57",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^0.34.4",
     "@vitest/ui": "^1.1.1",
     "aws-sdk-client-mock": "^3.0.0",
     "aws-sdk-client-mock-jest": "^3.0.0",
-    "babel-plugin-formatjs": "^10.5.12",
+    "babel-plugin-formatjs": "^10.5.13",
     "customize-cra": "^1.0.0",
     "eslint-config-custom": "*",
-    "eslint-plugin-formatjs": "^4.11.1",
+    "eslint-plugin-formatjs": "^4.13.1",
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.1",

apps/client/src/auth/auth-service.interface.ts

@@ -31,4 +31,9 @@ export interface AuthService {
    * @param callback the callback function to call when application is signed-in
    */
   onSignedIn(callback: () => unknown): void;
+
+  // TODO: Refactor interface to only include shared methods
+  getEdgeEndpoint?(): string;
+
+  setEdgeEndpoint?(endpoint: string): void;
 }

apps/client/src/auth/auth-service.ts

@@ -34,6 +34,19 @@ class ClientAuthService {
   onSignedIn(callback: () => unknown) {
     return this.authService.onSignedIn(callback);
   }
+
+  setEdgeEndpoint(endpoint: string) {
+    if (this.authService.setEdgeEndpoint) {
+      this.authService.setEdgeEndpoint(endpoint);
+    }
+  }
+
+  getEdgeEndpoint() {
+    if (this.authService.getEdgeEndpoint) {
+      return this.authService.getEdgeEndpoint();
+    }
+    return '';
+  }
 }
 
 export const authService = new ClientAuthService();

apps/client/src/auth/edge-auth-service.ts

@@ -7,6 +7,15 @@ export class EdgeAuthService implements AuthService {
     accessKeyId: '',
     secretAccessKey: '',
   };
+  private edgeEndpoint = '0.0.0.0';
+
+  setEdgeEndpoint(endpoint: string) {
+    this.edgeEndpoint = endpoint;
+  }
+
+  getEdgeEndpoint() {
+    return this.edgeEndpoint;
+  }
 
   setAwsCredentials(credentials: AwsCredentialIdentity) {
     this.credentials = credentials;

apps/client/src/constants/format.ts

@@ -4,3 +4,4 @@ export const ROOT_INDEX_PAGE_FORMAT: Format = 'default';
 export const DASHBOARDS_INDEX_PAGE_FORMAT: Format = 'table';
 export const CREATE_DASHBOARD_PAGE_FORMAT: Format = 'form';
 export const DASHBOARD_PAGE_FORMAT: Format = 'default';
+export const EDGE_LOGIN_PAGE_FORMAT: Format = 'form';

apps/client/src/constants/index.ts

@@ -11,6 +11,7 @@ export const DASHBOARD_PATH = ':dashboardId';
 export const ROOT_HREF = '/';
 export const DASHBOARDS_HREF = '/dashboards';
 export const CREATE_DASHBOARD_HREF = '/dashboards/create';
+export const EDGE_LOGIN_HREF = '/edge-login';
 
 export const DEFAULT_CONTENT_DENSITY: ContentDensity = 'comfortable';
 export const CONTENT_DENSITY_KEY = 'content-density';

apps/client/src/helpers/meta-tags.ts

@@ -10,6 +10,7 @@ export const extractedMetaTags = (
     applicationName: '',
     authenticationFlowType: '',
     cognitoEndpoint: '',
+    edgeEndpoint: '',
     identityPoolId: '',
     region: '',
     userPoolId: '',

apps/client/src/helpers/strings/is-string-with-value.ts

@@ -0,0 +1,25 @@
+const isString = (value: unknown): value is string => {
+  return typeof value === 'string';
+};
+
+export const isStringWithValue = (value: unknown): value is string => {
+  return isString(value) && value !== '';
+};
+
+if (import.meta.vitest) {
+  it('returns true for string with value', () => {
+    expect(isStringWithValue('abc')).toBe(true);
+  });
+
+  it('returns false for string with no value', () => {
+    expect(isStringWithValue('')).toBe(false);
+  });
+
+  it('returns false for non-string value', () => {
+    expect(isStringWithValue({})).toBe(false);
+  });
+
+  it('returns false for undefined value', () => {
+    expect(isStringWithValue(undefined)).toBe(false);
+  });
+}

apps/client/src/hooks/dashboard/use-viewport.ts

@@ -1,7 +1,7 @@
 import { useLocalStorage } from 'react-use';
 import type { Viewport } from '@iot-app-kit/core';
 
-const DEFAULT_VIEWPORT: Viewport = { duration: '5 minutes' };
+const DEFAULT_VIEWPORT: Viewport = { duration: '5 minute' };
 export const useViewport = (dashboardId: string) => {
   return useLocalStorage<Viewport>(
     `dashboard-${dashboardId}-viewport`,

apps/client/src/index.tsx

@@ -13,14 +13,13 @@ import { queryClient } from './data/query-client';
 import { setServiceUrl } from './services';
 import metricHandler from './metrics/metric-handler';
 import { extractedMetaTags } from './helpers/meta-tags';
+import { isStringWithValue } from './helpers/strings/is-string-with-value';
 import { registerServiceWorker } from './register-service-worker';
 import { authService } from './auth/auth-service';
 import { initializeAuthDependents } from './initialize-auth-dependents';
 import { registerLogger } from './register-loggers';
 import { registerMetricsRecorder } from './register-metrics-recorder';
 
-import { EdgeLoginPage } from './routes/edge-login/edge-login-page';
-
 import '@aws-amplify/ui-react/styles.css';
 import '@cloudscape-design/global-styles/index.css';
 
@@ -36,6 +35,7 @@ const {
   authenticationFlowType,
   cognitoEndpoint,
   domainName,
+  edgeEndpoint,
   identityPoolId,
   logMode,
   metricsMode,
@@ -44,7 +44,11 @@ const {
   userPoolWebClientId,
 } = metadata;
 
-if (domainName && domainName !== '') {
+if (isStringWithValue(edgeEndpoint)) {
+  authService.setEdgeEndpoint(edgeEndpoint);
+}
+
+if (isStringWithValue(domainName)) {
   Amplify.configure({
     Auth: {
       authenticationFlowType,
@@ -95,10 +99,8 @@ if (authMode === 'edge') {
       <React.StrictMode>
         <IntlProvider locale="en" defaultLocale={DEFAULT_LOCALE}>
           <QueryClientProvider client={queryClient}>
-            <EdgeLoginPage>
-              <RouterProvider router={router} />
-              <ReactQueryDevtools initialIsOpen={false} />
-            </EdgeLoginPage>
+            <RouterProvider router={router} />
+            <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
         </IntlProvider>
       </React.StrictMode>,

apps/client/src/layout/components/top-navigation/top-navigation.tsx

@@ -4,11 +4,12 @@ import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import { SettingsModal } from './components/settings-modal';
-import { ROOT_HREF } from '~/constants';
+import { EDGE_LOGIN_HREF, ROOT_HREF } from '~/constants';
 import { preventFullPageLoad } from '~/helpers/events';
 import { useApplication } from '~/hooks/application/use-application';
 
 import { getAuthMode } from '~/helpers/authMode';
+import { authService } from '~/auth/auth-service';
 
 function EdgeNavigation() {
   const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
@@ -59,7 +60,11 @@ function EdgeNavigation() {
             iconName: 'user-profile',
             onItemClick: (event) => {
               if (event.detail.id === 'signout') {
-                // TODO: call signout for edge mode
+                authService.setAwsCredentials({
+                  accessKeyId: '',
+                  secretAccessKey: '',
+                });
+                navigate(EDGE_LOGIN_HREF);
               }
             },
             items: [

apps/client/src/routes/dashboards/dashboard/dashboard-configuration.ts

@@ -0,0 +1,43 @@
+import { type DashboardClientConfiguration } from '@iot-app-kit/dashboard';
+import { IoTSiteWiseClient } from '@aws-sdk/client-iotsitewise';
+import { IoTEventsClient } from '@aws-sdk/client-iot-events';
+import { IoTTwinMakerClient } from '@aws-sdk/client-iottwinmaker';
+import { getAuthMode } from '~/helpers/authMode';
+
+import { authService } from '~/auth/auth-service';
+
+export function getDashboardClientConfiguration(): DashboardClientConfiguration {
+  if (getAuthMode() === 'edge') {
+    return getEdgeClientConfig();
+  }
+
+  return getCloudClientConfig();
+}
+
+function getCloudClientConfig(): DashboardClientConfiguration {
+  return {
+    awsCredentials: () => authService.getAwsCredentials(),
+    awsRegion: authService.awsRegion,
+  };
+}
+
+function getEdgeClientConfig(): DashboardClientConfiguration {
+  const clientConfig = {
+    endpoint: authService.getEdgeEndpoint(),
+    credentials: () => authService.getAwsCredentials(),
+    region: authService.awsRegion,
+    disableHostPrefix: true,
+  };
+
+  const iotSiteWiseClient = new IoTSiteWiseClient(clientConfig);
+  const iotEventsClient = new IoTEventsClient(clientConfig);
+  const iotTwinMakerClient = new IoTTwinMakerClient(clientConfig);
+
+  const clients = {
+    iotSiteWiseClient,
+    iotEventsClient,
+    iotTwinMakerClient,
+  };
+
+  return clients;
+}

apps/client/src/routes/dashboards/dashboard/dashboard-page.tsx

@@ -18,9 +18,10 @@ import { useEmitNotification } from '~/hooks/notifications/use-emit-notification
 import { useDisplaySettings } from '~/hooks/dashboard/use-displaySettings';
 import { getDashboardEditMode, setDashboardEditMode } from '~/store/viewMode';
 import { GenericErrorNotification } from '~/structures/notifications/generic-error-notification';
+import { getDashboardClientConfiguration } from './dashboard-configuration';
+import { getAuthMode } from '~/helpers/authMode';
 
 import './styles.css';
-import { authService } from '~/auth/auth-service';
 
 export function DashboardPage() {
   const params = useParams<{ dashboardId: string }>();
@@ -65,14 +66,10 @@ export function DashboardPage() {
     return <DashboardLoadingState />;
   }
 
-  const awsRegion = authService.awsRegion;
-
   return (
     <IoTAppKitDashboard
-      clientConfiguration={{
-        awsCredentials: () => authService.getAwsCredentials(),
-        awsRegion,
-      }}
+      edgeMode={getAuthMode() === 'edge' ? 'enabled' : 'disabled'}
+      clientConfiguration={getDashboardClientConfiguration()}
       dashboardConfiguration={{
         ...dashboardDefinition,
         displaySettings,