fix: remove special 'value' handling for text, since it causes issues, and is replaced w/ 'label'

Author: alharris-at

packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap

@@ -1676,6 +1676,61 @@ export default function CustomButton(
 "
 `;
 
+exports[`amplify render tests concat and conditional transform should render component with conditional data binding prop from a bug 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { Student } from \\"../models\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Flex,
+  FlexProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ConditionalComponentWithDataBindingProps = React.PropsWithChildren<
+  Partial<FlexProps> & {
+    student?: Student;
+  } & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function ConditionalComponentWithDataBinding(
+  props: ConditionalComponentWithDataBindingProps
+): React.ReactElement {
+  const { student, overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Flex {...rest} {...getOverrideProps(overrides, \\"Flex\\")}>
+      <Text
+        value={
+          student?.id && student?.id === \\"idstringuserinput\\"
+            ? student?.createdAt
+            : student?.id
+        }
+        children={
+          student?.id && student?.id === \\"idstringuserinput\\"
+            ? student?.createdAt
+            : student?.id
+        }
+        {...getOverrideProps(overrides, \\"Flex.Text[0]\\")}
+      ></Text>
+      <Button
+        value={
+          student?.id && student?.id === \\"idstringuserinput\\"
+            ? student?.createdAt
+            : student?.id
+        }
+        {...getOverrideProps(overrides, \\"Flex.Button[0]\\")}
+      ></Button>
+    </Flex>
+  );
+}
+"
+`;
+
 exports[`amplify render tests concat and conditional transform should render component with conditional simple binding prop 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts

@@ -215,6 +215,11 @@ describe('amplify render tests', () => {
       const generatedCode = generateWithAmplifyRenderer('componentWithSimplePropertyConditional');
       expect(generatedCode.componentText).toMatchSnapshot();
     });
+
+    it('should render component with conditional data binding prop from a bug', () => {
+      const generatedCode = generateWithAmplifyRenderer('conditionalComponentWithDataBinding');
+      expect(generatedCode.componentText).toMatchSnapshot();
+    });
   });
 
   describe('component with binding', () => {

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/conditionalComponentWithDataBinding.json

@@ -0,0 +1,96 @@
+{
+    "name": "ConditionalComponentWithDataBinding",
+    "children": [
+        {
+            "children": [],
+            "name": "Placeholder text",
+            "componentType": "Text",
+            "properties": {
+                "value": {
+                    "condition": {
+                        "property": "student",
+                        "operator": "eq",
+                        "operand": "idstringuserinput",
+                        "then": {
+                            "bindingProperties": {
+                                "property": "student",
+                                "field": "createdAt"
+                            }
+                        },
+                        "else": {
+                            "bindingProperties": {
+                                "property": "student",
+                                "field": "id"
+                            }
+                        },
+                        "field": "id"
+                    }
+                },
+              "label": {
+                "condition": {
+                  "property": "student",
+                  "operator": "eq",
+                  "operand": "idstringuserinput",
+                  "then": {
+                    "bindingProperties": {
+                      "property": "student",
+                      "field": "createdAt"
+                    }
+                  },
+                  "else": {
+                    "bindingProperties": {
+                      "property": "student",
+                      "field": "id"
+                    }
+                  },
+                  "field": "id"
+                }
+              }
+            },
+            "overrides": {},
+            "variants": []
+        },
+      {
+        "children": [],
+        "name": "Placeholder Button",
+        "componentType": "Button",
+        "properties": {
+          "value": {
+            "condition": {
+              "property": "student",
+              "operator": "eq",
+              "operand": "idstringuserinput",
+              "then": {
+                "bindingProperties": {
+                  "property": "student",
+                  "field": "createdAt"
+                }
+              },
+              "else": {
+                "bindingProperties": {
+                  "property": "student",
+                  "field": "id"
+                }
+              },
+              "field": "id"
+            }
+          }
+        },
+        "overrides": {},
+        "variants": []
+      }
+    ],
+    "id": "c-YR5rdCGjwJCxfzvGlu",
+    "bindingProperties": {
+        "student": {
+            "type": "Data",
+            "bindingProperties": {
+                "model": "Student"
+            }
+        }
+    },
+    "componentType": "Flex",
+    "properties": {},
+    "overrides": {},
+    "variants": []
+}

packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts

@@ -52,10 +52,10 @@ import {
   ToggleButtonGroupProps,
   ViewProps,
   VisuallyHiddenProps,
+  TextProps,
 } from '@aws-amplify/ui-react';
 import Primitive from '../primitive';
 import { ReactStudioTemplateRenderer } from '../react-studio-template-renderer';
-import TextRenderer from './text';
 import CustomComponentRenderer from './customComponent';
 import CollectionRenderer from './collection';
 import { ReactComponentWithChildrenRenderer } from '../react-component-with-children-renderer';
@@ -273,7 +273,11 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
         ).renderElement(renderChildren);
 
       case Primitive.Text:
-        return new TextRenderer(component, this.importCollection, parent).renderElement();
+        return new ReactComponentWithChildrenRenderer<TextProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
 
       case Primitive.TextField:
         return new ReactComponentWithChildrenRenderer<TextFieldProps<boolean>>(

packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts

@@ -9,7 +9,7 @@
     "width": {
       "value": "20px"
     },
-    "value": {
+    "label": {
       "value": "Basic Component Text"
     }
   }