feat(composer): support showing flash message

packages/core/src/common/types.ts

@@ -9,7 +9,18 @@ import type {
   TimeSeriesData,
 } from '../data-module/types';
 
-export type ErrorDetails = { msg: string; type?: string; status?: string };
+export type ErrorDetails<T = undefined> = T extends undefined
+  ? {
+      msg: string;
+      type?: string;
+      status?: string;
+    }
+  : {
+      msg: string;
+      type?: string;
+      status?: string;
+      meta: T;
+    };
 
 export interface ProviderObserver<DataType> {
   next: (data: DataType) => void;

packages/scene-composer/tests/GlobalSettings.spec.ts → packages/scene-composer/src/common/GlobalSettings.spec.ts

@@ -4,7 +4,8 @@ import {
   setDracoDecoder,
   setMetricRecorder,
   setFeatureConfig,
-} from '../src/common/GlobalSettings';
+  setOnFlashMessage,
+} from './GlobalSettings';
 
 describe('GlobalSettings', () => {
   it('should be able to setDebugMode', () => {
@@ -32,4 +33,16 @@ describe('GlobalSettings', () => {
     setFeatureConfig(mockConfig as any);
     expect(getGlobalSettings().featureConfig).toEqual(mockConfig);
   });
+
+  it('should be able to setOnFlashMessage', () => {
+    let testValue = 0;
+    const mockCallback = () => {
+      testValue = 1;
+    };
+    expect(getGlobalSettings().onFlashMessage).toBeUndefined();
+    setOnFlashMessage(mockCallback);
+    expect(getGlobalSettings().onFlashMessage).toEqual(mockCallback);
+    getGlobalSettings().onFlashMessage!({});
+    expect(testValue).toEqual(1);
+  });
 });

packages/scene-composer/src/common/GlobalSettings.ts

@@ -4,6 +4,7 @@ import { MpSdk } from '@matterport/r3f/dist';
 import { DracoDecoderConfig, GetSceneObjectFunction } from '../interfaces/sceneViewer';
 import { COMPOSER_FEATURES, FeatureConfig } from '../interfaces';
 import { IMetricRecorder } from '../interfaces/metricRecorder';
+import { FlashMessageDefinition } from '../interfaces/sceneComposerInternal';
 
 const globalSettings: {
   debugMode: boolean;
@@ -14,6 +15,7 @@ const globalSettings: {
   getSceneObjectFunction: GetSceneObjectFunction | undefined;
   twinMakerSceneMetadataModule: TwinMakerSceneMetadataModule | undefined;
   matterportSdks: Record<string, MpSdk | undefined>;
+  onFlashMessage?: (message: FlashMessageDefinition) => void;
 } = {
   debugMode: false,
   dracoDecoder: { enable: true },
@@ -71,6 +73,11 @@ export const setMatterportSdk = (sceneId: string, sdk?: MpSdk): void => {
   notifySubscribers();
 };
 
+export const setOnFlashMessage = (onFlashMessage?: (message: FlashMessageDefinition) => void): void => {
+  globalSettings.onFlashMessage = onFlashMessage;
+  notifySubscribers();
+};
+
 export const getMatterportSdk = (sceneId: string): MpSdk | undefined => {
   return globalSettings.matterportSdks[sceneId];
 };

packages/scene-composer/src/components/StateManager.tsx

@@ -17,6 +17,7 @@ import {
   setGetSceneObjectFunction,
   setLocale,
   setMetricRecorder,
+  setOnFlashMessage,
   setTwinMakerSceneMetadataModule,
   subscribe,
   unsubscribe,
@@ -63,6 +64,7 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
   externalLibraryConfig,
   activeCamera,
   selectedDataBinding,
+  onFlashMessage,
 }: SceneComposerInternalProps) => {
   useLifecycleLogging('StateManager');
   const sceneComposerId = useSceneComposerId();
@@ -223,6 +225,10 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
     }
   }, [config.locale]);
 
+  useEffect(() => {
+    setOnFlashMessage(onFlashMessage);
+  }, [onFlashMessage]);
+
   useEffect(() => {
     setGetSceneObjectFunction(sceneLoader.getSceneObject);
   }, [sceneLoader]);

packages/scene-composer/src/components/panels/scene-settings/FogSettingsEditor.spec.tsx

@@ -122,7 +122,7 @@ describe('FogSettingsEditor', () => {
           near: 1,
           far: 1000,
         };
-      } else if (property === KnownSceneProperty.TagCustomColors) {
+      } else if (property === KnownSceneProperty.FogCustomColors) {
         const customColors: string[] = [];
         return customColors;
       }

packages/scene-composer/src/interfaces/sceneComposerInternal.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FlashbarProps } from '@cloudscape-design/components';
 
 import ILogger from '../logger/ILogger';
 
@@ -29,6 +30,8 @@ export type OnSceneUpdateCallback = (snapshot: ISceneDocumentSnapshot) => void;
 export type AssetBrowserResultCallback = (s3bucketArn: string | null, selectedAssetContentLocation: string) => void;
 export type ShowAssetBrowserCallback = (callback: AssetBrowserResultCallback, typelist?: AssetType[]) => void;
 
+export interface FlashMessageDefinition extends FlashbarProps.MessageDefinition {}
+
 export interface SceneComposerInternalProps extends SceneViewerPropsShared {
   onSceneUpdated?: OnSceneUpdateCallback;
 
@@ -37,5 +40,7 @@ export interface SceneComposerInternalProps extends SceneViewerPropsShared {
   ErrorView?: ReactNode;
   onError?(error: Error, errorInfo?: { componentStack: string }): void;
 
+  onFlashMessage?(message: FlashMessageDefinition): void;
+
   config: SceneComposerInternalConfig;
 }

packages/scene-composer/stories/components/scene-composer.tsx

@@ -7,19 +7,21 @@ import { TimeSync, TimeSelection } from '@iot-app-kit/react-components';
 
 import {
   AssetType,
-  AssetBrowserResultCallback,
   COMPOSER_FEATURES,
   ExternalLibraryConfig,
   ISceneDocumentSnapshot,
-  OnSceneUpdateCallback,
-  OperationMode,
-  SceneComposerInternal,
-  SceneViewerPropsShared,
-  ShowAssetBrowserCallback,
   ModelFileTypeList,
+  SceneViewerPropsShared,
   TextureFileTypeList,
 } from '../../src';
 import { convertDataInputToDataStreams, getTestDataInputContinuous } from '../../tests/testData';
+import {
+  AssetBrowserResultCallback,
+  OnSceneUpdateCallback,
+  OperationMode,
+  ShowAssetBrowserCallback,
+} from '../../src/interfaces/sceneComposerInternal';
+import { SceneComposerInternal } from '../../src/components/SceneComposerInternal';
 
 import ThemeManager, { ThemeManagerProps } from './theme-manager';
 import useLoader from './hooks/useLoader';

packages/scene-composer/stories/components/theme-manager.tsx

@@ -1,7 +1,7 @@
 import { Mode, Density, applyDensity, applyMode } from '@awsui/global-styles';
 import React, { FC, ReactNode, useEffect } from 'react';
 
-import { setDebugMode } from '../../src';
+import { setDebugMode } from '../../src/common/GlobalSettings';
 
 export interface ThemeManagerProps {
   theme?: 'light' | 'dark';

packages/source-iottwinmaker/src/data-binding-provider/EntityPropertyBindingProviderStore.spec.ts

@@ -173,6 +173,9 @@ describe('EntityPropertyBindingProviderStore', () => {
       msg: 'mock error message.',
       status: undefined,
       type: 'error name',
+      meta: {
+        entityId: mockDataBindingInput.dataBindingContext.entityId,
+      },
     });
   });
 

packages/source-iottwinmaker/src/index.ts

@@ -24,3 +24,4 @@ export {
   undecorateDataBindingTemplate,
 } from './utils/dataBindingTemplateUtils';
 export * from './data-binding-provider/types';
+export type { FetchEntityErrorMeta } from './metadata-module/types';

packages/source-iottwinmaker/src/metadata-module/TwinMakerMetadataModule.spec.ts

@@ -3,6 +3,7 @@ import { ErrorDetails } from '@iot-app-kit/core';
 import { createMockTwinMakerSDK } from '../__mocks__/iottwinmakerSDK';
 import { TwinMakerMetadataModule } from './TwinMakerMetadataModule';
 import { QueryClient } from '@tanstack/query-core';
+import { FetchEntityErrorMeta } from './types';
 
 const createCache = () =>
   new QueryClient({
@@ -79,10 +80,11 @@ describe('TwinMakerMetadataModule', () => {
         message: 'random-error-message',
         $metadata: { httpStatusCode: '401' },
       };
-      const mockErrorDetails: ErrorDetails = {
+      const mockErrorDetails: ErrorDetails<FetchEntityErrorMeta> = {
         msg: mockError.message,
         type: mockError.name,
         status: mockError.$metadata.httpStatusCode,
+        meta: { entityId: 'random' },
       };
       getEntity.mockRejectedValue(mockError as never);
 

packages/source-iottwinmaker/src/metadata-module/TwinMakerMetadataModule.ts

@@ -12,6 +12,7 @@ import type {
 import type { ErrorDetails } from '@iot-app-kit/core';
 import { QueryClient } from '@tanstack/query-core';
 import { isDefined } from '../utils/propertyValueUtils';
+import { FetchEntityErrorMeta } from './types';
 
 export class TwinMakerMetadataModule {
   private readonly workspaceId: string;
@@ -52,10 +53,11 @@ export class TwinMakerMetadataModule {
 
       return response;
     } catch (err: any) {
-      const errorDetail: ErrorDetails = {
+      const errorDetail: ErrorDetails<FetchEntityErrorMeta> = {
         msg: err.message,
         type: err.name,
         status: err.$metadata?.httpStatusCode,
+        meta: { entityId },
       };
 
       throw errorDetail;

packages/source-iottwinmaker/src/metadata-module/types.ts

@@ -0,0 +1,3 @@
+export interface FetchEntityErrorMeta {
+  entityId: string;
+}