More refactoring...

linode · Dec 23, 2024 · 9d26ed5 · 9d26ed5
1 parent 633f5b1
commit 9d26ed5
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 75 deletions.
diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainDetail.tsx b/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';
 

diff --git a/...atures/Domains/DomainRecordActionMenu.tsx → .../DomainRecords/DomainRecordActionMenu.tsx b/...atures/Domains/DomainRecordActionMenu.tsx → .../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;

diff --git a/...tures/Domains/DomainRecordDrawer.test.tsx → ...DomainRecords/DomainRecordDrawer.test.tsx b/...tures/Domains/DomainRecordDrawer.test.tsx → ...DomainRecords/DomainRecordDrawer.test.tsx
diff --git a/...c/features/Domains/DomainRecordDrawer.tsx → ...tail/DomainRecords/DomainRecordDrawer.tsx b/...c/features/Domains/DomainRecordDrawer.tsx → ...tail/DomainRecords/DomainRecordDrawer.tsx
@@ -30,7 +30,7 @@ import {
   transferHelperText as helperText,
   isValidCNAME,
   isValidDomainRecord,
-} from './domainUtils';
+} from '../../domainUtils';
 
 import type {
   Domain,

diff --git a/packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecordTable.tsx b/packages/manager/src/features/Domains/DomainDetail/DomainRecords/DomainRecordTable.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+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 './DomainRecords';
+import type { DomainRecord } from '@linode/api-v4';
+
+interface DomainRecordTableProps {
+  paginatedData: DomainRecord[];
+  type: IType;
+}
+
+export const DomainRecordTable = (props: DomainRecordTableProps) => {
+  const { 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={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>
+  );
+};
diff --git a/.../features/Domains/DomainRecords.styles.ts → ...ail/DomainRecords/DomainRecords.styles.ts b/.../features/Domains/DomainRecords.styles.ts → ...ail/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' })(
   ({ 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',
   })
 );
 

diff --git a/...er/src/features/Domains/DomainRecords.tsx → ...ainDetail/DomainRecords/DomainRecords.tsx b/...er/src/features/Domains/DomainRecords.tsx → ...ainDetail/DomainRecords/DomainRecords.tsx
@@ -10,12 +10,6 @@ import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
 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 {
   getAPIErrorOrDefault,
   getErrorStringOrDefault,
@@ -26,13 +20,14 @@ import { truncateEnd } from 'src/utilities/truncate';
 
 import { DomainRecordActionMenu } from './DomainRecordActionMenu';
 import { DomainRecordDrawer } from './DomainRecordDrawer';
-import { StyledDiv, StyledGrid, StyledTableCell } from './DomainRecords.styles';
+import { StyledDiv, StyledGrid } from './DomainRecords.styles';
 import {
   getNSRecords,
   getTTL,
   msToReadable,
   typeEq,
 } from './DomainRecordsUtils';
+import { DomainRecordTable } from './DomainRecordTable';
 
 import type {
   Domain,
@@ -74,7 +69,7 @@ interface State {
   types: IType[];
 }
 
-interface IType {
+export interface IType {
   columns: {
     render: (r: Domain | DomainRecord) => JSX.Element | null | string;
     title: string;
@@ -92,7 +87,7 @@ const createLink = (title: string, handler: () => void) => (
   </Button>
 );
 
-const DomainRecords = (props: Props) => {
+export const DomainRecords = (props: Props) => {
   const { domain, domainRecords, updateDomain, updateRecords } = props;
 
   const generateTypes = (): IType[] => [
@@ -479,7 +474,7 @@ const DomainRecords = (props: Props) => {
       submitting: false,
     },
     drawer: defaultDrawerState,
-    types: generateTypes(),
+    types: [],
   });
 
   const confirmDeletion = (recordId: number) =>
@@ -624,13 +619,6 @@ const DomainRecords = (props: Props) => {
 
   const resetDrawer = () => updateDrawer(() => defaultDrawerState);
 
-  //   const updateConfirmDialog = (
-  //     fn: (d: ConfirmationState) => ConfirmationState
-  //   ) =>
-  //     this.setState(over(lensPath(['confirmDialog']), fn), () => {
-  //       scrollErrorIntoView();
-  //     });
-
   const updateConfirmDialog = (
     fn: (d: ConfirmationState) => ConfirmationState
   ) => {
@@ -642,9 +630,6 @@ const DomainRecords = (props: Props) => {
     });
   };
 
-  //   const updateDrawer = (fn: (d: DrawerState) => DrawerState) =>
-  //     this.setState(over(lensPath(['drawer']), fn));
-
   const updateDrawer = (fn: (d: DrawerState) => DrawerState) => {
     setState((prevState) => {
       return over(lensPath(['drawer']), fn, prevState);
@@ -709,49 +694,10 @@ const DomainRecords = (props: 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={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>
+                          <DomainRecordTable
+                            paginatedData={paginatedData}
+                            type={type}
+                          />
                           <PaginationFooter
                             count={count}
                             eventCategory={`${type.title.toLowerCase()} panel`}
@@ -800,5 +746,3 @@ const DomainRecords = (props: Props) => {
     </>
   );
 };
-
-export default DomainRecords;
diff --git a/...rc/features/Domains/DomainRecordsUtils.ts → ...etail/DomainRecords/DomainRecordsUtils.ts b/...rc/features/Domains/DomainRecordsUtils.ts → ...etail/DomainRecords/DomainRecordsUtils.ts