Add UI to show multiple domains

2025-02-05 12:51:23 +05:30 · 2025-02-05 12:51:23 +05:30 · 13cc0f8b9b
commit 13cc0f8b9b
parent 93b74074a3
7 changed files with 171 additions and 76 deletions
--- 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!
--- 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<void>;
 }

-
 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<DNSRecordAttributes | null>(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 = ({
      <Typography variant="small">Production</Typography>
      {domain.status === DomainStatus.Pending && (
        <Card className="bg-slate-100 p-4 text-sm">
-          {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
-          <Heading>
-            ^ Add these records to your domain {/* and refresh to check */}
-          </Heading>
-          {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
+          {dnsRecordsWithLRN.length ? (
+            <>
+              {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
+              <Heading>
+                <p className="text-blue-gray-500 pb-3">
+                  ^ Add these records to your domain{' '}
+                  {/* and refresh to check */}
+                </p>
+              </Heading>
+              {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
            <Heading className="text-blue-500">
              ^ Checking records for {domain.name}
            </Heading>
@ -199,26 +223,49 @@ const DomainCard = ({
            </div>
          )} */}

-          <table>
-            <thead>
-              <tr>
-                <th className="text-left">Type</th>
-                <th className="text-left">Name</th>
-                <th className="text-left">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {dnsRecord ? (
-                <tr>
-                  <td>{dnsRecord.resourceType}</td>
-                  <td>@</td>
-                  <td>{dnsRecord.value ?? 'Not Configured'}</td>
-                </tr>
-              ) : (
-                <p className={'text-red-500'}>DNS record data not available</p>
-              )}
-            </tbody>
-          </table>
+              <table>
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th className="text-left">Type</th>
+                    <th className="text-left">Name</th>
+                    <th className="text-left">Value</th>
+                  </tr>
+                </thead>
+                {dnsRecordsWithLRN.map((record) => {
+                  return (
+                    <>
+                      <tbody>
+                        <tr>
+                          <Tooltip
+                            content={
+                              <div>
+                                <p className="inline text-white">
+                                  Service Provider:
+                                </p>
+                                <p className="text-blue-gray-300 pl-2 inline">
+                                  {record.deployerLRN}
+                                </p>
+                              </div>
+                            }
+                          >
+                            <td>
+                              <InfoRoundFilledIcon />
+                            </td>
+                          </Tooltip>
+                          <td>{record.dnsRecord.resourceType}</td>
+                          <td>@</td>
+                          <td>{record.dnsRecord.value}</td>
+                        </tr>
+                      </tbody>
+                    </>
+                  );
+                })}
+              </table>
+            </>
+          ) : (
+            <p className="text-red-500">DNS record data not available</p>
+          )}
        </Card>
      )}

--- 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[] = [
--- 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<DNSRecordAttributes | null>(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 (
    <ProjectSettingContainer headingText="Setup domain name">
-      {dnsRecord ? (
+      {dnsRecordsWithLRN.length ? (
        <>
          <p className="text-blue-gray-500">
            Add the following records to your domain.
          </p>
-
-          <Table>
-            <Table.Header>
-              <Table.Row>
-                <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
-                <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
-              </Table.Row>
-            </Table.Header>
-
-            <Table.Body>
-              <Table.Row>
-                <Table.RowHeaderCell>
-                  {dnsRecord.resourceType}
-                </Table.RowHeaderCell>
-                <Table.Cell>@</Table.Cell>
-                <Table.Cell>
-                  <p className={!dnsRecord.value ? 'text-red-500' : ''}>
-                    {dnsRecord.value ?? 'Not available'}
-                  </p>
-                </Table.Cell>
-              </Table.Row>
-            </Table.Body>
-          </Table>
-
-          {dnsRecord?.value && (
-            <InlineNotification
-              variant="info"
-              title={`It can take up to 48 hours for these updates to reflect
-          globally.`}
-            />
-          )}
-          <Button
-            className="w-fit"
-            disabled={!dnsRecord?.value}
-            onClick={handleSubmitDomain}
-            variant="primary"
-            shape="default"
-            rightIcon={<ArrowRightCircleIcon />}
-          >
-            FINISH
-          </Button>
+          {dnsRecordsWithLRN.map((record) => {
+            if (record.dnsRecord.value) {
+              return (
+                <>
+                  <div className="pt-6">
+                    <p className="text-gray-100 inline">Service Provider:</p>
+                    <p className="text-blue-gray-500 pl-2 inline">
+                      {record.deployerLRN}
+                    </p>
+                  </div>
+                  <Table>
+                    <Table.Header>
+                      <Table.Row>
+                        <Table.ColumnHeaderCell>Type</Table.ColumnHeaderCell>
+                        <Table.ColumnHeaderCell>Host</Table.ColumnHeaderCell>
+                        <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+                      </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                      <Table.Row>
+                        <Table.RowHeaderCell>
+                          {record.dnsRecord.resourceType}
+                        </Table.RowHeaderCell>
+                        <Table.Cell>@</Table.Cell>
+                        <Table.Cell>
+                          <p>{record.dnsRecord.value}</p>
+                        </Table.Cell>
+                      </Table.Row>
+                    </Table.Body>
+                  </Table>
+                </>
+              );
+            }
+          })}
        </>
      ) : (
        <p className={'text-red-500'}>DNS record data not available</p>
      )}
+      {dnsRecordsWithLRN.length && (
+        <InlineNotification
+          variant="info"
+          title={`It can take up to 48 hours for these updates to reflect
+                  globally.`}
+        />
+      )}
+      <Button
+        className="w-fit"
+        disabled={!dnsRecordsWithLRN.length}
+        onClick={handleSubmitDomain}
+        variant="primary"
+        shape="default"
+        rightIcon={<ArrowRightCircleIcon />}
+      >
+        FINISH
+      </Button>
+      ;
    </ProjectSettingContainer>
  );
 };
--- 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 = {
--- 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
+      }
    }
  }
 }
--- 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;
 };