fix: map prop to children prop for variant

[yeung-wah]

Issue #, if available:

map prop to children prop for variant

Description of changes:
Revision3
Moved getComponentTypeFromOverrideKey function to under StudioNode class

Revision2
In revision 1, missed to handle a case where the overrideKey in variant can be a nested children component(Flex.Flex[0].Flex[0].Button[0]), added a new function to parse overrideKey and get the corresponding component type

Added complex test using real world payload, the code for the nested children components which have the mapping should flip label prop to children prop, and display different text

Added test to not flip prop to children prop if the component is not defined in the mapping table

Revision1
Currently we are not remapping prop to children prop for variant. This change would remap predefined prop to children prop for variant. It is very similar to what we are doing with property binding. It will go through the variants section, and remap all the predefined prop to children for the specific primitive hierarchy based on this mapping

amplify-codegen-ui/packages/codegen-ui-react/lib/primitive.ts

Line 66 in 868867b

export const PrimitiveChildrenPropMapping: Partial<Record<Primitive, string>> = {

Example:

{
  "id": "1234-5678-9010",
  "componentType": "Button",
  "name": "ComponentWithVariant",
  "properties": {
    "children": {
      "value": "ComponentWithVariant"
    }
  },
  "variants": [
    {
      "variantValues": {
        "variant": "success"
      },
      "overrides": {
        "Button": {
          "label": "ComponentWithVariantWithMappedChildrenProp",
          "fontSize": "15px"
        }
      }
    }
  ]
}

In memory it will turn into

{
  "id": "1234-5678-9010",
  "componentType": "Button",
  "name": "ComponentWithVariant",
  "properties": {
    "children": {
      "value": "ComponentWithVariant"
    }
  },
  "variants": [
    {
      "variantValues": {
        "variant": "success"
      },
      "overrides": {
        "Button": {
          "children": "ComponentWithVariantWithMappedChildrenProp",
          "fontSize": "15px"
        }
      }
    }
  ]
}

and output

/* eslint-disable */
import React from "react";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
} from "@aws-amplify/ui-react/internal";
import { Button, ButtonProps } from "@aws-amplify/ui-react";

export type ComponentWithVariantProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    variant?: "success";
  } & {
    overrides?: EscapeHatchProps | undefined | null;
  }
>;
export default function ComponentWithVariant(
  props: ComponentWithVariantProps
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      variantValues: { variant: "success" },
      overrides: {
        Button: {
          fontSize: "15px",
          children: "ComponentWithVariantWithMappedChildrenProp",
        },
      },
    },
  ];
  const mergeVariantsAndOverrides = (
    variants: EscapeHatchProps,
    overrides: EscapeHatchProps
  ): EscapeHatchProps => {
    const overrideKeys = new Set(Object.keys(overrides));
    const sharedKeys = Object.keys(variants).filter((variantKey) =>
      overrideKeys.has(variantKey)
    );
    const merged = Object.fromEntries(
      sharedKeys.map((sharedKey) => [
        sharedKey,
        { ...variants[sharedKey], ...overrides[sharedKey] },
      ])
    );
    return {
      ...variants,
      ...overrides,
      ...merged,
    };
  };
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children="ComponentWithVariant"
      {...rest}
      {...getOverrideProps(overrides, "Button")}
    ></Button>
  );
}

Since we are already taking care of children props in variant, it will follow the existing process, and display different text.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[alharris-at]

A few minor comments, but overall looks good to me. Could you also add a unit test to verify label doesn't get remapped if it's not in your table?

[alharris-at]

Even if propsInOverrides[childrenPropMapping] === undefined we probably want to map for consistency sake.

[dpilch]

edit: nvm, that was all wrong

[yeung-wah]

Even if propsInOverrides[childrenPropMapping] === undefined we probably want to map for consistency sake.

hmmm, childrenPropMapping here is referring to the predefined prop that we want to map to children prop(Ex label). For example, we need to remap label prop to children prop for button component

 "overrides": {
        "Button": {
          "label": "ComponentWithVariantWithMappedChildrenProp",
          "fontSize": "15px"
        }
      }

convert to

 "overrides": {
        "Button": {
          "children": "ComponentWithVariantWithMappedChildrenProp",
          "fontSize": "15px"
        }
      }

if children prop is not defined(propsInOverrides.children) and label prop is defined(propsInOverrides[childrenPropMapping], then we will remap label prop to children prop. So if propsInOverrides[childrenPropMapping] is undefined, then we don need to do anything as the label prop is not there.

[alharris-at]

Instead of Object.key you can use Object.entries since you are accessing the values as well as the keys down below.

[alharris-at]

Could you move this method to the StudioNode class as a static method, and ensure we've got unit tests covering it?

[codecov-commenter]

Codecov Report

Merging #297 (1404151) into develop (eba7f1f) will increase coverage by 0.17%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop     #297      +/-   ##
===========================================
+ Coverage    89.45%   89.63%   +0.17%     
===========================================
  Files           36       36              
  Lines         1223     1244      +21     
  Branches       273      278       +5     
===========================================
+ Hits          1094     1115      +21     
  Misses         126      126              
  Partials         3        3              

Impacted Files	Coverage Δ
...gen-ui-react/lib/react-studio-template-renderer.ts	91.21% <100.00%> (+0.38%)	⬆️
packages/codegen-ui/lib/studio-node.ts	96.29% <100.00%> (+1.29%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eba7f1f...1404151. Read the comment docs.