@rancher/shell 2.0.1 → 3.0.0-rc.1

package/components/nuxt/nuxt-child.js

@@ -1,53 +1,52 @@
 
 export default {
-  name: 'NuxtChild',
+  name:       'NuxtChild',
   functional: true,
-  props: {
+  props:      {
     nuxtChildKey: {
-      type: String,
+      type:    String,
       default: ''
     },
-    keepAlive: Boolean,
+    keepAlive:      Boolean,
     keepAliveProps: {
-      type: Object,
+      type:    Object,
       default: undefined
     }
   },
-  render (_, { parent, data, props }) {
-    const h = parent.$createElement
+  render(_, { parent, data, props }) {
+    const h = parent.$createElement;
 
-    data.nuxtChild = true
-    const _parent = parent
-    let depth = 0
+    data.nuxtChild = true;
+    const _parent = parent;
+    let depth = 0;
 
     while (parent) {
       if (parent.$vnode && parent.$vnode.data.nuxtChild) {
-        depth++
+        depth++;
       }
-      parent = parent.$parent
+      parent = parent.$parent;
     }
-    data.nuxtChildDepth = depth
+    data.nuxtChildDepth = depth;
+
+    const listeners = {};
+
+    const beforeEnter = listeners.beforeEnter;
 
-    const listeners = {}
-    
-    const beforeEnter = listeners.beforeEnter
     listeners.beforeEnter = (el) => {
       if (beforeEnter) {
-        return beforeEnter.call(_parent, el)
+        return beforeEnter.call(_parent, el);
       }
-    }
+    };
 
-    let routerView = h('routerView', data)
+    let routerView = h('routerView', data);
 
     if (props.keepAlive) {
-      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
+      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView]);
     }
 
-    // this needs to be a "transition" or another non-rendering component, 
+    // this needs to be a "transition" or another non-rendering component,
     // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
     // we can deal with this later once we remove this component and <nuxt /> component
-    return h('transition', {
-      on: listeners
-    }, [routerView])
+    return h('transition', { on: listeners }, [routerView]);
   }
-}
+};

package/components/nuxt/nuxt-error.vue

@@ -1,20 +1,50 @@
 <template>
   <div class="__nuxt-error-page">
     <div class="error">
-      <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="90"
+        height="90"
+        fill="#DBE1EC"
+        viewBox="0 0 48 48"
+      >
         <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
       </svg>
 
-      <div class="title">{{ message }}</div>
-      <p v-if="statusCode === 404" class="description">
-        <a v-if="typeof $route === 'undefined'" class="error-link" href="/"></a>
-        <router-link v-else class="error-link" to="/">Back to the home page</router-link>
+      <div class="title">
+        {{ message }}
+      </div>
+      <p
+        v-if="statusCode === 404"
+        class="description"
+      >
+        <a
+          v-if="typeof $route === 'undefined'"
+          class="error-link"
+          href="/"
+        />
+        <router-link
+          v-else
+          class="error-link"
+          to="/"
+        >
+          Back to the home page
+        </router-link>
       </p>
 
-      <p class="description" v-else>An error occurred while rendering the page. Check developer tools console for details.</p>
+      <p
+        v-else
+        class="description"
+      >
+        An error occurred while rendering the page. Check developer tools console for details.
+      </p>
 
       <div class="logo">
-        <a href="https://nuxtjs.org" target="_blank" rel="noopener">Nuxt</a>
+        <a
+          href="https://nuxtjs.org"
+          target="_blank"
+          rel="noopener"
+        >Nuxt</a>
       </div>
     </div>
   </div>
@@ -22,33 +52,33 @@
 
 <script>
 export default {
-  name: 'NuxtError',
+  name:  'NuxtError',
   props: {
     error: {
-      type: Object,
+      type:    Object,
       default: null
     }
   },
   computed: {
-    statusCode () {
-      return (this.error && this.error.statusCode) || 500
+    statusCode() {
+      return (this.error && this.error.statusCode) || 500;
     },
-    message () {
-      return this.error.message || 'Error'
+    message() {
+      return this.error.message || 'Error';
     }
   },
-  head () {
+  head() {
     return {
       title: this.message,
-      meta: [
+      meta:  [
         {
-          name: 'viewport',
+          name:    'viewport',
           content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
         }
       ]
-    }
+    };
   }
-}
+};
 </script>
 
 <style>

package/components/nuxt/nuxt-link.client.js

@@ -9,8 +9,9 @@ export const nuxtLinkAlias = (aliasName) => {
   return {
     functional: true,
     render(createElement, context) {
-      console.warn(`${aliasName} is deprecated in Rancher Dashboard. Use 'router-link' instead.`);
+      console.warn(`${ aliasName } is deprecated in Rancher Dashboard. Use 'router-link' instead.`); // eslint-disable-line no-console
+
       return createElement('router-link', context.data, context.children);
     }
-  }
-}
+  };
+};

package/components/nuxt/nuxt-loading.vue

@@ -1,103 +1,111 @@
 <script>
 export default {
   name: 'NuxtLoading',
-  data () {
+  data() {
     return {
-      percent: 0,
-      show: false,
-      canSucceed: true,
-      reversed: false,
+      percent:        0,
+      show:           false,
+      canSucceed:     true,
+      reversed:       false,
       skipTimerCount: 0,
-      rtl: false,
-      throttle: 200,
-      duration: 3000,
-      continuous: false
-    }
+      rtl:            false,
+      throttle:       200,
+      duration:       3000,
+      continuous:     false
+    };
   },
   computed: {
-    left () {
+    left() {
       if (!this.continuous && !this.rtl) {
-        return false
+        return false;
       }
-      return this.rtl
-        ? (this.reversed ? '0px' : 'auto')
-        : (!this.reversed ? '0px' : 'auto')
+
+      return this.rtl ? (this.reversed ? '0px' : 'auto') : (!this.reversed ? '0px' : 'auto');
     }
   },
-  beforeDestroy () {
-    this.clear()
+  beforeUnmount() {
+    this.clear();
   },
   methods: {
-    clear () {
-      clearInterval(this._timer)
-      clearTimeout(this._throttle)
-      this._timer = null
+    clear() {
+      clearInterval(this._timer);
+      clearTimeout(this._throttle);
+      this._timer = null;
     },
-    start () {
-      this.clear()
-      this.percent = 0
-      this.reversed = false
-      this.skipTimerCount = 0
-      this.canSucceed = true
+    start() {
+      this.clear();
+      this.percent = 0;
+      this.reversed = false;
+      this.skipTimerCount = 0;
+      this.canSucceed = true;
 
       if (this.throttle) {
-        this._throttle = setTimeout(() => this.startTimer(), this.throttle)
+        this._throttle = setTimeout(() => this.startTimer(), this.throttle);
       } else {
-        this.startTimer()
+        this.startTimer();
       }
-      return this
+
+      return this;
     },
-    set (num) {
-      this.show = true
-      this.canSucceed = true
-      this.percent = Math.min(100, Math.max(0, Math.floor(num)))
-      return this
+    set(num) {
+      this.show = true;
+      this.canSucceed = true;
+      this.percent = Math.min(100, Math.max(0, Math.floor(num)));
+
+      return this;
     },
-    get () {
-      return this.percent
+    get() {
+      return this.percent;
     },
-    increase (num) {
-      this.percent = Math.min(100, Math.floor(this.percent + num))
-      return this
+    increase(num) {
+      this.percent = Math.min(100, Math.floor(this.percent + num));
+
+      return this;
     },
-    decrease (num) {
-      this.percent = Math.max(0, Math.floor(this.percent - num))
-      return this
+    decrease(num) {
+      this.percent = Math.max(0, Math.floor(this.percent - num));
+
+      return this;
     },
-    pause () {
-      clearInterval(this._timer)
-      return this
+    pause() {
+      clearInterval(this._timer);
+
+      return this;
     },
-    resume () {
-      this.startTimer()
-      return this
+    resume() {
+      this.startTimer();
+
+      return this;
     },
-    finish () {
-      this.percent = this.reversed ? 0 : 100
-      this.hide()
-      return this
+    finish() {
+      this.percent = this.reversed ? 0 : 100;
+      this.hide();
+
+      return this;
     },
-    hide () {
-      this.clear()
+    hide() {
+      this.clear();
       setTimeout(() => {
-        this.show = false
+        this.show = false;
         this.$nextTick(() => {
-          this.percent = 0
-          this.reversed = false
-        })
-      }, 500)
-      return this
+          this.percent = 0;
+          this.reversed = false;
+        });
+      }, 500);
+
+      return this;
     },
-    fail (error) {
-      this.canSucceed = false
-      return this
+    fail() {
+      this.canSucceed = false;
+
+      return this;
     },
-    startTimer () {
+    startTimer() {
       if (!this.show) {
-        this.show = true
+        this.show = true;
       }
       if (typeof this._cut === 'undefined') {
-        this._cut = 10000 / Math.floor(this.duration)
+        this._cut = 10000 / Math.floor(this.duration);
       }
 
       this._timer = setInterval(() => {
@@ -109,46 +117,49 @@ export default {
          * a jojo effect
          */
         if (this.skipTimerCount > 0) {
-          this.skipTimerCount--
-          return
+          this.skipTimerCount--;
+
+          return;
         }
 
         if (this.reversed) {
-          this.decrease(this._cut)
+          this.decrease(this._cut);
         } else {
-          this.increase(this._cut)
+          this.increase(this._cut);
         }
 
         if (this.continuous) {
           if (this.percent >= 100) {
-            this.skipTimerCount = 1
+            this.skipTimerCount = 1;
 
-            this.reversed = !this.reversed
+            this.reversed = !this.reversed;
           } else if (this.percent <= 0) {
-            this.skipTimerCount = 1
+            this.skipTimerCount = 1;
 
-            this.reversed = !this.reversed
+            this.reversed = !this.reversed;
           }
         }
-      }, 100)
+      }, 100);
     }
   },
-  render (h) {
-    let el = h(false)
+  render(h) {
+    let el = h(false);
+
     if (this.show) {
       el = h('div', {
         staticClass: 'nuxt-progress',
-        class: {
+        class:       {
           'nuxt-progress-notransition': this.skipTimerCount > 0,
-          'nuxt-progress-failed': !this.canSucceed
+          'nuxt-progress-failed':       !this.canSucceed
         },
         style: {
-          width: this.percent + '%',
-          left: this.left
+          width: `${ this.percent }%`,
+          left:  this.left
         }
-      })
+      });
     }
-    return el
+
+    return el;
   }
-}
+};
 </script>

package/components/templates/blank.vue

@@ -4,7 +4,6 @@ import Inactivity from '@shell/components/Inactivity';
 
 export default {
   components: { Inactivity },
-  middleware: ['authenticated'],
   mixins:     [Brand],
 };
 </script>

package/components/templates/default.vue

@@ -64,10 +64,6 @@ export default {
   },
 
   // Note - These will run on route change
-  middleware: [
-    'authenticated'
-  ],
-
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
     ...mapGetters(['clusterId', 'currentProduct', 'rootProduct', 'isRancherInHarvester', 'showTopLevelMenu']),

package/components/templates/home.vue

@@ -9,6 +9,7 @@ import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
+import PromptModal from '@shell/components/PromptModal';
 
 export default {
 
@@ -18,13 +19,12 @@ export default {
     GrowlManager,
     AzureWarning,
     AwsComplianceBanner,
-    Inactivity
+    Inactivity,
+    PromptModal
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
-  middleware: ['authenticated'],
-
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
@@ -57,7 +57,7 @@ export default {
     <Inactivity />
     <AwsComplianceBanner />
     <AzureWarning />
-
+    <PromptModal />
     <div
       class="dashboard-content"
       :class="{'dashboard-padding-left': showTopLevelMenu}"

package/components/templates/plain.vue

@@ -13,6 +13,7 @@ import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
+import PromptModal from '@shell/components/PromptModal';
 
 export default {
 
@@ -22,6 +23,7 @@ export default {
     Header,
     IndentedPanel,
     PromptRemove,
+    PromptModal,
     FixedBanner,
     GrowlManager,
     AwsComplianceBanner,
@@ -29,8 +31,6 @@ export default {
     Inactivity
   },
 
-  middleware: ['authenticated'],
-
   mixins: [Brand, BrowserTabVisibility],
 
   data() {
@@ -77,6 +77,7 @@ export default {
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />
+        <PromptModal />
         <AssignTo />
         <button
           v-if="themeShortcut"

package/composables/useI18n.ts

@@ -21,6 +21,6 @@ export const useI18n = (vuexStore: Store<any>): { t: typeof t } => {
  * @param raw - A boolean determining if the string returned is a raw representation.
  * @returns A translated string or the raw value if the raw parameter is set to true.
  */
-const t = (key: string, args?: unknown, raw?: boolean): unknown => {
+const t = (key: string, args?: unknown, raw?: boolean): string => {
   return stringFor(store, key, args, raw);
 };

package/composables/useLabeledFormElement.ts

@@ -7,6 +7,7 @@ interface LabeledFormElementProps {
   required: boolean;
   disabled: boolean;
   rules: Array<any>;
+  requireDirty?: boolean;
 }
 
 interface UseLabeledFormElement {
@@ -63,6 +64,10 @@ export const labeledFormElementProps = {
     type:    Boolean,
     default: false,
   },
+  requireDirty: {
+    default: true,
+    type:    Boolean
+  }
 };
 
 export const useLabeledFormElement = (props: LabeledFormElementProps, emit: (event: string, ...args: any[]) => void): UseLabeledFormElement => {
@@ -91,6 +96,8 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: (eve
       const message = requiredRule(value);
 
       if (!!message) {
+        emit('update:validation', false);
+
         return message;
       }
     }
@@ -103,9 +110,13 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: (eve
       }
     }
 
-    if (ruleMessages.length > 0 && (blurred.value || focused.value)) {
+    if (ruleMessages.length > 0 && (blurred.value || focused.value || !props.requireDirty)) {
+      emit('update:validation', false);
+
       return ruleMessages.join(', ');
     } else {
+      emit('update:validation', true);
+
       return undefined;
     }
   });