Added changeset: Add Landing Page for V2

linode · Sep 6, 2024 · 2568ebd · 2568ebd
1 parent c123751
commit 2568ebd
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 44 deletions.
diff --git a/packages/api-v4/src/databases/types.ts b/packages/api-v4/src/databases/types.ts
@@ -65,7 +65,7 @@ type MemberType = 'primary' | 'failover';
 
 // DatabaseInstance is the interface for the shape of data returned by the /databases/instances endpoint.
 export interface DatabaseInstance {
-  id: string;
+  id: number;
   label: string;
   engine: Engine;
   type: string;

diff --git a/packages/manager/.changeset/pr-10823-added-1724427890426.md b/packages/manager/.changeset/pr-10823-added-1724427890426.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add Landing Page for V2 ([#10823](https://github.com/linode/manager/pull/10823))
diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts
@@ -10,8 +10,8 @@ export interface linkAnalyticsEvent {
 }
 
 export interface ResourcesHeaders {
-  branding?: React.ReactNode;
   description: string;
+  logo?: React.ReactNode;
   subtitle: string;
   title: string;
 }

diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx
@@ -111,7 +111,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
     wide = false,
     youtubeLinkData,
   } = props;
-  const { branding, description, subtitle, title } = headers;
+  const { description, logo, subtitle, title } = headers;
 
   return (
     <Placeholder
@@ -171,7 +171,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
       subtitle={subtitle}
       title={title}
     >
-      {branding}
+      {logo}
       <Typography variant="subtitle1">{description}</Typography>
     </Placeholder>
   );

diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
@@ -184,7 +184,7 @@ export const databaseInstanceFactory = Factory.Sync.makeFactory<DatabaseInstance
       primary: 'db-primary-0.b.linodeb.net',
       secondary: 'db-secondary-0.b.linodeb.net',
     },
-    id: Factory.each((i) => (i % 2 ? i.toString() : `a${i}`)),
+    id: Factory.each((i) => i),
     instance_uri: '',
     label: Factory.each((i) => `example.com-database-${i}`),
     members: {

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.test.tsx
@@ -1,4 +1,4 @@
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import { fireEvent } from '@testing-library/react';
 import { waitForElementToBeRemoved } from '@testing-library/react';
 import { DateTime } from 'luxon';
@@ -120,7 +120,7 @@ describe('Database Table', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render tabs with legace and new databases ', async () => {
+  it('should render tabs with legacy and new databases ', async () => {
     server.use(
       http.get('*/databases/instances', () => {
         const databases = databaseInstanceFactory.buildList(5, {
@@ -147,7 +147,7 @@ describe('Database Table', () => {
     expect(bDatabasesTab).toBeInTheDocument();
   });
 
-  it('should render branding in a databases tab ', async () => {
+  it('should render logo in a databases tab ', async () => {
     server.use(
       http.get('*/databases/instances', () => {
         const databases = databaseInstanceFactory.buildList(5, {
@@ -171,6 +171,42 @@ describe('Database Table', () => {
 
     expect(screen.getByText('Powered by')).toBeInTheDocument();
   });
+
+  it('should render a single legacy database table without logo ', async () => {
+    server.use(
+      http.get('*/databases/instances', () => {
+        const databases = databaseInstanceFactory.buildList(5, {
+          status: 'active',
+        });
+        return HttpResponse.json(makeResourcePage(databases));
+      })
+    );
+
+    const { getByTestId } = renderWithTheme(<DatabaseLanding />, {
+      flags: { dbaasV2: { beta: false, enabled: false } },
+    });
+
+    expect(getByTestId(loadingTestId)).toBeInTheDocument();
+
+    await waitForElementToBeRemoved(getByTestId(loadingTestId));
+
+    const tables = screen.getAllByRole('table');
+    expect(tables).toHaveLength(1);
+
+    const table = tables[0];
+
+    const headers = within(table).getAllByRole('columnheader');
+    expect(
+      headers.some((header) => header.textContent === 'Configuration')
+    ).toBe(true);
+    expect(headers.some((header) => header.textContent === 'Nodes')).toBe(
+      false
+    );
+
+    expect(screen.queryByText('Legacy Database Clusters')).toBeNull();
+    expect(screen.queryByText('New Database Clusters')).toBeNull();
+    expect(screen.queryByText('Powered by')).toBeNull();
+  });
 });
 
 describe('Database Landing', () => {

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLanding.tsx
@@ -33,14 +33,16 @@ const preferenceKey = 'databases';
 
 const DatabaseLanding = () => {
   const history = useHistory();
-  const pagination = usePagination(1, preferenceKey);
+  const aDatabasesPagination = usePagination(1, preferenceKey, 'a');
+  const bDatabasesPagination = usePagination(1, preferenceKey, 'b');
   const isRestricted = useRestrictedGlobalGrantCheck({
     globalGrantType: 'add_databases',
   });
   const account = useAccount();
 
   const { data: types, isLoading: isTypeLoading } = useDatabaseTypesQuery();
   const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
+
   const {
     handleOrderChange: aDatabaseHandleOrderChange,
     order: aDatabaseOrder,
@@ -50,7 +52,25 @@ const DatabaseLanding = () => {
       order: 'desc',
       orderBy: 'label',
     },
-    `${preferenceKey}-order`
+    `a-${preferenceKey}-order`
+  );
+
+  const aDatabasesFilter = {
+    ['+contains']: 'adb20',
+    ['+order']: aDatabaseOrder,
+    ['+order_by']: aDatabaseOrderBy,
+  };
+
+  const {
+    data: aDatabases,
+    error: aDatabasesError,
+    isLoading: aDatabasesIsLoading,
+  } = useDatabasesQuery(
+    {
+      page: aDatabasesPagination.page,
+      page_size: aDatabasesPagination.pageSize,
+    },
+    aDatabasesFilter
   );
 
   const {
@@ -62,30 +82,28 @@ const DatabaseLanding = () => {
       order: 'desc',
       orderBy: 'label',
     },
-    `${preferenceKey}-order`
+    `b-${preferenceKey}-order`
   );
 
-  const filter = {
-    ['+order']: aDatabaseOrder,
-    ['+order_by']: aDatabaseOrderBy,
+  const bDatabasesFilter = {
+    ['+contains']: 'adb10',
+    ['+order']: bDatabaseOrder,
+    ['+order_by']: bDatabaseOrderBy,
   };
 
-  const { data, error, isLoading } = useDatabasesQuery(
+  const {
+    data: bDatabases,
+    error: bDatabasesError,
+    isLoading: bDatabasesIsLoading,
+  } = useDatabasesQuery(
     {
-      page: pagination.page,
-      page_size: pagination.pageSize,
+      page: bDatabasesPagination.page,
+      page_size: bDatabasesPagination.pageSize,
     },
-    filter
+    bDatabasesFilter
   );
 
-  const aDatabases: DatabaseInstance[] = [];
-  const bDatabases: DatabaseInstance[] = [];
-  data?.data.forEach((database: DatabaseInstance) => {
-    return database.platform === 'adb20'
-      ? aDatabases?.push(database)
-      : bDatabases?.push(database);
-  });
-
+  const error = aDatabasesError || bDatabasesError;
   if (error) {
     return (
       <ErrorState
@@ -96,14 +114,14 @@ const DatabaseLanding = () => {
     );
   }
 
-  if (isLoading || isTypeLoading) {
+  if (aDatabasesIsLoading || bDatabasesIsLoading || isTypeLoading) {
     return <CircleProgress />;
   }
 
-  const showTabs = isDatabasesV2Enabled && bDatabases.length !== 0;
+  const showTabs = isDatabasesV2Enabled && bDatabases.data.length !== 0;
 
   const showEmpty =
-    isDatabasesV2Enabled && aDatabases.length === 0 && bDatabases.length === 0;
+    aDatabases.data.length === 0 && bDatabases.data.length === 0;
 
   if (showEmpty) {
     return <DatabaseEmptyState />;
@@ -125,7 +143,7 @@ const DatabaseLanding = () => {
         onButtonClick={() => history.push('/databases/create')}
         title="Database Clusters"
       />
-      <DatabaseClusterInfoBanner />
+      {showTabs && <DatabaseClusterInfoBanner />}
       <Box sx={{ marginTop: '15px' }}>
         {showTabs ? (
           <Tabs>
@@ -136,7 +154,7 @@ const DatabaseLanding = () => {
             <TabPanels>
               <SafeTabPanel index={0}>
                 <DatabaseLandingTable
-                  data={bDatabases}
+                  data={bDatabases.data}
                   handleOrderChange={bDatabaseHandleOrderChange}
                   order={bDatabaseOrder}
                   orderBy={bDatabaseOrderBy}
@@ -145,7 +163,7 @@ const DatabaseLanding = () => {
               </SafeTabPanel>
               <SafeTabPanel index={1}>
                 <DatabaseLandingTable
-                  data={aDatabases}
+                  data={aDatabases.data}
                   handleOrderChange={aDatabaseHandleOrderChange}
                   isADatabases={true}
                   order={aDatabaseOrder}
@@ -162,7 +180,7 @@ const DatabaseLanding = () => {
                 ? aDatabaseHandleOrderChange
                 : bDatabaseHandleOrderChange
             }
-            data={isDatabasesV2Enabled ? aDatabases : bDatabases}
+            data={isDatabasesV2Enabled ? aDatabases.data : bDatabases.data}
             isADatabases={isDatabasesV2Enabled}
             order={isDatabasesV2Enabled ? aDatabaseOrder : bDatabaseOrder}
             orderBy={isDatabasesV2Enabled ? aDatabaseOrderBy : bDatabaseOrderBy}

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingEmptyStateData.tsx
@@ -15,11 +15,9 @@ import type {
 } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
 export const headers: ResourcesHeaders = {
-  branding: (
-    <DatabaseLogo style={{ marginBottom: '20px', marginTop: '-10px' }} />
-  ),
   description:
     "Deploy popular database engines such as MySQL and PostgreSQL using Linode's performant, reliable, and fully managed database solution.",
+  logo: <DatabaseLogo sx={{ marginBottom: '20px', marginTop: '-10px' }} />,
   subtitle: 'Fully managed cloud database clusters',
   title: 'Databases',
 };

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -39,8 +39,8 @@ const DatabaseLandingTable = ({
   types,
 }: Props) => {
   const { data: events } = useInProgressEvents();
-
-  const pagination = usePagination(1, preferenceKey);
+  const dbPlatformType = isADatabases ? 'a' : 'b';
+  const pagination = usePagination(1, preferenceKey, dbPlatformType);
 
   return (
     <>
@@ -115,7 +115,7 @@ const DatabaseLandingTable = ({
             <TableRowEmpty
               message={
                 isADatabases
-                  ? 'You don’t have any Aiven Database Clusters created yet. Click Create Database Cluster to do create one.'
+                  ? 'You don’t have any Aiven Database Clusters created yet. Click Create Database Cluster to create one.'
                   : ''
               }
               colSpan={7}

diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLogo.tsx
@@ -25,7 +25,7 @@ export const DatabaseLogo = ({ sx }: Props) => {
             backgroundColor:
               theme.palette.mode === 'light'
                 ? theme.color.label
-                : theme.color.grey4,
+                : theme.color.grey7,
             color:
               theme.palette.mode === 'light' ? theme.color.white : 'primary',
           }}
@@ -37,6 +37,7 @@ export const DatabaseLogo = ({ sx }: Props) => {
             display: 'flex',
             marginTop: '8px',
           }}
+          component="span"
         >
           Powered by &nbsp;
           {theme.palette.mode === 'light' ? <Logo /> : <LogoWhite />}

diff --git a/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx b/packages/manager/src/features/GlobalNotifications/DatabaseClusterInfoBanner.tsx
@@ -35,8 +35,8 @@ export const DatabaseClusterInfoBanner = () => {
             <Typography variant="body2">
               You won’t be charged for Aiven database clusters created during
               duration of the Beta phase. If you decide to keep the new clusters
-              clusters later on, you’ll be charged according to the new payment
-              can always remove unwanted clusters.
+              later on, you’ll be charged according to the new payment. You can
+              always remove unwanted clusters.
             </Typography>
           </li>
         </ul>

diff --git a/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx b/packages/manager/src/features/Support/SupportTickets/SupportTicketProductSelectionFields.tsx
@@ -93,7 +93,7 @@ export const SupportTicketProductSelectionFields = (props: Props) => {
     isLoading: vpcsLoading,
   } = useAllVPCsQuery(entityType === 'vpc_id');
 
-  const getEntityOptions = (): { label: string; value: number | string }[] => {
+  const getEntityOptions = (): { label: string; value: number }[] => {
     const reactQueryEntityDataMap = {
       database_id: databases,
       domain_id: domains,
@@ -125,7 +125,7 @@ export const SupportTicketProductSelectionFields = (props: Props) => {
 
     return (
       reactQueryEntityDataMap[entityType]?.map(
-        ({ id, label }: { id: number | string; label: string }) => ({
+        ({ id, label }: { id: number; label: string }) => ({
           label,
           value: id,
         })