feat(TM-source): add entity data binding provider

awslabs · Jun 29, 2023 · d1c459d · d1c459d
1 parent c0595f6
commit d1c459d
Show file tree

Hide file tree

Showing 21 changed files with 1,044 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -46,7 +46,7 @@
     "convert-svg": "npx @svgr/cli --out-dir src/assets/auto-gen/icons/ --typescript --index-template tools/index-template.js -- src/assets/icons/",
     "release": "run-s compile copy-assets",
     "copy-assets": "copyfiles -e \"**/*.tsx\" -e \"**/*.ts\" -e \"**/*.snap\" -e \"**/*.js\" -e \"**/*.jsx\" -e \"**/*.json\" \"src/**/*\" dist/",
-    "lint": "eslint . --max-warnings=718",
+    "lint": "eslint . --max-warnings=714",
     "fix": "eslint --fix .",
     "test": "jest --config jest.config.ts --coverage --silent",
     "test:dev": "jest --config jest.config.ts --coverage",
@@ -78,7 +78,6 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/runtime": "^7.22.5",
     "@formatjs/cli": "6.1.3",
-    "@iot-app-kit/source-iottwinmaker": "6.3.1",
     "@react-spring/three": "^9.7.2",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
@@ -137,6 +136,7 @@
     "@formatjs/ts-transformer": "3.13.3",
     "@iot-app-kit/core": "6.3.1",
     "@iot-app-kit/related-table": "6.3.1",
+    "@iot-app-kit/source-iottwinmaker": "6.3.1",
     "@matterport/r3f": "^0.2.6",
     "@matterport/webcomponent": "^0.1.26",
     "@react-three/drei": "9.56.27",

diff --git a/packages/scene-composer/src/components/panels/AddComponentMenu.spec.tsx b/packages/scene-composer/src/components/panels/AddComponentMenu.spec.tsx
@@ -102,7 +102,7 @@ describe('AddComponentMenu', () => {
     expect(addComponentInternal).toBeCalledWith(selectedSceneNodeRef, {
       ref: expect.any(String),
       type: KnownComponentType.EntityBinding,
-      valueDataBinding: { dataBindingContext: '' },
+      valueDataBinding: { dataBindingContext: undefined },
     });
     expect(mockMetricRecorder.recordClick).toBeCalledTimes(1);
     expect(mockMetricRecorder.recordClick).toBeCalledWith('add-component-data-binding');

diff --git a/packages/scene-composer/src/components/panels/AddComponentMenu.tsx b/packages/scene-composer/src/components/panels/AddComponentMenu.tsx
@@ -128,7 +128,7 @@ export const AddComponentMenu: React.FC<AddComponentMenuProps> = ({ onSelect })
     const component: IEntityBindingComponentInternal = {
       ref: THREE.MathUtils.generateUUID(),
       type: KnownComponentType.EntityBinding,
-      valueDataBinding: { dataBindingContext: '' },
+      valueDataBinding: { dataBindingContext: undefined },
     };
 
     addComponentInternal(selectedSceneNodeRef, component);

diff --git a/packages/scene-composer/src/layouts/SceneLayout/components/ScenePanel.tsx b/packages/scene-composer/src/layouts/SceneLayout/components/ScenePanel.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import { Direction } from './utils';
 import FoldableContainer from './FoldableContainer';

diff --git a/packages/scene-composer/src/store/slices/SceneDocumentSlice.ts b/packages/scene-composer/src/store/slices/SceneDocumentSlice.ts
@@ -1,11 +1,11 @@
 import { GetState, SetState } from 'zustand';
 import { isEmpty } from 'lodash';
+import { isDataBindingTemplate } from '@iot-app-kit/source-iottwinmaker';
 
 import DebugLogger from '../../logger/DebugLogger';
 import { RecursivePartial } from '../../utils/typeUtils';
 import { mergeDeep } from '../../utils/objectUtils';
 import { containsMatchingEntityComponent } from '../../utils/dataBindingUtils';
-import { isDataBindingTemplate } from '../../utils/dataBindingTemplateUtils';
 import { RootState } from '../Store';
 import serializationHelpers, { IDeserializeOptions } from '../helpers/serializationHelpers';
 import {

diff --git a/packages/scene-composer/src/utils/dataBindingTemplateUtils.spec.ts b/packages/scene-composer/src/utils/dataBindingTemplateUtils.spec.ts
@@ -6,40 +6,9 @@ import {
   applyDataBindingTemplate,
   createDataBindingTemplateOptions,
   dataBindingConfigSelector,
-  decorateDataBindingTemplate,
   extractEntityId,
-  isDataBindingTemplate,
-  undecorateDataBindingTemplate,
 } from './dataBindingTemplateUtils';
 
-describe('isDataBindingTemplate', () => {
-  it('should return true for valid data binding template', () => {
-    expect(isDataBindingTemplate('${abc}')).toBe(true);
-  });
-
-  it('should return false for empty data binding template', () => {
-    expect(isDataBindingTemplate('${}')).toBe(false);
-    expect(isDataBindingTemplate('')).toBe(false);
-    expect(isDataBindingTemplate()).toBe(false);
-  });
-});
-
-describe('decorateDataBindingTemplate', () => {
-  it('should return decorated data binding template', () => {
-    expect(decorateDataBindingTemplate('abc')).toBe('${abc}');
-  });
-});
-
-describe('undecorateDataBindingTemplate', () => {
-  it('should return undecorated data binding template', () => {
-    expect(undecorateDataBindingTemplate('${abc}')).toBe('abc');
-  });
-
-  it('should return original string for invalid data binding template', () => {
-    expect(undecorateDataBindingTemplate('${abc')).toBe('${abc');
-  });
-});
-
 describe('dataBindingTemplatesSelector', () => {
   let mockDataBindingConfig;
 

diff --git a/packages/scene-composer/src/utils/dataBindingTemplateUtils.ts b/packages/scene-composer/src/utils/dataBindingTemplateUtils.ts
@@ -1,4 +1,9 @@
 import { cloneDeep, pick } from 'lodash';
+import {
+  isDataBindingTemplate,
+  undecorateDataBindingTemplate,
+  decorateDataBindingTemplate,
+} from '@iot-app-kit/source-iottwinmaker';
 
 import {
   DEFAULT_DATA_BINDING_TEMPLATE_COMPONENT_NAME,
@@ -14,18 +19,6 @@ import {
 } from '../interfaces';
 import { RootState } from '../store';
 
-/**
- * Data binding templates will be stored as ${my-value} in IValueDataBinding
- */
-const dataBindingTemplateRegExp = /^\$\{([\s\S]+)\}$/;
-
-export const isDataBindingTemplate = (item?: string): boolean => (item ? dataBindingTemplateRegExp.test(item) : false);
-
-export const decorateDataBindingTemplate = (item: string): string => '${' + item + '}';
-
-export const undecorateDataBindingTemplate = (item: string): string =>
-  item.match(dataBindingTemplateRegExp)?.[1] ?? item;
-
 export const dataBindingConfigSelector = (state: RootState): IDataBindingConfig => {
   const dataBindingConfig: IDataBindingConfig =
     cloneDeep(state.getSceneProperty(KnownSceneProperty.DataBindingConfig)) ?? {};
@@ -39,6 +32,7 @@ export const dataBindingConfigSelector = (state: RootState): IDataBindingConfig
   return dataBindingConfig;
 };
 
+// TODO: to be removed in next change
 /**
  * Create selection options for data binding templates, these options will be shown on top of existing options. E.g. ${sel_entity} will
  * be shown before all entity IDs

diff --git a/packages/scene-composer/stories/Trees.stories.tsx b/packages/scene-composer/stories/Trees.stories.tsx
@@ -1,5 +1,5 @@
 import Box from '@awsui/components-react/box';
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, ReactNode, useCallback, useState } from 'react';
 import * as awsui from '@awsui/design-tokens';
 import { applyMode, Mode } from '@awsui/global-styles';
 import styled, { ThemeProvider } from 'styled-components';
@@ -22,7 +22,7 @@ const FancyBox = styled(Box)`
   background-color: ${awsui.colorBackgroundLayoutMain};
 `;
 
-const Layout: FC = ({ children }) => {
+const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   applyMode(Mode.Dark);
 
   return (

diff --git a/packages/source-iottwinmaker/src/common/error.ts b/packages/source-iottwinmaker/src/common/error.ts
@@ -0,0 +1 @@
+export type TwinMakerErrorCode = 'ListEntitiesError' | 'GetEntityError';