@rancher/shell 3.0.0-rc.3 → 3.0.0-rc.5

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,

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,

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/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
   },

package/components/Questions/Array.vue

@@ -3,6 +3,8 @@ import ArrayList from '@shell/components/form/ArrayList';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { ArrayList },
   mixins:     [Question],
 

package/components/Questions/Boolean.vue

@@ -3,6 +3,8 @@ import { Checkbox } from '@components/Form/Checkbox';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { Checkbox },
   mixins:     [Question]
 };

package/components/Questions/CloudCredential.vue

@@ -4,6 +4,8 @@ import { NORMAN } from '@shell/config/types';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledSelect },
   mixins:     [Question],
 

package/components/Questions/Enum.vue

@@ -3,6 +3,8 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledSelect },
   mixins:     [Question],
   computed:   {

package/components/Questions/Float.vue

@@ -3,6 +3,8 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledInput },
   mixins:     [Question]
 };

package/components/Questions/Int.vue

@@ -3,6 +3,8 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledInput },
   mixins:     [Question]
 };

package/components/Questions/QuestionMap.vue

@@ -3,7 +3,10 @@ import KeyValue from '@shell/components/form/KeyValue';
 import Question from './Question';
 
 export default {
-  name:       'QuestionMap',
+  name: 'QuestionMap',
+
+  emits: ['update:value'],
+
   components: { KeyValue },
   mixins:     [Question],
 

package/components/Questions/Radio.vue

@@ -3,6 +3,8 @@ import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { RadioGroup },
   mixins:     [Question]
 };

package/components/Questions/Reference.vue

@@ -12,6 +12,8 @@ const LEGACY_MAP = {
 };
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledInput, LabeledSelect },
   mixins:     [Question],
 

package/components/Questions/String.vue

@@ -3,6 +3,8 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
 export default {
+  emits: ['update:value'],
+
   components: { LabeledInput },
   mixins:     [Question],
 

package/components/Questions/Yaml.vue

@@ -4,6 +4,8 @@ import Question from './Question';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
+  emits: ['update:value'],
+
   components: { YamlEditor },
   mixins:     [Question],
   data() {

package/components/Questions/index.vue

@@ -116,6 +116,8 @@ function migrate(expr) {
 }
 
 export default {
+  emits: ['updated'],
+
   components: {
     ...knownTypes,
     Tab,

package/components/ResourceCancelModal.vue

@@ -2,6 +2,8 @@
 import AppModal from '@shell/components/AppModal.vue';
 
 export default {
+  emits: ['cancel-cancel', 'confirm-cancel'],
+
   components: { AppModal },
 
   props: {

package/components/ResourceDetail/Masthead.vue

@@ -442,7 +442,7 @@ export default {
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
-              class="mastehead-resource-title"
+              class="masthead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -584,7 +584,7 @@ export default {
       flex-direction: row;
       align-items: center;
 
-      .mastehead-resource-title {
+      .masthead-resource-title {
         padding: 0 8px;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -602,7 +602,8 @@ export default {
     }
 
     .live-data {
-      color: var(--body-text)
+      color: var(--body-text);
+      margin-left: 3px;
     }
   }
 

package/components/ResourceDetail/index.vue

@@ -39,6 +39,8 @@ async function getYaml(store, model) {
 }
 
 export default {
+  emits: ['input'],
+
   components: {
     Loading,
     DetailTop,
@@ -85,9 +87,9 @@ export default {
     const store = this.$store;
     const route = this.$route;
     const params = route.params;
-    let resource = this.resourceOverride || params.resource;
+    let resourceType = this.resourceOverride || params.resource;
 
-    const inStore = this.storeOverride || store.getters['currentStore'](resource);
+    const inStore = this.storeOverride || store.getters['currentStore'](resourceType);
     const realMode = this.realMode;
 
     // eslint-disable-next-line prefer-const
@@ -98,10 +100,10 @@ export default {
     // know about:  view, edit, create (stage, import and clone become "create")
     const mode = ([_CLONE, _IMPORT, _STAGE].includes(realMode) ? _CREATE : realMode);
 
-    const getGraphConfig = store.getters['type-map/hasGraph'](resource);
+    const getGraphConfig = store.getters['type-map/hasGraph'](resourceType);
     const hasGraph = !!getGraphConfig;
-    const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource, id);
-    const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource, id);
+    const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resourceType, id);
+    const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resourceType, id);
 
     const schemas = store.getters[`${ inStore }/all`](SCHEMA);
 
@@ -122,16 +124,16 @@ export default {
 
     this.as = as;
 
-    const options = store.getters[`type-map/optionsFor`](resource);
+    const options = store.getters[`type-map/optionsFor`](resourceType);
 
     this.showMasthead = [_CREATE, _EDIT].includes(mode) ? options.resourceEditMasthead : true;
     const canViewYaml = options.canYaml;
 
     if ( options.resource ) {
-      resource = options.resource;
+      resourceType = options.resource;
     }
 
-    const schema = store.getters[`${ inStore }/schemaFor`](resource);
+    const schema = store.getters[`${ inStore }/schemaFor`](resourceType);
     let model, initialModel, liveModel, yaml;
 
     if ( realMode === _CREATE || realMode === _IMPORT ) {
@@ -139,7 +141,7 @@ export default {
         namespace = store.getters['defaultNamespace'];
       }
 
-      const data = { type: resource };
+      const data = { type: resourceType };
 
       if ( schema?.attributes?.namespaced ) {
         data.metadata = { namespace };
@@ -160,7 +162,7 @@ export default {
           await schema.fetchResourceFields();
         }
 
-        yaml = createYaml(schemas, resource, data);
+        yaml = createYaml(schemas, resourceType, data);
       }
     } else {
       if ( as === _GRAPH ) {
@@ -192,13 +194,13 @@ export default {
 
       try {
         liveModel = await store.dispatch(`${ inStore }/find`, {
-          type: resource,
+          type: resourceType,
           id:   fqid,
           opt:  { watch: true }
         });
       } catch (e) {
         if (e.status === 404 || e.status === 403) {
-          store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource, fqid }, true)));
+          store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource: resourceType, fqid }, true)));
         }
         liveModel = {};
         notFound = fqid;
@@ -235,7 +237,7 @@ export default {
       hasCustomDetail,
       hasCustomEdit,
       canViewYaml,
-      resource,
+      resourceType,
       as,
       yaml,
       initialModel,
@@ -262,7 +264,7 @@ export default {
       hasGraph:        null,
       hasCustomDetail: null,
       hasCustomEdit:   null,
-      resource:        null,
+      resourceType:    null,
       asYaml:          null,
       yaml:            null,
       liveModel:       null,
@@ -379,7 +381,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
-      :resource="resource"
+      :resource="resourceType"
       :value="liveModel"
       :mode="mode"
       :real-mode="realMode"

package/components/ResourceTable.vue

@@ -41,6 +41,8 @@ export default {
 
   name: 'ResourceTable',
 
+  emits: ['clickedActionButton'],
+
   components: { ButtonGroup, SortableTable },
 
   props: {

package/components/ResourceYaml.vue

@@ -19,6 +19,8 @@ import { BEFORE_SAVE_HOOKS, AFTER_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { exceptionToErrorsArray } from '@shell/utils/error';
 
 export default {
+  emits: ['error'],
+
   components: {
     Footer,
     FileSelector,

package/components/SelectIconGrid.vue

@@ -4,6 +4,8 @@ import { get } from '@shell/utils/object';
 import capitalize from 'lodash/capitalize';
 
 export default {
+  emits: ['clicked'],
+
   components: { LazyImage },
 
   props: {

package/components/SimpleBox.vue

@@ -4,6 +4,8 @@ import Closeable from '@shell/mixins/closeable';
 export default {
   name: 'SimpleBox',
 
+  emits: ['close'],
+
   mixins: [Closeable],
 
   props: {

package/components/SortableTable/THead.vue

@@ -5,6 +5,8 @@ import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 export default {
+  emits: ['update-cols-options', 'on-toggle-all', 'group-value-change', 'on-sort-change', 'col-visibility-change'],
+
   components: { Checkbox, LabeledSelect },
   props:      {
     columns: {