Added changeset: Add Landing Page for V2

linode · Aug 28, 2024 · a77a2ec · a77a2ec
1 parent 02d11bb
commit a77a2ec
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 42 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,7 +10,7 @@ export interface linkAnalyticsEvent {
 }
 
 export interface ResourcesHeaders {
-  branding?: React.ReactNode;
+  dbLogo?: React.ReactNode;
   description: string;
   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 { dbLogo, description, subtitle, title } = headers;
 
   return (
     <Placeholder
@@ -171,7 +171,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
       subtitle={subtitle}
       title={title}
     >
-      {branding}
+      {dbLogo}
       <Typography variant="subtitle1">{description}</Typography>
     </Placeholder>
   );

diff --git a/packages/manager/src/factories/databases.ts b/packages/manager/src/factories/databases.ts
@@ -182,7 +182,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
@@ -107,7 +107,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, {
@@ -134,7 +134,7 @@ describe('Database Table', () => {
     expect(bDatabasesTab).toBeInTheDocument();
   });
 
-  it('should render branding in a databases tab ', async () => {
+  it('should render dbLogo in a 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
@@ -22,16 +22,16 @@ import {
 } from 'src/queries/databases/databases';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import type { DatabaseInstance } from '@linode/api-v4/lib/databases';
-
 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 { data: types, isLoading: isTypeLoading } = useDatabaseTypesQuery();
   const { isDatabasesV2Enabled } = useIsDatabasesEnabled();
+
   const {
     handleOrderChange: aDatabaseHandleOrderChange,
     order: aDatabaseOrder,
@@ -41,7 +41,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 {
@@ -53,30 +71,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
@@ -87,14 +103,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 />;
@@ -108,7 +124,7 @@ const DatabaseLanding = () => {
         onButtonClick={() => history.push('/databases/create')}
         title="Database Clusters"
       />
-      <DatabaseClusterInfoBanner />
+      {showTabs && <DatabaseClusterInfoBanner />}
       <Box sx={{ marginTop: '15px' }}>
         {showTabs ? (
           <Tabs>
@@ -119,7 +135,7 @@ const DatabaseLanding = () => {
             <TabPanels>
               <SafeTabPanel index={0}>
                 <DatabaseLandingTable
-                  data={bDatabases}
+                  data={bDatabases.data}
                   handleOrderChange={bDatabaseHandleOrderChange}
                   order={bDatabaseOrder}
                   orderBy={bDatabaseOrderBy}
@@ -128,7 +144,7 @@ const DatabaseLanding = () => {
               </SafeTabPanel>
               <SafeTabPanel index={1}>
                 <DatabaseLandingTable
-                  data={aDatabases}
+                  data={aDatabases.data}
                   handleOrderChange={aDatabaseHandleOrderChange}
                   isADatabases={true}
                   order={aDatabaseOrder}
@@ -145,7 +161,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,9 +15,7 @@ import type {
 } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
 export const headers: ResourcesHeaders = {
-  branding: (
-    <DatabaseLogo style={{ marginBottom: '20px', marginTop: '-10px' }} />
-  ),
+  dbLogo: <DatabaseLogo sx={{ marginBottom: '20px', marginTop: '-10px' }} />,
   description:
     "Deploy popular database engines such as MySQL and PostgreSQL using Linode's performant, reliable, and fully managed database solution.",
   subtitle: 'Fully managed cloud database clusters',

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 (
     <>

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 can
+              always remove unwanted clusters.
             </Typography>
           </li>
         </ul>