@rancher/shell 0.3.17 → 0.3.18

package/pages/c/_cluster/uiplugins/index.vue

@@ -541,6 +541,7 @@ export default {
     },
 
     showAddExtensionReposDialog() {
+      this.updateAddReposSetting();
       this.refreshCharts(true);
       this.$refs.addExtensionReposDialog.showDialog();
     },
@@ -745,14 +746,13 @@ export default {
         <Banner
           v-if="showAddReposBanner"
           color="warning"
-          class="mb-20"
-          :closable="true"
+          class="add-repos-banner mb-20"
           data-testid="extensions-new-repos-banner"
-          @close="updateAddReposSetting"
         >
           <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
           <button
             class="ml-10 btn btn-sm role-primary"
+            data-testid="extensions-new-repos-banner-action-btn"
             @click="showAddExtensionReposDialog()"
           >
             {{ t('plugins.addRepos.bannerBtn') }}
@@ -1237,11 +1237,16 @@ export default {
       }
     }
   }
-
   ::v-deep .checkbox-label {
     font-weight: normal !important;
   }
 
+  ::v-deep .add-repos-banner .banner__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   @media screen and (max-width: 1200px) {
     .plugin-list {
       .plugin {

package/pages/home.vue

@@ -17,7 +17,7 @@ import { getVersionInfo, readReleaseNotes, markReadReleaseNotes, markSeenRelease
 import PageHeaderActions from '@shell/mixins/page-actions';
 import { getVendor } from '@shell/config/private-label';
 import { mapFeature, MULTI_CLUSTER } from '@shell/store/features';
-import { BLANK_CLUSTER } from '@shell/store';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 
 import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';

package/plugins/dashboard-store/__tests__/actions.spec.ts

@@ -0,0 +1,165 @@
+import _actions from '@shell/plugins/dashboard-store/actions';
+
+const { findAll } = _actions;
+
+describe('dashboard-store: actions', () => {
+  const setupContext = () => {
+    const commit = jest.fn();
+    const dispatch = jest.fn((...args) => {
+      switch (args[0]) {
+      case 'request':
+        return { data: ['requestData'] };
+      }
+    });
+    const state = { config: { namespace: 'unitTest' } };
+    const getters = {
+      normalizeType:    jest.fn(() => 'getters.normalizeType'),
+      typeRegistered:   jest.fn(() => false),
+      haveAll:          jest.fn(() => false),
+      haveAllNamespace: jest.fn(() => false),
+      all:              jest.fn(() => 'getters.all'),
+      urlFor:           jest.fn(() => 'getters.urlFor'), // we're not testing the urlFor getter so we don't need to do anything with opt here
+    };
+    const rootGetters = {
+      'type-map/optionsFor': jest.fn(),
+      'auth/fromHeader':     'foo'
+    };
+
+    // we're not testing function output based off of state or getter inputs here since they are dependencies and should be tested independently
+    return {
+      state,
+      getters,
+      rootGetters,
+      commit,
+      dispatch
+    };
+  };
+
+  const standardAssertions = {
+    returnsPromise:
+      {
+        assertionLabel: 'returns a promise',
+        valueGetter:    ({ findAllPromise }) => typeof findAllPromise.then,
+        valueExpected:  'function'
+      },
+    callsAll: {
+      assertionLabel: 'calls the "all" getter with the normalizedType',
+      valueGetter:    ({ getters }) => getters.all.mock.calls[0][0],
+      valueExpected:  'getters.normalizeType'
+    },
+    returnsFromAll: {
+      assertionLabel: 'returns the value expected from the "all" getter',
+      valueGetter:    ({ findAllReturnValue }) => findAllReturnValue,
+      valueExpected:  'getters.all'
+    },
+    firstDispatchAction: {
+      assertionLabel: 'first dispatch should be the "request" action',
+      valueGetter:    ({ dispatch }) => dispatch.mock.calls[0][0],
+      valueExpected:  'request'
+    },
+    firstDispatchParams: {
+      assertionLabel: 'first dispatch parameters should be provided a normalized type and a url, streaming, and "metadata.managedFields" excluded under opt',
+      valueGetter:    ({ dispatch }) => dispatch.mock.calls[0][1],
+      valueExpected:  {
+        type: 'getters.normalizeType',
+        opt:  {
+          url:    'getters.urlFor',
+          stream: true
+        }
+      },
+      assertionMethod: 'toMatchObject'
+    },
+    secondDispatchAction: {
+      assertionLabel: 'second dispatch should be the "watch" action',
+      valueGetter:    ({ dispatch }) => dispatch.mock.calls[1][0],
+      valueExpected:  'watch'
+    },
+    secondDispatchParams: {
+      assertionLabel:  'second dispatch parameters should have a normalized type and force set to false',
+      valueGetter:     ({ dispatch }) => dispatch.mock.calls[1][1],
+      valueExpected:   { type: 'getters.normalizeType', force: false },
+      assertionMethod: 'toMatchObject'
+    },
+    countDispatches: {
+      assertionLabel:  'should only make two dispatches',
+      valueGetter:     ({ dispatch }) => dispatch.mock.calls,
+      valueExpected:   2,
+      assertionMethod: 'toHaveLength'
+    },
+    firstCommitMutation: {
+      assertionLabel: 'first commit should be the "registerType" mutation',
+      valueGetter:    ({ commit }) => commit.mock.calls[0][0],
+      valueExpected:  'registerType'
+    },
+    firstCommitParams: {
+      assertionLabel: 'first commit parameter should be a normalized type',
+      valueGetter:    ({ commit }) => commit.mock.calls[0][1],
+      valueExpected:  'getters.normalizeType'
+    },
+    secondCommitMutation: {
+      assertionLabel: 'second commit should be the "loadAll" mutation',
+      valueGetter:    ({ commit }) => commit.mock.calls[1][0],
+      valueExpected:  'loadAll'
+    },
+    secondCommitParams: {
+      assertionLabel: 'second commit parameters should have a normalized type, ctx.state.config.namespace, data returned by request, and skipHaveAll set to false',
+      valueGetter:    ({ commit }) => commit.mock.calls[1][1],
+      valueExpected:  {
+        type:        'getters.normalizeType',
+        ctx:         { state: { config: { namespace: 'unitTest' } } },
+        data:        ['requestData'],
+        skipHaveAll: false,
+      },
+      assertionMethod: 'toMatchObject'
+    },
+    countCommits: {
+      assertionLabel:  'should only make two commits',
+      valueGetter:     ({ commit }) => commit.mock.calls,
+      valueExpected:   2,
+      assertionMethod: 'toHaveLength'
+    }
+
+  };
+
+  describe('dashboard-store > actions > findAll', () => {
+    describe('called without a cache for the type in the second param', () => {
+      const {
+        dispatch, commit, getters, rootGetters, state
+      } = setupContext();
+
+      const findAllPromise = findAll(
+        {
+          dispatch, commit, getters, rootGetters, state
+        },
+        { type: 'type' }
+      );
+
+      const assertionChain = [
+        standardAssertions.returnsPromise,
+        standardAssertions.callsAll,
+        standardAssertions.returnsFromAll,
+        standardAssertions.firstDispatchAction,
+        standardAssertions.firstDispatchParams,
+        standardAssertions.secondDispatchAction,
+        standardAssertions.secondDispatchParams,
+        standardAssertions.countDispatches,
+        standardAssertions.firstCommitMutation,
+        standardAssertions.firstCommitParams,
+        standardAssertions.secondCommitMutation,
+        standardAssertions.secondCommitParams,
+        standardAssertions.countCommits
+      ];
+
+      it.each(assertionChain)(
+        '$assertionLabel',
+        async({ valueGetter, valueExpected, assertionMethod = 'toBe' }) => {
+          const findAllReturnValue = await findAllPromise;
+
+          expect(valueGetter({
+            findAllPromise, findAllReturnValue, getters, dispatch, commit
+          }))[assertionMethod](valueExpected);
+        }
+      );
+    });
+  });
+});

package/plugins/dashboard-store/__tests__/getters.spec.ts

@@ -0,0 +1,100 @@
+import getters, { urlFor } from '@shell/plugins/dashboard-store/getters';
+
+const { urlOptions } = getters;
+
+describe('dashboard-store: getters', () => {
+  describe('dashboard-store > getters > exported function: urlFor', () => {
+    // we're not testing function output based off of state or getter inputs here since they are dependencies
+    const state = { config: { baseUrl: 'protocol' } };
+    const getters = {
+      normalizeType: (type) => type,
+      schemaFor:     (type) => {
+        if (type === 'typeFoo') {
+          return { links: { collection: 'urlFoo' } };
+        }
+      },
+      // this has its own tests so it just returns the input string
+      urlOptions: (string) => string
+    };
+
+    const urlForGetter = urlFor(state, getters);
+
+    it('expects urlFor to return a function', () => {
+      expect(typeof urlFor(state, getters)).toBe('function');
+    });
+
+    it('expects function returned by urlFor to return a string', () => {
+      expect(urlForGetter('typeFoo')).toBe('protocol/urlFoo');
+    });
+
+    it('expects function returned by urlFor to return a the url supplied as opt.url directly', () => {
+      expect(urlForGetter('typeFoo', null, { url: 'urlBar' })).toBe('protocol/urlBar');
+    });
+
+    it('expects function returned by urlFor to return a the url to not receive an additional protocol if relative url', () => {
+      expect(urlForGetter('typeFoo', null, { url: '/urlBar' })).toBe('/urlBar');
+    });
+
+    it('expects function returned by urlFor to return a the url to to not receive an additional protocol if the url starts with "http"', () => {
+      expect(urlForGetter('typeFoo', null, { url: 'http urlBar' })).toBe('http urlBar');
+    });
+
+    it('expects function returned by urlFor to throw an error if passed an invalid type', () => {
+      expect(() => urlForGetter('typeBaz')).toThrow('Unknown schema for type: typeBaz');
+    });
+
+    it('expects function returned by urlFor to append an id to the url if one is supplied', () => {
+      expect(urlForGetter('typeFoo', 'idBar')).toBe('protocol/urlFoo/idBar');
+    });
+  });
+  describe('dashboard-store > getters > urlOptions', () => {
+    // we're not testing function output based off of state or getter inputs here since they are dependencies
+    const state = { config: { baseUrl: 'protocol' } };
+    const getters = {
+      normalizeType: (type) => type,
+      schemaFor:     (type) => {
+        if (type === 'typeFoo') {
+          return { links: { collection: 'urlFoo' } };
+        }
+      },
+      // this has its own tests so it just returns the input string
+      urlOptions: (string) => string
+    };
+
+    const urlOptionsGetter = urlOptions();
+
+    it('expects urlOptions to return a function', () => {
+      expect(typeof urlOptions(state, getters)).toBe('function');
+    });
+    it('returns undefined when called without params', () => {
+      expect(urlOptionsGetter()).toBeUndefined();
+    });
+    it('returns an unmodified string when called without options', () => {
+      expect(urlOptionsGetter('foo')).toBe('foo');
+    });
+    it('returns an unmodified string when called with options that are not accounted for', () => {
+      expect(urlOptionsGetter('foo', { bar: 'baz' })).toBe('foo');
+    });
+    it('returns an unmodified stringif a single filter statement is applied', () => {
+      expect(urlOptionsGetter('foo', { filter: { bar: 'baz' } })).toBe('foo');
+    });
+    it('returns an unmodified string if a single filter statement is applied', () => {
+      expect(urlOptionsGetter('foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('foo');
+    });
+    it('returns an unmodified string if excludeFields is a single element array with the string "bar"', () => {
+      expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo');
+    });
+    it('returns an unmodified string if excludeFields is an array but the URL doesnt include the "/v1/ string"', () => {
+      expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');
+    });
+    it('returns an unmodified string if a limit is provided', () => {
+      expect(urlOptionsGetter('foo', { limit: 10 })).toBe('foo');
+    });
+    it('returns an unmodified string if the sort option is provided', () => {
+      expect(urlOptionsGetter('foo', { sortBy: 'bar' })).toBe('foo');
+    });
+    it('returns an unmodified string if the sort option is provided and an order if sortOrder is provided', () => {
+      expect(urlOptionsGetter('foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('foo');
+    });
+  });
+});

package/plugins/dashboard-store/__tests__/{mutations.spec.js → mutations.spec.ts}

@@ -256,8 +256,8 @@ describe('dashboard-store: mutations', () => {
         {
           ctx,
           batch: {
-            [POD]:                        { [pod.id]: pod },
-            [ WORKLOAD_TYPES.DEPLOYMENT]: { [deployment.id]: deployment }
+            [POD]:                       { [pod.id]: pod },
+            [WORKLOAD_TYPES.DEPLOYMENT]: { [deployment.id]: deployment }
           }
         }
       ],

package/plugins/dashboard-store/actions.js

@@ -310,7 +310,7 @@ export default {
           data:      out.data,
           revision:  out.revision,
           skipHaveAll,
-          namespace: opt.namespaced,
+          namespace: opt.namespaced
         });
       }
     }

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

@@ -1464,6 +1464,10 @@ export default class Resource {
   }
 
   async saveYaml(yaml) {
+    this._saveYaml(yaml);
+  }
+
+  async _saveYaml(yaml) {
     /* Multipart support, but need to know the right cluster and work for management store
       and "apply" seems to only work for create, not update.
 

package/plugins/steve/__tests__/getters.spec.ts

@@ -0,0 +1,93 @@
+import _getters from '@shell/plugins/steve/getters';
+
+const { urlFor, urlOptions } = _getters;
+
+describe('steve: getters', () => {
+  describe('steve > getters > urlFor', () => {
+    // we're not testing function output based off of state or getter inputs here since they are dependencies
+    const state = { config: { baseUrl: 'protocol' } };
+    const getters = {
+      normalizeType: (type) => type,
+      schemaFor:     (type) => {
+        if (type === 'typeFoo') {
+          return { links: { collection: 'urlFoo' } };
+        }
+      },
+      // this has its own tests so it just returns the input string
+      urlOptions: (string) => string
+    };
+
+    const urlForGetter = urlFor(state, getters);
+
+    // most tests for this getter will go through the dashboard-store getters test spec, this only tests logic specific to the steve variant
+
+    it('expects urlFor to return a function', () => {
+      expect(typeof urlFor(state, getters)).toBe('function');
+    });
+
+    it('expects function returned by urlFor to return a string a type', () => {
+      expect(urlForGetter('typeFoo')).toBe('protocol/urlFoo');
+    });
+
+    it('expects function returned by urlFor to return a string containing a namespace when provided with a type and a single namespace string', () => {
+      expect(urlForGetter('typeFoo', undefined, { namespaced: 'nsBar' })).toBe('protocol/urlFoo/nsBar');
+    });
+
+    it('expects function returned by urlFor to return a string not containing a namespace when provided with a type and a multiple namespaces string', () => {
+      expect(urlForGetter('typeFoo', undefined, { namespaced: ['nsBar', 'nsBaz'] })).toBe('protocol/urlFoo');
+    });
+  });
+  describe('steve > getters > urlOptions', () => {
+    // we're not testing function output based off of state or getter inputs here since they are dependencies
+    const state = { config: { baseUrl: 'protocol' } };
+    const getters = {
+      normalizeType: (type) => type,
+      schemaFor:     (type) => {
+        if (type === 'typeFoo') {
+          return { links: { collection: 'urlFoo' } };
+        }
+      },
+      // this has its own tests so it just returns the input string
+      urlOptions: (string) => string
+    };
+
+    const urlOptionsGetter = urlOptions();
+
+    it('expects urlOptions to return a function', () => {
+      expect(typeof urlOptions(state, getters)).toBe('function');
+    });
+    it('returns undefined when called without params', () => {
+      expect(urlOptionsGetter()).toBeUndefined();
+    });
+    it('returns an unmodified string when called without options', () => {
+      expect(urlOptionsGetter('foo')).toBe('foo');
+    });
+    it('returns an unmodified string when called with options that are not accounted for', () => {
+      expect(urlOptionsGetter('foo', { bar: 'baz' })).toBe('foo');
+    });
+    it('returns a string with a single filter statement applied if a single filter statement is applied', () => {
+      expect(urlOptionsGetter('foo', { filter: { bar: 'baz' } })).toBe('foo?bar=baz');
+    });
+    it('returns a string with a multiple filter statements applied if a single filter statement is applied', () => {
+      expect(urlOptionsGetter('foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('foo?bar=baz&far=faz');
+    });
+    it('returns a string with an exclude statement for "bar" and "metadata.managedFields" if excludeFields is a single element array with the string "bar" and the url starts with "/v1/"', () => {
+      expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar&exclude=metadata.managedFields');
+    });
+    it('returns a string without an exclude statement if excludeFields is but the url does not start with "/v1/"', () => {
+      expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');
+    });
+    it('returns a string without an exclude statement if excludeFields is an array but the URL doesnt include the "/v1/ string"', () => {
+      expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');
+    });
+    it('returns a string with a limit applied if a limit is provided', () => {
+      expect(urlOptionsGetter('foo', { limit: 10 })).toBe('foo?limit=10');
+    });
+    it('returns a string with a sorting criteria if the sort option is provided', () => {
+      expect(urlOptionsGetter('foo', { sortBy: 'bar' })).toBe('foo?sort=bar');
+    });
+    it('returns a string with a sorting criteria if the sort option is provided and an order if sortOrder is provided', () => {
+      expect(urlOptionsGetter('foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('foo?sort=bar&order=baz');
+    });
+  });
+});

package/plugins/steve/getters.js

@@ -9,6 +9,7 @@ import NormanModel from './norman-class';
 import { urlFor } from '@shell/plugins/dashboard-store/getters';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
+import { parse } from '@shell/utils/url';
 
 export const STEVE_MODEL_TYPES = {
   NORMAN:  'norman',
@@ -26,8 +27,11 @@ const GC_IGNORE_TYPES = {
 export default {
   urlOptions: () => (url, opt) => {
     opt = opt || {};
+    const parsedUrl = parse(url);
+    const isSteve = parsedUrl.path.startsWith('/v1');
 
     // Filter
+    // Steve's filter options work differently nowadays (https://github.com/rancher/steve#filter) #9341
     if ( opt.filter ) {
       const keys = Object.keys(opt.filter);
 
@@ -54,6 +58,21 @@ export default {
     }
     // End: Filter
 
+    // Exclude
+    // excludeFields should be an array of strings representing the paths of the fields to exclude
+    // only works on Steve but is ignored without error by Norman
+    if (isSteve) {
+      if (Array.isArray(opt?.excludeFields)) {
+        opt.excludeFields = [...opt.excludeFields, 'metadata.managedFields'];
+      } else {
+        opt.excludeFields = ['metadata.managedFields'];
+      }
+      const excludeParamsString = opt.excludeFields.map((field) => `exclude=${ field }`).join('&');
+
+      url += `${ url.includes('?') ? '&' : '?' }${ excludeParamsString }`;
+    }
+    // End: Exclude
+
     // Limit
     const limit = opt.limit;
 
@@ -63,6 +82,7 @@ export default {
     // End: Limit
 
     // Sort
+    // Steve's sort options work differently nowadays (https://github.com/rancher/steve#sort) #9341
     const sortBy = opt.sortBy;
 
     if ( sortBy ) {
@@ -85,7 +105,7 @@ export default {
     // `namespaced` is either
     // - a string representing a single namespace - add restriction to the url
     // - an array of namespaces or projects - add restriction as a param
-    if (opt.namespaced && !pAndNFiltering.isApplicable(opt)) {
+    if (opt?.namespaced && !pAndNFiltering.isApplicable(opt)) {
       const parts = url.split('/');
 
       url = `${ parts.join('/') }/${ opt.namespaced }`;

package/plugins/steve/subscribe.js

@@ -32,9 +32,7 @@ import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
 import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
-
-import { BLANK_CLUSTER } from '@shell/store/index.js';
-import { STORE } from '@shell/store/store-types';
+import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;

package/rancher-components/components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+/**
+ * Badge state component.
+ * <p>Represents a badge whose label and color is either taken from the value property or
+ * from the label and color properties. The state property takes precedence.</p>
+ */
+export default Vue.extend({
+  props: {
+    /**
+     * A value having the properties `stateBackground` and `stateDisplay`
+     */
+    value: {
+      type:    Object as PropType<Badge>,
+      default: null
+    },
+
+    /**
+     * Badge color. `stateBackground` of the value property takes precedence if supplied
+     */
+    color: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Optional icon to be shown before the label
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
+     */
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+
+  computed: {
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      return this.value?.stateDisplay || this.label;
+    }
+  }
+});
+</script>
+
+<template>
+  <span :class="{'badge-state': true, [bg]: true}">
+    <i
+      v-if="icon"
+      class="icon"
+      :class="{[icon]: true, 'mr-5': !!msg}"
+    />{{ msg }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+  }
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>

package/rancher-components/components/BadgeState/index.ts

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