diff --git a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx index 95247075..28775e96 100644 --- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx @@ -2,7 +2,6 @@ import { useState } from 'react'; import { Domain, DomainStatus, Project } from 'gql-client'; import { - Chip, Typography, Menu, MenuHandler, @@ -15,6 +14,15 @@ import EditDomainDialog from './EditDomainDialog'; import { useGQLClient } from 'context/GQLClientContext'; import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog'; import { useToast } from 'components/shared/Toast'; +import { Tag } from 'components/shared/Tag'; +import { + CheckIcon, + CrossIcon, + GearIcon, + LoadingIcon, +} from 'components/shared/CustomIcon'; +import { Heading } from 'components/shared/Heading'; +import { Button } from 'components/shared/Button'; enum RefreshStatus { IDLE, @@ -79,22 +87,29 @@ const DomainCard = ({ <>
- - ^ {domain.name} - - ^} - /> + + {domain.name}{' '} + + ) : ( + + ) + } + > + {domain.status} + +
{ SetRefreshStatus(RefreshStatus.CHECKING); setTimeout(() => { @@ -102,11 +117,17 @@ const DomainCard = ({ }, CHECK_FAIL_TIMEOUT); }} > - {refreshStatus === RefreshStatus.CHECKING ? 'L' : 'R'} + {refreshStatus === RefreshStatus.CHECKING ? ( + + ) : ( + 'L' + )} - + {refreshStatus === RefreshStatus.IDLE ? ( - + ^ Add these records to your domain and refresh to check - + ) : refreshStatus === RefreshStatus.CHECKING ? ( - + ^ Checking records for {domain.name} - + ) : (
diff --git a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx index 44a285b8..3607c6b1 100644 --- a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx +++ b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx @@ -1,6 +1,5 @@ import { useCallback, useEffect, useMemo } from 'react'; import { Controller, useForm, SubmitHandler } from 'react-hook-form'; -import toast from 'react-hot-toast'; import { Domain } from 'gql-client'; import { @@ -9,10 +8,11 @@ import { Option, } from '@snowballtools/material-tailwind-react-fork'; -import { useGQLClient } from '../../../../context/GQLClientContext'; +import { useGQLClient } from 'context/GQLClientContext'; import { Modal } from 'components/shared/Modal'; import { Button } from 'components/shared/Button'; import { Input } from 'components/shared/Input'; +import { useToast } from 'components/shared/Toast'; const DEFAULT_REDIRECT_OPTIONS = ['none']; @@ -40,6 +40,7 @@ const EditDomainDialog = ({ onUpdate, }: EditDomainDialogProp) => { const client = useGQLClient(); + const { toast, dismiss } = useToast(); const getRedirectUrl = (domain: Domain) => { const redirectDomain = domain.redirectTo; @@ -99,10 +100,20 @@ const EditDomainDialog = ({ if (updateDomain) { await onUpdate(); - toast.success(`Domain ${domain.name} has been updated`); + toast({ + id: 'domain_id_updated', + title: `Domain ${domain.name} has been updated`, + variant: 'success', + onDismiss: dismiss, + }); } else { reset(); - toast.error(`Error updating domain ${domain.name}`); + toast({ + id: 'domain_id_error_update', + title: `Error updating domain ${domain.name}`, + variant: 'error', + onDismiss: dismiss, + }); } handleOpen(); diff --git a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx index 145087ac..24eedd16 100644 --- a/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/WebhookCard.tsx @@ -3,6 +3,8 @@ import { useState } from 'react'; import { DeleteWebhookDialog } from 'components/projects/Dialog/DeleteWebhookDialog'; import { Button } from 'components/shared/Button'; import { useToast } from 'components/shared/Toast'; +import { Input } from 'components/shared/Input'; +import { CopyIcon, TrashIcon } from 'components/shared/CustomIcon'; interface WebhookCardProps { webhookUrl: string; @@ -14,11 +16,12 @@ const WebhookCard = ({ webhookUrl, onDelete }: WebhookCardProps) => { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); return ( -
- {webhookUrl} +
+
= { + title: 'Project/Settings/DomainCard', + component: DomainCard, + tags: ['autodocs'], + argTypes: { + domains: { + control: { + type: 'object', + }, + }, + domain: { + control: { + type: 'object', + }, + }, + branches: { + control: { + type: 'object', + }, + }, + project: { + control: { + type: 'object', + }, + }, + onUpdate: { + action: 'update', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + domains: [domain0, domain1], + domain: domain0, + branches: ['main'], + project: project, + }, +}; diff --git a/packages/frontend/src/stories/Project/Settings/EditDomainDialog.stories.tsx b/packages/frontend/src/stories/Project/Settings/EditDomainDialog.stories.tsx new file mode 100644 index 00000000..8aa62cf2 --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/EditDomainDialog.stories.tsx @@ -0,0 +1,43 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import EditDomainDialog from 'components/projects/project/settings/EditDomainDialog'; + +const meta: Meta = { + title: 'Components/EditDomainDialog', + component: EditDomainDialog, + tags: ['autodocs'], + argTypes: { + domains: { + control: { + type: 'object', + }, + }, + open: { + control: { + type: 'boolean', + }, + }, + handleOpen: { + action: 'open', + }, + domain: { + control: { + type: 'object', + }, + }, + branches: { + control: { + type: 'object', + }, + }, + onUpdate: { + action: 'update', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Project/Settings/WebhookCard.stories.tsx b/packages/frontend/src/stories/Project/Settings/WebhookCard.stories.tsx new file mode 100644 index 00000000..c45d36a0 --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/WebhookCard.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import WebhookCard from 'components/projects/project/settings/WebhookCard'; + +const meta: Meta = { + title: 'Project/Settings/WebhookCard', + component: WebhookCard, + tags: ['autodocs'], + argTypes: { + webhookUrl: { + control: { + type: 'text', + }, + }, + onDelete: { + action: 'delete', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + webhookUrl: 'https://api.retool.com', + }, +};