@rancher/shell 0.3.4 → 0.3.6

package/components/form/__tests__/LabeledSelect.test.ts

@@ -0,0 +1,138 @@
+import { mount } from '@vue/test-utils';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+
+describe('component: LabeledSelect', () => {
+  describe('should display correct label', () => {
+    it('given an existing value and option', () => {
+      const label = 'Foo';
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        propsData: {
+          value,
+          options: [
+            { label, value },
+          ],
+        }
+      });
+
+      // Component is from a library and class is not going to be changed
+      expect(wrapper.find('.vs__selected').text()).toBe(label);
+    });
+
+    it('using value as label if no options', () => {
+      const value = 'foo';
+      const wrapper = mount(LabeledSelect, {
+        propsData: {
+          value,
+          options: [],
+        }
+      });
+
+      // Component is from a library and class is not going to be changed
+      expect(wrapper.find('.vs__selected').text()).toBe(value);
+    });
+
+    it('using custom key as label for option object', () => {
+      const value = 'foo';
+      const label = 'Foo';
+      const customLabelKey = 'bananas';
+      const wrapper = mount(LabeledSelect, {
+        propsData: {
+          value,
+          optionLabel: customLabelKey,
+          options:     [{
+            [customLabelKey]: label,
+            value
+          }],
+        }
+      });
+
+      // Component is from a library and class is not going to be changed
+      expect(wrapper.find('.vs__selected').text()).toBe(label);
+    });
+
+    it('translating localized cases', () => {
+      const value = 'foo';
+      const translation = 'bananas';
+      const wrapper = mount(LabeledSelect, {
+        propsData: {
+          localizedLabel: true,
+          value,
+          options:        [{ label: 'whatever', value }],
+        },
+        mocks: { $store: { getters: { 'i18n/t': () => translation } } }
+      });
+
+      // Component is from a library and class is not going to be changed
+      expect(wrapper.find('.vs__selected').text()).toBe(translation);
+    });
+
+    describe('updating the value on options change', () => {
+      it('using new label', async() => {
+        const value = 'foo';
+        const oldLabel = 'Foo';
+        const newLabel = 'Baz';
+        const wrapper = mount(LabeledSelect, {
+          propsData: {
+            value,
+            options: [
+              { label: oldLabel, value },
+            ],
+          }
+        });
+
+        await wrapper.setProps({
+          options: [
+            { label: newLabel, value },
+          ]
+        });
+
+        // Component is from a library and class is not going to be changed
+        expect(wrapper.find('.vs__selected').text()).toBe(newLabel);
+      });
+
+      it('using values only and no labels', async() => {
+        const value = 'foo';
+        const newValue = 'bananas';
+        const wrapper = mount(LabeledSelect, {
+          propsData: {
+            value,
+            options: [value],
+          }
+        });
+
+        await wrapper.setProps({ options: [newValue] });
+
+        // Component is from a library and class is not going to be changed
+        expect(wrapper.find('.vs__selected').text()).toBe(value);
+      });
+
+      it('using translated value', async() => {
+        const value = 'foo';
+        const oldLabel = 'Foo';
+        const newLabel = 'Baz';
+        const translation = 'bananas';
+        const i18nMap: Record<string, string> = { [newLabel]: translation };
+        const wrapper = mount(LabeledSelect, {
+          propsData: {
+            value,
+            localizedLabel: true,
+            options:        [
+              { label: oldLabel, value },
+            ],
+          },
+          mocks: { $store: { getters: { 'i18n/t': (text: string) => i18nMap[text] } } }
+        });
+
+        await wrapper.setProps({
+          options: [
+            { label: newLabel, value },
+          ]
+        });
+
+        // Component is from a library and class is not going to be changed
+        expect(wrapper.find('.vs__selected').text()).toBe(translation);
+      });
+    });
+  });
+});

package/components/form/__tests__/NameNsDescription.ts

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+
+describe('component: NameNsDescription', () => {
+  // Accessing to computed value due code complexity
+  it('should map namespaces to options', () => {
+    const namespaceName = 'test';
+    const result = [{
+      label: namespaceName,
+      value: namespaceName
+    }];
+    const wrapper = mount(NameNsDescription, {
+      propsData: {
+        value: {},
+        mode:  'create',
+      },
+      mocks: {
+        $store: {
+          getters: {
+            namespaces:          jest.fn(),
+            allowedNamespaces:   () => ({ [namespaceName]: true }),
+            currentStore:        () => 'cluster',
+            'cluster/schemaFor': jest.fn(),
+            'i18n/t':            jest.fn()
+          },
+        },
+      }
+    });
+
+    expect((wrapper.vm as any).options).toStrictEqual(result);
+  });
+
+  it('should emit in case of new namespace', () => {
+    const namespaceName = 'test';
+    const newNamespaceName = 'bananas';
+    const wrapper = mount(NameNsDescription, {
+      propsData: {
+        value: { metadata: {} },
+        mode:  'create',
+      },
+      mocks: {
+        $store: {
+          getters: {
+            namespaces:          jest.fn(),
+            allowedNamespaces:   () => ({ [namespaceName]: true }),
+            currentStore:        () => 'cluster',
+            'cluster/schemaFor': jest.fn(),
+            'i18n/t':            jest.fn()
+          },
+        },
+        $refs: { name: { focus: jest.fn() } }
+      }
+    });
+
+    (wrapper.vm as any).updateNamespace(newNamespaceName);
+
+    expect(wrapper.emitted().isNamespaceNew?.[0][0]).toBe(true);
+  });
+});

package/components/formatter/InternalExternalIP.vue

@@ -56,3 +56,9 @@ export default {
     </template>
   </span>
 </template>
+
+<style lang='scss' scoped>
+.icon-btn {
+  margin-left: 8px;
+}
+</style>

package/components/formatter/InvolvedObjectLink.vue

@@ -0,0 +1,54 @@
+<script>
+
+import LinkName from '@shell/components/formatter/LinkName.vue';
+import { NAME as EXPLORER } from '@shell/config/product/explorer';
+
+export default {
+  components: { LinkName },
+
+  props: {
+    value: {
+      type:     null,
+      required: true
+    },
+    product: {
+      type:    String,
+      default: EXPLORER,
+    }
+  },
+
+  computed: {
+    kind() {
+      // this cover most of the usecases for events
+      if (this.value?.apiVersion && typeof this.value?.apiVersion === 'string') {
+        const versionParts = this.value.apiVersion.split('/');
+
+        if (versionParts.length === 1) {
+          return this.value.kind.toLowerCase();
+        }
+
+        return `${ versionParts[0] }.${ this.value.kind.toLowerCase() }`;
+      // covers Node events usecase
+      } else if (this.value?.kind && typeof this.value?.kind === 'string') {
+        return this.value?.kind.toLowerCase();
+      }
+
+      return '';
+    }
+  }
+};
+</script>
+
+<template>
+  <span v-if="kind && value.kind && value.name">
+    <LinkName
+      :type="kind"
+      :value="`${value.kind} ${value.name}`"
+      :object-id="value.name"
+      :namespace="value.namespace"
+      :product="product"
+      :show-type="true"
+    />
+  </span>
+  <span v-else />
+</template>

package/components/formatter/Link.vue

@@ -138,17 +138,18 @@ export default {
   <n-link
     v-if="isInternal && href"
     :to="href"
+    class="link-text-icon"
   >
     <i
       v-if="beforeIconClass"
       :class="beforeIconClass"
-      style="position: relative; top: -2px;"
+      class="prefix"
     />
     {{ label }}
     <i
       v-if="afterIconClass"
       :class="afterIconClass"
-      style="position: relative; top: -2px;"
+      class="suffix"
     />
   </n-link>
   <a
@@ -156,18 +157,33 @@ export default {
     :href="href"
     :rel="rel"
     :target="target"
+    class="link-text-icon"
   >
     <i
       v-if="beforeIconClass"
       :class="beforeIconClass"
-      style="position: relative; top: -2px;"
+      class="prefix"
     />
     {{ label }}
     <i
       v-if="afterIconClass"
       :class="afterIconClass"
-      style="position: relative; top: -2px;"
+      class="suffix"
     />
   </a>
   <span v-else> {{ href }} {{ label }}</span>
 </template>
+<style lang="scss" scoped>
+.link-text-icon {
+  display: flex;
+  align-items: top;
+
+  .prefix {
+    margin: 2px 2px 0 0;
+  }
+
+  .suffix {
+    margin: 2px 0 0 2px;
+  }
+}
+</style>

package/components/formatter/LinkName.vue

@@ -18,6 +18,11 @@ export default {
       default: '',
     },
 
+    objectId: {
+      type:    String,
+      default: '',
+    },
+
     product: {
       type:    String,
       default: EXPLORER,
@@ -31,7 +36,7 @@ export default {
       const params = {
         resource:  this.type,
         namespace: this.namespace,
-        id:        this.value,
+        id:        this.objectId ? this.objectId : this.value,
         product:   this.product || EXPLORER,
       };
 

package/components/formatter/ServiceTargets.vue

@@ -115,7 +115,7 @@ export default {
       :key="index"
       class="text-small"
     >
-      <span v-html="port.label" />
+      <span v-clean-html="port.label" />
     </div>
   </div>
 </template>

package/components/formatter/WorkloadHealthScale.vue

@@ -2,10 +2,11 @@
 import Vue from 'vue';
 import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import PlusMinus from '@shell/components/form/PlusMinus';
-import { SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
+import { POD, SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
 
 const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
+const INVALID_TYPES = [POD];
 
 export default {
   components: { PlusMinus, ProgressBarMulti },
@@ -47,6 +48,10 @@ export default {
       return !!SCALABLE_TYPES.includes(this.row.type) && this.row.canUpdate;
     },
 
+    canShow() {
+      return !INVALID_TYPES.includes(this.row.type);
+    },
+
     parts() {
       return this.cParts;
     },
@@ -162,8 +167,9 @@ export default {
 </script>
 
 <template>
+  <div v-if="!canShow" />
   <div
-    v-if="loading"
+    v-else-if="loading"
     class="hs-popover__loader"
   >
     <i class="icon icon-spinner" />

package/components/nav/Group.vue

@@ -202,11 +202,11 @@ export default {
           :to="group.children[0].route"
           :exact="group.children[0].exact"
         >
-          <h6 v-html="group.labelDisplay || group.label" />
+          <h6 v-clean-html="group.labelDisplay || group.label" />
         </n-link>
         <h6
           v-else
-          v-html="group.labelDisplay || group.label"
+          v-clean-html="group.labelDisplay || group.label"
         />
       </slot>
       <i

package/components/nav/NamespaceFilter.vue

@@ -105,13 +105,27 @@ export default {
       const t = this.$store.getters['i18n/t'];
       let out = [];
 
+      const params = { ...this.$route.params };
+      const resource = params.resource;
+      // Sometimes, different pages may have different namespaces to filter
+      const notFilterNamespaces = this.$store.getters[`type-map/optionsFor`](resource).notFilterNamespace || [];
+
       // TODO: Add return info
       if (this.currentProduct?.customNamespaceFilter && this.currentProduct?.inStore) {
         // Sometimes the component can show before the 'currentProduct' has caught up, so access the product via the getter rather
         // than caching it in the `fetch`
+
+        // The namespace display on the list and edit pages should be the same as in the namespaceFilter component
+        if (this.$store.getters[`${ this.currentProduct.inStore }/filterNamespace`]) {
+          const allNamespaces = this.$store.getters[`${ this.currentProduct.inStore }/filterNamespace`](notFilterNamespaces);
+
+          this.$store.commit('changeAllNamespaces', allNamespaces);
+        }
+
         return this.$store.getters[`${ this.currentProduct.inStore }/namespaceFilterOptions`]({
           addNamespace,
-          divider
+          divider,
+          notFilterNamespaces
         });
       }
 
@@ -371,17 +385,7 @@ export default {
         return namespaces;
       }
 
-      const isVirtualCluster = this.$store.getters['isVirtualCluster'];
-
       return namespaces.filter((namespace) => {
-        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
-        const systemNS = namespace.isSystem || namespace.isFleetManaged || isSettingSystemNamespace;
-
-        // For Harvester, filter out system namespaces AND obscure namespaces.
-        if (isVirtualCluster) {
-          return !systemNS && !namespace.isObscure;
-        }
-
         // Otherwise only filter out obscure namespaces, such as namespaces
         // that Rancher uses to manage RBAC for projects, which should not be
         // edited or deleted by Rancher users.
@@ -949,6 +953,14 @@ export default {
                 color: var(--dropdown-hover-bg);
               }
             }
+
+            &:focus {
+              .ns-item {
+                > * {
+                  color: var(--dropdown-hover-text);
+                }
+              }
+            }
           }
         }
 

package/components/nav/TopLevelMenu.vue

@@ -3,7 +3,6 @@ import BrandImage from '@shell/components/BrandImage';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
 import IconOrSvg from '../IconOrSvg';
 import { mapGetters } from 'vuex';
-import $ from 'jquery';
 import { CAPI, MANAGEMENT } from '@shell/config/types';
 import { mapPref, MENU_MAX_CLUSTERS } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
@@ -188,11 +187,10 @@ export default {
       const max = Math.min(maxToShow, this.clusters.length);
 
       if (el) {
-        const $el = $(el);
         const h = 33 * max;
 
-        $el.css('min-height', `${ h }px`);
-        $el.css('max-height', `${ h }px`);
+        el.style.minHeight = `${ h }px`;
+        el.style.maxHeight = `${ h }px`;
       }
     },
     handler(e) {

package/components/nav/Type.vue

@@ -90,9 +90,9 @@ export default {
       ><t :k="type.labelKey" /></span>
       <span
         v-else
+        v-clean-html="type.labelDisplay || type.label"
         class="label"
         :class="{'no-icon': !type.icon}"
-        v-html="type.labelDisplay || type.label"
       />
       <span
         v-if="showFavorite || showCount"

package/components/nav/WorkspaceSwitcher.vue

@@ -1,17 +1,19 @@
 <script>
-import { WORKSPACE } from '@shell/store/prefs';
+import { LAST_NAMESPACE, WORKSPACE } from '@shell/store/prefs';
 import { mapState } from 'vuex';
 import Select from '@shell/components/form/Select';
+import { WORKSPACE_ANNOTATION } from '@shell/config/labels-annotations';
 
 export default {
+  name:       'WorkspaceSwitcher',
   components: { Select },
 
   computed: {
-    ...mapState(['allWorkspaces', 'workspace']),
+    ...mapState(['allWorkspaces', 'workspace', 'allNamespaces', 'defaultNamespace', 'getActiveNamespaces']),
 
     value: {
       get() {
-        return this.workspace;
+        return this.workspace || this.namespace || this.options[0]?.value;
       },
 
       set(value) {
@@ -23,17 +25,56 @@ export default {
     },
 
     options() {
-      const out = this.allWorkspaces.map((obj) => {
+      if (this.allWorkspaces.length) {
+        const out = this.allWorkspaces.map((obj) => {
+          return {
+            label: obj.nameDisplay,
+            value: obj.id,
+          };
+        });
+
+        return out;
+      }
+
+      // If doesn't have workspaces (e.g. no permissions)
+      // Then find the workspaces from the annotation.
+      return this.allNamespaces.filter((item) => {
+        return item.metadata.annotations[WORKSPACE_ANNOTATION] === WORKSPACE;
+      }).map((obj) => {
         return {
           label: obj.nameDisplay,
           value: obj.id,
         };
       });
+    },
+  },
+
+  watch: {
+    options(curr, prev) {
+      if (curr.length === 0) {
+        this.value = '';
+      }
 
-      return out;
+      const currentExists = curr.find(item => item.value === this.value);
+
+      if (curr.length && !currentExists) {
+        this.value = curr[0]?.value;
+      }
     },
   },
 
+  created() {
+    // in fleet standard user with just the project owner and global git repo permissions
+    // returns 'default'
+    const initValue = !this.workspace ? this.$store.getters['prefs/get'](LAST_NAMESPACE) : '';
+
+    this.value = (initValue === 'default' || initValue === '') && this.options.length ? this.options[0].value : initValue;
+  },
+
+  data() {
+    return { namespace: this.$store.getters['prefs/get'](LAST_NAMESPACE) };
+  },
+
   methods: {
     focus() {
       this.$refs.select.$refs.search.focus();