refactor: [M3-9016] - Convert DomainRecords.tsx to functional component

packages/manager/.changeset/pr-11447-tech-stories-1734960446943.md

@@ -0,0 +1,5 @@
+---
+'@linode/manager': Tech Stories
+---
+
+Refactor and convert DomainRecords to functional component ([#11447](https://github.com/linode/manager/pull/11447))

packages/manager/src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -21,11 +21,14 @@ export interface ConfirmationDialogProps extends DialogProps {
  * - Avoid “Are you sure?” language. Assume the user knows what they want to do while helping them avoid unintended consequences.
  *
  */
-export const ConfirmationDialog = (props: ConfirmationDialogProps) => {
+export const ConfirmationDialog = React.forwardRef<
+  HTMLDivElement,
+  ConfirmationDialogProps
+>((props, ref) => {
   const { actions, children, ...dialogProps } = props;
 
   return (
-    <Dialog {...dialogProps} PaperProps={{ role: undefined }}>
+    <Dialog {...dialogProps} PaperProps={{ role: undefined }} ref={ref}>
       {children}
       <Stack
         direction="row"
@@ -39,4 +42,4 @@ export const ConfirmationDialog = (props: ConfirmationDialogProps) => {
       </Stack>
     </Dialog>
   );
-};
+});

packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx

@@ -15,8 +15,8 @@ import {
 } from 'src/queries/domains';
 
 import { DeleteDomain } from '../DeleteDomain';
-import DomainRecords from '../DomainRecords';
 import { DownloadDNSZoneFileButton } from '../DownloadDNSZoneFileButton';
+import { DomainRecords } from './DomainRecords/DomainRecords';
 
 import type { DomainState } from 'src/routes/domains';
 

packages/manager/src/features/Domains/DomainRecordActionMenu.tsx → packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecordActionMenu.tsx

@@ -1,8 +1,10 @@
-import { Domain } from '@linode/api-v4/lib/domains';
 import { has } from 'ramda';
 import * as React from 'react';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+
+import type { Domain } from '@linode/api-v4/lib/domains';
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
 
 interface EditPayload {
   id?: number;

packages/manager/src/features/Domains/DomainRecordDrawer.tsx → packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecordDrawer.tsx

@@ -30,7 +30,7 @@ import {
   transferHelperText as helperText,
   isValidCNAME,
   isValidDomainRecord,
-} from './domainUtils';
+} from '../../domainUtils';
 
 import type {
   Domain,

packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecordTable.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Table } from 'src/components/Table';
+import { TableBody } from 'src/components/TableBody';
+import { TableCell } from 'src/components/TableCell';
+import { TableHead } from 'src/components/TableHead';
+import { TableRow } from 'src/components/TableRow';
+import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
+
+import { StyledTableCell } from './DomainRecords.styles';
+
+import type { IType } from './generateTypes';
+import type { Domain, DomainRecord } from '@linode/api-v4/lib/domains';
+
+interface DomainRecordTableProps {
+  count: number;
+  handlePageChange: (page: number) => void;
+  handlePageSizeChange: (pageSize: number) => void;
+  page: number;
+  pageSize: number;
+  paginatedData: Domain[] | DomainRecord[];
+  type: IType;
+}
+
+export const DomainRecordTable = (props: DomainRecordTableProps) => {
+  const {
+    count,
+    handlePageChange,
+    handlePageSizeChange,
+    page,
+    pageSize,
+    paginatedData,
+    type,
+  } = props;
+
+  return (
+    <>
+      <Table aria-label={`List of Domains ${type.title}`}>
+        <TableHead>
+          <TableRow>
+            {type.columns.length > 0 &&
+              type.columns.map((col, columnIndex) => {
+                return <TableCell key={columnIndex}>{col.title}</TableCell>;
+              })}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {type.data.length === 0 ? (
+            <TableRowEmpty colSpan={type.columns.length} />
+          ) : (
+            paginatedData.map((data, idx) => {
+              return (
+                <TableRow
+                  data-qa-record-row={type.title}
+                  key={`domain-record-${idx}`}
+                >
+                  {type.columns.length > 0 &&
+                    type.columns.map(({ render, title }, columnIndex) => {
+                      return (
+                        <StyledTableCell
+                          data-qa-column={title}
+                          key={columnIndex}
+                          parentColumn={title}
+                        >
+                          {render(data)}
+                        </StyledTableCell>
+                      );
+                    })}
+                </TableRow>
+              );
+            })
+          )}
+        </TableBody>
+      </Table>
+      <PaginationFooter
+        count={count}
+        eventCategory={`${type.title.toLowerCase()} panel`}
+        handlePageChange={handlePageChange}
+        handleSizeChange={handlePageSizeChange}
+        page={page}
+        pageSize={pageSize}
+        // Disabling show All as it is impacting page performance.
+        showAll={false}
+      />
+    </>
+  );
+};

packages/manager/src/features/Domains/DomainRecords.styles.ts → packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecords.styles.ts

@@ -1,12 +1,10 @@
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
+
 import { TableCell } from 'src/components/TableCell';
 
 export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
   ({ theme }) => ({
-    margin: 0,
-    marginTop: theme.spacing(2),
-    width: '100%',
     '& .MuiGrid-item': {
       paddingLeft: 0,
       paddingRight: 0,
@@ -16,30 +14,33 @@ export const StyledGrid = styled(Grid, { label: 'StyledGrid' })(
         marginRight: theme.spacing(),
       },
     },
+    margin: 0,
+    marginTop: theme.spacing(2),
     [theme.breakpoints.down('md')]: {
       marginLeft: theme.spacing(),
       marginRight: theme.spacing(),
     },
+    width: '100%',
   })
 );
 
-export const StyledTableCell = styled(TableCell, { label: 'StyledTabelCell' })(
+export const StyledTableCell = styled(TableCell, { label: 'StyledTableCell' })(
   ({ theme }) => ({
-    whiteSpace: 'nowrap' as const,
-    width: 'auto',
     '& .data': {
       maxWidth: 300,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap' as const,
       [theme.breakpoints.up('md')]: {
         maxWidth: 750,
       },
+      whiteSpace: 'nowrap' as const,
     },
     '&:last-of-type': {
       display: 'flex',
       justifyContent: 'flex-end',
     },
+    whiteSpace: 'nowrap' as const,
+    width: 'auto',
   })
 );