frontend: Home/RecentClusters: Hide RecentClusters

Signed-off-by: René Dudfield <renedudfield@microsoft.com>

Author: illume

e2e-tests/tests/multiCluster.spec.ts

@@ -10,17 +10,16 @@ test.describe('multi-cluster setup', () => {
     headlampPage = new HeadlampPage(page);
 
     await headlampPage.navigateTopage('/', /Choose a cluster/);
-    await expect(page.locator('h1:has-text("Home")')).toBeVisible();
-    await expect(page.locator('h2:has-text("All Clusters")')).toBeVisible();
+    await expect(page.locator('h1:has-text("All Clusters")')).toBeVisible();
   });
 
   test("home page should display two cluster selection buttons labeled 'test' and 'test2'", async ({
     page,
   }) => {
-    const buttons = page.locator('button p');
+    const buttons = page.locator('td a');
     await expect(buttons).toHaveCount(2);
-    await expect(page.locator('button p', { hasText: /^test$/ })).toBeVisible();
-    await expect(page.locator('button p', { hasText: /^test2$/ })).toBeVisible();
+    await expect(page.locator('td a', { hasText: /^test$/ })).toBeVisible();
+    await expect(page.locator('td a', { hasText: /^test2$/ })).toBeVisible();
   });
 
   test('home page should display a table containing exactly two rows, each representing a cluster entry', async ({
@@ -48,7 +47,8 @@ test.describe('multi-cluster setup', () => {
       const clusterRow = clusterAnchor.locator('../../..');
 
       const clusterStatus = clusterRow.locator('td').nth(2).locator('p');
-      await expect(clusterStatus).toHaveText('Active');
+      await expect(clusterStatus).toBeVisible();
+      await expect(clusterStatus).toHaveText(/Active|Plugin/);
     }
   });
 

frontend/src/components/App/Home/config.ts

@@ -2,5 +2,4 @@
 export const MULTI_HOME_ENABLED = import.meta.env.REACT_APP_MULTI_HOME_ENABLED === 'true' || true;
 
 /** Show recent clusters on the home page */
-export const ENABLE_RECENT_CLUSTERS =
-  import.meta.env.REACT_APP_ENABLE_RECENT_CLUSTERS === 'true' || true;
+export const ENABLE_RECENT_CLUSTERS = import.meta.env.REACT_APP_ENABLE_RECENT_CLUSTERS === 'true';

frontend/src/components/App/Home/index.tsx

@@ -9,6 +9,7 @@ import Event from '../../../lib/k8s/event';
 import { createRouteURL } from '../../../lib/router';
 import { PageGrid, SectionBox, SectionFilterHeader } from '../../common';
 import ClusterTable from './ClusterTable';
+import { ENABLE_RECENT_CLUSTERS } from './config';
 import { getCustomClusterNames } from './customClusterNames';
 import RecentClusters from './RecentClusters';
 
@@ -85,17 +86,20 @@ function HomeComponent(props: HomeComponentProps) {
   const memoizedComponent = React.useMemo(
     () => (
       <PageGrid>
-        <SectionBox headerProps={{ headerStyle: 'main' }} title={t('Home')}>
-          <RecentClusters clusters={Object.values(customNameClusters)} onButtonClick={() => {}} />
-        </SectionBox>
+        {ENABLE_RECENT_CLUSTERS && (
+          <SectionBox headerProps={{ headerStyle: 'main' }} title={t('Home')}>
+            <RecentClusters clusters={Object.values(customNameClusters)} onButtonClick={() => {}} />
+          </SectionBox>
+        )}
         <SectionBox
           title={
             <SectionFilterHeader
               title={t('All Clusters')}
               noNamespaceFilter
-              headerStyle="subsection"
+              headerStyle={ENABLE_RECENT_CLUSTERS ? 'subsection' : 'main'}
             />
           }
+          headerProps={ENABLE_RECENT_CLUSTERS ? { headerStyle: 'main' } : undefined}
         >
           <ClusterTable
             customNameClusters={customNameClusters}