From 37db1aa7773c67476e6c899f47b9bcc90156ea2e Mon Sep 17 00:00:00 2001
From: Varun Choudhary <68095256+Varun-Choudhary@users.noreply.github.com>
Date: Wed, 14 Jun 2023 16:55:37 +0530
Subject: [PATCH] console: storybook modal component to show Create RESTified
 endpoints from a Table

This PR has a storybook Modal component to create a rest endpoint from a table.

## Related Issue

https://hasurahq.atlassian.net/browse/GS-581

## Design

<img width="661" alt="modal" src="https://github.com/hasura/graphql-engine-mono/assets/68095256/958f958d-ae49-4e6b-a81b-d3b22ca9f51c">

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9518
GitOrigin-RevId: f43248b1666d1af909255e1f5af90fa7967b3328
---
 .../RestEndpointModal.stories.tsx             | 25 ++++++++++
 .../RestEndpointModal/RestEndpointModal.tsx   | 50 +++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.stories.tsx
 create mode 100644 frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.tsx

diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.stories.tsx
new file mode 100644
index 00000000000..7665cfd99f2
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import z from 'zod';
+import { ComponentMeta } from '@storybook/react';
+import { RestEndpointModal, modalSchema } from './RestEndpointModal';
+import { SimpleForm } from '../../../../../new-components/Form';
+
+export default {
+  title: 'Features/REST endpoints/Modal',
+  component: RestEndpointModal,
+} as ComponentMeta<typeof RestEndpointModal>;
+
+const modalInitialValues: z.infer<typeof modalSchema> = {
+  tableName: 'Table',
+  methods: ['CREATE', 'DELETE'],
+};
+
+export const Base = () => (
+  <SimpleForm
+    schema={modalSchema}
+    options={{ defaultValues: modalInitialValues }}
+    onSubmit={() => {}}
+  >
+    <RestEndpointModal />
+  </SimpleForm>
+);
diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.tsx b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.tsx
new file mode 100644
index 00000000000..0a2d5a5cb65
--- /dev/null
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/ApiExplorer/Rest/RestEndpointModal/RestEndpointModal.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import z from 'zod';
+import { Dialog } from '../../../../../new-components/Dialog';
+import {
+  CheckboxesField,
+  InputField,
+} from '../../../../../new-components/Form';
+
+export const modalSchema = z.object({
+  tableName: z.string(),
+  methods: z
+    .enum(['READ', 'READ ALL', 'CREATE', 'UPDATE', 'DELETE'])
+    .array()
+    .nonempty({ message: 'Choose at least one method' }),
+});
+
+export const RestEndpointModal = () => {
+  return (
+    <Dialog
+      hasBackdrop
+      title="Auto-Create REST Endpoints"
+      onClose={() => {}}
+      description="One-click to create REST endpoint from selected table"
+      footer={<Dialog.Footer callToAction="Create" onSubmit={() => {}} />}
+    >
+      <div className="p-md">
+        <InputField
+          name="tableName"
+          label="Table Name"
+          disabled
+          className="w-2/3"
+        />
+
+        <CheckboxesField
+          description="Each selected method will generate one endpoint"
+          name="methods"
+          label="Methods *"
+          options={[
+            { value: 'READ', label: 'READ' },
+            { value: 'READ ALL', label: 'READ ALL' },
+            { value: 'CREATE', label: 'CREATE' },
+            { value: 'UPDATE', label: 'UPDATE' },
+            { value: 'DELETE', label: 'DELETE' },
+          ]}
+          orientation="horizontal"
+        />
+      </div>
+    </Dialog>
+  );
+};