fix(composer): refactor scene modal rendering

packages/scene-composer/src/common/componentTypeStings.spec.ts

@@ -0,0 +1,38 @@
+import { useIntl } from 'react-intl';
+
+import { KnownComponentType } from '../interfaces';
+import { Component } from '../models/SceneModels';
+import { IDataOverlayComponentInternal, ISceneComponentInternal } from '../store';
+
+import { getLocalizedComponentType } from './componentTypeStings';
+
+describe('getLocalizedComponentType', () => {
+  const intl = useIntl();
+
+  it('should get correct string for EntityBinding', () => {
+    const component: ISceneComponentInternal = { ref: 'entity-binding-ref', type: KnownComponentType.EntityBinding };
+    expect(getLocalizedComponentType(component, intl)).toEqual('Entity data binding');
+  });
+
+  it('should get correct string for Overlay', () => {
+    const component: IDataOverlayComponentInternal = {
+      ref: 'overlay-ref',
+      type: KnownComponentType.DataOverlay,
+      subType: Component.DataOverlaySubType.OverlayPanel,
+      dataRows: [],
+      valueDataBindings: [],
+    };
+    expect(getLocalizedComponentType(component, intl)).toEqual('Overlay');
+  });
+
+  it('should get correct string for Annotation', () => {
+    const component: IDataOverlayComponentInternal = {
+      ref: 'annotation-ref',
+      type: KnownComponentType.DataOverlay,
+      subType: Component.DataOverlaySubType.TextAnnotation,
+      dataRows: [],
+      valueDataBindings: [],
+    };
+    expect(getLocalizedComponentType(component, intl)).toEqual('Annotation');
+  });
+});

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

@@ -0,0 +1,65 @@
+import { IntlShape, defineMessages } from 'react-intl';
+
+import { IDataOverlayComponent, KnownComponentType } from '../interfaces';
+import { Component } from '../models/SceneModels';
+import { ISceneComponentInternal } from '../store';
+
+export const i18nKnownComponentTypesStrings = defineMessages({
+  [KnownComponentType.ModelRef]: {
+    defaultMessage: 'Model Reference',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.SubModelRef]: {
+    defaultMessage: 'Model Reference',
+    description: 'Expandable Section Title',
+  },
+  [KnownComponentType.Camera]: {
+    defaultMessage: 'Camera',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.Light]: {
+    defaultMessage: 'Light',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.Tag]: {
+    defaultMessage: 'Tag',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.EntityBinding]: {
+    defaultMessage: 'Entity data binding',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.ModelShader]: {
+    defaultMessage: 'Model Shader',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.MotionIndicator]: {
+    defaultMessage: 'Motion Indicator',
+    description: 'Expandable Section title',
+  },
+  [Component.DataOverlaySubType.TextAnnotation]: {
+    defaultMessage: 'Annotation',
+    description: 'Expandable Section title',
+  },
+  [Component.DataOverlaySubType.OverlayPanel]: {
+    defaultMessage: 'Overlay',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.Animation]: {
+    defaultMessage: 'Animation',
+    description: 'Expandable Section title',
+  },
+  [KnownComponentType.PlaneGeometry]: {
+    defaultMessage: 'Plane Geometry',
+    description: 'Expandable Section title',
+  },
+});
+
+export const getLocalizedComponentType = (component: ISceneComponentInternal, intl: IntlShape): string => {
+  return (
+    (component.type === KnownComponentType.DataOverlay
+      ? intl.formatMessage(i18nKnownComponentTypesStrings[(component as IDataOverlayComponent).subType]) ||
+        (component as IDataOverlayComponent).subType
+      : intl.formatMessage(i18nKnownComponentTypesStrings[component.type])) || component.type
+  );
+};

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

@@ -1,6 +1,8 @@
 import { KnownComponentType } from '../interfaces';
 
+// Backend limits
 export const MAX_PROPERTY_STRING_LENGTH = 2048;
+export const MAX_QUERY_HOP = 30;
 
 // Scene Nodes
 const SCENE_COMPONENT_TYPE_ID_PREFIX = 'com.amazon.iottwinmaker.3d';

packages/scene-composer/src/components/DefaultErrorFallback/__tests__/__snapshots__/DefaultErrorFallback.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`DefaultErrorFallback should render correctly with a Error type 1`] = `
       </MockTextContent>
     </Styled(MockContainer)>
   }
-  showModal={true}
 />
 `;
 
@@ -42,7 +41,6 @@ exports[`DefaultErrorFallback should render correctly with a SceneComposerRuntim
       </MockTextContent>
     </Styled(MockContainer)>
   }
-  showModal={true}
 />
 `;
 
@@ -65,7 +63,6 @@ exports[`DefaultErrorFallback should render correctly with a String type 1`] = `
       </MockTextContent>
     </Styled(MockContainer)>
   }
-  showModal={true}
 />
 `;
 
@@ -88,6 +85,5 @@ exports[`DefaultErrorFallback should render correctly with a Unknown type 1`] =
       </MockTextContent>
     </Styled(MockContainer)>
   }
-  showModal={true}
 />
 `;

packages/scene-composer/src/components/DefaultErrorFallback/index.tsx

@@ -33,7 +33,6 @@ const DefaultErrorFallback: FC<ErrorFallbackProps> = ({ error }) => {
 
   return (
     <StaticLayout
-      showModal={true}
       modalContent={
         <CenteredContainer header={<Header variant='h2'>{errorTitle}</Header>}>
           <TextContent>

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

@@ -29,7 +29,7 @@ import { DataStream } from '@iot-app-kit/core';
 import useActiveCamera from '../hooks/useActiveCamera';
 import { KnownComponentType } from '..';
 import * as THREE from 'three';
-import { SCENE_CAPABILITY_MATTERPORT } from '../common/constants';
+import { MATTERPORT_ERROR, SCENE_CAPABILITY_MATTERPORT } from '../common/constants';
 import { TwinMakerSceneMetadataModule } from '@iot-app-kit/source-iottwinmaker';
 import { MpSdk } from '@matterport/webcomponent';
 import { SceneComposerInternalConfig } from '../interfaces/sceneComposerInternal';
@@ -60,7 +60,7 @@ describe('StateManager', () => {
   const getObject3DBySceneNodeRef = jest.fn().mockReturnValue(object3D);
   const baseState = {
     loadScene: jest.fn(),
-    getMessages: jest.fn().mockReturnValue(['messagge']),
+    addMessages: jest.fn(),
     getObject3DBySceneNodeRef,
     selectedSceneNodeRef: undefined,
     sceneLoaded: false,
@@ -284,7 +284,7 @@ describe('StateManager', () => {
       ...createState('mockConnectionName'),
       getSceneProperty: jest.fn().mockReturnValue('mockMatterportModelId'),
     });
-    getSceneInfo.mockResolvedValue({ error: { message: 'Client id and secret not valid' } });
+    getSceneInfo.mockResolvedValue({ error: { message: 'Client id and secret not valid', code: MATTERPORT_ERROR } });
 
     let container;
     await act(async () => {
@@ -301,7 +301,7 @@ describe('StateManager', () => {
       await flushPromises();
     });
 
-    expect(container).toMatchSnapshot();
+    expect(baseState.addMessages).toBeCalledTimes(1);
   });
 
   it("should subscribe to query's provider succcessfully", async () => {

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

@@ -88,7 +88,6 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
   const [updatedExternalLibraryConfig, setUpdatedExternalLibraryConfig] = useState<ExternalLibraryConfig | undefined>(
     externalLibraryConfig,
   );
-  const messages = useStore(sceneComposerId)((state) => state.getMessages());
   const matterportModelId = useStore(sceneComposerId)((state) =>
     state.getSceneProperty<string>(KnownSceneProperty.MatterportModelId),
   );
@@ -104,8 +103,6 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
   const prevSelection = useRef<string | undefined>(undefined);
   const [matterportReady, setMatterportReady] = useState<boolean>(false);
 
-  const convertSceneModalVisible = useStore(sceneComposerId)((state) => !!state.convertSceneModalVisible);
-
   const { setActiveCameraSettings, setActiveCameraName } = useActiveCamera();
 
   const standardUriModifier = useMemo(
@@ -416,13 +413,9 @@ const StateManager: React.FC<SceneComposerInternalProps> = ({
     [setSelectedSceneNodeRef],
   );
 
-  const showMessageModal = messages.length > 0;
-
   return (
     <SceneLayout
       isViewing={isViewing}
-      showMessageModal={showMessageModal}
-      showConvertSceneModal={convertSceneModalVisible}
       externalLibraryConfig={updatedExternalLibraryConfig}
       LoadingView={
         <IntlProvider locale={config.locale}>

packages/scene-composer/src/components/__snapshots__/SceneComposerInternalSnap.spec.tsx.snap

@@ -65,7 +65,6 @@ exports[`SceneComposerInternal should render a default error view when loading a
         }
       />
     }
-    showModal={true}
     topBar={<TopBar />}
   />
 </div>
@@ -100,7 +99,6 @@ exports[`SceneComposerInternal should render a default error view when unknown e
         </MockTextContent>
       </Styled(MockContainer)>
     }
-    showModal={true}
   />
 </div>
 `;
@@ -171,7 +169,6 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
           }
         />
       }
-      showModal={true}
       topBar={<TopBar />}
     />
   </div>
@@ -228,7 +225,7 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
           </LogProvider>
         </React.Fragment>
       }
-      modalContent={<MessageModal />}
+      modalContent={null}
       rightPanel={
         <ScenePanel
           direction="Right"
@@ -239,7 +236,6 @@ exports[`SceneComposerInternal should render both valid and invalid scene correc
           }
         />
       }
-      showModal={false}
       topBar={<TopBar />}
     />
   </div>
@@ -300,7 +296,7 @@ exports[`SceneComposerInternal should render correctly with a valid scene in edi
         </LogProvider>
       </React.Fragment>
     }
-    modalContent={<MessageModal />}
+    modalContent={null}
     rightPanel={
       <ScenePanel
         direction="Right"
@@ -311,7 +307,6 @@ exports[`SceneComposerInternal should render correctly with a valid scene in edi
         }
       />
     }
-    showModal={false}
     topBar={<TopBar />}
   />
 </div>
@@ -365,7 +360,7 @@ exports[`SceneComposerInternal should render correctly with an empty scene in ed
         </LogProvider>
       </React.Fragment>
     }
-    modalContent={<MessageModal />}
+    modalContent={null}
     rightPanel={
       <ScenePanel
         direction="Right"
@@ -376,7 +371,6 @@ exports[`SceneComposerInternal should render correctly with an empty scene in ed
         }
       />
     }
-    showModal={false}
     topBar={<TopBar />}
   />
 </div>
@@ -430,9 +424,8 @@ exports[`SceneComposerInternal should render correctly with an empty scene in vi
         </LogProvider>
       </React.Fragment>
     }
-    modalContent={<MessageModal />}
+    modalContent={null}
     rightPanel={false}
-    showModal={false}
     topBar={<TopBar />}
   />
 </div>
@@ -503,7 +496,6 @@ exports[`SceneComposerInternal should render error when major version is newer 1
         }
       />
     }
-    showModal={true}
     topBar={<TopBar />}
   />
 </div>
@@ -574,7 +566,6 @@ exports[`SceneComposerInternal should render error when specVersion is invalid 1
         }
       />
     }
-    showModal={true}
     topBar={<TopBar />}
   />
 </div>
@@ -645,7 +636,6 @@ exports[`SceneComposerInternal should render warning when minor version is newer
         }
       />
     }
-    showModal={true}
     topBar={<TopBar />}
   />
 </div>
@@ -706,7 +696,7 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
           </LogProvider>
         </React.Fragment>
       }
-      modalContent={<MessageModal />}
+      modalContent={null}
       rightPanel={
         <ScenePanel
           direction="Right"
@@ -717,7 +707,6 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
           }
         />
       }
-      showModal={false}
       topBar={<TopBar />}
     />
   </div>
@@ -774,7 +763,7 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
           </LogProvider>
         </React.Fragment>
       }
-      modalContent={<MessageModal />}
+      modalContent={null}
       rightPanel={
         <ScenePanel
           direction="Right"
@@ -785,7 +774,6 @@ exports[`SceneComposerInternal should support rendering multiple valid scenes 1`
           }
         />
       }
-      showModal={false}
       topBar={<TopBar />}
     />
   </div>

packages/scene-composer/src/components/__snapshots__/StateManager.spec.tsx.snap

@@ -10,8 +10,6 @@ exports[`StateManager should render correctly 1`] = `
   externalLibraryConfig={Object {}}
   isViewing={false}
   onPointerMissed={[Function]}
-  showConvertSceneModal={false}
-  showMessageModal={true}
 />
 `;
 
@@ -33,22 +31,6 @@ exports[`StateManager should render correctly with Matterport configuration 1`]
   }
   isViewing={false}
   onPointerMissed={[Function]}
-  showConvertSceneModal={false}
-  showMessageModal={true}
-/>
-`;
-
-exports[`StateManager should render correctly with error in Matterport configuration 1`] = `
-<SceneLayout
-  LoadingView={
-    <Provider>
-      <LoadingProgress />
-    </Provider>
-  }
-  isViewing={false}
-  onPointerMissed={[Function]}
-  showConvertSceneModal={false}
-  showMessageModal={true}
 />
 `;