feat: allow boolean operator on predicate (#912)

Co-authored-by: David Lopez <lopezbnd@amazon.com>
aws-amplify · Feb 11, 2023 · 9a716a3 · 9a716a3
1 parent 32c435e
commit 9a716a3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 17 deletions.
diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/react-component-render-helper.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/react-component-render-helper.test.ts.snap
@@ -254,8 +254,16 @@ exports[`react-component-render-helper buildConcatExpression should build concat
 
 exports[`react-component-render-helper buildContionalExpression operandType does not exist 1`] = `"(user?.age && user?.age > \\"18\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
 
+exports[`react-component-render-helper buildContionalExpression operandType does not exist 2`] = `"(user?.age && user?.age > \\"true\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
+
+exports[`react-component-render-helper buildContionalExpression operandType does not exist 3`] = `"(user?.age && user?.age > \\"dlo\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
+
 exports[`react-component-render-helper buildContionalExpression operandType exists 1`] = `"(user?.age && user?.age > 18) ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
 
+exports[`react-component-render-helper buildContionalExpression operandType exists 2`] = `"(user?.age && user?.age > true) ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
+
+exports[`react-component-render-helper buildContionalExpression operandType exists 3`] = `"(user?.age && user?.age > \\"true\\") ? \\"Vote\\" : \\"Sorry you cannot vote\\""`;
+
 exports[`react-component-render-helper buildFixedJsxExpression boolean 1`] = `"{true}"`;
 
 exports[`react-component-render-helper buildFixedJsxExpression json parse error 1`] = `"Failed to parse value \\"⭐\\""`;

diff --git a/packages/codegen-ui-react/lib/__tests__/react-component-render-helper.test.ts b/packages/codegen-ui-react/lib/__tests__/react-component-render-helper.test.ts
@@ -280,16 +280,39 @@ describe('react-component-render-helper', () => {
 
   describe('buildContionalExpression', () => {
     test('operandType exists', () => {
-      const exp = buildConditionalExpression(
+      const numberExpression = buildConditionalExpression(
         buildEmptyComponentMetadata(),
         buildConditionalWithOperand('18', 'number'),
       );
-      assertASTMatchesSnapshot(exp);
+      assertASTMatchesSnapshot(numberExpression);
+      const booleanExpression = buildConditionalExpression(
+        buildEmptyComponentMetadata(),
+        buildConditionalWithOperand('true', 'boolean'),
+      );
+      assertASTMatchesSnapshot(booleanExpression);
+      const stringExpression = buildConditionalExpression(
+        buildEmptyComponentMetadata(),
+        buildConditionalWithOperand('true', 'string'),
+      );
+      assertASTMatchesSnapshot(stringExpression);
     });
 
     test('operandType does not exist', () => {
-      const exp = buildConditionalExpression(buildEmptyComponentMetadata(), buildConditionalWithOperand('18'));
-      assertASTMatchesSnapshot(exp);
+      const numberExpression = buildConditionalExpression(
+        buildEmptyComponentMetadata(),
+        buildConditionalWithOperand('18'),
+      );
+      assertASTMatchesSnapshot(numberExpression);
+      const booleanExpression = buildConditionalExpression(
+        buildEmptyComponentMetadata(),
+        buildConditionalWithOperand('true'),
+      );
+      assertASTMatchesSnapshot(booleanExpression);
+      const stringExpression = buildConditionalExpression(
+        buildEmptyComponentMetadata(),
+        buildConditionalWithOperand('dlo'),
+      );
+      assertASTMatchesSnapshot(stringExpression);
     });
 
     test('operand and operandType mismatch', () => {

diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
@@ -67,7 +67,11 @@ import { ImportCollection, ImportSource, ImportValue } from './imports';
 import { ReactOutputManager } from './react-output-manager';
 import { ReactRenderConfig, ScriptKind, scriptKindToFileExtension } from './react-render-config';
 import SampleCodeRenderer from './amplify-ui-renderers/sampleCodeRenderer';
-import { addBindingPropertiesImports, getComponentPropName } from './react-component-render-helper';
+import {
+  addBindingPropertiesImports,
+  getComponentPropName,
+  getConditionalOperandExpression,
+} from './react-component-render-helper';
 import {
   transpile,
   buildPrinter,
@@ -1432,21 +1436,32 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   }
 
   private predicateToObjectLiteralExpression(predicate: StudioComponentPredicate): ObjectLiteralExpression {
-    return factory.createObjectLiteralExpression(
-      Object.entries(predicate).map(([key, value]) => {
+    const { operandType, ...filteredPredicate } = predicate;
+    const objectAssignments = Object.entries(filteredPredicate).map(([key, value]) => {
+      if (key === 'and' || key === 'or') {
         return factory.createPropertyAssignment(
           factory.createIdentifier(key),
-          key === 'and' || key === 'or'
-            ? factory.createArrayLiteralExpression(
-                (value as StudioComponentPredicate[]).map(
-                  (pred: StudioComponentPredicate) => this.predicateToObjectLiteralExpression(pred),
-                  false,
-                ),
-              )
-            : factory.createStringLiteral(value as string),
+          factory.createArrayLiteralExpression(
+            (predicate[key] as StudioComponentPredicate[]).map(
+              (pred: StudioComponentPredicate) => this.predicateToObjectLiteralExpression(pred),
+              false,
+            ),
+          ),
         );
-      }, false),
-    );
+      }
+      if (key === 'operand' && typeof value === 'string') {
+        return factory.createPropertyAssignment(
+          factory.createIdentifier(key),
+          getConditionalOperandExpression(value, operandType),
+        );
+      }
+      return factory.createPropertyAssignment(
+        factory.createIdentifier(key),
+        typeof value === 'string' ? factory.createStringLiteral(value) : factory.createIdentifier('undefined'),
+      );
+    });
+
+    return factory.createObjectLiteralExpression(objectAssignments);
   }
 
   private buildUseActionStatements(): Statement[] {

diff --git a/packages/codegen-ui/lib/types/bindings.ts b/packages/codegen-ui/lib/types/bindings.ts
@@ -109,6 +109,7 @@ export type StudioComponentPredicate = {
   field?: string;
   operand?: string;
   operator?: string;
+  operandType?: 'string' | 'boolean' | 'number';
 };
 
 /**