@rancher/shell 0.5.3 → 2.0.0

package/edit/monitoring.coreos.com.prometheusrule/RecordingRule.vue

@@ -58,6 +58,7 @@ export default {
           v-model="value.record"
           :label="t('prometheusRule.recordingRules.name')"
           :required="true"
+          data-testid="v2-monitoring-prom-rules-recording-name"
         />
       </div>
     </div>
@@ -77,6 +78,7 @@ export default {
                 foldGutter: false,
                 readOnly: mode === 'view',
               }"
+              data-testid="v2-monitoring-prom-rules-recording-promql"
               @onInput="queueUpdate"
             />
           </template>

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -166,6 +166,7 @@ export default {
                 :label="t('prometheusRule.groups.name')"
                 :mode="mode"
                 :required="true"
+                :data-testid="`v2-monitoring-prom-rules-group-name-${idx}`"
               />
             </div>
           </div>
@@ -179,6 +180,7 @@ export default {
                 "
                 :label="t('prometheusRule.groups.groupInterval.label')"
                 :mode="mode"
+                :data-testid="`v2-monitoring-prom-rules-group-interval-${idx}`"
                 @input="(e) => updateGroupInterval(filteredGroups[idx], e)"
               />
             </div>

package/edit/networking.k8s.io.ingress/Rules.vue

@@ -45,7 +45,10 @@ export default {
   },
 
   async fetch() {
-    await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    if (!this.$store.getters[`cluster/paginationEnabled`]()) {
+      // This is only used by shell/models/networking.k8s.io.ingress.js `targetTo`, where we do some dodgy matching of workloads with name 'ingress-'
+      await Promise.all(Object.values(WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })));
+    }
   },
 
   beforeUpdate() {
@@ -75,8 +78,10 @@ export default {
           name:          'target',
           label:         this.t('ingress.rules.headers.target'),
           formatter:     'Link',
-          formatterOpts: { options: { internal: true }, urlKey: 'targetLink.to' },
-          value:         'targetLink',
+          formatterOpts: {
+            options: { internal: true }, urlKey: 'targetLink.to', labelKey: 'serviceName'
+          },
+          value: 'targetLink',
         },
         {
           name:  'port',

package/edit/networking.k8s.io.ingress/index.vue

@@ -15,6 +15,8 @@ import DefaultBackend from './DefaultBackend';
 import Certificates from './Certificates';
 import Rules from './Rules';
 import IngressClass from './IngressClass';
+import Loading from '@shell/components/Loading';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 
 export default {
   name:       'CRUIngress',
@@ -28,7 +30,8 @@ export default {
     Rules,
     Tab,
     Tabbed,
-    Error
+    Error,
+    Loading,
   },
   mixins: [CreateEditView, FormValidation],
   props:  {
@@ -43,22 +46,37 @@ export default {
       default: 'edit'
     }
   },
+
   async fetch() {
     this.ingressClassSchema = this.$store.getters[`cluster/schemaFor`](INGRESS_CLASS);
-    const hash = await allHash({
-      secrets:        this.$store.dispatch('cluster/findAll', { type: SECRET }),
-      services:       this.$store.dispatch('cluster/findAll', { type: SERVICE }),
-      ingressClasses: this.ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
-    });
+
+    const promises = {
+      services:              this.$store.dispatch('cluster/findAll', { type: SERVICE }),
+      ingressClasses:        this.ingressClassSchema ? this.$store.dispatch('cluster/findAll', { type: INGRESS_CLASS }) : Promise.resolve([]),
+      ingressResourceFields: this.schema.fetchResourceFields(),
+    };
+
+    this.filterByApi = this.$store.getters[`cluster/paginationEnabled`](SECRET);
+
+    if (this.filterByApi) {
+      promises.filteredSecrets = this.filterSecretsByApi();
+    } else {
+      promises.secrets = this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
+
+    const hash = await allHash(promises);
 
     this.allServices = hash.services;
     this.allSecrets = hash.secrets;
+    this.filteredSecrets = hash.filteredSecrets;
     this.allIngressClasses = hash.ingressClasses;
   },
   data() {
     return {
+      filterByApi:        null,
       ingressClassSchema: null,
-      allSecrets:         [],
+      allSecrets:         null,
+      filteredSecrets:    null,
       allServices:        [],
       allIngressClasses:  [],
       fvFormRuleSets:     [
@@ -89,6 +107,15 @@ export default {
       fvReportedValidationPaths: ['spec.rules.http.paths.backend.service.port.number', 'spec.rules.http.paths.path', 'spec.rules.http.paths.backend.service.name']
     };
   },
+
+  watch: {
+    async 'value.metadata.namespace'() {
+      if (this.filterByApi) {
+        this.filteredSecrets = await this.filterSecretsByApi();
+      }
+    }
+  },
+
   computed: {
     fvExtraRules() {
       const backEndOrRules = (spec) => {
@@ -144,7 +171,17 @@ export default {
       return this.isView ? this.t('ingress.rulesAndCertificates.title') : this.t('ingress.rules.title');
     },
     certificates() {
-      return this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS)).map((secret) => {
+      let filteredSecrets;
+
+      if (this.filteredSecrets) {
+        filteredSecrets = this.filteredSecrets;
+      } else if (this.allSecrets ) {
+        filteredSecrets = this.filterByCurrentResourceNamespace(this.allSecrets.filter((secret) => secret._type === TYPES.TLS));
+      } else {
+        return [];
+      }
+
+      return filteredSecrets.map((secret) => {
         const { id } = secret;
 
         return id.slice(id.indexOf('/') + 1);
@@ -157,6 +194,7 @@ export default {
       }));
     },
   },
+
   created() {
     this.$set(this.value, 'spec', this.value.spec || {});
     this.$set(this.value.spec, 'rules', this.value.spec.rules || [{}]);
@@ -168,7 +206,22 @@ export default {
 
     this.registerBeforeHook(this.willSave, 'willSave');
   },
+
   methods: {
+    filterSecretsByApi() {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.value.metadata.namespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.1',
+            value: TYPES.TLS
+          })
+        }),
+      };
+
+      return this.$store.dispatch(`cluster/findPage`, { type: SECRET, opt: findPageArgs });
+    },
+
     filterByCurrentResourceNamespace(resources) {
       // When configuring an Ingress, the options for Secrets and
       // default backend Services are limited to the namespace of the Ingress.
@@ -176,6 +229,7 @@ export default {
         return resource.metadata.namespace === this.value.metadata.namespace;
       });
     },
+
     willSave() {
       const backend = get(this.value.spec, this.value.defaultBackendPath);
       const serviceName = get(backend, this.value.serviceNamePath);
@@ -191,7 +245,9 @@ export default {
 };
 </script>
 <template>
+  <Loading v-if="$fetchState.pending" />
   <CruResource
+    v-else
     :done-route="doneRoute"
     :mode="mode"
     :resource="value"

package/edit/networking.k8s.io.networkpolicy/PolicyRule.vue

@@ -73,6 +73,7 @@ export default {
               :namespace="namespace"
               :all-namespaces="allNamespaces"
               :all-pods="allPods"
+              :data-testid="`policy-rule-target-${props.i}`"
             />
           </template>
         </ArrayListGrouped>

package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue

@@ -154,6 +154,7 @@ export default {
   },
   watch: {
     namespace:                    'updateMatches',
+    allNamespaces:                'updateMatches',
     'value.podSelector':          'updateMatches',
     'value.namespaceSelector':    'updateMatches',
     'value.ipBlock.cidr':         'validateCIDR',
@@ -214,7 +215,7 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-model="targetType"
-          data-testid="labeled-select-type-selector"
+          data-testid="policy-rule-target-type-labeled-select"
           :mode="mode"
           :tooltip="targetType === TARGET_OPTIONS.NAMESPACE_AND_POD_SELECTOR ? t('networkpolicy.selectors.matchingNamespacesAndPods.tooltip') : null"
           :options="selectTargetOptions"
@@ -293,7 +294,10 @@ export default {
       <div class="row">
         <div class="col span-12">
           <Banner color="success">
-            <span v-clean-html="t('networkpolicy.selectors.matchingNamespaces.matchesSome', matchingNamespaces)" />
+            <span
+              v-clean-html="t('networkpolicy.selectors.matchingNamespaces.matchesSome', matchingNamespaces)"
+              data-testid="matching-namespaces-message"
+            />
           </Banner>
         </div>
       </div>

package/edit/networking.k8s.io.networkpolicy/__tests__/{PolicyRuleTarget.spec.ts → PolicyRuleTarget.test.ts}

@@ -1,15 +1,44 @@
 import { mount } from '@vue/test-utils';
 import PolicyRuleTarget from '@shell/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 import mock from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/mock.json';
 import { PolicyRuleTargetSelectors } from '@shell/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors.test.ts';
 
+type MatchData = {
+  matched: number;
+  matches: Array<object>;
+  none: boolean;
+  total: number;
+  sample?: string;
+}
+
+const newNamespace = {
+  id:       'new-namespace',
+  type:     'namespace',
+  kind:     'Namespace',
+  spec:     { finalizers: ['kubernetes'] },
+  status:   { phase: 'Active' },
+  metadata: {
+    annotations:       { user: 'john' },
+    name:              'default',
+    creationTimestamp: '2024-01-31T10:24:03Z',
+    fields:            ['default', 'Active', '1d'],
+    labels:            { user: 'john' },
+    relationships:     null,
+    resourceVersion:   '1',
+    state:             {
+      error:         false,
+      message:       '',
+      name:          'active',
+      transitioning: false
+    }
+  }
+};
+
 describe.each([
   'view',
   'edit',
 ])('component: PolicyRuleTarget', (mode) => {
   const mockExists = jest.fn().mockReturnValue(true);
-  const mockT = jest.fn().mockReturnValue('some-string');
 
   const wrapper = mount(PolicyRuleTarget, {
     data() {
@@ -22,14 +51,11 @@ describe.each([
       type:          'ingress',
       mode
     },
-
-    directives: { cleanHtmlDirective },
-
     mocks: {
       $store: {
         getters: {
           'i18n/exists': mockExists,
-          'i18n/t':      mockT
+          'i18n/t':      (key: string, matchData: MatchData) => matchData ? `${ key }-${ matchData.total }` : key,
         }
       }
     }
@@ -77,6 +103,19 @@ describe.each([
       expect(selectors.namespaceAndPod.podRule.element).toBeUndefined();
 
       expect(selectors.namespace.element).toBeDefined();
+
+      // Updating allNamespace should update the matching namespaces message too
+      await wrapper.setProps({
+        allNamespaces: [
+          ...wrapper.vm.$props.allNamespaces,
+          newNamespace
+        ]
+      });
+
+      const matchingNamespacesMessage = wrapper.find('[data-testid="matching-namespaces-message"]').text();
+      const totalInMessage = matchingNamespacesMessage.split('-')[1];
+
+      expect(totalInMessage).toBe(`${ wrapper.vm.$data.matchingNamespaces.total }`);
     });
 
     it('should display pod selector rule', async() => {

package/edit/networking.k8s.io.networkpolicy/__tests__/utils/selectors.test.ts

@@ -40,6 +40,6 @@ export class PolicyRuleTargetSelectors {
   }
 
   get ruleType() {
-    return this.wrapper.find('[data-testid=labeled-select-type-selector]');
+    return this.wrapper.find('[data-testid="policy-rule-target-type-labeled-select"]');
   }
 }

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -146,6 +146,7 @@ export default {
 
   methods: {
     updateMatchingPods: throttle(function() {
+      // See https://github.com/rancher/dashboard/issues/10417, all pods bad, need to replace local selector somehow
       const allInNamespace = this.allPods.filter((pod) => pod.metadata.namespace === this.value.metadata.namespace);
       const match = matching(allInNamespace, this.podSelectorExpressions);
       const matched = match.length || 0;
@@ -198,6 +199,7 @@ export default {
               class="mt-20 mb-10"
               :mode="mode"
               :label="t('networkpolicy.ingress.enable')"
+              data-testid="network-policy-ingress-enable-checkbox"
             />
             <PolicyRules
               v-if="hasIngressPolicies"

package/edit/nodeDriver.vue

@@ -0,0 +1,65 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import CruResource from '@shell/components/CruResource.vue';
+import FormValidation from '@shell/mixins/form-validation';
+import CreateDriver from '@shell/components/CreateDriver';
+import { _CREATE } from '@shell/config/query-params';
+
+export default {
+  name: 'NodeDriverEdit',
+
+  components: {
+    CruResource,
+    CreateDriver
+  },
+
+  mixins: [CreateEditView, FormValidation],
+
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'url', rules: ['required', 'url'] },
+        { path: 'uiUrl', rules: ['url'] },
+        { path: 'checksum', rules: ['alphanumeric'] },
+        { path: 'whitelistDomains', rules: ['wildcardHostname'] }
+      ]
+    };
+  },
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+      default:  () => {}
+    },
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
+  },
+};
+</script>
+
+<template>
+  <CruResource
+    :mode="mode"
+    :show-as-form="true"
+    :can-yaml="false"
+    :resource="value"
+    :errors="fvUnreportedValidationErrors"
+    :validation-passed="fvFormIsValid"
+    :cancel-event="true"
+    :done-route="doneRoute"
+    :apply-hooks="applyHooks"
+    component-testid="node-driver-edit"
+    @done="done"
+    @error="e=>errors = e"
+    @finish="save"
+    @cancel="done"
+  >
+    <CreateDriver
+      :mode="mode"
+      :value="value"
+      :rules="{url:fvGetAndReportPathRules('url'), uiUrl:fvGetAndReportPathRules('uiUrl'), checksum:fvGetAndReportPathRules('checksum'), whitelistDomains:fvGetAndReportPathRules('whitelistDomains')}"
+    />
+  </CruResource>
+</template>

package/edit/persistentvolume/index.vue

@@ -237,9 +237,9 @@ export default {
       <div class="row">
         <div class="col span-6 text-center">
           <label class="text-muted">Persistent Volume Claim:</label>&nbsp;
-          <n-link :to="currentClaim.detailLocation">
+          <router-link :to="currentClaim.detailLocation">
             {{ currentClaim.namespacedName }}
-          </n-link>
+          </router-link>
         </div>
         <div class="col span-6 text-center">
           <label class="text-muted">Age:</label>&nbsp;

package/edit/provisioning.cattle.io.cluster/SelectCredential.vue

@@ -8,6 +8,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import { Banner } from '@components/Banner';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear } from '@shell/utils/array';
+import cloneDeep from 'lodash/cloneDeep';
 
 const _NEW = '_NEW';
 const _NONE = '_NONE';
@@ -67,12 +68,13 @@ export default {
 
   data() {
     return {
-      allCredentials:         [],
-      nodeComponent:          null,
-      credentialId:           this.value || _NONE,
-      newCredential:          null,
-      createValidationPassed: false,
-      originalId:             this.value
+      allCredentials:                [],
+      nodeComponent:                 null,
+      credentialId:                  this.value || _NONE,
+      newCredential:                 null,
+      credCustomComponentValidation: false,
+      nameRequiredValidation:        false,
+      originalId:                    this.value
     };
   },
 
@@ -150,7 +152,7 @@ export default {
       }
 
       if ( this.credentialId === _NEW ) {
-        return this.createValidationPassed;
+        return this.credCustomComponentValidation && this.nameRequiredValidation;
       }
 
       return !!this.credentialId;
@@ -168,10 +170,15 @@ export default {
   },
 
   methods: {
+    handleNameRequiredValidation() {
+      this.nameRequiredValidation = !!this.newCredential?.name?.length;
+    },
+
     async save(btnCb) {
       if ( this.errors ) {
         clear(this.errors);
       }
+      const fullCredential = cloneDeep(this.newCredential);
 
       if ( typeof this.$refs.create?.test === 'function' ) {
         try {
@@ -199,6 +206,8 @@ export default {
         const res = await this.newCredential.save();
 
         this.credentialId = res.id;
+        // full cloud credential data is not stored in the cloud credentail CRD, but consuming components may want to use it
+        this.$emit('credential-created', fullCredential);
         btnCb(true);
       } catch (e) {
         this.errors = [e];
@@ -207,7 +216,7 @@ export default {
     },
 
     createValidationChanged(passed) {
-      this.createValidationPassed = passed;
+      this.credCustomComponentValidation = passed;
     },
 
     backToExisting() {
@@ -247,8 +256,8 @@ export default {
         name-key="name"
         name-label="cluster.credential.name.label"
         name-placeholder="cluster.credential.name.placeholder"
-        :name-required="false"
         mode="create"
+        @change="handleNameRequiredValidation"
       />
 
       <component