@rancher/shell 3.0.7 → 3.0.8-rc.2

package/components/templates/home.vue

@@ -12,6 +12,8 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
+import WindowManager from '@shell/components/nav/WindowManager';
+import { Layout } from '@shell/types/window-manager';
 
 export default {
 
@@ -24,16 +26,18 @@ export default {
     AzureWarning,
     AwsComplianceBanner,
     Inactivity,
-    PromptModal
+    PromptModal,
+    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
   data() {
     return {
+      layout:           Layout.home,
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
-      noLocaleShortcut: process.env.dev || false
+      noLocaleShortcut: process.env.dev || false,
     };
   },
 
@@ -81,6 +85,7 @@ export default {
           class="outlet"
         />
       </main>
+      <WindowManager :layout="layout" />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -112,10 +117,10 @@ export default {
     flex-grow:1;
 
     grid-template-areas:
-      "header"
-      "main";
+      "header header header"
+      "wm-vl  main    wm-vr";
 
-    grid-template-columns: auto;
+    grid-template-columns: var(--wm-vl-width, 0px) auto var(--wm-vr-width, 0px);
     grid-template-rows:    var(--header-height) auto;
 
     > HEADER {
@@ -123,6 +128,27 @@ export default {
     }
   }
 
+  .wm {
+    grid-area: wm;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
+  .wm-vr {
+    grid-area: wm-vr;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
+  .wm-vl {
+    grid-area: wm-vl;
+    overflow-y: hidden;
+    z-index: z-index('windowsManager');
+    position: relative;
+  }
+
   MAIN {
     grid-area: main;
     overflow: auto;

package/config/product/auth.js

@@ -177,6 +177,7 @@ export function init(store) {
   });
 
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/github`, 'auth/github');
+  componentForType(`${ MANAGEMENT.AUTH_CONFIG }/githubapp`, 'auth/github');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/openldap`, 'auth/ldap/index');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/freeipa`, 'auth/ldap/index');
   componentForType(`${ MANAGEMENT.AUTH_CONFIG }/activedirectory`, 'auth/ldap/index');

package/config/query-params.js

@@ -8,6 +8,7 @@ export const STEP = 'step';
 export const LOGGED_OUT = 'logged-out';
 export const IS_SSO = 'is-sso';
 export const IS_SLO = 'is-slo';
+export const IS_SESSION_IDLE = 'is-session-idle';
 export const UPGRADED = 'upgraded';
 export const TIMED_OUT = 'timed-out';
 export const AUTH_TEST = 'test';

package/config/settings.ts

@@ -52,6 +52,7 @@ export const SETTING = {
   RKE_METADATA_CONFIG:                           'rke-metadata-config',
   EULA_AGREED:                                   'eula-agreed',
   AUTH_USER_INFO_MAX_AGE_SECONDS:                'auth-user-info-max-age-seconds',
+  AUTH_USER_SESSION_IDLE_TTL_MINUTES:            'auth-user-session-idle-ttl-minutes',
   AUTH_USER_SESSION_TTL_MINUTES:                 'auth-user-session-ttl-minutes',
   AUTH_USER_INFO_RESYNC_CRON:                    'auth-user-info-resync-cron',
   AUTH_LOCAL_VALIDATE_DESC:                      'auth-password-requirements-description',
@@ -109,7 +110,12 @@ export const SETTING = {
   SYSTEM_AGENT_UPGRADER_INSTALL_CONCURRENCY:     'system-agent-upgrader-install-concurrency',
   IMPORTED_CLUSTER_VERSION_MANAGEMENT:           'imported-cluster-version-management',
   CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS:          'cluster-agent-default-priority-class',
-  CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET: 'cluster-agent-default-pod-disruption-budget'
+  CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET: 'cluster-agent-default-pod-disruption-budget',
+  /**
+   * Dynamic Content settings
+   */
+  DYNAMIC_CONTENT_ENABLED:                       'ui-content-enabled',
+  DYNAMIC_CONTENT_ENDPOINT:                      'ui-content-endpoint',
 } as const;
 
 // These are the settings that are allowed to be edited via the UI
@@ -140,6 +146,7 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
   },
   [SETTING.INGRESS_IP_DOMAIN]:                    {},
   [SETTING.AUTH_USER_INFO_MAX_AGE_SECONDS]:       {},
+  [SETTING.AUTH_USER_SESSION_IDLE_TTL_MINUTES]:   {},
   [SETTING.AUTH_USER_SESSION_TTL_MINUTES]:        {},
   [SETTING.AUTH_TOKEN_MAX_TTL_MINUTES]:           {},
   [SETTING.KUBECONFIG_GENERATE_TOKEN]:            { kind: 'boolean' },

package/config/store.js

@@ -35,11 +35,12 @@ let store = {};
   resolveStoreModules(require('../store/slideInPanel.ts'), 'slideInPanel.ts');
   resolveStoreModules(require('../store/type-map.js'), 'type-map.js');
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
-  resolveStoreModules(require('../store/wm.js'), 'wm.js');
+  resolveStoreModules(require('../store/wm.ts'), 'wm.ts');
   resolveStoreModules(require('../store/customisation.js'), 'customisation.js');
   resolveStoreModules(require('../store/cru-resource.ts'), 'cru-resource.ts');
   resolveStoreModules(require('../store/notifications.ts'), 'notifications.ts');
   resolveStoreModules(require('../store/cookies.ts'), 'cookies.ts');
+  resolveStoreModules(require('../store/ui-context.ts'), 'ui-context.ts');
 
   // If the environment supports hot reloading...
 
@@ -66,11 +67,12 @@ let store = {};
       '../store/slideInPanel.ts',
       '../store/type-map.js',
       '../store/uiplugins.ts',
-      '../store/wm.js',
+      '../store/wm.ts',
       '../store/customisation.js',
       '../store/cru-resource.ts',
       '../store/notifications.ts',
       '../store/cookies.ts',
+      '../store/ui-context.ts',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules();

package/config/types.js

@@ -222,6 +222,8 @@ export const MANAGEMENT = {
   OIDC_CLIENT:                   'management.cattle.io.oidcclient'
 };
 
+export const EXT = { USER_ACTIVITY: 'ext.cattle.io.useractivity' };
+
 export const CAPI = {
   CAPI_CLUSTER:         'cluster.x-k8s.io.cluster',
   MACHINE_DEPLOYMENT:   'cluster.x-k8s.io.machinedeployment',

package/detail/pod.vue

@@ -97,6 +97,7 @@ export default {
 
         return {
           ...container,
+          kind:             'Container',
           status:           status || {},
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,

package/dialog/AddonConfigConfirmationDialog.vue

@@ -1,6 +1,10 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
+import { mapGetters } from 'vuex';
+
+import { labelForAddon } from '@shell/utils/cluster';
+import { resourceNames } from '@shell/utils/string';
 
 export default {
   emits: ['close'],
@@ -17,11 +21,45 @@ export default {
     registerBackgroundClosing: {
       type:     Function,
       required: true
+    },
+    /**
+     * The names of the addons that have configuration conflicts.
+     */
+    addonNames: {
+      type:    Array,
+      default: () => []
+    },
+    /**
+     * The Kubernetes version the user is upgrading from.
+     */
+    previousKubeVersion: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The Kubernetes version the user is upgrading to.
+     */
+    newKubeVersion: {
+      type:    String,
+      default: ''
     }
   },
   created() {
     this.registerBackgroundClosing(this.closing);
   },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    formattedAddons() {
+      if (!this.addonNames || this.addonNames.length === 0) {
+        return '';
+      }
+
+      const translatedNames = this.addonNames.map((name) => labelForAddon(this.$store, name, true));
+
+      return resourceNames(translatedNames, null, this.t, false);
+    }
+  },
   methods: {
     continue(value) {
       if (this.resources[0]) {
@@ -59,7 +97,13 @@ export default {
 
     <template #body>
       <slot name="body">
-        {{ t('addonConfigConfirmation.body') }}
+        <span
+          v-clean-html="t('addonConfigConfirmation.body', {
+            addons: formattedAddons,
+            previousKubeVersion,
+            newKubeVersion
+          }, true)"
+        />
       </slot>
     </template>
 

package/directives/ui-context.ts

@@ -0,0 +1,97 @@
+import { get, isEmpty } from '@shell/utils/object';
+import { generateRandomAlphaString } from '@shell/utils/string';
+
+interface Context {
+  tag: string;
+  path?: string;
+  value?: any;
+  hookable?: boolean;
+  description?: string;
+  icon?: string;
+  store?: any;
+}
+
+function isValid(context: Context ): context is Context {
+  return (
+    context !== null &&
+    typeof context === 'object' &&
+    (
+      (context.path === undefined && context.value === undefined) || // both undefined is allowed
+      (typeof context.path === 'string' && context.path?.length > 0 && context.value === undefined) || // path defined, value undefined
+      (context.value !== undefined && context.path === undefined) // value defined, path undefined
+    ) &&
+    typeof context.tag === 'string' && context.tag?.length > 0 &&
+    (typeof context.description === 'string' || context.description === undefined)
+  );
+}
+
+/** UI Context Directive
+ *
+ * Usage:
+ *   <div v-ui-context="{ tag: 'example-tag', path: 'some.path.in.component', description: 'An example context' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', value: 'Direct Value', description: 'An example context with direct value' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', description: 'An example context with text content' }">Text Content Value</div>
+ *
+ * The directive will register the context on mount and unregister it before unmounting.
+ *
+ * The context object must have a 'tag' and either a 'path' or a 'value'.
+ * If both 'path' and 'value' are undefined, the element's textContent will be used as the value.
+ *
+ * !IMPORTANT:
+ *   The value object will be reactive only when using 'path'.
+ *   Using 'value' or textContent will not be reactive.
+ *
+*/
+export default {
+  async mounted(el: any, binding: { value: Context, instance: any }) {
+    const context: Context = binding.value;
+
+    if (!context || isEmpty(context)) {
+      return;
+    }
+
+    if (!isValid(context)) {
+      throw new Error(`Invalid ui-context value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
+    }
+
+    if (context.path === undefined && context.value === undefined) {
+      // path and value undefined, use textContent as value
+      context.value = el.textContent;
+    } else if (context.value === undefined) {
+      // Use context.value directly if provided, otherwise resolve it from the component instance using context.path
+      const value = get(binding.instance, context.path);
+
+      if (value === undefined) {
+        throw new Error(`[ui-context] path "${ context.path }" is undefined on the component instance`);
+      }
+
+      context.value = value;
+    }
+
+    delete context.path;
+
+    if (context.hookable) {
+      const hookId = generateRandomAlphaString(12);
+
+      el.setAttribute('ux-context-hook-id', hookId);
+      (context as any).hookId = hookId;
+    }
+
+    const store = context.store || binding.instance.$store || binding.instance.store;
+
+    if (store) {
+      delete context.store;
+      el._uiContextId = await store.dispatch('ui-context/add', context);
+    }
+  },
+
+  async beforeUnmount(el: any, binding: { value: Context, instance: any }) {
+    const store = binding.value?.store || binding.instance.$store || binding.instance.store;
+
+    if (store && el._uiContextId) {
+      await store.dispatch('ui-context/remove', el._uiContextId);
+    }
+  }
+};

package/edit/__tests__/fleet.cattle.io.helmop.test.ts

@@ -2,18 +2,22 @@ import { mount } from '@vue/test-utils';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
 import HelmOp from '@shell/models/fleet.cattle.io.helmop';
 import HelmOpComponent from '@shell/edit/fleet.cattle.io.helmop.vue';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
 
 const mockStore = {
   dispatch: jest.fn(),
   commit:   jest.fn(),
   getters:  {
-    'i18n/t':                  (text: string) => text,
-    'i18n/exists':             jest.fn(),
-    t:                         (text: string) => text,
-    currentStore:              () => 'current_store',
-    'current_store/schemaFor': jest.fn(),
-    'current_store/all':       jest.fn(),
-    workspace:                 'test',
+    'i18n/t':                       (text: string) => text,
+    'i18n/exists':                  jest.fn(),
+    t:                              (text: string) => text,
+    currentStore:                   () => 'current_store',
+    'current_store/schemaFor':      jest.fn(),
+    'current_store/all':            jest.fn(),
+    workspace:                      'test',
+    'management/paginationEnabled': () => false,
+    'management/all':               () => [],
   },
   rootGetters: { 'i18n/t': jest.fn() },
 };
@@ -63,19 +67,22 @@ const mockHelmOp = {
   currentRoute: () => {},
 };
 
-const initHelmOp = (props: any, value?: any) => {
-  const initValue = new HelmOp({
+const initHelmOp = (props: any, options = {}) => {
+  const value = new HelmOp({
     ...mockHelmOp,
-    ...(value || {})
+    ...options
   }, {
     getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
     dispatch:    jest.fn(),
     rootGetters: { 'i18n/t': jest.fn() },
   });
 
+  value.applyDefaults = () => {};
+  value.metadata = { namespace: '' };
+
   return {
     props: {
-      value: initValue,
+      value,
       ...props
     },
     computed: mockComputed,
@@ -221,4 +228,38 @@ describe.each([
 
     expect(pollingIntervalInput.value).toBe(displayValue);
   });
+
+  it('should update downstreamResources with new Secrets when FleetSecretSelector emits update event', async() => {
+    const wrapper = mount(HelmOpComponent, initHelmOp({ realMode: mode }));
+
+    const fleetConfigMapSelector = wrapper.findComponent(FleetConfigMapSelector);
+    const fleetSecretSelector = wrapper.findComponent(FleetSecretSelector);
+
+    expect(fleetSecretSelector.exists()).toBe(true);
+    expect(fleetConfigMapSelector.exists()).toBe(true);
+
+    await fleetSecretSelector.vm.$emit('update:value', []);
+    await fleetConfigMapSelector.vm.$emit('update:value', []);
+
+    await fleetSecretSelector.vm.$emit('update:value', ['secret2', 'secret3']);
+
+    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
+  });
+
+  it('should update downstreamResources with new ConfigMaps when FleetConfigMapSelector emits update event', async() => {
+    const wrapper = mount(HelmOpComponent, initHelmOp({ realMode: mode }));
+
+    const fleetConfigMapSelector = wrapper.findComponent(FleetConfigMapSelector);
+    const fleetSecretSelector = wrapper.findComponent(FleetSecretSelector);
+
+    expect(fleetSecretSelector.exists()).toBe(true);
+    expect(fleetConfigMapSelector.exists()).toBe(true);
+
+    await fleetSecretSelector.vm.$emit('update:value', []);
+    await fleetConfigMapSelector.vm.$emit('update:value', []);
+
+    await fleetConfigMapSelector.vm.$emit('update:value', ['configMap2', 'configMap3']);
+
+    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
+  });
 });

package/edit/auth/AuthProviderWarningBanners.vue

@@ -28,7 +28,20 @@ export default defineComponent({
       color="warning"
       data-testid="auth-provider-admin-permissions-warning-banner"
     >
-      <span v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+      <span class="banner-content">
+        <span v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+        <slot name="additional-warning">
+          <!--Empty slot content-->
+        </slot>
+      </span>
     </Banner>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

package/edit/auth/github-app-steps.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import InfoBox from '@shell/components/InfoBox';
+import CopyToClipboard from '@shell/components/CopyToClipboard';
+
+type TArgs = {
+  baseUrl: string;
+  serverUrl: string;
+  provider: string;
+  username: string;
+}
+
+defineProps<{
+  name: string;
+  tArgs: TArgs;
+}>();
+
+</script>
+
+<template>
+  <InfoBox
+    :step="1"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.3`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.4`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="2"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li>
+        {{ t(`authConfig.${name}.form.instruction`, tArgs, true) }}
+        <ul class="mt-10">
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.app.label`) }}
+            </b>:
+            <span v-clean-html="t(`authConfig.${name}.form.app.value`, tArgs, true)" />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.homepage.label`) }}
+            </b>: {{ tArgs.serverUrl }}
+            <CopyToClipboard
+              label-as="tooltip"
+              :text="tArgs.serverUrl"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.description.label`) }}
+            </b>:
+            <span v-clean-html="t(`authConfig.${name}.form.description.value`, tArgs, true)" />
+          </li>
+          <li>
+            <b>
+              {{ t(`authConfig.${name}.form.callback.label`) }}
+            </b>:
+            {{ t(`authConfig.${name}.form.callback.value`, tArgs, true) }}
+            <CopyToClipboard
+              :text="t(`authConfig.${name}.form.callback.value`, tArgs, true)"
+              label-as="tooltip"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        {{ t(`authConfig.${name}.form.create`, tArgs, true) }}
+      </li>
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="3"
+    class="mb-20"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.3`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+</template>
+
+<style lang="scss" scoped>
+  .step-list li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+</style>

package/edit/auth/github-steps.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import InfoBox from '@shell/components/InfoBox';
+import CopyToClipboard from '@shell/components/CopyToClipboard';
+
+type TArgs = {
+  baseUrl: string;
+  serverUrl: string;
+  provider: string;
+  username: string;
+}
+
+defineProps<{
+  name: string;
+  tArgs: TArgs;
+}>();
+
+</script>
+
+<template>
+  <InfoBox
+    :step="1"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.2`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.prefix.3`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="2"
+    class="step-box"
+  >
+    <ul class="step-list">
+      <li>
+        {{ t(`authConfig.${name}.form.instruction`, tArgs, true) }}
+        <ul class="mt-10">
+          <li><b>{{ t(`authConfig.${name}.form.app.label`) }}</b>: <span v-clean-html="t(`authConfig.${name}.form.app.value`, tArgs, true)" /></li>
+          <li>
+            <b>{{ t(`authConfig.${name}.form.homepage.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
+              label-as="tooltip"
+              :text="tArgs.serverUrl"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+          <li><b>{{ t(`authConfig.${name}.form.description.label`) }}</b>: <span v-clean-html="t(`authConfig.${name}.form.description.value`, tArgs, true)" /></li>
+          <li>
+            <b>{{ t(`authConfig.${name}.form.callback.label`) }}</b>: {{ tArgs.serverUrl }} <CopyToClipboard
+              :text="tArgs.serverUrl"
+              label-as="tooltip"
+              class="icon-btn"
+              action-color="bg-transparent"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </InfoBox>
+  <InfoBox
+    :step="3"
+    class="mb-20"
+  >
+    <ul class="step-list">
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.1`, tArgs, true)" />
+      <li v-clean-html="t(`authConfig.${name}.form.suffix.2`, tArgs, true)" />
+    </ul>
+  </InfoBox>
+</template>
+
+<style lang="scss" scoped>
+  .step-list li:not(:last-child) {
+    margin-bottom: 8px;
+  }
+</style>