@rancher/shell 0.5.2 → 0.5.3

package/components/form/BannerSettings.vue

@@ -143,6 +143,7 @@ export default ({
           <RadioGroup
             v-model="value[bannerType].textAlignment"
             name="bannerAlignment"
+            :data-testid="`banner_alignment_radio_options${bannerType}`"
             :label="t('banner.bannerAlignment.label')"
             :options="radioOptions.options"
             :labels="radioOptions.labels"
@@ -160,6 +161,7 @@ export default ({
             <Checkbox
               v-model="value[bannerType][o.style]"
               name="bannerDecoration"
+              :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
               class="banner-decoration-checkbox"
               :mode="mode"
               :label="o.label"
@@ -169,6 +171,7 @@ export default ({
         <div class="col span-2">
           <LabeledSelect
             v-model="value[bannerType].fontSize"
+            :data-testid="`banner_font_size_options${bannerType}`"
             :disabled="isUiDisabled"
             :label="t('banner.bannerFontSize.label')"
             :options="uiBannerFontSizeOptions"

package/components/form/FileSelector.vue

@@ -148,6 +148,7 @@ export default {
     :disabled="disabled"
     type="button"
     class="file-selector btn"
+    data-testid="file-selector__uploader-button"
     @click="selectFile"
   >
     <span>{{ label }}</span>

package/components/form/KeyValue.vue

@@ -777,6 +777,7 @@ export default {
           v-if="addAllowed"
           type="button"
           class="btn role-tertiary add"
+          data-testid="add_link_button"
           :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
           @click="add()"
         >

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -27,6 +27,7 @@ export default {
 
         try {
           out = JSON.parse(this.value);
+
           out.forEach((endpoint) => {
             let protocol = 'http';
 
@@ -34,10 +35,19 @@ export default {
               protocol = 'https';
             }
 
-            if (endpoint.addresses) {
+            const linkDefaultDisplay = endpoint.port ? `${ endpoint.port }/${ endpoint.protocol }` : endpoint.protocol;
+
+            // If there's an ingress and it has a hostname, we use the hostname address instead
+            // https://github.com/rancher/dashboard/issues/8087
+            if (endpoint.ingressName && endpoint.hostname) {
+              endpoint.link = `${ protocol }://${ endpoint.hostname }${ endpoint.path }`;
+              endpoint.linkDisplay = endpoint.link;
+            } else if (endpoint.addresses && endpoint.addresses.length) {
               endpoint.link = `${ protocol }://${ endpoint.addresses[0] }:${ endpoint.port }`;
+              endpoint.linkDisplay = linkDefaultDisplay;
             } else if (externalIp) {
               endpoint.link = `${ protocol }://${ externalIp }:${ endpoint.port }`;
+              endpoint.linkDisplay = linkDefaultDisplay;
             } else {
               endpoint.display = `[${ this.t('servicesPage.anyNode') }]:${ endpoint.port }`;
             }
@@ -49,26 +59,6 @@ export default {
         }
       }
 
-      return null;
-    },
-
-    protocol() {
-      const { parsed } = this;
-
-      if ( parsed) {
-        if (this.parsed[0].protocol) {
-          return this.parsed[0].protocol;
-        }
-
-        const match = parsed.match(/^([^:]+):\/\//);
-
-        if ( match ) {
-          return match[1];
-        } else {
-          return 'link';
-        }
-      }
-
       return null;
     }
   },
@@ -90,7 +80,7 @@ export default {
         :href="endpoint.link"
         target="_blank"
         rel="nofollow noopener noreferrer"
-      ><span v-if="endpoint.port">{{ endpoint.port }}/</span>{{ endpoint.protocol }}</a>
+      >{{ endpoint.linkDisplay }}</a>
     </template>
   </span>
 </template>

package/components/formatter/__tests__/WorkloadDetailEndpoints.test.ts

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import WorkloadDetailEndpoints from '@shell/components/formatter/WorkloadDetailEndpoints.vue';
+import Tag from '@shell/components/Tag';
+
+describe('component: WorkloadDetailEndpoints', () => {
+  const withIngressAndHostname = [{
+    addresses: [
+      '172.18.0.3'
+    ],
+    port:        80,
+    protocol:    'HTTP',
+    serviceName: 'kube-public:tetris',
+    ingressName: 'kube-public:tetris',
+    hostname:    'tetris.kube-public.172.18.0.3.sslip.io',
+    path:        '/',
+    allNodes:    false,
+  }];
+
+  const withoutIngress = [
+    {
+      addresses: [
+        '172.18.0.3'
+      ],
+      port:        80,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    },
+    {
+      addresses: [
+        '172.18.0.3'
+      ],
+      port:        443,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    }
+  ];
+
+  const withoutAddresses = [
+    {
+      port:        443,
+      protocol:    'TCP',
+      serviceName: 'kube-system:traefik',
+      allNodes:    false
+    }
+  ];
+
+  const basicNodesOutput = [
+    { externalIp: 'some-external-ip' }
+  ];
+
+  it.each([
+    [withIngressAndHostname, [], ['http://tetris.kube-public.172.18.0.3.sslip.io/']],
+    [withoutIngress, [], ['http://172.18.0.3:80', 'https://172.18.0.3:443']],
+    [withoutAddresses, basicNodesOutput, ['https://some-external-ip:443']],
+  ])('should display a link given the appropriate conditions', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
+    const wrapper = mount(WorkloadDetailEndpoints, {
+      propsData: { value: JSON.stringify(value) },
+      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput } } }
+    });
+
+    wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
+      expect(endpoint.link).toBe(expectationArr[i]);
+    });
+  });
+
+  it.each([
+    [withoutAddresses, [], ['[some-translation]:443']],
+  ])('should render a Tag component with the appropriate content', (value:any[], nodesOutput:any[], expectationArr:any[]) => {
+    const wrapper = mount(WorkloadDetailEndpoints, {
+      propsData: { value: JSON.stringify(value) },
+      mocks:     { $store: { getters: { 'cluster/all': () => nodesOutput, 'i18n/t': () => 'some-translation' } } }
+    });
+
+    wrapper.vm.parsed.forEach((endpoint:{[key: string]: string}, i:number) => {
+      expect(endpoint.display).toBe(expectationArr[i]);
+      expect(wrapper.findComponent(Tag).exists()).toBe(true);
+    });
+  });
+});

package/components/nav/Header.vue

@@ -432,6 +432,7 @@ export default {
       >
         <BrandImage
           class="side-menu-logo-img"
+          data-testid="header-side-menu__brand-img"
           file-name="rancher-logo.svg"
         />
       </div>

package/components/nav/Jump.vue

@@ -2,7 +2,8 @@
 import debounce from 'lodash/debounce';
 import Group from '@shell/components/nav/Group';
 import { isMac } from '@shell/utils/platform';
-import { BOTH, ALL } from '@shell/store/type-map';
+import { BOTH, TYPE_MODES } from '@shell/store/type-map';
+import { COUNT } from '@shell/config/types';
 
 export default {
   components: { Group },
@@ -31,17 +32,26 @@ export default {
   methods: {
     updateMatches() {
       const clusterId = this.$store.getters['clusterId'];
-      const isAllNamespaces = this.$store.getters['isAllNamespaces'];
-      const product = this.$store.getters['productId'];
+      const productId = this.$store.getters['productId'];
+      const product = this.$store.getters['currentProduct'];
 
-      let namespaces = null;
+      const allTypesByMode = this.$store.getters['type-map/allTypes'](productId, [TYPE_MODES.ALL]) || {};
+      const allTypes = allTypesByMode[TYPE_MODES.ALL];
+      const out = this.$store.getters['type-map/getTree'](productId, TYPE_MODES.ALL, allTypes, clusterId, BOTH, null, this.value);
 
-      if ( !isAllNamespaces ) {
-        namespaces = Object.keys(this.$store.getters['activeNamespaceCache']);
-      }
+      // Suplement the output with count info. Usualy the `Type` component would handle this individualy... but scales real bad so give it
+      // some help
+      const counts = this.$store.getters[`${ product.inStore }/all`](COUNT)?.[0]?.counts || {};
 
-      const allTypes = this.$store.getters['type-map/allTypes'](product) || {};
-      const out = this.$store.getters['type-map/getTree'](product, ALL, allTypes, clusterId, BOTH, namespaces, null, this.value);
+      out.forEach((o) => {
+        o.children?.forEach((t) => {
+          const count = counts[t.name];
+
+          t.count = count ? count.summary.count || 0 : null;
+          t.byNamespace = count ? count.namespaces : {};
+          t.revision = count ? count.revision : null;
+        });
+      });
 
       this.groups = out;
 

package/components/nav/TopLevelMenu.vue

@@ -52,13 +52,11 @@ export default {
     ...mapGetters(['clusterId']),
     ...mapGetters(['clusterReady', 'isRancher', 'currentCluster', 'currentProduct', 'isRancherInHarvester']),
     ...mapGetters({ features: 'features/get' }),
-
     value: {
       get() {
         return this.$store.getters['productId'];
       },
     },
-
     sideMenuStyle() {
       return {
         marginBottom: this.globalBannerSettings?.footerFont,
@@ -171,7 +169,6 @@ export default {
 
       return `min-height: ${ height }px`;
     },
-
     clusterFilterCount() {
       return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length;
     },
@@ -376,7 +373,10 @@ export default {
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
           <div class="side-menu-logo">
-            <BrandImage file-name="rancher-logo.svg" />
+            <BrandImage
+              data-testid="side-menu__brand-img"
+              file-name="rancher-logo.svg"
+            />
           </div>
         </div>
 
@@ -425,6 +425,10 @@ export default {
                   v-model="clusterFilter"
                   :placeholder="t('nav.search.placeholder')"
                 >
+                <i
+                  class="magnifier icon icon-search"
+                  :class="{ active: clusterFilter }"
+                />
                 <i
                   v-if="clusterFilter"
                   class="icon icon-close"
@@ -789,6 +793,7 @@ export default {
 
      &.menu-open {
       width: 300px;
+      box-shadow: 3px 1px 3px var(--shadow);
     }
 
     .title {
@@ -796,7 +801,6 @@ export default {
       height: 55px;
       flex: 0 0 55px;
       width: 100%;
-      border-bottom: 1px solid var(--nav-border);
       justify-content: flex-start;
       align-items: center;
 
@@ -949,13 +953,31 @@ export default {
         position: relative;
         > input {
           background-color: transparent;
-          margin-bottom: 8px;
           padding-right: 35px;
+          padding-left: 25px;
+          height: 32px;
+        }
+        > .magnifier {
+          position: absolute;
+          top: 12px;
+          left: 8px;
+          width: 12px;
+          height: 12px;
+          font-size: 12px;
+          opacity: 0.4;
+
+          &.active {
+            opacity: 1;
+
+            &:hover {
+              color: var(--body-text);
+            }
+          }
         }
         > i {
           position: absolute;
-          font-size: $clear-search-size;
-          top: 11px;
+          font-size: 12px;
+          top: 12px;
           right: 8px;
           opacity: 0.7;
           cursor: pointer;
@@ -992,10 +1014,10 @@ export default {
           height: 42px;
 
           .search {
-            transition: all 0.5s ease-in-out;
+            transition: all 0.25s ease-in-out;
             transition-delay: 2s;
             width: 72%;
-            height: 42px;
+            height: 36px;
 
             input {
               height: 100%;
@@ -1051,7 +1073,7 @@ export default {
             hr {
               margin: 0;
               width: 94%;
-              transition: all 0.5s ease-in-out;
+              transition: all 0.25s ease-in-out;
               max-width: 100%;
             }
           }
@@ -1078,7 +1100,7 @@ export default {
           text-transform: uppercase;
 
           span {
-            transition: all 0.5s ease-in-out;
+            transition: all 0.25s ease-in-out;
             display: flex;
             max-height: 16px;
           }
@@ -1087,7 +1109,7 @@ export default {
             margin: 0;
             max-width: 50px;
             width: 0;
-            transition: all 0.5s ease-in-out;
+            transition: all 0.25s ease-in-out;
           }
         }
 
@@ -1199,12 +1221,12 @@ export default {
   }
 
   .fade-enter-active, .fade-leave-active {
-    transition: all 0.2s;
+    transition: all 0.25s;
     transition-timing-function: ease;
   }
 
   .fade-leave-active {
-    transition: all 0.4s;
+    transition: all 0.25s;
   }
 
   .fade-leave-to {

package/components/nav/Type.vue

@@ -1,8 +1,8 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
-import { FAVORITE, USED } from '@shell/store/type-map';
+import { TYPE_MODES } from '@shell/store/type-map';
 
-const showFavoritesFor = [FAVORITE, USED];
+const showFavoritesFor = [TYPE_MODES.FAVORITE, TYPE_MODES.USED];
 
 export default {
 
@@ -90,12 +90,23 @@ export default {
     },
 
     showCount() {
-      return typeof this.type.count !== 'undefined';
+      return this.count !== undefined;
     },
 
     namespaceIcon() {
       return this.type.namespaced;
     },
+
+    count() {
+      if (this.type.count !== undefined) {
+        return this.type.count;
+      }
+
+      const inStore = this.$store.getters['currentStore'](this.type.name);
+
+      return this.$store.getters[`${ inStore }/count`]({ name: this.type.name });
+    }
+
   },
 
   methods: {
@@ -162,7 +173,7 @@ export default {
           v-if="namespaceIcon"
           class="icon icon-namespace namespaced"
         />
-        {{ type.count }}
+        {{ count }}
       </span>
     </a>
   </n-link>

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -1,6 +1,6 @@
-import { mount, Wrapper } from '@vue/test-utils';
 import TopLevelMenu from '@shell/components/nav/TopLevelMenu';
 import { SETTING } from '@shell/config/settings';
+import { mount, Wrapper } from '@vue/test-utils';
 
 // DISCLAIMER: This should not be added here, although we have several store requests which are irrelevant
 const defaultStore = {

package/components/nav/__tests__/Type.test.ts

@@ -16,6 +16,12 @@ describe('component: Type', () => {
         mocks:     {
           $route:  { path: 'whatever' },
           $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+          $store:  {
+            getters: {
+              currentStore:    () => 'cluster',
+              'cluster/count': () => 1,
+            }
+          }
         },
       });
 
@@ -31,6 +37,12 @@ describe('component: Type', () => {
         mocks:     {
           $route:  { hash: 'whatever' },
           $router: { resolve: () => ({ route: { path: 'whatever' } }) },
+          $store:  {
+            getters: {
+              currentStore:    () => 'cluster',
+              'cluster/count': () => 1,
+            }
+          }
         },
       });
 
@@ -67,6 +79,12 @@ describe('component: Type', () => {
             path: 'whatever',
           },
           $router: { resolve: () => ({ route: { path: 'many/parts' } }) },
+          $store:  {
+            getters: {
+              currentStore:    () => 'cluster',
+              'cluster/count': () => 1,
+            }
+          }
         },
       });
 
@@ -101,6 +119,12 @@ describe('component: Type', () => {
             path: currentPath,
           },
           $router: { resolve: () => ({ route: { path: menuPath } }) },
+          $store:  {
+            getters: {
+              currentStore:    () => 'cluster',
+              'cluster/count': () => 1,
+            }
+          }
         },
       });
 
@@ -126,6 +150,12 @@ describe('component: Type', () => {
             path: currentPath,
           },
           $router: { resolve: () => ({ route: { path: menuPath } }) },
+          $store:  {
+            getters: {
+              currentStore:    () => 'cluster',
+              'cluster/count': () => 1,
+            }
+          }
         },
       });
 

package/detail/__tests__/provisioning.cattle.io.cluster.test.ts

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import ProvisioningCattleIoCluster from '@shell/detail/provisioning.cattle.io.cluster.vue';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+describe('view: provisioning.cattle.io.cluster', () => {
+  const mockStore = {
+    getters: {
+      'management/canList':      () => true,
+      'management/schemaFor':    jest.fn(),
+      'i18n/t':                  (text: string) => text,
+      t:                         (text: string) => text,
+      currentStore:              () => 'current_store',
+      'current_store/schemaFor': jest.fn(),
+      'current_store/all':       jest.fn(),
+      workspace:                 jest.fn(),
+    },
+  };
+
+  const mocks = {
+    $store:      mockStore,
+    $fetchState: { pending: false },
+    $route:      {
+      query: { AS: '' },
+      name:  {
+        endsWith: () => {
+          return false;
+        },
+      },
+    },
+  };
+
+  describe('registration tab visibility', () => {
+    it('a hosted Kubernetes Provider with a private endpoint (network config) and cluster not ready should SHOW the registration tab', async() => {
+      const value = {
+        isHostedKubernetesProvider: true,
+        isPrivateHostedProvider:    true,
+        mgmt:                       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: false
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(true);
+    });
+
+    it('a hosted Kubernetes Provider WITHOUT a private endpoint (network config) and cluster not ready should NOT SHOW the registration tab', async() => {
+      const value = {
+        isHostedKubernetesProvider: true,
+        mgmt:                       {
+          hasLink: () => jest.fn(),
+          linkFor: () => '',
+          isReady: false
+        }
+      };
+
+      const wrapper = shallowMount(ProvisioningCattleIoCluster, {
+        mocks,
+        propsData: { value },
+      });
+
+      await wrapper.setData({ clusterToken: {} });
+
+      expect(wrapper.vm.showRegistration).toStrictEqual(false);
+    });
+  });
+});

package/detail/fleet.cattle.io.bundle.vue

@@ -38,7 +38,7 @@ export default {
       if (this.hasRepoLabel) {
         const bundleResourceIds = this.bundleResourceIds;
 
-        return this.repo?.status?.resources.filter((resource) => {
+        return this.repo?.status?.resources?.filter((resource) => {
           return bundleResourceIds.includes(resource.name);
         });
       } else if (this.value?.spec?.resources?.length) {

package/detail/provisioning.cattle.io.cluster.vue

@@ -519,7 +519,10 @@ export default {
         return this.extDetailTabs.registration;
       }
 
-      if ( this.value.isHostedKubernetesProvider && !this.isClusterReady ) {
+      // Hosted kubernetes providers with private endpoints need the registration tab
+      // https://github.com/rancher/dashboard/issues/6036
+      // https://github.com/rancher/dashboard/issues/4545
+      if ( this.value.isHostedKubernetesProvider && this.value.isPrivateHostedProvider && !this.isClusterReady ) {
         return this.extDetailTabs.registration;
       }
 
@@ -552,6 +555,18 @@ export default {
 
     snapshotsGroupBy() {
       return 'backupLocation';
+    },
+
+    extDetailTabsRelated() {
+      return this.extDetailTabs?.related;
+    },
+
+    extDetailTabsEvents() {
+      return this.extDetailTabs?.events;
+    },
+
+    extDetailTabsConditions() {
+      return this.extDetailTabs?.conditions;
     }
   },
 
@@ -725,9 +740,9 @@ export default {
       :default-tab="defaultTab"
       :need-related="hasLocalAccess"
       :extension-params="extCustomParams"
-      :needRelated="extDetailTabs.related"
-      :needEvents="extDetailTabs.events"
-      :needConditions="extDetailTabs.conditions"
+      :needRelated="extDetailTabsRelated"
+      :needEvents="extDetailTabsEvents"
+      :needConditions="extDetailTabsConditions"
     >
       <Tab
         v-if="showMachines"

package/edit/management.cattle.io.setting.vue

@@ -145,6 +145,7 @@ export default {
     <div class="edit-change mt-20">
       <h5 v-t="'advancedSettings.edit.changeSetting'" />
       <button
+        data-testid="advanced_settings_use_default"
         :disabled="!canReset"
         type="button"
         class="btn role-primary"

package/edit/monitoring.coreos.com.alertmanagerconfig/types/opsgenie.vue

@@ -190,7 +190,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.httpConfig.proxyUrl"
+          v-model="value.httpConfig.proxyURL"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"

package/edit/monitoring.coreos.com.alertmanagerconfig/types/pagerduty.vue

@@ -123,7 +123,6 @@ export default {
       }
     }
   }
-
 };
 </script>
 
@@ -185,7 +184,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.httpConfig.proxyUrl"
+          v-model="value.httpConfig.proxyURL"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"