Wire in pagination to LabeledSelect and use for pods, secrets and con…

…figmaps (rancher#10786)

* Changes for new design
- New visuals
- Pagination controls --> load more
- finished testing of label select with pagination off

# Conflicts:
#	shell/edit/provisioning.cattle.io.cluster/__tests__/Basics.tests.ts

* Changes following review

* Update Node list to support server-side pagination
- Setup pagination headers for the node type
- Define a pattern for fetching custom list secondary resources
- Major improvements to the way pagination settings are defined and created
- Lots of docs improvements
- Handle calling fetch again once fetch is in progress (nuxt caches running request)
- Validate filter fields (not all are supported by the vai cache
- General pagination fixes

* Lint / test / fixes

* Improvements to configmap e2e test & Improve pagination disabled

* Beef up validation

* Fix missing name column in non-server-side paginated node list

* Fix PR automation actions
- fix syntax
- catch scenario where a pr has no fixed issue

> There's duplication between files, see rancher#10534

* CI bump

* Fixes post merge

* Wire in 2.9.0 settings for server-side pagination
- Everything is gated on `on-disk-steve-cache` feature flag
  - There's a backend in progress item to resolve a `revision` issue, until then disable watching a resource given it
- Global Settings - Performance
  - Added new setting to enable server side pagination
  - this is incompatible with two other performance settings

* Integrate pagination with configmaps in cis clusterscanbenchmark edit form
Also
- improved labeled select pagination
- gate label select pagination functinality on steve cache being enabled

* TODOs and TEST

* Paginate Secret selection for logging providers
- Allow `None` option in Paginationed LabelSelect
- Optionally classify pagination response

* WIP

* fixes arfter merge

* Don't suggest container names, not practical
- previously all pods were fetched... and we scrapped all container names from them
- this is a scaling nightmare, user now must just enter the name/s to match

* Avoid findAll secrets in SimpleSecretSelector

* tidying up

* Move LabeledSelect/index.vue back to LabeledSelect.vue to not break extensions

* changes after self review... 1

* changes after self review... 2

* changes after self review... 3

* Link new paginated label select with pagination setting

* Work around failing kubewarden unit tests in check-plugins gate

* Fix backup.spec e2e test

* Create a convienence wrapper called ResourceLabelSelector that hides most of the complexity

* fix unit test

cypress/e2e/tests/pages/charts/rancher-backup.spec.ts

@@ -41,7 +41,7 @@ describe('Charts', { tags: ['@charts', '@adminUser'] }, () => {
         installPage.nextPage();
         cy.wait('@storageClasses', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
         cy.wait('@persistentVolumes', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
-        cy.wait('@secrets', { timeout: 10000 }).its('response.statusCode').should('eq', 200);
+
         installPage.waitForPage('repo-type=cluster&repo=rancher-charts&chart=rancher-backup');
 
         // Select the 'Use an existing storage class' option

shell/assets/styles/themes/_dark.scss

@@ -112,7 +112,8 @@
   --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-disabled-text     : #{$disabled};
-  --dropdown-highlight-text     : var(--link);
+  --dropdown-group-text        : #{$disabled};
+  --dropdown-highlight-text    : var(--link);
 
   --input-text                 : #{$lightest};
   --input-label                : #{$lighter};

shell/assets/styles/themes/_light.scss

@@ -376,6 +376,7 @@ BODY, .theme-light {
   --dropdown-hover-bg          : var(--link);
   --dropdown-disabled-text     : var(--muted);
   --dropdown-disabled-bg       : #{$disabled};
+  --dropdown-group-text        : #{$darker};
   --dropdown-highlight-text    : var(--link);
 
   --card-badge-text            : #ffffff;

shell/assets/styles/vendor/vue-select.scss

@@ -94,6 +94,11 @@
     hr {
       cursor: default;
     }
+
+    .vs__option-kind-group {
+      color: var(--dropdown-group-text);
+      cursor: default;
+    }
   }
 
   &.vs__dropdown-option--selected {

shell/assets/translations/en-us.yaml

@@ -2874,6 +2874,13 @@ labels:
   annotations:
     title: Annotations
 
+labelSelect:
+  noOptions:
+    empty: No options
+    noMatch: No matching options
+  pagination:
+    counts: '{count} / {totalCount} items'
+    more: Load More...
 landing:
   clusters:
     title: Clusters
@@ -2940,6 +2947,7 @@ logging:
           include: Limit to specific container names
           exclude: Exclude specific container names
         placeholder: "Default: Any container"
+        enter: Enter container name to select
       namespaces:
         title:
           include: Limit to specific namespaces
@@ -7341,7 +7349,7 @@ performance:
     checkboxLabel: Enable Server-side Pagination
     applicable: "This applies to the following resource types"
     incompatibleDescription: "Server-side Pagination is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
-    featureFlag: The <a href="{ffUrl}">Feature Flag</a> `on-disk-steve-cache` must be enabled to use this feature
+    featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`on-disk-steve-cache` must be enabled to use this feature
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources

shell/chart/__tests__/S3.test.ts

@@ -9,8 +9,14 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('rancher-backup: S3', () => {
-  const mockStore = { getters: { 'i18n/t': (text: string) => text, t: (text: string) => text } };
-  const wrapper = mount(S3, { mocks: { $store: mockStore } });
+  const mockStore = {
+    getters: {
+      'i18n/t':      (text: string) => text,
+      t:             (text: string) => text,
+      'cluster/all': () => [],
+    }
+  };
+  const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
 
   it('should emit invalid when form is not filled', () => {
     expect(wrapper.emitted('valid')).toHaveLength(1);

shell/chart/rancher-backup/S3.vue

@@ -2,15 +2,16 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
 import FileSelector from '@shell/components/form/FileSelector';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { mapGetters } from 'vuex';
+import { SECRET } from '@shell/config/types';
 
 export default {
   components: {
     LabeledInput,
     Checkbox,
     FileSelector,
-    LabeledSelect,
+    ResourceLabeledSelect,
   },
 
   props: {
@@ -25,10 +26,10 @@ export default {
       default: 'create'
     },
 
-    secrets: {
-      type:    Array,
-      default: () => []
-    }
+  },
+
+  data() {
+    return { SECRET };
   },
 
   mounted() {
@@ -44,6 +45,7 @@ export default {
       this.$emit('valid', this.valid);
     }
   },
+
   computed: {
     credentialSecret: {
       get() {
@@ -75,7 +77,7 @@ export default {
         // eslint-disable-next-line no-console
         console.warn(e);
       }
-    }
+    },
   },
 
   created() {
@@ -92,13 +94,13 @@ export default {
   <div>
     <div class="row mb-10">
       <div class="col span-6">
-        <LabeledSelect
+        <ResourceLabeledSelect
           v-model="credentialSecret"
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
-          :options="secrets"
           :label="t('backupRestoreOperator.s3.credentialSecretName')"
+          :resource-type="SECRET"
         />
       </div>
       <div class="col span-6">

shell/chart/rancher-backup/index.vue

@@ -7,7 +7,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { get } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
-import { STORAGE_CLASS, SECRET, PV } from '@shell/config/types';
+import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
 
@@ -41,10 +41,8 @@ export default {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
       persistentVolumes: this.$store.dispatch('cluster/findAll', { type: PV }),
-      secrets:           this.$store.dispatch('cluster/findAll', { type: SECRET }),
     });
 
-    this.secrets = hash.secrets;
     this.storageClasses = hash.storageClasses;
     this.persistentVolumes = hash.persistentVolumes;
 
@@ -89,6 +87,12 @@ export default {
 
   watch: {
     storageSource(neu) {
+      if (!this.value.persistence) {
+        this.value.persistence = {};
+      }
+      if (!this.value.s3) {
+        this.value.s3 = {};
+      }
       switch (neu) {
       case 'pickSC':
         this.value.persistence.enabled = true;

shell/components/PodSecurityAdmission.vue

@@ -4,7 +4,7 @@ import { _VIEW, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { PSADimension, PSAMode } from '@shell/types/pod-security-admission';
+import { PSADimension, PSAMode } from '@shell/types/resources/pod-security-admission';
 import {
   PSADefaultLevel,
   PSADefaultVersion, PSADimensions, PSALevels, PSAModes