@rancher/shell 3.0.12-rc.4 → 3.0.12-rc.5

package/components/form/PrivateRegistry.vue

@@ -1,24 +1,185 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
 import Banner from '@components/Banner/Banner.vue';
 import { Checkbox } from '@components/Form/Checkbox';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret.vue';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { PRIVATE_REGISTRY_CONTEXT } from '@shell/components/form/PrivateRegistry.constants';
+import type { PrivateRegistryContext } from '@shell/components/form/PrivateRegistry.constants';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   value?: string | null;
   enabled?: boolean;
   mode?: string;
   rules?: Function[];
   checkboxTestId?: string;
   inputTestId?: string;
-}>();
+  pullSecret?: string;
+  registerBeforeHook?: Function;
+  context?: PrivateRegistryContext;
+  defaultRegistry?: string;
+  namespace?: string;
+  inStore?: string;
+  showPullSecrets?: boolean;
+  noneLabel?: string | null;
+  skipPullSecrets?: boolean;
+  repoDefaultPullSecrets?: string[];
+  existingValuesPullSecrets?: string[];
+}>(), {
+  value:                     undefined,
+  enabled:                   false,
+  mode:                      'edit',
+  rules:                     () => [],
+  checkboxTestId:            undefined,
+  inputTestId:               undefined,
+  pullSecret:                undefined,
+  registerBeforeHook:        undefined,
+  context:                   PRIVATE_REGISTRY_CONTEXT.PROVISIONING,
+  defaultRegistry:           undefined,
+  namespace:                 'fleet-default',
+  inStore:                   'management',
+  showPullSecrets:           true,
+  noneLabel:                 undefined,
+  skipPullSecrets:           false,
+  repoDefaultPullSecrets:    () => [],
+  existingValuesPullSecrets: () => [],
+});
 
 const emit = defineEmits<{
-  'update:value': [val: string | null];
+  'update:value': [val: string | undefined];
   'update:enabled': [val: boolean];
+  'update:pullSecret': [val: string | undefined];
+  'update:skipPullSecrets': [val: boolean];
 }>();
 
+const store = useStore();
+const { t } = useI18n(store);
+
 const showInput = ref(!!props.value);
+const globalRegistry = ref('');
+const defaultPullSecrets = ref<string[]>([]);
+const localSkipPullSecrets = ref(props.skipPullSecrets);
+
+const isCharts = computed(() => props.context === PRIVATE_REGISTRY_CONTEXT.CHARTS);
+const isImporting = computed(() => props.context === PRIVATE_REGISTRY_CONTEXT.IMPORTING);
+
+const descriptionKey = computed(() => {
+  if (isCharts.value) {
+    return 'catalog.chart.registry.tooltip';
+  }
+  if (isImporting.value) {
+    return 'cluster.privateRegistry.importedDescription';
+  }
+
+  return 'cluster.privateRegistry.description';
+});
+
+const checkboxLabelKey = computed(() => {
+  if (isCharts.value) {
+    return 'catalog.chart.registry.custom.checkBoxLabel';
+  }
+
+  return 'cluster.privateRegistry.label';
+});
+
+const checkboxTooltipKey = computed(() => {
+  if (isCharts.value) {
+    return 'catalog.chart.registry.tooltip';
+  }
+
+  return undefined;
+});
+
+onMounted(() => {
+  if (props.defaultRegistry) {
+    globalRegistry.value = props.defaultRegistry;
+  } else {
+    const registrySetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SYSTEM_DEFAULT_REGISTRY);
+
+    globalRegistry.value = registrySetting?.value || registrySetting?.defaultValue;
+  }
+
+  const pullSecretsSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SYSTEM_DEFAULT_REGISTRY_PULL_SECRETS);
+
+  if (props.repoDefaultPullSecrets?.length) {
+    defaultPullSecrets.value = props.repoDefaultPullSecrets;
+  } else if (pullSecretsSetting?.value ) {
+    defaultPullSecrets.value = pullSecretsSetting?.value.split(',').map((s: string) => s.trim());
+  }
+});
+
+const hasMultipleDefaultSecrets = computed(() => {
+  return defaultPullSecrets.value?.length > 1;
+});
+
+/**
+ * On upgrade, if the chart values already contain multiple imagePullSecrets,
+ * the dropdown cannot represent them.  Show a banner instead and let the
+ * user edit the values YAML directly.
+ */
+const hasMultipleExistingPullSecrets = computed(() => {
+  return (props.existingValuesPullSecrets?.length ?? 0) > 1;
+});
+
+/**
+ * Format a list of names with commas and "and" before the last item.
+ * e.g. ["a"] => "<code>a</code>"
+ *      ["a", "b"] => "<code>a</code> and <code>b</code>"
+ *      ["a", "b", "c"] => "<code>a</code>, <code>b</code>, and <code>c</code>"
+ */
+function formatSecretList(names: string[]): string {
+  const wrapped = names.map((n) => `<code>${ n }</code>`);
+
+  const and = t('generic.and');
+
+  if (wrapped.length <= 1) {
+    return wrapped[0] || '';
+  }
+  if (wrapped.length === 2) {
+    return `${ wrapped[0] }${ and }${ wrapped[1] }`;
+  }
+
+  return `${ wrapped.slice(0, -1).join(', ') },${ and }${ wrapped[wrapped.length - 1] }`;
+}
+
+/**
+ * If there is exactly one default pull secret configured, we can show that it is the default in the secret dropdown.
+ * If there is more than one, UI can't be certain which secret will be used
+ * so a banner listing all secrets is shown instead.
+ */
+const defaultPullSecretLabel = computed(() => {
+  if (props.noneLabel) {
+    return props.noneLabel;
+  }
+  if (!defaultPullSecrets.value?.length) {
+    return null;
+  }
+  if (defaultPullSecrets.value?.length === 1) {
+    return t('catalog.chart.registry.pullSecret.defaultLabel', { name: defaultPullSecrets.value[0] });
+  }
+
+  return t('catalog.chart.registry.pullSecret.defaultLabelGeneric');
+});
+
+const existingValuesBannerHtml = computed(() => {
+  if (!props.existingValuesPullSecrets?.length) {
+    return '';
+  }
+
+  return t('catalog.chart.registry.pullSecret.existingValuesBanner', { secrets: formatSecretList(props.existingValuesPullSecrets) }, true);
+});
+
+const defaultSecretsBannerHtml = computed(() => {
+  if (!defaultPullSecrets.value?.length) {
+    return '';
+  }
+
+  return t('catalog.chart.registry.pullSecret.defaultSecretsBanner', { secrets: formatSecretList(defaultPullSecrets.value) }, true);
+});
 
 watch(() => props.enabled, (neu) => {
   if (typeof neu === 'boolean' && neu !== showInput.value) {
@@ -31,7 +192,8 @@ watch(showInput, (neu, old) => {
     emit('update:enabled', neu);
   }
   if (!neu && old && props.value) {
-    emit('update:value', null);
+    emit('update:value', undefined);
+    emit('update:pullSecret', undefined);
   }
 });
 
@@ -40,30 +202,103 @@ watch(() => props.value, (neu) => {
     showInput.value = true;
   }
 });
+
+watch(() => props.pullSecret, (neu, old) => {
+  if (neu && !props.value) {
+    emit('update:value', globalRegistry.value);
+  }
+  if (!neu && old && props.value === globalRegistry.value) {
+    emit('update:value', undefined);
+  }
+});
+
+watch(localSkipPullSecrets, (neu) => {
+  emit('update:skipPullSecrets', neu);
+  if (neu) {
+    emit('update:pullSecret', undefined);
+  }
+});
+
+watch(() => props.skipPullSecrets, (neu) => {
+  if (neu !== localSkipPullSecrets.value) {
+    localSkipPullSecrets.value = neu;
+  }
+});
+
 </script>
 
 <template>
   <Banner
     color="info"
     class="mt-0"
-    label-key="cluster.privateRegistry.importedDescription"
+    :label-key="descriptionKey"
   />
   <Checkbox
     v-model:value="showInput"
     class="mb-20"
     :mode="mode"
-    :label="t('cluster.privateRegistry.label')"
+    :label="t(checkboxLabelKey)"
+    :tooltip="checkboxTooltipKey ? t(checkboxTooltipKey) : undefined"
     :data-testid="checkboxTestId"
   />
-  <LabeledInput
-    v-if="showInput"
-    :value="value as string"
-    :mode="mode"
-    :rules="rules"
-    :required="true"
-    label-key="catalog.chart.registry.custom.inputLabel"
-    :data-testid="inputTestId"
-    :placeholder="t('catalog.chart.registry.custom.placeholder')"
-    @update:value="(val) => emit('update:value', val)"
-  />
+  <template v-if="showInput">
+    <div class="row">
+      <div class="col span-6">
+        <LabeledInput
+          :value="value || globalRegistry"
+          :mode="mode"
+          :rules="rules"
+          :required="!globalRegistry"
+          label-key="catalog.chart.registry.custom.inputLabel"
+          :data-testid="inputTestId"
+          :placeholder="t('catalog.chart.registry.custom.placeholder')"
+          @update:value="(val) => emit('update:value', val)"
+        />
+      </div>
+    </div>
+    <template v-if="showPullSecrets">
+      <Checkbox
+        v-if="isCharts"
+        v-model:value="localSkipPullSecrets"
+        class="mb-10 mt-10"
+        :mode="mode"
+        :label="t('catalog.chart.registry.pullSecret.skipOption')"
+        data-testid="registry-skip-pull-secrets-checkbox"
+      />
+      <Banner
+        v-if="hasMultipleExistingPullSecrets && !localSkipPullSecrets"
+        color="info"
+      >
+        <span v-clean-html="existingValuesBannerHtml" />
+      </Banner>
+      <Banner
+        v-if="!hasMultipleExistingPullSecrets && hasMultipleDefaultSecrets && !localSkipPullSecrets"
+        color="info"
+      >
+        <span v-clean-html="defaultSecretsBannerHtml" />
+      </Banner>
+      <div :class="{'col span-6': !isCharts}">
+        <SelectOrCreateAuthSecret
+          v-if="!localSkipPullSecrets && !hasMultipleExistingPullSecrets"
+          :value="pullSecret"
+          :namespace="namespace"
+          :allow-rke="!isCharts"
+          :vertical="!isCharts"
+          :in-store="inStore"
+          limit-to-namespace
+          fixed-image-pull-secret
+          :none-label="defaultPullSecretLabel"
+          :image-pull-secret-docker-json-url-config="value || globalRegistry"
+          :register-before-hook="registerBeforeHook"
+          @update:value="(val) => emit('update:pullSecret', val)"
+        />
+      </div>
+    </template>
+  </template>
 </template>
+
+<style lang="scss" scoped>
+:deep(.banner__content) {
+  display: block;
+}
+</style>

package/components/form/SelectOrCreateAuthSecret.vue

@@ -4,8 +4,9 @@ import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts';
+import FileSelector from '@shell/components/form/FileSelector';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
-import { SECRET_TYPES } from '@shell/config/secret';
+import { SECRET_TYPES, GITHUB_APP_SECRET_KEYS } from '@shell/config/secret';
 import { base64Encode } from '@shell/utils/crypto';
 import { addObjects, insertAt } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
@@ -15,6 +16,16 @@ import {
   PaginationParamFilter,
 } from '@shell/types/store/pagination.types';
 
+// Auth types for which this component renders inline fields and can create a secret/credential
+const CREATABLE_AUTH_TYPES = [
+  AUTH_TYPE._SSH,
+  AUTH_TYPE._BASIC,
+  AUTH_TYPE._S3,
+  AUTH_TYPE._RKE,
+  AUTH_TYPE._IMAGE_PULL_SECRET,
+  AUTH_TYPE._GITHUB_APP,
+];
+
 export default {
   name: 'SelectOrCreateAuthSecret',
 
@@ -25,6 +36,7 @@ export default {
     LabeledInput,
     LabeledSelect,
     SSHKnownHosts,
+    FileSelector,
   },
 
   props: {
@@ -101,6 +113,11 @@ export default {
       default: false,
     },
 
+    allowGithubApp: {
+      type:    Boolean,
+      default: false,
+    },
+
     registerBeforeHook: {
       type:     Function,
       required: true,
@@ -195,10 +212,16 @@ export default {
       type:    Boolean,
       default: false,
     },
+
+    // Overwrite the default label for "None" option ('generic.none')
+    noneLabel: {
+      type:    [String, null],
+      default: null
+    }
   },
 
   async fetch() {
-    if ( (this.allowSsh || this.allowBasic || this.allowRke || this.fixedImagePullSecret) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
+    if ( (this.allowSsh || this.allowBasic || this.allowRke || this.allowGithubApp || this.fixedImagePullSecret) && this.$store.getters[`${ this.inStore }/schemaFor`](SECRET) ) {
       if (this.$store.getters[`${ this.inStore }/paginationEnabled`](SECRET)) {
         // Filter results via api (because we shouldn't be fetching them all...)
         this.filteredSecrets = await this.filterSecretsByApi();
@@ -248,13 +271,19 @@ export default {
       publicKey:     '',
       privateKey:    '',
       sshKnownHosts: '',
-      uniqueId:      new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
+
+      githubAppId:             '',
+      githubAppInstallationId: '',
+      githubAppPrivateKey:     '',
+
+      uniqueId: new Date().getTime(), // Allows form state to be individually tracked if the form is in a list
 
       SSH:               AUTH_TYPE._SSH,
       BASIC:             AUTH_TYPE._BASIC,
       IMAGE_PULL_SECRET: AUTH_TYPE._IMAGE_PULL_SECRET,
       S3:                AUTH_TYPE._S3,
       RKE:               AUTH_TYPE._RKE,
+      GITHUB_APP:        AUTH_TYPE._GITHUB_APP,
     };
   },
 
@@ -280,6 +309,12 @@ export default {
         types.push(SECRET_TYPES.RKE_AUTH_CONFIG);
       }
 
+      // GitHub App secrets are stored as Opaque; they're narrowed down to actual
+      // GitHub App secrets via the data keys in `options`.
+      if ( this.allowGithubApp ) {
+        types.push(SECRET_TYPES.OPAQUE);
+      }
+
       return types;
     },
 
@@ -311,6 +346,12 @@ export default {
         filteredSecrets = this.filteredSecrets;
       }
 
+      // GitHub App secrets are fetched as Opaque (broad). Keep only the Opaque
+      // secrets that actually hold the GitHub App data keys.
+      if (this.allowGithubApp) {
+        filteredSecrets = filteredSecrets.filter((x) => x._type !== SECRET_TYPES.OPAQUE || x.isGithubApp);
+      }
+
       let out = filteredSecrets.map((x) => {
         const {
           dataPreview, subTypeDisplay, metadata, id
@@ -370,12 +411,12 @@ export default {
       }
       if ( this.allowNone ) {
         out.unshift({
-          label: this.t('generic.none'),
+          label: this.noneLabel || this.t('generic.none'),
           value: AUTH_TYPE._NONE,
         });
       }
 
-      if (this.allowSsh || this.allowS3 || this.allowBasic || this.allowRke || this.fixedImagePullSecret) {
+      if (this.allowSsh || this.allowS3 || this.allowBasic || this.allowRke || this.allowGithubApp || this.fixedImagePullSecret) {
         out.unshift({
           label:    'divider',
           disabled: true,
@@ -383,6 +424,14 @@ export default {
         });
       }
 
+      if ( this.allowGithubApp ) {
+        out.unshift({
+          label: this.t('selectOrCreateAuthSecret.createGithubApp'),
+          value: AUTH_TYPE._GITHUB_APP,
+          kind:  'highlighted'
+        });
+      }
+
       if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
@@ -453,12 +502,15 @@ export default {
   },
 
   watch: {
-    selected:      'update',
-    publicKey:     'updateKeyVal',
-    privateKey:    'updateKeyVal',
-    sshKnownHosts: 'updateKeyVal',
-    preSelect:     'updateSelectedFromValue',
-    value:         'updateSelectedFromValue',
+    selected:                'update',
+    publicKey:               'updateKeyVal',
+    privateKey:              'updateKeyVal',
+    sshKnownHosts:           'updateKeyVal',
+    githubAppId:             'updateKeyVal',
+    githubAppInstallationId: 'updateKeyVal',
+    githubAppPrivateKey:     'updateKeyVal',
+    preSelect:               'updateSelectedFromValue',
+    value:                   'updateSelectedFromValue',
 
     async namespace(ns) {
       if (ns && !this.selected.startsWith(`${ ns }/`)) {
@@ -541,10 +593,13 @@ export default {
     },
 
     updateKeyVal() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected) ) {
+      if ( !CREATABLE_AUTH_TYPES.includes(this.selected) ) {
         this.privateKey = '';
         this.publicKey = '';
         this.sshKnownHosts = '';
+        this.githubAppId = '';
+        this.githubAppInstallationId = '';
+        this.githubAppPrivateKey = '';
       }
 
       const value = {
@@ -557,11 +612,17 @@ export default {
         value.sshKnownHosts = this.sshKnownHosts;
       }
 
+      if (this.selected === AUTH_TYPE._GITHUB_APP) {
+        value.githubAppId = this.githubAppId;
+        value.githubAppInstallationId = this.githubAppInstallationId;
+        value.githubAppPrivateKey = this.githubAppPrivateKey;
+      }
+
       this.$emit('inputauthval', value);
     },
 
     update() {
-      if ( (!this.selected || [AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._NONE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected))) {
+      if ( (!this.selected || this.selected === AUTH_TYPE._NONE || CREATABLE_AUTH_TYPES.includes(this.selected))) {
         this.$emit('update:value', null);
       } else if ( this.selected.includes(':')) {
         // Cloud creds
@@ -585,7 +646,7 @@ export default {
     },
 
     async doCreate() {
-      if ( ![AUTH_TYPE._SSH, AUTH_TYPE._BASIC, AUTH_TYPE._S3, AUTH_TYPE._RKE, AUTH_TYPE._IMAGE_PULL_SECRET].includes(this.selected) || this.delegateCreateToParent ) {
+      if ( !CREATABLE_AUTH_TYPES.includes(this.selected) || this.delegateCreateToParent ) {
         return;
       }
 
@@ -636,6 +697,14 @@ export default {
           // Set the 'auth' key to be the base64 of the username and password concatenated with a ':' character
           secret.data = { auth: base64Encode(`${ this.publicKey }:${ this.privateKey }`) };
           break;
+        case AUTH_TYPE._GITHUB_APP:
+          type = SECRET_TYPES.OPAQUE;
+          secret.data = {
+            [GITHUB_APP_SECRET_KEYS.APP_ID]:          base64Encode(this.githubAppId),
+            [GITHUB_APP_SECRET_KEYS.INSTALLATION_ID]: base64Encode(this.githubAppInstallationId),
+            [GITHUB_APP_SECRET_KEYS.PRIVATE_KEY]:     base64Encode(this.githubAppPrivateKey),
+          };
+          break;
         default:
           throw new Error('Unknown type');
         }
@@ -655,8 +724,15 @@ export default {
             secret.data.known_hosts = base64Encode(this.sshKnownHosts || '');
           }
 
+          // Components passing imagePullSecretDockerJsonUrlConfig are responsible for validating that a valid hostname or URL is provided
           if (this.selected === AUTH_TYPE._IMAGE_PULL_SECRET && this.imagePullSecretDockerJsonUrlConfig) {
-            const registryHost = this.imagePullSecretDockerJsonUrlConfig ? new URL(this.imagePullSecretDockerJsonUrlConfig).host : '';
+            let registryHost;
+
+            try {
+              registryHost = new URL(this.imagePullSecretDockerJsonUrlConfig).host;
+            } catch {
+              registryHost = this.imagePullSecretDockerJsonUrlConfig;
+            }
 
             const config = {
               auths: {
@@ -672,13 +748,14 @@ export default {
           }
         }
       }
-
       await secret.save();
 
       await this.$nextTick(() => {
         this.selected = secret.id;
       });
 
+      this.update();
+
       return secret;
     },
   },
@@ -780,11 +857,57 @@ export default {
         </div>
       </template>
     </div>
+    <div
+      v-if="selected === GITHUB_APP"
+      class="mt-20"
+      :class="{'row': !vertical}"
+    >
+      <div :class="vertical ? 'mt-20' : 'col span-3'">
+        <LabeledInput
+          v-model:value="githubAppId"
+          data-testid="auth-secret-github-app-id"
+          :mode="mode"
+          label-key="selectOrCreateAuthSecret.githubApp.appId"
+        />
+      </div>
+      <div :class="vertical ? 'mt-20' : 'col span-3'">
+        <LabeledInput
+          v-model:value="githubAppInstallationId"
+          data-testid="auth-secret-github-app-installation-id"
+          :mode="mode"
+          label-key="selectOrCreateAuthSecret.githubApp.installationId"
+        />
+      </div>
+      <div :class="vertical ? 'mt-20' : 'col span-6 gap'">
+        <LabeledInput
+          v-model:value="githubAppPrivateKey"
+          data-testid="auth-secret-github-app-private-key"
+          :mode="mode"
+          type="multiline"
+          :max-height="1000"
+          :resize-on-value-change-and-resize-window="true"
+          label-key="selectOrCreateAuthSecret.githubApp.privateKey"
+        />
+        <FileSelector
+          :as-rc-button="true"
+          :mode="mode"
+          :label="t('generic.readFromFile')"
+          data-testid="auth-secret-github-app-private-key-file"
+          @selected="githubAppPrivateKey = $event"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .select-or-create-auth-secret div.labeled-select {
   min-height: $input-height;
 }
+
+.gap {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--gap);
+}
 </style>

package/components/form/__tests__/FileSelector.test.ts

@@ -30,6 +30,29 @@ describe('component: FileSelector', () => {
     expect(uploadButton.exists()).toBeTruthy();
   });
 
+  it('should render a small, secondary RcButton when asRcButton is set', () => {
+    wrapper = mount(FileSelector, {
+      props:  { label: 'upload', asRcButton: true },
+      global: { mocks: {} },
+    });
+
+    const rcButton = wrapper.findComponent({ name: 'RcButton' });
+
+    expect(rcButton.exists()).toBe(true);
+    expect(rcButton.props('variant')).toBe('secondary');
+    expect(rcButton.props('size')).toBe('small');
+  });
+
+  it('should render a plain button by default (asRcButton not set)', () => {
+    wrapper = mount(FileSelector, {
+      props:  { label: 'upload' },
+      global: { mocks: {} },
+    });
+
+    expect(wrapper.findComponent({ name: 'RcButton' }).exists()).toBe(false);
+    expect(wrapper.find('[data-testid="file-selector__uploader-button"]').exists()).toBe(true);
+  });
+
   it('should succeed when loading an image', async() => {
     wrapper = mount(FileSelector, {
       props:   { label: 'upload', accept: 'image/jpeg,image/png,image/svg+xml' },