fix: updating override paths to support child indices

aws-amplify · Nov 3, 2021 · 278b6f8 · 278b6f8
1 parent 7510dc8
commit 278b6f8
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 93 deletions.
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
diff --git a/packages/studio-ui-codegen-react/lib/react-component-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-renderer.ts
@@ -75,13 +75,7 @@ export class ReactComponentRenderer<TPropIn> extends ComponentRendererBase<TProp
     const overrideAttr = factory.createJsxSpreadAttribute(
       factory.createCallExpression(factory.createIdentifier('getOverrideProps'), undefined, [
         factory.createIdentifier('overrides'),
-        factory.createStringLiteral(
-          this.node
-            .getComponentPathToRoot()
-            .reverse()
-            .map((component) => component.componentType)
-            .join('.'),
-        ),
+        factory.createStringLiteral(this.node.getOverrideKey()),
       ]),
     );
     this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');

diff --git a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
@@ -111,13 +111,7 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
     const overrideAttr = factory.createJsxSpreadAttribute(
       factory.createCallExpression(factory.createIdentifier('getOverrideProps'), undefined, [
         factory.createIdentifier('overrides'),
-        factory.createStringLiteral(
-          this.node
-            .getComponentPathToRoot()
-            .reverse()
-            .map((component) => component.componentType)
-            .join('.'),
-        ),
+        factory.createStringLiteral(this.node.getOverrideKey()),
       ]),
     );
     this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');

diff --git a/packages/studio-ui-codegen-react/package-lock.json b/packages/studio-ui-codegen-react/package-lock.json
diff --git a/...ages/studio-ui-codegen/lib/__tests__/__snapshots__/common-component-renderer.test.ts.snap b/...ages/studio-ui-codegen/lib/__tests__/__snapshots__/common-component-renderer.test.ts.snap
@@ -17,6 +17,7 @@ MockComponentRenderer {
     },
   },
   "node": StudioNode {
+    "children": Array [],
     "component": Object {
       "componentType": "Button",
       "name": "MyButton",
@@ -26,7 +27,11 @@ MockComponentRenderer {
         },
       },
     },
+    "elementIndex": 0,
     "parent": StudioNode {
+      "children": Array [
+        [Circular],
+      ],
       "component": Object {
         "componentType": "View",
         "name": "MyView",
@@ -36,6 +41,22 @@ MockComponentRenderer {
     },
   },
   "parent": StudioNode {
+    "children": Array [
+      StudioNode {
+        "children": Array [],
+        "component": Object {
+          "componentType": "Button",
+          "name": "MyButton",
+          "properties": Object {
+            "value": Object {
+              "value": "Confirm",
+            },
+          },
+        },
+        "elementIndex": 0,
+        "parent": [Circular],
+      },
+    ],
     "component": Object {
       "componentType": "View",
       "name": "MyView",

diff --git a/packages/studio-ui-codegen/lib/__tests__/studio-node.test.ts b/packages/studio-ui-codegen/lib/__tests__/studio-node.test.ts
@@ -13,9 +13,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
+/* eslint-disable no-new */
 import { StudioNode } from '../studio-node';
+import { StudioComponentChild } from '../types';
 
-describe('StudioNone', () => {
+describe('StudioNode', () => {
   describe('isRoot', () => {
     test('true when parent is undefined', () => {
       const component = {
@@ -56,7 +58,88 @@ describe('StudioNone', () => {
       };
       const componentPathToRoot = new StudioNode(component, parent).getComponentPathToRoot();
 
-      expect(componentPathToRoot.map(({ name }) => name)).toEqual([componentName, parentComponentName]);
+      expect(componentPathToRoot.map(({ component: { name } }) => name)).toEqual([componentName, parentComponentName]);
+    });
+  });
+
+  describe('getOverrideKey', () => {
+    test('returns for parent', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+
+      expect(rootComponent.getOverrideKey()).toEqual('Flex');
+    });
+
+    test('returns only one child', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      const childComponent = new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+
+      expect(childComponent.getOverrideKey()).toEqual('Flex.Button[0]');
+    });
+
+    test('returns index 0 for first of multiple elements', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      const firstChildComponent = new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Tooltip'), rootComponent);
+
+      expect(firstChildComponent.getOverrideKey()).toEqual('Flex.Button[0]');
+    });
+
+    test('returns index 0 for first of element of type', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      const firstTooltipChildComponent = new StudioNode(createSimpleComponentForType('Tooltip'), rootComponent);
+
+      expect(firstTooltipChildComponent.getOverrideKey()).toEqual('Flex.Tooltip[0]');
+    });
+
+    test('returns index 1 for second of element of type', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      const secondChildComponent = new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Tooltip'), rootComponent);
+
+      expect(secondChildComponent.getOverrideKey()).toEqual('Flex.Button[1]');
+    });
+
+    /**
+     * <Flex> <-- rootComponent: 'Flex'
+     *     <Flex />
+     *     <Flex />
+     *     <Flex> <-- thirdComponentOfType: 'Flex.Flex[2]'
+     *         <Button />
+     *         <Button> <-- secondSubChildOfType: 'Flex.Flex[2].Button[1]'
+     *             <Tooltip /> <-- firstSubSubChild: 'Flex.Flex[2].Button[1].Tooltip[0]'
+     *         </Button>
+     *     </Flex>
+     *     <Tooltip />
+     *     <Button />
+     * </Flex>
+     */
+    test('returns for deeply nested elements', () => {
+      const rootComponent = new StudioNode(createSimpleComponentForType('Flex'));
+      new StudioNode(createSimpleComponentForType('Flex'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Flex'), rootComponent);
+      const thirdChildComponentOfType = new StudioNode(createSimpleComponentForType('Flex'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Tooltip'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Button'), rootComponent);
+      new StudioNode(createSimpleComponentForType('Button'), thirdChildComponentOfType);
+      const secondSubChildOfType = new StudioNode(createSimpleComponentForType('Button'), thirdChildComponentOfType);
+      const firstSubSubChild = new StudioNode(createSimpleComponentForType('Tooltip'), secondSubChildOfType);
+
+      expect(thirdChildComponentOfType.getOverrideKey()).toEqual('Flex.Flex[2]');
+      expect(secondSubChildOfType.getOverrideKey()).toEqual('Flex.Flex[2].Button[1]');
+      expect(firstSubSubChild.getOverrideKey()).toEqual('Flex.Flex[2].Button[1].Tooltip[0]');
     });
   });
 });
+
+const createSimpleComponentForType = (type: string): StudioComponentChild => {
+  return {
+    componentType: type,
+    name: type,
+    properties: {},
+  };
+};
diff --git a/packages/studio-ui-codegen/lib/studio-node.ts b/packages/studio-ui-codegen/lib/studio-node.ts
@@ -20,19 +20,48 @@ export class StudioNode {
 
   parent?: StudioNode;
 
+  children: StudioNode[];
+
+  elementIndex?: number;
+
   constructor(component: StudioComponent | StudioComponentChild, parent?: StudioNode) {
     this.component = component;
     this.parent = parent;
+    this.children = [];
+    if (this.parent) {
+      this.elementIndex = this.parent.children.filter(
+        (childNode) => this.component.componentType === childNode.component.componentType,
+      ).length;
+      this.parent.children.push(this);
+    }
   }
 
   isRoot(): boolean {
     return this.parent === undefined;
   }
 
-  getComponentPathToRoot(): (StudioComponent | StudioComponentChild)[] {
+  getComponentPathToRoot(): StudioNode[] {
     if (this.parent !== undefined) {
-      return [this.component].concat(this.parent.getComponentPathToRoot());
+      return [this as StudioNode].concat(this.parent.getComponentPathToRoot());
     }
-    return [this.component];
+    return [this];
+  }
+
+  /**
+   * Build the override path for a given element walking from the node to tree root, providing an index
+   * for all but the top-level components.
+   * Example:
+   * <Flex> <-- returns 'Flex'
+   *     <Button> <-- returns 'Flex.Button[0]'
+   *     <Button> <-- returns 'Flex.Button[1]'
+   *     <Flex> <-- returns 'Flex.Flex[0]'
+   *         </Button> <-- returns 'Flex.Flex[0].Button[0]'
+   *     </Flex>
+   * </Flex>
+   */
+  getOverrideKey(): string {
+    const [parentElement, ...childElements] = this.getComponentPathToRoot().reverse();
+    const childPath = childElements.map((node) => `${node.component.componentType}[${node.elementIndex}]`);
+    return [parentElement.component.componentType, ...childPath].join('.');
   }
 }
diff --git a/packages/studio-ui-codegen/package-lock.json b/packages/studio-ui-codegen/package-lock.json
diff --git a/packages/test-generator/package-lock.json b/packages/test-generator/package-lock.json