Add UI to show multiple domains

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!

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 ? ( */}
+          {dnsRecordsWithLRN.length ? (
-          <Heading>
+            <>
-            ^ Add these records to your domain {/* and refresh to check */}
+              {/* {refreshStatus === RefreshStatus.IDLE ? ( */}
-          </Heading>
+              <Heading>
-          {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
+                <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>
+              <table>
-            <thead>
+                <thead>
-              <tr>
+                  <tr>
-                <th className="text-left">Type</th>
+                    <th></th>
-                <th className="text-left">Name</th>
+                    <th className="text-left">Type</th>
-                <th className="text-left">Value</th>
+                    <th className="text-left">Name</th>
-              </tr>
+                    <th className="text-left">Value</th>
-            </thead>
+                  </tr>
-            <tbody>
+                </thead>
-              {dnsRecord ? (
+                {dnsRecordsWithLRN.map((record) => {
-                <tr>
+                  return (
-                  <td>{dnsRecord.resourceType}</td>
+                    <>
-                  <td>@</td>
+                      <tbody>
-                  <td>{dnsRecord.value ?? 'Not Configured'}</td>
+                        <tr>
-                </tr>
+                          <Tooltip
-              ) : (
+                            content={
-                <p className={'text-red-500'}>DNS record data not available</p>
+                              <div>
-              )}
+                                <p className="inline text-white">
-            </tbody>
+                                  Service Provider:
-          </table>
+                                </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>
       )}
 

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[] = [

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

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 = {

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
+      }
     }
   }
 }

packages/gql-client/src/types.ts

@@ -112,6 +112,7 @@ export type Deployment = {
   createdBy: User;
   createdAt: string;
   updatedAt: string;
+  dnsRecordData: DNSRecordAttributes;
   applicationDeploymentRequestId: string;
 };