@rancher/shell 3.0.5-rc.8 → 3.0.5-rc.9

package/pages/home.vue

@@ -22,7 +22,7 @@ import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilte
 import TabTitle from '@shell/components/TabTitle.vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 
-import { RESET_CARDS_ACTION, SET_LOGIN_ACTION, SHOW_HIDE_BANNER_ACTION } from '@shell/config/page-actions';
+import { SET_LOGIN_ACTION, SHOW_HIDE_BANNER_ACTION } from '@shell/config/page-actions';
 import { STEVE_NAME_COL, STEVE_STATE_COL } from '@shell/config/pagination-table-headers';
 import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
@@ -75,10 +75,6 @@ export default defineComponent({
           label:  this.t('nav.header.showHideBanner'),
           action: SHOW_HIDE_BANNER_ACTION
         },
-        {
-          label:  this.t('nav.header.restoreCards'),
-          action: RESET_CARDS_ACTION
-        },
       ],
       vendor: getVendor(),
 
@@ -368,10 +364,6 @@ export default defineComponent({
      */
     handlePageAction(action: any) {
       switch (action.action) {
-      case RESET_CARDS_ACTION:
-        this.resetCards();
-        break;
-
       case SHOW_HIDE_BANNER_ACTION:
         this.toggleBanner();
         break;

package/plugins/dashboard-store/resource-class.js

@@ -1847,6 +1847,55 @@ export default class Resource {
     return details;
   }
 
+  get glance() {
+    return this._glance;
+  }
+
+  get _glance() {
+    const type = this.parentNameOverride || this.$rootGetters['type-map/labelFor'](this.schema);
+
+    return [
+      {
+        name:          'state',
+        label:         this.t('component.resource.detail.glance.state'),
+        formatter:     'BadgeStateFormatter',
+        formatterOpts: { row: this },
+        content:       this.stateDisplay
+      },
+      {
+        name:          'type',
+        label:         this.t('component.resource.detail.glance.type'),
+        formatter:     'Link',
+        formatterOpts: {
+          to: this.listLocation, row: {}, options: { internal: true }
+        },
+        content: type
+      },
+      {
+        name:          'namespace',
+        label:         this.t('component.resource.detail.glance.namespace'),
+        formatter:     'Link',
+        formatterOpts: {
+          to: {
+            name:     `c-cluster-product-resource-id`,
+            product:  this.$rootGetters['currentProduct'].id,
+            cluster:  this.$rootGetters['currentCluster'].id,
+            resource: this.type
+          },
+          row:     {},
+          options: { internal: true }
+        },
+        content: this.namespacedName
+      },
+      {
+        name:      'age',
+        label:     this.t('component.resource.detail.glance.age'),
+        formatter: 'LiveDate',
+        content:   this.creationTimestamp
+      }
+    ];
+  }
+
   get t() {
     return this.$rootGetters['i18n/t'];
   }

package/public/index.html

@@ -17,6 +17,7 @@
     </div>
     <div id="modals"><!--Portal content here--></div>
     <div id="slides"></div>
+    <div id="preview"></div>
 
     <script>
         (() => {
@@ -72,4 +73,4 @@
     </style>
 </body>
 
-</html>
+</html>

package/rancher-components/Card/Card.vue

@@ -98,7 +98,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
  .card-container {
   &.highlight-border {
     border-left: 5px solid var(--primary);

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -360,7 +360,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
 $fontColor: var(--input-label);
 
 .checkbox-outer-container {

package/rancher-components/Form/Radio/RadioButton.vue

@@ -226,7 +226,7 @@ export default defineComponent({
   </label>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
 $fontColor: var(--input-label);
 
 .radio-view {

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -311,7 +311,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
 .radio-group {
   &:focus, &:focus-visible {
     border: none;

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -95,7 +95,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang='scss'>
+<style lang='scss' scoped>
 .labeled-tooltip {
     position: absolute;
     width: 100%;
@@ -137,14 +137,4 @@ export default defineComponent({
         @include tooltipColors(var(--success));
     }
 }
-
-// Ensure code blocks inside tootips don't look awful
-.v-popper__popper.v-popper--theme-tooltip {
-  .v-popper__inner {
-    pre {
-      padding: 2px;
-      vertical-align: middle;
-    }
-  }
-}
 </style>

package/rancher-components/Pill/RcCounterBadge/RcCounterBadge.test.ts

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import RcCounterBadge from './index';
+import { Type } from '../types';
+
+describe('component: RcCounterBadge', () => {
+  const types: Type[] = ['active', 'inactive'];
+
+  it.each(types)('should apply correct classes for type "%s"', (type) => {
+    const wrapper = mount(RcCounterBadge, { props: { type, count: 1 } });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.classes()).toContain(type);
+  });
+
+  it('should apply the correct class for disabled', () => {
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count: 1
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.classes()).toContain('disabled');
+  });
+
+  it('should show the correct count below 1000', () => {
+    const count = 999;
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.text()).toBe(count.toString());
+  });
+
+  it('should show the correct count at or above 1000', () => {
+    const count = 1000;
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.text()).toBe('999+');
+  });
+});

package/rancher-components/Pill/RcCounterBadge/RcCounterBadge.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { RcCounterBadgeProps } from '@components/Pill/RcCounterBadge/types';
+import { computed } from 'vue';
+const props = withDefaults(defineProps<RcCounterBadgeProps>(), { disabled: false });
+const displayCount = computed(() => props.count < 1000 ? props.count : '999+');
+</script>
+
+<template>
+  <div
+    class="rc-counter-badge"
+    :class="{[props.type]: true, disabled: props.disabled}"
+  >
+    {{ displayCount }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-counter-badge {
+    display: inline-flex;
+    padding: 1px 8px;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 30px;
+    border: 1px solid var(--rc-active-border);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: Lato;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--body-text);
+
+    &.active {
+        border-color: var(--rc-active-border);
+        background: var(--rc-active-background);
+        cursor: pointer;
+
+        &:hover {
+            border-color: var(--rc-primary-hover);
+            background: var(--rc-active-background);
+        }
+
+        &.disabled {
+            border-color: var(--rc-active-border);
+            background: var(--rc-active-disabled-background);
+            color: var(--rc-disabled-text-color);
+
+            cursor: not-allowed;
+        }
+    }
+
+    &.inactive {
+        background: var(--rc-inactive-background);
+        border-color: var(--rc-inactive-border);
+
+        &.disabled {
+            border-color: var(--rc-inactive-disabled-border);
+            color: var(--rc-disabled-text-color);
+        }
+    }
+}
+</style>

package/rancher-components/Pill/RcCounterBadge/index.ts

@@ -0,0 +1 @@
+export { default } from './RcCounterBadge.vue';

package/rancher-components/Pill/RcCounterBadge/types.ts

@@ -0,0 +1,7 @@
+import { Type } from '../types';
+
+export interface RcCounterBadgeProps {
+    count: number;
+    type: Type;
+    disabled?: boolean;
+}

package/rancher-components/Pill/RcStatusBadge/RcStatusBadge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RcStatusBadgeProps } from '@components/Pill/RcStatusBadge/types';
+import { RcStatusBadgeProps } from './types';
 
 const props = defineProps<RcStatusBadgeProps>();
 </script>

package/rancher-components/Pill/RcStatusBadge/index.ts

@@ -1,2 +1,2 @@
 export { default } from './RcStatusBadge.vue';
-export type { Status } from '@components/Pill/types';
+export type { Status } from '../types';

package/rancher-components/Pill/RcStatusIndicator/RcStatusIndicator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { RcStatusIndicatorProps } from '@components/Pill/RcStatusIndicator/types';
+import { RcStatusIndicatorProps } from './types';
 
 const props = defineProps<RcStatusIndicatorProps>();
 </script>
@@ -25,8 +25,8 @@ const props = defineProps<RcStatusIndicatorProps>();
         border: 1px solid transparent;
 
         &.disc {
-            width: 6px;
-            height: 6px;
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
         }
 

package/rancher-components/Pill/RcStatusIndicator/types.ts

@@ -1,4 +1,4 @@
-import { Status } from '@components/Pill/types';
+import { Status } from '../types';
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
 
 export interface RcStatusIndicatorProps {

package/rancher-components/Pill/RcTag/RcTag.test.ts

@@ -0,0 +1,64 @@
+import { mount } from '@vue/test-utils';
+import RcTag from './index';
+import { Type } from './types';
+
+describe('component: RcTag', () => {
+  const types: Type[] = ['active', 'inactive'];
+
+  it.each(types)('should apply correct classes for type "%s"', (type) => {
+    const wrapper = mount(RcTag, { props: { type } });
+
+    const shapeEl = wrapper.find('.rc-tag');
+
+    expect(shapeEl.classes()).toContain(type);
+  });
+
+  it('should apply the correct class for disabled', () => {
+    const wrapper = mount(RcTag, { props: { type: 'active', disabled: true } });
+
+    const shapeEl = wrapper.find('.rc-tag');
+
+    expect(shapeEl.classes()).toContain('disabled');
+  });
+
+  it('should show the close button if showClose is true', () => {
+    const wrapper = mount(RcTag, {
+      props: {
+        type: 'active', disabled: true, showClose: true
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-tag');
+
+    expect(shapeEl.find('.icon-close').exists()).toBeTruthy();
+  });
+
+  it('should emit close event when close button is clicked', () => {
+    const wrapper = mount(RcTag, {
+      props: {
+        type: 'active', disabled: true, showClose: true
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-tag');
+    const close = shapeEl.find('button');
+
+    close.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('should add the aria-label to the button when specified', () => {
+    const closeAria = 'CLOSE_ARIA';
+    const wrapper = mount(RcTag, {
+      props: {
+        type: 'active', disabled: true, showClose: true, closeAriaLabel: closeAria
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-tag');
+    const close = shapeEl.find('button');
+
+    expect(close.attributes('aria-label')).toBe(closeAria);
+  });
+});

package/rancher-components/Pill/RcTag/RcTag.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import RcButton from '@components/RcButton/RcButton.vue';
+import { RcTagProps } from './types';
+
+const props = withDefaults(defineProps<RcTagProps>(), {
+  disabled: false, showClose: false, highlight: undefined
+});
+const emit = defineEmits(['close']);
+</script>
+
+<template>
+  <div
+    class="rc-tag"
+    :class="{[props.type]: true, disabled: props.disabled, highlight: props.highlight}"
+  >
+    <slot name="default" />
+    <RcButton
+      v-if="props.showClose"
+      ghost
+      :aria-label="props.closeAriaLabel"
+      @click="emit('close')"
+    >
+      <i class="icon icon-close" />
+    </RcButton>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-tag {
+    display: inline-flex;
+    padding: 1px 8px;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 4px;
+    border: 1px solid var(--rc-active-border);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: Lato;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--body-text);
+
+    button {
+      $size: 12px;
+      padding: 0;
+      line-height: $size;
+      min-height: $size;
+      background: none;
+
+      &, .icon-close {
+        width: $size;
+        height: $size;
+        font-size: $size;
+      }
+    }
+
+    &.disabled button {
+      cursor: not-allowed;
+    }
+
+    &.active {
+        border-color: var(--rc-active-border);
+        background: var(--rc-active-background);
+        cursor: pointer;
+
+        &.highlight, &:hover {
+            border-color: var(--rc-primary-hover);
+            background: var(--rc-active-background);
+        }
+
+        &.disabled {
+            border-color: var(--rc-active-border);
+            background: var(--rc-active-disabled-background);
+            color: var(--rc-disabled-text-color);
+
+            cursor: not-allowed;
+        }
+    }
+
+    &.inactive {
+        background: var(--rc-inactive-background);
+        border-color: var(--rc-inactive-border);
+
+        &.disabled {
+            border-color: var(--rc-inactive-disabled-border);
+            color: var(--rc-disabled-text-color);
+        }
+    }
+}
+</style>

package/rancher-components/Pill/RcTag/index.ts

@@ -0,0 +1 @@
+export { default } from './RcTag.vue';

package/rancher-components/Pill/RcTag/types.ts

@@ -0,0 +1,9 @@
+import { Type } from '../types';
+
+export interface RcTagProps {
+  type: Type;
+  disabled?: boolean;
+  showClose?: boolean;
+  closeAriaLabel?: string;
+  highlight?: boolean;
+}

package/rancher-components/Pill/types.ts

@@ -1,2 +1,3 @@
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
 export type Status = 'info' | 'success' | 'warning' | 'error' | 'unknown' | 'none';
+export type Type = 'active' | 'inactive';

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -405,6 +405,7 @@ $image-medium-box-width: 48px;
 
     &-action-menu {
       margin-left: 8px;
+      margin-right: -8px;
     }
   }
 

package/rancher-components/RcItemCard/RcItemCardAction.vue

@@ -17,8 +17,20 @@
 <template>
   <div
     item-card-action
+    class="rc-item-card-action"
     data-testid="rc-item-card-action"
   >
     <slot />
   </div>
 </template>
+
+<style lang="scss">
+.rc-item-card-action {
+  .v-popper {
+    .icon-actions {
+      color: var(--body-text);
+      font-size: 19px;
+    }
+  }
+}
+</style>

package/store/__tests__/catalog.test.ts

@@ -296,4 +296,67 @@ describe('catalog', () => {
       expect(result).toHaveLength(0);
     });
   });
+
+  describe('getters', () => {
+    describe('version', () => {
+      it('should find a version from a chart, respecting the showDeprecated flag for charts', () => {
+        // A regular chart with some versions
+        const regularChart = {
+          repoType:   'cluster',
+          repoName:   'rancher-charts',
+          chartName:  'regular-chart',
+          deprecated: false,
+          versions:   [{ version: '1.2.3' }, { version: '1.2.4' }]
+        };
+        // A deprecated chart with some versions
+        const deprecatedChart = {
+          repoType:   'cluster',
+          repoName:   'rancher-charts',
+          chartName:  'deprecated-chart',
+          deprecated: true,
+          versions:   [{ version: '2.0.0' }, { version: '2.1.0' }]
+        };
+
+        const allCharts = [regularChart, deprecatedChart];
+        const state = {};
+        const localGetters = {
+          charts: allCharts,
+          chart:  (args: any) => getters.chart(state, { charts: allCharts })(args)
+        };
+
+        // Scenario 1: Get a version from a regular chart
+        const result1 = getters.version(state, localGetters)({
+          repoType:       'cluster',
+          repoName:       'rancher-charts',
+          chartName:      'regular-chart',
+          versionName:    '1.2.3',
+          showDeprecated: false
+        });
+
+        expect(result1).toStrictEqual({ version: '1.2.3' });
+
+        // Scenario 2: Get a version from a deprecated chart
+        const result2 = getters.version(state, localGetters)({
+          repoType:       'cluster',
+          repoName:       'rancher-charts',
+          chartName:      'deprecated-chart',
+          versionName:    '2.0.0',
+          showDeprecated: true
+        });
+
+        expect(result2).toStrictEqual({ version: '2.0.0' });
+
+        // Scenario 3: Try to get a version from a deprecated chart without the flag should fail
+        const result3 = getters.version(state, localGetters)({
+          repoType:       'cluster',
+          repoName:       'rancher-charts',
+          chartName:      'deprecated-chart',
+          versionName:    '2.0.0',
+          showDeprecated: false
+        });
+
+        expect(result3).toBeNull();
+      });
+    });
+  });
 });

package/store/catalog.js

@@ -237,10 +237,10 @@ export const getters = {
 
   version(state, getters) {
     return ({
-      repoType, repoName, chartName, versionName
+      repoType, repoName, chartName, versionName, showDeprecated
     }) => {
       const chart = getters['chart']({
-        repoType, repoName, chartName
+        repoType, repoName, chartName, showDeprecated
       });
 
       if ( !chart ) {

package/store/type-map.js

@@ -103,8 +103,6 @@
 //                               depaginate: undefined -- Use this to depaginate requests for this type
 //                               resourceEditMasthead: true   -- Show the Masthead in the edit resource component
 //                               customRoute: undefined,
-//                               hasGraph: undefined   -- If true, render ForceDirectedTreeChart graph (ATTENTION: option graphConfig is needed also!!!)
-//                               graphConfig: undefined   -- Use this to pass along the graph configuration
 //                               notFilterNamespace:  undefined -- Define namespaces that do not need to be filtered
 //                               localOnly: False -- Hide this type from the nav/search bar on downstream clusters
 //                               custom: any - Custom options for a given type
@@ -208,7 +206,6 @@ export const SPOOFED_PREFIX = '__[[spoofed]]__';
 export const SPOOFED_API_PREFIX = '__[[spoofedapi]]__';
 
 const instanceMethods = {};
-const graphConfigMap = {};
 
 export const IF_HAVE = {
   V2_MONITORING:            'v2-monitoring',
@@ -291,10 +288,6 @@ export function DSL(store, product, module = 'type-map') {
     },
 
     configureType(match, options) {
-      if (options.graphConfig) {
-        graphConfigMap[match] = options.graphConfig;
-        delete options.graphConfig;
-      }
       store.commit(`${ module }/configureType`, { ...options, match });
     },
 
@@ -1178,14 +1171,9 @@ export const getters = {
     };
   },
 
-  hasGraph(state, getters) {
-    return (resource) => {
-      const typeOptions = getters['optionsFor'](resource);
-
-      if (typeOptions && typeOptions.hasGraph) {
-        return graphConfigMap[resource];
-      }
-
+  // This has to be left in to support extensions which use shell version 3.0.5-rc.8 or earlier, this extensions have a version of ResourceDetail/index.vue which still invokes this method.
+  hasGraph() {
+    return () => {
       return null;
     };
   },