@rancher/shell 0.3.16 → 0.3.18

package/components/form/FileImageSelector.vue

@@ -31,6 +31,10 @@ export default {
       type:    Number,
       default: 200000
     },
+    accept: {
+      type:    String,
+      default: 'image/*'
+    }
   },
   computed: {
     isView() {
@@ -44,6 +48,9 @@ export default {
      */
     setIcon(event) {
       this.$emit('input', event);
+    },
+    setError(error) {
+      this.$emit('error', error);
     }
   }
 };
@@ -58,7 +65,9 @@ export default {
     :read-as-data-url="true"
     :byte-limit="byteLimit"
     :label="label"
+    :accept="accept"
     @selected="setIcon"
+    @error="setError"
   />
 
   <div

package/components/form/FileSelector.vue

@@ -63,7 +63,8 @@ export default {
     accept: {
       type:    String,
       default: '*'
-    }
+    },
+
   },
 
   computed: {

package/components/form/MatchExpressions.vue

@@ -218,12 +218,10 @@ export default {
 
           if ( rule.operator === 'Exists' || rule.operator === 'DoesNotExist') {
             val = null;
-          } else if (!val) {
-            return;
           }
 
           if ( val !== null ) {
-            expression.values = val.split(/\s*,\s*/).filter((x) => !!x);
+            expression.values = val.split(/\s*,\s*/);
           }
 
           return expression;

package/components/form/NameNsDescription.vue

@@ -8,16 +8,7 @@ import { DESCRIPTION } from '@shell/config/labels-annotations';
 import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-
-export function normalizeName(str) {
-  return (str || '')
-    .trim()
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .replace(/^-+/, '')
-    .replace(/-+$/, '');
-}
+import { normalizeName } from '@shell/utils/kube';
 
 export default {
   name:       'NameNsDescription',
@@ -101,10 +92,20 @@ export default {
       type:    Boolean,
       default: false
     },
+    /**
+     * Use these objects instead of namespaces
+     */
     namespacesOverride: {
       type:    Array,
       default: null,
     },
+    /**
+     * User these namespaces instead of determining list within component
+     */
+    namespaceOptions: {
+      type:    Array,
+      default: null,
+    },
     createNamespaceOverride: {
       type:    Boolean,
       default: false,
@@ -228,8 +229,23 @@ export default {
      * Map namespaces from the store to options, adding divider and create button
      */
     options() {
-      const namespaces = this.namespacesOverride ||
-        (Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces()));
+      let namespaces;
+
+      if (this.namespacesOverride) {
+        // Use the resources provided
+        namespaces = this.namespacesOverride;
+      } else {
+        if (this.namespaceOptions) {
+          // Use the namespaces provided
+          namespaces = (this.namespaceOptions.map((ns) => ns.name) || []).sort();
+        } else {
+          // Determine the namespaces
+          const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
+
+          namespaces = Object.keys(namespaceObjs);
+        }
+      }
+
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
         .map(this.namespaceMapper || ((obj) => ({

package/components/form/NodeAffinity.vue

@@ -156,7 +156,7 @@ export default {
     },
 
     priorityDisplay(term) {
-      return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
+      return 'weight' in term ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
     updateExpressions(row, expressions) {
@@ -212,7 +212,7 @@ export default {
               />
             </div>
             <div
-              v-if="props.row.value.weight"
+              v-if="'weight' in props.row.value"
               class="col span-3"
             >
               <LabeledInput

package/components/form/PodAffinity.vue

@@ -286,7 +286,7 @@ export default {
     },
 
     priorityDisplay(term) {
-      return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
+      return 'weight' in term ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
     changeNamespaceMode(val, term, idx) {
@@ -468,7 +468,7 @@ export default {
               />
             </div>
             <div
-              v-if="props.row.value.weight"
+              v-if="'weight' in props.row.value"
               class="col span-3"
             >
               <LabeledInput

package/components/form/ResourceTabs/index.vue

@@ -13,6 +13,7 @@ import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -60,6 +61,11 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
+    },
+
+    extensionParams: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -71,7 +77,7 @@ export default {
       allEvents:     [],
       selectedTab:   this.defaultTab,
       didLoadEvents: false,
-      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route),
+      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
     };
   },
 
@@ -140,7 +146,7 @@ export default {
     },
     conditionsHaveIssues() {
       if (this.showConditions) {
-        return this.value.status?.conditions?.some((cond) => cond.error);
+        return this.value.status?.conditions?.filter((cond) => !isConditionReadyAndWaiting(cond)).some((cond) => cond.error);
       }
 
       return false;

package/components/form/Select.vue

@@ -134,11 +134,27 @@ export default {
 
       return true;
     },
+    /**
+     * Get a unique value to represent the option
+     */
     getOptionKey(opt) {
+      // Use the property from a component level key
+      if (opt && this.optionKey) {
+        return get(opt, this.optionKey);
+      }
+
+      // Use the property from an option level key
+      // This doesn't seem right, think it was meant to represent the actual option key... rather than the key to find the option key
+      // This approach also doesn't appear in LabeledSelect
       if (opt?.optionKey) {
+        // opt.optionKey should in theory be optionKeyKey
         return get(opt, opt.optionKey);
       }
 
+      // There's no configuration to help us get a sensible key. Fall back on ..
+      // - the label
+      // - something random
+
       const label = this.getOptionLabel(opt);
 
       // label may be type of object

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

@@ -0,0 +1,42 @@
+/* eslint-disable jest/no-hooks */
+import FileImageSelector from '@shell/components/form/FileImageSelector';
+import { mount } from '@vue/test-utils';
+import FileSelector from '@shell/components/form/FileSelector';
+
+describe('component: FileImageSelector', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    wrapper = mount(FileImageSelector, {
+      propsData: { label: 'upload' },
+      mocks:     {},
+      methods:   {},
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render', () => {
+    const uploadButton = wrapper.find('.btn');
+
+    expect(wrapper.isVisible()).toBe(true);
+    expect(uploadButton.exists()).toBeTruthy();
+  });
+  it('should throw error if file could not be uploaded', async() => {
+    const fs = wrapper.findComponent(FileSelector);
+
+    expect(fs.exists()).toBeTruthy();
+    await fs.vm.$emit('error');
+
+    expect(wrapper.emitted('error')).toHaveLength(1);
+  });
+
+  it('should emit input on image upload', async() => {
+    const fs = wrapper.findComponent(FileSelector);
+
+    await fs.vm.$emit('selected');
+    expect(wrapper.emitted('input')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,76 @@
+/* eslint-disable jest/no-hooks */
+import FileSelector from '@shell/components/form/FileSelector';
+import { mount } from '@vue/test-utils';
+
+describe('component: FileSelector', () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const binaryString = Buffer.from('/9j/4AAQSkZJRgABAQAASABIAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAKgAgAEAAAAAQAAADmgAwAEAAAAAQAAAFEAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iAihJQ0NfUFJPRklMRQABAQAAAhgAAAAABDAAAG1udHJSR0IgWFlaIAAAAAAAAAAAAAAAAGFjc3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWRlc2MAAADwAAAAdHJYWVoAAAFkAAAAFGdYWVoAAAF4AAAAFGJYWVoAAAGMAAAAFHJUUkMAAAGgAAAAKGdUUkMAAAGgAAAAKGJUUkMAAAGgAAAAKHd0cHQAAAHIAAAAFGNwcnQAAAHcAAAAPG1sdWMAAAAAAAAAAQAAAAxlblVTAAAAWAAAABwAcwBSAEcAQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPcGFyYQAAAAAABAAAAAJmZgAA8qcAAA1ZAAAT0AAAClsAAAAAAAAAAFhZWiAAAAAAAAD21gABAAAAANMtbWx1YwAAAAAAAAABAAAADGVuVVMAAAAgAAAAHABHAG8AbwBnAGwAZQAgAEkAbgBjAC4AIAAyADAAMQA2/8AAEQgAUQA5AwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMAEAsMDgwKEA4NDhIREBMYKBoYFhYYMSMlHSg6Mz08OTM4N0BIXE5ARFdFNzhQbVFXX2JnaGc+TXF5cGR4XGVnY//bAEMBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//dAAQABP/aAAwDAQACEQMRAD8AdRRRX0B4gUUUUAFFFFABRRRQB//QdRRRX0B4gUUUUAFFFFABRRRQB//RdRRRX0B4gUUUUAFFFFABRRRQB//SdRRRX0B4gUUUUAFFFFABRRRQB//TdRRRX0B4gUUUUAFFFFAwooooA//UdRRRX0B4gUUUUAFFFFAwooooA//Z', 'base64'); // Binary data string
+  const jpegBlobFile = new Blob([binaryString], { type: 'image/jpeg' });
+  const obj = { hello: 'world' };
+  const jsonBlobFile = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
+
+  it('should render', () => {
+    wrapper = mount(FileSelector, {
+      propsData: { label: 'upload' },
+      mocks:     {},
+      methods:   {},
+    });
+
+    const uploadButton = wrapper.find('.btn');
+
+    expect(wrapper.isVisible()).toBe(true);
+    expect(uploadButton.exists()).toBeTruthy();
+  });
+
+  it('should succeed when loading an image', async() => {
+    wrapper = mount(FileSelector, {
+      propsData: { label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml' },
+      mocks:     {},
+      methods:   {},
+    });
+    const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
+
+    const event = {
+      target: {
+        files: [
+          jpegBlobFile
+        ]
+      }
+    };
+
+    await wrapper.vm.fileChange(event);
+    expect(wrapper.emitted('selected')).toHaveLength(1);
+    expect(readAsTextSpy).toHaveBeenCalledWith(jpegBlobFile);
+  });
+
+  it('should fail when file is too big', async() => {
+    wrapper = mount(FileSelector, {
+      propsData: {
+        label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml', byteLimit: 10
+      },
+      mocks:   {},
+      methods: {},
+    });
+    const readAsTextSpy = jest.spyOn(FileReader.prototype, 'readAsText');
+
+    const event = {
+      target: {
+        files: [
+          jpegBlobFile
+        ]
+      }
+    };
+
+    await wrapper.vm.fileChange(event);
+    expect(wrapper.emitted('error')).toHaveLength(1);
+    expect(readAsTextSpy).not.toHaveBeenCalledWith(jsonBlobFile);
+  });
+});

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

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils';
+import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: NodeAffinity', () => {
+  it('should display the weight input when the priority is preferred', () => {
+    const nodeAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        preference: { matchExpressions: [] },
+        weight:     1
+      }],
+      requiredDuringSchedulingIgnoredDuringExecution: { nodeSelectorTerms: [{ matchExpressions: [] }] }
+    };
+    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+
+    expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-testid="node-affinity-weight-index1"]').exists()).toBeFalsy();
+  });
+
+  it('should display the weight input when the value is cleared', async() => {
+    const nodeAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        preference: { matchExpressions: [] },
+        weight:     1
+      }],
+    };
+
+    const wrapper = mount(NodeAffinity, { propsData: { mode: _CREATE, value: nodeAffinity } });
+
+    const weightInput = wrapper.find('[data-testid="node-affinity-weight-index0"]');
+
+    weightInput.setValue('');
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-testid="node-affinity-weight-index0"]').exists()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import PodAffinity from '@shell/components/form/PodAffinity.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('component: PodAffinity', () => {
+  it('should display the weight input when the priority is preferred', () => {
+    const podAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        podAffinityTerm: { topologyKey: 'test topology key 1' },
+        weight:          1
+      }],
+      requiredDuringSchedulingIgnoredDuringExecution: [{ topologyKey: 'test topology key 2' }]
+    };
+    const wrapper = mount(PodAffinity, {
+      propsData: {
+        mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
+      }
+    });
+
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index1"]').exists()).toBeFalsy();
+  });
+
+  it('should display the weight input when the value is cleared', async() => {
+    const podAffinity = {
+      preferredDuringSchedulingIgnoredDuringExecution: [{
+        podAffinityTerm: { topologyKey: 'test topology key 1' },
+        weight:          1
+      }],
+    };
+
+    const wrapper = mount(PodAffinity, {
+      propsData: {
+        mode: _CREATE, field: 'overrideAffinity', value: { overrideAffinity: { podAffinity } }
+      }
+    });
+
+    const weightInput = wrapper.find('[data-testid="pod-affinity-weight-index0"]');
+
+    weightInput.setValue('');
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-testid="pod-affinity-weight-index0"]').exists()).toBeTruthy();
+  });
+});

package/components/formatter/ClusterLink.vue

@@ -1,5 +1,6 @@
 <script>
 import { get } from '@shell/utils/object';
+import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
   props: {
@@ -27,10 +28,10 @@ export default {
 
     statusErrorConditions() {
       if (this.row.hasError) {
-        return this.row?.status.conditions.filter((condition) => condition.error === true);
+        return this.row?.status.conditions.filter((cond) => cond.error === true && !isConditionReadyAndWaiting(cond));
       }
 
-      return false;
+      return [];
     },
 
     formattedConditions() {
@@ -46,7 +47,7 @@ export default {
         return formattedTooltip.toString().replaceAll(',', '');
       }
 
-      return false;
+      return '';
     },
   },
 
@@ -66,16 +67,19 @@ export default {
       v-if="row.unavailableMachines"
       v-clean-tooltip="row.unavailableMachines"
       class="conditions-alert-icon icon-alert icon"
+      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"
     />
     <i
-      v-if="row.hasError"
+      v-if="row.hasError && statusErrorConditions.length > 0"
       v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
       class="conditions-alert-icon icon-error icon-lg"
+      data-testid="conditions-has-error-icon"
     />
   </span>
 </template>

package/components/formatter/ClusterProvider.vue

@@ -12,7 +12,9 @@ export default {
       // model doesn't work for imported K3s clusters, in
       // which case it returns 'k3s' instead of 'imported.'
       // This is the workaround.
-      isImported: props.row.mgmt?.providerForEmberParam === 'import'
+      isImported: props.row?.mgmt?.providerForEmberParam === 'import' ||
+        // when imported cluster is Google GKE
+        props.row?.mgmt?.spec?.gkeConfig?.imported
     };
   },
 };

package/components/formatter/ImageName.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  props:
+    {
+      value: {
+        type:    String,
+        default: ''
+      }
+    }
+};
+</script>
+
+<template>
+  <span class="formatter-image">
+    {{ value }}
+  </span>
+</template>
+
+<style scoped>
+  .formatter-image {
+    word-break: break-all;
+  }
+</style>

package/components/formatter/PodImages.vue

@@ -55,7 +55,7 @@ export default {
 </script>
 
 <template>
-  <span>
+  <span class="formatter-pod-images">
     <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
@@ -64,3 +64,9 @@ export default {
     >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
   </span>
 </template>
+
+<style scoped>
+  .formatter-pod-images {
+    word-break: break-all;
+  }
+</style>

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

@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+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', () => {
+    const testCases = [
+      [undefined, false],
+      [0, false],
+      [1, true],
+      [5, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on on the number of unavailable machines',
+      (unavailableMachines, expected) => {
+        const wrapper = mount(ClusterLink, {
+          propsData: {
+            row: {
+              hasError:           false,
+              status:             {},
+              unavailableMachines,
+              rkeTemplateUpgrade: undefined
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(UNAVAILABLE_MACHINES_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+
+  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, {
+          propsData: {
+            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"
+    }];
+    const MOCKED_CONDITIONS_2 = [{
+      status: 'any', type: 'any', error: true
+    }];
+
+    const testCases = [
+      [[], false],
+      [MOCKED_CONDITIONS_1, false],
+      [MOCKED_CONDITIONS_2, true],
+    ];
+
+    it.each(testCases)(
+      'should show/hide properly based on the status conditions',
+      (conditions, expected) => {
+        const wrapper = mount(ClusterLink, {
+          propsData: {
+            row: {
+              hasError:            true,
+              status:              { conditions },
+              unavailableMachines: 0
+            },
+            reference: 'any',
+            value:     'any'
+          }
+        });
+        const el = wrapper.find(CONDITION_HAS_ERROR_ICON_SELECTOR);
+
+        expect(el.exists()).toBe(expected);
+      }
+    );
+  });
+});

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils';
+import ClusterProvider from '@shell/components/formatter/ClusterProvider.vue';
+
+describe('component: ClusterProvider', () => {
+  const importedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: true } } } };
+  const notImportedGkeClusterInfo = { mgmt: { spec: { gkeConfig: { imported: false } } } };
+  const importedClusterInfoWithProviderForEmberParam = { mgmt: { providerForEmberParam: 'import' } };
+
+  describe('isImported', () => {
+    const testCases = [
+      [importedGkeClusterInfo, true],
+      [notImportedGkeClusterInfo, false],
+      [importedClusterInfoWithProviderForEmberParam, true],
+      [{}, undefined],
+    ];
+
+    it.each(testCases)('should return the isImported value properly based on the props data', (row, expected) => {
+      const wrapper = mount(ClusterProvider, { propsData: { row } });
+
+      expect(wrapper.vm.$data.isImported).toBe(expected);
+    }
+    );
+  });
+});