@rancher/shell 3.0.0-rc.2 → 3.0.0-rc.4

package/components/CodeMirror.vue

@@ -3,7 +3,10 @@ import { KEYMAP } from '@shell/store/prefs';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default {
-  name:  'CodeMirror',
+  name: 'CodeMirror',
+
+  emits: ['onReady', 'onInput', 'onChanges', 'onFocus'],
+
   props: {
     /**
      * Sets the edit mode for Text Area.
@@ -57,7 +60,7 @@ export default {
         theme:                   `base16-${ theme }`,
         lineNumbers:             true,
         line:                    true,
-        styleActiveLine:         true,
+        styleActiveLine:         false,
         lineWrapping:            true,
         foldGutter:              true,
         styleSelectedText:       true,
@@ -66,6 +69,7 @@ export default {
 
       if (this.asTextArea) {
         out.lineNumbers = false;
+        out.foldGutter = false;
         out.tabSize = 0;
         out.extraKeys = { Tab: false };
       }
@@ -101,10 +105,9 @@ export default {
   },
 
   methods: {
-
     focus() {
       if ( this.$refs.codeMirrorRef ) {
-        this.$refs.codeMirrorRef.codemirror.focus();
+        this.$refs.codeMirrorRef.cminstance.focus();
       }
     },
 
@@ -140,7 +143,7 @@ export default {
 
     updateValue(value) {
       if ( this.$refs.codeMirrorRef ) {
-        this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
+        this.$refs.codeMirrorRef.cminstance.doc.setValue(value);
       }
     },
 
@@ -178,6 +181,7 @@ export default {
         :value="value"
         :options="combinedOptions"
         :disabled="isDisabled"
+        :original-style="true"
         @ready="onReady"
         @input="onInput"
         @changes="onChanges"
@@ -194,72 +198,8 @@ export default {
 <style lang="scss">
   $code-mirror-animation-time: 0.1s;
 
-  .codemirror-container {
-    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
-    }
-
-    &.as-text-area {
+  .code-mirror {
+    &.as-text-area .codemirror-container{
       min-height: 40px;
       position: relative;
       display: block;
@@ -345,6 +285,83 @@ export default {
         color: var(--primary-text);
         background-color: var(--primary);
       }
+
+      .CodeMirror-gutters .CodeMirror-foldgutter:empty {
+        display: none;
+      }
     }
   }
+
+  .code-mirror .codemirror-container {
+    z-index: 0;
+    font-size: inherit !important;
+
+    // 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;
+          }
+        }
+      }
+    }
+
+    //rm no longer extant selector
+    .CodeMirror {
+      height: initial;
+      background: none
+    }
+
+    .CodeMirror-gutters {
+      background: inherit;
+    }
+
+  }
 </style>

package/components/Collapse.vue

@@ -1,6 +1,9 @@
 <script>
 export default {
-  name:  'Collapse',
+  name: 'Collapse',
+
+  emits: ['update:open'],
+
   props: {
     open: {
       type:    Boolean,

package/components/CollapsibleCard.vue

@@ -1,6 +1,9 @@
 <script>
 export default {
-  name:  'CollapsibleCard',
+  name: 'CollapsibleCard',
+
+  emits: ['toggleCollapse', 'titleClick'],
+
   props: {
     isCollapsed: {
       type:    Boolean,

package/components/ContainerResourceLimit.vue

@@ -6,6 +6,8 @@ import { cleanUp } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value'],
+
   components: { UnitInput },
 
   props: {

package/components/CopyCode.vue

@@ -9,15 +9,19 @@ function flatten(node) {
   } else if ( isArray(node) ) {
     return node.map(flatten).join(' ');
   } else if ( node.children ) {
-    return node.children.map(flatten).join(' ');
-  } else if ( node.child ) {
-    return flatten(node.child);
+    if ( isArray(node.children) ) {
+      return node.children.map(flatten).join(' ');
+    } else {
+      return node.children;
+    }
   } else {
     return '';
   }
 }
 
 export default {
+  emits: ['copied', 'error'],
+
   data() {
     return { copied: false };
   },
@@ -27,7 +31,7 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      const content = flatten(this.$slots.default).trim();
+      const content = flatten(this.$slots.default()).trim();
 
       copyTextToClipboard(content).then(() => {
         this.copied = true;

package/components/CopyToClipboardText.vue

@@ -2,6 +2,8 @@
 import { copyTextToClipboard } from '@shell/utils/clipboard';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
+  emits: ['error'],
+
   props: {
     text: {
       type:     String,

package/components/CruResource.vue

@@ -23,6 +23,8 @@ export default {
 
   name: 'CruResource',
 
+  emits: ['select-type', 'error', 'cancel', 'finish'],
+
   components: {
     AsyncButton,
     Banner,
@@ -587,76 +589,74 @@ export default {
               </template>
             </template>
             <template #controlsContainer="{showPrevious, next, back, activeStep, canNext, activeStepIndex, visibleSteps}">
-              <template name="form-footer">
-                <CruResourceFooter
-                  class="cru__footer"
-                  :mode="mode"
-                  :is-form="showAsForm"
-                  :show-cancel="showCancel"
-                  @cancel-confirmed="confirmCancel"
+              <CruResourceFooter
+                class="cru__footer"
+                :mode="mode"
+                :is-form="showAsForm"
+                :show-cancel="showCancel"
+                @cancel-confirmed="confirmCancel"
+              >
+                <!-- Pass down templates provided by the caller -->
+                <template
+                  v-for="(_, slot) of $slots"
+                  #[slot]="scope"
+                  :key="slot"
                 >
-                  <!-- Pass down templates provided by the caller -->
+                  <template v-if="shouldProvideSlot(slot)">
+                    <slot
+                      :name="slot"
+                      v-bind="scope"
+                    />
+                  </template>
+                </template>
+                <div class="controls-steps">
+                  <button
+                    v-if="showYaml"
+                    type="button"
+                    class="btn role-secondary"
+                    @click="showPreviewYaml"
+                  >
+                    <t k="cruResource.previewYaml" />
+                  </button>
                   <template
-                    v-for="(_, slot) of $slots"
-                    #[slot]="scope"
-                    :key="slot"
+                    v-if="showPrevious"
+                    name="back"
                   >
-                    <template v-if="shouldProvideSlot(slot)">
-                      <slot
-                        :name="slot"
-                        v-bind="scope"
-                      />
-                    </template>
-                  </template>
-                  <div class="controls-steps">
                     <button
-                      v-if="showYaml"
                       type="button"
                       class="btn role-secondary"
-                      @click="showPreviewYaml"
+                      @click="back()"
                     >
-                      <t k="cruResource.previewYaml" />
+                      <t k="wizard.previous" />
                     </button>
-                    <template
-                      v-if="showPrevious"
-                      name="back"
-                    >
-                      <button
-                        type="button"
-                        class="btn role-secondary"
-                        @click="back()"
-                      >
-                        <t k="wizard.previous" />
-                      </button>
-                    </template>
-                    <template
-                      v-if="activeStepIndex === visibleSteps.length-1"
-                      name="finish"
-                    >
-                      <AsyncButton
-                        v-if="!showSubtypeSelection && !isView"
-                        ref="save"
-                        :disabled="!activeStep.ready"
-                        :mode="finishButtonMode || mode"
-                        @click="$emit('finish', $event)"
-                      />
-                    </template>
-                    <template
-                      v-else
-                      name="next"
+                  </template>
+                  <template
+                    v-if="activeStepIndex === visibleSteps.length-1"
+                    name="finish"
+                  >
+                    <AsyncButton
+                      v-if="!showSubtypeSelection && !isView"
+                      ref="save"
+                      :disabled="!activeStep.ready"
+                      :mode="finishButtonMode || mode"
+                      @click="$emit('finish', $event)"
+                    />
+                  </template>
+                  <template
+                    v-else
+                    name="next"
+                  >
+                    <button
+                      :disabled="!canNext"
+                      type="button"
+                      class="btn role-primary"
+                      @click="next()"
                     >
-                      <button
-                        :disabled="!canNext"
-                        type="button"
-                        class="btn role-primary"
-                        @click="next()"
-                      >
-                        <t k="wizard.next" />
-                      </button>
-                    </template>
-                  </div>
-                </CruResourceFooter>
-              </template>
+                      <t k="wizard.next" />
+                    </button>
+                  </template>
+                </div>
+              </CruResourceFooter>
             </template>
           </Wizard>
         </div>

package/components/CruResourceFooter.vue

@@ -6,6 +6,8 @@ import ResourceCancelModal from '@shell/components/ResourceCancelModal';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['cancel-confirmed', 'finish'],
+
   components: { AsyncButton, ResourceCancelModal },
   props:      {
     mode: {

package/components/Dialog.vue

@@ -3,6 +3,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import AppModal from '@shell/components/AppModal.vue';
 
 export default {
+  emits: ['okay', 'closed'],
+
   components: { AsyncButton, AppModal },
 
   props: {

package/components/DisableAuthProviderModal.vue

@@ -3,7 +3,10 @@ import { Card } from '@components/Card';
 import AppModal from '@shell/components/AppModal.vue';
 
 export default {
-  name:       'PromptRemove',
+  name: 'PromptRemove',
+
+  emits: ['disable'],
+
   components: { Card, AppModal },
   props:      {
     /**

package/components/EmberPage.vue

@@ -43,6 +43,8 @@ const INTERCEPTS = {
 };
 
 export default {
+  emits: ['before-nav'],
+
   components: { Loading },
 
   props: {

package/components/ExplorerProjectsNamespaces.vue

@@ -10,6 +10,7 @@ import ExtensionPanel from '@shell/components/ExtensionPanel';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
@@ -18,7 +19,11 @@ import DOMPurify from 'dompurify';
 export default {
   name:       'ListProjectNamespace',
   components: {
-    ExtensionPanel, Masthead, MoveModal, ResourceTable
+    ExtensionPanel,
+    Masthead,
+    MoveModal,
+    ResourceTable,
+    ButtonMultiAction,
   },
   mixins: [ResourceFetch],
 
@@ -430,14 +435,12 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
-            <button
-              type="button"
-              class="project-action btn btn-sm role-multi-action actions mr-10"
-              :class="{invisible: !showProjectActionButton(group.group)}"
+            <ButtonMultiAction
+              class="project-action mr-10"
+              :borderless="true"
+              :invisible="!showProjectActionButton(group.group)"
               @click="showProjectAction($event, group.group)"
-            >
-              <i class="icon icon-actions" />
-            </button>
+            />
           </div>
         </div>
       </template>

package/components/GlobalRoleBindings.vue

@@ -15,6 +15,8 @@ import { Card } from '@components/Card';
  * Display checkboxes for each global role, checked for given user or principal (group). Can save changes.
  */
 export default {
+  emits: ['hasChanges', 'canLogIn', 'changed'],
+
   components: {
     Checkbox,
     Loading,

package/components/Import.vue

@@ -14,6 +14,8 @@ import { NAMESPACE } from '@shell/config/types';
 import { NAME as NAME_COL, TYPE, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
 
 export default {
+  emits: ['close'],
+
   components: {
     AsyncButton,
     Banner,
@@ -140,7 +142,6 @@ export default {
             <div class="col span-6">
               <LabeledSelect
                 :value="defaultNamespace"
-                class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"

package/components/InputOrDisplay.vue

@@ -1,5 +1,4 @@
 <script>
-import { h, computed } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
@@ -18,31 +17,37 @@ export default {
       default: 'edit'
     }
   },
-  setup(props, { slots }) {
-    const isView = computed(() => props.mode === _VIEW);
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
 
-    const displayValue = computed(() => {
-      if (Array.isArray(props.value) && props.value.length === 0) {
+    displayValue() {
+      if (Array.isArray(this.value) && this.value.length === 0) {
         return '';
       } else {
-        return props.value;
-      }
-    });
-
-    return () => {
-      if (isView.value) {
-        return h('div', { class: 'label' }, [
-          h('div', { class: 'text-label' }, slots.name ? slots.name : props.name),
-          h('div', { class: 'value' }, slots.value ? slots.value : displayValue.value)
-        ]);
-      } else {
-        return slots.default;
+        return this.value;
       }
-    };
+    }
   }
 };
 </script>
 
+<template>
+  <div
+    v-if="isView"
+    class="label"
+  >
+    <div class="text-label">
+      {{ $slots.name || name }}
+    </div>
+    <div class="value">
+      {{ $slots.value || displayValue }}
+    </div>
+  </div>
+  <slot v-else />
+</template>
+
 <style lang="scss" scoped>
 .label {
   display: flex;

package/components/Loading.vue

@@ -68,10 +68,13 @@ export default {
     left: 0;
     right: 0;
     text-align: center;
-    z-index: z-index('loadingContent');
+
+    // Covers both default `content` mode, an often used `relative` mode and any other value of mode
+    z-index: z-index('loading');
 
     &-main-mode {
       top: var(--header-height);
+      z-index: z-index('loadingMain');
     }
 
     &-content-mode {

package/components/LocaleSelector.vue

@@ -52,9 +52,11 @@ export default {
     <div v-if="mode === 'login'">
       <div v-if="showLocale">
         <v-dropdown
-          popover-class="localeSelector"
+          popperClass="localeSelector"
           placement="top"
-          trigger="click"
+          distance="8"
+          skidding="12"
+          :triggers="['click']"
         >
           <a
             data-testid="locale-selector"

package/components/Markdown.vue

@@ -2,6 +2,8 @@
 import Loading from '@shell/components/Loading';
 
 export default {
+  emits: ['loaded'],
+
   components: { Loading },
 
   props: {

package/components/ModalWithCard.vue

@@ -7,6 +7,8 @@ import AppModal from '@shell/components/AppModal.vue';
 export default {
   name: 'ModalWithCard',
 
+  emits: ['close', 'finish'],
+
   components: {
     Card, Banner, AsyncButton, AppModal
   },

package/components/MoveModal.vue

@@ -9,6 +9,8 @@ import Loading from '@shell/components/Loading';
 import { PROJECT } from '@shell/config/labels-annotations';
 
 export default {
+  emits: ['moving'],
+
   components: {
     AsyncButton, Card, LabeledSelect, Loading, AppModal
   },

package/components/PodSecurityAdmission.vue

@@ -26,6 +26,8 @@ const getExemptionControl = (): PSAExemptionControl => ({
 });
 
 export default defineComponent({
+  emits: ['updateLabels', 'updateExemptions'],
+
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },