@rancher/shell 3.0.5-rc.8 → 3.0.5

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

@@ -2,13 +2,14 @@ import https from 'https';
 import { CSRF } from '@shell/config/cookies';
 
 export default function({
-  $axios, $cookies, isDev, req
+  $axios, store, isDev, req
 }) {
   $axios.defaults.headers.common['Accept'] = 'application/json';
   $axios.defaults.withCredentials = true;
 
   $axios.onRequest((config) => {
-    const csrf = $cookies.get(CSRF, { parseJSON: false });
+    const options = { parseJSON: false };
+    const csrf = store.getters['cookies/get']({ key: CSRF, options });
 
     if ( csrf ) {
       config.headers['x-api-csrf'] = csrf;

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/plugins/ember-cookie.js

@@ -1,13 +1,17 @@
 import { REDIRECTED } from '@shell/config/cookies';
 
-export default function({ $cookies }) {
+export default function({ store }) {
   // This tells Ember not to redirect back to us once you've already been to dashboard once.
   // TODO: Remove this once the ember portion of the app is no longer needed
-  if ( !$cookies.get(REDIRECTED) ) {
-    $cookies.set(REDIRECTED, 'true', {
+  if ( !store.getters['cookies/get']({ key: REDIRECTED })) {
+    const options = {
       path:     '/',
       sameSite: true,
       secure:   true,
+    };
+
+    store.commit('cookies/set', {
+      key: REDIRECTED, value: 'true', options
     });
   }
 }

package/plugins/steve/subscribe.js

@@ -369,13 +369,15 @@ const sharedActions = {
       if (!this.$workers[getters.storeName]) {
         await createWorker(this, ctx);
       }
+      const options = { parseJSON: false };
+      const csrf = rootGetters['cookies/get']({ key: CSRF, options });
 
       // if the worker is in advanced mode then it'll contain it's own socket which it calls a 'watcher'
       this.$workers[getters.storeName].postMessage({
         createWatcher: {
           metadata,
-          url:  `${ state.config.baseUrl }/subscribe`,
-          csrf: this.$cookies.get(CSRF, { parseJSON: false }),
+          url: `${ state.config.baseUrl }/subscribe`,
+          csrf,
           maxTries
         }
       });

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/scripts/test-plugins-build.sh

@@ -239,7 +239,6 @@ function clone_repo_test_extension_build() {
 clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
-clone_repo_test_extension_build "rancher" "capi-ui-extension" "capi"
 clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
 clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"