dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.1

package/components/form/__tests__/Networking.test.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import Networking from '@shell/components/form/Networking.vue';
+import { nextTick } from 'vue';
+
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
+describe('component: Networking', () => {
+  it.each([
+    {
+      ip:        '10.1.1.1',
+      hostnames: ['host1']
+    },
+    {
+      ip:        '10.1.1.2',
+      hostnames: ['host1', 'host2']
+    },
+    {
+      ip:        '10.1.1.3',
+      hostnames: []
+    }
+  ])('should render host aliases form if the value contains host aliases config: [%j]', (hostAliasesConfig) => {
+    const wrapper = mount(Networking, {
+      props: {
+        value: { hostAliases: [hostAliasesConfig] },
+        mode:  'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.element.value).toBe(hostAliasesConfig.ip);
+    expect(valueInput.find('[data-testid="value-multiline"]').element.value).toBe(hostAliasesConfig.hostnames.join(', '));
+  });
+
+  it('should not render host aliases form, if there is no host aliases configuration', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(false);
+    expect(valueInput.exists()).toBe(false);
+    expect(wrapper.props('value')).toStrictEqual({});
+  });
+
+  it('should render host aliases form correctly if click add host aliases button', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+    const v = wrapper.props('value');
+
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('');
+    expect(v.hostAliases[0].hostnames).toStrictEqual([]);
+  });
+
+  it('should render host aliases form correctly if modify the form values', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+    let v = wrapper.props('value');
+    let keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    let valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    keyInput.setValue('10.1.1.1');
+    valueInput.find('[data-testid="value-multiline"]').setValue('test1, test2');
+    await nextTick();
+    v = wrapper.props('value');
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('10.1.1.1');
+    expect(v.hostAliases[0].hostnames).toStrictEqual(['test1', 'test2']);
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+  });
+});

package/components/form/__tests__/SSHKnownHosts.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+import { createStore } from 'vuex';
 
 jest.mock('focus-trap', () => {
   return {
@@ -53,18 +54,26 @@ describe('component: SSHKnownHosts', () => {
   });
 
   it('mode edit: should open edit dialog', async() => {
+    const actions = { 'management/promptModal': jest.fn() };
+
     const wrapper = mount(SSHKnownHosts, {
       props: {
         mode:  _EDIT,
         value: '',
+      },
+      global: {
+        mocks: {
+          $store:      createStore({ actions }),
+          $fetchState: {}
+        },
+        stubs: { transition: false }
       }
     });
 
     const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
-    const editDialog = wrapper.vm.$refs['editDialog'] as any;
 
     await knownSshHostsOpenDialog.trigger('click');
 
-    expect(editDialog.showModal).toBe(true);
+    expect(actions['management/promptModal']).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ component: 'KnownHostsEditDialog' }));
   });
 });

package/components/form/__tests__/Select.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 import Select from '@shell/components/form/Select.vue';
 
@@ -64,4 +64,40 @@ describe('select.vue', () => {
     // from the library
     expect(vSelectInput.attributes('aria-label')).toBe('-');
   });
+
+  it('pressing space key while focused on search should not prevent event propagation', async() => {
+    const value = 'value-1';
+    const options = [
+      { label: 'label-1', value: 'value-1' },
+      { label: 'label-2', value: 'value-2' },
+    ];
+
+    const wrapper = mount(SelectComponent, {
+      props: {
+        value,
+        label:      'some-label',
+        options,
+        searchable: true,
+        loading:    false,
+      }
+    });
+
+    const mockEvent = { preventDefault: jest.fn() };
+    const spyFocus = jest.spyOn(wrapper.vm, 'focusSearch');
+    const spyPreventDefault = jest.spyOn(mockEvent, 'preventDefault');
+
+    const input = wrapper.find('.unlabeled-select');
+
+    // open unlabeled-select first
+    await input.trigger('keydown.enter');
+
+    // mimic pressing space on search box inside v-select
+    const search = input.find('input');
+
+    await search.trigger('keydown.space', mockEvent);
+
+    // eslint-disable-next-line
+    expect(spyFocus).toHaveBeenCalled();
+    expect(spyPreventDefault).not.toHaveBeenCalled();
+  });
 });

package/components/form/__tests__/UnitInput.test.ts

@@ -5,12 +5,34 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 import { defineComponent } from 'vue';
 
 describe('component: UnitInput', () => {
-  it('should renders', () => {
+  it('should render the UnitInput component with basic config', () => {
     const wrapper = mount(UnitInput, { props: { value: 1 } });
 
     expect(wrapper.isVisible()).toBe(true);
   });
 
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const baseUnit = 'B';
+    const wrapper = mount(UnitInput,
+      {
+        props: {
+          value:    1,
+          baseUnit,
+          disabled: true
+        }
+      }
+    );
+
+    const inputElement = wrapper.find('input');
+    const unitDisplay = wrapper.find('.addon');
+
+    expect(wrapper.findComponent(LabeledInput as any).exists()).toBe(true);
+    expect(inputElement.attributes('aria-describedby')).toBe(wrapper.vm.describedById);
+    expect(unitDisplay.attributes('id')).toBe(wrapper.vm.describedById);
+    expect(inputElement.attributes('aria-disabled')).toBe('true');
+    expect(inputElement.attributes('disabled')).toBeDefined();
+  });
+
   it.each(['blur', 'update:value'])('should emit input event when "%p" is fired', async(event) => {
     const wrapper = mount(UnitInput, { props: { value: 1, delay: 0 } });
     const input = wrapper.find('input');

package/components/form/labeled-select-utils/labeled-select-pagination.ts

@@ -1,46 +1,11 @@
 import { debounce } from 'lodash';
 import { PropType, defineComponent } from 'vue';
-import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
 import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
-interface Props {
-  paginate?: LabelSelectPaginateFn
-}
-
-interface Data {
-  currentPage: number,
-  search: string,
-  pageSize: number,
-
-  page: any[],
-  pages: number,
-  totalResults: number,
-
-  paginating: boolean,
-
-  debouncedRequestPagination: Function
-}
-
-interface Computed extends ComputedOptions {
-  canPaginate: () => boolean,
-
-  canLoadMore: () => boolean,
-
-  optionsInPage: () => number,
-
-  optionCounts: () => string,
-}
-
-interface Methods extends MethodOptions {
-  loadMore: () => void
-  setPaginationFilter: (filter: string) => void
-  requestPagination: () => Promise<any>;
-}
-
 /**
  * 'mixin' to provide pagination support to LabeledSelect
  */
-export default defineComponent<Props, any, Data, Computed, Methods>({
+export default defineComponent({
   props: {
     paginate: {
       default: null,
@@ -61,7 +26,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
     },
   },
 
-  data(): Data {
+  data() {
     return {
       // Internal
       currentPage: 1,
@@ -72,7 +37,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
       debouncedRequestPagination: debounce(this.requestPagination, 700),
 
       // External
-      page:         [],
+      page:         [] as any[],
       totalResults: 0,
       paginating:   false,
     };

package/components/formatter/ClusterLink.vue

@@ -70,10 +70,10 @@ export default {
       data-testid="unavailable-machines-alert-icon"
     />
     <i
-      v-if="row.rkeTemplateUpgrade"
-      v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
-      class="template-upgrade-icon icon-alert icon"
-      data-testid="rke-template-upgrade-alert-icon"
+      v-if="row.isRke1"
+      v-clean-tooltip="t('cluster.rke1Unsupported')"
+      class="rke1-unsupported-icon icon-warning icon"
+      data-testid="rke1-unsupported-icon"
     />
     <i
       v-if="row.hasError && statusErrorConditions.length > 0"
@@ -106,12 +106,9 @@ export default {
   .mytooltip ul {
     outline: 1px dashed red;
   }
-  .template-upgrade-icon {
-    border: 1px solid var(--warning);
-    border-radius: 50%;
+  .rke1-unsupported-icon {
     color: var(--warning);
     margin-left: 4px;
     font-size: 14px;
-    padding: 2px;
   }
 </style>

package/components/formatter/Description.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true,
+    }
+  },
+};
+</script>
+<template>
+  <span
+    v-clean-tooltip="{content: value, placement: 'auto', popperClass: ['description-tooltip']}"
+    class="description-text"
+  >
+    {{ value }}
+  </span>
+</template>
+<style lang="scss">
+  .description-text {
+    display: block;
+    width: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .description-tooltip {
+    overflow-wrap: break-word;
+  }
+</style>

package/components/formatter/FleetApplicationClustersReady.vue

@@ -0,0 +1,77 @@
+<script>
+
+export default {
+  name: 'FleetApplicationClustersReady',
+
+  components: {},
+
+  props: {
+    value: {
+      type:    Number,
+      default: 0
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    },
+  },
+
+  methods: {
+    parseTargetMode(row) {
+      return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.application.warningTooltip.clusterGroup') : this.t('fleet.application.warningTooltip.cluster');
+    },
+  },
+};
+</script>
+
+<template>
+  <span
+    v-if="!row.clusterInfo"
+    class="text-muted"
+  >&mdash;</span>
+  <span
+    v-else-if="row.clusterInfo.unready"
+    class="text-warning"
+  >{{ row.clusterInfo.ready }}/{{
+    row.clusterInfo.total }}</span>
+  <span
+    v-else
+    class="cluster-count-info"
+  >
+    {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
+    <i
+      v-if="!row.clusterInfo.total"
+      v-clean-tooltip.bottom="parseTargetMode(row)"
+      class="icon icon-warning"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.cluster-count-info {
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-left: 5px;
+    font-size: 22px;
+    color: var(--warning);
+  }
+}
+</style>

package/components/formatter/FleetApplicationSource.vue

@@ -0,0 +1,79 @@
+<script>
+import Link from '@shell/components/formatter/Link';
+import Shortened from '@shell/components/formatter/Shortened';
+
+export default {
+  name: 'FleetApplicationSource',
+
+  components: {
+    Link,
+    Shortened,
+  },
+
+  props: {
+    value: {
+      type:    String,
+      default: ''
+    },
+
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    col: {
+      type:    Object,
+      default: () => {}
+    },
+
+    rowKey: {
+      type:    String,
+      default: '',
+    },
+
+    getCustomDetailLink: {
+      type:    Function,
+      default: null
+    }
+  },
+};
+</script>
+
+<template>
+  <template v-if="row.source.value">
+    <Link
+      v-if="row.source.showLink"
+      class="source-link"
+      label-key="source.display"
+      before-icon-key="source.icon"
+      url-key="source.value"
+      :row="row"
+      :value="row.source.value"
+    />
+    <span v-else>
+      {{ row.source.value }}
+    </span>
+    <div
+      v-if="row.sourceSub.value"
+      class="text-label"
+    >
+      <Shortened
+        long-value-key="sourceSub.value"
+        :row="row"
+        :value="row.sourceSub.display"
+      />
+    </div>
+  </template>
+  <div
+    v-else
+    class="text-muted"
+  >
+    &mdash;
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .source-link {
+    width: fit-content;
+  }
+</style>

package/components/formatter/FleetSummaryGraph.vue

@@ -119,4 +119,11 @@ export default {
   padding: 0;
   line-height: initial;
 }
+
+.hand {
+  .progress, .progress > .piece {
+    height: 6px;
+    border-right: 1px solid var(--body-bg);
+  }
+}
 </style>

package/components/formatter/PodImages.vue

@@ -56,7 +56,7 @@ export default {
 
 <template>
   <span class="formatter-pod-images">
-    <span>{{ mainImage }}</span><br>
+    <span v-clean-tooltip.bottom="mainImage">{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
       v-clean-tooltip.bottom="imageLabels"

package/components/formatter/WorkloadHealthScale.vue

@@ -182,7 +182,7 @@ export default {
     <div
       id="trigger"
       class="hs-popover__trigger"
-      aria-role="button"
+      role="button"
       tabindex="0"
       :class="{expanded}"
       :aria-roledescription="t('workload.scaleWorkloads')"
@@ -204,6 +204,7 @@ export default {
     <div
       :id="id"
       class="hs-popover__content"
+      style="width: auto;padding-right: 10px;"
       :class="{expanded, [id]:true}"
     >
       <div>
@@ -212,14 +213,14 @@ export default {
           :key="i"
           class="counts"
         >
-          <span class="counts-label">{{ obj.label }}</span>
-          <span>{{ obj.value }}</span>
+          <span class="counts-label" style="white-space: normal;">{{ obj.label }}</span>
+          <span style="white-space: normal;">{{ obj.value }}</span>
         </div>
         <div
           v-if="canScale"
           class="text-center scale"
         >
-          <span>{{ t('tableHeaders.scale') }} </span>
+          <span style="white-space: nowrap;margin-right: 5px;">{{ t('tableHeaders.scale') }} </span>
           <PlusMinus
             :value="row.spec.replicas"
             :disabled="disabled"

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

@@ -3,7 +3,6 @@ import ClusterLink from '@shell/components/formatter/ClusterLink.vue';
 
 describe('component: ClusterLink', () => {
   const UNAVAILABLE_MACHINES_ICON_SELECTOR = '[data-testid="unavailable-machines-alert-icon"]';
-  const TEMPLATE_UPGRADE_ICON_SELECTOR = '[data-testid="rke-template-upgrade-alert-icon"]';
   const CONDITION_HAS_ERROR_ICON_SELECTOR = '[data-testid="conditions-has-error-icon"]';
 
   describe('unavailable machines alert icon', () => {
@@ -20,10 +19,9 @@ describe('component: ClusterLink', () => {
         const wrapper = mount(ClusterLink, {
           props: {
             row: {
-              hasError:           false,
-              status:             {},
+              hasError: false,
+              status:   {},
               unavailableMachines,
-              rkeTemplateUpgrade: undefined
             },
             reference: 'any',
             value:     'any'
@@ -36,34 +34,6 @@ describe('component: ClusterLink', () => {
     );
   });
 
-  describe('template upgrade alert icon', () => {
-    const testCases = [
-      [undefined, false],
-      ['any', true],
-    ];
-
-    it.each(testCases)(
-      'should show/hide properly based on rkeTemplateUpgrade',
-      (rkeTemplateUpgrade, expected) => {
-        const wrapper = mount(ClusterLink, {
-          props: {
-            row: {
-              hasError:            false,
-              status:              {},
-              unavailableMachines: 0,
-              rkeTemplateUpgrade
-            },
-            reference: 'any',
-            value:     'any'
-          }
-        });
-        const el = wrapper.find(TEMPLATE_UPGRADE_ICON_SELECTOR);
-
-        expect(el.exists()).toBe(expected);
-      }
-    );
-  });
-
   describe('conditions has error icon', () => {
     const MOCKED_CONDITIONS_1 = [{
       status: '', type: 'Ready', reason: 'Waiting', error: true // When the only existing error has a type "Ready" and reason "Waiting"

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

@@ -16,6 +16,15 @@ const defaultMock = {
 };
 
 describe('component: LiveDate', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2025-07-10T10:00:00.000Z'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('should show a dash if no date is provided', () => {
     const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { global: { mocks: defaultMock } });
     const element = wrapper.find('span');
@@ -55,8 +64,7 @@ describe('component: LiveDate', () => {
     let element = wrapper.find('span');
 
     expect(element.text()).toContain('Just now');
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    await wrapper.vm.liveUpdate(Date.now());
+    await wrapper.vm.liveUpdate(Date.now() + 1000);
 
     element = wrapper.find('span');
     expect(element.text()).toContain('1 %unit.sec%');