Update UI when DNS record is not present

2025-02-03 11:50:24 +05:30 · 2025-02-03 11:50:24 +05:30 · ce56a4dc29
commit ce56a4dc29
parent c685b7d5b1
14 changed files with 106 additions and 81 deletions
--- a/packages/backend/src/database.ts
+++ b/packages/backend/src/database.ts
@ -642,7 +642,7 @@ export class Database {
    return domain;
  }

-  async getLatestDNSDataByProjectId(
+  async getLatestDNSRecordByProjectId(
    projectId: string,
  ): Promise<DNSRecordAttributes | null> {
    const deploymentRepository = this.dataSource.getRepository(Deployment);
--- a/packages/backend/src/registry.ts
+++ b/packages/backend/src/registry.ts
@ -16,7 +16,7 @@ import {
  ApplicationDeploymentRequest,
  ApplicationDeploymentRemovalRequest
 } from './entity/Deployment';
-import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord, DNSRecord, RegistryRecord } from './types';
+import { AppDeploymentRecord, AppDeploymentRemovalRecord, AuctionParams, DeployerRecord, RegistryRecord } from './types';
 import { getConfig, getRepoDetails, registryTransactionWithRetry, sleep } from './utils';

 const log = debug('snowball:registry');
--- a/packages/backend/src/resolvers.ts
+++ b/packages/backend/src/resolvers.ts
@ -108,11 +108,11 @@ export const createResolvers = async (service: Service): Promise<any> => {
        return service.verifyTx(txHash, amount, senderAddress);
      },

-      getLatestDNSDataByProjectId: async (
+      latestDNSRecord: async (
        _: any,
        { projectId }: { projectId: string },
      ) => {
-        return service.getLatestDNSDataByProjectId(projectId);
+        return service.getLatestDNSRecordByProjectId(projectId);
      },
    },

--- a/packages/backend/src/schema.gql
+++ b/packages/backend/src/schema.gql
@ -273,7 +273,7 @@ type Query {
  projectMembers(projectId: String!): [ProjectMember!]
  searchProjects(searchText: String!): [Project!]
  getAuctionData(auctionId: String!): Auction!
-  getLatestDNSDataByProjectId(projectId: String!): DNSRecordAttributes
+  latestDNSRecord(projectId: String!): DNSRecordAttributes
  oldestDomain(projectId: String!): Domain
  domains(projectId: String!, filter: FilterDomainsInput): [Domain]
  deployers: [Deployer]
--- a/packages/backend/src/service.ts
+++ b/packages/backend/src/service.ts
@ -215,7 +215,7 @@ export class Service {
      const dnsRecordData: DNSRecordAttributes = {
        name: dnsRecord.attributes.name,
        request: dnsRecord.attributes.request,
-        resourceType: dnsRecord.attributes.resourceType,
+        resourceType: dnsRecord.attributes.resource_type,
        value: dnsRecord.attributes.value,
        version: dnsRecord.attributes.version,
      }
@ -486,8 +486,8 @@ export class Service {
    return commitDeployments;
  }

-  async getLatestDNSDataByProjectId(projectId: string): Promise<DNSRecordAttributes | null> {
-    const dnsDeployments = await this.db.getLatestDNSDataByProjectId(projectId);
+  async getLatestDNSRecordByProjectId(projectId: string): Promise<DNSRecordAttributes | null> {
+    const dnsDeployments = await this.db.getLatestDNSRecordByProjectId(projectId);
    return dnsDeployments;
  }

--- a/packages/backend/src/types.ts
+++ b/packages/backend/src/types.ts
@ -48,6 +48,14 @@ export interface DNSRecordAttributes {
  version: string;
 }

+export interface RegistryDNSRecordAttributes {
+  name: string;
+  value: string;
+  request: string;
+  resource_type: string;
+  version: string;
+}
+
 export interface AppDeploymentRemovalRecordAttributes {
  deployment: string;
  request: string;
@ -73,7 +81,7 @@ export interface AppDeploymentRemovalRecord extends RegistryRecord {
 }

 export interface DNSRecord extends RegistryRecord {
-  attributes: DNSRecordAttributes
+  attributes: RegistryDNSRecordAttributes
 }

 export interface AddProjectFromTemplateInput {
--- a/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/DomainCard.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Domain, DomainStatus, Project } from 'gql-client';
+import { DNSRecordAttributes, Domain, DomainStatus, Project } from 'gql-client';

 import {
  Typography,
@ -18,8 +18,8 @@ import { useToast } from 'components/shared/Toast';
 import {
  // CheckIcon,
  // CrossIcon,
-  GearIcon,
  // LoadingIcon,
+  GearIcon,
 } from 'components/shared/CustomIcon';
 import { Heading } from 'components/shared/Heading';
 import { Button } from 'components/shared/Button';
@ -61,7 +61,7 @@ const DomainCard = ({
  // const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
-  const [IPAddress, setIPAddress] = useState<string>();
+  const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);

  const client = useGQLClient();

@ -98,9 +98,9 @@ const DomainCard = ({
        return;
      }

-      const dnsData = await client.getLatestDNSDataByProjectId(id);
+      const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);

-      setIPAddress(dnsData.value);
+      setDnsRecord(dnsRecordResponse.latestDNSRecord);
    };

    fetchDNSData();
@ -187,9 +187,9 @@ const DomainCard = ({
      {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>
+          <Heading>
+            ^ Add these records to your domain {/* and refresh to check */}
+          </Heading>
          {/* ) : refreshStatus === RefreshStatus.CHECKING ? (
            <Heading className="text-blue-500">
              ^ Checking records for {domain.name}
@ -212,11 +212,15 @@ const DomainCard = ({
              </tr>
            </thead>
            <tbody>
-              <tr>
-                <td>{DOMAIN_RECORD.type}</td>
-                <td>{DOMAIN_RECORD.name}</td>
-                <td>{IPAddress ?? 'Not Configured'}</td>
-              </tr>
+              {dnsRecord ? (
+                <tr>
+                  <td>{dnsRecord.resourceType}</td>
+                  <td>{DOMAIN_RECORD.name}</td>
+                  <td>{dnsRecord.value ?? 'Not Configured'}</td>
+                </tr>
+              ) : (
+                <p className={'text-red-500'}>DNS record data not available</p>
+              )}
            </tbody>
          </table>
        </Card>
--- a/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
+++ b/packages/frontend/src/components/projects/project/settings/EditDomainDialog.tsx
@ -1,7 +1,7 @@
 import {
+  // useMemo,
  useCallback,
  useEffect,
-  // useMemo
 } from 'react';
 import {
  // Controller,
@ -11,9 +11,9 @@ import {
 import { Domain } from 'gql-client';

 import {
-  Typography,
  // Select,
  // Option,
+  Typography,
 } from '@snowballtools/material-tailwind-react-fork';

 import { useGQLClient } from 'context/GQLClientContext';
--- a/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
+++ b/packages/frontend/src/components/projects/project/settings/SetupDomain.tsx
@ -2,11 +2,11 @@
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';

-import { Heading } from 'components/shared/Heading';
 // import { InlineNotification } from 'components/shared/InlineNotification';
+// import { Radio } from 'components/shared/Radio';
+import { Heading } from 'components/shared/Heading';
 import { Input } from 'components/shared/Input';
 import { Button } from 'components/shared/Button';
-// import { Radio } from 'components/shared/Radio';

 interface SetupDomainFormValues {
  domainName: string;
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@ -6,30 +6,30 @@ import {
 } from 'react-router-dom';
 import { RequestError } from 'octokit';

-import { useOctokit } from 'context/OctokitContext';
-import { GitCommitWithBranch, OutletContextType } from '../../../../types';
 // import { useGQLClient } from 'context/GQLClientContext';
 import {
  // Button,
+  // Tag,
  Heading,
  Avatar,
-  // Tag
 } from 'components/shared';
-import { getInitials } from 'utils/geInitials';
 import {
-  BranchStrokeIcon,
  // CheckRoundFilledIcon,
  // ClockIcon,
+  // GlobeIcon,
+  BranchStrokeIcon,
  CursorBoxIcon,
  GithubStrokeIcon,
-  // GlobeIcon,
  LinkIcon,
  CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
+// import { Domain, DomainStatus } from 'gql-client';
+import { useOctokit } from 'context/OctokitContext';
+import { GitCommitWithBranch, OutletContextType } from '../../../../types';
+import { getInitials } from 'utils/geInitials';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
 import { relativeTimeMs } from 'utils/time';
-// import { Domain, DomainStatus } from 'gql-client';
 import { AuctionCard } from 'components/projects/project/overview/Activity/AuctionCard';

 const COMMITS_PER_PAGE = 4;
--- 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
@ -8,6 +8,7 @@ import { ArrowRightCircleIcon } from 'components/shared/CustomIcon';
 import { ProjectSettingContainer } from 'components/projects/project/settings/ProjectSettingContainer';
 import { useToast } from 'components/shared/Toast';
 import { useEffect, useState } from 'react';
+import { DNSRecordAttributes } from 'gql-client';

 const Config = () => {
  const { id, orgSlug } = useParams();
@ -17,7 +18,7 @@ const Config = () => {
  const primaryDomainName = searchParams.get('name');
  const { toast, dismiss } = useToast();

-  const [IPAddress, setIPAddress] = useState<string>();
+  const [dnsRecord, setDnsRecord] = useState<DNSRecordAttributes | null>(null);

  const handleSubmitDomain = async () => {
    if (primaryDomainName === null) {
@ -74,9 +75,9 @@ const Config = () => {
        return;
      }

-      const dnsData = await client.getLatestDNSDataByProjectId(id);
+      const dnsRecordResponse = await client.getLatestDNSRecordByProjectId(id);

-      setIPAddress(dnsData.value);
+      setDnsRecord(dnsRecordResponse.latestDNSRecord);
    };

    fetchDNSData();
@ -85,49 +86,57 @@ const Config = () => {
  // TODO: Figure out DNS Provider if possible and update appropriatly
  return (
    <ProjectSettingContainer headingText="Setup domain name">
-      <p className="text-blue-gray-500">
-        Add the following records to your domain.
-      </p>
+      {dnsRecord ? (
+        <>
+          <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>
+            <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>A</Table.RowHeaderCell>
-            <Table.Cell>@</Table.Cell>
-            <Table.Cell>
-              <p className={!IPAddress ? 'text-red-500' : ''}>
-                {IPAddress ?? 'Not available'}
-              </p>
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+            <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>

-      {IPAddress && (
-        <InlineNotification
-          variant="info"
-          title={`It can take up to 48 hours for these updates to reflect
-        globally.`}
-        />
+          {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>
+        </>
+      ) : (
+        <p className={'text-red-500'}>DNS record data not available</p>
      )}
-      <Button
-        className="w-fit"
-        disabled={!IPAddress}
-        onClick={handleSubmitDomain}
-        variant="primary"
-        shape="default"
-        rightIcon={<ArrowRightCircleIcon />}
-      >
-        FINISH
-      </Button>
    </ProjectSettingContainer>
  );
 };
--- a/packages/gql-client/src/client.ts
+++ b/packages/gql-client/src/client.ts
@ -467,14 +467,14 @@ export class GQLClient {
    return data.verifyTx;
  }

-  async getLatestDNSDataByProjectId(projectId: string): Promise<types.GetLatestDNSDataResponse> {
+  async getLatestDNSRecordByProjectId(projectId: string): Promise<types.GetLatestDNSDataResponse> {
    const { data } = await this.client.query({
-      query: queries.getLatestDNSDataByProjectId,
+      query: queries.getLatestDNSRecordByProjectId,
      variables: {
        projectId,
      },
    });

-    return data.getLatestDNSDataByProjectId;
+    return data;
  }
 }
--- a/packages/gql-client/src/queries.ts
+++ b/packages/gql-client/src/queries.ts
@ -357,9 +357,9 @@ query ($txHash: String!, $amount: String!, $senderAddress: String!) {
 }
 `;

-export const getLatestDNSDataByProjectId = gql`
+export const getLatestDNSRecordByProjectId = gql`
 query($projectId: String!) {
-  getLatestDNSDataByProjectId(projectId: $projectId) {
+  latestDNSRecord(projectId: $projectId) {
    name
    value
    request
--- a/packages/gql-client/src/types.ts
+++ b/packages/gql-client/src/types.ts
@ -381,10 +381,14 @@ export type AuctionParams = {
  numProviders: number;
 };

-export type GetLatestDNSDataResponse = {
+export type DNSRecordAttributes = {
  name: string;
  value: string;
  request: string;
  resourceType: string;
  version: string;
 }
+
+export type GetLatestDNSDataResponse = {
+  latestDNSRecord: DNSRecordAttributes | null
+}