@rancher/shell 0.4.0 → 0.5.1

package/plugins/dashboard-store/mutations.js

@@ -23,10 +23,6 @@ function registerType(state, type) {
     // Not enumerable so they don't get sent back to the client for SSR
     Object.defineProperty(cache, 'map', { value: new Map() });
 
-    if ( process.server && !cache.list.__rehydrateAll ) {
-      Object.defineProperty(cache.list, '__rehydrateAll', { value: `${ state.config.namespace }/${ type }`, enumerable: true });
-    }
-
     Vue.set(state.types, type, cache);
   }
 

package/plugins/dashboard-store/resource-class.js

@@ -105,6 +105,7 @@ export const STATES_ENUM = {
   ERRORING:         'erroring',
   ERRORS:           'errors',
   EXPIRED:          'expired',
+  EXPIRING:         'expiring',
   FAIL:             'fail',
   FAILED:           'failed',
   HEALTHY:          'healthy',
@@ -167,6 +168,13 @@ export const STATES_ENUM = {
   WARNING:          'warning',
 };
 
+export function mapStateToEnum(statusString) {
+  // e.g. in fleet Status is Capitalized. This function will map it to the enum
+  return Object.values(STATES_ENUM).find((val) => {
+    return val.toLowerCase() === statusString.toLocaleLowerCase();
+  });
+}
+
 export const STATES = {
   [STATES_ENUM.IN_USE]: {
     color: 'success', icon: 'dot-open', label: 'In Use', compoundIcon: 'checkmark'
@@ -253,7 +261,10 @@ export const STATES = {
     color: 'error', icon: 'error', label: 'Errors', compoundIcon: 'error'
   },
   [STATES_ENUM.EXPIRED]: {
-    color: 'warning', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+    color: 'error', icon: 'error', label: 'Expired', compoundIcon: 'warning'
+  },
+  [STATES_ENUM.EXPIRING]: {
+    color: 'warning', icon: 'error', label: 'Expiring', compoundIcon: 'error'
   },
   [STATES_ENUM.FAIL]: {
     color: 'error', icon: 'error', label: 'Fail', compoundIcon: 'error'
@@ -512,6 +523,28 @@ export function stateDisplay(state) {
   return key.split(/-/).map(ucFirst).join('-');
 }
 
+export function primaryDisplayStatusFromCount(status) {
+  const statusOrder = [
+    STATES_ENUM.ERROR,
+    STATES_ENUM.FAILED,
+    STATES_ENUM.WARNING,
+    STATES_ENUM.MODIFIED,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.ORPHANED,
+    STATES_ENUM.MISSING,
+    STATES_ENUM.UNKNOWN,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.READY,
+  ];
+
+  // sort status by order of statusOrder
+  const existingStatuses = Object.keys(status).filter((key) => {
+    return status[key] > 0 && statusOrder.includes(key.toLowerCase());
+  }).sort((a, b) => statusOrder.indexOf(a.toLowerCase()) - statusOrder.indexOf(b.toLowerCase()));
+
+  return existingStatuses[0] ? existingStatuses[0] : STATES_ENUM.UNKNOWN;
+}
+
 export function stateSort(color, display) {
   color = color.replace(/^(text|bg)-/, '');
 
@@ -1089,6 +1122,16 @@ export default class Resource {
     return this._save(...arguments);
   }
 
+  /**
+   * Remove any unwanted properties from the object that will be saved
+   */
+  cleanForSave(data, forNew) {
+    delete data.__rehydrate;
+    delete data.__clone;
+
+    return data;
+  }
+
   /**
    * Allow to handle the response of the save request
    * @param {*} res Full request response
@@ -1096,9 +1139,6 @@ export default class Resource {
   processSaveResponse(res) { }
 
   async _save(opt = {}) {
-    delete this.__rehydrate;
-    delete this.__clone;
-
     const forNew = !this.id;
 
     const errors = await this.validationErrors(this, opt.ignoreFields);
@@ -1145,22 +1185,24 @@ export default class Resource {
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
     opt.data = this.toSave() || { ...this };
 
-    if (opt?.data._type) {
+    if (opt.data._type) {
       opt.data.type = opt.data._type;
     }
 
-    if (opt?.data._name) {
+    if (opt.data._name) {
       opt.data.name = opt.data._name;
     }
 
-    if (opt?.data._labels) {
+    if (opt.data._labels) {
       opt.data.labels = opt.data._labels;
     }
 
-    if (opt?.data._annotations) {
+    if (opt.data._annotations) {
       opt.data.annotations = opt.data._annotations;
     }
 
+    opt.data = this.cleanForSave(opt.data, forNew);
+
     // handle "replace" opt as a query param _replace=true for norman PUT requests
     if (opt?.replace && opt.method === 'put') {
       const argParam = opt.url.includes('?') ? '&' : '?';
@@ -1218,19 +1260,11 @@ export default class Resource {
   // ------------------------------------------------------------------
 
   currentRoute() {
-    if ( process.server ) {
-      return this.$rootState.$route;
-    } else {
-      return window.$nuxt.$route;
-    }
+    return window.$nuxt.$route;
   }
 
   currentRouter() {
-    if ( process.server ) {
-      return this.$rootState.$router;
-    } else {
-      return window.$nuxt.$router;
-    }
+    return window.$nuxt.$router;
   }
 
   get listLocation() {
@@ -1931,4 +1965,11 @@ export default class Resource {
   get creationTimestamp() {
     return this.metadata?.creationTimestamp;
   }
+
+  /**
+   * Allows model to specify JSON Paths that should be folded in the YAML editor by default
+   */
+  get yamlFolding() {
+    return [];
+  }
 }

package/plugins/steve/__tests__/steve-class.spec.ts

@@ -0,0 +1,59 @@
+import Steve from '@shell/plugins/steve/steve-class.js';
+import { steveClassJunkObject } from './utils/steve-mocks';
+
+describe('class: Steve', () => {
+  describe('given custom resource keys', () => {
+    const customResource = steveClassJunkObject;
+
+    it('should keep internal keys', () => {
+      const steve = new Steve(customResource, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': jest.fn() },
+      });
+
+      expect({ ...steve }).toStrictEqual(customResource);
+    });
+
+    describe('method: save', () => {
+      it('should remove all the internal keys', async() => {
+        const dispatch = jest.fn();
+        const steve = new Steve(customResource, {
+          getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+          dispatch,
+          rootGetters: { 'i18n/t': jest.fn() },
+        });
+
+        const expectation = {
+          type:     customResource.type,
+          metadata: {
+            resourceVersion:            'whatever',
+            fields:                     'whatever',
+            clusterName:                'whatever',
+            deletionGracePeriodSeconds: 'whatever',
+            generateName:               'whatever',
+          },
+          spec: { versions: {} }
+        };
+
+        await steve.save();
+
+        const opt = {
+          data:    expectation,
+          headers: {
+            accept:         'application/json',
+            'content-type': 'application/json',
+          },
+          method: 'post',
+          url:    undefined,
+        };
+
+        // Data sent should have been cleaned
+        expect(dispatch).toHaveBeenCalledWith('request', { opt, type: customResource.type });
+
+        // Original workload model should remain unchanged
+        expect({ ...steve }).toStrictEqual(customResource);
+      });
+    });
+  });
+});

package/plugins/steve/__tests__/utils/steve-mocks.ts

@@ -0,0 +1,31 @@
+import { resourceClassJunkObject } from '@shell/plugins/dashboard-store/__tests__/utils/store-mocks';
+
+const customType = 'asdasd';
+
+export const steveClassJunkObject = {
+  ...resourceClassJunkObject,
+  type:     customType,
+  __clone:  'whatever',
+  metadata: {
+    clusterName:                'whatever',
+    creationTimestamp:          'whatever',
+    deletionGracePeriodSeconds: 'whatever',
+    deletionTimestamp:          'whatever',
+    fields:                     'whatever',
+    finalizers:                 'whatever',
+    generateName:               'whatever',
+    generation:                 'whatever',
+    initializers:               'whatever',
+    managedFields:              'whatever',
+    ownerReferences:            'whatever',
+    relationships:              'whatever',
+    selfLink:                   'whatever',
+    state:                      'whatever',
+    uid:                        'whatever',
+    resourceVersion:            'whatever',
+  },
+  spec:       { versions: { schema: 'whatever' } },
+  links:      'whatever',
+  status:     'whatever',
+  stringData: 'whatever',
+};

package/plugins/steve/getters.js

@@ -24,11 +24,14 @@ const GC_IGNORE_TYPES = {
   [UI.NAV_LINK]: true,
 };
 
+// Include calls to /v1 AND /k8s/clusters/<cluster id>/v1
+const steveRegEx = new RegExp('(/v1)|(\/k8s\/clusters\/[a-z0-9-]+\/v1)');
+
 export default {
   urlOptions: () => (url, opt) => {
     opt = opt || {};
     const parsedUrl = parse(url);
-    const isSteve = parsedUrl.path.startsWith('/v1');
+    const isSteve = steveRegEx.test(parsedUrl.path);
 
     // Filter
     if ( opt.filter ) {

package/plugins/steve/norman-class.js

@@ -3,6 +3,7 @@ import pickBy from 'lodash/pickBy';
 import Vue from 'vue';
 import { matchesSomeRegex } from '@shell/utils/string';
 import Resource from '@shell/plugins/dashboard-store/resource-class';
+import { findBy } from '@shell/utils/array';
 
 export default class NormanModel extends Resource {
   setLabels(val) {
@@ -56,4 +57,22 @@ export default class NormanModel extends Resource {
       Vue.set(this, key, { ...spec[key] });
     });
   }
+
+  isCondition(condition, withStatus = 'True') {
+    if ( !this.conditions ) {
+      return false;
+    }
+
+    const entry = findBy((this.conditions || []), 'type', condition);
+
+    if ( !entry ) {
+      return false;
+    }
+
+    if ( !withStatus ) {
+      return true;
+    }
+
+    return (entry.status || '').toLowerCase() === `${ withStatus }`.toLowerCase();
+  }
 }

package/plugins/steve/steve-class.js

@@ -1,5 +1,17 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import HybridModel from './hybrid-class';
+import { NEVER_ADD } from '@shell/utils/create-yaml';
+import { deleteProperty } from '@shell/utils/object';
+
+// Some fields that are removed for YAML (NEVER_ADD) are required via API
+const STEVE_ADD = [
+  'metadata.resourceVersion',
+  'metadata.fields',
+  'metadata.clusterName',
+  'metadata.deletionGracePeriodSeconds',
+  'metadata.generateName',
+];
+const STEVE_NEVER_SAVE = NEVER_ADD.filter((na) => !STEVE_ADD.includes(na));
 
 export default class SteveModel extends HybridModel {
   get name() {
@@ -28,4 +40,14 @@ export default class SteveModel extends HybridModel {
 
     this._description = value;
   }
+
+  cleanForSave(data, forNew) {
+    const val = super.cleanForSave(data);
+
+    for (const field of STEVE_NEVER_SAVE) {
+      deleteProperty(val, field);
+    }
+
+    return val;
+  }
 }

package/plugins/steve/subscribe.js

@@ -332,10 +332,6 @@ const sharedActions = {
 
     commit('setWantSocket', true);
 
-    if ( process.server ) {
-      return;
-    }
-
     state.debugSocket && console.info(`Subscribe [${ getters.storeName }]`); // eslint-disable-line no-console
 
     const url = `${ state.config.baseUrl }/subscribe`;
@@ -601,7 +597,7 @@ const defaultActions = {
   },
 
   rehydrateSubscribe({ state, dispatch }) {
-    if ( process.client && state.wantSocket && !state.socket ) {
+    if ( state.wantSocket && !state.socket ) {
       dispatch('subscribe');
     }
   },
@@ -728,11 +724,9 @@ const defaultActions = {
     }
 
     // Try resending any frames that were attempted to be sent while the socket was down, once.
-    if ( !process.server ) {
-      for ( const obj of state.pendingFrames.slice() ) {
-        commit('dequeuePendingFrame', obj);
-        dispatch('sendImmediate', obj);
-      }
+    for ( const obj of state.pendingFrames.slice() ) {
+      commit('dequeuePendingFrame', obj);
+      dispatch('sendImmediate', obj);
     }
   },
 

package/rancher-components/Accordion/Accordion.test.ts

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { Accordion } from './index';
+
+describe('component: Accordion', () => {
+  it('is closed initially by default', () => {
+    const title = 'Test Title';
+
+    const wrapper = shallowMount(Accordion, { propsData: { title } });
+
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(false);
+    expect(wrapper.find('[data-testid="accordion-header"]').text()).toBe(title);
+  });
+
+  it('is opened initially when openInitially prop is true', () => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(true);
+  });
+
+  it('when closed, opens when the header is clicked', async() => {
+    const wrapper = shallowMount(Accordion, { });
+
+    await wrapper.find('[data-testid="accordion-header"]').trigger('click');
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(true);
+  });
+
+  it('when open, closes when the header is clicked', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    await wrapper.find('[data-testid="accordion-header"]').trigger('click');
+    expect(wrapper.find('[data-testid="accordion-body"]').isVisible()).toBe(false);
+  });
+
+  it('displays a chevron when closed', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { } });
+
+    expect(wrapper.find('[data-testid="accordion-header"] .icon-chevron-up').exists()).toBe(true);
+  });
+
+  it('displays an inverted chevron when open', async() => {
+    const wrapper = shallowMount(Accordion, { propsData: { openInitially: true } });
+
+    expect(wrapper.find('[data-testid="accordion-header"] .icon-chevron-down').exists()).toBe(true);
+  });
+});

package/rancher-components/Accordion/Accordion.vue

@@ -0,0 +1,85 @@
+<script lang="ts">
+import Vue from 'vue';
+import { mapGetters } from 'vuex';
+export default Vue.extend({
+  props: {
+    title: {
+      type:    String,
+      default: ''
+    },
+
+    titleKey: {
+      type:    String,
+      default: null
+    },
+
+    openInitially: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return { isOpen: this.openInitially };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen;
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="accordion-container">
+    <div
+      class="accordion-header"
+      data-testid="accordion-header"
+      @click="toggle"
+    >
+      <i
+        class="icon text-primary"
+        :class="{'icon-chevron-down':isOpen, 'icon-chevron-up':!isOpen}"
+        data-testid="accordion-chevron"
+      />
+      <slot name="header">
+        <h4
+          data-testid="accordion-title-slot-content"
+          class="mb-0"
+        >
+          {{ titleKey ? t(titleKey) : title }}
+        </h4>
+      </slot>
+    </div>
+    <div
+      v-show="isOpen"
+      class="accordion-body"
+      data-testid="accordion-body"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.accordion-container {
+  border: 1px solid var(--border)
+}
+.accordion-header {
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  &>*{
+    padding: 5px 0px 5px 0px;
+  }
+  I {
+    margin: 0px 10px 0px 10px;
+  }
+}
+.accordion-body {
+  padding: 10px;
+}
+</style>

package/rancher-components/Accordion/index.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion.vue';

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,3 @@
-
 import { mount } from '@vue/test-utils';
 import { LabeledInput } from './index';
 
@@ -6,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, {
+    const wrapper = mount(LabeledInput as any, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });
@@ -20,4 +19,22 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('input')).toHaveLength(1);
     expect(wrapper.emitted('input')![0][0]).toBe(value);
   });
+
+  it('using mode "multiline" should emit input value correctly', () => {
+    const value = 'any-string';
+    const delay = 1;
+    const wrapper = mount(LabeledInput as any, {
+      propsData: { delay, multiline: true },
+      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+    });
+
+    jest.useFakeTimers();
+    wrapper.find('input').setValue('1');
+    wrapper.find('input').setValue(value);
+    jest.advanceTimersByTime(delay);
+    jest.useRealTimers();
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe(value);
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -90,7 +90,7 @@ export default (
     delay: {
       type:    Number,
       default: 0
-    }
+    },
   },
 
   data() {
@@ -206,9 +206,19 @@ export default (
       }
     },
 
+    /**
+     * Emit on input change
+     */
+    onChange(event: Event): void {
+      this.$emit('change', event);
+    },
+
     /**
      * Emit on input with delay. Note: Arrow function is avoided due context
      * binding.
+     *
+     * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
+     * https://github.com/rancher/dashboard/issues/10249
      */
     delayInput(value: string): void {
       this.$emit('input', value);
@@ -299,6 +309,7 @@ export default (
         @input="onInput($event.target.value)"
         @focus="onFocus"
         @blur="onBlur"
+        @change="onChange"
       >
     </slot>
 

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -4,7 +4,7 @@ import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
+    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' }, propsData: { val: {}, value: {} } });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
   });
@@ -14,7 +14,9 @@ describe('radioButton.vue', () => {
       RadioButton,
       {
         directives: { cleanHtmlDirective },
-        propsData:  { label: 'Test Label' }
+        propsData:  {
+          label: 'Test Label', val: {}, value: {}
+        }
       });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label');
@@ -23,7 +25,9 @@ describe('radioButton.vue', () => {
   it('renders slot contents when both slot and label prop are provided', () => {
     const wrapper = shallowMount(RadioButton, {
       slots:     { label: 'Test Label - Slot' },
-      propsData: { label: 'Test Label - Props' },
+      propsData: {
+        label: 'Test Label - Props', val: {}, value: {}
+      },
     });
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');

package/rancher-components/Form/Radio/RadioGroup.test.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import { RadioGroup } from './index';
+
+describe('component: RadioGroup', () => {
+  describe('when disabled', () => {
+    it.each([true, false])('should expose disabled slot prop for indexed slots for %p', (disabled) => {
+      const wrapper = mount(RadioGroup, {
+        propsData: {
+          name:    'whatever',
+          options: [{ label: 'whatever', value: 'whatever' }],
+          disabled
+        },
+        scopedSlots: {
+          0(props: {isDisabled: boolean}) {
+            return this.$createElement('input', {
+              attrs: {
+                id:       'test',
+                disabled: props.isDisabled
+              }
+            });
+          }
+        }
+      });
+
+      const slot = wrapper.find('#test').element as HTMLInputElement;
+
+      expect(slot.disabled).toBe(disabled);
+    });
+  });
+});

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -169,6 +169,7 @@ export default Vue.extend({
 
 <template>
   <div>
+    <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
@@ -195,6 +196,8 @@ export default Vue.extend({
         </h3>
       </slot>
     </div>
+
+    <!-- Group -->
     <div
       class="radio-group"
       :class="{'row':row}"
@@ -212,6 +215,7 @@ export default Vue.extend({
           :is-disabled="isDisabled"
           :name="i"
         >
+          <!-- Default input -->
           <RadioButton
             :key="name+'-'+i"
             :name="name"