@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.10

package/components/formatter/Autoscaler.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import PopoverCard from '@shell/components/PopoverCard.vue';
+import { computed } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import AutoscalerCard from '@shell/components/AutoscalerCard.vue';
+
+export interface Props {
+  value: string | boolean;
+  row: any;
+}
+
+export interface Detail {
+  label: string;
+  value?: string | { component: any; props: any };
+}
+
+const props = withDefaults(defineProps<Props>(), { value: true });
+const store = useStore();
+const i18n = useI18n(store);
+
+const checked = computed(() => props.value === true || props.value === 'true');
+const actionIcon = computed(() => props.row.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
+const stopPropagation = (event: Event) => {
+  // This is to prevent click events from getting to the table row which ends up selecting the row
+  event.stopPropagation();
+};
+</script>
+
+<template>
+  <span
+    v-if="checked"
+    class="autoscaler"
+    @click="stopPropagation"
+  >
+    <PopoverCard
+      :card-title="i18n.t('autoscaler.card.title')"
+      fallback-focus=".autoscaler .action"
+    >
+      <i class="icon icon-checkmark" />
+      <template
+        v-if="props.row.canExplore"
+        #heading-action="{close}"
+      >
+        <RcButton
+          v-if="row.canPauseResumeAutoscaler"
+          secondary
+          small
+          class="action"
+          @click="() => {props.row.toggleAutoscalerRunner(); close()}"
+        >
+          <i :class="`icon ${actionIcon} icon-sm`" />
+          {{ actionText }}
+        </RcButton>
+      </template>
+      <template #card-body>
+        <AutoscalerCard :value="props.row" />
+      </template>
+    </PopoverCard>
+  </span>
+  <span
+    v-else
+    class="text-muted autoscaler"
+  >
+    &mdash;
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.autoscaler {
+  &:deep() {
+    .heading {
+      height: 24px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+
+    button.btn.action {
+      line-height: 15px;
+      font-size: 12px;
+      height: 24px;
+      min-height: initial;
+      padding: 0 8px;
+
+      i {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>

package/components/formatter/InternalExternalIP.vue

@@ -2,8 +2,10 @@
 import { isV4Format, isV6Format } from 'ip';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import { mapGetters } from 'vuex';
+import RcStatusBadge from '@components/Pill/RcStatusBadge/RcStatusBadge';
+
 export default {
-  components: { CopyToClipboard },
+  components: { CopyToClipboard, RcStatusBadge },
   props:      {
     row: {
       type:     Object,
@@ -11,10 +13,49 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    filteredExternalIps() {
+      return this.row.externalIps?.filter((ip) => this.isIp(ip)) || [];
+    },
+    filteredInternalIps() {
+      return this.row.internalIps?.filter((ip) => this.isIp(ip)) || [];
+    },
     internalSameAsExternal() {
-      return this.row.internalIp === this.row.externalIp;
+      return this.externalIp && this.internalIp && this.externalIp === this.internalIp;
+    },
+    showPopover() {
+      return this.filteredExternalIps.length > 1 || this.filteredInternalIps.length > 1;
     },
-    ...mapGetters({ t: 'i18n/t' })
+    externalIp() {
+      return this.filteredExternalIps[0] || null;
+    },
+    internalIp() {
+      return this.filteredInternalIps[0] || null;
+    },
+    remainingIpCount() {
+      let count = 0;
+
+      if (this.filteredExternalIps.length > 1) {
+        count += this.filteredExternalIps.length - 1;
+      }
+
+      if (!this.internalSameAsExternal && this.filteredInternalIps.length > 1) {
+        count += this.filteredInternalIps.length - 1;
+      }
+
+      return count;
+    },
+    tooltipContent() {
+      const count = this.remainingIpCount;
+
+      return this.t('internalExternalIP.clickToShowMoreIps', { count });
+    },
+    remainingExternalIps() {
+      return this.filteredExternalIps.slice(1);
+    },
+    remainingInternalIps() {
+      return this.filteredInternalIps.slice(1);
+    }
   },
   methods: {
     isIp(ip) {
@@ -25,40 +66,173 @@ export default {
 </script>
 
 <template>
-  <span>
-    <template v-if="isIp(row.externalIp)">
-      {{ row.externalIp }} <CopyToClipboard
-        :aria-label="t('internalExternalIP.copyExternalIp')"
-        label-as="tooltip"
-        :text="row.externalIp"
-        class="icon-btn"
-        action-color="bg-transparent"
-      />
+  <div class="ip-container">
+    <template v-if="externalIp">
+      <span data-testid="external-ip">
+        {{ externalIp }}
+        <CopyToClipboard
+          :aria-label="t('internalExternalIP.copyExternalIp')"
+          label-as="tooltip"
+          :text="externalIp"
+          class="icon-btn"
+          action-color="bg-transparent"
+        />
+      </span>
     </template>
     <template v-else>
       -
     </template>
-    /
-    <template v-if="internalSameAsExternal && isIp(row.internalIp)">
+    <span class="separator">/</span>
+    <template v-if="internalSameAsExternal">
       {{ t('tableHeaders.internalIpSameAsExternal') }}
     </template>
-    <template v-else-if="isIp(row.internalIp)">
-      {{ row.internalIp }}<CopyToClipboard
-        :aria-label="t('internalExternalIP.copyInternalIp')"
-        label-as="tooltip"
-        :text="row.internalIp"
-        class="icon-btn"
-        action-color="bg-transparent"
-      />
+    <template v-else-if="internalIp">
+      <span data-testid="internal-ip">
+        {{ internalIp }}
+        <CopyToClipboard
+          :aria-label="t('internalExternalIP.copyInternalIp')"
+          label-as="tooltip"
+          :text="internalIp"
+          class="icon-btn"
+          action-color="bg-transparent"
+        />
+      </span>
     </template>
     <template v-else>
       -
     </template>
-  </span>
+    <v-dropdown
+      v-if="showPopover"
+      ref="dropdown"
+      placement="bottom-start"
+    >
+      <template #default>
+        <RcStatusBadge
+          v-clean-tooltip="{content: tooltipContent, triggers: ['hover', 'focus']}"
+          :aria-label="t('generic.plusMore', {n: remainingIpCount})"
+          tabindex="0"
+          status="info"
+          data-testid="plus-more"
+          @click.stop
+          @keyup.enter.space="$refs.dropdown.show()"
+        >
+          {{ t('generic.plusMore', {n: remainingIpCount}) }}
+        </RcStatusBadge>
+      </template>
+      <template #popper>
+        <div
+          class="ip-addresses-popover"
+          data-testid="ip-addresses-popover"
+        >
+          <button
+            class="btn btn-sm close-button"
+            @click="$refs.dropdown.hide()"
+          >
+            <i class="icon icon-close" />
+          </button>
+          <div
+            v-if="remainingExternalIps.length"
+            class="ip-list"
+            data-testid="external-ip-list"
+          >
+            <h5>{{ t('generic.externalIps') }}</h5>
+            <div
+              v-for="ip in remainingExternalIps"
+              :key="ip"
+              class="ip-address"
+            >
+              <span>{{ ip }}</span>
+              <CopyToClipboard
+                :text="ip"
+                label-as="tooltip"
+                class="icon-btn"
+                action-color="bg-transparent"
+              />
+            </div>
+          </div>
+          <div
+            v-if="remainingInternalIps.length"
+            class="ip-list"
+            data-testid="internal-ip-list"
+          >
+            <h5>{{ t('generic.internalIps') }}</h5>
+            <div
+              v-for="ip in remainingInternalIps"
+              :key="ip"
+              class="ip-address"
+            >
+              <span>{{ ip }}</span>
+              <CopyToClipboard
+                :text="ip"
+                label-as="tooltip"
+                class="icon-btn"
+                action-color="bg-transparent"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </v-dropdown>
+  </div>
 </template>
 
 <style lang='scss' scoped>
+.ip-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 8px 0;
+}
+
 .icon-btn {
-  margin-left: 8px;
+  padding: 2px;
+  min-height: 24px;
+}
+
+.rc-status-badge {
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.ip-addresses-popover {
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  padding: 8px;
+  gap: 16px;
+
+  .ip-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 8px;
+
+    h5 {
+      margin-bottom: 4px;
+      font-weight: 600;
+    }
+  }
+
+  .ip-address {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .close-button {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+
+    &:hover .icon-close{
+      color: var(--primary);
+    }
+  }
 }
 </style>

package/components/formatter/__tests__/Autoscaler.test.ts

@@ -0,0 +1,156 @@
+
+import { mount } from '@vue/test-utils';
+import Autoscaler from '@shell/components/formatter/Autoscaler.vue';
+import { createStore } from 'vuex';
+
+describe('component: formatter/Autoscaler.vue', () => {
+  const mockToggleRunner = jest.fn();
+  const mockClose = jest.fn();
+
+  const PopoverCardStub = {
+    name:     'PopoverCard',
+    template: `
+      <div>
+        <slot />
+        <slot name="heading-action" :close="close" />
+        <slot name="card-body" />
+      </div>
+    `,
+    props: ['cardTitle', 'fallbackFocus'],
+    setup() {
+      return { close: mockClose };
+    }
+  };
+
+  const createWrapper = (props: any) => {
+    return mount(Autoscaler, {
+      props,
+      global: {
+        plugins: [createStore({})],
+        stubs:   {
+          PopoverCard:    PopoverCardStub,
+          RcButton:       { template: '<button><slot /></button>' },
+          AutoscalerCard: {
+            name:     'AutoscalerCard',
+            props:    ['value'],
+            template: '<div></div>'
+          },
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('unchecked state', () => {
+    it.each([
+      [false],
+      ['false'],
+      [''],
+    ])('should render a dash when value is %p', (value) => {
+      const wrapper = createWrapper({ value, row: {} });
+
+      expect(wrapper.text()).toBe('—');
+      expect(wrapper.find('.text-muted').exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'PopoverCard' }).exists()).toBe(false);
+    });
+  });
+
+  describe('checked state', () => {
+    it.each([
+      [true],
+      ['true'],
+      [undefined],
+    ])('should render popover when value is %p', (value) => {
+      const wrapper = createWrapper({ value, row: {} });
+
+      expect(wrapper.findComponent({ name: 'PopoverCard' }).exists()).toBe(true);
+      expect(wrapper.find('.icon-checkmark').exists()).toBe(true);
+      expect(wrapper.text()).not.toBe('—');
+    });
+
+    it('should stop click propagation', async() => {
+      const mockStopPropagation = jest.fn();
+      const wrapper = createWrapper({ value: true, row: {} });
+
+      await wrapper.find('.autoscaler').trigger('click', { stopPropagation: mockStopPropagation });
+      expect(mockStopPropagation).toHaveBeenCalledWith();
+    });
+
+    it('should pass correct props to PopoverCard', () => {
+      const wrapper = createWrapper({ value: true, row: {} });
+      const popover = wrapper.findComponent(PopoverCardStub);
+
+      expect(popover.props('cardTitle')).toBe('autoscaler.card.title');
+      expect(popover.props('fallbackFocus')).toBe('.autoscaler .action');
+    });
+
+    it('should render AutoscalerCard with correct row data', () => {
+      const rowData = { id: 'test-row' };
+      const wrapper = createWrapper({ value: true, row: rowData });
+      const card = wrapper.findComponent({ name: 'AutoscalerCard' });
+
+      expect(card.exists()).toBe(true);
+      expect(card.props('value')).toStrictEqual(rowData);
+    });
+  });
+
+  describe('heading action button', () => {
+    it('should NOT render if canExplore is false', () => {
+      const rowData = { canExplore: false };
+      const wrapper = createWrapper({ value: true, row: rowData });
+
+      expect(wrapper.find('button').exists()).toBe(false);
+    });
+
+    it('should render "Pause" button if autoscaler is running', () => {
+      const rowData = {
+        canExplore: true, isAutoscalerPaused: false, canPauseResumeAutoscaler: true
+      };
+      const wrapper = createWrapper({
+        value: true, row: rowData, canPauseResumeAutoscaler: true
+      });
+      const button = wrapper.find('button');
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('autoscaler.card.pause');
+      expect(wrapper.find('.icon-pause').exists()).toBe(true);
+    });
+
+    it('should render "Resume" button if autoscaler is paused', () => {
+      const rowData = {
+        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: true
+      };
+      const wrapper = createWrapper({ value: true, row: rowData });
+      const button = wrapper.find('button');
+
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('autoscaler.card.resume');
+      expect(wrapper.find('.icon-play').exists()).toBe(true);
+    });
+
+    it('should hide "Resume" button if canPauseResumeAutoscaler is false', () => {
+      const rowData = {
+        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: false
+      };
+      const wrapper = createWrapper({ value: true, row: rowData });
+      const button = wrapper.find('button');
+
+      expect(button.exists()).toBe(false);
+    });
+
+    it('should call toggleAutoscalerRunner and close on click', async() => {
+      const rowData = {
+        canExplore: true, toggleAutoscalerRunner: mockToggleRunner, canPauseResumeAutoscaler: true
+      };
+      const wrapper = createWrapper({ value: true, row: rowData });
+
+      wrapper.find('button').trigger('click');
+
+      expect(mockToggleRunner).toHaveBeenCalledTimes(1);
+      expect(mockClose).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/components/formatter/__tests__/InternalExternalIP.test.ts

@@ -0,0 +1,133 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import InternalExternalIP from '@shell/components/formatter/InternalExternalIP.vue';
+
+jest.mock('clipboard-polyfill', () => ({ writeText: jest.fn() }));
+
+describe('component: InternalExternalIP', () => {
+  const mockGetters = {
+    'i18n/t': (key: string, args: any) => {
+      if (key === 'generic.plusMore') {
+        return `+${ args.n } more`;
+      }
+      if (key === 'internalExternalIP.clickToShowMoreIps') {
+        return `Click to show ${ args.count } more IP(s)`;
+      }
+
+      return key;
+    }
+  };
+
+  const mountComponent = (props: any): VueWrapper<any> => {
+    return mount(InternalExternalIP, {
+      props,
+      global: {
+        components: { 'v-dropdown': { name: 'v-dropdown', template: '<div><slot /><slot name="popper" /></div>' } },
+        directives: {
+          'clean-tooltip': (el, binding) => {
+            el.setAttribute('v-clean-tooltip', binding.value.content);
+          }
+        },
+        mocks: { $store: { getters: mockGetters } }
+      }
+    });
+  };
+
+  describe('no IPs', () => {
+    it('should display placeholders', () => {
+      const wrapper = mountComponent({ row: { externalIps: [], internalIps: ['1.1.1.1'] } });
+
+      expect(wrapper.text()).toStrictEqual('- /1.1.1.1');
+    });
+  });
+
+  describe('single IPs', () => {
+    it('should display a single external IP', () => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1'], internalIps: [] } });
+
+      expect(wrapper.find('[data-testid="external-ip"]').text()).toStrictEqual('1.1.1.1');
+      expect(wrapper.find('[data-testid="plus-more"]').exists()).toBe(false);
+    });
+
+    it('should display a single internal IP', () => {
+      const wrapper = mountComponent({ row: { externalIps: [], internalIps: ['2.2.2.2'] } });
+
+      expect(wrapper.find('[data-testid="internal-ip"]').text()).toStrictEqual('2.2.2.2');
+      expect(wrapper.find('[data-testid="plus-more"]').exists()).toBe(false);
+    });
+
+    it('should display both external and internal IPs', () => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1'], internalIps: ['2.2.2.2'] } });
+
+      expect(wrapper.find('[data-testid="external-ip"]').text()).toStrictEqual('1.1.1.1');
+      expect(wrapper.find('[data-testid="internal-ip"]').text()).toStrictEqual('2.2.2.2');
+      expect(wrapper.find('[data-testid="plus-more"]').exists()).toBe(false);
+    });
+
+    it('should display "Same as external" when IPs are the same', () => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1'], internalIps: ['1.1.1.1'] } });
+
+      expect(wrapper.text()).toContain('tableHeaders.internalIpSameAsExternal');
+    });
+  });
+
+  describe('multiple IPs', () => {
+    it('should show popover with remaining external IPs', async() => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1', '3.3.3.3'], internalIps: ['2.2.2.2'] } });
+
+      expect(wrapper.find('[data-testid="plus-more"]').text()).toStrictEqual('+1 more');
+
+      const popover = wrapper.find('[data-testid="ip-addresses-popover"]');
+      const ipSpans = popover.findAll('.ip-address span');
+
+      expect(ipSpans).toHaveLength(1);
+      expect(ipSpans[0].text()).toStrictEqual('3.3.3.3');
+      expect(popover.find('[data-testid="internal-ip-list"]').exists()).toBe(false);
+    });
+
+    it('should show popover with remaining internal IPs', async() => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1'], internalIps: ['2.2.2.2', '4.4.4.4'] } });
+
+      expect(wrapper.find('[data-testid="plus-more"]').text()).toStrictEqual('+1 more');
+
+      const popover = wrapper.find('[data-testid="ip-addresses-popover"]');
+      const ipSpans = popover.findAll('.ip-address span');
+
+      expect(ipSpans).toHaveLength(1);
+      expect(ipSpans[0].text()).toStrictEqual('4.4.4.4');
+      expect(popover.find('[data-testid="external-ip-list"]').exists()).toBe(false);
+    });
+
+    it('should show popover with remaining external and internal IPs', async() => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1', '3.3.3.3'], internalIps: ['2.2.2.2', '4.4.4.4'] } });
+
+      expect(wrapper.find('[data-testid="plus-more"]').text()).toStrictEqual('+2 more');
+
+      const popover = wrapper.find('[data-testid="ip-addresses-popover"]');
+      const externalIpSpans = popover.find('[data-testid="external-ip-list"]').findAll('.ip-address span');
+      const internalIpSpans = popover.find('[data-testid="internal-ip-list"]').findAll('.ip-address span');
+
+      expect(externalIpSpans).toHaveLength(1);
+      expect(externalIpSpans[0].text()).toStrictEqual('3.3.3.3');
+      expect(internalIpSpans).toHaveLength(1);
+      expect(internalIpSpans[0].text()).toStrictEqual('4.4.4.4');
+    });
+  });
+
+  describe('invalid IPs', () => {
+    it('should filter invalid IPs', () => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1', 'not-an-ip'], internalIps: ['2.2.2.2'] } });
+
+      expect(wrapper.find('[data-testid="external-ip"]').text()).toStrictEqual('1.1.1.1');
+      expect(wrapper.find('[data-testid="plus-more"]').exists()).toBe(false);
+    });
+  });
+
+  describe('tooltip', () => {
+    it('should display the correct tooltip text', () => {
+      const wrapper = mountComponent({ row: { externalIps: ['1.1.1.1', '3.3.3.3'], internalIps: ['2.2.2.2', '4.4.4.4'] } });
+      const badge = wrapper.find('[data-testid="plus-more"]');
+
+      expect(badge.attributes('v-clean-tooltip')).toBe('Click to show 2 more IP(s)');
+    });
+  });
+});

package/components/google/util/__tests__/formatter.test.ts

@@ -0,0 +1,47 @@
+import { formatSubnetworkOptions } from '@shell/components/google/util/formatter';
+
+describe('formatter', () => {
+  const t = (key: string) => key;
+
+  describe('formatSubnetworkOptions', () => {
+    it('should format subnetwork options correctly', () => {
+      const gkeSubnetworks = [
+        {
+          name:        'subnet-1',
+          network:     'my-network',
+          subnetwork:  'projects/project-1/regions/region-1/subnetworks/subnet-1',
+          ipCidrRange: '10.0.0.0/24',
+          selfLink:    'https://www.googleapis.com/compute/v1/projects/project-1/regions/region-1/subnetworks/subnet-1'
+        },
+        {
+          network:     'my-network',
+          subnetwork:  'projects/project-1/regions/region-1/subnetworks/subnet-2',
+          ipCidrRange: '10.0.1.0/24',
+          selfLink:    'https://www.googleapis.com/compute/v1/projects/project-1/regions/region-1/subnetworks/subnet-2'
+        }
+      ];
+
+      const formattedOptions = formatSubnetworkOptions(t, 'my-network', gkeSubnetworks, {});
+
+      expect(formattedOptions).toHaveLength(2);
+
+      expect(formattedOptions[0]).toStrictEqual({
+        name:        'projects/project-1/regions/region-1/subnetworks/subnet-1',
+        label:       'subnet-1 (10.0.0.0/24)',
+        network:     'my-network',
+        subnetwork:  'projects/project-1/regions/region-1/subnetworks/subnet-1',
+        ipCidrRange: '10.0.0.0/24',
+        selfLink:    'https://www.googleapis.com/compute/v1/projects/project-1/regions/region-1/subnetworks/subnet-1'
+      });
+
+      expect(formattedOptions[1]).toStrictEqual({
+        name:        'projects/project-1/regions/region-1/subnetworks/subnet-2',
+        label:       'subnet-2 (10.0.1.0/24)',
+        network:     'my-network',
+        subnetwork:  'projects/project-1/regions/region-1/subnetworks/subnet-2',
+        ipCidrRange: '10.0.1.0/24',
+        selfLink:    'https://www.googleapis.com/compute/v1/projects/project-1/regions/region-1/subnetworks/subnet-2'
+      });
+    });
+  });
+});