@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/components/Resource/Detail/Card/StatusCard/__tests__/StatusCard.test.ts

@@ -3,6 +3,7 @@ import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.
 import StatusBar from '@shell/components/Resource/Detail/StatusBar.vue';
 import StatusRow from '@shell/components/Resource/Detail/StatusRow.vue';
 import Scaler from '@shell/components/Resource/Detail/Card/Scaler.vue';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 describe('component: StatusCard', () => {
   const mockResource = (stateDisplay: string, stateSimpleColor: string) => ({
@@ -106,4 +107,64 @@ describe('component: StatusCard', () => {
       expect(wrapper.findComponent(Scaler).exists()).toBe(false);
     });
   });
+
+  describe('with summaryData', () => {
+    it('should render StatusBar and StatusRows from summary counts', () => {
+      const summaryData: SummaryResult = {
+        count:   5,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, error: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(true);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should use summaryData over resources when both are provided', () => {
+      const summaryData: SummaryResult = {
+        count:   4,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 3 }, completed: { total: 1 } } }]
+      };
+      const resources = [
+        mockResource('Running', 'text-success'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should fall back to resources when summaryData has no summary', () => {
+      const summaryData: SummaryResult = { count: 0, summary: null };
+      const resources = [
+        mockResource('Running', 'text-success'),
+        mockResource('Error', 'text-error'),
+      ];
+
+      const wrapper = mountCard({ summaryData, resources });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should show noResourcesMessage when summaryData has no counts', () => {
+      const summaryData: SummaryResult = { count: 0, summary: [] };
+
+      const wrapper = mountCard({ summaryData, noResourcesMessage: 'No pods' });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(false);
+      expect(wrapper.find('.text-deemphasized').text()).toBe('No pods');
+    });
+
+    it('should render a single state from summary', () => {
+      const summaryData: SummaryResult = {
+        count:   2,
+        summary: [{ property: 'metadata.state.name', counts: { active: { total: 2 } } }]
+      };
+
+      const wrapper = mountCard({ summaryData });
+
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(1);
+    });
+  });
 });

package/components/Resource/Detail/Card/StatusCard/index.vue

@@ -8,10 +8,13 @@ import { useI18n } from '@shell/composables/useI18n';
 import { StateColor } from '@shell/utils/style';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { colorForState as colorForStateFn, stateDisplay as stateDisplayFn } from '@shell/plugins/dashboard-store/resource-class';
+import type { SummaryResult } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export interface Props {
   title: string;
   resources?: any[];
+  summaryData?: SummaryResult | null;
   showScaling?: boolean;
   noResourcesMessage?: string;
 }
@@ -23,23 +26,47 @@ const i18n = useI18n(store);
 
 const props = withDefaults(defineProps<Props>(), {
   resources:          undefined,
+  summaryData:        undefined,
   showScaling:        false,
   noResourcesMessage: undefined
 });
 const emit = defineEmits(['decrease', 'increase']);
 
+const summaryStateCounts = computed(() => {
+  const summary = props.summaryData?.summary;
+
+  if (!summary?.length) {
+    return null;
+  }
+
+  const entry = summary.find((s) => s.property === 'metadata.state.name');
+
+  return entry?.counts || null;
+});
+
 const segmentAccumulator = computed(() => {
   interface Value {
     count: number;
   }
   const accumulator: {[key in StateColor]?: Value} = {};
-
-  props.resources?.forEach((resource: any) => {
-    const color: StateColor = resource.stateSimpleColor;
-
-    accumulator[color] = accumulator[color] || { count: 0 };
-    accumulator[color].count++;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color: StateColor = resource.stateSimpleColor || 'disabled';
+
+      accumulator[color] = accumulator[color] || { count: 0 };
+      accumulator[color].count++;
+    });
+  }
 
   return accumulator;
 });
@@ -50,21 +77,40 @@ const rowAccumulator = computed(() => {
     color: StateColor;
   }
   const accumulator: {[key in string]: Value} = {};
-
-  props.resources?.forEach((resource: any) => {
-    accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0 };
-    accumulator[resource.stateDisplay].count++;
-    accumulator[resource.stateDisplay].color = resource.stateSimpleColor.replace('text-', '') as StateColor;
-  });
+  const stateCounts = summaryStateCounts.value;
+
+  if (stateCounts) {
+    for (const [state, stateCount] of Object.entries(stateCounts)) {
+      const display = stateDisplayFn(state) as string;
+      const colorRaw = colorForStateFn(state) as string;
+      const color = (colorRaw?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[display] = accumulator[display] || { count: 0, color };
+      accumulator[display].count += stateCount.total;
+    }
+  } else {
+    props.resources?.forEach((resource: any) => {
+      const color = (resource.stateSimpleColor?.replace('text-', '') || 'disabled') as StateColor;
+
+      accumulator[resource.stateDisplay] = accumulator[resource.stateDisplay] || { count: 0, color };
+      accumulator[resource.stateDisplay].count++;
+    });
+  }
 
   return accumulator;
 });
 
 const percent = (count: number, total: number) => {
-  return count / total * 100;
+  return total > 0 ? count / total * 100 : 0;
 };
 
-const count = computed(() => props.resources?.length || 0);
+const count = computed(() => {
+  if (summaryStateCounts.value) {
+    return props.summaryData?.count ?? 0;
+  }
+
+  return props.resources?.length ?? 0;
+});
 
 const segmentColors = computed(() => Object.keys(segmentAccumulator.value) as StateColor[]);
 const segments = computed(() => segmentColors.value.map((color: StateColor) => ({

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -103,6 +103,8 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
+      display: flex;
+      align-items: center;
       gap: 8px;
 
       // Hide clearfix pseudo-elements inherited from the global .row class

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -110,9 +110,12 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     }
 
     .row {
-        display: block;
-        width: 100%;
         display: inline-block;
+        width: 100%;
+
+        &::before, &::after {
+            display: none;
+        }
 
         &:not(:nth-child(2)) {
             margin-top: 4px;

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -92,18 +92,14 @@ const previewId = randomStr();
     max-width: calc(100%);
   }
 
-  .rc-tag {
-    display: inline-block;
-    line-height: normal;
-  }
-
   .tag-data {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0;
     max-width: calc(100%);
-    line-height: normal;
+    line-height: 1;
   }
 
   & .btn.btn-medium.rc-button.variant-ghost {

package/components/ResourceDetail/index.vue

@@ -169,7 +169,7 @@ export default {
     } else {
       let fqid = id;
 
-      if ( schema.attributes?.namespaced && namespace ) {
+      if ( schema?.attributes?.namespaced && namespace ) {
         fqid = `${ namespace }/${ fqid }`;
       }
 

package/components/ResourceList/Masthead.vue

@@ -74,6 +74,11 @@ export default {
       default: false
     },
 
+    showFavorite: {
+      type:    Boolean,
+      default: true
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -202,7 +207,7 @@ export default {
     <div class="title">
       <h1 class="m-0">
         <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
-          v-if="isExplorer"
+          v-if="isExplorer && showFavorite"
           :resource="favoriteResource || resource"
         />
       </h1>
@@ -267,6 +272,7 @@ export default {
       'title actions'
       'sub-header sub-header'
       'state-banner state-banner';
+    margin-bottom: 24px;
   }
 
   .sub-header {

package/components/ResourceList/index.vue

@@ -10,6 +10,9 @@ import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
 import perfSettingsUtils from '@shell/utils/perf-setting.utils';
+import { BadgeState } from '@components/BadgeState';
+import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
+import { useStateColor } from '@shell/composables/useStateColor';
 
 export default {
   name: ResourceListComponentName,
@@ -20,10 +23,17 @@ export default {
     Masthead,
     ResourceLoadingIndicator,
     IconMessage,
-    ExtensionPanel
+    ExtensionPanel,
+    BadgeState,
   },
   mixins: [ResourceFetch],
 
+  setup() {
+    const { toStateColor } = useStateColor();
+
+    return { toStateColor };
+  },
+
   props: {
     hasAdvancedFiltering: {
       type:    Boolean,
@@ -155,6 +165,41 @@ export default {
       return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
 
+    activeStateFilters() {
+      const raw = this.$route?.query?.stateFilter;
+
+      if (!raw) {
+        return [];
+      }
+
+      const states = raw.split(',').filter(Boolean);
+
+      return states.map((s) => {
+        const match = this.rows.find((row) => row.metadata?.state?.name === s);
+
+        if (match) {
+          return {
+            label: match.stateDisplay,
+            color: match.stateBackground,
+          };
+        }
+
+        return {
+          label: stateDisplay(s, true),
+          color: `bg-${ this.toStateColor(s, this.resource) }`,
+        };
+      });
+    },
+
+  },
+
+  methods: {
+    clearStateFilter() {
+      const query = { ...this.$route.query };
+
+      delete query.stateFilter;
+      this.$router.push({ ...this.$route, query });
+    },
   },
 
   watch: {
@@ -260,6 +305,28 @@ export default {
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
     >
+      <template
+        v-if="activeStateFilters.length"
+        #subHeader
+      >
+        <div class="state-filter-bar text-muted">
+          {{ t('resourceList.stateFilterApplied') }}
+          <BadgeState
+            v-for="state in activeStateFilters"
+            :key="state.label"
+            :color="state.color"
+            :label="state.label"
+            class="badge-state-font-size"
+          />
+          <span>.</span>
+          <a
+            role="button"
+            @click="clearStateFilter"
+          >
+            {{ t('resourceList.clearStateFilter') }}
+          </a>
+        </div>
+      </template>
       <template #extraActions>
         <slot name="extraActions" />
       </template>
@@ -317,4 +384,18 @@ export default {
       top: 10px;
       right: 10px;
     }
+
+    .state-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    .badge-state-font-size {
+      font-size: .85em;
+    }
 </style>

package/components/ResourceTable.vue

@@ -746,6 +746,7 @@ export default {
       <ButtonGroup
         v-model:value="group"
         :options="_groupOptions"
+        size="medium"
       />
     </template>
 

package/components/RichTranslation.vue

@@ -74,8 +74,11 @@ export default defineComponent({
           const content = enclosingTagName ? match[2] : '';
 
           if (slots[tagName]) {
-            // If a slot is provided for this tag, render the slot with the content.
-            children.push(slots[tagName]({ content: purifyHTML(content) }));
+            const slotContent = slots[tagName]({ content: purifyHTML(content) });
+
+            if (slotContent) {
+              children.push(...slotContent);
+            }
           } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
             // If it's an allowed HTML tag, render it directly.
             if (content) {

package/components/Setting.vue

@@ -29,6 +29,7 @@ export default {
           <span
             v-if="value.fromEnv"
             class="modified"
+            :data-testid="`advanced-setting-env-label-${value.id}`"
           >{{ t('advancedSettings.setEnv') }}</span>
           <span
             v-else-if="value.customized"

package/components/SortableTable/index.vue

@@ -1125,7 +1125,6 @@ export default {
                 v-clean-tooltip="actionTooltip"
                 type="button"
                 variant="primary"
-                size="large"
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
@@ -1146,6 +1145,7 @@ export default {
                   :disabled="!selectedRows.length"
                   :hidden-actions="hiddenActions"
                   :action-tooltip="actionTooltip"
+                  size="medium"
                   @click="applyTableAction"
                   @mouseover="setBulkActionOfInterest"
                   @mouseleave="setBulkActionOfInterest"
@@ -1158,10 +1158,11 @@ export default {
                   :disable-button="!selectedRows.length"
                   size="sm"
                 >
-                  <template #button-content>
+                  <template #button-content="{ buttonSize }">
                     <button
                       ref="actionDropDown"
                       class="btn bg-primary mr-0"
+                      :class="buttonSize"
                       :disabled="!selectedRows.length"
                     >
                       <i class="icon icon-gear" />
@@ -1874,7 +1875,7 @@ export default {
   }
 
   .search-box {
-    height: 40px;
+    height: 32px;
     margin-left: 10px;
     min-width: 180px;
   }

package/components/SubtleLink.vue

@@ -1,25 +1,50 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RouterLink, RouteLocationRaw } from 'vue-router';
 
 export interface Props {
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
+  href?: string;
+  target?: string;
+  openInNewTabLabel?: string;
 }
 
-const { to } = defineProps<Props>();
+const props = defineProps<Props>();
+
+const isExternal = computed(() => !!props.href);
 </script>
 
 <template>
-  <RouterLink
+  <component
+    :is="isExternal ? 'a' : RouterLink"
     class="subtle-link"
-    :to="to"
+    v-bind="isExternal
+      ? { href, target, rel: target === '_blank' ? 'noopener noreferrer nofollow' : undefined }
+      : { to }"
   >
-    <slot name="default" />
-  </RouterLink>
+    <span
+      v-if="openInNewTabLabel"
+      class="sr-only"
+    >{{ openInNewTabLabel }}</span>
+    <slot name="default" /><span v-if="openInNewTabLabel">&nbsp;</span><i
+      v-if="openInNewTabLabel"
+      class="link-icon icon icon-external-link"
+    />
+  </component>
 </template>
 
 <style lang="scss" scoped>
 .subtle-link {
     text-decoration: underline;
     color: var(--body-text);
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+}
+
+.link-icon {
+  display: inline;
 }
 </style>

package/components/Tabbed/Tab.vue

@@ -1,8 +1,14 @@
 <script>
 import { useTabCountWatcher } from '@shell/components/form/ResourceTabs/composable';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { computed, inject, useTemplateRef } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
-  inject: ['addTab', 'removeTab', 'sideTabs'],
+  name: 'Tab',
+
+  inject: ['addTab', 'removeTab', 'sideTabs', 'select'],
 
   emits: ['active'],
 
@@ -64,9 +70,28 @@ export default {
   },
 
   setup(props) {
-    const { count, isCountVisible } = useTabCountWatcher();
+    const select = inject('select');
+    const store = useStore();
+    const { t } = useI18n(store);
+    const label = computed(() => {
+      if (props.labelKey && typeof t === 'function') {
+        return t(props.labelKey);
+      }
 
-    return { inferredCount: count, isInferredCountVisible: isCountVisible };
+      return props.label ?? props.name;
+    });
+    const { count, isCountVisible } = useTabCountWatcher();
+    const summarizedContainerRef = useTemplateRef('tab-summarized-container');
+    // when a Tab is scrolled to, call its Tabbed's 'select' method to ensure the Tab is active
+    const { summary } = useInSummary({
+      scrollTo:   () => select(props.name),
+      label,
+      elementRef: summarizedContainerRef,
+    });
+
+    return {
+      inferredCount: count, isInferredCountVisible: isCountVisible, summary
+    };
   },
 
   data() {
@@ -143,6 +168,7 @@ export default {
   <section
     v-show="active"
     :id="name"
+    ref="tab-summarized-container"
     :aria-hidden="!active"
     role="tabpanel"
     :aria-labelledby="`tab-${name}`"

package/components/Tabbed/index.vue

@@ -7,10 +7,11 @@ import findIndex from 'lodash/findIndex';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import Tab from '@shell/components/Tabbed/Tab';
-import { ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import { useIsInResourceDetailPage } from '@shell/composables/resourceDetail';
 import { useIsInResourceCreatePage, useIsInResourceEditPage } from '@shell/composables/cruResource';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
 
 export default {
   name: 'Tabbed',
@@ -94,6 +95,17 @@ export default {
     removeBorders: {
       type:    Boolean,
       default: false,
+    },
+
+    /**
+     * title is NOT displayed within the Tabbed component itself
+     * this prop is used to determine a label to use for the set of tabs in the table of contents component
+     * if a title is not provided a random string will be used
+     * components using the table of contents may exclude tabbed and only show tab components, too
+     */
+    title: {
+      type:    String,
+      default: null,
     }
   },
 
@@ -101,6 +113,8 @@ export default {
     const tabs = this.tabs;
 
     return {
+      select: this.select,
+
       sideTabs: this.sideTabs,
 
       addTab(tab) {
@@ -156,14 +170,20 @@ export default {
     },
   },
 
-  setup() {
+  setup(props) {
     const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
     const isInResourceDetailPage = ref(useIsInResourceDetailPage());
     const isInResourceEditPage = ref(useIsInResourceEditPage());
     const isInResourceCreatePage = ref(useIsInResourceCreatePage());
+    const tabbedSummarizedContainer = useTemplateRef('tabbed-summarized-container');
+    const { summary } = useInSummary({
+      label:      computed(() => props.title ?? ''),
+      scrollTo:   () => tabbedSummarizedContainer.value?.scrollIntoView(true),
+      elementRef: tabbedSummarizedContainer,
+    });
 
     return {
-      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage
+      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage, summary
     };
   },
 
@@ -311,6 +331,7 @@ export default {
 
 <template>
   <div
+    ref="tabbed-summarized-container"
     class="tabbed-container"
     :class="{
       'side-tabs': !!sideTabs,
@@ -435,6 +456,7 @@ export default {
         <component
           :is="tab.component"
           :resource="resource"
+          @select="select(tab.name)"
         />
       </Tab>
     </div>