dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -0,0 +1,123 @@
+<script lang="ts">
+import Drawer from '@shell/components/Drawer/Chrome.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
+import { computed, ref } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import StateDot from '@shell/components/StateDot/index.vue';
+
+export interface Props {
+  resource: any;
+
+  onClose?: () => void;
+}
+</script>
+<script setup lang="ts">
+const editBttnDataTestId = 'save-configuration-bttn';
+const componentTestid = 'configuration-drawer-tabbed';
+const props = defineProps<Props>();
+const emit = defineEmits(['close']);
+const store = useStore();
+const i18n = useI18n(store);
+
+const yamlTabProps = ref<YamlProps | null>(null);
+const configTabProps = useDefaultConfigTabProps(props.resource);
+
+useDefaultYamlTabProps(props.resource).then((props) => {
+  yamlTabProps.value = props;
+});
+
+const title = computed(() => {
+  const resourceType = store.getters['type-map/labelFor']({ id: props.resource.type });
+  const resourceName = props.resource.nameDisplay;
+
+  return i18n.t('component.drawer.resourceDetailDrawer.title', { resourceType, resourceName });
+});
+
+const activeTab = ref<string>(configTabProps ? 'config-tab' : 'yaml-tab');
+
+const isConfig = computed(() => {
+  return activeTab.value === 'config-tab';
+});
+
+const action = computed(() => {
+  const isConfig = activeTab.value === 'config-tab';
+  const ariaLabel = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const label = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const action = isConfig ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
+
+  return {
+    ariaLabel,
+    label,
+    action
+  };
+});
+const canEdit = computed(() => {
+  return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
+});
+</script>
+<template>
+  <Drawer
+    class="resource-detail-drawer"
+    :ariaTarget="title"
+    @close="emit('close')"
+  >
+    <template #title>
+      <StateDot
+        :color="resource.stateSimpleColor"
+        class="mmr-3"
+      />
+      {{ title }}
+    </template>
+    <template #body>
+      <Tabbed
+        class="tabbed"
+        :useHash="false"
+        :showExtensionTabs="false"
+        :componentTestid="componentTestid"
+        @changed="({selectedName}) => {activeTab = selectedName;}"
+      >
+        <ConfigTab
+          v-if="configTabProps"
+          v-bind="configTabProps"
+        />
+        <YamlTab
+          v-if="yamlTabProps"
+          v-bind="yamlTabProps"
+        />
+      </Tabbed>
+    </template>
+    <template #additional-actions>
+      <RcButton
+        v-if="canEdit"
+        :primary="true"
+        :aria-label="action.ariaLabel"
+        :data-testid="editBttnDataTestId"
+        @click="action.action"
+      >
+        {{ action.label }}
+      </RcButton>
+    </template>
+  </Drawer>
+</template>
+
+<style lang="scss" scoped>
+.resource-detail-drawer {
+  :deep() .tabbed {
+    & > .tabs {
+      border: none;
+    }
+
+    & > .tab-container {
+      border: none;
+      border-top: 1px solid var(--border);
+      padding: 0;
+      padding-top: 24px;
+    }
+  }
+}
+</style>

package/components/ExplorerProjectsNamespaces.vue

@@ -1,7 +1,9 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
 import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
-import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
+import {
+  STATE, AGE, NAME, NS_SNAPSHOT_QUOTA, DESCRIPTION
+} from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
@@ -9,13 +11,13 @@ import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
-import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import { escapeHtml } from '@shell/utils/string';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import DOMPurify from 'dompurify';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
@@ -24,7 +26,6 @@ export default {
   components: {
     ExtensionPanel,
     Masthead,
-    MoveModal,
     ResourceTable,
     ButtonMultiAction,
     ActionMenu,
@@ -89,9 +90,20 @@ export default {
       }
     };
   },
-
+  watch: {
+    actionCb: {
+      handler(neu) {
+        if (neu?.moveNamespaceCb) {
+          this.clearSelection();
+          this.$store.dispatch('action-menu/clearCallbackData');
+        }
+      },
+      immediate: true
+    }
+  },
   computed: {
     ...mapGetters(['currentCluster', 'currentProduct']),
+    ...mapGetters({ actionCb: 'action-menu/performCallbackData' }),
     namespaces() {
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
 
@@ -101,7 +113,7 @@ export default {
       return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
     },
     showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
+      return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
@@ -113,6 +125,7 @@ export default {
       const headers = [
         STATE,
         NAME,
+        DESCRIPTION
       ];
 
       if (this.groupPreference === 'none') {
@@ -427,8 +440,6 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
-
-      :main-button-visible="false"
     >
       <template
         v-if="showCreateNsButton"
@@ -462,26 +473,7 @@ export default {
       :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
-
-      :create-location="createProjectLocation"
-      :schemaBtn="projectSchema"
-      :create-button-label="t('projectNamespaces.createProject')"
-      :type-display="t('projectNamespaces.label')"
-      :resource="MANAGEMENT.PROJECT"
-      :main-button-visible="true"
     >
-      <template
-        v-if="showCreateNsButton"
-        #extraActions
-      >
-        <router-link
-          :to="createNamespaceLocationFlatList()"
-          class="btn role-primary mr-10"
-          data-testid="create_project_namespaces"
-        >
-          {{ t('projectNamespaces.createNamespace') }}
-        </router-link>
-      </template>
       <template #group-by="group">
         <div
           class="project-bar"
@@ -505,11 +497,35 @@ export default {
           <div class="right">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm mr-5"
+              class="create-namespace"
+              style="margin-bottom: 3px;"
               :to="createNamespaceLocation(group.group)"
-            >1
+            >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
+            <span v-if="showProjectActionButton(group.group)" style="margin-bottom: 3px;color: var(--link);margin-left: 20px;">|</span>
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                v-if="showProjectActionButton(group.group)"
+                :resource="getProjectActions(group.group)"
+                data-testid="action-button"
+                :showIcon="true"
+                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              />
+              <div
+                v-else
+                class="invisible"
+              />
+            </template>
+            <template v-else>
+              <ButtonMultiAction
+                class="project-action"
+                :borderless="true"
+                :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+                :invisible="!showProjectActionButton(group.group)"
+                @click="showProjectAction($event, group.group)"
+              />
+            </template>
           </div>
         </div>
       </template>
@@ -570,12 +586,12 @@ export default {
         </tr>
       </template>
     </ResourceTable>
-    <MoveModal @moving="clearSelection" />
   </div>
 </template>
 <style lang="scss" scoped>
 .invisible {
   display: inline-block;
+  min-width: 58px;
 }
 
 .project-namespaces {
@@ -589,6 +605,7 @@ export default {
     }
 
     .project-bar {
+      padding-right: 20px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

package/components/FilterPanel.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { DefineComponent } from 'vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+/**
+ * Generic type for the passed components as props
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentType = DefineComponent<any, any, any>;
+
+/**
+ * A single filter option for a group (e.g., a single checkbox).
+ */
+type FilterOption = {
+  /** Value to apply when selected */
+  value?: string;
+  /** Optional custom component to render for this option (e.g., link or button) */
+  component?: ComponentType;
+  /** Props passed to the custom component */
+  componentProps?: Record<string, unknown>;
+  /** Label to show next to the checkbox, or a custom component next to the checkbox */
+  label?: string | { component: ComponentType; componentProps: Record<string, unknown>; };
+};
+
+/**
+ * A group of filter options (e.g., Repositories, Categories).
+ */
+type FilterGroup = {
+  /** Key that maps to the filters object (e.g., 'repos', 'categories') */
+  key: string;
+  /** Title for the filter group */
+  title: string;
+  /** The available options within this group */
+  options: FilterOption[];
+};
+
+/**
+ * Props accepted by the filter panel.
+ */
+const props = defineProps<{
+  /** Two-way bound filters */
+  modelValue: Record<string, string[]>;
+  /** The list of filter groups to display */
+  filters: FilterGroup[];
+}>();
+
+/**
+ * Event emitted by the component.
+ */
+const emit = defineEmits<{(e: 'update:modelValue', val: Record<string, string[]>): void;}>();
+
+/**
+ * Handles updating the selected filters for a given filter group key.
+ *
+ * @param key - The key of the filter group being updated (e.g., 'tags').
+ * @param value - The updated list of selected values (e.g. ['monitoring', 'networking']).
+ */
+const updateFilter = (key: string, value: string[]) => {
+  const newValue = { ...props.modelValue, [key]: value };
+
+  emit('update:modelValue', newValue);
+};
+
+</script>
+
+<template>
+  <div class="filter-panel">
+    <div
+      v-for="filter in filters"
+      :key="filter.key"
+      class="filter-panel-filter-group"
+      data-testid="filter-panel-filter-group"
+    >
+      <h4 class="filter-panel-filter-group-title">
+        {{ filter.title }}
+      </h4>
+      <div
+        v-for="(option, i) in filter.options"
+        :key="`${filter.key}-${i}`"
+        class="filter-panel-filter-option"
+      >
+        <template v-if="option.component">
+          <component
+            :is="option.component"
+            v-bind="option.componentProps"
+            data-testid="filter-panel-custom-component"
+          />
+        </template>
+        <template v-else-if="option.label">
+          <Checkbox
+            :key="i"
+            class="filter-panel-filter-checkbox"
+            :label="typeof option.label === 'string' ? option.label : undefined"
+            :value="modelValue[filter.key]"
+            :value-when-true="option.value"
+            data-testid="filter-panel-filter-checkbox"
+            @update:value="updateFilter(filter.key, $event)"
+          >
+            <template #label>
+              <span v-if="typeof option.label === 'string'">{{ option.label }}</span>
+              <component
+                :is="option.label.component"
+                v-else
+                v-bind="option.label.componentProps"
+              />
+            </template>
+          </Checkbox>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.filter-panel {
+  display: flex;
+  min-width: 250px;
+  height: max-content;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: var(--sortable-table-header-bg);
+
+  &-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+
+    &-title {
+      margin-bottom: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 23px;
+    }
+  }
+
+  &-filter-option {
+    width: 100%;
+
+    .filter-panel-filter-checkbox {
+
+      .checkbox-label span {
+        max-width: 200px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        color: var(--link-text-secondary);
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>

package/components/FixedBanner.vue

@@ -164,7 +164,7 @@ export default {
       class="banner"
       data-testid="fixed__banner"
       :style="bannerStyle"
-      :class="{'banner-consent': consent}"
+      :class="{'banner-consent': consent, 'banner-text': !!banner.text}"
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
@@ -177,11 +177,16 @@ export default {
         </div>
       </div>
       <div
-        v-else
+        v-else-if="banner.text"
         class="single-row"
       >
         {{ banner.text }}
       </div>
+      <div
+        v-else-if="banner.html"
+        v-clean-html="banner.html"
+        class="single-row"
+      />
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -205,13 +210,19 @@ export default {
               </div>
             </div>
             <div
-              v-else
+              v-else-if="banner.text"
               class="single-row"
             >
               {{ banner.text }}
             </div>
+            <div
+              v-else-if="banner.html"
+              v-clean-html="banner.html"
+              class="single-row"
+            />
           </div>
           <button
+            data-testid="login-confirmation-accept-button"
             class="btn role-primary"
             @click="hideDialog()"
           >
@@ -225,10 +236,13 @@ export default {
 
 <style lang="scss" scoped>
   .banner {
-    text-align: center;
     line-height: 2em;
     width: 100%;
-    padding: 0 20px;
+
+    &.banner-text {
+      padding: 0 20px;
+      text-align: center;
+    }
 
     &.banner-consent {
       height: unset;

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);
       }