Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-23 17:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

(7)Drop V2: Connect Lab Modal (#5320)

Browse source
This commit is contained in:
Tuval Simha 2024-08-18 21:32:50 +03:00 committed by GitHub
parent f85d177767
commit 77dad9ef64
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 139 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
packages/web/app/src/components/target/laboratory/connect-lab-modal.tsx
View file

@ -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>
);
};

50
packages/web/app/src/stories/connect-lab-modal.stories.tsx Normal file
View file

@ -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,
};