@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/PodSecurityAdmission.vue

@@ -229,17 +229,17 @@ export default defineComponent({
           @update:value="updateLabels()"
         />
         <p v-else>
-          <t :k="`podSecurityAdmission.labels.${level}`" />
+          <t
+            :id="`psa-label-for-level-${ level }`"
+            :k="`podSecurityAdmission.labels.${level}`"
+          />
         </p>
       </span>
 
-      <span
-        class="
-          col
-          span-4"
-      >
+      <span class="col span-4">
         <LabeledSelect
           v-model:value="psaControl.level"
+          :aria-labelledby="`psa-label-for-level-${ level }`"
           :data-testid="componentTestid + '--psaControl-' + i + '-level'"
           :disabled="isPsaControlDisabled(psaControl.active)"
           :options="options"
@@ -256,6 +256,7 @@ export default defineComponent({
           :options="options"
           :placeholder="t('podSecurityAdmission.version.placeholder', { psaControl: mode })"
           :mode="mode"
+          :aria-label="`${t(`podSecurityAdmission.labels.${level}`)} - ${t('podSecurityAdmission.version.placeholder', { psaControl: mode })}`"
           @update:value="updateLabels()"
         />
       </span>
@@ -295,6 +296,7 @@ export default defineComponent({
             :options="options"
             :placeholder="t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })"
             :mode="mode"
+            :aria-label="`${t(`podSecurityAdmission.labels.${ dimension }`)} - ${t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })}`"
             @update:value="updateExemptions()"
           />
         </span>

package/components/PromptChangePassword.vue

@@ -40,6 +40,7 @@ export default {
   <app-modal
     v-if="showModal"
     custom-class="change-password-modal"
+    data-testid="change-password__modal"
     name="password-modal"
     :width="500"
     :height="465"

package/components/PromptRemove.vue

@@ -1,4 +1,5 @@
 <script>
+import { shallowRef } from 'vue';
 import { mapState, mapGetters } from 'vuex';
 import { get, isEmpty } from '@shell/utils/object';
 import { escapeHtml, resourceNames } from '@shell/utils/string';
@@ -38,7 +39,7 @@ export default {
       error:               '',
       warning:             '',
       preventDelete:       false,
-      removeComponent:     this.$store.getters['type-map/importCustomPromptRemove'](resource),
+      removeComponent:     shallowRef(this.$store.getters['type-map/importCustomPromptRemove'](resource)),
       chartsToRemoveIsApp: false,
       chartsDeleteCrd:     false,
       showModal:           false,
@@ -46,7 +47,7 @@ export default {
   },
   computed: {
     names() {
-      return this.toRemove.map((obj) => obj.nameDisplay).slice(0, 5);
+      return this.toRemove.map((obj) => obj.nameDisplay);
     },
 
     nameToMatchPosition() {
@@ -92,12 +93,6 @@ export default {
       return first?.confirmRemove;
     },
 
-    plusMore() {
-      const remaining = this.toRemove.length - this.names.length;
-
-      return this.t('promptRemove.andOthers', { count: remaining });
-    },
-
     // if the current route ends with the ID of the resource being deleted, whatever page this is wont be valid after successful deletion: navigate away
     doneLocation() {
       // if deleting more than one resource, this is happening in list view and shouldn't redirect anywhere
@@ -167,7 +162,7 @@ export default {
       if (show) {
         const selected = this.toRemove[0];
 
-        if (this.currentRouter?.currentRoute?.name === 'c-cluster-explorer-tools' &&
+        if (this.currentRouter?.currentRoute?.value?.name === 'c-cluster-explorer-tools' &&
             selected.type === CATALOG.APP &&
             selected.spec?.chart?.metadata?.annotations[CATALOG_ANNOTATIONS.AUTO_INSTALL]) {
           this.chartsToRemoveIsApp = true;
@@ -183,7 +178,7 @@ export default {
 
         this.hasCustomRemove = this.$store.getters['type-map/hasCustomPromptRemove'](resource);
 
-        this.removeComponent = this.$store.getters['type-map/importCustomPromptRemove'](resource);
+        this.removeComponent = shallowRef(this.$store.getters['type-map/importCustomPromptRemove'](resource));
       } else {
         this.showModal = false;
       }
@@ -359,7 +354,7 @@ export default {
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-              v-clean-html="resourceNames(names, plusMore, t)"
+              v-clean-html="resourceNames(names, t)"
             />
           </template>
 
@@ -368,7 +363,7 @@ export default {
             v-if="hasCustomRemove"
             ref="customPrompt"
             v-model:value="toRemove"
-            v-bind="_data"
+            v-bind="$data"
             :close="close"
             :needs-confirm="needsConfirm"
             :value="toRemove"
@@ -394,6 +389,7 @@ export default {
           v-focus
           :data-testid="componentTestid + '-input'"
           type="text"
+          :aria-label="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
         >
           <div class="text-warning mb-10 mt-10">
             {{ warning }}
@@ -407,22 +403,28 @@ export default {
           >
             {{ protip }}
           </div>
-          <Checkbox
-            v-if="chartsToRemoveIsApp"
-            v-model:value="chartsDeleteCrd"
-            label-key="promptRemoveApp.removeCrd"
-            class="mt-10 type"
-            @update:value="chartAddCrdToRemove"
-          />
         </LabeledInput>
         <div v-else-if="!hasCustomRemove">
-          <div class="text-warning mb-10 mt-10">
+          <div
+            v-if="warning"
+            class="text-warning mb-10 mt-10"
+          >
             {{ warning }}
           </div>
-          <div class="text-error mb-10 mt-10">
+          <div
+            v-if="error"
+            class="text-error mb-10 mt-10"
+          >
             {{ error }}
           </div>
         </div>
+        <Checkbox
+          v-if="chartsToRemoveIsApp"
+          v-model:value="chartsDeleteCrd"
+          label-key="promptRemoveApp.removeCrd"
+          class="mt-10 type"
+          @update:value="chartAddCrdToRemove"
+        />
       </template>
       <template #actions>
         <button

package/components/ResourceDetail/Masthead.vue

@@ -504,10 +504,32 @@ export default {
               {{ namespace }}
             </span>
           </span>
-          <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate
-            class="live-date"
-            :value="value.creationTimestamp"
-          /></span>
+          <span v-if="parent.showAge">
+            {{ t("resourceDetail.masthead.age") }}:
+            <LiveDate
+              class="live-date"
+              :value="value.creationTimestamp"
+            />
+          </span>
+          <span
+            v-if="value.showCreatedBy"
+            data-testid="masthead-subheader-createdBy"
+          >
+            {{ t("resourceDetail.masthead.createdBy") }}:
+            <router-link
+              v-if="value.createdBy.location"
+              :to="value.createdBy.location"
+              data-testid="masthead-subheader-createdBy-link"
+            >
+              {{ value.createdBy.displayName }}
+            </router-link>
+            <span
+              v-else
+              data-testid="masthead-subheader-createdBy_plain-text"
+            >
+              {{ value.createdBy.displayName }}
+            </span>
+          </span>
           <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
         </div>
       </div>
@@ -587,11 +609,8 @@ export default {
   }
 
   HEADER {
-    margin: 0 0 0 -5px;
-
-    .title {
-      overflow-x: hidden;
-    }
+    margin: 0;
+    grid-template-columns: minmax(0, 1fr) auto;
   }
 
   .primaryheader {
@@ -600,14 +619,13 @@ export default {
     align-items: center;
 
     h1 {
-      margin: 0;
+      margin: 0 0 0 -5px;
       overflow-x: hidden;
       display: flex;
       flex-direction: row;
       align-items: center;
 
       .masthead-resource-title {
-        padding: 0 8px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -638,6 +656,7 @@ export default {
   }
 
   .masthead-state {
+    margin-left: 8px;
     font-size: initial;
   }
 

package/components/ResourceDetail/__tests__/Masthead.test.ts

@@ -0,0 +1,61 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import { _VIEW } from '@shell/config/query-params';
+import Masthead from '@shell/components/ResourceDetail/Masthead.vue';
+
+const mockedStore = () => {
+  return {
+    getters: {
+      currentStore:              () => 'current_store',
+      currentProduct:            { inStore: 'cluster' },
+      isExplorer:                false,
+      currentCluster:            {},
+      'type-map/labelFor':       jest.fn(),
+      'type-map/optionsFor':     jest.fn(),
+      'current_store/schemaFor': jest.fn(),
+    },
+  };
+};
+
+const requiredSetup = () => {
+  return {
+    stubs: {
+      'router-link': RouterLinkStub,
+      LiveDate:      true
+    },
+    mocks: { $store: mockedStore() }
+  };
+};
+
+describe('component: Masthead', () => {
+  it.each([
+    ['hidden', '', false, { displayName: 'admin', location: { id: 'resource-id' } }, false, false],
+    ['plain-text', 'admin', true, { displayName: 'admin', location: null }, false, true],
+    ['link', 'foo', true, { displayName: 'foo', location: { id: 'resource-id' } }, true, false],
+  ])('"Created By" should be %p, with text: %p', (
+    _,
+    text,
+    showCreatedBy,
+    createdBy,
+    showLink,
+    showPlainText,
+  ) => {
+    const wrapper = mount(Masthead, {
+      props: {
+        mode:  _VIEW,
+        value: {
+          showCreatedBy,
+          createdBy,
+        },
+      },
+      global: { ...requiredSetup() }
+    });
+
+    const container = wrapper.find('[data-testid="masthead-subheader-createdBy"]');
+    const link = wrapper.find('[data-testid="masthead-subheader-createdBy-link"]');
+    const plainText = wrapper.find('[data-testid="masthead-subheader-createdBy_plain-text"]');
+
+    expect(link.exists()).toBe(showLink);
+    expect(plainText.exists()).toBe(showPlainText);
+    expect(showLink || showPlainText ? container.element.textContent : '').toContain(text);
+  });
+});

package/components/ResourceDetail/index.vue

@@ -71,6 +71,11 @@ export default {
       default: null,
     },
 
+    flexContent: {
+      type:    Boolean,
+      default: false,
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components
@@ -484,6 +489,7 @@ export default {
       :initial-value="initialModel"
       :live-value="liveModel"
       :real-mode="realMode"
+      :class="{'flex-content': flexContent}"
       @update:value="$emit('input', $event)"
       @set-subtype="setSubtype"
     />

package/components/ResourceTable.vue

@@ -188,6 +188,11 @@ export default {
       type:    Number,
       default: null, // Default comes from the user preference
     },
+
+    hideGroupingControls: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -591,7 +596,7 @@ export default {
     @enter="handleEnterKeyPress"
   >
     <template
-      v-if="showGrouping"
+      v-if="!hideGroupingControls && showGrouping"
       #header-middle
     >
       <slot name="more-header-middle" />

package/components/ResourceYaml.vue

@@ -298,6 +298,7 @@ export default {
     <YamlEditor
       ref="yamleditor"
       v-model:value="currentYaml"
+      :mode="mode"
       :initial-yaml-values="initialYaml"
       class="yaml-editor flex-content"
       :editor-mode="editorMode"

package/components/Setting.vue

@@ -0,0 +1,115 @@
+<script>
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { mapGetters } from 'vuex';
+export default {
+  name:       'Setting',
+  components: { ActionMenu },
+  props:      {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+    ...mapGetters({ options: 'action-menu/optionsArray' }),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="advanced-setting mb-20"
+    :data-testid="`advanced-setting__option-${value.id}`"
+  >
+    <div class="header">
+      <div class="title">
+        <h1>
+          {{ value.id }}
+          <span
+            v-if="value.fromEnv"
+            class="modified"
+          >{{ t('advancedSettings.setEnv') }}</span>
+          <span
+            v-else-if="value.customized"
+            class="modified"
+          >{{ t('advancedSettings.modified') }}</span>
+        </h1>
+        <h2>{{ t(`advancedSettings.descriptions.${value.id}`) }}</h2>
+      </div>
+      <div
+        v-if="value.hasActions"
+        class="action"
+      >
+        <action-menu
+          :resource="value.data"
+          :button-aria-label="t('advancedSettings.edit.label')"
+          data-testid="action-button"
+          button-role="tertiary"
+        />
+      </div>
+    </div>
+    <div value>
+      <div v-if="value.canHide">
+        <button
+          class="btn btn-sm role-primary"
+          role="button"
+          :aria-label="t('advancedSettings.hideShow')"
+          @click="value.hide = !value.hide"
+        >
+          {{ value.hide ? t('advancedSettings.show') : t('advancedSettings.hide') }} {{ value.id }}
+        </button>
+      </div>
+      <div
+        v-show="!value.canHide || (value.canHide && !value.hide)"
+        class="settings-value"
+      >
+        <pre v-if="value.kind === 'json'">{{ value.json }}</pre>
+        <pre v-else-if="value.kind === 'multiline'">{{ value.data.value || value.data.default }}</pre>
+        <pre v-else-if="value.kind === 'enum'">{{ t(value.enum) }}</pre>
+        <pre v-else-if="value.data.value || value.data.default">{{ value.data.value || value.data.default }}</pre>
+        <pre
+          v-else
+          class="text-muted"
+        >&lt;{{ t('advancedSettings.none') }}&gt;</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.settings-value pre {
+  margin: 0;
+}
+.advanced-setting {
+  border: 1px solid var(--border);
+  padding: 20px;
+  border-radius: var(--border-radius);
+
+  h1 {
+    font-size: 14px;
+  }
+  h2 {
+    font-size: 12px;
+    margin-bottom: 0;
+    opacity: 0.8;
+  }
+}
+
+.header {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.title {
+  flex: 1;
+}
+
+.modified {
+  margin-left: 10px;
+  border: 1px solid var(--primary);
+  border-radius: 5px;
+  padding: 2px 10px;
+  font-size: 12px;
+}
+</style>

package/components/SortableTable/THead.vue

@@ -230,6 +230,7 @@ export default {
           data-testid="sortable-table_check_select_all"
           :indeterminate="isIndeterminate"
           :disabled="noRows || noResults"
+          :alternate-label="t('sortableTable.genericGroupCheckbox')"
         />
       </th>
       <th
@@ -269,6 +270,7 @@ export default {
           <div
             v-if="col.sort"
             class="sort"
+            aria-hidden="true"
           >
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"

package/components/SortableTable/index.vue

@@ -23,6 +23,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -58,6 +59,7 @@ export default {
     ActionDropdown,
     LabeledSelect,
     ButtonMultiAction,
+    ActionMenu,
   },
   mixins: [
     filtering,
@@ -1383,6 +1385,7 @@ export default {
                     :data-node-id="row.key"
                     :data-testid="componentTestid + '-' + i + '-checkbox'"
                     :value="selectedRows.includes(row.row)"
+                    :alternate-label="t('sortableTable.genericRowCheckbox', { item: row && row.row ? row.row.id : '' })"
                   />
                 </td>
                 <td
@@ -1468,23 +1471,16 @@ export default {
                 </template>
                 <td
                   v-if="rowActions"
-                  align="middle"
                 >
                   <slot
                     name="row-actions"
                     :row="row.row"
+                    :index="i"
                   >
-                    <ButtonMultiAction
-                      :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
-                      :ref="`actionButton${i}`"
-                      aria-haspopup="true"
-                      aria-expanded="false"
-                      :aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                    <ActionMenu
+                      :resource="row.row"
                       :data-testid="componentTestid + '-' + i + '-action-button'"
-                      :borderless="true"
-                      @click="handleActionButtonClick(i, $event)"
-                      @keyup.enter="handleActionButtonClick(i, $event)"
-                      @keyup.space="handleActionButtonClick(i, $event)"
+                      :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
                     />
                   </slot>
                 </td>
@@ -1782,7 +1778,6 @@ export default {
     min-width: 400px;
     border-radius: 5px 5px 0 0;
     outline: 1px solid var(--border);
-    overflow: hidden;
     background: var(--sortable-table-bg);
     border-radius: 4px;
 

package/components/StatusBadge.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+
+const STATUS = {
+  success: {
+    color: 'text-success',
+    icon:  'icon-checkmark'
+  },
+  warning: {
+    color: 'text-warning',
+    icon:  'icon-warning'
+  },
+  info: {
+    color: 'text-info',
+    icon:  'icon-info'
+  },
+  error: {
+    color: 'text-error',
+    icon:  'icon-error'
+  }
+};
+
+const { status = 'success', label } = defineProps<{
+  status?: 'success' | 'warning' | 'info' | 'error',
+  label?: string
+}>();
+
+</script>
+<template>
+  <div
+    class="status-badge"
+  >
+    <i
+      class="status-badge__icon icon"
+      :class="{
+        [STATUS[status].icon]: true,
+        [STATUS[status].color]: true
+      }"
+    />
+    <div
+      v-if="label"
+      class="status-badge__label"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-badge {
+  align-items: center;
+  display: inline-flex;
+  border: 1px solid;
+  border-color: var(--border);
+  margin-top: 20px;
+
+  & + & {
+    margin-left: 20px;
+  }
+
+  &__label {
+    border-left: 1px solid var(--border);
+    padding: 5px 20px;
+    color: var(--body-text);
+  }
+
+  &__icon {
+    text-align: center;
+    padding: 5px 10px;
+  }
+}
+</style>