@rancher/shell 1.2.0 → 2.0.0

package/components/form/SecretSelector.vue

@@ -1,14 +1,16 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import sortBy from 'lodash/sortBy';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
 const NONE = '__[[NONE]]__';
 
 export default {
-  components: { LabeledSelect },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     value: {
@@ -62,6 +64,33 @@ export default {
     }
   },
 
+  data() {
+    return {
+      secrets:            null,
+      SECRET,
+      allSecretsSettings: {
+        mapResult: (secrets) => {
+          const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+          const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+          this.secrets = allSecretsInNamespace; // We need the key from the selected secret
+
+          return mappedSecrets;
+        }
+      },
+      paginateSecretsSetting: {
+        requestSettings: this.paginatePageOptions,
+        mapResult:       (secrets) => {
+          const mappedSecrets = this.mapSecrets(secrets);
+
+          this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
+
+          return mappedSecrets;
+        }
+      }
+    };
+  },
+
   computed: {
     name: {
       get() {
@@ -89,36 +118,77 @@ export default {
         this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
       }
     },
-    secrets() {
-      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
-      return allSecrets
-        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
-    },
-    secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
-
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
-    },
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret = (this.secrets || []).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
         value: key
       }));
     },
+
     isView() {
       return this.mode === _VIEW;
     },
+
     isKeyDisabled() {
       return !this.isView && (!this.name || this.name === NONE || this.disabled);
     }
   },
 
+  methods: {
+    /**
+     * Provide a set of options for the LabelSelect ([none, ...{label, value}])
+     */
+    mapSecrets(secrets) {
+      const mappedSecrets = secrets
+        .reduce((res, s) => {
+          if (s.kind === LABEL_SELECT_KINDS.NONE) {
+            return res;
+          }
+
+          if (s.id) {
+            res.push({ label: s.name, value: s.name });
+          } else {
+            res.push(s);
+          }
+
+          return res;
+        }, []);
+
+      return [
+        {
+          label: 'None', value: NONE, kind: LABEL_SELECT_KINDS.NONE
+        },
+        ...mappedSecrets
+      ];
+    },
+
+    /**
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
+     */
+    paginatePageOptions(opts) {
+      const { opts: { filter } } = opts;
+
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+      filters.push(
+        PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+      );
+
+      return {
+        ...opts,
+        filters,
+        groupByNamespace: false,
+        classify:         true,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+      };
+    },
+  }
+
 };
 </script>
 
@@ -128,12 +198,17 @@ export default {
     :class="{'show-key-selector': showKeySelector}"
   >
     <div class="input-container">
-      <LabeledSelect
+      <!-- key by namespace to ensure label select current page is recreated on ns change -->
+      <ResourceLabeledSelect
+        :key="namespace"
         v-model="name"
         :disabled="!isView && disabled"
-        :options="secretNames"
         :label="secretNameLabel"
         :mode="mode"
+        :resource-type="SECRET"
+        :in-store="inStore"
+        :paginated-resource-settings="paginateSecretsSetting"
+        :all-resources-settings="allSecretsSettings"
       />
       <LabeledSelect
         v-if="showKeySelector"

package/components/form/SelectOrCreateAuthSecret.vue

@@ -7,6 +7,11 @@ import { SECRET_TYPES } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
+import {
+  FilterArgs,
+  PaginationFilterField,
+  PaginationParamFilter,
+} from '@shell/types/store/pagination.types';
 
 export default {
   name: 'SelectOrCreateAuthSecret',
@@ -47,6 +52,9 @@ export default {
       required: true,
     },
 
+    /**
+     * Limit the selection of an existing secret to the namespace provided
+     */
     limitToNamespace: {
       type:    Boolean,
       default: true,
@@ -117,23 +125,38 @@ export default {
      */
     delegateCreateToParent: {
       type:    Boolean,
-      default: false
-    }
+      default: false,
+    },
+
+    /**
+     * Set to false to make a fresh http request to secrets every time. This can be used when secrets have already been used for
+     * another purpose on the same page
+     *
+     * Set to true to cache the response
+     */
+    cacheSecrets: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   async fetch() {
     if ( (this.allowSsh || this.allowBasic || this.allowRke) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
-      // Avoid an async call and loading screen if already loaded by someone else
-      if ( this.$store.getters[`${ this.inStore }/haveAll`](SECRET) ) {
-        this.allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
+      if (this.$store.getters[`${ this.inStore }/paginationEnabled`](SECRET)) {
+        // Filter results via api (because we shouldn't be fetching them all...)
+        this.filteredSecrets = await this.filterSecretsByApi();
       } else {
-        this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
+        // Cannot yet filter via api, so fetch all and filter later on
+        this.allSecrets = await this.$store.dispatch(
+          `${ this.inStore }/findAll`,
+          { type: SECRET }
+        );
       }
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
       // Avoid an async call and loading screen if already loaded by someone else
-      if ( this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL) ) {
+      if (this.$store.getters['rancher/haveAll'](NORMAN.CLOUD_CREDENTIAL)) {
         this.allCloudCreds = this.$store.getters['rancher/all'](NORMAN.CLOUD_CREDENTIAL);
       } else {
         this.allCloudCreds = await this.$store.dispatch('rancher/findAll', { type: NORMAN.CLOUD_CREDENTIAL });
@@ -166,34 +189,30 @@ export default {
     this.update();
   },
 
-  data(props) {
+  data() {
     return {
       allCloudCreds: [],
-      allSecrets:    [],
-      selected:      null,
+
+      allSecrets:      null,
+      filteredSecrets: null,
+
+      selected: null,
+
+      filterByNamespace: this.namespace && this.limitToNamespace,
 
       publicKey:  '',
       privateKey: '',
-      uniqueId:   new Date().getTime() // Allows form state to be individually tracked if the form is in a list
+      uniqueId:   new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+
+      SSH:   AUTH_TYPE._SSH,
+      BASIC: AUTH_TYPE._BASIC,
+      S3:    AUTH_TYPE._S3,
     };
   },
 
   computed: {
-    _SSH() {
-      return AUTH_TYPE._SSH;
-    },
-
-    _BASIC() {
-      return AUTH_TYPE._BASIC;
-    },
-
-    _S3() {
-      return AUTH_TYPE._S3;
-    },
-
-    options() {
+    secretTypes() {
       const types = [];
-      const keys = [];
 
       if ( this.allowSsh ) {
         types.push(SECRET_TYPES.SSH);
@@ -207,41 +226,55 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
-      let out = this.allSecrets
-        .filter((x) => this.namespace && this.limitToNamespace ? x.metadata.namespace === this.namespace : true)
-        .filter((x) => {
-          // Must match one of the types if given
-          if ( types.length && !types.includes(x._type) ) {
-            return false;
-          }
-
-          // Must match ALL of the keys if given
-          if ( keys.length ) {
-            const dataKeys = Object.keys(x.data || {});
+      return types;
+    },
 
-            if ( !keys.every((key) => dataKeys.includes(key)) ) {
+    /**
+     * Fitler secrets given their namespace and required secret type
+     *
+     * Convert secrets to list of options and suplement with custom entries
+     */
+    options() {
+      let filteredSecrets = [];
+
+      if (this.allSecrets) {
+        // Fitler secrets given their namespace and required secret type
+        filteredSecrets = this.allSecrets
+          .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true
+          )
+          .filter((x) => {
+            // Must match one of the required types
+            if (
+              this.secretTypes.length &&
+              !this.secretTypes.includes(x._type)
+            ) {
               return false;
             }
-          }
 
-          return true;
-        }).map((x) => {
-          const {
-            dataPreview, subTypeDisplay, metadata, id
-          } = x;
+            return true;
+          });
+      } else if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      }
 
-          const label = subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
+      let out = filteredSecrets.map((x) => {
+        const {
+          dataPreview, subTypeDisplay, metadata, id
+        } = x;
 
-          return {
-            label,
-            group: metadata.namespace,
-            value: id,
-          };
-        });
+        const label =
+          subTypeDisplay && dataPreview ? `${ metadata.name } (${ subTypeDisplay }: ${ dataPreview })` : `${ metadata.name } (${ subTypeDisplay })`;
 
-      if ( this.allowS3 ) {
+        return {
+          label,
+          group: metadata.namespace,
+          value: id,
+        };
+      });
+
+      if (this.allowS3) {
         const more = this.allCloudCreds
-          .filter((x) => ['aws', 's3'].includes(x.provider) )
+          .filter((x) => ['aws', 's3'].includes(x.provider))
           .map((x) => {
             return {
               label: `${ x.nameDisplay } (${ x.providerDisplay })`,
@@ -349,11 +382,16 @@ export default {
     publicKey:  'updateKeyVal',
     privateKey: 'updateKeyVal',
 
-    namespace(ns) {
-      if ( ns && !this.selected.startsWith(`${ ns }/`) ) {
+    async namespace(ns) {
+      if (ns && !this.selected.startsWith(`${ ns }/`)) {
         this.selected = AUTH_TYPE._NONE;
       }
-    }
+
+      // if ns has changed and we're filtering by api... we need to re-fetch entries
+      if (this.filteredSecrets && this.filterByNamespace) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    },
   },
 
   created() {
@@ -369,8 +407,43 @@ export default {
   },
 
   methods: {
+    async filterSecretsByApi() {
+      const findPageArgs = {
+        // Of type ActionFindPageArgs
+        namespaced: this.filterByNamespace ? this.namespace : '',
+        pagination: new FilterArgs({
+          filters: [
+            PaginationParamFilter.createMultipleFields(
+              this.secretTypes.map(
+                (t) => new PaginationFilterField({
+                  field: 'metadata.fields.1',
+                  value: t,
+                })
+              )
+            ),
+          ],
+        }),
+      };
+
+      if (this.cacheSecrets) {
+        return await this.$store.dispatch(`${ this.inStore }/findPage`, {
+          type: SECRET,
+          opt:  findPageArgs,
+        });
+      }
+
+      const url = this.$store.getters[`${ this.inStore }/urlFor`](
+        SECRET,
+        null,
+        findPageArgs
+      );
+      const res = await this.$store.dispatch(`cluster/request`, { url });
+
+      return res?.data || [];
+    },
+
     updateKeyVal() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected)) {
+      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3].includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
       }
@@ -485,7 +558,7 @@ export default {
           :selectable="option => !option.disabled"
         />
       </div>
-      <template v-if="selected === _SSH">
+      <template v-if="selected === SSH">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -505,7 +578,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _BASIC">
+      <template v-else-if="selected === BASIC">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"
@@ -524,7 +597,7 @@ export default {
           />
         </div>
       </template>
-      <template v-else-if="selected === _S3">
+      <template v-else-if="selected === S3">
         <div :class="moreCols">
           <LabeledInput
             v-model="publicKey"

package/components/form/SimpleSecretSelector.vue

@@ -13,28 +13,22 @@
 
    name: example-secret-name
    key: example-secret-key
+
+   FIXME: The solution to above would have been to have a configurable path to set/get name and key from.
+   This would have avoided a lot of copy and paste
  */
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { TYPES } from '@shell/models/secret';
-import sortBy from 'lodash/sortBy';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 const NONE = '__[[NONE]]__';
 
 export default {
-  components: { LabeledSelect },
-
-  async fetch() {
-    // Make sure secrets are in the store so that the secret
-    // selectors in the receiver config forms will have secrets
-    // to choose from.
-    const allSecrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
-
-    const allSecretsInNamespace = allSecrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
-
-    this.secrets = allSecretsInNamespace;
-  },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     test:        { type: String, default: '' },
@@ -74,24 +68,37 @@ export default {
 
   data(props) {
     return {
-      secrets: [],
-      name:    props.initialName,
-      key:     props.initialKey,
-      none:    NONE
+      secrets:            [],
+      name:               props.initialName,
+      key:                props.initialKey,
+      none:               NONE,
+      SECRET,
+      allSecretsSettings: {
+        mapResult: (secrets) => {
+          const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+          const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+          this.secrets = allSecretsInNamespace; // We need the key from the selected secret
+
+          return mappedSecrets;
+        }
+      },
+      paginateSecretsSetting: {
+        requestSettings: this.paginatePageOptions,
+        mapResult:       (secrets) => {
+          const mappedSecrets = this.mapSecrets(secrets);
+
+          this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
+
+          return mappedSecrets;
+        }
+      }
     };
   },
 
   computed: {
-    secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
-
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
-    },
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret = (this.secrets || []).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
@@ -107,6 +114,56 @@ export default {
   },
 
   methods: {
+    /**
+     * Provide a set of options for the LabelSelect ([none, ...{label, value}])
+     */
+    mapSecrets(secrets) {
+      const mappedSecrets = secrets
+        .reduce((res, s) => {
+          if (s.kind === LABEL_SELECT_KINDS.NONE) {
+            return res;
+          }
+
+          if (s.id) {
+            res.push({ label: s.name, value: s.name });
+          } else {
+            res.push(s);
+          }
+
+          return res;
+        }, []);
+
+      return [
+        {
+          label: 'None', value: NONE, kind: LABEL_SELECT_KINDS.NONE
+        },
+        ...mappedSecrets
+      ];
+    },
+
+    /**
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
+     */
+    paginatePageOptions(opts) {
+      const { opts: { filter } } = opts;
+
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+      filters.push(
+        PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+      );
+
+      return {
+        ...opts,
+        filters,
+        groupByNamespace: false,
+        classify:         true,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+      };
+    },
+
     updateSecretName(e) {
       if (e.value === this.none) {
         // The key should appear blank if the secret name is cleared
@@ -128,13 +185,16 @@ export default {
 <template>
   <div class="secret-selector show-key-selector">
     <div class="input-container">
-      <LabeledSelect
+      <ResourceLabeledSelect
         v-model="name"
         class="col span-6"
         :disabled="!isView && disabled"
-        :options="secretNames"
+        :loading="$fetchState.pending"
         :label="secretNameLabel"
         :mode="mode"
+        :resource-type="SECRET"
+        :paginated-resource-settings="paginateSecretsSetting"
+        :all-resources-settings="allSecretsSettings"
         @selecting="updateSecretName"
       />
       <LabeledSelect

package/components/form/__tests__/BannerSettings.test.ts

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import BannerSettings from '@shell/components/form/BannerSettings.vue';
+
+describe('view: management.cattle.io.setting should', () => {
+  const requiredSetup = () => ({
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          currentCluster:            { id: 'local' },
+          currentProduct:            { inStore: 'cluster' },
+          isExplorer:                false,
+          'management/schemaFor':    jest.fn(),
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  jest.fn(),
+          'i18n/exists':             jest.fn(),
+          'prefs/get':               () => {},
+        },
+        dispatch: jest.fn(),
+      },
+      $route:  { query: { AS: '' } },
+      $router: { applyQuery: jest.fn() },
+    }
+  });
+
+  it('allowing to save if no rules in settings', () => {
+    const wrapper = mount(BannerSettings, {
+      stubs:     { TypeDescription: true },
+      propsData: {
+        value:      { foo: { text: '' } },
+        mode:       'view',
+        bannerType: 'foo'
+      },
+      computed: { hideDescriptions: () => true },
+      data:     () => ({
+        vendor:      'Rancher',
+        uiPLSetting: { vendor: 'Rancher' },
+
+        uiBannerSetting: null,
+        bannerVal:       {},
+
+        errors: [],
+      }),
+      ...requiredSetup()
+    });
+
+    const colorInputPreview = wrapper.find('[data-testid="color-input-color-input_preview-container"]');
+
+    expect(colorInputPreview.element.style.display).not.toBe('flex');
+  });
+});