feat: [UIE-8002] - Review fix: refactoring and variable renaming

linode · Sep 5, 2024 · 87ba377 · 87ba377
1 parent e80a737
commit 87ba377
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 99 deletions.
diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts
@@ -72,7 +72,7 @@ export type AccountCapability =
   | 'LKE HA Control Planes'
   | 'Machine Images'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'NodeBalancers'
   | 'Object Storage Access Key Regions'
   | 'Object Storage Endpoint Types'

diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
@@ -151,6 +151,7 @@ export interface BaseDatabase {
    * A key/value object where the key is an IP address and the value is a member type.
    */
   members: Record<string, MemberType>;
+  platform?: string;
 }
 
 export interface MySQLDatabase extends BaseDatabase {

diff --git a/packages/api-v4/src/regions/types.ts b/packages/api-v4/src/regions/types.ts
@@ -13,7 +13,7 @@ export type Capabilities =
   | 'Kubernetes'
   | 'Linodes'
   | 'Managed Databases'
-  | 'Managed Databases V2'
+  | 'Managed Databases Beta'
   | 'Metadata'
   | 'NodeBalancers'
   | 'Object Storage'

diff --git a/packages/manager/src/__data__/regionsData.ts b/packages/manager/src/__data__/regionsData.ts
@@ -98,7 +98,7 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
+      'Managed Databases Beta',
       'Metadata',
       'Premium Plans',
       'Placement Group',
@@ -130,7 +130,7 @@ export const regions: Region[] = [
       'Vlans',
       'VPCs',
       'Managed Databases',
-      'Managed Databases V2',
+      'Managed Databases Beta',
       'Metadata',
       'Premium Plans',
     ],
@@ -486,7 +486,7 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
+      'Managed Databases Beta',
       'Placement Group',
     ],
     country: 'us',
@@ -514,7 +514,7 @@ export const regions: Region[] = [
       'Cloud Firewall',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
+      'Managed Databases Beta',
       'Placement Group',
     ],
     country: 'us',
@@ -546,7 +546,7 @@ export const regions: Region[] = [
       'VPCs',
       'Block Storage Migrations',
       'Managed Databases',
-      'Managed Databases V2',
+      'Managed Databases Beta',
       'Placement Group',
     ],
     country: 'us',

diff --git a/packages/manager/src/factories/account.ts b/packages/manager/src/factories/account.ts
@@ -46,7 +46,7 @@ export const accountFactory = Factory.Sync.makeFactory<Account>({
     'LKE HA Control Planes',
     'Machine Images',
     'Managed Databases',
-    'Managed Databases V2',
+    'Managed Databases Beta',
     'NodeBalancers',
     'Object Storage Access Key Regions',
     'Object Storage Endpoint Types',

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx
@@ -82,7 +82,7 @@ describe('Database Table', () => {
 
   it('should render database landing with empty state', async () => {
     const mockAccount = accountFactory.build({
-      capabilities: ['Managed Databases V2'],
+      capabilities: ['Managed Databases Beta'],
     });
     server.use(
       http.get('*/account', () => {
@@ -127,14 +127,14 @@ describe('Database Table', () => {
 
     await waitForElementToBeRemoved(getByTestId(loadingTestId));
 
-    const aDatabasesTab = screen.getByText('New Database Clusters');
-    const bDatabasesTab = screen.getByText('Legacy Database Clusters');
+    const newDatabasesTab = screen.getByText('New Database Clusters');
+    const legacyDatabasesTab = screen.getByText('Legacy Database Clusters');
 
-    expect(aDatabasesTab).toBeInTheDocument();
-    expect(bDatabasesTab).toBeInTheDocument();
+    expect(newDatabasesTab).toBeInTheDocument();
+    expect(legacyDatabasesTab).toBeInTheDocument();
   });
 
-  it('should render logo in a databases tab ', async () => {
+  it('should render logo in new databases tab ', async () => {
     server.use(
       http.get('*/databases/instances', () => {
         const databases = databaseInstanceFactory.buildList(5, {

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -26,73 +26,73 @@ const preferenceKey = 'databases';
 
 const DatabaseLanding = () => {
   const history = useHistory();
-  const aDatabasesPagination = usePagination(1, preferenceKey, 'a');
-  const bDatabasesPagination = usePagination(1, preferenceKey, 'b');
+  const newDatabasesPagination = usePagination(1, preferenceKey, 'new');
+  const legacyDatabasesPagination = usePagination(1, preferenceKey, 'legacy');
 
-  const { data: types, isLoading: isTypeLoading } = useDatabaseTypesQuery();
+  const { isLoading: isTypeLoading } = useDatabaseTypesQuery();
   const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
 
   const {
-    handleOrderChange: aDatabaseHandleOrderChange,
-    order: aDatabaseOrder,
-    orderBy: aDatabaseOrderBy,
+    handleOrderChange: newDatabaseHandleOrderChange,
+    order: newDatabaseOrder,
+    orderBy: newDatabaseOrderBy,
   } = useOrder(
     {
       order: 'desc',
       orderBy: 'label',
     },
-    `a-${preferenceKey}-order`
+    `new-${preferenceKey}-order`
   );
 
-  const aDatabasesFilter = {
+  const newDatabasesFilter = {
     ['+contains']: 'adb20',
-    ['+order']: aDatabaseOrder,
-    ['+order_by']: aDatabaseOrderBy,
+    ['+order']: newDatabaseOrder,
+    ['+order_by']: newDatabaseOrderBy,
   };
 
   const {
-    data: aDatabases,
-    error: aDatabasesError,
-    isLoading: aDatabasesIsLoading,
+    data: newDatabases,
+    error: newDatabasesError,
+    isLoading: newDatabasesIsLoading,
   } = useDatabasesQuery(
     {
-      page: aDatabasesPagination.page,
-      page_size: aDatabasesPagination.pageSize,
+      page: newDatabasesPagination.page,
+      page_size: newDatabasesPagination.pageSize,
     },
-    aDatabasesFilter
+    newDatabasesFilter
   );
 
   const {
-    handleOrderChange: bDatabaseHandleOrderChange,
-    order: bDatabaseOrder,
-    orderBy: bDatabaseOrderBy,
+    handleOrderChange: legacyDatabaseHandleOrderChange,
+    order: legacyDatabaseOrder,
+    orderBy: legacyDatabaseOrderBy,
   } = useOrder(
     {
       order: 'desc',
       orderBy: 'label',
     },
-    `b-${preferenceKey}-order`
+    `legacy-${preferenceKey}-order`
   );
 
-  const bDatabasesFilter = {
+  const legacyDatabasesFilter = {
     ['+contains']: 'adb10',
-    ['+order']: bDatabaseOrder,
-    ['+order_by']: bDatabaseOrderBy,
+    ['+order']: legacyDatabaseOrder,
+    ['+order_by']: legacyDatabaseOrderBy,
   };
 
   const {
-    data: bDatabases,
-    error: bDatabasesError,
-    isLoading: bDatabasesIsLoading,
+    data: legacyDatabases,
+    error: legacyDatabasesError,
+    isLoading: legacyDatabasesIsLoading,
   } = useDatabasesQuery(
     {
-      page: bDatabasesPagination.page,
-      page_size: bDatabasesPagination.pageSize,
+      page: legacyDatabasesPagination.page,
+      page_size: legacyDatabasesPagination.pageSize,
     },
-    bDatabasesFilter
+    legacyDatabasesFilter
   );
 
-  const error = aDatabasesError || bDatabasesError;
+  const error = newDatabasesError || legacyDatabasesError;
   if (error) {
     return (
       <ErrorState
@@ -103,14 +103,14 @@ const DatabaseLanding = () => {
     );
   }
 
-  if (aDatabasesIsLoading || bDatabasesIsLoading || isTypeLoading) {
+  if (newDatabasesIsLoading || legacyDatabasesIsLoading || isTypeLoading) {
     return <CircleProgress />;
   }
 
-  const showTabs = isDatabasesV2Enabled && bDatabases.data.length !== 0;
+  const showTabs = isDatabasesV2Enabled && legacyDatabases?.data.length !== 0;
 
   const showEmpty =
-    aDatabases.data.length === 0 && bDatabases.data.length === 0;
+    newDatabases?.data.length === 0 && legacyDatabases?.data.length === 0;
 
   if (showEmpty) {
     return <DatabaseEmptyState />;
@@ -135,37 +135,40 @@ const DatabaseLanding = () => {
             <TabPanels>
               <SafeTabPanel index={0}>
                 <DatabaseLandingTable
-                  data={bDatabases.data}
-                  handleOrderChange={bDatabaseHandleOrderChange}
-                  order={bDatabaseOrder}
-                  orderBy={bDatabaseOrderBy}
-                  types={types}
+                  data={legacyDatabases?.data}
+                  handleOrderChange={legacyDatabaseHandleOrderChange}
+                  order={legacyDatabaseOrder}
+                  orderBy={legacyDatabaseOrderBy}
                 />
               </SafeTabPanel>
               <SafeTabPanel index={1}>
                 <DatabaseLandingTable
-                  data={aDatabases.data}
-                  handleOrderChange={aDatabaseHandleOrderChange}
-                  isADatabases={true}
-                  order={aDatabaseOrder}
-                  orderBy={aDatabaseOrderBy}
-                  types={types}
+                  data={newDatabases?.data}
+                  handleOrderChange={newDatabaseHandleOrderChange}
+                  isNewDatabase={true}
+                  order={newDatabaseOrder}
+                  orderBy={newDatabaseOrderBy}
                 />
               </SafeTabPanel>
             </TabPanels>
           </Tabs>
         ) : (
           <DatabaseLandingTable
+            data={
+              isDatabasesV2Enabled ? newDatabases?.data : legacyDatabases?.data
+            }
             handleOrderChange={
               isDatabasesV2Enabled
-                ? aDatabaseHandleOrderChange
-                : bDatabaseHandleOrderChange
+                ? newDatabaseHandleOrderChange
+                : legacyDatabaseHandleOrderChange
+            }
+            order={
+              isDatabasesV2Enabled ? newDatabaseOrder : legacyDatabaseOrder
+            }
+            orderBy={
+              isDatabasesV2Enabled ? newDatabaseOrderBy : legacyDatabaseOrderBy
             }
-            data={isDatabasesV2Enabled ? aDatabases.data : bDatabases.data}
-            isADatabases={isDatabasesV2Enabled}
-            order={isDatabasesV2Enabled ? aDatabaseOrder : bDatabaseOrder}
-            orderBy={isDatabasesV2Enabled ? aDatabaseOrderBy : bDatabaseOrderBy}
-            types={types}
+            isNewDatabase={isDatabasesV2Enabled}
           />
         )}
       </Box>

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -4,7 +4,6 @@ import { Hidden } from 'src/components/Hidden';
 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/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
@@ -14,32 +13,29 @@ import DatabaseRow from 'src/features/Databases/DatabaseLanding/DatabaseRow';
 import { usePagination } from 'src/hooks/usePagination';
 import { useInProgressEvents } from 'src/queries/events/events';
 
-import type {
-  DatabaseInstance,
-  DatabaseType,
-} from '@linode/api-v4/lib/databases';
+import type { DatabaseInstance } from '@linode/api-v4/lib/databases';
 import type { Order } from 'src/hooks/useOrder';
+import { TableCell } from '@mui/material';
 
 const preferenceKey = 'databases';
 
 interface Props {
   data: DatabaseInstance[] | undefined;
   handleOrderChange: (newOrderBy: string, newOrder: Order) => void;
-  isADatabases?: boolean;
+  isNewDatabase?: boolean;
   order: 'asc' | 'desc';
   orderBy: string;
-  types: DatabaseType[] | undefined;
 }
 const DatabaseLandingTable = ({
   data,
   handleOrderChange,
-  isADatabases,
+  isNewDatabase,
   order,
   orderBy,
-  types,
 }: Props) => {
   const { data: events } = useInProgressEvents();
-  const dbPlatformType = isADatabases ? 'a' : 'b';
+
+  const dbPlatformType = isNewDatabase ? 'new' : 'legacy';
   const pagination = usePagination(1, preferenceKey, dbPlatformType);
 
   return (
@@ -63,7 +59,7 @@ const DatabaseLandingTable = ({
             >
               Status
             </TableSortCell>
-            {isADatabases && (
+            {isNewDatabase && (
               /* TODO add back TableSortCell once API is updated to support sort by Plan */
               <TableCell>Plan</TableCell>
             )}
@@ -74,7 +70,7 @@ const DatabaseLandingTable = ({
                 handleClick={handleOrderChange}
                 label="cluster_size"
               >
-                {isADatabases ? 'Nodes' : 'Configuration'}
+                {isNewDatabase ? 'Nodes' : 'Configuration'}
               </TableSortCell>
             </Hidden>
             <TableSortCell
@@ -86,8 +82,14 @@ const DatabaseLandingTable = ({
               Engine
             </TableSortCell>
             <Hidden mdDown>
-              {/* TODO add back TableSortCell once API is updated to support sort by Region */}
-              <TableCell>Region</TableCell>
+              <TableSortCell
+                active={orderBy === 'region'}
+                direction={order}
+                handleClick={handleOrderChange}
+                label="region"
+              >
+                Region
+              </TableSortCell>
             </Hidden>
             <Hidden lgDown>
               <TableSortCell
@@ -106,15 +108,14 @@ const DatabaseLandingTable = ({
             <DatabaseRow
               database={database}
               events={events}
-              isADatabases={isADatabases}
+              isNewDatabase={isNewDatabase}
               key={database.id}
-              types={types}
             />
           ))}
           {data?.length === 0 && (
             <TableRowEmpty
               message={
-                isADatabases
+                isNewDatabase
                   ? 'You don’t have any Aiven Database Clusters created yet. Click Create Database Cluster to create one.'
                   : ''
               }
@@ -131,7 +132,7 @@ const DatabaseLandingTable = ({
         page={pagination.page}
         pageSize={pagination.pageSize}
       />
-      {isADatabases && <DatabaseLogo />}
+      {isNewDatabase && <DatabaseLogo />}
     </>
   );
 };