@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/components/SlideInPanelManager.vue

@@ -1,11 +1,16 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
+import {
+  DEFAULT_FOCUS_TRAP_OPTS,
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded
+} from '@shell/composables/focusTrap';
 
 const HEADER_HEIGHT = 55;
 
 const store = useStore();
 const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
+const isClosing = computed(() => store.getters['slideInPanel/isClosing']);
 const currentComponent = computed(() => store.getters['slideInPanel/component']);
 const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
 
@@ -23,8 +28,61 @@ const panelTop = computed(() => {
 const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
 const panelWidth = computed(() => currentProps?.value?.width || '33%');
 const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
-
-const panelTitle = computed(() => currentProps?.value?.title || 'Details');
+const panelZIndex = computed(() => `${ (isOpen?.value ? 1 : 2) * (currentProps?.value?.zIndex ?? 1000) }`);
+
+const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
+const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+
+watch(
+  /**
+   * trigger focus trap
+   */
+  () => currentProps?.value?.triggerFocusTrap,
+  (neu) => {
+    if (neu) {
+      const opts = {
+        ...DEFAULT_FOCUS_TRAP_OPTS,
+        /**
+         * will return focus to the first iterable node of this container select
+         */
+        setReturnFocus: () => {
+          const returnFocusSelector = currentProps?.value?.returnFocusSelector;
+
+          if (returnFocusSelector && !document.querySelector(returnFocusSelector)) {
+            console.warn('SlideInPanelManager: cannot find elem with "returnFocusSelector", returning focus to main view'); // eslint-disable-line no-console
+
+            return '.dashboard-root';
+          }
+
+          return returnFocusSelector || '.dashboard-root';
+        }
+      };
+
+      useWatcherBasedSetupFocusTrapWithDestroyIncluded(
+        () => {
+          if (currentProps?.value?.focusTrapWatcherBasedVariable) {
+            return currentProps.value.focusTrapWatcherBasedVariable;
+          }
+
+          return isOpen?.value && !isClosing?.value;
+        },
+        '#slide-in-panel-manager',
+        opts,
+        false
+      );
+    }
+  }
+);
+
+watch(
+  () => (store as any).$router?.currentRoute,
+  () => {
+    if (isOpen?.value && currentProps?.value.closeOnRouteChange !== false) {
+      closePanel();
+    }
+  },
+  { deep: true }
+);
 
 function closePanel() {
   store.commit('slideInPanel/close');
@@ -33,7 +91,10 @@ function closePanel() {
 
 <template>
   <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
+    <div
+      id="slide-in-panel-manager"
+      @keydown.escape="closePanel"
+    >
       <div
         v-show="isOpen"
         data-testid="slide-in-glass"
@@ -44,9 +105,18 @@ function closePanel() {
       <div
         class="slide-in"
         :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
+        :style="{
+          width: panelWidth,
+          right: panelRight,
+          top: panelTop,
+          height: panelHeight,
+          ['z-index']: panelZIndex
+        }"
       >
-        <div class="header">
+        <div
+          v-if="showHeader"
+          class="header"
+        >
           <div class="title">
             {{ panelTitle }}
           </div>
@@ -84,7 +154,6 @@ function closePanel() {
   background-color: var(--body-bg);
   display: block;
   opacity: 0.5;
-  z-index: 1000;
 }
 
 .slide-in {
@@ -92,7 +161,6 @@ function closePanel() {
   flex-direction: column;
   position: fixed;
   top: 0;
-  z-index: 2000;
   transition: right 0.5s ease;
   border-left: 1px solid var(--border);
   background-color: var(--body-bg);

package/components/SortableTable/index.vue

@@ -64,6 +64,7 @@ export default {
     ActionMenu,
     ActionDropdownShell,
   },
+
   mixins: [
     filtering,
     sorting,
@@ -378,8 +379,17 @@ export default {
     manualRefreshButtonSize: {
       type:    String,
       default: ''
-    }
+    },
 
+    /**
+     * Usually the manual refresh button is controlled via isTooManyItemsToAutoUpdate
+     *
+     * However this is singular on page. In some places there's more than one...
+     */
+    hideManualRefreshButton: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   data() {
@@ -1196,9 +1206,10 @@ export default {
               <div class="bg" />
             </li>
           </ul>
+          <slot name="watch-controls" />
           <slot name="header-right" />
           <AsyncButton
-            v-if="isTooManyItemsToAutoUpdate"
+            v-if="!hideManualRefreshButton && isTooManyItemsToAutoUpdate"
             mode="manual-refresh"
             :size="manualRefreshButtonSize"
             :current-phase="refreshButtonPhase"

package/components/SortableTable/selection.js

@@ -127,25 +127,38 @@ export default {
   },
 
   watch: {
-    // On page change
+    /**
+     * Handle changes to the page (SSP enabled)
+     */
+    externalPaginationResult() {
+      // Handle changes to the page (SSP enabled)
+      this.pageChanged(this.pagedRows);
+    },
+
+    /**
+     * Handle changes to the page (SSP disabled)
+     */
     pagedRows() {
-      // When the table contents changes:
-      // - Remove items that are in the selection but no longer in the table.
+      this.pageChanged(this.pagedRows);
+    }
+  },
 
-      const content = this.pagedRows;
+  methods: {
+    /**
+     * Remove items that are in the selection but no longer in the table.
+     */
+    pageChanged(page) {
       const toRemove = [];
 
       for (const node of this.selectedRows) {
-        if (!content.includes(node) ) {
+        if (!page.includes(node) ) {
           toRemove.push(node);
         }
       }
 
       this.update([], toRemove);
-    }
-  },
+    },
 
-  methods: {
     onToggleAll(value) {
       if ( value ) {
         this.update(this.pagedRows, []);

package/components/StatusBadge.vue

@@ -19,11 +19,13 @@ const STATUS = {
   }
 };
 
+export interface Props {
+  status?: 'success' | 'warning' | 'info' | 'error',
+  label?: string
+}
+
 withDefaults(
-  defineProps<{
-    status?: 'success' | 'warning' | 'info' | 'error',
-    label?: string
-  }>(),
+  defineProps<Props>(),
   {
     status: 'success',
     label:  '',

package/components/SubtleLink.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { RouterLink, RouteLocationRaw } from 'vue-router';
+
+export interface Props {
+  to: RouteLocationRaw;
+}
+
+const { to } = defineProps<Props>();
+</script>
+
+<template>
+  <RouterLink
+    class="subtle-link"
+    :to="to"
+  >
+    <slot name="default" />
+  </RouterLink>
+</template>
+
+<style lang="scss" scoped>
+.subtle-link {
+    text-decoration: underline;
+    color: var(--body-text);
+}
+</style>

package/components/Wizard.vue

@@ -1,5 +1,5 @@
 <script>
-
+import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
@@ -56,6 +56,11 @@ export default {
       required: true
     },
 
+    mode: {
+      type:    String,
+      default: _CREATE
+    },
+
     // Initial step to show when Wizard loads.
     initStepIndex: {
       type:    Number,
@@ -121,6 +126,11 @@ export default {
   },
 
   computed: {
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
     errorStrings() {
       return ( this.errors || [] ).map((x) => stringify(x));
     },
@@ -461,6 +471,7 @@ export default {
               :finish="finish"
             >
               <AsyncButton
+                v-if="!isView"
                 :disabled="!activeStep.ready"
                 :mode="finishMode"
                 @click="finish"

package/components/YamlEditor.vue

@@ -203,7 +203,7 @@ export default {
 
     updateValue(value) {
       this.curValue = value;
-      this.$refs.cm.updateValue(value);
+      this.$refs.cm?.updateValue(value);
     }
   }
 };

package/components/__tests__/FilterPanel.test.ts

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import FilterPanel from '@shell/components/FilterPanel.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+const filters = [
+  {
+    key:     'status',
+    title:   'Status',
+    options: [
+      { label: 'Installed', value: 'installed' },
+      { label: 'Deprecated', value: 'deprecated' }
+    ]
+  },
+  {
+    key:     'repos',
+    title:   'Repository',
+    options: [
+      { label: 'Repo A', value: 'repo-a' },
+      { label: 'Repo B', value: 'repo-b' }
+    ]
+  }
+];
+
+describe('component: FilterPanel', () => {
+  it('renders all filter groups and options with correct labels', () => {
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: {},
+        filters
+      }
+    });
+
+    expect(wrapper.findAll('.filter-panel-filter-group-title')).toHaveLength(2);
+    expect(wrapper.text()).toContain('Status');
+    expect(wrapper.text()).toContain('Repository');
+    expect(wrapper.text()).toContain('Installed');
+    expect(wrapper.text()).toContain('Repo A');
+    expect(wrapper.text()).toContain('Repo B');
+  });
+
+  it('emits update:modelValue when a new status is added via checkbox emit', async() => {
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: { status: ['installed'] },
+        filters
+      }
+    });
+
+    const checkboxes = wrapper.findAllComponents(Checkbox);
+    const deprecatedCheckbox = checkboxes.find((c) => c.props('label') === 'Deprecated');
+
+    expect(deprecatedCheckbox).toBeTruthy();
+
+    deprecatedCheckbox?.vm.$emit('update:value', ['installed', 'deprecated']);
+    await wrapper.vm.$nextTick();
+
+    const emitted = wrapper.emitted('update:modelValue');
+
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0][0].status).toStrictEqual(['installed', 'deprecated']);
+  });
+
+  it('renders a custom component if provided in option', () => {
+    const CustomComponent = { template: '<div>Custom content</div>' };
+
+    const wrapper = mount(FilterPanel, {
+      props: {
+        modelValue: {},
+        filters:    [
+          {
+            key:     'custom',
+            title:   'Custom Filters',
+            options: [{ component: CustomComponent }]
+          }
+        ]
+      }
+    });
+
+    expect(wrapper.text()).toContain('Custom content');
+  });
+});

package/components/auth/AuthBanner.vue

@@ -98,9 +98,8 @@ export default {
 }
 
 .values {
-  tr td:not(:first-of-type) {
-    padding-left: 10px;
-  }
+  border-spacing: 8px 8px;  // Add spacing between columns and rows
+  margin-left: -8px; // Move the table back to the left, to compensate for the spacing from above on the left-hand column
 }
 
 </style>

package/components/auth/RoleDetailEdit.vue

@@ -18,6 +18,7 @@ import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import Loading from '@shell/components/Loading';
+import Banner from '@components/Banner/Banner.vue';
 
 const GLOBAL = SUBTYPE_MAPPING.GLOBAL.key;
 const CLUSTER = SUBTYPE_MAPPING.CLUSTER.key;
@@ -64,7 +65,8 @@ export default {
     SortableTable,
     Loading,
     Error,
-    LabeledInput
+    LabeledInput,
+    Banner,
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -497,7 +499,8 @@ export default {
           index:           i,
           apiGroups:       rule.apiGroups || [''],
           resources:       rule.resources || [],
-          nonResourceURLs: rule.nonResourceURLs || []
+          nonResourceURLs: rule.nonResourceURLs || [],
+          verbs:           rule.verbs,
         };
 
         VERBS.forEach((verb) => {
@@ -531,6 +534,13 @@ export default {
 
       return res;
     },
+
+    showPsaWarning(grant) {
+      return this.value.subtype === NAMESPACE &&
+        grant.verbs?.includes('updatepsa') &&
+        grant.resources?.includes('projects') &&
+        grant.apiGroups?.includes('management.cattle.io');
+    }
   }
 };
 </script>
@@ -558,7 +568,28 @@ export default {
         :table-actions="false"
         :row-actions="false"
         :search="false"
-      />
+        :sub-rows="true"
+      >
+        <template #sub-row="{row, fullColspan, onRowMouseEnter, onRowMouseLeave}">
+          <tr
+
+            class="sub-row"
+            @mouseenter="onRowMouseEnter"
+            @mouseleave="onRowMouseLeave"
+          >
+            <td
+              v-if="showPsaWarning(row)"
+              :colspan="fullColspan"
+            >
+              <Banner
+                style="margin: 0px"
+                label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                color="warning"
+              />
+            </td>
+          </tr>
+        </template>
+      </SortableTable>
       <div
         v-for="(inherited, index) of inheritedRules"
         :key="index"
@@ -732,6 +763,17 @@ export default {
                 </div>
               </div>
             </template>
+            <template #value-sub-row="{row}">
+              <div
+                v-if="showPsaWarning(row.value)"
+                class="mr-20"
+              >
+                <Banner
+                  label-key="rbac.roletemplate.tabs.grantResources.psaWarning"
+                  color="warning"
+                />
+              </div>
+            </template>
           </ArrayList>
         </Tab>
         <Tab

package/components/auth/login/oidc.vue

@@ -6,7 +6,12 @@ export default {
 
   computed: {
     uniqueDisplayName() {
-      return this.t('model.authConfig.description.oidc');
+      switch (this.name) {
+      case 'cognito':
+        return this.t('model.authConfig.description.cognito');
+      default:
+        return this.t('model.authConfig.description.oidc');
+      }
     },
   },
 

package/components/fleet/FleetApplications.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import { checkPermissions } from '@shell/utils/auth';
+import { FLEET } from '@shell/config/types';
+import { Application } from '@shell/types/fleet';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import FleetIntro from '@shell/components/fleet/FleetIntro.vue';
+import {
+  AGE,
+  NAME,
+  STATE,
+  FLEET_APPLICATION_TYPE,
+  FLEET_APPLICATION_SOURCE,
+  FLEET_APPLICATION_TARGET,
+  FLEET_APPLICATION_CLUSTERS_READY,
+  FLEET_APPLICATION_RESOURCES_SUMMARY,
+} from '@shell/config/table-headers';
+
+interface Permissions {
+  gitRepos: boolean,
+  helmOps: boolean,
+}
+
+interface DataType {
+  permissions: Permissions
+}
+
+export default {
+  name: 'FleetApplications',
+
+  components: {
+    FleetIntro,
+    ResourceTable,
+  },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    workspace: {
+      type:    String,
+      default: ''
+    },
+
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
+
+    rows: {
+      type:     Array as PropType<Application[]>,
+      required: true,
+    },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
+
+    useQueryParamsForSimpleFiltering: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIntro: {
+      type:    Boolean,
+      default: true,
+    }
+  },
+
+  async fetch() {
+    try {
+      const permissionsSchemas = {
+        gitRepos: {
+          type:            FLEET.GIT_REPO,
+          schemaValidator: (schema: any) => schema.resourceMethods.includes('PUT')
+        },
+        helmOps: {
+          type:            FLEET.HELM_OP,
+          schemaValidator: (schema: any) => schema.resourceMethods.includes('PUT')
+        },
+      };
+
+      const permissions = await checkPermissions(permissionsSchemas, this.$store.getters) as Permissions;
+
+      this.permissions = permissions;
+    } catch (e) {
+      console.error(e); // eslint-disable-line no-console
+    }
+  },
+
+  data(): DataType {
+    return {
+      permissions: {
+        gitRepos: true,
+        helmOps:  true
+      }
+    };
+  },
+
+  computed: {
+    createLocation() {
+      return { name: 'c-cluster-fleet-application-create' };
+    },
+
+    filteredRows() {
+      if (!this.rows) {
+        return [];
+      }
+
+      const selectedNamespaces = this.$store.getters['namespaces']();
+
+      return this.rows.filter((row) => {
+        if (this.workspace) {
+          return this.workspace === row.metadata.namespace;
+        }
+
+        return !!selectedNamespaces[row.metadata.namespace];
+      });
+    },
+
+    isClusterView() {
+      return !!this.clusterId;
+    },
+
+    shouldShowIntro() {
+      return this.showIntro && !this.filteredRows.length;
+    },
+
+    headers() {
+      return [
+        STATE,
+        NAME,
+        FLEET_APPLICATION_TYPE,
+        FLEET_APPLICATION_SOURCE,
+        FLEET_APPLICATION_TARGET,
+        FLEET_APPLICATION_CLUSTERS_READY,
+        FLEET_APPLICATION_RESOURCES_SUMMARY,
+        AGE
+      ];
+    },
+  },
+
+  methods: {
+    getDetailLocation(row: Application) {
+      return row._detailLocation;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <FleetIntro
+      v-if="shouldShowIntro && !loading"
+      :schema="schema"
+      :is-creatable="permissions.gitRepos || permissions.helmOps"
+      :labelKey="'application'"
+      :route="createLocation"
+      :icon="'icon-repository'"
+    />
+    <ResourceTable
+      v-if="!shouldShowIntro"
+      v-bind="$attrs"
+      key-field="_key"
+      :schema="schema"
+      :headers="headers"
+      :rows="filteredRows"
+      :get-custom-detail-link="getDetailLocation"
+      :loading="loading"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :namespaced="!workspace"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>