From 13cc0f8b9bc193e169bb5af79c0c732f7e0e9465 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Wed, 5 Feb 2025 12:51:23 +0530 Subject: [PATCH] Add UI to show multiple domains --- packages/backend/src/schema.gql | 1 + .../projects/project/settings/DomainCard.tsx | 107 ++++++++++----- .../frontend/src/pages/components/modals.tsx | 2 + .../id/settings/domains/add/Config.tsx | 126 +++++++++++------- .../frontend/src/stories/MockStoriesData.ts | 2 + packages/gql-client/src/queries.ts | 8 ++ packages/gql-client/src/types.ts | 1 + 7 files changed, 171 insertions(+), 76 deletions(-) diff --git a/packages/backend/src/schema.gql b/packages/backend/src/schema.gql index 400e36ef..1404adef 100644 --- a/packages/backend/src/schema.gql +++ b/packages/backend/src/schema.gql @@ -111,6 +111,7 @@ type Deployment { isCurrent: Boolean! baseDomain: String status: DeploymentStatus! + dnsRecordData: DNSRecordAttributes createdAt: String! updatedAt: String! createdBy: User! diff --git a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx index 2fe0b05d..8b32eeca 100644 --- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx @@ -8,13 +8,14 @@ import { MenuList, MenuItem, Card, + Tooltip, } from '@snowballtools/material-tailwind-react-fork'; import EditDomainDialog from './EditDomainDialog'; import { useGQLClient } from 'context/GQLClientContext'; import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog'; import { useToast } from 'components/shared/Toast'; -import { GearIcon } from 'components/shared/CustomIcon'; +import { GearIcon, InfoRoundFilledIcon } from 'components/shared/CustomIcon'; import { Heading } from 'components/shared/Heading'; import { Button } from 'components/shared/Button'; import { useParams } from 'react-router-dom'; @@ -44,7 +45,6 @@ interface DomainCardProps { onUpdate: () => Promise; } - const DomainCard = ({ domains, domain, @@ -56,7 +56,9 @@ const DomainCard = ({ const { id } = useParams(); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [editDialogOpen, setEditDialogOpen] = useState(false); - const [dnsRecord, setDnsRecord] = useState(null); + const [dnsRecordsWithLRN, setDnsRecordsWithLRN] = useState< + { dnsRecord: DNSRecordAttributes; deployerLRN: string }[] + >([]); // const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE); const client = useGQLClient(); @@ -94,9 +96,26 @@ const DomainCard = ({ return; } - const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id); + const dnsRecordResponse = await client.getProject(id); - setDnsRecord(dnsRecordResponse.latestDNSRecord); + if (!dnsRecordResponse.project) { + return; + } + + const tempDNSRecords: { + dnsRecord: DNSRecordAttributes; + deployerLRN: string; + }[] = []; + for (const deployment of dnsRecordResponse.project.deployments) { + if (deployment.dnsRecordData.value) { + tempDNSRecords.push({ + dnsRecord: deployment.dnsRecordData, + deployerLRN: deployment.deployer.deployerLrn, + }); + } + } + + setDnsRecordsWithLRN(tempDNSRecords); }; fetchDNSData(); @@ -182,11 +201,16 @@ const DomainCard = ({ Production {domain.status === DomainStatus.Pending && ( - {/* {refreshStatus === RefreshStatus.IDLE ? ( */} - - ^ Add these records to your domain {/* and refresh to check */} - - {/* ) : refreshStatus === RefreshStatus.CHECKING ? ( + {dnsRecordsWithLRN.length ? ( + <> + {/* {refreshStatus === RefreshStatus.IDLE ? ( */} + +

+ ^ Add these records to your domain{' '} + {/* and refresh to check */} +

+ + {/* ) : refreshStatus === RefreshStatus.CHECKING ? ( ^ Checking records for {domain.name} @@ -199,26 +223,49 @@ const DomainCard = ({ )} */} - - - - - - - - - - {dnsRecord ? ( - - - - - - ) : ( -

DNS record data not available

- )} - -
TypeNameValue
{dnsRecord.resourceType}@{dnsRecord.value ?? 'Not Configured'}
+ + + + + + + + + + {dnsRecordsWithLRN.map((record) => { + return ( + <> + + + +

+ Service Provider: +

+

+ {record.deployerLRN} +

+ + } + > + + + + + + + + + ); + })} +
TypeNameValue
+ + {record.dnsRecord.resourceType}@{record.dnsRecord.value}
+ + ) : ( +

DNS record data not available

+ )} )} diff --git a/packages/frontend/src/pages/components/modals.tsx b/packages/frontend/src/pages/components/modals.tsx index 2b291a9f..39e18dc4 100644 --- a/packages/frontend/src/pages/components/modals.tsx +++ b/packages/frontend/src/pages/components/modals.tsx @@ -13,6 +13,7 @@ import { AppDeploymentRecordAttributes, Deployment, DeploymentStatus, + DNSRecordAttributes, Domain, DomainStatus, Environment, @@ -50,6 +51,7 @@ const deployment: Deployment = { applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize', applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes, + dnsRecordData: {} as DNSRecordAttributes, }; const domains: Domain[] = [ diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx index b56fae5b..e8e28b7c 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/domains/add/Config.tsx @@ -18,7 +18,9 @@ const Config = () => { const primaryDomainName = searchParams.get('name'); const { toast, dismiss } = useToast(); - const [dnsRecord, setDnsRecord] = useState(null); + const [dnsRecordsWithLRN, setDnsRecordsWithLRN] = useState< + { dnsRecord: DNSRecordAttributes; deployerLRN: string }[] + >([]); const handleSubmitDomain = async () => { if (primaryDomainName === null) { @@ -75,68 +77,100 @@ const Config = () => { return; } - const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id); + const dnsRecordResponse = await client.getProject(id); - setDnsRecord(dnsRecordResponse.latestDNSRecord); + if (!dnsRecordResponse.project) { + return; + } + + const tempDNSRecords: { + dnsRecord: DNSRecordAttributes; + deployerLRN: string; + }[] = []; + for (const deployment of dnsRecordResponse.project.deployments) { + if (deployment.dnsRecordData.value) { + tempDNSRecords.push({ + dnsRecord: deployment.dnsRecordData, + deployerLRN: deployment.deployer.deployerLrn, + }); + } + } + + setDnsRecordsWithLRN(tempDNSRecords); + + // console.log('DNS RECORD', dnsRecordResponse) + + // setDnsRecord({} as DNSRecordAttributes); }; fetchDNSData(); }, [id, client]); // TODO: Figure out DNS Provider if possible and update appropriatly + // TODO: Handle case where dnsRecords only have one entry and IP address for that record is not availble return ( - {dnsRecord ? ( + {dnsRecordsWithLRN.length ? ( <>

Add the following records to your domain.

- - - - - Type - Host - Value - - - - - - - {dnsRecord.resourceType} - - @ - -

- {dnsRecord.value ?? 'Not available'} -

- - - -
- - {dnsRecord?.value && ( - - )} - + {dnsRecordsWithLRN.map((record) => { + if (record.dnsRecord.value) { + return ( + <> +
+

Service Provider:

+

+ {record.deployerLRN} +

+
+ + + + Type + Host + Value + + + + + + {record.dnsRecord.resourceType} + + @ + +

{record.dnsRecord.value}

+ + + +
+ + ); + } + })} ) : (

DNS record data not available

)} + {dnsRecordsWithLRN.length && ( + + )} + + ; ); }; diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts index 97f63a14..5cee191e 100644 --- a/packages/frontend/src/stories/MockStoriesData.ts +++ b/packages/frontend/src/stories/MockStoriesData.ts @@ -13,6 +13,7 @@ import { Environment, Permission, AppDeploymentRecordAttributes, + DNSRecordAttributes, } from 'gql-client'; export const user: User = { @@ -112,6 +113,7 @@ export const deployment0: Deployment = { applicationDeploymentRequestId: 'bafyreiaycvq6imoppnpwdve4smj6t6ql5svt5zl3x6rimu4qwyzgjorize', applicationDeploymentRecordData: {} as AppDeploymentRecordAttributes, + dnsRecordData: {} as DNSRecordAttributes, }; export const project: Project = { diff --git a/packages/gql-client/src/queries.ts b/packages/gql-client/src/queries.ts index 2af5a1e3..0459b3c4 100644 --- a/packages/gql-client/src/queries.ts +++ b/packages/gql-client/src/queries.ts @@ -62,11 +62,19 @@ query ($projectId: String!) { } deployer { baseDomain + deployerLrn } createdBy { id name } + dnsRecordData { + name + value + request + resourceType + version + } } } } diff --git a/packages/gql-client/src/types.ts b/packages/gql-client/src/types.ts index 2370b414..12aa63a1 100644 --- a/packages/gql-client/src/types.ts +++ b/packages/gql-client/src/types.ts @@ -112,6 +112,7 @@ export type Deployment = { createdBy: User; createdAt: string; updatedAt: string; + dnsRecordData: DNSRecordAttributes; applicationDeploymentRequestId: string; };