@rancher/shell 3.0.7 → 3.0.8-rc.1

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>

package/edit/auth/github.vue

@@ -4,16 +4,15 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import { RadioGroup } from '@components/Form/Radio';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import { MANAGEMENT } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
 import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
-import InfoBox from '@shell/components/InfoBox';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
-
-const NAME = 'github';
+import FileSelector from '@shell/components/form/FileSelector';
+import GithubSteps from '@shell/edit/auth/github-steps.vue';
+import GithubAppSteps from '@shell/edit/auth/github-app-steps.vue';
 
 export default {
   components: {
@@ -21,11 +20,12 @@ export default {
     CruResource,
     RadioGroup,
     LabeledInput,
-    CopyToClipboard,
     AllowedPrincipals,
     AuthBanner,
-    InfoBox,
-    AuthProviderWarningBanners
+    AuthProviderWarningBanners,
+    FileSelector,
+    GithubSteps,
+    GithubAppSteps,
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -60,7 +60,7 @@ export default {
     },
 
     displayName() {
-      return this.t(`model.authConfig.provider.${ NAME }`);
+      return this.t(`model.authConfig.provider.${ this.NAME }`);
     },
 
     tArgs() {
@@ -73,7 +73,7 @@ export default {
     },
 
     NAME() {
-      return NAME;
+      return this.isGithubApp ? 'githubapp' : 'github';
     },
 
     AUTH_CONFIG() {
@@ -86,7 +86,27 @@ export default {
         githubConfig: this.model,
         description:  'Enable GitHub',
       };
-    }
+    },
+
+    isGithubApp() {
+      return this.model?.id === 'githubapp';
+    },
+
+    steps() {
+      return this.isGithubApp ? GithubAppSteps : GithubSteps;
+    },
+
+    validationPassed() {
+      if (!this.model.clientId || !this.model.clientSecret) {
+        return false;
+      }
+
+      if (this.isGithubApp && (!this.model.appId || !this.model.privateKey)) {
+        return false;
+      }
+
+      return true;
+    },
 
   },
 
@@ -109,6 +129,10 @@ export default {
         this.model.hostname = match[4] || 'github.com';
       }
     },
+
+    updatePrivateKey(content) {
+      this.model.privateKey = content;
+    },
   },
 };
 </script>
@@ -122,7 +146,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :finish-button-mode="model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -139,7 +163,7 @@ export default {
         >
           <template #rows>
             <tr><td>{{ t(`authConfig.${ NAME }.table.server`) }}: </td><td>{{ baseUrl }}</td></tr>
-            <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ value.clientId }}</td></tr>
+            <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
           </template>
         </AuthBanner>
 
@@ -156,7 +180,17 @@ export default {
         <AuthProviderWarningBanners
           v-if="!model.enabled"
           :t-args="tArgs"
-        />
+        >
+          <template
+            v-if="isGithubApp"
+            #additional-warning
+          >
+            <span
+              v-clean-html="t(`authConfig.${NAME}.warning`, {}, true)"
+              data-testid="github-app-banner"
+            />
+          </template>
+        </AuthProviderWarningBanners>
 
         <h3 v-t="`authConfig.${NAME}.target.label`" />
         <RadioGroup
@@ -182,60 +216,18 @@ export default {
           </div>
         </div>
 
-        <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>: {{ serverUrl }} <CopyToClipboard
-                    label-as="tooltip"
-                    :text="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>: {{ serverUrl }} <CopyToClipboard
-                    :text="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>
+        <component
+          :is="steps"
+          :t-args="tArgs"
+          :name="NAME"
+        />
 
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientId"
+              required
+              data-testid="client-id"
               :label="t(`authConfig.${NAME}.clientId.label`)"
               :mode="mode"
             />
@@ -243,21 +235,58 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientSecret"
+              required
+              data-testid="client-secret"
               type="password"
               :label="t(`authConfig.${NAME}.clientSecret.label`)"
               :mode="mode"
             />
           </div>
         </div>
+        <template v-if="isGithubApp">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.appId"
+                required
+                data-testid="app-id"
+                :label="t(`authConfig.${NAME}.githubAppId.label`)"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.installationId"
+                data-testid="installation-id"
+                :label="t(`authConfig.${NAME}.installationId.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.privateKey"
+                required
+                data-testid="private-key"
+                type="multiline"
+                :label="t(`authConfig.${NAME}.privateKey.label`)"
+                :mode="mode"
+              />
+              <FileSelector
+                class="btn btn-sm role-secondary mt-10"
+                :label="t('generic.readFromFile')"
+                @selected="updatePrivateKey"
+              />
+            </div>
+          </div>
+        </template>
       </template>
     </CruResource>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .step-list li:not(:last-child) {
-    margin-bottom: 8px;
-  }
   .banner {
     display: block;
 

package/edit/fleet.cattle.io.helmop.vue

@@ -29,6 +29,8 @@ import UnitInput from '@shell/components/form/UnitInput';
 import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
 import { toSeconds } from '@shell/utils/duration';
 import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
 
 const MINIMUM_POLLING_INTERVAL = 15;
 
@@ -50,6 +52,8 @@ export default {
     Checkbox,
     CruResource,
     FleetClusterTargets,
+    FleetConfigMapSelector,
+    FleetSecretSelector,
     FleetValuesFrom,
     YamlEditor,
     LabeledInput,
@@ -230,7 +234,15 @@ export default {
       }
 
       return null;
-    }
+    },
+
+    downstreamSecretsList() {
+      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'Secret').map((r) => r.name);
+    },
+
+    downstreamConfigMapsList() {
+      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'ConfigMap').map((r) => r.name);
+    },
   },
 
   watch: {
@@ -429,7 +441,24 @@ export default {
         }];
         break;
       }
-    }
+    },
+
+    updateDownstreamResources(kind, list) {
+      switch (kind) {
+      case 'Secret':
+        this.value.spec.helm.downstreamResources = [
+          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'Secret'),
+          ...(list || []).map((name) => ({ name, kind: 'Secret' })),
+        ];
+        break;
+      case 'ConfigMap':
+        this.value.spec.helm.downstreamResources = [
+          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'ConfigMap'),
+          ...(list || []).map((name) => ({ name, kind: 'ConfigMap' })),
+        ];
+        break;
+      }
+    },
   },
 };
 </script>
@@ -711,6 +740,26 @@ export default {
 
       <h2 v-t="'fleet.helmOp.resources.label'" />
 
+      <div class="row mt-20 mb-20">
+        <div class="col span-6">
+          <FleetSecretSelector
+            :value="downstreamSecretsList"
+            :namespace="value.metadata.namespace"
+            :mode="mode"
+            @update:value="updateDownstreamResources('Secret', $event)"
+          />
+        </div>
+      </div>
+      <div class="row mt-20 mb-20">
+        <div class="col span-6">
+          <FleetConfigMapSelector
+            :value="downstreamConfigMapsList"
+            :namespace="value.metadata.namespace"
+            :mode="mode"
+            @update:value="updateDownstreamResources('ConfigMap', $event)"
+          />
+        </div>
+      </div>
       <div class="resource-handling mb-30">
         <Checkbox
           v-model:value="correctDriftEnabled"

package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue

@@ -149,25 +149,35 @@ export default {
   },
   watch: {
     namespace: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.podSelector': {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.namespaceSelector': {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.ipBlock.cidr':   'validateCIDR',
     'value.ipBlock.except': 'validateCIDR',
     podSelectorExpressions: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     namespaceSelectorExpressions: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     }
   },