@rancher/shell 0.5.3 → 2.0.0

package/components/__tests__/EtcdInfoBanner.test.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import EtcdInfoBanner from '../EtcdInfoBanner.vue';
+import { CATALOG } from '@shell/config/types';
+
+describe('component: EtcdInfoBanner', () => {
+  it('should perform fetch correctly', async() => {
+    const mockCanList = jest.fn((resource: string) => true);
+    const mockDispatch = jest.fn((resource: string, param: any) => ({ data: { result: [] } }));
+
+    const wrapper = mount(
+      EtcdInfoBanner,
+      {
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/t':          () => 'Test',
+              currentProduct:    { inStore: 'cluster' },
+              'cluster/canList': mockCanList,
+              currentCluster:    { id: 'local' },
+            },
+            dispatch: mockDispatch,
+          },
+          $fetchState: { pending: false }
+        }
+      });
+
+    await (EtcdInfoBanner as any).fetch.call(wrapper.vm);
+
+    // canList should have been called once
+    expect(mockCanList.mock.calls).toHaveLength(1);
+    expect(mockCanList.mock.calls[0][0]).toBe(CATALOG.APP);
+
+    // check that the if in the find method worked correctly
+    expect(mockDispatch.mock.calls).toHaveLength(4);
+    expect(mockDispatch.mock.calls[0][0]).toBe('cluster/find');
+  });
+});

package/components/__tests__/FixedBanner.test.ts

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import FixedBanner from '@shell/components/FixedBanner.vue';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
+import { SETTING } from '@shell/config/settings';
 
 const SETTING_NO_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":null,"button":null},"showHeader":"true","showFooter":"true","showConsent":"false"}' };
 const SETTING_WITH_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME CONSENT TEXT" ,"button": "some-button-label"},"showHeader":"true","showFooter":"true","showConsent":"true"}' };
@@ -30,13 +31,9 @@ describe('component: FixedBanner', () => {
   it('should render HEADER fixed banner correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { header: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_NO_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -54,13 +51,9 @@ describe('component: FixedBanner', () => {
   it('should render FOOTER fixed banner, as text array (newline char), correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { footer: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_NO_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -78,13 +71,9 @@ describe('component: FixedBanner', () => {
   it('should render CONSENT as a DIALOG correctly', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { consent: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_WITH_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
 
     expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
@@ -109,13 +98,9 @@ describe('component: FixedBanner', () => {
   it('clicking dialog button should hide dialog', async() => {
     const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
       propsData: { consent: true },
-      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+      mocks:     { $store: { getters: { 'management/byId': jest.fn(), 'management/all': () => [{ id: SETTING.BANNERS, ...SETTING_WITH_CONSENT }] } } }
     });
 
-    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
-
-    await wrapper.vm.$nextTick();
-
     const buttonDialog = wrapper.find('.banner-dialog button');
     const spy = jest.spyOn(wrapper.vm, 'hideDialog');
 

package/components/__tests__/NamespaceFilter.test.ts

@@ -10,8 +10,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $fetchState: { pending: false } },
-        directives: { shortkey: () => jest.fn() }
+        mocks: { $fetchState: { pending: false } }
       });
       const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
 
@@ -29,8 +28,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
 
@@ -48,8 +46,7 @@ describe('component: NamespaceFilter', () => {
             kind:  'special',
           }]),
         },
-        mocks:      { $fetchState: { pending: false } },
-        directives: { shortkey: () => jest.fn() }
+        mocks: { $fetchState: { pending: false } }
       });
 
       const element = wrapper.find(`[data-testid="namespaces-values-label"]`).element.textContent;
@@ -65,8 +62,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [{ label: text }],
         },
-        directives: { shortkey: () => jest.fn() },
-        mocks:      {
+        mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
         },
@@ -107,8 +103,7 @@ describe('component: NamespaceFilter', () => {
             },
           },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -128,8 +123,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
@@ -150,8 +144,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
@@ -171,8 +164,7 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       (wrapper.vm as any).cachedFiltered = [
@@ -213,8 +205,7 @@ describe('component: NamespaceFilter', () => {
             dispatch: action
           },
           $fetchState: { pending: false }
-        },
-        directives: { shortkey: () => jest.fn() }
+        }
       });
 
       (wrapper.vm as any).cachedFiltered = [

package/components/__tests__/TabTitle.test.ts

@@ -0,0 +1,129 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import TabTitle from '@shell/components/TabTitle.vue';
+import * as privateLabel from '@shell/config/private-label';
+import * as title from '@shell/utils/title';
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('component: TabTitle', () => {
+  function createMocks(): any {
+    const mocks = {
+      isExplorer:     false,
+      isHarvester:    false,
+      currentCluster: {
+        nameDisplay: 'Cluster',
+        isHarvester: false
+      },
+      currentProduct:      { name: 'Product' },
+      withFallback:        null,
+      vendor:              'Vendor',
+      child:               'Child',
+      updatePageTitleArgs: null
+    };
+
+    privateLabel.getVendor = () => mocks.vendor;
+    title.updatePageTitle = (...args: any[]) => (mocks.updatePageTitleArgs = args);
+
+    return mocks;
+  }
+
+  function mockStore(mocks: any) {
+    return new Vuex.Store({
+      getters: {
+        isExplorer() {
+          return mocks.isExplorer;
+        },
+        currentCluster() {
+          return mocks.currentCluster;
+        },
+        currentProduct() {
+          return mocks.currentProduct;
+        },
+        'i18n/withFallback'() {
+          return () => mocks.withFallback;
+        }
+      },
+    });
+  }
+
+  it('should set a title including vendor, cluster and child(default slot) for explorer cluster', () => {
+    const mocks = createMocks();
+
+    mocks.isExplorer = true;
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+
+  it('should set a title including vendor, cluster and child(default slot) for harvester cluster', () => {
+    const mocks = createMocks();
+
+    mocks.currentCluster.isHarvester = true;
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+
+  it('should set a title including vendor and child(default slot) for product', () => {
+    const mocks = createMocks();
+
+    mocks.currentCluster = null;
+    mocks.withFallback = 'product';
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.vendor, mocks.withFallback, mocks.child]);
+  });
+
+  it('should call console error when not passed a string as a child', () => {
+    const mocks = createMocks();
+    const store = mockStore(mocks);
+
+    global.console = { error: jest.fn() };
+
+    shallowMount(TabTitle, {
+      slots: { }, store, localVue
+    });
+
+    expect(console.error).toHaveBeenCalledWith('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
+  });
+
+  it('should only show child', () => {
+    const mocks = createMocks();
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, propsData: { breadcrumb: false }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.child]);
+  });
+
+  it('should exclude vendor', () => {
+    const mocks = createMocks();
+
+    mocks.isExplorer = true;
+
+    const store = mockStore(mocks);
+
+    shallowMount(TabTitle, {
+      slots: { default: mocks.child }, propsData: { includeVendor: false }, store, localVue
+    });
+
+    expect(mocks.updatePageTitleArgs).toStrictEqual([mocks.currentCluster.nameDisplay, mocks.child]);
+  });
+});

package/components/auth/AzureWarning.vue

@@ -56,9 +56,9 @@ export default {
   >
     <p>
       {{ t('authConfig.azuread.updateEndpoint.banner.message') }}
-      <n-link :to="authConfigRoute">
+      <router-link :to="authConfigRoute">
         {{ t('authConfig.azuread.updateEndpoint.banner.linkText') }}
-      </n-link>
+      </router-link>
     </p>
   </div>
 </template>

package/components/auth/RoleDetailEdit.vue

@@ -230,6 +230,16 @@ export default {
             apiGroupLabel = scope.includes('cluster') ? labelForNoApiGroup : labelForNamespacedResourcesWithNoApiGroup;
             apiGroupValue = '';
           }
+
+          if (apiGroup === 'neuvectorApi') {
+            // Some NeuVector resources are namespaced, in which case they go under a different heading
+            const labelForClusterScoped = this.t('rbac.roletemplate.tabs.grantResources.neuvector.labelClusterScoped');
+            const labelForNamespaceScoped = this.t('rbac.roletemplate.tabs.grantResources.neuvector.labelNamespaceScoped');
+
+            apiGroupLabel = scope.includes('cluster') ? labelForClusterScoped : labelForNamespaceScoped;
+            apiGroupValue = 'api.neuvector.com';
+          }
+
           options.push({
             kind:      'group',
             optionKey: apiGroupLabel,

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -24,8 +24,9 @@ describe('component: RoleDetailEdit', () => {
         $fetchState: { pending: false },
         $route:      { name: 'anything' },
         $store:      {
-          getters: {
-            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn()
+          dispatch: jest.fn(),
+          getters:  {
+            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn(), 'store/customisation/': jest.fn()
           }
         }
       },

package/components/auth/login/oidc.vue

@@ -4,6 +4,12 @@ import Login from '@shell/mixins/login';
 export default {
   mixins: [Login],
 
+  computed: {
+    uniqueDisplayName() {
+      return this.t('model.authConfig.description.oidc');
+    },
+  },
+
   methods: {
     login() {
       this.$store.dispatch('auth/redirectTo', { provider: this.name });
@@ -20,7 +26,7 @@ export default {
       style="font-size: 18px;"
       @click="login"
     >
-      {{ t('login.loginWithProvider', {provider: displayName}) }}
+      {{ t('login.loginWithProvider', {provider: uniqueDisplayName}) }}
     </button>
   </div>
 </template>

package/components/fleet/FleetClusters.vue

@@ -37,8 +37,8 @@ export default {
         STATE,
         NAME,
         {
-          name:     'nodesReady',
-          labelKey: 'tableHeaders.nodesReady',
+          name:     'bundlesReady',
+          labelKey: 'tableHeaders.bundlesReady',
           value:    'status.display.readyBundles',
           sort:     'status.summary.ready',
           search:   false,
@@ -47,7 +47,7 @@ export default {
         {
           name:     'reposReady',
           labelKey: 'tableHeaders.reposReady',
-          value:    'status.display.readyBundles',
+          value:    'status.readyGitRepos',
           sort:     'status.summary.ready',
           search:   false,
           align:    'center',
@@ -113,19 +113,19 @@ export default {
       <span v-else>{{ row.repoInfo.total }}</span>
     </template>
 
-    <template #cell:nodesReady="{row}">
+    <template #cell:bundlesReady="{row}">
       <span
-        v-if="!row.nodeInfo"
+        v-if="row.bundleInfo.noValidData"
         class="text-muted"
       >&mdash;</span>
       <span
-        v-else-if="row.nodeInfo.unready"
+        v-else-if="row.bundleInfo.ready !== row.bundleInfo.total"
         class="text-warning"
-      >{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
+      >{{ row.bundleInfo.ready }}/{{ row.bundleInfo.total }}</span>
       <span
         v-else
-        :class="{'text-error': !row.nodeInfo.total}"
-      >{{ row.nodeInfo.total }}</span>
+        :class="{'text-error': !row.bundleInfo.total}"
+      >{{ row.bundleInfo.total }}</span>
     </template>
   </ResourceTable>
 </template>

package/components/fleet/FleetIntro.vue

@@ -1,31 +1,25 @@
 <script>
-import { AS, _YAML } from '@shell/config/query-params';
 import { FLEET } from '@shell/config/types';
+import { NAME } from '@shell/config/product/fleet';
 
 export default {
 
   name: 'FleetIntro',
 
   data() {
-    const params = { ...this.$route.params };
-
-    const formRoute = { name: `${ this.$route.name }-create`, params };
-
-    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
-
-    const yamlRoute = {
-      name:  `${ this.$route.name }-create`,
-      params,
-      query: { [AS]: _YAML },
+    const gitRepoRoute = {
+      name:   'c-cluster-product-resource-create',
+      params: {
+        product:  NAME,
+        resource: FLEET.GIT_REPO
+      },
     };
 
     const gitRepoSchema = this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
     const canCreateRepos = gitRepoSchema && gitRepoSchema.resourceMethods.includes('PUT');
 
     return {
-      formRoute,
-      yamlRoute,
-      hasEditComponent,
+      gitRepoRoute,
       canCreateRepos
     };
   },
@@ -41,12 +35,12 @@ export default {
       v-if="canCreateRepos"
       class="actions"
     >
-      <n-link
-        :to="formRoute"
+      <router-link
+        :to="gitRepoRoute"
         class="btn role-secondary"
       >
         {{ t('fleet.gitRepo.repo.addRepo') }}
-      </n-link>
+      </router-link>
     </div>
   </div>
 </template>

package/components/fleet/FleetNoWorkspaces.vue

@@ -31,12 +31,12 @@ export default {
       v-if="canView"
       class="actions"
     >
-      <n-link
+      <router-link
         :to="formRoute"
         class="btn role-secondary"
       >
         {{ t('fleet.gitRepo.workspace.addWorkspace') }}
-      </n-link>
+      </router-link>
     </div>
   </div>
 </template>

package/components/fleet/FleetRepos.vue

@@ -19,6 +19,7 @@ import {
 import { FLEET } from '@shell/config/labels-annotations';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
+// i18n-ignore repoDisplay
 export default {
 
   name: 'FleetRepos',

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -334,6 +334,9 @@ export default {
     // set watcher for the chart data
     this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, function(newValue) {
       this.watcherFunction(newValue);
+    }, {
+      deep:      true,
+      immediate: true
     });
   },
   unmounted() {
@@ -344,7 +347,10 @@ export default {
 
 <template>
   <div>
-    <div class="chart-container">
+    <div
+      class="chart-container"
+      data-testid="gitrepo_graph"
+    >
       <!-- loading status container -->
       <div
         v-if="!isChartFirstRenderAnimationFinished"
@@ -377,11 +383,11 @@ export default {
               <!-- title template -->
               <td v-if="item.type === 'title-link'">
                 <span v-if="item.valueObj.detailLocation">
-                  <n-link
+                  <router-link
                     :to="item.valueObj.detailLocation"
                   >
                     {{ item.valueObj.id }}
-                  </n-link>
+                  </router-link>
                 </span>
                 <span v-else>{{ item.valueObj.id }}</span>
               </td>

package/components/form/ArrayList.vue

@@ -47,20 +47,20 @@ export default {
       default: false,
     },
     addLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.add');
-      },
+      type:    String,
+      default: '',
     },
     addAllowed: {
       type:    Boolean,
       default: true,
     },
+    addDisabled: {
+      type:    Boolean,
+      default: false,
+    },
     removeLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.remove');
-      },
+      type:    String,
+      default: '',
     },
     removeAllowed: {
       type:    Boolean,
@@ -101,12 +101,22 @@ export default {
     return { rows, lastUpdateWasFromValue: false };
   },
   computed: {
+    _addLabel() {
+      return this.addLabel || this.t('generic.add');
+    },
+    _removeLabel() {
+      return this.removeLabel || this.t('generic.remove');
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
     showAdd() {
       return this.addAllowed;
     },
+    disableAdd() {
+      return this.addDisabled;
+    },
     showRemove() {
       return this.removeAllowed;
     },
@@ -311,24 +321,25 @@ export default {
               :data-testid="`remove-item-${idx}`"
               @click="remove(row, idx)"
             >
-              {{ removeLabel }}
+              {{ _removeLabel }}
             </button>
           </slot>
         </div>
       </div>
     </template>
-    <div
-      v-else-if="mode==='view'"
-      class="text-muted"
-    >
-      &mdash;
-    </div>
     <div v-else>
-      <slot name="empty" />
+      <slot name="empty">
+        <div
+          v-if="mode==='view'"
+          class="text-muted"
+        >
+          &mdash;
+        </div>
+      </slot>
     </div>
     <div
       v-if="showAdd && !isView"
-      class="footer"
+      class="footer mt-20"
     >
       <slot
         v-if="showAdd"
@@ -338,7 +349,7 @@ export default {
         <button
           type="button"
           class="btn role-tertiary add"
-          :disabled="loading"
+          :disabled="loading || disableAdd"
           data-testid="array-list-button"
           @click="add()"
         >
@@ -346,7 +357,7 @@ export default {
             v-if="loading"
             class="mr-5 icon icon-spinner icon-spin icon-lg"
           />
-          {{ addLabel }}
+          {{ _addLabel }}
         </button>
       </slot>
     </div>