@rancher/shell 0.3.17 → 0.3.19

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';

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

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils';
+import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+
+describe('component: Banner', () => {
+  it('should display text based on label', () => {
+    const label = 'test';
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
+
+    const element = wrapper.find('span').element;
+
+    expect(element.textContent).toBe(label);
+  });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
+});

package/rancher-components/components/Banner/Banner.vue

@@ -0,0 +1,244 @@
+<script lang="ts">
+import Vue from 'vue';
+import { nlToBr } from '@shell/utils/string';
+import { stringify } from '@shell/utils/error';
+
+export default Vue.extend({
+  props: {
+    /**
+     * A color class that represents the color of the banner.
+     * @values primary, secondary, success, warning, error, info
+     */
+    color: {
+      type:    String,
+      default: 'secondary'
+    },
+    /**
+     * The label to display as the banner's default content.
+     */
+    label: {
+      type:    [String, Error, Object],
+      default: null
+    },
+    /**
+     * The i18n key for the label to display as the banner's default content.
+     */
+    labelKey: {
+      type:    String,
+      default: null
+    },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+    /**
+     * Toggles the banner's close button.
+     */
+    closable: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Toggles the stacked class for the banner.
+     */
+    stacked: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  computed: {
+    /**
+     * Return message text as label.
+     */
+    messageLabel(): string | void {
+      return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
+    }
+  },
+  methods: { nlToBr }
+});
+</script>
+<template>
+  <div
+    class="banner"
+    :class="{
+      [color]: true,
+    }"
+  >
+    <div
+      v-if="icon"
+      class="banner__icon"
+      data-testid="banner-icon"
+    >
+      <i
+        class="icon icon-2x"
+        :class="icon"
+      />
+    </div>
+    <div
+      class="banner__content"
+      data-testid="banner-content"
+      :class="{
+        closable,
+        stacked,
+        icon
+      }"
+    >
+      <slot>
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+          :raw="true"
+        />
+        <span v-else-if="messageLabel">{{ messageLabel }}</span>
+        <span
+          v-else
+          v-clean-html="nlToBr(label)"
+        />
+      </slot>
+      <div
+        v-if="closable"
+        class="banner__content__closer"
+        @click="$emit('close')"
+      >
+        <i
+          data-testid="banner-close"
+          class="icon icon-close closer-icon"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$left-border-size: 4px;
+$icon-size: 24px;
+
+.banner {
+  display: flex;
+  margin: 15px 0;
+  position: relative;
+  width: 100%;
+  color: var(--body-text);
+
+  &__icon {
+    width: $icon-size * 2;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+
+    .primary & {
+      background: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default);
+    }
+
+    .success & {
+      background: var(--success);
+    }
+
+    .info & {
+      background: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning);
+    }
+
+    .error & {
+      background: var(--error);
+      color: var(--primary-text);
+    }
+  }
+
+  &__content {
+    padding: 10px;
+    transition: all 0.2s ease;
+    line-height: 20px;
+    width: 100%;
+    border-left: solid $left-border-size transparent;
+    display: flex;
+    gap: 3px;
+
+    .primary & {
+      background: var(--primary);
+      border-color: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default-banner-bg);
+      border-color: var(--default);
+    }
+
+    .success & {
+      background: var(--success-banner-bg);
+      border-color: var(--success);
+    }
+
+    .info & {
+      background: var(--info-banner-bg);
+      border-color: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning-banner-bg);
+      border-color: var(--warning);
+    }
+
+    .error & {
+      background: var(--error-banner-bg);
+      border-color: var(--error);
+      color: var(--error);
+    }
+
+    &.stacked {
+      padding: 0 10px;
+      margin: 0;
+      transition: none;
+      &:first-child {
+        padding-top: 10px;
+      }
+      &:last-child {
+        padding-bottom: 10px;
+      }
+    }
+
+    &.closable {
+      padding-right: $icon-size * 2;
+    }
+
+    &__closer {
+      display: flex;
+      align-items: center;
+
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+
+      .closer-icon {
+        opacity: 0.7;
+
+        &:hover {
+          opacity: 1;
+          color: var(--link);
+        }
+      }
+    }
+
+    &.icon {
+      border-left: none;
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import { Card } from './index';
+
+describe('component: Card', () => {
+  const title = 'Card title';
+  const body = 'Card body';
+
+  it('should have a card title', () => {
+    const wrapper = mount(Card, {
+      propsData: { title },
+      slots:     { title: '<div>Card title</div>' }
+    });
+
+    const element = wrapper.find('[data-testid="card-title-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(title);
+  });
+
+  it('should have a card body', () => {
+    const wrapper = mount(Card, {
+      propsData: { body },
+      slots:     { body: '<div>Card body</div>' }
+    });
+    const element = wrapper.find('[data-testid="card-body-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(body);
+  });
+
+  it('should display the default card actions', () => {
+    const wrapper = mount(Card);
+    const element = wrapper.find('[data-testid="card-actions-slot"]');
+
+    expect(element.exists()).toBe(true);
+  });
+});