dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/{fleet/ForceDirectedTreeChart/index.vue → ForceDirectedTreeChart.vue}

@@ -2,7 +2,6 @@
 import * as d3 from 'd3';
 import { STATES } from '@shell/plugins/dashboard-store/resource-class';
 import { BadgeState } from '@components/BadgeState';
-import { getChartIcon } from './chartIcons.js';
 
 export default {
   name:       'ForceDirectedTreeChart',
@@ -17,8 +16,24 @@ export default {
       required: true
     }
   },
+
+  async fetch() {
+    this.canViewChart = await this.fdcConfig.checkSchemaPermissions(this.$store);
+
+    if (this.canViewChart) {
+      // set watcher for the chart data
+      this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, (newValue) => {
+        this.watcherFunction(newValue);
+      }, {
+        deep:      true,
+        immediate: true
+      });
+    }
+  },
+
   data() {
     return {
+      canViewChart:                        null,
       dataWatcher:                         undefined,
       parsedInfo:                          undefined,
       root:                                undefined,
@@ -37,7 +52,7 @@ export default {
   },
   methods: {
     watcherFunction(newValue) {
-      if (newValue.length) {
+      if (newValue?.length) {
         if (!this.isChartFirstRendered) {
           this.parsedInfo = this.fdcConfig.parseData(this.data);
 
@@ -158,16 +173,11 @@ export default {
         .attr('r', this.setNodeRadius);
 
       nodeEnter.append('circle')
-        .attr('r', (d) => {
-          return this.setNodeRadius(d) - 5;
-        })
+        .attr('r', (d) => this.setNodeRadius(d) - 5)
         .attr('class', 'node-hover-layer');
 
-      nodeEnter.append('svg').html((d) => {
-        const icon = this.fdcConfig.fetchNodeIcon(d);
-
-        return getChartIcon(icon);
-      })
+      nodeEnter.append('svg')
+        .html((d) => this.fdcConfig.fetchNodeIcon(d))
         .attr('x', this.nodeImagePosition)
         .attr('y', this.nodeImagePosition)
         .attr('height', this.nodeImageSize)
@@ -177,9 +187,7 @@ export default {
 
       this.simulation.nodes(this.allNodesData);
       this.simulation.force('link', d3.forceLink()
-        .id((d) => {
-          return d.id;
-        })
+        .id((d) => d.id)
         .distance(100)
         .links(this.allLinks)
       );
@@ -188,10 +196,10 @@ export default {
       const lowerCaseStatus = d.data?.state ? d.data.state.toLowerCase() : 'unkown_status';
       const defaultClassArray = ['node'];
 
-      if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) {
-        defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`);
-      } else {
+      if (d?.data?.muteStatus) {
         defaultClassArray.push(`node-default-fill`);
+      } else if (STATES[lowerCaseStatus] && STATES[lowerCaseStatus].color) {
+        defaultClassArray.push(`node-${ STATES[lowerCaseStatus].color }`);
       }
 
       // node active (clicked)
@@ -334,14 +342,6 @@ export default {
     this.svg = d3.select('#tree').append('svg')
       .attr('viewBox', `0 0 ${ this.fdcConfig.chartWidth } ${ this.fdcConfig.chartHeight }`)
       .attr('preserveAspectRatio', 'none');
-
-    // set watcher for the chart data
-    this.dataWatcher = this.$watch(this.fdcConfig.watcherProp, function(newValue) {
-      this.watcherFunction(newValue);
-    }, {
-      deep:      true,
-      immediate: true
-    });
   },
   unmounted() {
     this.dataWatcher();
@@ -353,20 +353,26 @@ export default {
   <div>
     <div
       class="chart-container"
-      data-testid="gitrepo_graph"
+      data-testid="resource-graph"
     >
       <!-- loading status container -->
       <div
         v-if="!isChartFirstRenderAnimationFinished"
         class="loading-container"
       >
-        <p v-show="!isChartFirstRendered">
-          {{ t('fleet.fdc.loadingChart') }}
+        <p v-if="canViewChart === false">
+          {{ t('graph.noPermissions') }}
+        </p>
+        <p v-else-if="!isChartFirstRendered">
+          {{ t('graph.loading') }}
         </p>
-        <p v-show="isChartFirstRendered && !isChartFirstRenderAnimationFinished">
-          {{ t('fleet.fdc.renderingChart') }}
+        <p v-else-if="!isChartFirstRenderAnimationFinished">
+          {{ t('graph.rendering') }}
         </p>
-        <i class="mt-10 icon-spinner icon-spin" />
+        <i
+          v-if="canViewChart !== false"
+          class="mt-10 icon-spinner icon-spin"
+        />
       </div>
       <!-- main div for svg container -->
       <div id="tree" />
@@ -416,6 +422,9 @@ export default {
               >
                 <p>{{ item.value }}</p>
               </td>
+              <td v-else-if="item.type === 'resource-type'">
+                {{ t(`typeLabel."${ item.valueKey }"`, { count: 1 }) }}
+              </td>
               <!-- default template -->
               <td v-else>
                 {{ item.value }}
@@ -478,32 +487,29 @@ export default {
         }
       }
 
-      &.repo.active > circle {
-        transform: scale(1.2);
-      }
-
       &.bundle.active > circle {
         transform: scale(1.35);
       }
 
-      &.bundle-deployment.active > circle {
+      &.bundledeployment.active > circle {
         transform: scale(1.6);
       }
 
-      &.node-default-fill > circle,
-      &.repo > circle {
+      &.node-default-fill > circle {
+        transform: scale(1.2);
         fill: var(--muted);
       }
-      &:not(.repo).node-success > circle {
+
+      &.node-success > circle {
         fill: var(--success);
       }
-      &:not(.repo).node-info > circle {
+      &.node-info > circle {
         fill: var(--info);
       }
-      &:not(.repo).node-warning > circle {
+      &.node-warning > circle {
         fill: var(--warning);
       }
-      &:not(.repo).node-error > circle {
+      &.node-error > circle {
         fill: var(--error);
       }
 

package/components/GlobalRoleBindings.vue

@@ -103,6 +103,8 @@ export default {
         this.sortedRoles.global.push(...remainingGlobalRoles);
         // End sort of global roles
 
+        delete this.sortedRoles.builtin
+
         this.update();
       }
     } catch (e) { }
@@ -426,4 +428,5 @@ export default {
       }
     }
   }
+
 </style>

package/components/GrowlManager.vue

@@ -27,10 +27,18 @@ export default {
 
   methods: {
     translateError,
-    close(growl) {
+    remove(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
 
+    close(growl) {
+      this.$store.dispatch('growl/close', growl.id);
+
+      // If a user closes a growl, we won't get the mouse leave event, so we won't start the auto removal
+      // again, leaving to stuck growls that should timeout
+      this.startAutoRemove();
+    },
+
     closeAll() {
       this.$store.dispatch('growl/clear');
     },
@@ -38,13 +46,18 @@ export default {
     closeExpired() {
       const now = new Date().getTime();
 
+      // Check that we should still be running the auto-close interval timer
+      if (!this.shouldRun) {
+        this.stopAutoRemove();
+      }
+
       for ( const growl of this.stack ) {
         if ( !growl.timeout ) {
           continue;
         }
 
         if ( growl.started + growl.timeout < now ) {
-          this.close(growl);
+          this.remove(growl);
         }
       }
     },
@@ -126,18 +139,6 @@ export default {
         </div>
       </div>
     </div>
-    <div
-      v-if="stack.length > 1"
-      class="text-right mr-10 mt-10"
-    >
-      <button
-        type="button"
-        class="btn btn-sm role-primary"
-        @click="closeAll()"
-      >
-        {{ t('growl.clearAll') }}
-      </button>
-    </div>
   </div>
 </template>
 
@@ -145,7 +146,7 @@ export default {
   .growl-container {
     z-index: 1000;
     position: absolute;
-    top: 0;
+    top: var(--header-height);
     right: 0;
     width: 100%;
 

package/components/IconOrSvg.vue

@@ -44,6 +44,10 @@ export default {
       type:    String,
       default: () => undefined,
     },
+    imgAlt: {
+      type:    String,
+      default: () => undefined,
+    },
     color: {
       type:    String,
       default: () => 'primary',
@@ -61,41 +65,16 @@ export default {
   },
 
   methods: {
+    getComputedStyleFor(cssVar) {
+      return normalizeHex(mapStandardColors((window.getComputedStyle(document.body).getPropertyValue(cssVar)).trim()));
+    },
+
     setColor() {
-      const currTheme = this.$store.getters['prefs/theme'];
-      let uiColor, hoverColor;
-
-      // grab css vars values based on the actual stylesheets, depending on the theme applied
-      // use for loops to minimize computation
-      for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
-        let found = false;
-        const stylesheet = document.styleSheets[i];
-
-        if (stylesheet && stylesheet.cssRules) {
-          for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
-            const cssRules = stylesheet.cssRules[x];
-
-            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
-              cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
-              (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
-              // grab the colors to be used on the icon from the css rules
-              uiColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].color).trim());
-              hoverColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].hover).trim());
-
-              // normalize hex colors (#xxx to #xxxxxx)
-              uiColor = normalizeHex(uiColor);
-              hoverColor = normalizeHex(hoverColor);
-
-              found = true;
-              break;
-            }
-          }
-        }
-        if (found) {
-          break;
-        } else {
-          continue;
-        }
+      const uiColor = this.getComputedStyleFor(colors[this.color].color);
+      const hoverColor = this.getComputedStyleFor(colors[this.color].hover);
+
+      if (!uiColor || !hoverColor) {
+        return;
       }
 
       const uiColorRGB = colorToRgb(uiColor);
@@ -142,7 +121,11 @@ export default {
           }
           a.option:hover > img.${ className } {
             ${ hoverFilter };
-          }      `;
+          }
+          a.option.active-menu-link > img.${ className } {
+            ${ hoverFilter };
+          }
+        `;
 
         const styleSheet = document.createElement('style');
 
@@ -164,6 +147,7 @@ export default {
     :src="src"
     class="svg-icon"
     :class="className"
+    :alt="imgAlt"
   >
   <i
     v-else-if="icon"

package/components/IndentedPanel.vue

@@ -4,23 +4,17 @@ export default {};
 
 <template>
   <div
-    class="indented-panel"
+    class="indented-panels"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panel {
+  .indented-panels {
     height: 100%;
-    width: 90%;
-    margin-left: 5%;
+    width: 100%;
+    padding: 0 20px;
   }
 
-  @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-    .indented-panel {
-      margin: 0 20px;
-      width: initial;
-    }
-  }
 </style>

package/components/KeyValueView.vue

@@ -225,7 +225,7 @@ export default {
 .key-value {
   width: 100%;
 
-  .kv-container{
+  .kv-container {
     display: grid;
     align-items: center;
     grid-template-columns: auto 1fr;

package/components/LandingPagePreference.vue

@@ -108,6 +108,7 @@ export default {
       :value="afterLoginRoute"
       name="login-route"
       :options="routeRadioOptions"
+      :aria-label="`${t('prefs.landing.label')} - ${ t('landing.landingPrefs.body')}`"
       @update:value="updateLoginRoute"
     >
       <template #label>
@@ -119,6 +120,7 @@ export default {
         <div class="custom-page">
           <RadioButton
             :label="option.label"
+            :radio-option-id="option.radioOptionId"
             :val="false"
             :value="afterLoginRoute=== 'home' || afterLoginRoute === 'last-visited'"
             :v-bind="$attrs"

package/components/Loading.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
   .overlay {
     align-items: center;
-    background-color: var(--overlay-bg);
+    background-color: var(--subtle-overlay-bg);
     display: flex;
     justify-content: center;
     position: absolute;

package/components/LocaleSelector.vue

@@ -4,7 +4,7 @@ import Select from '@shell/components/form/Select.vue';
 import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
 
 export default {
-  name: 'LocalSelector',
+  name: 'LocaleSelector',
 
   components: {
     Select,
@@ -71,7 +71,12 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <rc-dropdown v-if="showLocale">
+      <rc-dropdown
+        v-if="showLocale"
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
+      >
         <rc-dropdown-trigger
           data-testid="locale-selector"
           link
@@ -105,6 +110,9 @@ export default {
     </div>
     <div v-else>
       <Select
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
         :value="selectedOption"
         :options="localesOptions"
         :is-lang-select="true"

package/components/PaginatedResourceTable.vue

@@ -36,6 +36,35 @@ export default defineComponent({
       default: null,
     },
 
+    groupTooltip: {
+      type:    String,
+      default: 'resourceTable.groupBy.namespace',
+    },
+
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key (or also use groupSort)
+     */
+    groupBy: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * Field to order groups by, defaults to groupBy
+     */
+    groupSort: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
@@ -58,6 +87,14 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Use this store instead of the store `inStore` getters
+     */
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
     /**
      * Information may be required from resources other than the primary one shown per row
      *
@@ -79,7 +116,7 @@ export default defineComponent({
 
   async fetch() {
     const promises = [
-      this.$fetchType(this.resource, [], this.inStore),
+      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
     ];
 
     if (this.fetchSecondaryResources) {
@@ -95,6 +132,12 @@ export default defineComponent({
 
       return customHeaders || this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     }
+  },
+
+  methods: {
+    clearSelection() {
+      this.$refs.table.clearSelection();
+    },
   }
 });
 
@@ -103,18 +146,27 @@ export default defineComponent({
 <template>
   <div>
     <ResourceTable
+      ref="table"
       v-bind="$attrs"
       :schema="schema"
       :rows="rows"
       :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
+
+      :group-by="groupBy"
+      :group-sort="groupSort"
       :groupable="groupable"
+      :groupTooltip="groupTooltip"
+      :groupOptions="groupOptions"
+
+      :override-in-store="overrideInStore"
 
       :headers="safeHeaders"
       :namespaced="namespaced"
 
       :external-pagination-enabled="canPaginate"
       :external-pagination-result="paginationResult"
+
       @pagination-changed="paginationChanged"
     >
       <!-- Pass down templates provided by the caller -->

package/components/PodSecurityAdmission.vue

@@ -216,9 +216,9 @@ export default defineComponent({
     <div
       v-for="(psaControl, level, i) in psaControls"
       :key="i"
-      class="row row--y-center mb-20"
+      class="row row--y-center"
     >
-      <span class="col">
+      <span class="col span-1">
         <Checkbox
           v-if="!labelsAlwaysActive"
           v-model:value="psaControl.active"

package/components/ProgressBarMulti.vue

@@ -122,6 +122,7 @@ function toPercent(value, min, max) {
     v-trim-whitespace
     :class="{progress: true, multi: pieces.length > 1}"
     :aria-label="ariaLabelText"
+    role="progressbar"
   >
     <div
       v-for="(piece, idx) of pieces"

package/components/PromptModal.vue

@@ -22,7 +22,6 @@ export default {
 
   computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
-
     resources() {
       let resources = this.modalData?.resources;
 
@@ -32,11 +31,28 @@ export default {
 
       return resources || [];
     },
-
+    testId() {
+      return this.modalData?.testId || 'prompt-modal-generic-testid';
+    },
+    returnFocusSelector() {
+      return this.modalData?.returnFocusSelector || undefined;
+    },
+    returnFocusFirstIterableNodeSelector() {
+      return this.modalData?.returnFocusFirstIterableNodeSelector || undefined;
+    },
     modalWidth() {
       // property set from workload.js to overwrite modal default width of 600px, with fallback value as well
       return this.modalData?.modalWidth || '610px';
     },
+    customClass() {
+      return this.modalData?.customClass || undefined;
+    },
+    styles() {
+      return this.modalData?.styles || undefined;
+    },
+    height() {
+      return this.modalData?.height || undefined;
+    },
     component() {
       // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
       return this.$store.getters['type-map/importDialog'](this.modalData?.component);
@@ -52,6 +68,9 @@ export default {
     },
     closeOnClickOutside() {
       return this.modalData?.closeOnClickOutside;
+    },
+    modalName() {
+      return this.modalData?.modalName;
     }
   },
 
@@ -67,13 +86,18 @@ export default {
       // so that we know when the component is rendered
       this.componentRendered = true;
     },
-    close() {
+    close(data) {
       if (!this.opened) {
         return;
       }
 
       this.errors = [];
-      this.$store.commit('action-menu/togglePromptModal');
+
+      // Guard against events that can be implicitly passed by components
+      const modalData = data instanceof Event ? undefined : data;
+
+      this.$store.commit('action-menu/togglePromptModal', modalData);
+
       if (this.backgroundClosing) {
         this.backgroundClosing();
       }
@@ -93,11 +117,18 @@ export default {
 <template>
   <app-modal
     v-if="opened && component"
+    :name="modalName"
     :click-to-close="closeOnClickOutside"
     :width="modalWidth"
-    :trigger-focus-trap-watcher-based="true"
+    :data-testid="testId"
+    :custom-class="customClass"
+    :styles="styles"
+    :height="height"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
     :focus-trap-watcher-based-variable="componentRendered"
-    @close="close()"
+    @close="close"
   >
     <component
       v-bind="modalData.componentProps || {}"
@@ -105,7 +136,7 @@ export default {
       :resources="resources"
       :register-background-closing="registerBackgroundClosing"
       @vue:mounted="onSlotComponentMounted"
-      @close="close()"
+      @close="close"
     />
   </app-modal>
 </template>