@rancher/shell 0.3.21 → 0.3.23

package/plugins/steve/header-warnings.ts

@@ -0,0 +1,91 @@
+import { PerfSettingsWarningHeaders } from '@shell/config/settings';
+import { getPerformanceSetting } from '@shell/utils/settings';
+
+interface HttpResponse {
+  headers?: { [key: string]: string},
+  data?: any,
+  config: {
+    url: string,
+  }
+}
+
+/**
+ * Cache the kube api warning header settings that will determine if they are growled or not
+ */
+let warningHeaderSettings: PerfSettingsWarningHeaders;
+
+/**
+ * Extract sanitised warnings from the warnings header string
+ */
+function kubeApiHeaderWarnings(allWarnings: string): string[] {
+  // Find each warning.
+  // Each warning is separated by `,`... however... this can appear within the warning itself so can't `split` on it
+  // Instead provide a configurable way to split (default 299 - )
+  const warnings = allWarnings.split(warningHeaderSettings.separator) || [];
+
+  // Trim and remove effects of split
+  return warnings.reduce((res, warning) => {
+    const trimmedWarning = warning.trim();
+
+    if (!trimmedWarning) {
+      return res;
+    }
+
+    const fixedWarning = trimmedWarning.endsWith(',') ? trimmedWarning.slice(0, -1) : trimmedWarning;
+
+    // Why add the separator again? It's almost certainly `299 - ` which is important info to include
+    res.push(warningHeaderSettings.separator + fixedWarning);
+
+    return res;
+  }, [] as string[]);
+}
+
+/**
+ * Take action given the `warnings` in the response header of a kube api request
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function handleKubeApiHeaderWarnings(res: HttpResponse, dispatch: any, rootGetters: any, method: string, refreshCache = false): void {
+  const safeMethod = method?.toLowerCase(); // Some requests have this as uppercase
+
+  // Exit early if there's no warnings
+  if ((safeMethod !== 'post' && safeMethod !== 'put') || !res.headers?.warning) {
+    return;
+  }
+
+  // Grab the required settings
+  if (!warningHeaderSettings || refreshCache) {
+    const settings = getPerformanceSetting(rootGetters);
+
+    // Cache this, we don't need to react to changes within the same session
+    warningHeaderSettings = settings?.kubeAPI.warningHeader;
+  }
+
+  // Determine each warning
+  const sanitisedWarnings = kubeApiHeaderWarnings(res.headers?.warning);
+
+  if (!sanitisedWarnings.length) {
+    return;
+  }
+
+  // Shows warnings as growls
+  const growlWarnings = sanitisedWarnings.filter((w) => !warningHeaderSettings.notificationBlockList.find((blocked) => w.startsWith(blocked)));
+
+  if (growlWarnings.length) {
+    const resourceType = res.data?.type || res.data?.kind || rootGetters['i18n/t']('generic.resource', { count: 1 });
+
+    dispatch('growl/warning', {
+      title:   method === 'put' ? rootGetters['i18n/t']('growl.kubeApiHeaderWarning.titleUpdate', { resourceType }) : rootGetters['i18n/t']('growl.kubeApiHeaderWarning.titleCreate', { resourceType }),
+      message: growlWarnings.join(', '),
+      timeout: 0,
+    }, { root: true });
+  }
+
+  // Print warnings to console
+  const message = `Validation Warnings for ${ res.config.url }\n\n${ sanitisedWarnings.join('\n') }`;
+
+  if (process.env.dev) {
+    console.warn(`${ message }\n\n`, res.data); // eslint-disable-line no-console
+  } else {
+    console.debug(message); // eslint-disable-line no-console
+  }
+}

package/promptRemove/management.cattle.io.project.vue

@@ -71,9 +71,12 @@ export default {
     names() {
       return this.filteredNamespaces.map((obj) => obj.nameDisplay).slice(0, 5);
     },
-    // Only admins and cluster owners can see namespaces outside of projects
-    canSeeProjectlessNamespaces() {
-      return this.currentCluster.canUpdate;
+
+    canManageNamespaces() {
+      // Only admins and cluster owners can see namespaces outside of projects
+      // BUT cluster members can also manage projects and namespaces and may want to not delete the namespaces associated with the project
+      // as per https://github.com/rancher/dashboard/issues/9517 despite the namespaces cannot be seen afterwards (projectless)
+      return this.currentCluster.canUpdate || (this.currentProject.canDelete && this.filteredNamespaces.length && this.filteredNamespaces[0]?.canDelete);
     }
   },
   methods: {
@@ -81,7 +84,7 @@ export default {
     remove() {
       // Delete all of thre namespaces and return false - this tells the prompt remove dialog to continue and delete the project
       // Delete all namespaces if the user wouldn't be able to see them after deleting the project
-      if (this.deleteProjectNamespaces || !this.canSeeProjectlessNamespaces) {
+      if (this.deleteProjectNamespaces || !this.canManageNamespaces) {
         return Promise.all(this.filteredNamespaces.map((n) => n.remove())).then(() => false);
       }
 
@@ -97,7 +100,7 @@ export default {
     <div>
       <div class="mb-10">
         {{ t('promptRemove.attemptingToRemove', { type }) }} <span class="display-name">{{ `${displayName}.` }}</span>
-        <template v-if="!canSeeProjectlessNamespaces">
+        <template v-if="!canManageNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
             v-clean-html="resourceNames(names, plusMore, t)"
@@ -106,7 +109,7 @@ export default {
         </template>
       </div>
       <div
-        v-if="filteredNamespaces.length > 0 && canSeeProjectlessNamespaces"
+        v-if="filteredNamespaces.length > 0 && canManageNamespaces"
         class="mt-20 remove-project-dialog"
       >
         <Checkbox

package/rancher-components/BadgeState/BadgeState.vue

@@ -60,11 +60,7 @@ export default Vue.extend({
 
 <template>
   <span :class="{'badge-state': true, [bg]: true}">
-    <i
-      v-if="icon"
-      class="icon"
-      :class="{[icon]: true, 'mr-5': !!msg}"
-    />{{ msg }}
+    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
   </span>
 </template>
 

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

@@ -1,63 +1,13 @@
 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 wrapper = mount(Banner, { 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/Banner/Banner.vue

@@ -27,13 +27,6 @@ export default Vue.extend({
       type:    String,
       default: null
     },
-    /**
-     * Add icon for the banner
-     */
-    icon: {
-      type:    String,
-      default: null
-    },
     /**
      * Toggles the banner's close button.
      */
@@ -65,137 +58,31 @@ export default Vue.extend({
     class="banner"
     :class="{
       [color]: true,
+      closable,
+      stacked
     }"
   >
-    <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>
+    <slot>
+      <t v-if="labelKey" :k="labelKey" :raw="true" />
+      <span v-else-if="messageLabel">{{ messageLabel }}</span>
+      <span v-else v-html="nlToBr(label)" />
+    </slot>
+    <div v-if="closable" class="closer" @click="$emit('close')">
+      <i class="icon icon-2x icon-close closer-icon" />
     </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);
-    }
+  $left-border-size: 4px;
 
-    .info & {
-      background: var(--info);
-    }
-
-    .warning & {
-      background: var(--warning);
-    }
-
-    .error & {
-      background: var(--error);
-      color: var(--primary-text);
-    }
-  }
-
-  &__content {
+  .banner {
     padding: 10px;
+    margin: 15px 0;
+    width: 100%;
     transition: all 0.2s ease;
+    position: relative;
     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;
@@ -210,10 +97,10 @@ $icon-size: 24px;
     }
 
     &.closable {
-      padding-right: $icon-size * 2;
+      padding-right: 40px;
     }
 
-    &__closer {
+    .closer {
       display: flex;
       align-items: center;
 
@@ -222,11 +109,12 @@ $icon-size: 24px;
       top: 0;
       right: 0;
       bottom: 0;
-      width: $icon-size;
-      line-height: $icon-size;
+      width: 40px;
+      line-height: 42px;
       text-align: center;
 
       .closer-icon {
+        font-size: 22px;
         opacity: 0.7;
 
         &:hover {
@@ -236,9 +124,40 @@ $icon-size: 24px;
       }
     }
 
-    &.icon {
-      border-left: none;
+    &.primary {
+      background: var(--primary);
+      border-left: solid $left-border-size var(--primary);
+      color: var(--body-text);
+    }
+
+    &.secondary {
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
+      color: var(--body-text);
+    }
+
+    &.success {
+      background: var(--success-banner-bg);
+      border-left: solid $left-border-size var(--success);
+      color: var(--body-text);
+    }
+
+    &.info {
+      background: var(--info-banner-bg);
+      border-left: solid $left-border-size var(--info);
+      color: var(--body-text);
+    }
+
+    &.warning {
+      background: var(--warning-banner-bg);
+      border-left: solid $left-border-size var(--warning);
+      color: var(--body-text);
+    }
+
+    &.error {
+      background: var(--error-banner-bg);
+      border-left: solid $left-border-size var(--error);
+      color: var(--error);
     }
   }
-}
 </style>

package/rancher-components/Card/Card.vue

@@ -49,45 +49,28 @@ export default Vue.extend({
     sticky: {
       type:    Boolean,
       default: false,
-    },
+    },    
   }
 });
 </script>
 
 <template>
-  <div
-    class="card-container"
-    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
-    data-testid="card"
-  >
+  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
     <div class="card-wrap">
-      <div
-        class="card-title"
-        data-testid="card-title-slot"
-      >
+      <div class="card-title">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
-      <hr>
-      <div
-        class="card-body"
-        data-testid="card-body-slot"
-      >
+      <hr />
+      <div class="card-body">
         <slot name="body">
           {{ content }}
         </slot>
       </div>
-      <div
-        v-if="showActions"
-        class="card-actions"
-        data-testid="card-actions-slot"
-      >
+      <div v-if="showActions" class="card-actions">
         <slot name="actions">
-          <button
-            class="btn role-primary"
-            @click="buttonAction"
-          >
+          <button class="btn role-primary" @click="buttonAction">
             {{ buttonText }}
           </button>
         </slot>

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

@@ -1,13 +1,7 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { Checkbox } from './index';
 
-describe('checkbox.vue', () => {
-  const event = {
-    target:          { tagName: 'input', href: null },
-    stopPropagation: () => { },
-    preventDefault:  () => { }
-  } as unknown as MouseEvent;
-
+describe('Checkbox.vue', () => {
   it('is unchecked by default', () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
@@ -22,7 +16,7 @@ describe('checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('updates from false to true when props change', async() => {
+  it('updates from false to true when props change', async () => {
     const wrapper = shallowMount(Checkbox);
     const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
 
@@ -33,36 +27,51 @@ describe('checkbox.vue', () => {
     expect(cbInput.checked).toBe(true);
   });
 
-  it('emits an input event with a true value', async() => {
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(true);
   });
 
-  it('emits an input event with a custom valueWhenTrue', async() => {
+  it('emits an input event with a custom valueWhenTrue', async () => {
     const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     await wrapper.vm.$nextTick();
 
     expect(wrapper.emitted().input?.length).toBe(1);
     expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
   });
 
-  it('updates from valueWhenTrue to falsy', async() => {
+  it('updates from valueWhenTrue to falsy', async () => {
     const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
 
-    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
 
-    wrapper.vm.clicked(event);
+    (wrapper.vm as any).clicked(event);
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted().input?.[0][0]).toBeNull();
-  });
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
 });