dashboard-shell-shell 1.0.113 → 1.0.115

package/components/SortableTable/selection.js

@@ -340,6 +340,17 @@ export default {
       if ( !isSelected ) {
         this.update([node], this.selectedRows.slice());
       }
+
+      let resources = this.selectedRows;
+
+      if ( this.mangleActionResources ) {
+        resources = await this.mangleActionResources(resources);
+      }
+
+      this.$store.commit(`action-menu/show`, {
+        resources,
+        event: e,
+      });
     },
 
     keySelectRow(row, more = false) {

package/components/Tabbed/Tab.vue

@@ -100,14 +100,14 @@ export default {
       v-if="shouldShowHeader"
       class="tab-header"
     >
-      <!-- <h2>
+      <h2>
         {{ labelDisplay }}
         <i
           v-if="tooltip"
           v-clean-tooltip="tooltip"
           class="icon icon-info icon-lg"
         />
-      </h2> -->
+      </h2>
       <slot name="tab-header-right" />
     </div>
     <slot v-bind="{active}" />
@@ -118,7 +118,7 @@ export default {
 .tab-header {
   display: flex;
   justify-content: space-between;
-  /* margin-bottom: 15px; */
+  margin-bottom: 15px;
   align-items: center;
 
   h2 {

package/components/Tabbed/index.vue

@@ -367,6 +367,15 @@ export default {
   margin: 0;
   padding: 0;
 
+  &:focus-visible {
+    outline: none;
+
+    .tab.active {
+      @include focus-outline;
+      outline-offset: -2px;
+    }
+  }
+
   &.horizontal {
     border: solid thin var(--border);
     border-bottom: 0;
@@ -382,12 +391,8 @@ export default {
     }
   }
 
-  &:focus {
-    outline: none;
-
-    & .tab.active a span {
-      text-decoration: none;
-    }
+  &:focus .tab.active a span {
+    text-decoration: underline;
   }
 
   .tab {
@@ -404,7 +409,7 @@ export default {
       &:hover {
         text-decoration: none;
         span {
-          text-decoration: none;
+          text-decoration: underline;
         }
       }
     }
@@ -474,68 +479,45 @@ export default {
 
 .side-tabs {
   display: flex;
-  flex-direction: column;
-  /* box-shadow: 0 0 20px var(--shadow);
+  box-shadow: 0 0 20px var(--shadow);
   border-radius: calc(var(--border-radius) * 2);
-  background-color: var(--tabbed-sidebar-bg); */
-margin: 0px -20px;
+  background-color: var(--tabbed-sidebar-bg);
+
   .tab-container {
     padding: 20px;
   }
 
   & .tabs {
-    /* width: $sideways-tabs-width; */
-    /* min-width: $sideways-tabs-width; */
+    width: $sideways-tabs-width;
+    min-width: $sideways-tabs-width;
     display: flex;
-    border-bottom:1px solid #d7d7d7;
-    padding: 0 0 0 20px;
-    /* flex: 1 0; */
-    /* flex-direction: column; */
+    flex: 1 0;
+    flex-direction: column;
 
     // &.vertical {
     //   .tab.active {
     //     background-color: var(--tabbed-container-bg);
     //   }
     // }
+
     & .tab {
-      /* width: 100%; */
-      width: 120px;
-      height: 36px;
-      /* border-top: solid 5px transparent; */
-      display: flex;
-      justify-content: center;
-      padding: 8px 16px;
-      box-sizing: border-box;
-      border: 1px solid #d7d7d7;
-      border-bottom: 0px;
-      margin-right: 5px;
-      border-radius: 2px;
+      width: 100%;
+      border-left: solid 5px transparent;
 
       &.toggle A {
         color: var(--primary);
-        padding: 0px;
       }
 
       A {
-        color: var(--input-label);
-        padding: 0px;
+        color: var(--primary);
       }
 
       &.active {
         background-color: var(--body-bg);
-        border-top: solid 2px var(--primary);
-        position: relative;
-        &.active::before{
-          position: absolute;
-          right: 0;
-          left: 0;
-          top: 34px;
-          border-bottom: 1px solid #fff;
-          content: '';
+        border-left: solid 5px var(--primary);
 
-        }
         & A {
-          color: var(--primary);
+          color: var(--input-label);
         }
       }
 
@@ -579,7 +561,7 @@ margin: 0px -20px;
   &
 
   .tab-container {
-    /* width: calc(100% - #{$sideways-tabs-width}); */
+    width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);
   }

package/components/Wizard.vue

@@ -426,7 +426,7 @@ export default {
         </div>
         <div
           id="wizard-footer-controls"
-          class="controls-row"
+          class="controls-row pt-20"
         >
           <slot
             name="cancel"
@@ -674,7 +674,7 @@ $spacer: 10px;
 // We have to account for the absolute position of the .controls-row
 .footer-error {
   margin-top: -40px;
-  margin-bottom: calc($footer-height + 10px);
+  margin-bottom: 70px;
 }
 
   .controls-row {

package/components/__tests__/AsyncButton.test.ts

@@ -42,7 +42,7 @@ describe('component: AsyncButton', () => {
     expect(span.text()).toBe('some-string');
   });
 
-  it('click on async button should emit click with a proper state of waiting, appear disabled and spinning ::: CB true', () => {
+  it('click on async button should emit click with a proper state of waiting, disabled and spinning ::: CB true', () => {
     jest.useFakeTimers();
 
     const wrapper: VueWrapper<InstanceType<typeof AsyncButton>> = mount(AsyncButton, {
@@ -65,7 +65,7 @@ describe('component: AsyncButton', () => {
     expect(wrapper.emitted('click')).toHaveLength(1);
     expect(wrapper.vm.phase).toBe(ASYNC_BUTTON_STATES.WAITING);
     expect(wrapper.vm.isSpinning).toBe(true);
-    expect(wrapper.vm.appearsDisabled).toBe(true);
+    expect(wrapper.vm.isDisabled).toBe(true);
     // testing cb function has been emitted
     expect(typeof wrapper.emitted('click')![0][0]).toBe('function');
 

package/components/__tests__/FixedBanner.test.ts

@@ -40,7 +40,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showHeader).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -60,7 +60,7 @@ describe('component: FixedBanner', () => {
     expect(wrapper.vm.showFooter).toStrictEqual(true);
 
     const bannerElem = wrapper.find('.banner');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerElem.classes()).not.toContain('banner-consent');
@@ -84,7 +84,7 @@ describe('component: FixedBanner', () => {
     const bannerDialogElem = wrapper.find('.banner-dialog');
     const bannerDialogFrameElem = wrapper.find('.banner-dialog-frame');
     const buttonDialog = wrapper.find('.banner-dialog button');
-    const noArrayTextElem = wrapper.find('.banner .single-row');
+    const noArrayTextElem = wrapper.find('.banner > p');
 
     expect(bannerElem.exists()).toBe(true);
     expect(bannerDialogGlassElem.exists()).toBe(true);

package/components/auth/Principal.vue

@@ -90,7 +90,6 @@ export default {
         <img
           :src="principal.avatarSrc"
           :class="{'round': principal.roundAvatar}"
-          :alt="t('principal.alt.avatar')"
         >
       </div>
       <div
@@ -99,9 +98,9 @@ export default {
       >
         <table>
           <tbody>
-            <tr><th>{{ t('principal.name') }}: </th><td>{{ principal.name || principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.loginName') }}: </th><td>{{ principal.loginName }}</td></tr>
-            <tr><th>{{ t('principal.type') }}: </th><td>{{ principal.displayType }}</td></tr>
+            <tr><td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td></tr>
+            <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
           </tbody>
         </table>
       </div>
@@ -165,12 +164,6 @@ export default {
     grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
-    th {
-      text-align: left;
-      font-weight: normal;
-      padding-right: 10px;
-    }
-
     &.showLabels {
       grid-template-areas:
         "avatar name";

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -51,9 +51,8 @@ describe('component: RoleDetailEdit', () => {
     const wrapper = mount(RoleDetailEdit, {
       props: {
         value: {
-          rules:    [{ verbs }],
-          subtype:  'GLOBAL',
-          metadata: { name: 'global-role-with-inherited' },
+          rules:   [{ verbs }],
+          subtype: 'GLOBAL'
         },
       },
 

package/components/form/ArrayList.vue

@@ -1,5 +1,4 @@
 <script>
-import { ref, watch, computed } from 'vue';
 import debounce from 'lodash/debounce';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { removeAt } from '@shell/utils/array';
@@ -95,87 +94,22 @@ export default {
       // we only want functions in the rules array
       validator: (rules) => rules.every((rule) => ['function'].includes(typeof rule))
     },
-    a11yLabel: {
-      type:    String,
-      default: '',
-    },
-    componentTestid: {
-      type:    String,
-      default: 'array-list',
-    }
   },
-
-  setup(props, { emit }) {
-    const input = (Array.isArray(props.value) ? props.value : []).slice();
-    const rows = ref([]);
+  data() {
+    const input = (Array.isArray(this.value) ? this.value : []).slice();
+    const rows = [];
 
     for ( const value of input ) {
-      rows.value.push({ value });
+      rows.push({ value });
     }
-    if ( !rows.value.length && props.initialEmptyRow ) {
-      const value = props.defaultAddValue ? clone(props.defaultAddValue) : '';
+    if ( !rows.length && this.initialEmptyRow ) {
+      const value = this.defaultAddValue ? clone(this.defaultAddValue) : '';
 
-      rows.value.push({ value });
+      rows.push({ value });
     }
 
-    const isView = computed(() => {
-      return props.mode === _VIEW;
-    });
-
-    /**
-     * Cleanup rows and emit input
-     */
-    const update = () => {
-      if ( isView.value ) {
-        return;
-      }
-      const out = [];
-
-      for ( const row of rows.value ) {
-        const trim = !props.valueMultiline && (typeof row.value === 'string');
-        const value = trim ? row.value.trim() : row.value;
-
-        if ( typeof value !== 'undefined' ) {
-          out.push(value);
-        }
-      }
-      emit('update:value', out);
-    };
-
-    const lastUpdateWasFromValue = ref(false);
-    const queueUpdate = debounce(update, 50);
-
-    watch(
-      rows,
-      () => {
-        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
-        // this was called which then forced rows to updated again
-        if (!lastUpdateWasFromValue.value) {
-          queueUpdate();
-        }
-        lastUpdateWasFromValue.value = false;
-      },
-      { deep: true }
-    );
-
-    watch(
-      () => props.value,
-      () => {
-        lastUpdateWasFromValue.value = true;
-        rows.value = (props.value || []).map((v) => ({ value: v }));
-      },
-      { deep: true }
-    );
-
-    return {
-      rows,
-      lastUpdateWasFromValue,
-      queueUpdate,
-      isView,
-      update,
-    };
+    return { rows, lastUpdateWasFromValue: false };
   },
-
   computed: {
     _addLabel() {
       return this.addLabel || this.t('generic.add');
@@ -183,6 +117,10 @@ export default {
     _removeLabel() {
       return this.removeLabel || this.t('generic.remove');
     },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
     showAdd() {
       return this.addAllowed;
     },
@@ -203,7 +141,29 @@ export default {
       return !this.valueMultiline && this.protip;
     }
   },
+  watch: {
+    value: {
+      deep: true,
+      handler() {
+        this.lastUpdateWasFromValue = true;
+        this.rows = (this.value || []).map((v) => ({ value: v }));
+      }
+    },
+
+    rows: {
+      deep: true,
+      handler(newValue, oldValue) {
+        // lastUpdateWasFromValue is used to break a cycle where when rows are updated
+        // this was called which then forced rows to updated again
+        if (!this.lastUpdateWasFromValue) {
+          this.queueUpdate();
+        }
+        this.lastUpdateWasFromValue = false;
+      }
+    }
+  },
   created() {
+    this.queueUpdate = debounce(this.update, 50);
   },
   methods: {
     add() {
@@ -229,6 +189,26 @@ export default {
       this.queueUpdate();
     },
 
+    /**
+     * Cleanup rows and emit input
+     */
+    update() {
+      if ( this.isView ) {
+        return;
+      }
+      const out = [];
+
+      for ( const row of this.rows ) {
+        const trim = !this.valueMultiline && (typeof row.value === 'string');
+        const value = trim ? row.value.trim() : row.value;
+
+        if ( typeof value !== 'undefined' ) {
+          out.push(value);
+        }
+      }
+      this.$emit('update:value', out);
+    },
+
     /**
      * Handle paste event, e.g. split multiple lines in rows
      */
@@ -274,32 +254,7 @@ export default {
         </h3>
       </slot>
     </div>
-    <div
-      v-if="showAdd && !isView"
-      class="footer"
-    >
-      <slot
-        v-if="showAdd"
-        name="add"
-        :add="add"
-      >
-        <button
-          type="button"
-          class="btn role-primary add"
-          :disabled="loading || disableAdd"
-          :data-testid="`${componentTestid}-button`"
-          :aria-label="_addLabel"
-          role="button"
-          @click="add()"
-        >
-          <i
-            class="mr-5 icon"
-            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
-          />
-          {{ _addLabel }}
-        </button>
-      </slot>
-    </div>
+
     <template v-if="rows.length">
       <div v-if="showHeader">
         <slot name="column-headers">
@@ -311,7 +266,7 @@ export default {
       <div
         v-for="(row, idx) in rows"
         :key="idx"
-        :data-testid="`${componentTestid}-box${ idx }`"
+        :data-testid="`array-list-box${ idx }`"
         class="box"
       >
         <slot
@@ -335,7 +290,7 @@ export default {
                 v-if="valueMultiline"
                 ref="value"
                 v-model:value="row.value"
-                :data-testid="`${componentTestid}-textarea-${idx}`"
+                :data-testid="`textarea-${idx}`"
                 :placeholder="valuePlaceholder"
                 :mode="mode"
                 :disabled="disabled"
@@ -346,7 +301,7 @@ export default {
                 v-else-if="rules.length > 0"
                 ref="value"
                 v-model:value="row.value"
-                :data-testid="`${componentTestid}-labeled-input-${idx}`"
+                :data-testid="`labeled-input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 :rules="rules"
@@ -358,10 +313,9 @@ export default {
                 v-else
                 ref="value"
                 v-model="row.value"
-                :data-testid="`${componentTestid}-input-${idx}`"
+                :data-testid="`input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
-                :aria-label="a11yLabel ? a11yLabel : undefined"
                 @paste="onPaste(idx, $event)"
               >
             </slot>
@@ -381,9 +335,7 @@ export default {
               type="button"
               :disabled="isView"
               class="btn role-link"
-              :data-testid="`${componentTestid}-remove-item-${idx}`"
-              :aria-label="`${_removeLabel} ${idx + 1}`"
-              role="button"
+              :data-testid="`remove-item-${idx}`"
               @click="remove(row, idx)"
             >
               {{ _removeLabel }}
@@ -402,7 +354,30 @@ export default {
         </div>
       </slot>
     </div>
-
+    <div
+      v-if="showAdd && !isView"
+      class="footer mt-20"
+    >
+      <slot
+        v-if="showAdd"
+        name="add"
+        :add="add"
+      >
+        <button
+          type="button"
+          class="btn role-tertiary add"
+          :disabled="loading || disableAdd"
+          data-testid="array-list-button"
+          @click="add()"
+        >
+          <i
+            class="mr-5 icon"
+            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
+          />
+          {{ _addLabel }}
+        </button>
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -423,12 +398,7 @@ export default {
     .value {
       flex: 1;
       INPUT {
-        height: $input-height;
-        border: solid var(--border-width) var(--input-border);
-        padding: 4px 11px;
-        &:hover{
-          box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
-        }
+        height: $unlabeled-input-height;
       }
     }
   }
@@ -436,7 +406,6 @@ export default {
     text-align: right;
   }
   .footer {
-    margin-bottom: 24px;
     .protip {
       float: right;
       padding: 5px 0;
@@ -446,11 +415,4 @@ export default {
   .required {
     color: var(--error);
   }
-  :deep() .labeled-input.compact-input{
-    padding: 0px;
-  }
-  :deep() .box{
-    margin-bottom: 10px;
-  }
-    
 </style>

package/components/form/ArrayListGrouped.vue

@@ -127,16 +127,8 @@ export default {
       & > .remove {
         position: absolute;
 
-        top: 10px;
-        right: 10px;
-        & > .close{
-          width: 32px;
-          min-width: 32px !important;
-          color: var(--body-text);
-          &:hover{
-            color: var(--link);
-          }
-        }
+        top: 0;
+        right: 0;
       }
 
       & > .info-box {

package/components/form/Command.vue

@@ -43,14 +43,23 @@ export default {
   },
 
   data() {
+    const {
+      command,
+      args,
+      workingDir,
+      stdin = false,
+      stdinOnce = false,
+      tty = false,
+    } = this.value;
+
     return {
-      args:           this.value.args,
-      command:        this.value.command,
+      args,
+      command,
       commandOptions: ['No', 'Once', 'Yes'],
-      stdin:          this.value.stdin || false,
-      stdinOnce:      this.value.stdin || false,
-      tty:            this.value.tty || false,
-      workingDir:     this.value.workingDir,
+      stdin,
+      stdinOnce,
+      tty,
+      workingDir,
     };
   },
 

package/components/form/EnvVars.vue

@@ -39,10 +39,14 @@ export default {
   },
 
   data() {
+    const { env = [], envFrom = [] } = this.value;
+
+    const allEnv = [...env, ...envFrom].map((row) => {
+      return { value: row, id: randomStr(4) };
+    });
+
     return {
-      env:     [],
-      envFrom: [],
-      allEnv:  [],
+      env, envFrom, allEnv
     };
   },
 
@@ -59,18 +63,7 @@ export default {
       }
     }
   },
-
   created() {
-    const { env = [], envFrom = [] } = this.value;
-
-    const allEnv = [...env, ...envFrom].map((row) => {
-      return { value: row, id: randomStr(4) };
-    });
-
-    this.env = env;
-    this.envFrom = envFrom;
-    this.allEnv = allEnv;
-
     this.queueUpdate = debounce(this.update, 500);
   },
 
@@ -114,8 +107,7 @@ export default {
   <div :style="{'width':'100%'}">
     <div
       v-for="(row, i) in allEnv"
-      :key="row.id"
-      :data-testid="`env-var-row-${i}`"
+      :key="i"
     >
       <ValueFromResource
         v-model:value="row.value"