@rancher/shell 0.5.3 → 2.0.0

package/plugins/steve/subscribe.js

@@ -22,7 +22,8 @@ import Socket, {
   EVENT_DISCONNECT_ERROR,
   NO_WATCH,
   NO_SCHEMA,
-  REVISION_TOO_OLD
+  REVISION_TOO_OLD,
+  NO_PERMS
 } from '@shell/utils/socket';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import day from 'dayjs';
@@ -31,8 +32,9 @@ import { escapeHtml } from '@shell/utils/string';
 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 acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -130,7 +132,7 @@ export async function createWorker(store, ctx) {
       }
     },
     batchChanges: (batch) => {
-      dispatch('batchChanges', namespaceHandler.validateBatchChange(ctx, batch));
+      dispatch('batchChanges', acceptOrRejectSocketMessage.validateBatchChange(ctx, batch));
     },
     dispatch: (msg) => {
       dispatch(`ws.${ msg.name }`, msg);
@@ -204,66 +206,6 @@ export function equivalentWatch(a, b) {
   return true;
 }
 
-/**
- * Sockets will not be able to subscribe to more than one namespace. If this is requested we pretend to handle it
- * - Changes to all resources are monitored (no namespace provided in sub)
- * - We ignore any events not from a required namespace (we have the conversion of project --> namespaces already)
- */
-const namespaceHandler = {
-  /**
-   * Note - namespace can be a list of projects or namespaces
-   */
-  subscribeNamespace: (namespace) => {
-    if (pAndNFiltering.isApplicable({ namespaced: namespace }) && namespace.length) {
-      return undefined; // AKA sub to everything
-    }
-
-    return namespace;
-  },
-
-  validChange: ({ getters, rootGetters }, type, data) => {
-    const haveNamespace = getters.haveNamespace(type);
-
-    if (haveNamespace?.length) {
-      const namespaces = rootGetters.activeNamespaceCache;
-
-      if (!namespaces[data.metadata.namespace]) {
-        return false;
-      }
-    }
-
-    return true;
-  },
-
-  validateBatchChange: ({ getters, rootGetters }, batch) => {
-    const namespaces = rootGetters.activeNamespaceCache;
-
-    Object.entries(batch).forEach(([type, entries]) => {
-      const haveNamespace = getters.haveNamespace(type);
-
-      if (!haveNamespace?.length) {
-        return;
-      }
-
-      const schema = getters.schemaFor(type);
-
-      if (!schema?.attributes?.namespaced) {
-        return;
-      }
-
-      Object.keys(entries).forEach((id) => {
-        const namespace = id.split('/')[0];
-
-        if (!namespace || !namespaces[namespace]) {
-          delete entries[id];
-        }
-      });
-    });
-
-    return batch;
-  }
-};
-
 function queueChange({ getters, state, rootGetters }, { data, revision }, load, label) {
   const type = getters.normalizeType(data.type);
 
@@ -277,7 +219,7 @@ function queueChange({ getters, state, rootGetters }, { data, revision }, load,
 
   // console.log(`${ label } Event [${ state.config.namespace }]`, data.type, data.id); // eslint-disable-line no-console
 
-  if (!namespaceHandler.validChange({ getters, rootGetters }, type, data)) {
+  if (!acceptOrRejectSocketMessage.validChange({ getters, rootGetters }, type, data)) {
     return;
   }
 
@@ -421,7 +363,7 @@ const sharedActions = {
       type, selector, id, revision, namespace, stop, force
     } = params;
 
-    namespace = namespaceHandler.subscribeNamespace(namespace);
+    namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
     if (rootGetters['type-map/isSpoofed'](type)) {
@@ -430,6 +372,14 @@ const sharedActions = {
       return;
     }
 
+    const schema = getters.schemaFor(type, false, false);
+
+    if (!!schema?.attributes?.verbs?.includes && !schema.attributes.verbs.includes('watch')) {
+      state.debugSocket && console.info('Will not Watch (type does not have watch verb)', JSON.stringify(params)); // eslint-disable-line no-console
+
+      return;
+    }
+
     // If socket is in error don't try to watch.... unless we `force` it
     const inError = getters.inError(params);
 
@@ -453,7 +403,13 @@ const sharedActions = {
       return;
     }
 
-    if ( typeof revision === 'undefined' ) {
+    // isSteveCacheEnabled check is temporary and will be removed once Part 3 of https://github.com/rancher/dashboard/pull/10349 is resolved by backend
+    // Steve cache backed api does not return a revision, so `revision` here is always undefined
+    // Which means we find a revision within a resource itself and use it in the watch
+    // That revision is probably too old and results in a watch error
+    // Watch errors mean we make a http request to get latest revision (which is still missing) and try to re-watch with it...
+    // etc
+    if (typeof revision === 'undefined' && !paginationUtils.isSteveCacheEnabled({ rootGetters })) {
       revision = getters.nextResourceVersion(type, id);
     }
 
@@ -500,7 +456,7 @@ const sharedActions = {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
-      namespace = namespaceHandler.subscribeNamespace(namespace);
+      namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
 
       const obj = {
         type,
@@ -635,13 +591,17 @@ const defaultActions = {
       await dispatch('find', {
         type: resourceType,
         id,
-        opt,
+        opt:  {
+          ...opt,
+          // Pass the namespace so `find` can construct the url correctly
+          namespaced: namespace,
+          // Ensure that find calls watch with no revision (otherwise it'll use the revision from the resource which is probably stale)
+          revision:   null
+        },
       });
-      commit('clearInError', params);
 
       return;
     }
-
     let have, want;
 
     if ( selector ) {
@@ -844,15 +804,17 @@ const defaultActions = {
     const err = msg.data?.error?.toLowerCase();
 
     if ( err.includes('watch not allowed') ) {
-      commit('setInError', { type: msg.resourceType, reason: NO_WATCH });
+      commit('setInError', { msg, reason: NO_WATCH });
     } else if ( err.includes('failed to find schema') ) {
-      commit('setInError', { type: msg.resourceType, reason: NO_SCHEMA });
+      commit('setInError', { msg, reason: NO_SCHEMA });
     } else if ( err.includes('too old') ) {
       // Set an error for (all) subs of this type. This..
       // 1) blocks attempts by resource.stop to resub (as type is in error)
       // 2) will be cleared when resyncWatch --> watch (with force) --> resource.start completes
-      commit('setInError', { type: msg.resourceType, reason: REVISION_TOO_OLD });
+      commit('setInError', { msg, reason: REVISION_TOO_OLD });
       dispatch('resyncWatch', msg);
+    } else if ( err.includes('the server does not allow this method on the requested resource')) {
+      commit('setInError', { msg, reason: NO_PERMS });
     }
   },
 
@@ -1023,10 +985,10 @@ const defaultMutations = {
     }
   },
 
-  setInError(state, msg) {
+  setInError(state, { msg, reason }) {
     const key = keyForSubscribe(msg);
 
-    state.inError[key] = msg.reason;
+    state.inError[key] = reason;
   },
 
   clearInError(state, msg) {

package/plugins/trim-whitespace.js

@@ -1,37 +1,9 @@
 import Vue from 'vue';
+import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 
-export function trimWhitespace(el, dir) {
-  for (const node of el.childNodes) {
-    if (node.nodeType === Node.TEXT_NODE ) {
-      const trimmed = node.data.trim();
+export default trimWhitespaceDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing trimWhitespaceDirective from plugins has been deprecated, use shell/directives/trim-whitespace.js instead.
+Make sure to invoke it using Vue.directive('trim-whitespace', trimWhitespaceDirective ) to maintain compatibility.`);
 
-      if ( trimmed === '') {
-        node.remove();
-      } else if ( trimmed !== node.data ) {
-        node.data = trimmed;
-      }
-    }
-  }
-}
-
-export function trimWhitespaceSsr(el, dir) {
-  // This causes server<->client dom mismatches sometimes... gave up for now.
-  /*
-  for ( const node of (el.children || []) ) {
-    if ( node.text ) {
-      const trimmed = node.text.trim();
-
-      if ( trimmed !== node.text ) {
-        node.text = trimmed;
-      }
-    } else if ( node.children ) {
-      trimWhitespaceSsr(node);
-    }
-  }
-  */
-}
-
-Vue.directive('trim-whitespace', {
-  inserted:         trimWhitespace,
-  componentUpdated: trimWhitespace
-});
+Vue.directive('trim-whitespace', trimWhitespaceDirective );

package/plugins/vue-js-modal.js

@@ -1,4 +1,4 @@
 import Vue from 'vue';
-import VModal from 'vue-js-modal/dist/ssr.index';
+import VModal from 'vue-js-modal';
 
 Vue.use(VModal);

package/public/index.html

@@ -67,6 +67,7 @@
             <i class="initial-load-spinner"></i>
         </div>
     </div>
+    <div id="modals"><!--Portal content here--></div>
 </body>
 
 </html>

package/rancher-components/Accordion/Accordion.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
-export default Vue.extend({
+
+export default defineComponent({
   props: {
     title: {
       type:    String,

package/rancher-components/BadgeState/BadgeState.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <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({
+export default defineComponent({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <span :class="{'badge-state': true, [bg]: true}">
+  <span :class="['badge-state', bg]">
     <i
       v-if="icon"
       class="icon"

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

@@ -1,16 +1,12 @@
 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 }
-      });
+      { propsData: { label } });
 
     const element = wrapper.find('span').element;
 

package/rancher-components/Banner/Banner.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A color class that represents the color of the banner.

package/rancher-components/Card/Card.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default Vue.extend({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function,
+      type:    Function as PropType<(event: MouseEvent) => void>,
       default: (): void => { }
     },
     /**
@@ -151,7 +151,7 @@ export default Vue.extend({
 
       .card-body {
         justify-content: flex-start;
-        overflow: scroll;
+        overflow: auto;
       }
 
       > * {

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default Vue.extend({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent): boolean | void {
+    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;
@@ -325,6 +325,7 @@ $fontColor: var(--input-label);
     border-radius: var(--border-radius);
     transition: all 0.3s ease-out;
     border: 1px solid var(--border);
+    flex-shrink: 0;
   }
 
   input {

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

@@ -5,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput as any, {
+    const wrapper = mount(LabeledInput, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });

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

@@ -1,21 +1,27 @@
 <script lang="ts">
-import Vue, { VueConstructor } from 'vue';
-import CompactInput from '@shell/mixins/compact-input';
-import LabeledFormElement from '@shell/mixins/labeled-form-element';
+import { defineComponent } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
+import { useLabeledFormElement, labeledFormElementProps } from '@shell/composables/useLabeledFormElement';
+import { useCompactInput } from '@shell/composables/useCompactInput';
 
-export default (
-  Vue as VueConstructor<Vue & InstanceType<typeof LabeledFormElement> & InstanceType<typeof CompactInput>>
-).extend({
+declare module 'vue/types/vue' {
+  interface Vue {
+    onInput: (event: Event) => void | ((event: Event) => void);
+  }
+}
+
+export default defineComponent({
   components: { LabeledTooltip, TextAreaAutoGrow },
-  mixins:     [LabeledFormElement, CompactInput],
+
+  inheritAttrs: false,
 
   props: {
+    ...labeledFormElementProps,
     /**
      * The type of the Labeled Input.
      * @values text, cron, multiline, multiline-password
@@ -93,21 +99,36 @@ export default (
     },
   },
 
+  setup(props, { emit }) {
+    const {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField
+    } = useLabeledFormElement(props, emit);
+    const { isCompact } = useCompactInput(props);
+
+    return {
+      focused,
+      onFocusLabeled,
+      onBlurLabeled,
+      isDisabled,
+      validationMessage,
+      requiredField,
+      isCompact,
+    };
+  },
+
   data() {
     return {
       updated:          false,
-      validationErrors: ''
+      validationErrors: '',
     };
   },
 
   computed: {
-    /**
-     * Determines if the Labeled Input @input event should be debounced.
-     */
-    onInput(): ((value: string) => void) | void {
-      return this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
-    },
-
     /**
      * Determines if the Labeled Input should display a label.
      */
@@ -122,7 +143,7 @@ export default (
       return !!this.tooltip || !!this.tooltipKey;
     },
 
-    tooltipValue(): string | undefined {
+    tooltipValue(): string | Record<string, unknown> | undefined {
       if (this.hasTooltip) {
         return this.tooltipKey ? this.t(this.tooltipKey) : this.tooltip;
       }
@@ -144,7 +165,7 @@ export default (
       if (this.type !== 'cron' || !this.value) {
         return;
       }
-      if (!isValidCron(this.value)) {
+      if (typeof this.value === 'string' && !isValidCron(this.value)) {
         return this.t('generic.invalidCron');
       }
       try {
@@ -173,15 +194,22 @@ export default (
     /**
      * The max length for the Labeled Input.
      */
-    _maxlength(): number | null {
+    _maxlength(): number | undefined {
       if (this.type === 'text' && this.maxlength) {
         return this.maxlength;
       }
 
-      return null;
+      return undefined;
     },
   },
 
+  created() {
+    /**
+     * Determines if the Labeled Input @input event should be debounced.
+    */
+    this.onInput = this.delay ? debounce(this.delayInput, this.delay) : this.delayInput;
+  },
+
   methods: {
     /**
      * Attempts to give the Labeled Input focus.
@@ -220,7 +248,9 @@ export default (
      * NOTE: In multiline, TextAreaAutoGrow emits a string with the value
      * https://github.com/rancher/dashboard/issues/10249
      */
-    delayInput(value: string): void {
+    delayInput(val: string | Event): void {
+      const value = typeof val === 'string' ? val : (val?.target as HTMLInputElement)?.value;
+
       this.$emit('input', value);
     },
 
@@ -237,7 +267,7 @@ export default (
      * event.
      * @see labeled-form-element.ts mixin for onBlurLabeled()
      */
-    onBlur(event: string): void {
+    onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
     },
@@ -289,7 +319,7 @@ export default (
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        @input="onInput($event)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -306,7 +336,7 @@ export default (
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        @input="onInput($event.target.value)"
+        @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
         @change="onChange"
@@ -325,14 +355,20 @@ export default (
       :hover="hoverTooltip"
       :value="validationMessage"
     />
-    <label
-      v-if="cronHint"
-      class="cron-label"
-    >{{ cronHint }}</label>
-    <label
-      v-if="subLabel"
+    <div
+      v-if="cronHint || subLabel"
       class="sub-label"
-    >{{ subLabel }}</label>
+    >
+      <div
+        v-if="cronHint"
+      >
+        {{ cronHint }}
+      </div>
+      <div
+        v-if="subLabel"
+        v-clean-html="subLabel"
+      />
+    </div>
   </div>
 </template>
 <style scoped lang="scss">

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

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import { RadioButton } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('radioButton.vue', () => {
   it('renders label slot contents', () => {
@@ -13,8 +12,7 @@ describe('radioButton.vue', () => {
     const wrapper = shallowMount(
       RadioButton,
       {
-        directives: { cleanHtmlDirective },
-        propsData:  {
+        propsData: {
           label: 'Test Label', val: {}, value: {}
         }
       });

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+import { randomStr } from '@shell/utils/string';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * The name of the input, for grouping.
@@ -71,7 +72,10 @@ export default Vue.extend({
   },
 
   data() {
-    return { isChecked: this.value === this.val };
+    return {
+      isChecked:    this.value === this.val,
+      randomString: `${ randomStr() }-radio`,
+    };
   },
 
   computed: {
@@ -115,13 +119,15 @@ export default Vue.extend({
     /**
      * Emits the input event.
      */
-    clicked({ target }: { target?: HTMLElement }) {
-      if (this.isDisabled || target?.tagName === 'A') {
+    clicked(event: MouseEvent | KeyboardEvent) {
+      const target = event.target;
+
+      if (this.isDisabled || (target instanceof HTMLElement && target.tagName === 'A')) {
         return;
       }
 
       this.$emit('input', this.val);
-    }
+    },
   }
 });
 </script>
@@ -134,7 +140,7 @@ export default Vue.extend({
     @click.stop="clicked($event)"
   >
     <input
-      :id="_uid+'-radio'"
+      :id="randomString"
       :disabled="isDisabled"
       :name="name"
       :value="''+val"

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

@@ -1,14 +1,15 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 
 interface Option {
   value: unknown,
-  label: string
+  label: string,
+  description?: string,
 }
 
-export default Vue.extend({
+export default defineComponent({
   components: { RadioButton },
   props:      {
     /**