@rancher/shell 1.2.3 → 2.0.1

package/dialog/DeactivateDriverDialog.vue

@@ -0,0 +1,137 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    Card,
+    AsyncButton,
+    Banner,
+  },
+
+  props: {
+    drivers: {
+      type:     Array,
+      required: true
+    },
+    driverType: {
+      type:     String,
+      required: true
+    }
+  },
+
+  data() {
+    return { errors: [] };
+  },
+  computed: {
+    formattedText() {
+      const namesSliced = this.drivers.map((obj) => obj.nameDisplay).slice(0, 5);
+      const remaining = this.drivers.length - namesSliced.length;
+
+      const plusMore = this.t('drivers.deactivate.andOthers', { count: remaining });
+      const names = resourceNames(namesSliced, plusMore, this.t);
+      const count = remaining || namesSliced.length;
+      const warningDrivers = this.t('drivers.deactivate.warningDrivers', { names, count });
+
+      return this.t('drivers.deactivate.warning', { warningDrivers, count: namesSliced.length });
+    },
+    ...mapGetters({ t: 'i18n/t' }),
+  },
+  methods: {
+    resourceNames,
+    close(buttonDone) {
+      if (buttonDone && typeof buttonDone === 'function') {
+        buttonDone(true);
+      }
+      this.$emit('close');
+    },
+    async apply(buttonDone) {
+      try {
+        await Promise.all(this.drivers.map(
+          (driver) => this.$store.dispatch('rancher/request', {
+            url:    `v3/${ this.driverType }/${ escape(driver.id) }?action=deactivate`,
+            method: 'POST'
+          })
+        ));
+
+        this.close(buttonDone);
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+<template>
+  <Card
+    class="prompt-deactivate"
+    :show-highlight-border="false"
+    :data-testid="'prompt-deactivate'"
+  >
+    <h4
+      slot="title"
+      class="text-default-text"
+    >
+      {{ t('drivers.deactivate.title') }}
+    </h4>
+
+    <template #body>
+      <div class="pl-10 pr-10">
+        <div class="text info mb-10 mt-20">
+          <span v-clean-html="formattedText" />
+        </div>
+        <Banner
+          v-for="(err, i) in errors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <button
+        class="btn role-secondary"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <AsyncButton
+        mode="deactivate"
+        class="btn bg-error ml-10"
+        :data-testid="'deactivate-driver-confirm'"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang='scss'>
+  .prompt-deactivate {
+    &.card-container {
+      box-shadow: none;
+    }
+    #confirm {
+      width: 90%;
+      margin-left: 3px;
+    }
+
+    .actions {
+      text-align: right;
+    }
+
+    .card-actions {
+      display: flex;
+
+      .spacer {
+        flex: 1;
+      }
+    }
+  }
+</style>

package/dialog/RollbackWorkloadDialog.vue

@@ -163,11 +163,11 @@ export default {
       return option.label;
     },
     sizeDialog() {
-      const dialogs = document.getElementsByClassName('v--modal');
+      const dialogs = document.getElementsByClassName('modal-container');
       const width = this.showDiff ? '85%' : '600px';
 
       if (dialogs.length === 1) {
-        dialogs[0].style.setProperty('--prompt-modal-width', width);
+        dialogs[0].style.setProperty('width', width);
       }
     },
     sanitizeYaml(obj, path = '') {

package/dialog/RotateCertificatesDialog.vue

@@ -201,25 +201,4 @@ export default {
       min-width: 260px;
     }
   }
-
-.rotate-modal ::v-deep.v--modal-box{
-  border:none;
-
-  & .card-container{
-    margin: 0;
-
-    & .card-wrap {
-      display:flex;
-      flex-direction:column;
-    }
-
-    & .card-body {
-      flex: 1;
-    }
-
-    & .card-actions{
-      align-self: center
-    };
-  }
-}
 </style>

package/dialog/ScaleMachineDownDialog.vue

@@ -1,6 +1,6 @@
 <script>
 import { CAPI as CAPI_LABELS } from '@shell/config/labels-annotations';
-import { CAPI } from '@shell/config/types';
+import { MANAGEMENT, CAPI } from '@shell/config/types';
 import GenericPrompt from './GenericPrompt';
 
 export default {
@@ -14,30 +14,38 @@ export default {
   },
 
   async fetch() {
-    await Promise.all([
-      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT }),
-      this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
-    ]);
+    if (this.isRke2) {
+      await Promise.all([
+        this.$store.dispatch('management/findAll', { type: CAPI.MACHINE_DEPLOYMENT }),
+        this.$store.dispatch('management/findAll', { type: CAPI.MACHINE })
+      ]);
+    } else {
+      await Promise.all([
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL }),
+        this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE })
+      ]);
+    }
   },
 
   data() {
-    const allToDelete = Array.isArray(this.resources) ? this.resources : [this.resources];
-    const cluster = allToDelete[0].cluster;
+    const isRke2 = this.resources[0].cluster?.isRke2;
+    const cluster = isRke2 ? this.resources[0].cluster : this.resources[0].provisioningCluster;
 
     // Not all machines can be deleted, there must always be at least one left for roles control plane and etcd
     // First ensure that at least one control plane exists... and then check from the remaining machines that at least one etcd exists
     // This isn't optimisied, there may be cases that retaining a single machine with both roles would be better than retaining two with single roles
-    const [ignoredControlPlane, safeControlePlaneMachinesToDelete] = this.deleteType('isControlPlane', allToDelete, cluster);
-    const [ignoredEtcd, safeMachinesToDelete] = this.deleteType('isEtcd', safeControlePlaneMachinesToDelete, cluster);
+    const [ignoredControlPlane, safeControlePlaneMachinesToDelete] = this.deleteType('isControlPlane', this.resources, cluster, isRke2);
+    const [ignoredEtcd, safeMachinesToDelete] = this.deleteType('isEtcd', safeControlePlaneMachinesToDelete, cluster, isRke2);
     const ignored = [ignoredControlPlane, ignoredEtcd].filter((i) => !!i);
 
     return {
       cluster,
-      allToDelete,
+      isRke2,
+      allToDelete: this.resources,
       safeMachinesToDelete,
       ignored,
-      type:   this.$store.getters['type-map/labelFor'](allToDelete[0].schema, allToDelete.length),
-      config: {
+      type:        this.$store.getters['type-map/labelFor'](this.resources[0].schema, this.resources.length),
+      config:      {
         title:       this.t('promptRemove.title'),
         applyMode:   'delete',
         applyAction: this.remove,
@@ -46,7 +54,7 @@ export default {
   },
 
   methods: {
-    deleteType(type, allToDelete, cluster) {
+    deleteType(type, allToDelete, cluster, isRke2) {
       const allToDeleteByType = allToDelete.reduce((res, m) => {
         if (m[type]) {
           res.typed.push(m);
@@ -57,7 +65,8 @@ export default {
         return res;
       }, { typed: [], others: [] });
 
-      const totalTypes = cluster.machines.filter((m) => m[type]).length;
+      const machines = isRke2 ? cluster.machines : cluster.nodes;
+      const totalTypes = machines.filter((m) => m[type]).length;
       const typesToDelete = allToDeleteByType.typed.length;
       // If we're attempting to remove all control plan machines.... ignore one
       const ignoredType = totalTypes - typesToDelete === 0 ? allToDeleteByType.typed.pop() : undefined;
@@ -67,6 +76,14 @@ export default {
     },
 
     async remove() {
+      if (!this.isRke2) {
+        await Promise.all(this.safeMachinesToDelete.map((node) => {
+          return node.norman?.doAction('scaledown');
+        }));
+
+        return;
+      }
+
       // Group machines into pools
       const poolInfo = this.safeMachinesToDelete.reduce((res, m) => {
         res.set(m.pool, res.get(m.pool) || []);
@@ -103,7 +120,7 @@ export default {
     <template slot="body">
       <div class="pl-10 pr-10 mt-20 mb-20 body">
         <div v-if="allToDelete.length === 1">
-          {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ safeMachinesToDelete[0].name }}</b>
+          {{ t('promptRemove.attemptingToRemove', { type }) }} <b>{{ safeMachinesToDelete[0].nameDisplay }}</b>
         </div>
         <div v-else>
           {{ t('promptScaleMachineDown.attemptingToRemove', { type, count: allToDelete.length }, true) }}
@@ -115,8 +132,8 @@ export default {
           <span class="mb-20">{{ t('promptScaleMachineDown.retainedMachine1') }}</span>
           <span
             v-for="i in ignored"
-            :key="i.name"
-            v-clean-html="t('promptScaleMachineDown.retainedMachine2', { name: i.name }, true)"
+            :key="i.nameDisplay"
+            v-clean-html="t('promptScaleMachineDown.retainedMachine2', { name: i.nameDisplay }, true)"
           />
         </div>
       </div>

package/directives/clean-html.js

@@ -0,0 +1,15 @@
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+const cleanHtmlDirective = {
+  inserted(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  },
+  componentUpdated(el, binding) {
+    el.innerHTML = purifyHTML(binding.value);
+  },
+  unbind(el) {
+    el.innerHTML = '';
+  }
+};
+
+export default cleanHtmlDirective;

package/directives/clean-tooltip.js

@@ -0,0 +1,32 @@
+import { VTooltip } from 'v-tooltip';
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+function purifyContent(value) {
+  const type = typeof value;
+
+  if (type === 'string') {
+    return purifyHTML(value);
+  } else if (value && type === 'object' && typeof value.content === 'string') {
+    return { ...value, content: purifyHTML(value.content) };
+  } else {
+    return value;
+  }
+}
+
+function bind(el, { value, oldValue, modifiers }) {
+  const purifiedValue = purifyContent(value);
+
+  VTooltip.bind(
+    el,
+    {
+      value: purifiedValue, oldValue, modifiers
+    });
+}
+
+const cleanTooltipDirective = {
+  ...VTooltip,
+  bind,
+  update: bind,
+};
+
+export default cleanTooltipDirective;

package/directives/focus.js

@@ -0,0 +1,41 @@
+const getElement = (vnode) => {
+  const { componentInstance, componentOptions: { tag } } = vnode;
+
+  if (tag === 'LabeledInput') {
+    return componentInstance.$refs.value;
+  }
+
+  if (tag === 'LabeledSelect') {
+    componentInstance.shouldOpen = false;
+
+    return componentInstance.$refs['select-input'].$refs.search;
+  }
+
+  if (tag === 'SelectPrincipal') {
+    const labeledSelect = componentInstance.$refs['labeled-select'];
+
+    labeledSelect.shouldOpen = false;
+
+    return labeledSelect.$refs['select-input'].$refs.search;
+  }
+
+  if (tag === 'TextAreaAutoGrow') {
+    return componentInstance.$refs.ta;
+  }
+
+  if (tag === 'Password') {
+    return componentInstance.$refs.input.$refs.value;
+  }
+};
+
+function inserted(_el, _binding, vnode) {
+  const element = getElement(vnode);
+
+  if (element) {
+    element.focus();
+  }
+}
+
+const focusDirective = { inserted };
+
+export default focusDirective;

package/directives/int-number.js

@@ -0,0 +1,21 @@
+function inserted(el) {
+  el.addEventListener('keypress', (e) => {
+    e = e || window.event;
+    const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
+    const inputChar = String.fromCharCode(charcode);
+
+    // Allow digits, minus sign at the beginning, and Ctrl key combinations
+    const re = /^-?\d*$/;
+
+    if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
+      if (e.preventDefault) {
+        e.preventDefault();
+      } else {
+        e.returnValue = false;
+      }
+    }
+  });
+}
+const intNumberDirective = { inserted };
+
+export default intNumberDirective;

package/directives/positive-int-number.js

@@ -0,0 +1,19 @@
+function inserted(el) {
+  el.addEventListener('keypress', (e) => {
+    e = e || window.event;
+    const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
+    const re = /^\d+$/; // Use regex to match positive numbers
+
+    if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+      if (e.preventDefault) {
+        e.preventDefault();
+      } else {
+        e.returnValue = false;
+      }
+    }
+  });
+}
+
+const positiveIntNumberDirective = { inserted };
+
+export default positiveIntNumberDirective;

package/directives/trim-whitespace.js

@@ -0,0 +1,19 @@
+function trimWhitespace(el, dir) {
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE ) {
+      const trimmed = node.data.trim();
+
+      if ( trimmed === '') {
+        node.remove();
+      } else if ( trimmed !== node.data ) {
+        node.data = trimmed;
+      }
+    }
+  }
+}
+const trimWhitespaceDirective = {
+  inserted:         trimWhitespace,
+  componentUpdated: trimWhitespace
+};
+
+export default trimWhitespaceDirective;

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -8,7 +8,8 @@ localVue.use(Vuex);
 
 describe('view: fleet.cattle.io.gitrepo should', () => {
   const mockStore = {
-    getters: {
+    dispatch: jest.fn(),
+    getters:  {
       'i18n/t':                  (text: string) => text,
       t:                         (text: string) => text,
       currentStore:              () => 'current_store',
@@ -27,7 +28,7 @@ describe('view: fleet.cattle.io.gitrepo should', () => {
           return false;
         }
       }
-    }
+    },
   };
   const values = {
     metadata: { namespace: 'test' }, spec: { template: {}, correctDrift: { enabled: false } }, targetInfo: { mode: 'all' },

package/edit/__tests__/kontainerDriver.test.ts

@@ -0,0 +1,107 @@
+/* eslint-disable jest/no-hooks */
+import { mount } from '@vue/test-utils';
+import KontainerDriverEdit from '@shell/edit/kontainerDriver.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('view: kontainerdriver should', () => {
+  const url = 'http://test.com';
+  let wrapper: any;
+  const requiredSetup = () => ({
+    mocks: {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
+        },
+        dispatch: jest.fn()
+      },
+      $route:  { query: { AS: '' } },
+      $router: { applyQuery: jest.fn() },
+    },
+    propsData: {
+      value: {
+        spec: {
+          active:           true,
+          checksum:         '',
+          url:              '',
+          uiUrl:            '',
+          whitelistDomains: []
+        }
+      },
+      mode: _CREATE,
+    },
+  });
+
+  beforeEach(() => {
+    wrapper = mount(KontainerDriverEdit, { ...requiredSetup() });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('have "Create" button disabled before fields are filled in', () => {
+    const saveButton = wrapper.find('[data-testid="kontainer-driver-edit-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(true);
+  });
+
+  it('have "Create" button enabled when required fields are filled in', async() => {
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
+    const saveButton = wrapper.find('[data-testid="kontainer-driver-edit-save"]').element as HTMLInputElement;
+
+    urlField.setValue(url);
+
+    await wrapper.vm.$nextTick();
+
+    expect(saveButton.disabled).toBe(false);
+  });
+
+  it('have "Create" button enabled and disabled depending on validation results', async() => {
+    const urlField = wrapper.find('[data-testid="driver-create-url-field"]').find('input');
+    const uiurlField = wrapper.find('[data-testid="driver-create-uiurl-field"]').find('input');
+    const checksumField = wrapper.find('[data-testid="driver-create-checksum-field"]').find('input');
+    const saveButton = wrapper.find('[data-testid="kontainer-driver-edit-save"]').element as HTMLInputElement;
+
+    const testCases = [
+      {
+        url:      '1111',
+        uiurl:    'http://test.com',
+        checksum: 'aaaaaBBBBdddd',
+        result:   true
+      },
+      {
+        url:      'http://test.com',
+        uiurl:    '1111',
+        checksum: 'aaaaaBBBBdddd',
+        result:   true
+      },
+      {
+        url:      'http://test.com',
+        uiurl:    'http://test.com',
+        checksum: '!!!',
+        result:   true
+      },
+      {
+        url:      'http://test.com',
+        uiurl:    'http://test.com',
+        checksum: 'aaaaaBBBBdddd',
+        result:   false
+      }
+    ];
+
+    for (const testCase of testCases) {
+      urlField.setValue(testCase.url);
+      await wrapper.vm.$nextTick();
+      uiurlField.setValue(testCase.uiurl);
+      await wrapper.vm.$nextTick();
+      checksumField.setValue(testCase.checksum);
+      await wrapper.vm.$nextTick();
+
+      expect(saveButton.disabled).toBe(testCase.result);
+    }
+  });
+});

package/edit/__tests__/management.cattle.io.clusterroletemplatebinding.test.ts

@@ -25,7 +25,18 @@ describe('view: management.cattle.io.clusterroletemplatebinding should', () => {
           'i18n/t':                  (val) => val,
           'i18n/exists':             jest.fn(),
         },
-        dispatch: { 'management/findAll': () => ([]) }
+        dispatch: jest.fn((action, payload) => {
+          const actions = {
+            'management/findAll':              () => [],
+            'cru-resource/setCreateNamespace': jest.fn(),
+          };
+
+          if (actions[action]) {
+            return actions[action](payload);
+          }
+
+          throw new Error(`Unknown action: ${ action }`);
+        }),
       },
       $fetchState: { pending: false },
       $route:      { query: { AS: '' } },

package/edit/__tests__/management.cattle.io.setting.test.ts

@@ -13,7 +13,8 @@ describe('view: management.cattle.io.setting should', () => {
           'current_store/all':       jest.fn(),
           'i18n/t':                  jest.fn(),
           'i18n/exists':             jest.fn(),
-        }
+        },
+        dispatch: jest.fn(),
       },
       $route:  { query: { AS: '' } },
       $router: { applyQuery: jest.fn() },

package/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import FormValidation from '@shell/mixins/form-validation';
 import Monitoring from '@shell/edit/monitoring.coreos.com.prometheusrule/index.vue';
 import { _EDIT } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('edit: management.cattle.io.setting should', () => {
   const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
@@ -11,7 +10,8 @@ describe('edit: management.cattle.io.setting should', () => {
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
     mocks: {
       $store: {
-        getters: {
+        dispatch: jest.fn(),
+        getters:  {
           currentStore:              () => 'current_store',
           'current_store/schemaFor': jest.fn(),
           'current_store/all':       jest.fn(),
@@ -36,7 +36,6 @@ describe('edit: management.cattle.io.setting should', () => {
         value:    { value: 'anything' },
         name:     ''
       },
-      directives: { cleanHtmlDirective },
       ...requiredSetup()
     });