@rancher/shell 3.0.5-rc.5 → 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/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/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

@@ -193,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',
+};

package/config/product/auth.js

@@ -62,8 +62,19 @@ export function init(store) {
       }
     }
   });
+
   configureType(MANAGEMENT.USER, { showListMasthead: false });
 
+  configureType(MANAGEMENT.OIDC_CLIENT, {
+    listCreateButtonLabelKey: 'oidcclient.listViewCreate',
+    isCreatable:              true,
+    isEditable:               true,
+    isRemovable:              true,
+    showAge:                  true,
+    showState:                true,
+    canYaml:                  true,
+  });
+
   spoofedType({
     labelKey:          'typeLabel."group.principal"',
     type:              NORMAN.SPOOFED.GROUP_PRINCIPAL,
@@ -132,6 +143,7 @@ export function init(store) {
         }));
     }
   });
+
   configureType(NORMAN.SPOOFED.GROUP_PRINCIPAL, {
     isCreatable:      false,
     showAge:          false,
@@ -139,9 +151,11 @@ export function init(store) {
     isRemovable:      false,
     showListMasthead: false,
   });
+
   // Use labelFor... so lookup succeeds with .'s in path.... and end result is 'trimmed' as per other entries
   mapType(NORMAN.SPOOFED.GROUP_PRINCIPAL, store.getters['type-map/labelFor']({ id: NORMAN.SPOOFED.GROUP_PRINCIPAL }, 2));
   weightType(NORMAN.SPOOFED.GROUP_PRINCIPAL, 101, true);
+  weightType(MANAGEMENT.OIDC_CLIENT, 90, true);
 
   virtualType({
     labelKey:   'auth.roleTemplate',
@@ -181,7 +195,8 @@ export function init(store) {
     'config',
     USERS_VIRTUAL_TYPE,
     NORMAN.SPOOFED.GROUP_PRINCIPAL,
-    ROLES_VIRTUAL_TYPE
+    ROLES_VIRTUAL_TYPE,
+    MANAGEMENT.OIDC_CLIENT
   ]);
 
   headers(NORMAN.SPOOFED.GROUP_PRINCIPAL, [

package/config/product/{cis.js → compliance.js}

@@ -1,9 +1,9 @@
 import { DSL } from '@shell/store/type-map';
-import { CIS } from '@shell/config/types';
+import { COMPLIANCE } from '@shell/config/types';
 import { STATE, NAME as NAME_HEADER, AGE } from '@shell/config/table-headers';
 
-export const NAME = 'cis';
-export const CHART_NAME = 'rancher-cis-benchmark';
+export const NAME = 'compliance';
+export const CHART_NAME = 'rancher-compliance';
 
 export function init(store) {
   const {
@@ -14,24 +14,21 @@ export function init(store) {
     headers
   } = DSL(store, NAME);
 
-  product({
-    ifHaveGroup: /^(.*\.)*cis\.cattle\.io$/,
-    icon:        'cis',
-  });
+  product({ ifHaveGroup: /^(.*\.)*compliance\.cattle\.io$/ });
 
-  weightType(CIS.CLUSTER_SCAN, 3, true);
-  weightType(CIS.CLUSTER_SCAN_PROFILE, 2, true);
-  weightType(CIS.BENCHMARK, 1, true);
+  weightType(COMPLIANCE.CLUSTER_SCAN, 3, true);
+  weightType(COMPLIANCE.CLUSTER_SCAN_PROFILE, 2, true);
+  weightType(COMPLIANCE.BENCHMARK, 1, true);
 
   basicType([
-    'cis.cattle.io.clusterscan',
-    'cis.cattle.io.clusterscanprofile',
-    'cis.cattle.io.clusterscanbenchmark',
+    'compliance.cattle.io.clusterscan',
+    'compliance.cattle.io.clusterscanprofile',
+    'compliance.cattle.io.clusterscanbenchmark',
   ]);
 
-  configureType(CIS.CLUSTER_SCAN, { canYaml: false, showAge: false });
+  configureType(COMPLIANCE.CLUSTER_SCAN, { canYaml: false, showAge: false });
 
-  headers(CIS.CLUSTER_SCAN, [
+  headers(COMPLIANCE.CLUSTER_SCAN, [
     STATE,
     NAME_HEADER,
     {
@@ -44,7 +41,7 @@ export function init(store) {
     },
     {
       name:      'total',
-      labelKey:  'cis.scan.total',
+      labelKey:  'compliance.scan.total',
       value:     'status.summary.total',
       formatter: 'ScanResult'
 
@@ -52,34 +49,34 @@ export function init(store) {
     {
       name:      'pass',
       value:     'status.summary.pass',
-      labelKey:  'cis.scan.pass',
+      labelKey:  'compliance.scan.pass',
       formatter: 'ScanResult'
 
     },
     {
       name:      'fail',
-      labelKey:  'cis.scan.fail',
+      labelKey:  'compliance.scan.fail',
       value:     'status.summary.fail',
       formatter: 'ScanResult'
 
     },
     {
       name:      'warn',
-      labelKey:  'cis.scan.warn',
+      labelKey:  'compliance.scan.warn',
       value:     'status.summary.warn',
       formatter: 'ScanResult'
 
     },
     {
       name:      'skip',
-      labelKey:  'cis.scan.skip',
+      labelKey:  'compliance.scan.skip',
       value:     'status.summary.skip',
       formatter: 'ScanResult'
 
     },
     {
       name:      'notApplicable',
-      labelKey:  'cis.scan.notApplicable',
+      labelKey:  'compliance.scan.notApplicable',
       value:     'status.summary.notApplicable',
       formatter: 'ScanResult'
 
@@ -107,12 +104,12 @@ export function init(store) {
     },
   ]);
 
-  headers(CIS.CLUSTER_SCAN_PROFILE, [
+  headers(COMPLIANCE.CLUSTER_SCAN_PROFILE, [
     STATE,
     NAME_HEADER,
     {
       name:          'benchmarkVersion',
-      labelKey:      'cis.benchmarkVersion',
+      labelKey:      'compliance.benchmarkVersion',
       value:         'spec.benchmarkVersion',
       formatter:     'Link',
       formatterOpts: { options: { internal: true }, urlKey: 'benchmarkVersionLink' },
@@ -120,18 +117,18 @@ export function init(store) {
     },
     {
       name:     'skippedTests',
-      labelKey: 'cis.testsSkipped',
+      labelKey: 'compliance.testsSkipped',
       value:    'numberTestsSkipped',
       sort:     ['numberTestsSkipped']
     }
   ]);
 
-  headers(CIS.BENCHMARK, [
+  headers(COMPLIANCE.BENCHMARK, [
     STATE,
     NAME_HEADER,
     {
       name:     'clusterProvider',
-      labelKey: 'cis.clusterProvider',
+      labelKey: 'compliance.clusterProvider',
       value:    'spec.clusterProvider',
     },
     {

package/config/product/explorer.js

@@ -106,6 +106,10 @@ export function init(store) {
     POD,
   ], 'workload');
 
+  setGroupDefaultType('workload', () => {
+    return store.getters['features/get'](STEVE_CACHE) ? WORKLOAD_TYPES.DEPLOYMENT : undefined;
+  });
+
   weightGroup('cluster', 99, true);
   weightGroup('workload', 98, true);
   weightGroup('serviceDiscovery', 96, true);
@@ -160,7 +164,7 @@ export function init(store) {
   mapGroup(/^(.*\.)?(k3s)\.cattle\.io$/, 'K3s');
   mapGroup(/^(.*\.)?(helm)\.cattle\.io$/, 'Helm');
   mapGroup(/^(.*\.)?upgrade\.cattle\.io$/, 'Upgrade Controller');
-  mapGroup(/^(.*\.)?cis\.cattle\.io$/, 'CIS');
+  mapGroup(/^(.*\.)?compliance\.cattle\.io$/, 'Compliance');
   mapGroup(/^(.*\.)?traefik\.containo\.us$/, 'Træfik');
   mapGroup(/^(catalog|management|project|ui)\.cattle\.io$/, 'Rancher');
   mapGroup(/^(.*\.)?istio\.io$/, 'Istio');

package/config/product/fleet.js

@@ -115,6 +115,13 @@ export function init(store) {
       sort:      'counts.gitRepos',
       formatter: 'Number',
     },
+    {
+      name:      'helmOps',
+      labelKey:  'tableHeaders.helmOps',
+      value:     'counts.helmOps',
+      sort:      'counts.helmOps',
+      formatter: 'Number',
+    },
     {
       name:      'clusters',
       labelKey:  'tableHeaders.clusters',

package/config/product/settings.js

@@ -1,5 +1,5 @@
 import { DSL } from '@shell/store/type-map';
-import { MANAGEMENT, HELM } from '@shell/config/types';
+import { FLEET, MANAGEMENT, HELM } from '@shell/config/types';
 import {
   STATE,
   FEATURE_DESCRIPTION,
@@ -35,7 +35,7 @@ export function init(store) {
     labelKey:   'advancedSettings.label',
     name:       'settings',
     namespaced: false,
-    weight:     100,
+    weight:     101,
     icon:       'folder',
     route:      {
       name:   'c-cluster-product-resource',
@@ -51,7 +51,7 @@ export function init(store) {
     labelKey:   'featureFlags.label',
     name:       'features',
     namespaced: false,
-    weight:     99,
+    weight:     100,
     icon:       'folder',
     route:      {
       name:   'c-cluster-product-resource',
@@ -64,22 +64,22 @@ export function init(store) {
 
   virtualType({
     ifHaveType: MANAGEMENT.SETTING,
-    labelKey:   'branding.label',
-    name:       'brand',
+    labelKey:   'banner.settingName',
+    name:       'banners',
     namespaced: false,
-    weight:     98,
+    weight:     99,
     icon:       'folder',
-    route:      { name: 'c-cluster-settings-brand' }
+    route:      { name: 'c-cluster-settings-banners' }
   });
 
   virtualType({
     ifHaveType: MANAGEMENT.SETTING,
-    labelKey:   'banner.settingName',
-    name:       'banners',
+    labelKey:   'branding.label',
+    name:       'brand',
     namespaced: false,
     weight:     98,
     icon:       'folder',
-    route:      { name: 'c-cluster-settings-banners' }
+    route:      { name: 'c-cluster-settings-brand' }
   });
 
   virtualType({
@@ -102,13 +102,24 @@ export function init(store) {
     route:      { name: 'c-cluster-settings-links' }
   });
 
+  virtualType({
+    ifHaveType: FLEET.GIT_REPO,
+    labelKey:   'fleet.settings.label',
+    name:       'fleet-settings',
+    namespaced: false,
+    weight:     95,
+    icon:       'folder',
+    route:      { name: 'c-cluster-settings-fleet' }
+  });
+
   basicType([
     'settings',
     'features',
     'brand',
     'banners',
     'performance',
-    'links'
+    'links',
+    'fleet-settings'
   ]);
 
   configureType(MANAGEMENT.SETTING, {

package/config/query-params.js

@@ -79,3 +79,6 @@ export const CLOUD_CREDENTIAL = 'cloud';
 // NAMESPACE/PROJECT
 export const PROJECT_ID = 'projectId';
 export const FLAT_VIEW = 'flatView';
+
+// RANCHER OIDC CLIENT
+export const RANCHER_AS_OIDC_QUERY_PARAMS = ['scope', 'client_id', 'redirect_uri', 'response_type'];

package/config/roles.ts

@@ -264,7 +264,7 @@ export const SCOPED_RESOURCES = {
         'Jobs',
       ]
     },
-    'cis.cattle.io': {
+    'compliance.cattle.io': {
       resources: [
         'ClusterScans',
         'ClusterScanReports'