@rancher/shell 0.3.4 → 0.3.6

package/components/SortableTable/selection.js

@@ -1,7 +1,7 @@
-import $ from 'jquery';
 import { isMore, isRange, suppressContextMenu, isAlternate } from '@shell/utils/platform';
 import { get } from '@shell/utils/object';
 import { filterBy } from '@shell/utils/array';
+import { getParent } from '@shell/utils/dom';
 
 export const ALL = 'all';
 export const SOME = 'some';
@@ -9,23 +9,23 @@ export const NONE = 'none';
 
 export default {
   mounted() {
-    const $table = $('> TABLE', this.$el);
+    const table = this.$el.querySelector('TABLE');
 
     this._onRowClickBound = this.onRowClick.bind(this);
     this._onRowMousedownBound = this.onRowMousedown.bind(this);
     this._onRowContextBound = this.onRowContext.bind(this);
 
-    $table.on('click', '> TBODY > TR', this._onRowClickBound);
-    $table.on('mousedown', '> TBODY > TR', this._onRowMousedownBound);
-    $table.on('contextmenu', '> TBODY > TR', this._onRowContextBound);
+    table.addEventListener('click', this._onRowClickBound);
+    table.addEventListener('mousedown', this._onRowMousedownBound);
+    table.addEventListener('contextmenu', this._onRowContextBound);
   },
 
   beforeDestroy() {
-    const $table = $('> TABLE', this.$el);
+    const table = this.$el.querySelector('TABLE');
 
-    $table.off('click', '> TBODY > TR', this._onRowClickBound);
-    $table.off('mousedown', '> TBODY > TR', this._onRowMousedownBound);
-    $table.off('contextmenu', '> TBODY > TR', this._onRowContextBound);
+    table.removeEventListener('click', this._onRowClickBound);
+    table.removeEventListener('mousedown', this._onRowMousedownBound);
+    table.removeEventListener('contextmenu', this._onRowContextBound);
   },
 
   computed: {
@@ -156,31 +156,31 @@ export default {
     },
 
     onRowMouseEnter(e) {
-      const tr = $(e.target).closest('TR');
+      const tr = e.target.closest('TR');
 
-      if (tr.hasClass('sub-row')) {
-        const trMainRow = tr.prev('TR');
+      if (tr.classList.contains('sub-row')) {
+        const trMainRow = tr.previousElementSibling;
 
-        trMainRow.toggleClass('sub-row-hovered', true);
+        trMainRow.classList.add('sub-row-hovered');
       }
     },
 
     onRowMouseLeave(e) {
-      const tr = $(e.target).closest('TR');
+      const tr = e.target.closest('TR');
 
-      if (tr.hasClass('sub-row')) {
-        const trMainRow = tr.prev('TR');
+      if (tr.classList.contains('sub-row')) {
+        const trMainRow = tr.previousElementSibling;
 
-        trMainRow.toggleClass('sub-row-hovered', false);
+        trMainRow.classList.remove('sub-row-hovered');
       }
     },
 
     nodeForEvent(e) {
       const tagName = e.target.tagName;
-      const tgt = $(e.target);
-      const actionElement = tgt.closest('.actions')[0];
+      const tgt = e.target;
+      const actionElement = tgt.closest('.actions');
 
-      if ( tgt.hasClass('select-all-check') ) {
+      if ( tgt.classList.contains('select-all-check') ) {
         return;
       }
 
@@ -188,31 +188,31 @@ export default {
         if (
           tagName === 'A' ||
           tagName === 'BUTTON' ||
-          tgt.parents('.btn').length
+          getParent(tgt, '.btn')
         ) {
           return;
         }
       }
 
-      const tgtRow = $(e.currentTarget);
+      const tgtRow = e.target.closest('TR');
 
       return this.nodeForRow(tgtRow);
     },
 
     nodeForRow(tgtRow) {
-      if ( tgtRow?.hasClass('separator-row') ) {
+      if ( tgtRow?.classList.contains('separator-row') ) {
         return;
       }
 
-      while ( tgtRow && tgtRow.length && !tgtRow.hasClass('main-row') ) {
-        tgtRow = tgtRow.prev();
+      while ( tgtRow && !tgtRow.classList.contains('main-row') ) {
+        tgtRow = tgtRow.previousElementSibling;
       }
 
-      if ( !tgtRow || !tgtRow.length ) {
+      if ( !tgtRow ) {
         return;
       }
 
-      const nodeId = tgtRow.data('node-id');
+      const nodeId = tgtRow.dataset.nodeId;
 
       if ( !nodeId ) {
         return;
@@ -225,15 +225,15 @@ export default {
 
     async onRowClick(e) {
       const node = this.nodeForEvent(e);
-      const td = $(e.target).closest('TD');
-      const skipSelect = td.hasClass('skip-select');
+      const td = e.target.closest('TD');
+      const skipSelect = td?.classList.contains('skip-select');
 
       if (skipSelect) {
         return;
       }
       const selection = this.selectedRows;
-      const isCheckbox = this.isSelectionCheckbox(e.target) || td.hasClass('row-check');
-      const isExpand = td.hasClass('row-expand');
+      const isCheckbox = this.isSelectionCheckbox(e.target) || td?.classList.contains('row-check');
+      const isExpand = td?.classList.contains('row-expand');
       const content = this.pagedRows;
 
       this.$emit('rowClick', e);
@@ -248,28 +248,30 @@ export default {
         return;
       }
 
-      const actionElement = $(e.target).closest('.actions')[0];
+      const actionElement = e.target.closest('.actions');
 
       if ( actionElement ) {
         let resources = [node];
 
         if ( this.mangleActionResources ) {
-          const i = $('i', actionElement);
+          const i = actionElement.querySelector('i');
 
-          i.removeClass('icon-actions');
-          i.addClass(['icon-spinner', 'icon-spin']);
+          i.classList.remove('icon-actions');
+          i.classList.add('icon-spinner');
+          i.classList.add('icon-spin');
 
           try {
             resources = await this.mangleActionResources(resources);
           } finally {
-            i.removeClass(['icon-spinner', 'icon-spin']);
-            i.addClass('icon-actions');
+            i.classList.remove('icon-spinner');
+            i.classList.remove('icon-spin');
+            i.classList.add('icon-actions');
           }
         }
 
         this.$store.commit(`action-menu/show`, {
           resources,
-          event: e.originalEvent || e, // Handle jQuery event and raw event
+          event: e,
           elem:  actionElement
         });
 
@@ -332,7 +334,7 @@ export default {
 
       this.$store.commit(`action-menu/show`, {
         resources,
-        event: e.originalEvent,
+        event: e,
       });
     },
 
@@ -356,7 +358,7 @@ export default {
     isSelectionCheckbox(element) {
       return element.tagName === 'INPUT' &&
         element.type === 'checkbox' &&
-        ($(element).closest('.selection-checkbox').length > 0);
+        element.closest('.selection-checkbox') !== null;
     },
 
     nodesBetween(a, b) {
@@ -445,7 +447,9 @@ export default {
         }
       });
 
-      this.selectedRows.push(...toAdd);
+      if ( toAdd ) {
+        this.selectedRows.push(...toAdd);
+      }
 
       // Uncheck and check the checkboxes of nodes that have been added/removed
       if (toRemove.length) {
@@ -474,20 +478,24 @@ export default {
 
       if ( id ) {
         // Note: This is looking for the checkbox control for the row
-        const input = $(`div[data-checkbox-ctrl][data-node-id="${ id }"]`);
+        const input = this.$el.querySelector(`div[data-checkbox-ctrl][data-node-id="${ id }"]`);
 
-        if ( input && input.length && !input[0].disabled ) {
-          const label = $(input[0]).find('label');
+        if ( input && !input.disabled ) {
+          const label = input.querySelector('label');
 
           if (label) {
-            label.prop('value', on);
+            label.value = on;
           }
           let tr = input.closest('tr');
           let first = true;
 
-          while ( tr && (first || tr.hasClass('sub-row') ) ) {
-            tr.toggleClass('row-selected', on);
-            tr = tr.next();
+          while ( tr && (first || tr.classList.contains('sub-row') ) ) {
+            if (on) {
+              tr.classList.add('row-selected');
+            } else {
+              tr.classList.remove('row-selected');
+            }
+            tr = tr.nextElementSibling;
             first = false;
           }
         }
@@ -497,9 +505,9 @@ export default {
     select(nodes) {
       nodes.forEach((node) => {
         const id = get(node, this.keyField);
-        const input = $(`label[data-node-id="${ id }"]`);
+        const input = this.$el.querySelector(`label[data-node-id="${ id }"]`);
 
-        input.trigger('click');
+        input.dispatchEvent(new Event('click'));
       });
     },
 

package/components/Wizard.vue

@@ -468,6 +468,9 @@ $spacer: 10px;
   flex-direction: column;
   flex: 1;
   padding: 0;
+  height: 100%;
+  position: relative;
+  justify-content: flex-start;
 }
 
 .header {
@@ -643,9 +646,8 @@ $spacer: 10px;
   flex-direction: column;
 
   &__step {
-    display: flex;
-    flex-direction: column;
     flex: 1;
+    overflow: auto;
   }
 }
 

package/components/__tests__/AsyncButton.test.ts

@@ -1,5 +1,6 @@
 import { mount, Wrapper } from '@vue/test-utils';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton.vue';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: AsyncButton', () => {
   it('should render appropriately with default config', () => {
@@ -7,7 +8,8 @@ describe('component: AsyncButton', () => {
     const mockT = jest.fn().mockReturnValue('some-string');
 
     const wrapper: Wrapper<InstanceType<typeof AsyncButton> & { [key: string]: any }> = mount(AsyncButton, {
-      mocks: {
+      directives: { cleanHtmlDirective },
+      mocks:      {
         $store: {
           getters: {
             'i18n/exists': mockExists,

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/auth/RoleDetailEdit.vue

@@ -648,7 +648,7 @@ export default {
               </div>
             </template>
             <template #columns="props">
-              <div class="columns row">
+              <div class="columns row mr-20">
                 <div :class="ruleClass">
                   <Select
                     :value="props.row.value.verbs"
@@ -713,7 +713,7 @@ export default {
             :mode="mode"
           >
             <template #columns="props">
-              <div class="columns row">
+              <div class="columns row mr-20">
                 <div class="col span-12">
                   <Select
                     v-model="props.row.value"

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/HookOption.vue

@@ -202,16 +202,17 @@ export default {
             :mode="mode"
           />
         </template>
-
-        <button
-          v-if="!isView"
-          type="button"
-          class="btn role-link"
-          :disabled="mode==='view'"
-          @click.stop="removeHeader(index)"
-        >
-          <t k="generic.remove" />
-        </button>
+        <div class="remove">
+          <button
+            v-if="!isView"
+            type="button"
+            class="btn role-link ml0"
+            :disabled="mode==='view'"
+            @click.stop="removeHeader(index)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
       </div>
 
       <div>
@@ -244,5 +245,8 @@ export default {
   .labeled-select {
     min-height: $input-height;
   }
+  .remove BUTTON {
+    padding: 0px;
+  }
 }
 </style>

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);
       }