@rancher/shell 0.3.3 → 0.3.5

package/components/__tests__/ChartPsp.test.ts

@@ -0,0 +1,75 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import ChartPsp from '@shell/components/ChartPsp.vue';
+
+describe('component: ChartPsp', () => {
+  it.each([
+    true, false
+  ])('should render checkbox referencing value.global.cattle.psp.enabled as %p', (value) => {
+    const version = 'v1.24.11+rke2r1';
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: value } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    expect(wrapper.findComponent({ name: 'Checkbox' }).props().value).toBe(value);
+  });
+
+  it.each([
+    ['v1.24.11+rke2r1'],
+  ])('should display the checkbox for cluster with k8s version %p', (version) => {
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: false } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    const input = wrapper.find(`[data-testid="psp-checkbox"]`).element as HTMLInputElement;
+
+    expect(input).toBeDefined();
+  });
+
+  it.each([
+    ['v1.25.11+rke2r1'],
+  ])('should not display the checkbox for cluster with k8s version %p', (version) => {
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: false } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    const input = wrapper.find(`[data-testid="psp-checkbox"]`).element as HTMLInputElement;
+
+    expect(input).toBeUndefined();
+  });
+
+  it('should update value.global.cattle.psp.enabled when checkbox is toggled', async() => {
+    const chartValues = { global: {} } as any;
+    const version = 'v1.24.11+rke2r1';
+    const wrapper = mount(ChartPsp, {
+      propsData: {
+        value:   chartValues,
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    await wrapper.find('.checkbox-container').trigger('click');
+
+    expect(chartValues.global.cattle.psp.enabled).toBe(true);
+
+    await wrapper.find('.checkbox-container').trigger('click');
+    expect(chartValues.global.cattle.psp.enabled).toBe(false);
+  });
+
+  it.each([
+    { global: {} } as any,
+    { global: { cattle: {} } } as any,
+  ])('should define cattle.psp.enabled and set to false', (chartValues) => {
+    shallowMount(ChartPsp, { propsData: { value: chartValues } });
+
+    expect(chartValues.global.cattle.psp.enabled).toBe(false);
+  });
+});

package/components/__tests__/CruResource.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: CruResource', () => {
   it('should hide Cancel button', () => {
@@ -33,7 +34,8 @@ describe('component: CruResource', () => {
   it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
-      propsData: {
+      directives: { cleanHtmlDirective },
+      propsData:  {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},

package/components/auth/Principal.vue

@@ -66,9 +66,9 @@ export default {
         </div>
       </div>
       <div
+        v-clean-html="t('principal.loading', null, true)"
         class="name"
         :class="{'text-muted': useMuted}"
-        v-html="t('principal.loading', null, true)"
       />
       <div class="description" />
     </template>

package/components/fleet/FleetBundles.vue

@@ -26,7 +26,9 @@ export default {
   },
 
   async fetch() {
-    this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
+    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
+      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
+    }
   },
 
   data() {

package/components/fleet/FleetClusters.vue

@@ -71,8 +71,7 @@ export default {
     },
 
     pagingParams() {
-      const inStore = this.$store.getters['currentStore'](FLEET.CLUSTER);
-      const schema = this.$store.getters[`${ inStore }/schemaFor`](FLEET.CLUSTER);
+      const schema = this.$store.getters[`management/schemaFor`](FLEET.CLUSTER);
 
       return {
         singularLabel: this.$store.getters['type-map/labelFor'](schema),

package/components/fleet/FleetIntro.vue

@@ -1,5 +1,6 @@
 <script>
 import { AS, _YAML } from '@shell/config/query-params';
+import { FLEET } from '@shell/config/types';
 
 export default {
 
@@ -18,10 +19,14 @@ export default {
       query: { [AS]: _YAML },
     };
 
+    const gitRepoSchema = this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
+    const canCreateRepos = gitRepoSchema && gitRepoSchema.resourceMethods.includes('PUT');
+
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
+      canCreateRepos
     };
   },
 };
@@ -32,7 +37,10 @@ export default {
     <div class="title">
       {{ t('fleet.gitRepo.repo.noRepos') }}
     </div>
-    <div class="actions">
+    <div
+      v-if="canCreateRepos"
+      class="actions"
+    >
       <n-link
         :to="formRoute"
         class="btn role-secondary"

package/components/fleet/FleetNoWorkspaces.vue

@@ -0,0 +1,62 @@
+
+<script>
+import { FLEET } from '@shell/config/types';
+import { NAME } from '@shell/config/product/fleet';
+export default {
+  name: 'NoWorkspaces',
+
+  props: {
+    canView: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const formRoute = {
+      name:   `c-cluster-product-resource-create`,
+      params: { resource: FLEET.WORKSPACE, product: NAME }
+    };
+
+    return { hasWorkspaces: false, formRoute };
+  },
+};
+</script>
+<template>
+  <div class="intro-box">
+    <i class="icon icon-repository" />
+    <div class="title">
+      <span v-clean-html="t('fleet.gitRepo.repo.noWorkspaces', null, true)" />
+    </div>
+    <div
+      v-if="canView"
+      class="actions"
+    >
+      <n-link
+        :to="formRoute"
+        class="btn role-secondary"
+      >
+        {{ t('fleet.gitRepo.workspace.addWorkspace') }}
+      </n-link>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.intro-box {
+  height: calc(100vh - var(--header-height)*2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.title {
+  margin-bottom: 15px;
+  font-size: $font-size-h2;
+  text-align: center;
+  max-width: 600px;
+}
+.icon-repository {
+  font-size: 96px;
+  margin-bottom: 32px;
+}
+</style>

package/components/fleet/FleetSummary.vue

@@ -80,7 +80,12 @@ export default {
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter(item => item.metadata.name.startsWith(`${ this.repoName }-`)) || [];
+      const resources = this.bundles.filter(item => item.metadata.name.startsWith(`${ this.repoName }-`));
+
+      if (!resources.length) {
+        return [];
+      }
+
       const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
 
       resources.forEach(({ status, metadata }) => {
@@ -176,6 +181,7 @@ export default {
 <template>
   <div class="row flexwrap">
     <FleetStatus
+      v-if="bundleCounts.length"
       title="Bundles"
       :values="bundleCounts"
       value-key="count"

package/components/form/LabeledSelect.vue

@@ -1,11 +1,11 @@
 <script>
 import CompactInput from '@shell/mixins/compact-input';
 import LabeledFormElement from '@shell/mixins/labeled-form-element';
-import { findBy } from '@shell/utils/array';
 import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
+import isEqual from 'lodash/isEqual';
 
 export default {
   name: 'LabeledSelect',
@@ -105,16 +105,6 @@ export default {
     hasLabel() {
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
-
-    currentLabel() {
-      const entry = findBy(this.options || [], 'value', this.value);
-
-      if (entry) {
-        return entry.label;
-      }
-
-      return this.getOptionLabel(this.value);
-    },
   },
 
   methods: {
@@ -159,6 +149,19 @@ export default {
         return;
       }
 
+      // Force to update the option label if prop has been changed
+      const isOutdated = !this.options.find(opt => option[this.optionLabel] === opt[this.optionLabel]);
+
+      if (isOutdated && this.options) {
+        const newOption = this.options.find(opt => isEqual(this.reduce(option), this.reduce(opt)));
+
+        if (newOption) {
+          const label = get(newOption, this.optionLabel);
+
+          return this.localizedLabel ? this.$store.getters['i18n/t'](label) || label : label;
+        }
+      }
+
       if (this.$attrs['get-option-label']) {
         return this.$attrs['get-option-label'](option);
       }

package/components/form/MatchExpressions.vue

@@ -35,6 +35,18 @@ export default {
       default: false,
     },
 
+    // whether or not to show add rule button at bottom
+    showAddButton: {
+      type:    Boolean,
+      default: true
+    },
+
+    // whether or not to show remove rule button right side of the rule
+    showRemoveButton: {
+      type:    Boolean,
+      default: true
+    },
+
     // whether or not to show remove button in upper right
     showRemove: {
       type:    Boolean,
@@ -257,7 +269,10 @@ export default {
           @input="update"
         >
       </div>
-      <div class="remove-container">
+      <div
+        v-if="showRemoveButton"
+        class="remove-container"
+      >
         <button
           v-if="!isView"
           type="button"
@@ -272,7 +287,7 @@ export default {
       </div>
     </div>
     <div
-      v-if="!isView"
+      v-if="!isView && showAddButton"
       class="mt-20"
     >
       <button

package/components/form/NameNsDescription.vue

@@ -20,7 +20,7 @@ export function normalizeName(str) {
 }
 
 export default {
-  name:       'NameNsDescripiton',
+  name:       'NameNsDescription',
   components: {
     LabeledInput,
     LabeledSelect
@@ -169,7 +169,7 @@ export default {
     if (this.nameKey) {
       name = get(v, this.nameKey);
     } else {
-      name = metadata.name;
+      name = metadata?.name;
     }
 
     if (this.namespaced) {
@@ -209,7 +209,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduct', 'currentCluster']),
+    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -220,36 +220,18 @@ export default {
       return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
     },
 
-    namespaces() {
-      const currentStore = this.$store.getters['currentStore'](this.namespaceType);
-      const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
-
-      const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
-        // By default, include the namespace in the dropdown.
-        let out = true;
-
-        if (this.currentProduct?.hideSystemResources) {
-          // Filter out the namespace
-          // if it is a system namespace or if it is managed by
-          // Fleet.
-          out = !namespace.isSystem && !namespace.isFleetManaged;
-        }
-
-        if (this.mode === _CREATE) {
-          out = out && !!namespace.links.update;
-        }
-
-        return out;
-      }));
-
-      const withLabels = filtered.map(this.namespaceMapper || ((obj) => {
-        return {
+    /**
+     * Map namespaces from the store to options, adding divider and create button
+     */
+    options() {
+      const options = Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces())
+        .map(namespace => ({ nameDisplay: namespace, id: namespace }))
+        .map(this.namespaceMapper || (obj => ({
           label: obj.nameDisplay,
           value: obj.id,
-        };
-      }));
+        })));
 
-      const sortedByLabel = sortBy(withLabels, 'label');
+      const sortedByLabel = sortBy(options, 'label');
 
       if (this.forceNamespace) {
         sortedByLabel.unshift({
@@ -258,29 +240,33 @@ export default {
         });
       }
 
-      const out = [];
-
-      if (this.canCreateNamespace) {
-        out.push({
-          label: this.t('namespace.createNamespace'),
-          value: '',
-          kind:  'highlighted'
-        });
-      }
-      out.push({
+      const createButton = {
+        label: this.t('namespace.createNamespace'),
+        value: '',
+        kind:  'highlighted'
+      };
+      const divider = {
         label:    'divider',
         disabled: true,
         kind:     'divider'
-      },
-      ...sortedByLabel);
+      };
 
-      return out;
+      const createOverhead = this.canCreateNamespace ? [createButton, divider] : [];
+
+      return [
+        ...createOverhead,
+        ...sortedByLabel
+      ];
     },
 
     isView() {
       return this.mode === _VIEW;
     },
 
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
     colSpan() {
       if (!this.horizontal) {
         return `span-8`;
@@ -296,7 +282,7 @@ export default {
 
     canCreateNamespace() {
       // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
-      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster.canUpdate;
+      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster?.canUpdate;
     }
   },
 
@@ -418,7 +404,7 @@ export default {
         v-show="!createNamespace"
         v-model="namespace"
         :clearable="true"
-        :options="namespaces"
+        :options="options"
         :disabled="namespaceReallyDisabled"
         :searchable="true"
         :mode="mode"

package/components/form/ResourceSelector.vue

@@ -124,7 +124,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
-          <span v-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
+          <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>
       </div>
     </div>

package/components/form/SecretSelector.vue

@@ -55,6 +55,10 @@ export default {
     mode: {
       type:    String,
       default: _EDIT
+    },
+    inStore: {
+      type:    String,
+      default: 'cluster',
     }
   },
 
@@ -86,7 +90,7 @@ export default {
       }
     },
     secrets() {
-      const allSecrets = this.$store.getters['cluster/all'](SECRET);
+      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
       return allSecrets
         .filter(secret => this.types.includes(secret._type) && secret.namespace === this.namespace);

package/components/form/ServiceNameSelect.vue

@@ -154,8 +154,8 @@ export default {
     <template v-if="serviceNameNew">
       <div class="row span-6">
         <Banner
+          v-clean-html="t('workload.serviceAccountName.createMessage', { name: serviceName }) "
           color="info"
-          v-html="t('workload.serviceAccountName.createMessage', { name: serviceName }) "
         />
       </div>
     </template>

package/components/form/SimpleSecretSelector.vue

@@ -107,18 +107,18 @@ export default {
   },
 
   methods: {
-    updateSecretName(value) {
-      if (value === this.none) {
+    updateSecretName(e) {
+      if (e.value === this.none) {
         // The key should appear blank if the secret name is cleared
         this.key = '';
       }
-      if (value) {
-        this.$emit('updateSecretName', value);
+      if (e.value) {
+        this.$emit('updateSecretName', e.value);
       }
     },
-    updateSecretKey(value) {
-      if (value) {
-        this.$emit('updateSecretKey', value);
+    updateSecretKey(e) {
+      if (e.value) {
+        this.$emit('updateSecretKey', e.value);
       }
     }
   }
@@ -135,7 +135,7 @@ export default {
         :options="secretNames"
         :label="secretNameLabel"
         :mode="mode"
-        @selecting="updateSecretName(name)"
+        @selecting="updateSecretName"
       />
       <LabeledSelect
         v-model="key"
@@ -144,7 +144,7 @@ export default {
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
-        @selecting="updateSecretKey(key)"
+        @selecting="updateSecretKey"
       />
     </div>
   </div>