From 77dad9ef642ff70c7680399545dd1369beb5a553 Mon Sep 17 00:00:00 2001
From: Tuval Simha <tuval.simha@Gmail.com>
Date: Sun, 18 Aug 2024 21:32:50 +0300
Subject: [PATCH] (7)Drop V2: Connect Lab Modal (#5320)

---
 .../target/laboratory/connect-lab-modal.tsx   | 137 ++++++++++++------
 .../src/stories/connect-lab-modal.stories.tsx |  50 +++++++
 2 files changed, 139 insertions(+), 48 deletions(-)
 create mode 100644 packages/web/app/src/stories/connect-lab-modal.stories.tsx

diff --git a/packages/web/app/src/components/target/laboratory/connect-lab-modal.tsx b/packages/web/app/src/components/target/laboratory/connect-lab-modal.tsx
index 05892d72e..200d17e0f 100644
--- a/packages/web/app/src/components/target/laboratory/connect-lab-modal.tsx
+++ b/packages/web/app/src/components/target/laboratory/connect-lab-modal.tsx
@@ -1,9 +1,16 @@
 import { type ReactElement } from 'react';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { Heading } from '@/components/ui/heading';
+import { Callout } from '@/components/ui/callout';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Link } from '@/components/ui/link';
-import { CopyValue, Modal, Tag } from '@/components/v2';
+import { CopyValue, Tag } from '@/components/v2';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { getDocsUrl } from '@/lib/docs-url';
 
@@ -20,52 +27,86 @@ export const ConnectLabModal = (props: {
   isCDNEnabled: FragmentType<typeof Laboratory_IsCDNEnabledFragment> | null;
 }): ReactElement => {
   const docsUrl = getDocsUrl('/management/targets#registry-access-tokens');
-  const isCDNEnabled = useFragment(Laboratory_IsCDNEnabledFragment, props.isCDNEnabled);
+  const isCDNEnabled = useFragment(
+    Laboratory_IsCDNEnabledFragment,
+    props.isCDNEnabled,
+  )?.isCDNEnabled;
 
   return (
-    <Modal open={props.isOpen} onOpenChange={props.close} className="flex w-[750px] flex-col gap-5">
-      <Heading className="text-center">Use GraphQL Schema Externally</Heading>
-      <p className="text-sm text-gray-500">
-        Hive allow you to consume and use the Laboratory schema with your configured mocks while
-        developing.
-      </p>
-      {isCDNEnabled?.isCDNEnabled ? (
-        <Alert>
-          <AlertTitle>High-availability CDN</AlertTitle>
-          <AlertDescription>
-            If you want to consume the GraphQL schema for a tool like GraphQL Code Generator, we
-            instead recommend using the high-availability CDN instead.
-          </AlertDescription>
-        </Alert>
-      ) : null}
-      <span className="text-sm text-gray-500">You can use the following endpoint:</span>
-      <CopyValue value={props.endpoint} />
-      <span className="text-sm text-gray-500">
-        To authenticate, use the following HTTP headers, with a token that has `target:read` scope:
-      </span>
-      <Tag>
-        X-Hive-Key:
-        <Link
-          as="a"
-          variant="secondary"
-          target="_blank"
-          className="underline underline-offset-2"
-          rel="noreferrer"
-          href={docsUrl}
-        >
-          YOUR_TOKEN_HERE
-        </Link>
-      </Tag>
-      <p className="text-sm text-gray-500">
-        Read the{' '}
-        <Link as="a" variant="primary" target="_blank" rel="noreferrer" href={docsUrl}>
-          Managing Tokens
-        </Link>{' '}
-        chapter in our documentation to create a Registry Access Token.
-      </p>
-      <Button type="button" size="lg" onClick={props.close} className="self-end">
-        Close
-      </Button>
-    </Modal>
+    <ConnectLabModalContent
+      isOpen={props.isOpen}
+      close={props.close}
+      endpoint={props.endpoint}
+      isCDNEnabled={isCDNEnabled}
+      docsUrl={docsUrl}
+    />
+  );
+};
+
+export const ConnectLabModalContent = (props: {
+  isOpen: boolean;
+  close: () => void;
+  endpoint: string;
+  isCDNEnabled?: boolean;
+  docsUrl: string;
+}) => {
+  return (
+    <Dialog open={props.isOpen} onOpenChange={props.close}>
+      <DialogContent className="w-4/5 max-w-[600px] md:w-3/5">
+        <DialogHeader>
+          <DialogTitle>Use GraphQL Schema Externally</DialogTitle>
+          <DialogDescription>
+            Hive allow you to consume and use the Laboratory schema with your configured mocks while
+            developing.
+          </DialogDescription>
+        </DialogHeader>
+        {props?.isCDNEnabled ? (
+          <div>
+            <h3 className="text-sm text-white">High-availability CDN:</h3>
+            <Callout className="mt-2" type="info">
+              If you want to consume the GraphQL schema for a tool like GraphQL Code Generator, we
+              instead recommend using the high-availability CDN instead.
+            </Callout>
+          </div>
+        ) : null}
+        <span className="text-sm text-white">You can use the following endpoint:</span>
+        <CopyValue value={props.endpoint} />
+        <span className="text-sm text-white">
+          To authenticate, use the following HTTP headers, with a token that has `target:read`
+          scope:
+        </span>
+        <Tag>
+          X-Hive-Key:
+          <Link
+            as="a"
+            variant="secondary"
+            target="_blank"
+            className="underline underline-offset-2"
+            rel="noreferrer"
+            href={props.docsUrl}
+          >
+            YOUR_TOKEN_HERE
+          </Link>
+        </Tag>
+        <p className="text-sm text-gray-500">
+          Read the{' '}
+          <Link as="a" variant="primary" target="_blank" rel="noreferrer" href={props.docsUrl}>
+            Managing Tokens
+          </Link>{' '}
+          chapter in our documentation to create a Registry Access Token.
+        </p>
+        <DialogFooter className="gap-2">
+          <Button
+            variant="default"
+            onClick={ev => {
+              ev.preventDefault();
+              props.close();
+            }}
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/packages/web/app/src/stories/connect-lab-modal.stories.tsx b/packages/web/app/src/stories/connect-lab-modal.stories.tsx
new file mode 100644
index 000000000..f7db6f674
--- /dev/null
+++ b/packages/web/app/src/stories/connect-lab-modal.stories.tsx
@@ -0,0 +1,50 @@
+import { ConnectLabModalContent } from '@/components/target/laboratory/connect-lab-modal';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ConnectLabModalContent> = {
+  title: 'Modals/Connect Lab Modal',
+  component: ConnectLabModalContent,
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+    },
+    close: {
+      action: 'close',
+    },
+    docsUrl: {
+      control: 'text',
+    },
+    endpoint: {
+      control: 'text',
+    },
+    isCDNEnabled: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConnectLabModalContent>;
+
+const Template: StoryFn<typeof ConnectLabModalContent> = args => {
+  return <ConnectLabModalContent {...args} />;
+};
+
+export const isCDNEnabled: Story = Template.bind({});
+isCDNEnabled.args = {
+  isOpen: true,
+  close: () => console.log('Close'),
+  docsUrl: 'https://example.com',
+  endpoint: 'https://example.com',
+  isCDNEnabled: true,
+};
+
+export const isCDNDisabled: Story = Template.bind({});
+isCDNDisabled.args = {
+  isOpen: true,
+  close: () => console.log('Close'),
+  docsUrl: 'https://example.com',
+  endpoint: 'https://example.com',
+  isCDNEnabled: false,
+};