Merge pull request #15571 from richard-cox/pagination-home-page-alt-list

Show alternative small scale home page clusters list

Author: richard-cox

cypress/e2e/tests/pages/global-settings/settings-p2.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '@/cypress/e2e/blueprints/global_settings/settings-data';
 
 // If there's more than one cluster the currentCluster used in links can be different to `local`
-const settingsClusterId = 'local';
+const settingsClusterId = '_';
 const settingsPage = new SettingsPagePo(settingsClusterId);
 const homePage = new HomePagePo();
 const accountPage = new AccountPagePo();

cypress/e2e/tests/pages/global-settings/settings.spec.ts

@@ -9,7 +9,7 @@ import { settings } from '@/cypress/e2e/blueprints/global_settings/settings-data
 import UserMenuPo from '@/cypress/e2e/po/side-bars/user-menu.po';
 
 // If there's more than one cluster the currentCluster used in links can be different to `local`
-const settingsClusterId = 'local';
+const settingsClusterId = '_';
 const settingsPage = new SettingsPagePo(settingsClusterId);
 const accountPage = new AccountPagePo();
 const createKeyPage = new CreateKeyPagePo();

cypress/e2e/tests/pages/users-and-auth/azuread.spec.ts

@@ -2,8 +2,9 @@ import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 import AzureadPo from '@/cypress/e2e/po/edit/auth/azuread.po';
 import { AuthProvider, AuthProviderPo } from '@/cypress/e2e/po/pages/users-and-auth/authProvider.po';
 
-const authProviderPo = new AuthProviderPo('local');
-const azureadPo = new AzureadPo('local');
+const authClusterId = '_';
+const authProviderPo = new AuthProviderPo(authClusterId);
+const azureadPo = new AzureadPo(authClusterId);
 
 const tenantId = '564b6f53-ebf4-43c3-8077-44c56a44990a';
 const applicationId = '18cca356-170e-4bd9-a4a4-2e349855f96b';

cypress/e2e/tests/pages/users-and-auth/cognito.spec.ts

@@ -2,8 +2,9 @@ import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 import AmazonCognitoPo from '@/cypress/e2e/po/edit/auth/cognito.po';
 import { AuthProvider, AuthProviderPo } from '@/cypress/e2e/po/pages/users-and-auth/authProvider.po';
 
-const authProviderPo = new AuthProviderPo('local');
-const cognitoPo = new AmazonCognitoPo('local');
+const authClusterId = '_';
+const authProviderPo = new AuthProviderPo(authClusterId);
+const cognitoPo = new AmazonCognitoPo(authClusterId);
 
 const clientId = 'test-client-id';
 const clientSecret = 'test-client-secret';

cypress/e2e/tests/pages/users-and-auth/githubapp.spec.ts

@@ -2,8 +2,9 @@ import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 import GithubAppPo from '@/cypress/e2e/po/edit/auth/githubapp.po';
 import { AuthProvider, AuthProviderPo } from '@/cypress/e2e/po/pages/users-and-auth/authProvider.po';
 
-const authProviderPo = new AuthProviderPo('local');
-const githubAppPo = new GithubAppPo('local');
+const authClusterId = '_';
+const authProviderPo = new AuthProviderPo(authClusterId);
+const githubAppPo = new GithubAppPo(authClusterId);
 
 const clientId = 'test-client-id';
 const clientSecret = 'test-client-secret';

cypress/e2e/tests/priority/no-vai-setup.spec.ts

@@ -4,7 +4,7 @@ import { FeatureFlagsPagePo } from '@/cypress/e2e/po/pages/global-settings/featu
 
 // Vai ('ui-sql-cache') is now on by default. This sets up the `noVai` test suite by disabling it
 
-const featureFlagsPage = new FeatureFlagsPagePo('local');
+const featureFlagsPage = new FeatureFlagsPagePo('_');
 
 describe('Disable Vai', { testIsolation: 'off', tags: ['@noVai', '@adminUser'] }, () => {
   before(() => {

shell/assets/styles/base/_typography.scss

@@ -15,7 +15,7 @@ H1 {
 }
 
 H2 {
-  font-size: 21px;
+  font-size: $font-size-h2;
 }
 
 H3 {

shell/assets/translations/en-us.yaml

@@ -3824,6 +3824,11 @@ landing:
   homepage: Homepage
   clusters:
     title: Clusters
+    tooMany:
+      showAll: Show all clusters (may increase load time)
+      showSome: Show some clusters (may improve load time)
+      showingAll: Showing {total} clusters.
+      showingSome: Showing {rows} of {total} recently created clusters.
     provider: Provider
     distro: Distro
     kubernetesVersion: Kubernetes Version

shell/components/SortableTable/index.vue

@@ -1090,7 +1090,7 @@ export default {
       <div
         v-if="showHeaderRow"
         class="fixed-header-actions"
-        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
+        :class="{button: !!$slots['header-button'], 'with-sub-header': !!$slots['sub-header-row'], 'advanced-filtering': hasAdvancedFiltering}"
       >
         <div
           :class="bulkActionsClass"
@@ -1296,6 +1296,12 @@ export default {
           <slot name="header-button" />
         </div>
       </div>
+      <div
+        v-if="!!$slots['sub-header-row']"
+        class="sub-header-row"
+      >
+        <slot name="sub-header-row" />
+      </div>
     </div>
     <table
       ref="table"
@@ -2047,8 +2053,17 @@ export default {
     grid-template-columns: [bulk] auto [middle] min-content [search] minmax(min-content, 350px);
   }
 
+  $header-padding: 20px;
+  .sub-header-row {
+    padding: 0 0 $header-padding / 2 0;
+  }
+
   .fixed-header-actions {
-    padding: 0 0 20px 0;
+    padding: 0 0 $header-padding 0;
+    &.with-sub-header {
+      padding: 0 0 $header-padding / 4 0;
+    }
+
     width: 100%;
     z-index: z-index('fixedTableHeader');
     background: transparent;