@rancher/shell 0.5.3 → 2.0.0

package/components/CommunityLinks.vue

@@ -1,5 +1,6 @@
 <script>
 import SimpleBox from '@shell/components/SimpleBox';
+import AppModal from '@shell/components/AppModal.vue';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
@@ -7,10 +8,11 @@ import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import { fetchLinks } from '@shell/config/home-links';
 
+// i18n-ignore footer.wechat.title, footer.wechat.modalText, footer.wechat.modalText2
 export default {
   name: 'CommunityLinks',
 
-  components: { SimpleBox },
+  components: { SimpleBox, AppModal },
 
   props: {
     linkOptions: {
@@ -32,7 +34,7 @@ export default {
   },
 
   data() {
-    return { links: {} };
+    return { links: {}, showWeChatModal: false };
   },
 
   computed: {
@@ -80,10 +82,10 @@ export default {
   },
   methods: {
     show() {
-      this.$modal.show('wechat-modal');
+      this.showWeChatModal = true;
     },
     close() {
-      this.$modal.hide('wechat-modal');
+      this.showWeChatModal = false;
     }
   },
 };
@@ -105,12 +107,12 @@ export default {
         :key="link.label"
         class="support-link"
       >
-        <n-link
+        <router-link
           v-if="link.value.startsWith('/') "
           :to="link.value"
         >
           {{ link.label }}
-        </n-link>
+        </router-link>
         <a
           v-else
           :href="link.value"
@@ -131,10 +133,12 @@ export default {
         </a>
       </div>
     </SimpleBox>
-    <modal
+    <app-modal
+      v-if="showWeChatModal"
       name="wechat-modal"
       height="auto"
       :width="640"
+      @close="close"
     >
       <div class="wechat-modal">
         <h1>{{ t('footer.wechat.modalText') }}</h1>
@@ -149,7 +153,7 @@ export default {
           </button>
         </div>
       </div>
-    </modal>
+    </app-modal>
   </div>
 </template>
 

package/components/CreateDriver.vue

@@ -0,0 +1,81 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import ArrayList from '@shell/components/form/ArrayList';
+export default {
+  name: 'DriverCreate',
+
+  components: {
+    LabeledInput,
+    ArrayList
+  },
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    rules: {
+      default: () => ({
+        url:              [],
+        uiUrl:            [],
+        checksum:         [],
+        whitelistDomains: []
+      }),
+      type: Object,
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-20">
+      <LabeledInput
+        v-model.trim="value.url"
+        :label="t('drivers.add.downloadUrl.label')"
+        :placeholder="t('drivers.add.downloadUrl.placeholder', null, true)"
+        :tooltip="t('drivers.add.downloadUrl.tooltip', null, true)"
+        :mode="mode"
+        :rules="rules.url"
+        :data-testid="'driver-create-url-field'"
+        required
+      />
+    </div>
+    <div class="row mb-20">
+      <LabeledInput
+        v-model.trim="value.checksum"
+        :label="t('drivers.add.checksum.label')"
+        :tooltip="t('drivers.add.checksum.tooltip', null, true)"
+        :mode="mode"
+        :rules="rules.checksum"
+        :data-testid="'driver-create-checksum-field'"
+      />
+    </div>
+    <div class="row mb-20">
+      <LabeledInput
+        v-model.trim="value.uiUrl"
+        :label="t('drivers.add.customUiUrl.label')"
+        :tooltip="t('drivers.add.customUiUrl.tooltip', null, true)"
+        :placeholder="t('drivers.add.customUiUrl.placeholder', null, true)"
+        :mode="mode"
+        :rules="rules.uiUrl"
+        :data-testid="'driver-create-uiurl-field'"
+      />
+    </div>
+    <div class="col span-6">
+      <ArrayList
+        v-model="value.whitelistDomains"
+        :protip="false"
+        :mode="mode"
+        :title="t('drivers.add.whitelist')"
+        :rules="rules.whitelistDomains"
+        :data-testid="'driver-create-whitelist-list'"
+      />
+    </div>
+  </div>
+</template>

package/components/CruResource.vue

@@ -6,7 +6,7 @@ import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
 
@@ -158,27 +158,31 @@ export default {
   },
 
   data(props) {
-    const yaml = this.createResourceYaml();
-
-    this.$on('createNamespace', (e) => {
-      // When createNamespace is set to true,
-      // the UI will attempt to create a new namespace
-      // before saving the resource.
-      this.createNamespace = e;
-    });
+    const inStore = this.$store.getters['currentStore'](this.resource);
+    const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
 
     return {
       isCancelModal:   false,
-      createNamespace: false,
       showAsForm:      this.$route.query[AS] !== _YAML,
-      resourceYaml:    yaml,
-      initialYaml:     yaml,
+      /**
+       * Initialised on demand (given that it needs to make a request to fetch schema definition)
+       */
+      resourceYaml:    null,
+      /**
+       * Initialised on demand (given that it needs to make a request to fetch schema definition)
+       */
+      initialYaml:     null,
+      /**
+       * Save a copy of the initial resource. This is used to calc the initial yaml later on
+       */
+      initialResource: clone(this.resource),
       abbrSizes:       {
         3: '24px',
         4: '18px',
         5: '16px',
         6: '14px'
       },
+      schema
     };
   },
 
@@ -200,15 +204,8 @@ export default {
       return this.validationPassed;
     },
 
-    canDiff() {
-      return this.initialYaml !== this.resourceYaml;
-    },
-
     canEditYaml() {
-      const inStore = this.$store.getters['currentStore'](this.resource);
-      const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
-
-      return !(schema?.resourceMethods?.includes('blocked-PUT'));
+      return !(this.schema?.resourceMethods?.includes('blocked-PUT'));
     },
 
     showYaml() {
@@ -244,6 +241,8 @@ export default {
     },
 
     ...mapGetters({ t: 'i18n/t' }),
+    ...mapState('cru-resource', ['createNamespace']),
+    ...mapActions('cru-resource', ['setCreateNamespace']),
 
     /**
      * Prevent issues for malformed types injection
@@ -272,6 +271,14 @@ export default {
     }
   },
 
+  mounted() {
+    this.$store.dispatch('cru-resource/setCreateNamespace', false);
+  },
+
+  beforeDestroy() {
+    this.$store.dispatch('cru-resource/setCreateNamespace', false);
+  },
+
   methods: {
     stringify,
 
@@ -309,8 +316,9 @@ export default {
       }
     },
 
-    createResourceYaml(modifiers) {
-      const resource = this.resource;
+    async createResourceYaml(modifiers, resource = this.resource) {
+      // Required to populate yaml comments and default values
+      await this.schema?.fetchResourceFields();
 
       if ( typeof this.generateYaml === 'function' ) {
         return this.generateYaml.apply(this, resource);
@@ -326,6 +334,9 @@ export default {
     },
 
     async showPreviewYaml() {
+      // Required to populate yaml comments and default values
+      await this.schema?.fetchResourceFields();
+
       if ( this.applyHooks ) {
         try {
           await this.applyHooks(BEFORE_SAVE_HOOKS, CONTEXT_HOOK_EDIT_YAML);
@@ -336,7 +347,7 @@ export default {
         }
       }
 
-      const resourceYaml = this.createResourceYaml(this.yamlModifiers);
+      const resourceYaml = await this.createResourceYaml(this.yamlModifiers);
 
       this.resourceYaml = resourceYaml;
       this.showAsForm = false;
@@ -406,6 +417,17 @@ export default {
         event.preventDefault();
       }
     }
+  },
+
+  watch: {
+    async showAsForm(neu) {
+      if (!neu) {
+        // Entering yaml mode
+        if (!this.initialYaml) {
+          this.initialYaml = await this.createResourceYaml(undefined, this.initialResource);
+        }
+      }
+    }
   }
 };
 </script>
@@ -419,7 +441,7 @@ export default {
     >
       {{ description }}
     </p>
-    <form
+    <component
       :is="(isView? 'div' : 'form')"
       data-testid="cru-form"
       class="create-resource-container cru__form"
@@ -455,6 +477,7 @@ export default {
             :key="subtype.id"
             class="subtype-banner"
             :class="{ selected: subtype.id === _selectedSubtype }"
+            :data-testid="`subtype-banner-item-${subtype.id}`"
             @click="selectType(subtype.id, $event)"
           >
             <slot name="subtype-content">
@@ -681,8 +704,9 @@ export default {
         </slot>
       </template>
       <!------ YAML ------>
+      <!-- Hide this section until it's needed. This means we don't need to upfront create initialYaml -->
       <section
-        v-else-if="showYaml"
+        v-else-if="showYaml && !showAsForm"
         class="cru-resource-yaml-container resource-container cru__content"
       >
         <ResourceYaml
@@ -699,7 +723,7 @@ export default {
           class="resource-container cru__content"
           @error="e=>$emit('error', e)"
         >
-          <template #yamlFooter="{yamlSave, showPreview, yamlPreview, yamlUnpreview}">
+          <template #yamlFooter="{yamlSave, showPreview, yamlPreview, yamlUnpreview, canDiff}">
             <slot name="cru-yaml-footer">
               <CruResourceFooter
                 class="cru__footer"
@@ -756,7 +780,7 @@ export default {
           </template>
         </ResourceYaml>
       </section>
-    </form>
+    </component>
   </section>
 </template>
 

package/components/DetailTop.vue

@@ -185,14 +185,14 @@ export default {
         {{ t('resourceDetail.detailTop.namespaces') }}:
       </span>
       <span>
-        <nuxt-link
+        <router-link
           v-for="namespace in namespaces"
           :key="namespace.name"
           :to="namespace.detailLocation"
           class="namespaceLinkList"
         >
           {{ namespace.name }}
-        </nuxt-link>
+        </router-link>
       </span>
     </div>
 

package/components/Dialog.vue

@@ -1,8 +1,9 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  components: { AsyncButton },
+  components: { AsyncButton, AppModal },
 
   props: {
     name: {
@@ -43,7 +44,6 @@ export default {
 
     closeDialog(result) {
       if (!this.closed) {
-        this.$modal.hide(this.name);
         this.$emit('closed', result);
         this.closed = true;
       }
@@ -53,11 +53,12 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="!closed"
     :name="name"
     height="auto"
     :scrollable="true"
-    @closed="closeDialog(false)"
+    @close="closeDialog(false)"
     @before-open="beforeOpen"
   >
     <div class="modal-dialog">
@@ -90,7 +91,7 @@ export default {
         </div>
       </div>
     </div>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang="scss" scoped>

package/components/DisableAuthProviderModal.vue

@@ -1,8 +1,10 @@
 <script>
 import { Card } from '@components/Card';
+import AppModal from '@shell/components/AppModal.vue';
+
 export default {
   name:       'PromptRemove',
-  components: { Card },
+  components: { Card, AppModal },
   props:      {
     /**
      * Inherited global identifier prefix for tests
@@ -13,15 +15,18 @@ export default {
       default: 'disable-auth-provider'
     }
   },
+  data() {
+    return { showModal: false };
+  },
   methods: {
     show() {
-      this.$modal.show('disableAuthProviderModal');
+      this.showModal = true;
     },
     close() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
     },
     disable() {
-      this.$modal.hide('disableAuthProviderModal');
+      this.showModal = false;
       this.$emit('disable');
     },
   }
@@ -29,13 +34,14 @@ export default {
 </script>
 
 <template>
-  <modal
-    class="remove-modal"
+  <app-modal
+    v-if="showModal"
+    custom-class="remove-modal"
     name="disableAuthProviderModal"
     :width="400"
     height="auto"
     styles="max-height: 100vh;"
-    @closed="close"
+    @close="close"
   >
     <Card
       class="disable-auth-provider"
@@ -69,7 +75,7 @@ export default {
         </button>
       </template>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>

package/components/DraggableZone.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapState } from 'vuex';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
 
@@ -14,7 +14,7 @@ interface Data {
   drag: Drag;
 }
 
-export default Vue.extend({
+export default defineComponent({
   data(): Data {
     return {
       drag: {

package/components/ExplorerMembers.vue

@@ -298,18 +298,18 @@ export default {
     <Tabbed>
       <Tab
         name="cluster-membership"
-        :label="t('members.clusterMemebership')"
+        :label="t('members.clusterMembership')"
       >
         <div
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
-          <n-link
+          <router-link
             :to="createLocation"
             class="btn role-primary pull-right"
           >
             {{ t('members.createActionLabel') }}
-          </n-link>
+          </router-link>
         </div>
         <ResourceTable
           :schema="schema"

package/components/ExplorerProjectsNamespaces.vue

@@ -374,13 +374,13 @@ export default {
         v-if="showCreateNsButton"
         slot="extraActions"
       >
-        <n-link
+        <router-link
           :to="createNamespaceLocationFlatList()"
           class="btn role-primary mr-10"
           data-testid="create_project_namespaces"
         >
           {{ t('projectNamespaces.createNamespace') }}
-        </n-link>
+        </router-link>
       </template>
     </Masthead>
     <!-- Extensions area -->
@@ -424,13 +424,13 @@ export default {
             </div>
           </div>
           <div class="right">
-            <n-link
+            <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
               class="create-namespace btn btn-sm role-secondary mr-5"
               :to="createNamespaceLocation(group.group)"
             >
               {{ t('projectNamespaces.createNamespace') }}
-            </n-link>
+            </router-link>
             <button
               type="button"
               class="project-action btn btn-sm role-multi-action actions mr-10"
@@ -451,12 +451,12 @@ export default {
       </template>
       <template #cell:name="{row}">
         <div class="namespace-name">
-          <n-link
+          <router-link
             v-if="row.detailLocation && !row.hideDetailLocation"
             :to="row.detailLocation"
           >
             {{ row.name }}
-          </n-link>
+          </router-link>
           <span v-else>
             {{ row.name }}
           </span>

package/components/FixedBanner.vue

@@ -2,6 +2,7 @@
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import isEmpty from 'lodash/isEmpty';
+import { getIndividualBanners, overlayIndividualBanners } from '@shell/utils/banners';
 
 export default {
   props: {
@@ -19,18 +20,13 @@ export default {
     },
   },
 
-  async fetch() {
-    this.bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
-  },
-
   data() {
     return {
-      showDialog:    true,
-      showHeader:    false,
-      showFooter:    false,
-      showConsent:   false,
-      banner:        {},
-      bannerSetting: null
+      showDialog:  true,
+      showHeader:  false,
+      showFooter:  false,
+      showConsent: false,
+      banner:      {},
     };
   },
 
@@ -56,6 +52,14 @@ export default {
   },
 
   computed: {
+    uiBannerIndividual() {
+      return getIndividualBanners(this.$store);
+    },
+
+    bannerSetting() {
+      return this.$store.getters['management/all'](MANAGEMENT.SETTING).find((s) => s.id === SETTING.BANNERS);
+    },
+
     bannerStyle() {
       return {
         color:              this.banner.color,
@@ -74,7 +78,7 @@ export default {
       };
     },
     showBanner() {
-      if (!this.banner.text && !this.banner.background) {
+      if (!this.banner?.text && !this.banner?.background) {
         return false;
       }
 
@@ -110,34 +114,41 @@ export default {
   },
 
   watch: {
-    bannerSetting(neu) {
-      if (neu?.value && neu.value !== '') {
-        try {
-          const parsed = JSON.parse(neu.value);
-          const {
-            bannerHeader, bannerFooter, bannerConsent, banner, showHeader, showFooter, showConsent
-          } = parsed;
-          let bannerContent = parsed?.banner || {};
+    bannerSetting: {
+      handler(neu) {
+        if (neu?.value && neu.value !== '') {
+          try {
+            const parsed = JSON.parse(neu.value);
+
+            overlayIndividualBanners(parsed, this.uiBannerIndividual);
 
-          if (isEmpty(banner)) {
-            if (showHeader && this.header) {
-              bannerContent = bannerHeader || {};
-            } else if (showConsent && this.consent) {
-              bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
-            } else if (showFooter && this.footer) {
-              bannerContent = bannerFooter || {};
-            } else {
-              bannerContent = {};
+            const {
+              bannerHeader, bannerFooter, bannerConsent, banner, showHeader, showFooter, showConsent
+            } = parsed;
+            let bannerContent = parsed?.banner || {};
+
+            if (isEmpty(banner)) {
+              if (showHeader && this.header) {
+                bannerContent = bannerHeader || {};
+              } else if (showConsent && this.consent) {
+                bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
+              } else if (showFooter && this.footer) {
+                bannerContent = bannerFooter || {};
+              } else {
+                bannerContent = {};
+              }
             }
-          }
 
-          this.showHeader = showHeader === 'true';
-          this.showFooter = showFooter === 'true';
-          this.showConsent = showConsent === 'true';
-          this.banner = bannerContent;
-        } catch {}
-      }
-    }
+            this.showHeader = showHeader === 'true';
+            this.showFooter = showFooter === 'true';
+            this.showConsent = showConsent === 'true';
+            this.banner = bannerContent;
+          } catch {}
+        }
+      },
+      immediate: true
+    },
+
   }
 };
 </script>