@rancher/shell 0.3.8 → 0.3.10

package/components/ResourceList/Masthead.vue

@@ -65,11 +65,6 @@ export default {
       default: false
     },
 
-    loadNamespace: {
-      type:    String,
-      default: null
-    },
-
     showIncrementalLoadingIndicator: {
       type:    Boolean,
       default: false
@@ -183,7 +178,6 @@ export default {
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
         :indeterminate="loadIndeterminate"
-        :namespace="loadNamespace"
       />
     </div>
     <div class="actions-container">

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -17,10 +17,6 @@ export default {
       type:    Boolean,
       default: false,
     },
-    namespace: {
-      type:    String,
-      default: undefined
-    },
   },
 
   data() {
@@ -44,10 +40,6 @@ export default {
     // Have we loaded all resources for the types that are needed
     haveAll() {
       return this.resources.reduce((acc, r) => {
-        if (this.namespace) {
-          return acc && this.$store.getters[`${ this.inStore }/haveAllNamespace`](r, this.namespace);
-        }
-
         return acc && this.$store.getters[`${ this.inStore }/haveAll`](r);
       }, true);
     },
@@ -58,7 +50,7 @@ export default {
 
       return this.resources.reduce((acc, r) => {
         const resourceCounts = clusterCounts?.[0]?.counts?.[r];
-        const resourceCount = this.namespace ? resourceCounts?.namespaces?.[this.namespace]?.count : resourceCounts?.summary?.count;
+        const resourceCount = resourceCounts?.summary?.count;
         const count = resourceCount || 0;
 
         return acc + count;

package/components/ResourceList/index.vue

@@ -8,6 +8,7 @@ import IconMessage from '@shell/components/IconMessage.vue';
 import { ResourceListComponentName } from './resource-list.config';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
+import { sameContents } from 'utils/array';
 
 export default {
   name: ResourceListComponentName,
@@ -146,7 +147,11 @@ export default {
      *
      * This covers case 1
      */
-    namespaceFilter(neu) {
+    namespaceFilter(neu, old) {
+      if (sameContents(neu, old)) {
+        return;
+      }
+
       if (neu && !this.hasFetch) {
         this.$fetchType(this.resource);
       }
@@ -176,10 +181,7 @@ export default {
     icon="icon-filter_alt"
   >
     <template #message>
-      <span
-        v-clean-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
-        class="filter"
-      />
+      {{ t('resourceList.nsFiltering') }}
     </template>
   </IconMessage>
   <div v-else>
@@ -191,7 +193,6 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
-      :load-namespace="namespaceFilter"
     >
       <template slot="extraActions">
         <slot name="extraActions" />

package/components/ResourceTable.vue

@@ -176,7 +176,12 @@ export default {
       return acc;
     }, {});
 
-    return { listGroups, listGroupMapped };
+    // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
+    const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
+
+    return {
+      listGroups, listGroupMapped, inStore
+    };
   },
 
   computed: {
@@ -244,8 +249,13 @@ export default {
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
 
-      // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources) || this.ignoreFilter) {
+      // Do we need to filter by namespace like things?
+      if (
+        !this.isNamespaced || // Resource type isn't namespaced
+        this.ignoreFilter || // Component owner strictly states no filtering
+        (isAll && !this.currentProduct?.hideSystemResources) || // Need all
+        (this.inStore ? this.$store.getters[`${ this.inStore }/haveNamespace`](this.schema.id)?.length : false)// Store reports type has namespace filter, so rows already contain the correctly filtered resources
+      ) {
         return this.rows || [];
       }
 

package/components/SortableTable/THead.vue

@@ -240,12 +240,12 @@ export default {
         >
           <span
             v-if="col.sort"
-            v-tooltip="tooltip(col)"
+            v-clean-tooltip="tooltip(col)"
           >
             <span v-clean-html="labelFor(col)" />
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
-              v-tooltip="t('sortableTable.tableHeader.noFilter')"
+              v-clean-tooltip="t('sortableTable.tableHeader.noFilter')"
               class="icon icon-info not-filter-icon"
             />
             <span class="icon-stack">
@@ -262,7 +262,7 @@ export default {
           </span>
           <span
             v-else
-            v-tooltip="tooltip(col)"
+            v-clean-tooltip="tooltip(col)"
           >{{ labelFor(col) }}</span>
         </div>
       </th>

package/components/SortableTable/index.vue

@@ -924,7 +924,7 @@ export default {
                 v-for="act in availableActions"
                 :id="act.action"
                 :key="act.action"
-                v-tooltip="actionTooltip"
+                v-clean-tooltip="actionTooltip"
                 type="button"
                 class="btn role-primary"
                 :class="{[bulkActionClass]:true}"
@@ -963,7 +963,7 @@ export default {
                       v-for="act in hiddenActions"
                       :key="act.action"
                       v-close-popover
-                      v-tooltip="{
+                      v-clean-tooltip="{
                         content: actionTooltip,
                         placement: 'right'
                       }"
@@ -1021,7 +1021,7 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            v-tooltip="t('performance.manualRefresh.buttonTooltip')"
+            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
             mode="refresh"
             :current-phase="currentPhase"

package/components/Tabbed/Tab.vue

@@ -102,7 +102,7 @@ export default {
         {{ labelDisplay }}
         <i
           v-if="tooltip"
-          v-tooltip="tooltip"
+          v-clean-tooltip="tooltip"
           class="icon icon-info icon-lg"
         />
       </h2>

package/components/Tabbed/index.vue

@@ -255,7 +255,7 @@ export default {
           >{{ tab.badge }}</span>
           <i
             v-if="hasIcon(tab)"
-            v-tooltip="t('validation.tab')"
+            v-clean-tooltip="t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
         </a>

package/components/Wizard.vue

@@ -468,8 +468,7 @@ $spacer: 10px;
   flex-direction: column;
   flex: 1;
   padding: 0;
-  height: 100%;
-  position: relative;
+  height: 0;
   justify-content: flex-start;
 }
 
@@ -641,13 +640,15 @@ $spacer: 10px;
   height: 0;
   overflow-y: auto;
   padding: 20px 2px 2px 2px; // Handle borders flush against edge
-
   display: flex;
   flex-direction: column;
 
   &__step {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     flex: 1;
-    overflow: auto;
   }
 }
 
@@ -656,7 +657,6 @@ $spacer: 10px;
     // Overrides outlet padding
     margin-left: -$space-m;
     margin-right: -$space-m;
-    margin-bottom: -$space-m;
     padding: $space-s $space-m;
 
     display: flex;
@@ -664,7 +664,10 @@ $spacer: 10px;
     padding-top: $spacer;
 
     border-top: var(--header-border-size) solid var(--header-border);
-
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: var(--body-bg);
     .controls-steps {
 
       .btn {

package/components/YamlEditor.vue

@@ -86,7 +86,7 @@ export default {
   },
 
   computed: {
-    cmOptions() {
+    codeMirrorOptions() {
       const readOnly = this.editorMode === EDITOR_MODES.VIEW_CODE;
 
       const gutters = [];
@@ -228,7 +228,7 @@ export default {
       ref="cm"
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
-      :options="cmOptions"
+      :options="codeMirrorOptions"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"

package/components/__tests__/NamespaceFilter.test.ts

@@ -10,6 +10,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
+        mocks:      { $fetchState: { pending: false } },
         directives: { shortkey: () => jest.fn() }
       });
       const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
@@ -25,7 +26,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
@@ -44,6 +48,7 @@ describe('component: NamespaceFilter', () => {
             kind:  'special',
           }]),
         },
+        mocks:      { $fetchState: { pending: false } },
         directives: { shortkey: () => jest.fn() }
       });
 
@@ -61,7 +66,10 @@ describe('component: NamespaceFilter', () => {
           value:    () => [{ label: text }],
         },
         directives: { shortkey: () => jest.fn() },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks:      {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -97,7 +105,8 @@ describe('component: NamespaceFilter', () => {
               'prefs/get':         () => preferences,
               namespaceFilterMode: () => undefined,
             },
-          }
+          },
+          $fetchState: { pending: false }
         },
         directives: { shortkey: () => jest.fn() }
       });
@@ -116,7 +125,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -135,7 +147,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -153,7 +168,10 @@ describe('component: NamespaceFilter', () => {
           options: () => [],
           value:   () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
 
@@ -194,7 +212,8 @@ describe('component: NamespaceFilter', () => {
           $store: {
             getters:  { 'i18n/t': () => text, namespaceFilterMode: () => undefined },
             dispatch: action
-          }
+          },
+          $fetchState: { pending: false }
         },
         directives: { shortkey: () => jest.fn() }
       });

package/components/auth/RoleDetailEdit.vue

@@ -627,7 +627,7 @@ export default {
                   <span class="text-label">
                     {{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.resources') }}
                     <i
-                      v-tooltip="t('rbac.roletemplate.tabs.grantResources.resourceOptionInfo')"
+                      v-clean-tooltip="t('rbac.roletemplate.tabs.grantResources.resourceOptionInfo')"
                       class="icon icon-info"
                     />
                     <span

package/components/auth/SelectPrincipal.vue

@@ -175,7 +175,7 @@ export default {
   <LabeledSelect
     ref="labeled-select"
     v-model="newValue"
-    v-tooltip="{
+    v-clean-tooltip="{
       content: tooltipContent,
       placement: 'bottom',
       classes: ['select-principal-tooltip']

package/components/fleet/FleetRepos.vue

@@ -146,7 +146,7 @@ export default {
           {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
           <i
             v-if="!row.clusterInfo.total"
-            v-tooltip.bottom="parseTargetMode(row)"
+            v-clean-tooltip.bottom="parseTargetMode(row)"
             class="icon icon-warning"
           />
         </span>

package/components/form/ArrayList.vue

@@ -206,7 +206,7 @@ export default {
           {{ title }}
           <i
             v-if="showProtip"
-            v-tooltip="protip"
+            v-clean-tooltip="protip"
             class="icon icon-info"
           />
         </h3>
@@ -224,7 +224,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
-        data-testid="array-list-box"
+        :data-testid="`array-list-box${ idx }`"
         class="box"
       >
         <slot

package/components/form/KeyValue.vue

@@ -10,11 +10,13 @@ import Select from '@shell/components/form/Select';
 import FileSelector from '@shell/components/form/FileSelector';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
+import CodeMirror from '@shell/components/CodeMirror';
 
 export default {
   name: 'KeyValue',
 
   components: {
+    CodeMirror,
     Select,
     TextAreaAutoGrow,
     FileSelector
@@ -139,6 +141,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    valueMarkdownMultiline: {
+      type:    Boolean,
+      default: false,
+    },
     valueMultiline: {
       type:    Boolean,
       default: true,
@@ -245,7 +251,10 @@ export default {
   data() {
     const rows = this.getRows(this.value);
 
-    return { rows };
+    return {
+      rows,
+      codeMirrorFocus: {},
+    };
   },
 
   computed: {
@@ -519,6 +528,19 @@ export default {
       return this.t('detailText.binary', { n }, true);
     },
     get,
+    /**
+     * Update 'rows' variable with the user's input and prevents to update queue before the row model is updated
+     */
+    onInputMarkdownMultiline(idx, value) {
+      this.rows = this.rows.map((row, i) => i === idx ? { ...row, value } : row);
+      this.queueUpdate();
+    },
+    /**
+     * Set focus on CodeMirror fields
+     */
+    onFocusMarkdownMultiline(idx, value) {
+      this.$set(this.codeMirrorFocus, idx, value);
+    }
   }
 };
 </script>
@@ -533,7 +555,7 @@ export default {
           {{ title }}
           <i
             v-if="titleProtip"
-            v-tooltip="titleProtip"
+            v-clean-tooltip="titleProtip"
             class="icon icon-info"
           />
         </h3>
@@ -548,7 +570,7 @@ export default {
           {{ keyLabel }}
           <i
             v-if="protip && !isView && addAllowed"
-            v-tooltip="protip"
+            v-clean-tooltip="protip"
             class="icon icon-info"
           />
         </label>
@@ -635,6 +657,17 @@ export default {
             <div v-else-if="row.binary">
               {{ binaryTextSize(row.value) }}
             </div>
+            <CodeMirror
+              v-else-if="valueMarkdownMultiline"
+              ref="cm"
+              data-testid="code-mirror-multiline-field"
+              :class="{['focus']: codeMirrorFocus[i]}"
+              :value="row[valueName]"
+              :as-text-area="true"
+              :mode="mode"
+              @onInput="onInputMarkdownMultiline(i, $event)"
+              @onFocus="onFocusMarkdownMultiline(i, $event)"
+            />
             <TextAreaAutoGrow
               v-else-if="valueMultiline"
               v-model="row[valueName]"
@@ -750,6 +783,7 @@ export default {
       &.value textarea{
         padding: 10px 10px 10px 10px;
       }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }

package/components/form/Labels.vue

@@ -42,7 +42,17 @@ export default {
     annotationTitleTooltip: {
       type:    String,
       default: '',
-    }
+    },
+
+    showAnnotations: {
+      type:    Boolean,
+      default: true,
+    },
+
+    showLabelTitle: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -69,7 +79,7 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <h3>
+          <h3 v-if="showLabelTitle">
             <t k="labels.labels.title" />
           </h3>
           <ToggleSwitch
@@ -83,22 +93,32 @@ export default {
           <t k="labels.labels.description" />
         </p>
         <div :class="columnsClass">
-          <KeyValue
-            key="labels"
-            :value="value.labels"
-            :protected-keys="value.systemLabels || []"
-            :toggle-filter="toggler"
-            :add-label="t('labels.addLabel')"
-            :mode="mode"
-            :read-allowed="false"
-            :value-can-be-empty="true"
-            @input="value.setLabels($event)"
-          />
+          <slot
+            name="labels"
+            :toggler="toggler"
+          >
+            <template>
+              <KeyValue
+                key="labels"
+                :value="value.labels"
+                :protected-keys="value.systemLabels || []"
+                :toggle-filter="toggler"
+                :add-label="t('labels.addLabel')"
+                :mode="mode"
+                :read-allowed="false"
+                :value-can-be-empty="true"
+                @input="value.setLabels($event)"
+              />
+            </template>
+          </slot>
         </div>
       </div>
     </div>
     <div class="spacer" />
-    <div :class="sectionClass">
+    <div
+      v-if="showAnnotations"
+      :class="sectionClass"
+    >
       <KeyValue
         key="annotations"
         :value="value.annotations"