@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

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

@@ -0,0 +1,360 @@
+import { mount } from '@vue/test-utils';
+import Labels, { Factory } from '@shell/components/form/Labels.vue';
+import KeyValue from '@shell/components/form/KeyValue.vue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+const mockT = jest.fn((key: string) => key);
+
+describe('class: Factory', () => {
+  const mockProtectedWarning = 'Protected Key';
+
+  it('should correctly initialize with no protected keys or regexes', () => {
+    const factory = new Factory([], [], mockProtectedWarning, { a: '1', b: '2' });
+
+    expect((factory as any).protectedKeys).toStrictEqual([]);
+    expect((factory as any).protectedRegexes).toStrictEqual([]);
+    expect((factory as any).protectedWarning).toBe(mockProtectedWarning);
+    expect(factory.initValue).toStrictEqual({ a: '1', b: '2' });
+    expect(factory.value).toStrictEqual({ a: '1', b: '2' });
+    expect(factory.keyErrors).toStrictEqual({});
+    expect(factory.hasProtectedKeys).toBe(false);
+  });
+
+  it('should correctly initialize with protected keys', () => {
+    const factory = new Factory(['key1'], [], mockProtectedWarning, { key1: 'value1', key2: 'value2' });
+
+    expect((factory as any).protectedKeys).toStrictEqual(['key1']);
+    expect(factory.value).toStrictEqual({ key2: 'value2' });
+    expect(factory.hasProtectedKeys).toBe(true);
+  });
+
+  it('should correctly initialize with protected regexes', () => {
+    const factory = new Factory([], [/^key/], mockProtectedWarning, { key1: 'value1', other: 'value2' });
+
+    expect((factory as any).protectedRegexes.map((r: RegExp) => r.source)).toStrictEqual(['^key']);
+    expect(factory.value).toStrictEqual({ other: 'value2' });
+    expect(factory.hasProtectedKeys).toBe(true);
+  });
+
+  it('should omit protected keys from value but keep them in initValue', () => {
+    const factory = new Factory(['protected'], [], mockProtectedWarning, { protected: 'pVal', normal: 'nVal' });
+
+    expect(factory.initValue).toStrictEqual({ protected: 'pVal', normal: 'nVal' });
+    expect(factory.value).toStrictEqual({ normal: 'nVal' });
+  });
+
+  it('should update value and call callbackFn, preserving initial protected keys', () => {
+    const initialValue = {
+      system: 'sysVal', user: 'userVal', system2: 'sysVal'
+    };
+    const factory = new Factory(['system', 'system2'], [], mockProtectedWarning, initialValue);
+    const callback = jest.fn();
+
+    const newValue = {
+      newUser: 'newUVal', user: 'updatedUserVal', newProtected: 'newPVal', system: 'foo'
+    };
+
+    factory.update(newValue, callback);
+
+    // The internal factory.value is just the new set
+    expect(factory.value).toStrictEqual(newValue);
+
+    // The callback should receive the mix of new unprotected values and initial protected values
+    expect(callback).toHaveBeenCalledWith({
+      newProtected: 'newPVal',
+      newUser:      'newUVal',
+      user:         'updatedUserVal',
+      system:       'sysVal', // 'system' is the original protected from initialValue, sysVal is the original value
+      system2:      'sysVal' // 'system2' is the original protected from initialValue
+    });
+  });
+
+  it('should handle null/undefined update value gracefully', () => {
+    const initialValue = { system: 'sysVal', user: 'userVal' };
+    const factory = new Factory(['system'], [], mockProtectedWarning, initialValue);
+    const callback = jest.fn();
+
+    factory.update({}, callback);
+
+    expect(factory.value).toStrictEqual({});
+    expect(factory.keyErrors).toStrictEqual({});
+    expect(callback).toHaveBeenCalledWith({ system: 'sysVal' }); // Only the original protected values
+  });
+
+  it('should correctly identify protected keys based on both array and regex', () => {
+    const factory = new Factory(['staticKey'], [/^dynamic/], mockProtectedWarning, {});
+
+    expect((factory as any).isProtected('staticKey')).toBe(true);
+    expect((factory as any).isProtected('dynamicKey')).toBe(true);
+    expect((factory as any).isProtected('otherKey')).toBe(false);
+  });
+});
+
+describe('component: Labels', () => {
+  const mockValue = {
+    labels: {
+      'kubernetes.io/hostname': 'test-app',
+      'my-label':               'my-value'
+    },
+    systemLabels: ['kubernetes.io/hostname'],
+    annotations:  {
+      'cattle.io/system': 'user',
+      'my-annotation':    'my-annotation'
+    },
+    systemAnnotations: ['cattle.io/system'],
+    setLabels:         jest.fn(),
+    setAnnotations:    jest.fn(),
+  };
+
+  it('should initialize with correct data properties', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const data = (wrapper.vm as any).$data;
+
+    expect(data.labels).toBeDefined();
+    expect(data.labels.initValue).toStrictEqual(mockValue.labels);
+    expect(data.labels.protectedKeys).toStrictEqual(mockValue.systemLabels);
+    expect(data.labels.value).toStrictEqual({ 'my-label': 'my-value' });
+    expect(data.labels.hasProtectedKeys).toBe(true);
+    expect(data.labels.keyErrors).toStrictEqual({}); // only when manually update
+
+    expect(data.annotations).toBeDefined();
+    expect(data.annotations.initValue).toStrictEqual(mockValue.annotations);
+    expect(data.annotations.protectedKeys).toStrictEqual(mockValue.systemAnnotations);
+    expect(data.annotations.value).toStrictEqual({ 'my-annotation': 'my-annotation' });
+    expect(data.annotations.hasProtectedKeys).toBe(true);
+    expect(data.annotations.keyErrors).toStrictEqual({}); // only when manually update
+
+    expect(data.toggler).toBe(false);
+  });
+
+  it('should render KeyValue for labels', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+
+    expect(labelsKeyValue.exists()).toBe(true);
+    expect(labelsKeyValue.props('value')).toStrictEqual({ 'my-label': 'my-value' });
+    expect(labelsKeyValue.props('addLabel')).toBe('labels.addLabel');
+    expect(labelsKeyValue.props('mode')).toBe('create');
+    expect(labelsKeyValue.props('keyErrors')).toStrictEqual({});
+  });
+
+  it('should render KeyValue for annotations if showAnnotations is true', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: true,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const keyValueComponents = wrapper.findAllComponents(KeyValue);
+
+    expect(keyValueComponents).toHaveLength(2);
+    const annotationsKeyValue = keyValueComponents[1]; // The second KeyValue is for annotations
+
+    expect(annotationsKeyValue.exists()).toBe(true);
+    expect(annotationsKeyValue.props('value')).toStrictEqual({ 'my-annotation': 'my-annotation' });
+    expect(annotationsKeyValue.props('addLabel')).toBe('labels.addAnnotation');
+    expect(annotationsKeyValue.props('mode')).toBe('create');
+    expect(annotationsKeyValue.props('keyErrors')).toStrictEqual({});
+  });
+
+  it('should not render KeyValue for annotations if showAnnotations is false', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: false,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const keyValueComponents = wrapper.findAllComponents(KeyValue);
+
+    expect(keyValueComponents).toHaveLength(1); // Only the KeyValue for labels
+  });
+
+  it('should show ToggleSwitch in VIEW mode if there are protected keys', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(true);
+    const toggleSwitch = wrapper.findComponent(ToggleSwitch);
+
+    expect(toggleSwitch.exists()).toBe(true);
+    expect(toggleSwitch.props('onLabel')).toBe('labels.labels.show');
+  });
+
+  it('should not show ToggleSwitch in non-VIEW mode', () => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _EDIT,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(false);
+    expect(wrapper.findComponent(ToggleSwitch).exists()).toBe(false);
+  });
+
+  it('should not show ToggleSwitch in VIEW mode if no protected keys', () => {
+    const mockValueNoProtected = {
+      labels:            { 'my-label': 'my-value' },
+      systemLabels:      [],
+      annotations:       { 'my-annotation': 'my-annotation' },
+      systemAnnotations: [],
+      setLabels:         jest.fn(),
+      setAnnotations:    jest.fn(),
+    };
+
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValueNoProtected,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    expect((wrapper.vm as any).showToggler).toBe(false);
+    expect(wrapper.findComponent(ToggleSwitch).exists()).toBe(false);
+  });
+
+  it('should toggle label values when ToggleSwitch is activated', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+
+    expect(labelsKeyValue.props('value')).toStrictEqual({ 'my-label': 'my-value' }); // Initial: hidden protected
+
+    // Activate the toggle
+    await wrapper.findComponent(ToggleSwitch).vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).toggler).toBe(true);
+    expect(labelsKeyValue.props('value')).toStrictEqual(mockValue.labels); // Should show all labels including protected
+  });
+
+  it('should toggle annotation values when ToggleSwitch is activated', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  _VIEW,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const annotationsKeyValue = wrapper.findAllComponents(KeyValue)[1];
+
+    expect(annotationsKeyValue.props('value')).toStrictEqual({ 'my-annotation': 'my-annotation' }); // Initial: hidden protected
+
+    // Activate the toggle
+    await wrapper.findComponent(ToggleSwitch).vm.$emit('update:value', true);
+    await wrapper.vm.$nextTick();
+
+    expect((wrapper.vm as any).toggler).toBe(true);
+    expect(annotationsKeyValue.props('value')).toStrictEqual(mockValue.annotations); // Should show all annotations including protected
+  });
+
+  it('should call setLabels when labels KeyValue emits update:value', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const labelsKeyValue = wrapper.findComponent(KeyValue);
+    const newLabels = { 'new-label': 'new-value', 'my-label': 'my-value' };
+
+    await labelsKeyValue.vm.$emit('update:value', newLabels);
+
+    // We expect setLabels to be called with the new values, preserving initial protected ones
+    expect(mockValue.setLabels).toHaveBeenCalledWith({
+      'new-label':              'new-value',
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'test-app'
+    });
+  });
+
+  it('should call setAnnotations when annotations KeyValue emits update:value', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value:           mockValue,
+        mode:            'create',
+        showAnnotations: true,
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    const annotationsKeyValue = wrapper.findAllComponents(KeyValue)[1];
+    const newAnnotations = { 'new-anno': 'new-value', 'my-annotation': 'my-annotation' };
+
+    await annotationsKeyValue.vm.$emit('update:value', newAnnotations);
+
+    // We expect setAnnotations to be called with the new values, preserving initial protected ones
+    expect(mockValue.setAnnotations).toHaveBeenCalledWith({
+      'new-anno':         'new-value',
+      'my-annotation':    'my-annotation',
+      'cattle.io/system': 'user'
+    });
+  });
+
+  it('should add newly entered protected keys to keyErrors', async() => {
+    const wrapper = mount(Labels, {
+      props: {
+        value: mockValue,
+        mode:  'create',
+      },
+      global: { mocks: { t: mockT } },
+    });
+
+    // Insert new protected key
+    const newLabels = {
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'new-protected-value',
+      'non-protected':          'value'
+    };
+
+    await wrapper.vm.labels.update(newLabels, () => {});
+    await wrapper.vm.$nextTick();
+
+    // Expect to add protected labels in keyErrors
+    expect((wrapper.vm as any).labels.keyErrors).toStrictEqual({ 'kubernetes.io/hostname': 'labels.protectedWarning' });
+
+    // On edit, should key the protected label in the list
+    expect((wrapper.vm as any).labels.value).toStrictEqual({
+      'my-label':               'my-value',
+      'kubernetes.io/hostname': 'new-protected-value',
+      'non-protected':          'value'
+    });
+  });
+});

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

@@ -53,19 +53,22 @@ describe('component: MatchExpressions', () => {
   it.each([
     'operator',
   ])('should emit an update on %p selection change', async(field) => {
-    const wrapper = mount(MatchExpressions, {
-      props: {
-        mode:  _CREATE,
-        value: [
-          {
-            id:       '123',
-            key:      '123',
-            operator: 'anything',
-            values:   '123'
-          }
-        ]
-      },
-    });
+    const wrapper = mount(
+      MatchExpressions,
+      {
+        attachTo: document.body,
+        props:    {
+          mode:  _CREATE,
+          value: [
+            {
+              id:       '123',
+              key:      '123',
+              operator: 'anything',
+              values:   '123'
+            }
+          ]
+        },
+      });
 
     const select = wrapper.find(`[data-testid="input-match-expression-${ field }-0"]`);
 

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

@@ -77,7 +77,8 @@ describe('select.vue', () => {
         value,
         label:      'some-label',
         options,
-        searchable: true
+        searchable: true,
+        loading:    false,
       }
     });
 
@@ -91,7 +92,9 @@ describe('select.vue', () => {
     await input.trigger('keydown.enter');
 
     // mimic pressing space on search box inside v-select
-    await input.trigger('keydown.space', mockEvent);
+    const search = input.find('input');
+
+    await search.trigger('keydown.space', mockEvent);
 
     // eslint-disable-next-line
     expect(spyFocus).toHaveBeenCalled();

package/components/formatter/FleetApplicationSource.vue

@@ -50,7 +50,7 @@ export default {
       :value="row.source.value || ''"
     />
     <template v-if="row.source.value && row.sourceSub.value">
-      <div class="text-muted">
+      <div class="text-label">
         <Shortened
           long-value-key="sourceSub.value"
           :row="row"

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')"

package/components/google/AccountAccess.vue

@@ -0,0 +1,211 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { _CREATE, _VIEW } from '@shell/config/query-params';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import SelectCredential from '@shell/edit/provisioning.cattle.io.cluster/SelectCredential.vue';
+import AsyncButton from '@shell/components/AsyncButton.vue';
+import { mapGetters, Store } from 'vuex';
+import { getGKEZones } from '@shell/components/google/util/gcp';
+
+export default defineComponent({
+  name: 'GKEAccountAccess',
+
+  emits: ['update:isAuthenticated', 'error', 'update:project', 'cancel-credential', 'update:credential'],
+
+  components: {
+    LabeledInput,
+    SelectCredential,
+    AsyncButton
+  },
+
+  props: {
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
+    credential: {
+      type:    String,
+      default: null
+    },
+
+    project: {
+      type:    String,
+      default: ''
+    },
+
+    isAuthenticated: {
+      type:    Boolean,
+      default: false
+    },
+  },
+
+  created() {
+    if (this.mode === _VIEW) {
+      this.$emit('update:isAuthenticated', true);
+    }
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    CREATE(): string {
+      return _CREATE;
+    },
+
+    VIEW(): string {
+      return _VIEW;
+    },
+
+    isView():boolean {
+      return this.mode === _VIEW;
+    }
+
+  },
+
+  methods: {
+    async testProjectId(cb: (success: Boolean)=>{}) {
+      const store = this.$store as Store<any>;
+
+      try {
+        await getGKEZones(store, this.credential, this.project, {});
+
+        this.$emit('update:isAuthenticated', true);
+
+        // eslint-disable-next-line node/no-callback-literal
+        return cb(true);
+      } catch (e) {
+        this.$emit('error', e?.data || e);
+        this.$emit('update:isAuthenticated', false);
+
+        // eslint-disable-next-line node/no-callback-literal
+        return cb(false);
+      }
+    },
+
+    // gcp credentials include a project id - we can grab that and auto-fill to save users having to manually enter it
+    // this only applies to new credentials because of the way credential data is stored
+    parseNewCredential(e) {
+      const authJson = e?.googlecredentialConfig?.authEncodedJson;
+
+      if (authJson) {
+        try {
+          // eslint-disable-next-line camelcase
+          const { project_id:projectId } = JSON.parse(authJson);
+
+          if (projectId) {
+            this.$emit('update:project', projectId);
+          }
+        } catch (e) {
+
+        }
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <div>
+    <div
+      :class="{'showing-form': !credential}"
+      class="credential-project"
+    >
+      <div
+        v-show="!!credential"
+        class="project mb-10"
+      >
+        <LabeledInput
+          :disabled="isAuthenticated"
+          :value="project"
+          label-key="gke.project.label"
+          required
+          @update:value="(val) => $emit('update:project', val.trim())"
+        />
+      </div>
+      <div
+        :class="{'view': isView}"
+        class="select-credential-container mb-10"
+      >
+        <SelectCredential
+          :value="credential"
+          data-testid="crugke-select-credential"
+          :mode="(isView|| isAuthenticated) ? VIEW : CREATE"
+          provider="gcp"
+          :default-on-cancel="true"
+          :showing-form="!credential"
+          class="select-credential"
+          :cancel="()=>$emit('cancel-credential')"
+          @update:value="$emit('update:credential', $event)"
+          @credential-created="parseNewCredential"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!isView && !isAuthenticated"
+      class="row mt-10"
+    >
+      <div
+        v-show="!!credential"
+        class="auth-button-container mb-10"
+      >
+        <AsyncButton
+          :disabled="!credential || !project || isAuthenticated"
+          type="button"
+          class="btn"
+          mode="authenticate"
+          @click="testProjectId"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .credential-project {
+    display: flex;
+    min-width: 150px;
+    .project {
+      flex-basis: 49.25%;
+      flex-grow: 0;
+      margin: 0 1.75% 0 0;
+    }
+
+    &.showing-form {
+      flex-grow:1;
+      flex-direction: column;
+
+      &>.project {
+        margin: 0;
+      }
+
+      &>.select-credential-container{
+      display:flex;
+      flex-direction: column;
+      flex-grow: 1;
+      }
+    }
+
+    &>.select-credential-container{
+      flex-basis: 49.25%;
+
+      &.view{
+        margin: 0;
+      }
+
+      &>.select-credential{
+        flex-grow: 1;
+      }
+
+    }
+  }
+
+  .auth-button-container {
+    align-content: center;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+</style>