From 87ba37734c280087e2784a60077c4ac46e64f5b5 Mon Sep 17 00:00:00 2001 From: mpolotsk Date: Thu, 5 Sep 2024 10:25:39 +0200 Subject: [PATCH] feat: [UIE-8002] - Review fix: refactoring and variable renaming --- packages/api-v4/src/account/types.ts | 2 +- packages/api-v4/src/databases/types.ts | 1 + packages/api-v4/src/regions/types.ts | 2 +- packages/manager/src/__data__/regionsData.ts | 10 +- packages/manager/src/factories/account.ts | 2 +- .../DatabaseLanding/DatabaseLanding.test.tsx | 12 +- .../DatabaseLanding/DatabaseLanding.tsx | 105 +++++++++--------- .../DatabaseLanding/DatabaseLandingTable.tsx | 37 +++--- .../DatabaseLanding/DatabaseLogo.tsx | 4 +- .../Databases/DatabaseLanding/DatabaseRow.tsx | 18 +-- .../src/features/Databases/utilities.test.ts | 4 +- .../src/features/Databases/utilities.ts | 2 +- 12 files changed, 100 insertions(+), 99 deletions(-) diff --git a/packages/api-v4/src/account/types.ts b/packages/api-v4/src/account/types.ts index 4e266b064e0..7e5c9704eca 100644 --- 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 index 3221a8c61b6..227d8dbf44c 100644 --- 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; + 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 index e95c7dc3f13..c3db5ec700e 100644 --- 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 index 836fbcafea7..f2921a82e26 100644 --- 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 index 5a852b8e09f..c056cf9ac56 100644 --- a/packages/manager/src/factories/account.ts +++ b/packages/manager/src/factories/account.ts @@ -46,7 +46,7 @@ export const accountFactory = Factory.Sync.makeFactory({ '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 index b42fd0c6358..fcbbcc42c2a 100644 --- 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 index 3698c02d07b..7119dd4d4a7 100644 --- 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 ( { ); } - if (aDatabasesIsLoading || bDatabasesIsLoading || isTypeLoading) { + if (newDatabasesIsLoading || legacyDatabasesIsLoading || isTypeLoading) { return ; } - 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 ; @@ -135,37 +135,40 @@ const DatabaseLanding = () => { ) : ( )} diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx index c6d77ea0a78..bcf102d08ab 100644 --- 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 - {isADatabases && ( + {isNewDatabase && ( /* TODO add back TableSortCell once API is updated to support sort by Plan */ Plan )} @@ -74,7 +70,7 @@ const DatabaseLandingTable = ({ handleClick={handleOrderChange} label="cluster_size" > - {isADatabases ? 'Nodes' : 'Configuration'} + {isNewDatabase ? 'Nodes' : 'Configuration'} - {/* TODO add back TableSortCell once API is updated to support sort by Region */} - Region + + Region + ))} {data?.length === 0 && ( - {isADatabases && } + {isNewDatabase && } ); }; diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx index aa77b8f2fe4..71c7dd23b1e 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx @@ -7,8 +7,10 @@ import { BetaChip } from 'src/components/BetaChip/BetaChip'; import { Box } from 'src/components/Box'; import { Typography } from 'src/components/Typography'; +import type { SxProps } from '@mui/material/styles'; + interface Props { - sx?: React.CSSProperties; + sx?: SxProps; } export const DatabaseLogo = ({ sx }: Props) => { diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx index 132b2058e8a..f471fa9e7b0 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx +++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx @@ -5,14 +5,14 @@ import { Chip } from 'src/components/Chip'; import { Hidden } from 'src/components/Hidden'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; +import { DatabaseStatusDisplay } from 'src/features/Databases/DatabaseDetail/DatabaseStatusDisplay'; +import { useDatabaseTypesQuery } from 'src/queries/databases/databases'; import { useProfile } from 'src/queries/profile/profile'; import { useRegionsQuery } from 'src/queries/regions/regions'; import { isWithinDays, parseAPIDate } from 'src/utilities/date'; import { formatDate } from 'src/utilities/formatDate'; import { formatStorageUnits } from 'src/utilities/formatStorageUnits'; -import { DatabaseStatusDisplay } from '../DatabaseDetail/DatabaseStatusDisplay'; - import type { Event } from '@linode/api-v4'; import type { Database, @@ -31,16 +31,10 @@ export const databaseEngineMap: Record = { interface Props { database: Database | DatabaseInstance; events?: Event[]; - isADatabases?: boolean; - types?: DatabaseType[] | undefined; + isNewDatabase?: boolean; } -export const DatabaseRow = ({ - database, - events, - isADatabases, - types, -}: Props) => { +export const DatabaseRow = ({ database, events, isNewDatabase }: Props) => { const { cluster_size, created, @@ -54,7 +48,7 @@ export const DatabaseRow = ({ const { data: regions } = useRegionsQuery(); const { data: profile } = useProfile(); - + const { data: types } = useDatabaseTypesQuery(); const plan = types?.find((t: DatabaseType) => t.id === type); const formattedPlan = plan && formatStorageUnits(plan.label); const actualRegion = regions?.find((r) => r.id === region); @@ -82,7 +76,7 @@ export const DatabaseRow = ({ - {isADatabases && {formattedPlan}} + {isNewDatabase && {formattedPlan}} {configuration} diff --git a/packages/manager/src/features/Databases/utilities.test.ts b/packages/manager/src/features/Databases/utilities.test.ts index dd981780f18..557064f8581 100644 --- a/packages/manager/src/features/Databases/utilities.test.ts +++ b/packages/manager/src/features/Databases/utilities.test.ts @@ -33,9 +33,9 @@ describe('useIsDatabasesEnabled', () => { }); }); - it('should return true for an unrestricted user with the account capability V2', async () => { + it('should return true for an unrestricted user with the account capability Beta', async () => { const account = accountFactory.build({ - capabilities: ['Managed Databases V2'], + capabilities: ['Managed Databases Beta'], }); server.use( diff --git a/packages/manager/src/features/Databases/utilities.ts b/packages/manager/src/features/Databases/utilities.ts index 73e64f1f8e3..99c42610c62 100644 --- a/packages/manager/src/features/Databases/utilities.ts +++ b/packages/manager/src/features/Databases/utilities.ts @@ -33,7 +33,7 @@ export const useIsDatabasesEnabled = () => { ); const isDatabasesV2Enabled = - account.capabilities.includes('Managed Databases V2') && + account.capabilities.includes('Managed Databases Beta') && flags.dbaasV2?.enabled; return {