@rancher/shell 1.2.3 → 2.0.1

package/components/CodeMirror.vue

@@ -24,18 +24,22 @@ export default {
     asTextArea: {
       type:    Boolean,
       default: false
-    }
+    },
+    showKeyMapBox: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
     return {
-      codeMirrorRef: null,
-      loaded:        false
+      codeMirrorRef:   null,
+      loaded:          false,
+      removeKeyMapBox: false,
     };
   },
 
   computed: {
-
     isDisabled() {
       return this.mode === _VIEW;
     },
@@ -70,6 +74,20 @@ export default {
 
       return out;
     },
+
+    keyMapTooltip() {
+      if (this.combinedOptions?.keyMap) {
+        const name = this.t(`prefs.keymap.${ this.combinedOptions.keyMap }`);
+
+        return this.t('codeMirror.keymap.indicatorToolip', { name });
+      }
+
+      return null;
+    },
+
+    isNonDefaultKeyMap() {
+      return this.combinedOptions?.keyMap !== 'sublime';
+    }
   },
 
   created() {
@@ -124,19 +142,38 @@ export default {
       if ( this.$refs.codeMirrorRef ) {
         this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
       }
-    }
+    },
+
+    closeKeyMapInfo() {
+      this.removeKeyMapBox = true;
+    },
   }
 };
 </script>
 
 <template>
-  <client-only placeholder=" Loading...">
-    <div
-      class="code-mirror"
-      :class="{['as-text-area']: asTextArea}"
-    >
+  <div
+    class="code-mirror"
+    :class="{['as-text-area']: asTextArea}"
+  >
+    <div v-if="loaded">
+      <div
+        v-if="showKeyMapBox && !removeKeyMapBox && keyMapTooltip && isNonDefaultKeyMap"
+        class="keymap overlay"
+      >
+        <div
+          v-clean-tooltip="keyMapTooltip"
+          class="keymap-indicator"
+          data-testid="code-mirror-keymap"
+          @click="closeKeyMapInfo"
+        >
+          <i class="icon icon-keyboard keymap-icon" />
+          <div class="close-indicator">
+            <i class="icon icon-close icon-sm" />
+          </div>
+        </div>
+      </div>
       <codemirror
-        v-if="loaded"
         ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
@@ -147,17 +184,76 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
-      <div v-else>
-        Loading...
-      </div>
     </div>
-  </client-only>
+    <div v-else>
+      Loading...
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
+  $code-mirror-animation-time: 0.1s;
+
   .code-mirror {
     z-index: 0;
 
+    // Keyboard mapping overlap
+    .keymap.overlay {
+      position: absolute;
+      display: flex;
+      top: 7px;
+      right: 7px;
+      z-index: 1;
+      cursor: pointer;
+
+      .keymap-indicator {
+        width: 48px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid transparent;
+        color: var(--darker);
+        background-color: var(--overlay-bg);
+        font-size: 12px;
+
+        .close-indicator {
+          width: 0;
+
+          .icon-close {
+            color: var(--primary);
+            opacity: 0;
+          }
+        }
+
+        .keymap-icon {
+          font-size: 24px;
+          opacity: 0.8;
+          transition: margin-right $code-mirror-animation-time ease-in-out;
+        }
+
+        &:hover {
+          border: 1px solid var(--primary);
+          border-radius: var(--border-radius);;
+
+          .close-indicator {
+            margin-left: -6px;
+            width: auto;
+
+            .icon-close {
+              opacity: 1;
+              transition: opacity $code-mirror-animation-time ease-in-out $code-mirror-animation-time; // Only animate when being shown
+            }
+          }
+
+          .keymap-icon {
+            opacity: 0.6;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+
     .vue-codemirror .CodeMirror {
       height: initial;
       background: none
@@ -250,7 +346,5 @@ export default {
         background-color: var(--primary);
       }
     }
-
   }
-
 </style>

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/CopyCode.vue

@@ -1,5 +1,7 @@
 <script>
 import { isArray } from '@shell/utils/array';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 
 function flatten(node) {
   if ( node.text ) {
@@ -27,14 +29,16 @@ export default {
 
       const content = flatten(this.$slots.default).trim();
 
-      this.$copyText(content).then(() => {
+      copyTextToClipboard(content).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+        this.$emit('copied');
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
-      this.$emit('copied');
     },
   },
 

package/components/CopyToClipboard.vue

@@ -1,5 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
 
 export default {
   components: { AsyncButton },
@@ -18,7 +19,7 @@ export default {
 
   methods: {
     clicked(buttonCb) {
-      this.$copyText(this.text).then(() => {
+      copyTextToClipboard(this.text).then(() => {
         buttonCb(true);
       }).catch(() => {
         buttonCb(false);

package/components/CopyToClipboardText.vue

@@ -1,4 +1,6 @@
 <script>
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   props: {
     text: {
@@ -20,17 +22,20 @@ export default {
     clicked(event) {
       if (!this.copied) {
         event.preventDefault();
-        this.$copyText(this.text);
-        this.copied = true;
+        copyTextToClipboard(this.text).then(() => {
+          this.copied = true;
 
-        let t = event.target;
+          let t = event.target;
 
-        if (t.tagName === 'I') {
-          t = t.parentElement || t;
-        }
-        setTimeout(() => {
-          this.copied = false;
-        }, 500);
+          if (t.tagName === 'I') {
+            t = t.parentElement || t;
+          }
+          setTimeout(() => {
+            this.copied = false;
+          }, 500);
+        }).catch((e) => {
+          this.$emit('error', exceptionToErrorsArray(e));
+        });
       }
     },
   }

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"
@@ -435,6 +457,7 @@ export default {
           v-for="(err, i) in errors"
           :key="i"
           color="error"
+          :data-testid="`error-banner${i}`"
           :label="stringify(mappedErrors[err].message)"
           :icon="mappedErrors[err].icon"
           :closable="true"
@@ -454,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">
@@ -680,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
@@ -698,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"
@@ -755,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>