@rancher/shell 0.3.3 → 0.3.5

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,32 @@
+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);
+  });
+});

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/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.

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();

package/config/labels-annotations.js

@@ -13,6 +13,7 @@ export const UI_MANAGED = 'management.cattle.io/ui-managed';
 export const CREATOR_ID = 'field.cattle.io/creatorId';
 export const RESOURCE_QUOTA = 'field.cattle.io/resourceQuota';
 export const AZURE_MIGRATED = 'auth.cattle.io/azuread-endpoint-migrated';
+export const WORKSPACE_ANNOTATION = 'objectset.rio.cattle.io/id';
 
 export const KUBERNETES = {
   SERVICE_ACCOUNT_UID:  'kubernetes.io/service-account.uid',
@@ -146,3 +147,19 @@ export const CLUSTER_BADGE = {
   // Custom icon text - max 2 characters
   ICON_TEXT: 'ui.rancher/badge-icon-text',
 };
+
+export const SYSTEM_LABELS = [
+  'io.cattle.lifecycle.',
+  'beta.kubernetes.io',
+  'failure-domain.beta.kubernetes.io',
+  'node-role.kubernetes.io',
+  'kubernetes.io',
+  'cattle.io',
+  'authz.management.cattle.io',
+  'rke.cattle.io',
+  'field.cattle.io',
+  'workload.user.cattle.io',
+  'k3s.io',
+  'node.kubernetes.io',
+  'egress.rke2.io'
+];

package/config/product/auth.js

@@ -27,7 +27,7 @@ export function init(store) {
 
   product({
     ifHaveType:          new RegExp(`${ MANAGEMENT.USER }|${ MANAGEMENT.AUTH_CONFIG }`, 'i'),
-    ifHaveVerb:          'PUT',
+    ifHaveVerb:          'GET',
     ifFeature:           MULTI_CLUSTER,
     inStore:             'management',
     icon:                'user',
@@ -43,7 +43,8 @@ export function init(store) {
     name:       'config',
     weight:     -1,
     route:      { name: 'c-cluster-auth-config' },
-    ifHaveType: MANAGEMENT.AUTH_CONFIG
+    ifHaveType: MANAGEMENT.AUTH_CONFIG,
+    ifHaveVerb: 'PUT'
   });
 
   virtualType({

package/config/product/explorer.js

@@ -18,7 +18,7 @@ import {
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
-  DURATION, LAST_SEEN_TIME,
+  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT,
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
@@ -175,6 +175,11 @@ export function init(store) {
     },
   });
 
+  /** This CRD is installed on provisioned clusters because rancher webhook, used for both local and provisioned clusters, expects it to be there
+   * Creating instances of this resource on downstream clusters wont do anything - Only show them for the local cluster
+   */
+  configureType(MANAGEMENT.PSA, { localOnly: true });
+
   headers(PV, [STATE, NAME_COL, RECLAIM_POLICY, PERSISTENT_VOLUME_CLAIM, PERSISTENT_VOLUME_SOURCE, PV_REASON, AGE]);
   headers(CONFIG_MAP, [NAME_COL, NAMESPACE_COL, KEYS, AGE]);
   headers(SECRET, [
@@ -192,7 +197,7 @@ export function init(store) {
   ]);
   headers(INGRESS, [STATE, NAME_COL, NAMESPACE_COL, INGRESS_TARGET, INGRESS_DEFAULT_BACKEND, INGRESS_CLASS, AGE]);
   headers(SERVICE, [STATE, NAME_COL, NAMESPACE_COL, TARGET_PORT, SELECTOR, SPEC_TYPE, AGE]);
-  headers(EVENT, [STATE, { ...LAST_SEEN_TIME, defaultSort: true }, 'EventType', 'Reason', 'Object', 'Subobject', 'Source', 'Message', 'First Seen', 'Count', 'Name', 'Namespace']);
+  headers(EVENT, [STATE, { ...LAST_SEEN_TIME, defaultSort: true }, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL]);
   headers(HPA, [STATE, NAME_COL, HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA, AGE]);
   headers(WORKLOAD, [STATE, NAME_COL, NAMESPACE_COL, TYPE, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
   headers(WORKLOAD_TYPES.DEPLOYMENT, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
@@ -203,6 +208,10 @@ export function init(store) {
   headers(WORKLOAD_TYPES.CRON_JOB, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Schedule', 'Last Schedule', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
   headers(WORKLOAD_TYPES.REPLICATION_CONTROLLER, [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
   headers(POD, [STATE, NAME_COL, NAMESPACE_COL, POD_IMAGES, 'Ready', 'Restarts', 'IP', NODE_COL, AGE]);
+  headers(MANAGEMENT.PSA, [STATE, NAME_COL, {
+    ...DESCRIPTION,
+    width: undefined
+  }, AGE]);
   headers(STORAGE_CLASS, [STATE, NAME_COL, STORAGE_CLASS_PROVISIONER, STORAGE_CLASS_DEFAULT, AGE]);
 
   headers(RBAC.ROLE, [
@@ -311,8 +320,6 @@ export function init(store) {
 
   // Ignore these types as they are managed through the auth product
   ignoreType(MANAGEMENT.USER);
-
-  // Ignore these types as they are managed through the auth product
   ignoreType(MANAGEMENT.GLOBAL_ROLE);
   ignoreType(MANAGEMENT.ROLE_TEMPLATE);
 }

package/config/product/fleet.js

@@ -62,6 +62,8 @@ export function init(store) {
     FLEET.WORKSPACE,
     FLEET.BUNDLE,
     FLEET.TOKEN,
+    FLEET.BUNDLE_NAMESPACE_MAPPING,
+    FLEET.GIT_REPO_RESTRICTION
   ], 'advanced');
 
   headers(FLEET.WORKSPACE, [