@rancher/shell 3.0.9-rc.5 → 3.0.9

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

@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils';
+import StatusCard from '@shell/components/Resource/Detail/Card/StatusCard/index.vue';
+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';
+
+describe('component: StatusCard', () => {
+  const mockResource = (stateDisplay: string, stateSimpleColor: string) => ({
+    stateDisplay,
+    stateSimpleColor,
+  });
+
+  const defaultMocks = {
+    $store: {
+      getters:  { 'i18n/t': (key: string) => key },
+      dispatch: jest.fn(),
+    },
+  };
+
+  const mountCard = (props: Record<string, unknown> = {}) => {
+    return mount(StatusCard, {
+      props:  { title: 'Pods', ...props },
+      global: {
+        mocks: defaultMocks,
+        stubs: {
+          StatusBar: true,
+          StatusRow: true,
+          Scaler:    true,
+        },
+      },
+    });
+  };
+
+  describe('with resources', () => {
+    it('should render StatusBar and StatusRows when resources are present', () => {
+      const resources = [
+        mockResource('Running', 'text-success'),
+        mockResource('Running', 'text-success'),
+        mockResource('Error', 'text-error'),
+      ];
+
+      const wrapper = mountCard({ resources });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(true);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(2);
+    });
+
+    it('should not render noResourcesMessage when resources are present', () => {
+      const resources = [mockResource('Running', 'text-success')];
+
+      const wrapper = mountCard({ resources, noResourcesMessage: 'No pods' });
+
+      expect(wrapper.find('.text-deemphasized').exists()).toBe(false);
+    });
+  });
+
+  describe('with empty resources', () => {
+    it('should not render StatusBar or StatusRows', () => {
+      const wrapper = mountCard({ resources: [], noResourcesMessage: 'No pods' });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(false);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(0);
+    });
+
+    it('should render noResourcesMessage when provided', () => {
+      const wrapper = mountCard({ resources: [], noResourcesMessage: 'There are no pods currently present.' });
+
+      const emptyDiv = wrapper.find('.text-deemphasized');
+
+      expect(emptyDiv.exists()).toBe(true);
+      expect(emptyDiv.text()).toBe('There are no pods currently present.');
+    });
+
+    it('should not render empty-state div when noResourcesMessage is not provided', () => {
+      const wrapper = mountCard({ resources: [] });
+
+      expect(wrapper.find('.text-deemphasized').exists()).toBe(false);
+    });
+  });
+
+  describe('with undefined resources', () => {
+    it('should not render StatusBar, StatusRows, or noResourcesMessage', () => {
+      const wrapper = mountCard({ noResourcesMessage: 'No pods' });
+
+      expect(wrapper.findComponent(StatusBar).exists()).toBe(false);
+      expect(wrapper.findAllComponents(StatusRow)).toHaveLength(0);
+      expect(wrapper.find('.text-deemphasized').exists()).toBe(true);
+      expect(wrapper.find('.text-deemphasized').text()).toBe('No pods');
+    });
+  });
+
+  describe('scaling', () => {
+    it('should render Scaler when showScaling is true', () => {
+      const resources = [mockResource('Running', 'text-success')];
+
+      const wrapper = mountCard({ resources, showScaling: true });
+
+      expect(wrapper.findComponent(Scaler).exists()).toBe(true);
+    });
+
+    it('should not render Scaler when showScaling is false', () => {
+      const resources = [mockResource('Running', 'text-success')];
+
+      const wrapper = mountCard({ resources, showScaling: false });
+
+      expect(wrapper.findComponent(Scaler).exists()).toBe(false);
+    });
+  });
+});

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

@@ -13,6 +13,7 @@ export interface Props {
   title: string;
   resources?: any[];
   showScaling?: boolean;
+  noResourcesMessage?: string;
 }
 </script>
 
@@ -20,7 +21,11 @@ export interface Props {
 const store = useStore();
 const i18n = useI18n(store);
 
-const props = withDefaults(defineProps<Props>(), { resources: undefined, showScaling: false });
+const props = withDefaults(defineProps<Props>(), {
+  resources:          undefined,
+  showScaling:        false,
+  noResourcesMessage: undefined
+});
 const emit = defineEmits(['decrease', 'increase']);
 
 const segmentAccumulator = computed(() => {
@@ -99,9 +104,15 @@ const rows = computed(() => {
         @decrease="(newValue) => emit('decrease', newValue)"
       />
     </template>
-    <StatusBar :segments="segments" />
-    <VerticalGap />
-    <div class="pod-distribution">
+    <StatusBar
+      v-if="rows.length > 0"
+      :segments="segments"
+    />
+    <VerticalGap v-if="rows.length > 0" />
+    <div
+      v-if="rows.length > 0"
+      class="pod-distribution"
+    >
       <StatusRow
         v-for="(row, i) in rows"
         :key="i"
@@ -111,6 +122,12 @@ const rows = computed(() => {
         :percent="row.percent"
       />
     </div>
+    <div
+      v-else-if="props.noResourcesMessage"
+      class="text-deemphasized"
+    >
+      {{ props.noResourcesMessage }}
+    </div>
   </Card>
 </template>
 

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -6,7 +6,12 @@ import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 
 const mockStore = {
   getters: {
-    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn(), currentCluster: 'CLUSTER_ID'
+    productId:             'PRODUCT_ID',
+    clusterId:             'CLUSTER_ID',
+    'type-map/optionsFor': jest.fn(),
+    currentCluster:        'CLUSTER_ID',
+    currentStore:          () => 'cluster',
+    'cluster/canList':     () => true,
   }
 };
 const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };
@@ -32,7 +37,8 @@ describe('composables: IdentifyingFields', () => {
       expect(result).toBeUndefined();
     });
 
-    it('should return a valid namespace row', () => {
+    it('should return a valid namespace row with ResourcePopover when user canList namespaces', () => {
+      mockStore.getters['cluster/canList'] = () => true;
       const resource = { namespace: 'NAMESPACE' };
       const result = useNamespace(resource);
 
@@ -42,6 +48,17 @@ describe('composables: IdentifyingFields', () => {
       expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
       expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
     });
+
+    it('should return a plain text namespace row when user cannot canList namespaces', () => {
+      mockStore.getters['cluster/canList'] = () => false;
+      const resource = { namespace: 'NAMESPACE' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.valueOverride).toBeUndefined();
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
   });
 
   describe('useWorkspace', () => {

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -24,18 +24,26 @@ export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
   }
 
   return computed(() => {
-    return {
-      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.namespace'),
-      value:           resourceValue.namespace,
-      valueDataTestid: 'masthead-subheader-namespace',
-      valueOverride:   {
-        component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
-        props:     {
-          type:           NAMESPACE,
-          id:             resourceValue.namespace,
-          detailLocation: resourceValue.namespaceLocation
-        }
+    const currentStore = store.getters['currentStore'](NAMESPACE);
+    const canList = store.getters[`${ currentStore }/canList`](NAMESPACE);
+
+    const label = i18n.t('component.resource.detail.metadata.identifyingInformation.namespace');
+    const value = resourceValue.namespace;
+    const valueDataTestid = 'masthead-subheader-namespace';
+    const valueOverride = canList ? {
+      component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
+      props:     {
+        type:           NAMESPACE,
+        id:             resourceValue.namespace,
+        detailLocation: resourceValue.namespaceLocation
       }
+    } : undefined;
+
+    return {
+      label,
+      value,
+      valueDataTestid,
+      valueOverride,
     };
   });
 };

package/components/Resource/Detail/ResourcePopover/__tests__/index.test.ts

@@ -79,6 +79,18 @@ describe('component: ResourcePopover/index.vue', () => {
       expect(wrapper.find('.display').exists()).toBe(false);
     });
 
+    it('should show plain text and no PopoverCard when fetch fails', async() => {
+      mockClusterFind.mockRejectedValue(new Error('Not found'));
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findComponent(PopoverCard).exists()).toBe(false);
+      expect(wrapper.text()).toBe('test-ns/test-pod');
+    });
+
     it('should fetch data using the default store', async() => {
       const wrapper = createWrapper();
 

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -58,6 +58,7 @@ const actionInvoked = () => {
 
 <template>
   <PopoverCard
+    v-if="!fetch.error"
     class="resource-popover"
     :card-title="nameDisplay"
     fallback-focus="[data-testid='resource-popover-action-menu']"
@@ -104,6 +105,7 @@ const actionInvoked = () => {
       />
     </template>
   </PopoverCard>
+  <span v-else>{{ props.id }}</span>
 </template>
 
 <style lang="scss" scoped>

package/components/Resource/Detail/ResourceRow.vue

@@ -47,7 +47,7 @@ const displayCounts = computed(() => {
       </SubtleLink>
       <span
         v-else
-        class="text-muted"
+        class="text-deemphasized"
       >
         {{ label }}
       </span>
@@ -55,7 +55,7 @@ const displayCounts = computed(() => {
     <div class="right">
       <div
         v-if="!counts || counts.length == 0"
-        class="text-muted"
+        class="text-deemphasized"
       >
         0
       </div>

package/components/ResourceList/index.vue

@@ -87,11 +87,14 @@ export default {
   },
 
   beforeMount() {
-    const inStore = this.$store.getters['currentStore'](this.resource);
-    const canList = this.$store.getters[`${ inStore }/canList`](this.resource);
+    if (!this.hasListComponent) {
+      // If a list doesn't have a list component confirm via schema that the resource is listable
+      const inStore = this.$store.getters['currentStore'](this.resource);
+      const canList = this.$store.getters[`${ inStore }/canList`](this.resource);
 
-    if (!canList) {
-      this.$store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotListable', { resource: this.schema.id }, true)));
+      if (!canList) {
+        this.$store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotListable', { resource: this.schema?.id || this.resource || 'unknown' }, true)));
+      }
     }
   },
 

package/components/SortableTable/index.vue

@@ -2099,13 +2099,13 @@ export default {
 
   $header-padding: 20px;
   .sub-header-row {
-    padding: 0 0 $header-padding / 2 0;
+    padding: 0 0 calc($header-padding / 2) 0;
   }
 
   .fixed-header-actions {
     padding: 0 0 $header-padding 0;
     &.with-sub-header {
-      padding: 0 0 $header-padding / 4 0;
+      padding: 0 0 calc($header-padding / 4) 0;
     }
 
     width: 100%;

package/components/Window/ContainerLogs.vue

@@ -13,7 +13,6 @@ import LogItem from '@shell/components/LogItem';
 import ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
-import { debounce } from 'lodash';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 import { escapeRegex } from '@shell/utils/string';
@@ -110,12 +109,6 @@ export default {
       required: true,
     },
 
-    // The height of the window
-    height: {
-      type:     Number,
-      required: true,
-    },
-
     // The pod to connect to
     pod: {
       type:     Object,
@@ -147,7 +140,6 @@ export default {
       socket:              null,
       isOpen:              false,
       isFollowing:         true,
-      scrollThreshold:     80,
       timestamps:          this.$store.getters['prefs/get'](LOGS_TIME),
       wrap:                this.$store.getters['prefs/get'](LOGS_WRAP),
       previous:            false,
@@ -290,18 +282,6 @@ export default {
     container() {
       this.connect();
     },
-
-    lines: {
-      handler() {
-        if (this.isFollowing) {
-          this.$nextTick(() => {
-            this.follow();
-          });
-        }
-      },
-      deep: true
-    }
-
   },
 
   beforeUnmount() {
@@ -315,6 +295,35 @@ export default {
   },
 
   methods: {
+    onScrollToBottom() {
+      this.startFollowing();
+    },
+
+    onMouseWheel(ev) {
+      // On scroll up stop following
+      if (ev.deltaY < 0) {
+        this.stopFollowing();
+      }
+    },
+
+    onMouseDown() {
+      this.stopFollowing();
+    },
+
+    onMouseUp() {
+      const virtualList = this.$refs.virtualList;
+
+      if (!virtualList) {
+        return;
+      }
+
+      const isVirtualListScrolledToBottom = virtualList.getOffset() + virtualList.getClientSize() >= virtualList.getScrollSize();
+
+      if (isVirtualListScrolledToBottom) {
+        this.startFollowing();
+      }
+    },
+
     openContainerMenu() {
       this.isContainerMenuOpen = true;
     },
@@ -451,22 +460,21 @@ export default {
         if (maxLines && this.lines.length > maxLines) {
           this.lines = this.lines.slice(-maxLines);
         }
+
+        this.$nextTick(() => {
+          this.follow();
+        });
       }
     },
 
-    updateFollowing: debounce(function() {
-      const virtualList = this.$refs.virtualList;
-
-      if (virtualList) {
-        const scrollSize = virtualList.getScrollSize();
-        const clientSize = virtualList.getClientSize();
-        const offset = virtualList.getOffset();
-
-        const distanceFromBottom = scrollSize - clientSize - offset;
+    stopFollowing() {
+      this.isFollowing = false;
+    },
 
-        this.isFollowing = distanceFromBottom <= this.scrollThreshold;
-      }
-    }, 100),
+    startFollowing() {
+      this.isFollowing = true;
+      this.follow();
+    },
 
     parseRange(range) {
       range = `${ range }`.trim().toLowerCase();
@@ -537,9 +545,8 @@ export default {
     follow() {
       const virtualList = this.$refs.virtualList;
 
-      if (virtualList) {
-        virtualList.scrollToBottom();
-        this.isFollowing = true;
+      if (virtualList && this.isFollowing) {
+        virtualList.scrollToOffset(virtualList.getScrollSize());
       }
     },
 
@@ -607,7 +614,7 @@ export default {
             :aria-label="t('wm.containerLogs.follow')"
             :aria-disabled="isFollowing"
             :disabled="isFollowing"
-            @click="follow"
+            @click="startFollowing"
           >
             <t
               class="wm-btn-large"
@@ -762,7 +769,11 @@ export default {
           :data-component="logItem"
           direction="vertical"
           :keeps="200"
-          @scroll="updateFollowing"
+          :bottom-threshold="200"
+          @tobottom="onScrollToBottom"
+          @wheel.passive="onMouseWheel"
+          @mousedown="onMouseDown"
+          @mouseup="onMouseUp"
         />
         <template v-if="!filtered.length">
           <div v-if="search">

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -67,13 +67,13 @@ export default {
     flex-direction: column;
   }
   .targets-list-list {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   .link-main{
     word-spacing: 22px;
+    line-height: 17px; // To fit the icon size and make sure it doesnt resize
   }
   .link-icon {
-    position: absolute;
     margin-left: -14px; // Remove the space of the icon to make it float to accomodate the underline
     display: none; // Make the icon disappear by default
   }

package/components/fleet/FleetClusterTargets/index.vue

@@ -406,7 +406,10 @@ export default {
         :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
         @update:value="selectClusters"
       />
-      <div class="mmt-6">
+      <div
+        v-if="!isView || (clusterSelectors && clusterSelectors.length > 0)"
+        class="mmt-6"
+      >
         <h4 class="m-0">
           {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
         </h4>
@@ -427,6 +430,7 @@ export default {
             @update:value="updateMatchExpressions(i, $event, selector.key)"
           />
           <RcButton
+            v-if="!isView"
             size="small"
             variant="link"
             @click="removeMatchExpressions(selector.key)"
@@ -435,6 +439,7 @@ export default {
           </RcButton>
         </div>
         <RcButton
+          v-if="!isView"
           size="small"
           variant="secondary"
           class="mmt-4"