feat: extend base action binding types with navigation types and add …

…test

packages/amplify-ui-codegen-schema/lib/types/index.ts

@@ -511,7 +511,7 @@ export type StudioTheme = DeepPartial<typeof theme>;
 /**
  * Component action types
  */
-export type StudioComponentAction = AmplifyAuthSignOutAction;
+export type StudioComponentAction = AmplifyAuthSignOutAction | NavigationAction;
 
 /**
  * Amplify Auth signout Action type
@@ -522,3 +522,36 @@ export type AmplifyAuthSignOutAction = {
     global: boolean;
   };
 };
+
+/**
+ * Navigation related action types.
+ */
+export type NavigationAction =
+  | NavigationRedirectAction
+  | NavigationOpenAction
+  | NavigationRefreshAction;
+
+/**
+ * Redirect action type
+ */
+export type NavigationRedirectAction = {
+  type: 'Navigation.Redirect';
+  parameters: {
+    href: string;
+    replaceHistory?: boolean; // Default to false
+  }
+};
+
+/**
+ * Redirect action type
+ */
+ export type NavigationOpenAction = {
+  type: 'Navigation.Open';
+  parameters: {
+    href: string;
+  }
+};
+
+export type NavigationRefreshAction = {
+  type: 'Navigation.Refresh';
+};

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

@@ -881,6 +881,84 @@ export default function BoxWithButton(
 "
 `;
 
+exports[`amplify render tests should render navigation actions 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Flex,
+  Heading,
+  findChildOverrides,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type SiteHeaderProps = {
+  overrides?: EscapeHatchProps | undefined | null,
+};
+export default function SiteHeader(props: SiteHeaderProps): React.Element {
+  const overrides = { ...props.overrides };
+  const { invokeAction } = useActions({
+    openAmplifyDocs: {
+      type: \\"Navigation.Open\\",
+      parameters: { href: \\"docs.amplify.aws\\" },
+    },
+    redirectToFooter: {
+      type: \\"Navigation.Redirect\\",
+      parameters: { href: \\"#footer-id\\", replaceHistory: true },
+    },
+    navigateToFAQPage: {
+      type: \\"Navigation.Redirect\\",
+      parameters: { href: \\"/faq\\" },
+    },
+    reloadPage: { type: \\"Navigation.Refresh\\" },
+  });
+  return (
+    <Flex
+      direction=\\"row\\"
+      justifyContent=\\"space-between\\"
+      {...props}
+      {...getOverrideProps(overrides, \\"Flex\\")}
+    >
+      <Heading
+        level={1}
+        children=\\"Title\\"
+        {...findChildOverrides(props.overrides, \\"Heading\\")}
+      ></Heading>
+      <Button
+        variation=\\"primary\\"
+        children=\\"Open Amplify Docs\\"
+        onClick={invokeAction(\\"openAmplifyDocs\\")}
+        {...getOverrideProps(overrides, \\"Flex.Button\\")}
+      ></Button>
+      <Button
+        variation=\\"primary\\"
+        children=\\"Navigate to FAQ Page\\"
+        onClick={invokeAction(\\"navigateToFAQPage\\")}
+        {...getOverrideProps(overrides, \\"Flex.Button\\")}
+      ></Button>
+      <Button
+        variation=\\"primary\\"
+        children=\\"Reload Page\\"
+        onClick={invokeAction(\\"reloadPage\\")}
+        {...getOverrideProps(overrides, \\"Flex.Button\\")}
+      ></Button>
+      <Button
+        variation=\\"primary\\"
+        children=\\"Redirect To Footer (No History Update)\\"
+        onClick={invokeAction(\\"redirectToFooter\\")}
+        {...getOverrideProps(overrides, \\"Flex.Button\\")}
+      ></Button>
+    </Flex>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests theme should render the theme 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -209,4 +209,8 @@ describe('amplify render tests', () => {
       expect(generateWithAmplifyRenderer('componentWithActionSignOut')).toMatchSnapshot();
     });
   });
+
+  it('should render navigation actions', () => {
+    expect(generateWithAmplifyRenderer('componentWithActionNavigation')).toMatchSnapshot();
+  });
 });

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

@@ -0,0 +1,110 @@
+{
+    "componentType": "Flex",
+    "name": "SiteHeader",
+    "actions": {
+      "openAmplifyDocs": {
+        "type": "Navigation.Open",
+        "parameters": {
+          "href": "docs.amplify.aws"
+        }
+      },
+      "redirectToFooter": {
+        "type": "Navigation.Redirect",
+        "parameters": {
+          "href": "#footer-id",
+          "replaceHistory": true
+        }
+      },
+      "navigateToFAQPage": {
+        "type": "Navigation.Redirect",
+        "parameters": {
+          "href": "/faq"
+        }
+      },
+      "reloadPage": {
+        "type": "Navigation.Refresh"
+      }
+    },
+    "properties": {
+      "direction": {
+        "value": "row"
+      },
+      "justifyContent": {
+        "value": "space-between"
+      }
+    },
+    "children": [
+      {
+        "componentType": "Heading",
+        "name": "Heading1",
+        "properties": {
+          "level": {
+            "value": 1
+          },
+          "children": {
+            "value": "Title"
+          }
+        }
+      },
+      {
+        "componentType": "Button",
+        "name": "Button1",
+        "events": {
+          "click": "openAmplifyDocs"
+        },
+        "properties": {
+          "variation": {
+            "value": "primary"
+          },
+          "children": {
+            "value": "Open Amplify Docs"
+          }
+        }
+      },
+      {
+        "componentType": "Button",
+        "name": "Button2",
+        "events": {
+          "click": "navigateToFAQPage"
+        },
+        "properties": {
+          "variation": {
+            "value": "primary"
+          },
+          "children": {
+            "value": "Navigate to FAQ Page"
+          }
+        }
+      },
+      {
+        "componentType": "Button",
+        "name": "Button3",
+        "events": {
+          "click": "reloadPage"
+        },
+        "properties": {
+          "variation": {
+            "value": "primary"
+          },
+          "children": {
+            "value": "Reload Page"
+          }
+        }
+      },
+      {
+        "componentType": "Button",
+        "name": "Button4",
+        "events": {
+          "click": "redirectToFooter"
+        },
+        "properties": {
+          "variation": {
+            "value": "primary"
+          },
+          "children": {
+            "value": "Redirect To Footer (No History Update)"
+          }
+        }
+      }
+    ]
+  }