@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/components/nav/NotificationCenter/index.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+} from 'vue';
+import { useStore } from 'vuex';
+import Notification from './Notification.vue';
+import NotificationHeader from './NotificationHeader.vue';
+import {
+  RcDropdown,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
+
+const store = useStore();
+const allNotifications = computed(() => store.getters['notifications/all']);
+const unreadLevelClass = computed(() => {
+  return store.getters['notifications/unreadCount'] === 0 ? '' : 'unread';
+});
+
+// There may be more notifications than we can show on screen, so the popover needs to scroll
+const scroller = ref<HTMLElement>();
+
+// Close all of the open growls when the notification center is shown, so that they do not overlap
+const open = (opened: boolean) => {
+  if (opened) {
+    store.dispatch('growl/clear');
+  }
+};
+</script>
+
+<template>
+  <rc-dropdown
+    :aria-label="t('nav.notifications.label')"
+    @update:open="open"
+  >
+    <rc-dropdown-trigger
+      tertiary
+      data-testid="notifications-center"
+      :aria-label="t('nav.notifications.button.label')"
+    >
+      <div class="level-indicator">
+        <i class="icon icon-lg icon-notify-bell" />
+        <div
+          :data-testid="`notifications-center-status${ unreadLevelClass }`"
+          class="trigger-level"
+          :class="unreadLevelClass"
+        />
+      </div>
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <div
+        data-testid="notifications-center-panel"
+        class="notification-dropdown"
+      >
+        <NotificationHeader class="header" />
+        <div
+          v-if="allNotifications.length === 0"
+          class="no-notifications"
+        >
+          <div class="hands">
+            &#x1F64C;
+          </div>
+          <div>
+            {{ t('notificationCenter.caughtUp', {}, true) }}
+          </div>
+        </div>
+        <div
+          ref="scroller"
+          class="scroll-container"
+        >
+          <template
+            v-for="(a, index) in allNotifications"
+            :key="a.id"
+          >
+            <rc-dropdown-separator
+              v-if="index > 0"
+              class="notification-separator"
+            />
+            <Notification :item="a" />
+          </template>
+        </div>
+      </div>
+    </template>
+  </rc-dropdown>
+</template>
+
+<style lang="scss" scoped>
+  .notification-dropdown {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    .header {
+      flex: 0;
+    }
+
+    .scroll-container {
+      overflow: auto;
+      max-height: 80vh;
+      padding: 3px 0; // Need padding at top and bottom in order to show the focus border for the notification
+    }
+  }
+
+  .notification-separator {
+    margin: 0 3px;
+    width: auto;
+  }
+
+  .no-notifications {
+    text-align: center;
+    min-width: 340px;
+    margin: 40px 16px;
+
+    .hands {
+      font-size: 53px;
+      padding-top: 0;
+    }
+
+    > div {
+      padding-top: 16px;
+    }
+  }
+
+  .level-indicator {
+    display: flex;
+    position: relative;
+    height: 20px;
+    width: 18px;
+
+    .trigger-level {
+      position: absolute;
+      right: -6px;
+      top: -4px;
+      border-radius: 50%;
+      height: 8px;
+      width: 8px;
+      background-color: var(--primary);
+      transition: opacity 0.5s ease-in-out;
+      opacity: 0;
+
+      &.unread {
+        opacity: 1;
+        background-color: var(--error);
+      }
+    }
+  }
+</style>

package/components/nav/TopLevelMenu.helper.ts

@@ -1,10 +1,12 @@
 import { CAPI, MANAGEMENT } from '@shell/config/types';
+import { STORE } from '@shell/store/store-types';
 import { PaginationParam, PaginationParamFilter, PaginationSort } from '@shell/types/store/pagination.types';
 import { VuexStore } from '@shell/types/store/vuex';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilterClusters } from '@shell/utils/cluster';
 import PaginationWrapper from '@shell/utils/pagination-wrapper';
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
+import { reactive } from 'vue';
 import { LocationAsRelativeRaw } from 'vue-router';
 
 interface TopLevelMenuCluster {
@@ -86,7 +88,15 @@ export interface TopLevelMenuHelper {
   */
   clustersOthers: Array<TopLevelMenuCluster>;
 
-  update: (args: UpdateArgs) => Promise<void>
+  /**
+   * Fetch all cluster resources
+   */
+  update: (args: UpdateArgs) => Promise<void>;
+
+  /**
+   * Cleanup on destroy of TopLevelMenu
+   */
+  destroy: () => Promise<void>;
 }
 
 export abstract class BaseTopLevelMenuHelper {
@@ -106,7 +116,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersPinned: Array<TopLevelMenuCluster> = [];
+  public clustersPinned: Array<TopLevelMenuCluster> = reactive([]);
 
   /**
   * Filter mgmt clusters by
@@ -121,7 +131,7 @@ export abstract class BaseTopLevelMenuHelper {
   * 2. ready
   * 3. name
   */
-  public clustersOthers: Array<TopLevelMenuCluster> = [];
+  public clustersOthers: Array<TopLevelMenuCluster> = reactive([]);
 
   constructor({ $store }: {
     $store: VuexStore,
@@ -141,7 +151,7 @@ export abstract class BaseTopLevelMenuHelper {
     return {
       id:              mgmtCluster.id,
       label:           mgmtCluster.nameDisplay,
-      ready:           mgmtCluster.isReady, // && !provCluster?.hasError,
+      ready:           mgmtCluster.isReady,
       providerNavLogo: mgmtCluster.providerMenuLogo,
       badge:           mgmtCluster.badge,
       iconColor:       mgmtCluster.iconColor,
@@ -165,69 +175,64 @@ export abstract class BaseTopLevelMenuHelper {
 export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper implements TopLevelMenuHelper {
   private args?: UpdateArgs;
 
-  private clustersPinnedWrapper: PaginationWrapper;
-  private clustersOthersWrapper: PaginationWrapper;
-  private provClusterWrapper: PaginationWrapper;
-
-  private commonClusterFilters: PaginationParam[];
+  private clustersPinnedWrapper: PaginationWrapper<any>;
+  private clustersOthersWrapper: PaginationWrapper<any>;
+  private provClusterWrapper: PaginationWrapper<any>;
 
   constructor({ $store }: {
       $store: VuexStore,
   }) {
     super({ $store });
 
-    this.commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
-
+    // Fetch all PINNED clusters (see `clustersPinned` description for details)
+    // No need to monitor for changes, the UNPINNED request will handle it
     this.clustersPinnedWrapper = new PaginationWrapper({
       $store,
-      onUpdate: () => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
-        if (this.args) {
-          this.update(this.args);
-        }
-      },
+      id:         'tlm-pinned-clusters',
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all UNPINNED clusters capped at 10 (see `clustersOthers` description for details)
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-unpinned-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      MANAGEMENT.CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
+    // Fetch all prov clusters for the mgmt clusters we have
     this.provClusterWrapper = new PaginationWrapper({
       $store,
-      onUpdate: (res) => {
-        // trigger on websocket update (only need 1 trigger for this cluster type)
-        // https://github.com/rancher/rancher/issues/40773 / https://github.com/rancher/dashboard/issues/12734
+      id:       'tlm-prov-clusters',
+      onChange: () => {
         if (this.args) {
           this.update(this.args);
         }
       },
       enabledFor: {
-        store:    'management',
+        store:    STORE.MANAGEMENT,
         resource: {
           id:      CAPI.RANCHER_CLUSTER,
           context: 'side-bar',
         }
-      }
+      },
+      formatResponse: { classify: true }
     });
   }
 
@@ -258,6 +263,7 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
       return res;
     }, {} as { [mgmtId: string]: ProvCluster});
 
+    // Filter out mgmt clusters that don't have matching prov cluster and convert remaining to required format
     const _clustersNotPinned = res.notPinned
       .filter((mgmtCluster) => !!provClustersByMgmtId[mgmtCluster.id])
       .map((mgmtCluster) => this.convertToCluster(mgmtCluster, provClustersByMgmtId[mgmtCluster.id]));
@@ -274,6 +280,19 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.cacheClusters();
   }
 
+  async destroy() {
+    this.clustersPinnedWrapper.onDestroy();
+    this.clustersOthersWrapper.onDestroy();
+    this.provClusterWrapper.onDestroy();
+  }
+
+  /**
+   * Helper function
+   *
+   * This extracts all the functionality previously in TopLevelMenu
+   *
+   * Construct SSP filter params
+   */
   private constructParams({
     pinnedIds,
     searchTerm,
@@ -289,7 +308,8 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     includePinned?: boolean,
     excludePinned?: boolean,
   }): PaginationParam[] {
-    const filters: PaginationParam[] = [...this.commonClusterFilters];
+    const commonClusterFilters = paginationFilterClusters({ getters: this.$store.getters });
+    const filters: PaginationParam[] = [...commonClusterFilters];
 
     if (pinnedIds) {
       if (includePinned) {
@@ -341,7 +361,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -362,7 +381,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 DEFAULT_SORT,
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 
@@ -386,7 +404,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
         sort:                 [],
         projectsOrNamespaces: []
       },
-      classify: true,
     }).then((r) => r.data);
   }
 }
@@ -419,6 +436,10 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     this.cacheClusters();
   }
 
+  async destroy() {
+    // No-op
+  }
+
   /**
    * Filter mgmt clusters by
    * 1. Harvester type 1 (filterOnlyKubernetesClusters)

package/components/nav/TopLevelMenu.vue

@@ -257,6 +257,13 @@ export default {
       });
 
       return appBar;
+    },
+
+    hideLocalCluster() {
+      const hideLocalSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.HIDE_LOCAL_CLUSTER) || {};
+      const value = hideLocalSetting.value || hideLocalSetting.default || 'false';
+
+      return value === 'true';
     }
   },
 
@@ -309,6 +316,9 @@ export default {
       immediate: true,
     },
 
+    hideLocalCluster() {
+      this.updateClusters(this.pinnedIds, 'slow');
+    }
   },
 
   mounted() {
@@ -317,6 +327,7 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
+    this.helper?.destroy();
   },
 
   methods: {

package/components/nav/Type.vue

@@ -64,7 +64,10 @@ export default {
       // If the route explicitly declares the nav path that should be highlighted, then use that
       if (routeMetaNav) {
         const cluster = this.$route.params?.cluster;
-        const navPath = routeMetaNav.replace(':cluster', cluster);
+        const product = this.$route.params?.product;
+        const navPath = routeMetaNav
+          .replace(':cluster', cluster)
+          .replace(':product', product);
 
         if (navPath === typeFullPath) {
           return true;

package/composables/drawer.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+import { useStore } from 'vuex';
+
+export const useDrawer = () => {
+  const store = useStore();
+
+  const open = (component: Component, returnFocusSelector: string, options?: Record<string, any>) => {
+    store.commit('slideInPanel/open', {
+      component,
+      componentProps: {
+        ...(options || {}),
+        triggerFocusTrap: true,
+        returnFocusSelector
+      }
+    });
+  };
+
+  const close = () => {
+    store.commit('slideInPanel/close');
+  };
+
+  return {
+    open,
+    close
+  };
+};

package/composables/resources.test.ts

@@ -0,0 +1,63 @@
+import { useResourceIdentifiers, useFetchResourceWithId } from '@shell/composables/resources';
+
+const mockStore: any = {
+  getters:  { 'cluster/schemaFor': jest.fn(() => ({ id: 'test-schema' })) },
+  dispatch: jest.fn()
+};
+const mockRoute: any = {
+  params: {
+    cluster:   'test-cluster',
+    namespace: 'test-namespace',
+    id:        'test-id',
+  },
+};
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+
+describe('resources', () => {
+  describe('useResourceIdentifiers', () => {
+    it('should return the correct value for a route with a namespace', async() => {
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-namespace/test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+
+    it('should return the correct value for a route without a namespace', async() => {
+      mockRoute.params.namespace = undefined;
+      const { clusterId, id, schema } = useResourceIdentifiers('test-type');
+
+      expect(clusterId).toBe('test-cluster');
+      expect(id).toBe('test-id');
+      expect(schema).toStrictEqual({ id: 'test-schema' });
+    });
+  });
+
+  describe('useFetchResourceWithId', () => {
+    it('should return the correct value given the correct arguments are passed to the dispatch method', async() => {
+      mockStore.dispatch.mockImplementation(() => Promise.resolve({ id: 'test-resource' }));
+      const resource = await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('cluster/find', { type: 'test-type', id: 'test-id' });
+      expect(resource).toStrictEqual({ id: 'test-resource' });
+    });
+
+    it('should dispatch a loadingError if a 404 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 404 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+
+    it('should dispatch a loadingError if a 403 occurs', async() => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      mockStore.dispatch.mockImplementationOnce(() => Promise.reject({ status: 403 }));
+      await useFetchResourceWithId('test-type', 'test-id');
+
+      expect(mockStore.dispatch).toHaveBeenCalledWith('loadingError', new Error('nav.failWhale.resourceIdNotFound-{"resource":"test-type","fqid":"test-id"}'));
+    });
+  });
+});

package/composables/resources.ts

@@ -0,0 +1,38 @@
+import { useI18n } from '@shell/composables/useI18n';
+import { computed, Ref, toValue } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+type ResourceType = string | Ref<string>;
+type IdType = string | Ref<string>;
+
+export const useResourceIdentifiers = (type: ResourceType) => {
+  const route = useRoute();
+  const store = useStore();
+
+  const typeValue = toValue(type);
+
+  const id = computed(() => route.params.namespace ? `${ route.params.namespace }/${ route.params.id }` : `${ route.params.id }`);
+  const schema = computed(() => store.getters['cluster/schemaFor'](typeValue));
+  const clusterId = computed(() => route.params.cluster as string);
+
+  return {
+    clusterId: clusterId.value, id: id.value, schema: schema.value
+  };
+};
+
+export const useFetchResourceWithId = async(type: ResourceType, id: IdType) => {
+  const store = useStore();
+  const i18n = useI18n(store);
+
+  const typeValue = toValue(type);
+  const idValue = toValue(id);
+
+  try {
+    return await store.dispatch('cluster/find', { type: typeValue, id: idValue });
+  } catch (ex: any) {
+    if (ex.status === 404 || ex.status === 403) {
+      store.dispatch('loadingError', new Error(i18n.t('nav.failWhale.resourceIdNotFound', { resource: type, fqid: id }, true)));
+    }
+  }
+};

package/composables/useI18n.ts

@@ -3,17 +3,6 @@ import { Store } from 'vuex';
 import { stringFor } from '@shell/plugins/i18n';
 
 let store: Store<any> | null = null;
-
-export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
-  store = vuexStore;
-
-  if (!store) {
-    throw new Error('usI18n() must be called from setup()');
-  }
-
-  return { t };
-};
-
 /**
  * Allows for consuming i18n strings with the Vue composition API.
  * @param key - The key for the i18n string to translate.
@@ -24,3 +13,15 @@ export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
 const t = (key: string, args?: unknown, raw?: boolean): string => {
   return stringFor(store, key, args, raw);
 };
+
+export type I18n = { t: typeof t };
+
+export const useI18n = (vuexStore: Store<any>): I18n => {
+  store = vuexStore;
+
+  if (!store) {
+    throw new Error('usI18n() must be called from setup()');
+  }
+
+  return { t };
+};

package/composables/useIsNewDetailPageEnabled.ts

@@ -0,0 +1,17 @@
+import { useRoute } from 'vue-router';
+import { LEGACY } from '@shell/config/query-params';
+import { computed } from 'vue';
+
+const enabledByDefault = true;
+
+export const useIsNewDetailPageEnabled = () => {
+  const route = useRoute();
+
+  return computed(() => {
+    if (enabledByDefault) {
+      return route?.query?.[LEGACY] !== 'true';
+    }
+
+    return route?.query?.[LEGACY] === 'false';
+  });
+};

package/config/labels-annotations.js

@@ -116,17 +116,20 @@ export const CATALOG = {
 };
 
 export const FLEET = {
-  REPO_NAME:            'fleet.cattle.io/repo-name',
-  CLUSTER_DISPLAY_NAME: 'management.cattle.io/cluster-display-name',
-  CLUSTER_NAME:         'management.cattle.io/cluster-name',
-  BUNDLE_ID:            'fleet.cattle.io/bundle-id',
-  BUNDLE_NAME:          'fleet.cattle.io/bundle-name',
-  BUNDLE_NAMESPACE:     'fleet.cattle.io/bundle-namespace',
-  MANAGED:              'fleet.cattle.io/managed',
-  CLUSTER_NAMESPACE:    'fleet.cattle.io/cluster-namespace',
-  CLUSTER:              'fleet.cattle.io/cluster',
-  CREATED_BY_USER_ID:   'fleet.cattle.io/created-by-user-id',
-  CREATED_BY_USER_NAME: 'fleet.cattle.io/created-by-display-name',
+  REPO_NAME:                    'fleet.cattle.io/repo-name',
+  HELM_NAME:                    'fleet.cattle.io/fleet-helm-name',
+  CLUSTER_DISPLAY_NAME:         'management.cattle.io/cluster-display-name',
+  CLUSTER_NAME:                 'management.cattle.io/cluster-name',
+  BUNDLE_ID:                    'fleet.cattle.io/bundle-id',
+  BUNDLE_NAME:                  'fleet.cattle.io/bundle-name',
+  BUNDLE_NAMESPACE:             'fleet.cattle.io/bundle-namespace',
+  MANAGED:                      'fleet.cattle.io/managed',
+  CLUSTER_NAMESPACE:            'fleet.cattle.io/cluster-namespace',
+  CLUSTER:                      'fleet.cattle.io/cluster',
+  CREATED_BY_USER_ID:           'fleet.cattle.io/created-by-user-id',
+  CREATED_BY_USER_NAME:         'fleet.cattle.io/created-by-display-name',
+  OCI_STORAGE_SECRET_DEFAULT:   'ui-default-oci-registry',
+  OCI_STORAGE_SECRET_GENERATED: 'fleet.cattle.io/bundle-internal-secret',
 };
 
 export const RBAC = { PRODUCT: 'management.cattle.io/ui-product' };
@@ -190,3 +193,9 @@ export const SYSTEM_LABELS = [
 ];
 
 export const CLOUD_CREDENTIALS = { EXPIRATION: 'rancher.io/expiration-timestamp' };
+
+export const OIDC_CLIENT_SECRET_ANNOTATIONS = {
+  CREATE: 'cattle.io/oidc-client-secret-create',
+  REGEN:  'cattle.io/oidc-client-secret-regenerate',
+  REMOVE: 'cattle.io/oidc-client-secret-remove',
+};