@rancher/shell 3.0.4 → 3.0.5-rc.2

package/{components/nav/Jump.vue → dialog/SearchDialog.vue}

@@ -6,7 +6,7 @@ import { BOTH, TYPE_MODES } from '@shell/store/type-map';
 import { COUNT } from '@shell/config/types';
 
 export default {
-  emits: ['closeSearch'],
+  emits: ['close'],
 
   components: { Group },
 
@@ -41,7 +41,7 @@ export default {
       const allTypes = allTypesByMode[TYPE_MODES.ALL];
       const out = this.$store.getters['type-map/getTree'](productId, TYPE_MODES.ALL, allTypes, clusterId, BOTH, null, this.value);
 
-      // Suplement the output with count info. Usualy the `Type` component would handle this individualy... but scales real bad so give it
+      // Supplement the output with count info. Usually the `Type` component would handle this individually... but scales real bad so give it
       // some help
       const counts = this.$store.getters[`${ product.inStore }/all`](COUNT)?.[0]?.counts || {};
 
@@ -77,16 +77,22 @@ export default {
     >
       {{ t('nav.resourceSearch.filteringDescription') }}
     </p>
-    <input
-      ref="input"
-      v-model="value"
-      :placeholder="t('nav.resourceSearch.placeholder')"
-      class="search"
-      role="textbox"
-      :aria-label="t('nav.resourceSearch.label')"
-      aria-describedby="describe-filter-resource-search"
-      @keyup.esc="$emit('closeSearch')"
-    >
+    <div class="dialog-title">
+      <div>{{ t('nav.resourceSearch.label') }}</div>
+      <p>{{ t('nav.resourceSearch.prompt') }}</p>
+    </div>
+    <div class="search-box">
+      <input
+        ref="input"
+        v-model="value"
+        :placeholder="t('nav.resourceSearch.placeholder')"
+        class="search"
+        role="textbox"
+        :aria-label="t('nav.resourceSearch.label')"
+        aria-describedby="describe-filter-resource-search"
+        @keyup.esc="$emit('close')"
+      >
+    </div>
     <div class="results">
       <div
         v-for="g in groups"
@@ -100,7 +106,7 @@ export default {
           :group="g"
           :can-collapse="false"
           :fixed-open="true"
-          @close="$emit('closeSearch')"
+          @close="$emit('close')"
         >
           <template #accordion>
             <h6>{{ g.label }}</h6>
@@ -119,17 +125,31 @@ export default {
     box-shadow: none;
   }
 
+  .search-box {
+    margin: 8px;
+  }
+
   .search:focus-visible {
     outline-offset: -2px;
   }
 
+  .dialog-title {
+    padding: 8px;
+
+    > div {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 8px 0;
+    }
+  }
+
   .results {
     margin-top: -1px;
     overflow-y: auto;
     padding: 10px;
     color: var(--dropdown-text);
     background-color: var(--dropdown-bg);
-    border: 1px solid var(--dropdown-border);
+    border-top: 1px solid var(--dropdown-border);
     height: 75vh;
   }
 </style>

package/{pages/c/_cluster/uiplugins/UninstallDialog.vue → dialog/UninstallExtensionDialog.vue}

@@ -2,47 +2,70 @@
 import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
 import { CATALOG } from '@shell/config/types';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 
 export default {
-  emits: ['closed', 'update'],
-
-  components: {
-    AsyncButton,
-    AppModal,
+  emits: ['close'],
+
+  components: { AsyncButton },
+
+  props: {
+    /**
+     * Plugin object
+     */
+    plugin: {
+      type:     Object,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback to update install status on extensions main screen
+     */
+    updateStatus: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    /**
+     * Callback when modal is closed
+     */
+    closed: {
+      type:     Function,
+      default:  () => {},
+      required: true
+    },
+    resources: {
+      type:    Array,
+      default: () => []
+    },
+    registerBackgroundClosing: {
+      type:    Function,
+      default: () => {}
+    }
   },
 
   data() {
-    return {
-      plugin: undefined, busy: false, showModal: false
-    };
+    return { busy: false };
   },
 
-  computed: {
-    ...mapGetters({ allCharts: 'catalog/charts' }),
-    returnFocusSelector() {
-      return `[data-testid="extension-card-uninstall-btn-${ this.plugin?.name }"]`;
-    }
-  },
+  computed: { ...mapGetters({ allCharts: 'catalog/charts' }) },
 
   methods: {
     showDialog(plugin) {
       this.plugin = plugin;
       this.busy = false;
-      this.showModal = true;
     },
     closeDialog(result) {
-      this.showModal = false;
-      this.$emit('closed', result);
+      this.closed(result);
+      this.$emit('close');
     },
     async uninstall() {
       this.busy = true;
 
       const plugin = this.plugin;
 
-      this.$emit('update', plugin.name, 'uninstall');
+      this.updateStatus(plugin.name, 'uninstall');
 
       // Delete the CR if this is a developer plugin (there is no Helm App, so need to remove the CRD ourselves)
       if (plugin.uiplugin?.isDeveloper) {
@@ -78,47 +101,33 @@ export default {
 </script>
 
 <template>
-  <app-modal
-    v-if="showModal"
-    name="uninstallPluginDialog"
-    height="auto"
-    :scrollable="true"
-    :trigger-focus-trap="true"
-    :return-focus-selector="returnFocusSelector"
-    :return-focus-first-iterable-node-selector="'#extensions-main-page'"
-    @close="closeDialog(false)"
-  >
-    <div
-      v-if="plugin"
-      class="plugin-install-dialog"
-    >
-      <h4 class="mt-10">
-        {{ t('plugins.uninstall.title', { name: plugin.label }) }}
-      </h4>
-      <div class="mt-10 dialog-panel">
-        <div class="dialog-info">
-          <p>
-            {{ t('plugins.uninstall.prompt') }}
-          </p>
-        </div>
-        <div class="dialog-buttons">
-          <button
-            :disabled="busy"
-            class="btn role-secondary"
-            data-testid="uninstall-ext-modal-cancel-btn"
-            @click="closeDialog(false)"
-          >
-            {{ t('generic.cancel') }}
-          </button>
-          <AsyncButton
-            mode="uninstall"
-            data-testid="uninstall-ext-modal-uninstall-btn"
-            @click="uninstall()"
-          />
-        </div>
+  <div class="plugin-install-dialog">
+    <h4 class="mt-10">
+      {{ t('plugins.uninstall.title', { name: plugin?.label }) }}
+    </h4>
+    <div class="mt-10 dialog-panel">
+      <div class="dialog-info">
+        <p>
+          {{ t('plugins.uninstall.prompt') }}
+        </p>
+      </div>
+      <div class="dialog-buttons">
+        <button
+          :disabled="busy"
+          class="btn role-secondary"
+          data-testid="uninstall-ext-modal-cancel-btn"
+          @click="closeDialog(false)"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+        <AsyncButton
+          mode="uninstall"
+          data-testid="uninstall-ext-modal-uninstall-btn"
+          @click="uninstall()"
+        />
       </div>
     </div>
-  </app-modal>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/dialog/WechatDialog.vue

@@ -0,0 +1,57 @@
+<script>
+// i18n-ignore footer.wechat.modalText, footer.wechat.modalText2
+export default {
+  emits: ['close'],
+
+  name: 'WechatModal',
+
+  methods: {
+    close() {
+      this.$emit('close');
+    }
+  },
+};
+</script>
+
+<template>
+  <div class="wechat-modal">
+    <h1>{{ t('footer.wechat.modalText') }}</h1>
+    <h1>{{ t('footer.wechat.modalText2') }}</h1>
+    <div class="qr-img" />
+    <div>
+      <button
+        class="btn role-primary"
+        tabindex="0"
+        :aria-label="t('generic.close')"
+        role="button"
+        @click="close"
+        @keydown.enter.stop
+      >
+        {{ t('generic.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .wechat-modal {
+    margin: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    margin: 20px auto 0;
+  }
+
+  .qr-img {
+    background-image: url('../assets/images/wechat-qr-code.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    height: 128px;
+    width: 128px;
+    margin: 15px auto 10px;
+  }
+</style>

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

@@ -2,14 +2,23 @@ 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 { createStore } from 'vuex';
 
 describe('edit: management.cattle.io.setting should', () => {
   const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
   const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
+  const store = createStore({
+    getters: {
+      namespaces:                () => () => ({}),
+      currentStore:              () => () => 'current_store',
+      'current_store/schemaFor': () => jest.fn()
+    }
+  });
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
     global: {
-      mocks: {
+      provide: { store },
+      mocks:   {
         $store: {
           dispatch: jest.fn(),
           getters:  {
@@ -35,8 +44,12 @@ describe('edit: management.cattle.io.setting should', () => {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
-        value:    { value: 'anything' },
-        name:     ''
+        value:    {
+          setAnnotation: jest.fn(),
+          value:         'anything',
+          metadata:      {},
+        },
+        name: ''
       },
       ...requiredSetup()
     });

package/edit/auth/__tests__/oidc.test.ts

@@ -32,151 +32,194 @@ const mockModel = {
 };
 
 describe('oidc.vue', () => {
-  let wrapper: VueWrapper<any, any>;
-  const requiredSetup = () => ({
-    data() {
-      return {
-        isEnabling:     false,
-        editConfig:     false,
-        model:          { ...mockModel },
-        serverSetting:  null,
-        errors:         [],
-        originalModel:  null,
-        principals:     [],
-        authConfigName: 'oidc',
-      } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
-    },
-    global: {
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            currentStore:              () => 'current_store',
-            'current_store/schemaFor': jest.fn(),
-            'current_store/all':       jest.fn(),
-            'i18n/t':                  (val: string) => val,
-            'i18n/exists':             jest.fn(),
+  describe('given default valid values', () => {
+    let wrapper: VueWrapper<any, any>;
+    const requiredSetup = () => ({
+      data() {
+        return {
+          isEnabling:     false,
+          editConfig:     false,
+          model:          { ...mockModel },
+          serverSetting:  null,
+          errors:         [],
+          originalModel:  null,
+          principals:     [],
+          authConfigName: 'oidc',
+        } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
+      },
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $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()
           },
-          dispatch: jest.fn()
+          $route:  { query: { AS: '' }, params: { id: 'oicd' } },
+          $router: { applyQuery: jest.fn() },
         },
-        $route:  { query: { AS: '' }, params: { id: 'oicd' } },
-        $router: { applyQuery: jest.fn() },
       },
-    },
-    props: {
-      value: { applicationSecret: '' },
-      mode:  _EDIT,
-    },
-  });
+      props: {
+        value: { applicationSecret: '' },
+        mode:  _EDIT,
+      },
+    });
 
-  beforeEach(() => {
-    wrapper = mount(oidc, { ...requiredSetup() });
-  });
-  afterEach(() => {
-    wrapper.unmount();
-  });
+    beforeEach(() => {
+      wrapper = mount(oidc, { ...requiredSetup() });
+    });
 
-  it('have "Create" button enabled when provider is enabled and not editing config', async() => {
-    wrapper.setData({ model: { enabled: true }, editConfig: false });
-    await nextTick();
+    afterEach(() => {
+      wrapper.unmount();
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button disabled', () => {
+      it('given missing Auth endpoint URL', () => {
+        wrapper.vm.model.authEndpoint = '';
+        wrapper.vm.model.scopes = 'openid profile email'; // set scope to be sure
+        wrapper.vm.oidcScope = ['openid', 'profile', 'email']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config before fields are filled in', async() => {
-    wrapper.setData({ model: {}, editConfig: true });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('given missing required basic scopes', () => {
+        wrapper.vm.model.authEndpoint = 'whatever'; // set auth endpoint to be sure
+        wrapper.vm.model.scopes = 'something else'; // set wrong scope
+        wrapper.vm.oidcScope = ['something', 'else']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config after required fields and scope is missing openid', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config before fields are filled in', async() => {
+        wrapper.setData({ model: {}, editConfig: true });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is disabled and required fields are filled in', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config after required fields and scope is missing openid', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is enabled and required fields are filled in', async() => {
-    wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button enabled', () => {
+      it('when customEndpoint is disabled and required fields are filled in', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(false);
+      });
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
+      it('when customEndpoint is enabled and required fields are filled in', async() => {
+        wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    wrapper.setData({ oidcUrls: { realm: validRealm } });
-    await nextTick();
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
-  });
+        expect(saveButton.disabled).toBe(false);
+      });
 
-  it('`groupSearchEnabled` defaults to false', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+      it('when provider is enabled and not editing config', async() => {
+        wrapper.setData({ model: { enabled: true }, editConfig: false });
+        await nextTick();
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
 
-    await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+    it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
+      wrapper.setData({ oidcUrls: { url: validUrl } });
+      await nextTick();
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
-  });
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
 
-  it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
-    wrapper.vm.model.id = 'keycloakoidc';
-    const newUrl = 'whatever';
+      wrapper.setData({ oidcUrls: { realm: validRealm } });
+      await nextTick();
 
-    await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
-    await wrapper.vm.$nextTick();
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
+    });
 
-    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
-    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+    it('`groupSearchEnabled` defaults to false', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
 
-    expect(issuer).toBe(`${ newUrl }/realms/`);
-    expect(endpoint).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
-  });
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
+    });
+
+    it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+
+      await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
+    });
+
+    it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+
+      await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
+      await wrapper.vm.$nextTick();
+
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+      expect(issuerValue).toBe(`${ newUrl }/realms/`);
+      expect(endpointValue).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
+    });
+
+    it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
+      const newRealm = 'newRealm';
+      const oldUrl = 'oldUrl';
+
+      wrapper.vm.model.id = 'keycloakoidc';
+      wrapper.vm.oidcUrls.url = oldUrl;
+
+      await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
+      await wrapper.vm.$nextTick();
 
-  it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
-    const newRealm = 'newRealm';
-    const oldUrl = 'oldUrl';
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
 
-    wrapper.vm.model.id = 'keycloakoidc';
-    wrapper.vm.oidcUrls.url = oldUrl;
+      expect(issuerValue).toBe(`${ oldUrl }/realms/${ newRealm }`);
+      expect(endpointValue).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+    });
 
-    await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
-    await wrapper.vm.$nextTick();
+    it('clear URL should clear issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+      const urlInput = wrapper.find(`[data-testid="oidc-url"]`);
 
-    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
-    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+      await urlInput.setValue(newUrl);
+      await wrapper.vm.$nextTick();
+      await urlInput.setValue('');
+      await wrapper.vm.$nextTick();
+      const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
 
-    expect(issuer).toBe(`${ oldUrl }/realms/${ newRealm }`);
-    expect(endpoint).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+      expect(issuer).toBe('');
+      expect(endpoint).toBe('');
+    });
   });
 });