@rancher/shell 0.5.3 → 2.0.0

package/dialog/DeactivateDriverDialog.vue

@@ -0,0 +1,118 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+
+export default {
+  components: {
+    Card,
+    AsyncButton,
+    Banner,
+  },
+
+  props: {
+    url: {
+      type:    String,
+      default: null,
+    },
+    name: {
+      type:    String,
+      default: null,
+    }
+  },
+
+  data() {
+    return { errors: [] };
+  },
+  methods: {
+    close(buttonDone) {
+      if (buttonDone && typeof buttonDone === 'function') {
+        buttonDone(true);
+      }
+      this.$emit('close');
+    },
+    async apply(buttonDone) {
+      try {
+        await this.$store.dispatch('rancher/request', {
+          url:    this.url,
+          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="t('drivers.deactivate.warning', {name})" />
+        </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/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()
     });
 

package/edit/__tests__/nodeDriver.test.ts

@@ -0,0 +1,107 @@
+/* eslint-disable jest/no-hooks */
+import { mount } from '@vue/test-utils';
+import NodeDriverEdit from '@shell/edit/nodeDriver.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('view: nodedriver 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(NodeDriverEdit, { ...requiredSetup() });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('have "Create" button disabled before fields are filled in', () => {
+    const saveButton = wrapper.find('[data-testid="node-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="node-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="node-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__/service.test.ts

@@ -1,8 +1,5 @@
 import { shallowMount, Wrapper } from '@vue/test-utils';
-
 import { _CLONE } from '@shell/config/query-params';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
 import ServicePage from '@shell/edit/service.vue';
 
 const createEditViewMock = {
@@ -53,8 +50,7 @@ describe('service edit', () => {
             }
           }
         },
-        computed:   { provisioningCluster: jest.fn() },
-        directives: { cleanHtmlDirective },
+        computed: { provisioningCluster: jest.fn() },
       }
     );
   };

package/edit/__tests__/ui.cattle.io.navlink.test.ts

@@ -13,12 +13,14 @@ describe('view: ui.cattle.io.navlink 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(),
           'i18n/t':                  (val) => val,
           'i18n/exists':             jest.fn(),
+          'store/customisation/':    jest.fn()
         }
       },
       $route:  { query: { AS: '' } },

package/edit/auth/AuthProviderWarningBanners.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Banner } from '@components/Banner';
+
+export default defineComponent({
+  name: 'AuthProviderWarningBanners',
+
+  components: { Banner },
+
+  props: {
+    tArgs: {
+      type:     Object,
+      required: true,
+      default:  () => { },
+    }
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Banner
+      :label="t('authConfig.stateBanner.disabled', tArgs)"
+      color="warning"
+      data-testid="auth-provider-disabled-warning-banner"
+    />
+    <Banner
+      color="warning"
+      data-testid="auth-provider-admin-permissions-warning-banner"
+    >
+      <span v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+    </Banner>
+  </div>
+</template>