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

package/components/__tests__/PromptRestore.test.ts

@@ -4,36 +4,46 @@ import PromptRestore from '@shell/components/PromptRestore.vue';
 import { createStore } from 'vuex';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
-import { CAPI } from '@shell/config/types';
+import { CAPI, MANAGEMENT, OPERATION, SNAPSHOT } from '@shell/config/types';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { createOperationCR } from '@shell/utils/operation-cr';
+
+jest.mock('@shell/utils/operation-cr', () => ({ createOperationCR: jest.fn() }));
 
 const RKE2_CLUSTER_NAME = 'rke2_cluster_name';
 const RKE2_SUCCESSFUL_SNAPSHOT_1 = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2023 11:11:39',
-  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
-  id:           'rke2_id_1',
-  name:         'rke2_name_1'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2023 11:11:39',
+  restoreEnabled: true,
+  snapshotFile:   { status: STATES_ENUM.SUCCESSFUL },
+  id:             'rke2_id_1',
+  name:           'rke2_name_1'
 };
 const RKE2_SUCCESSFUL_SNAPSHOT_2 = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2022 11:11:39',
-  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
-  id:           'rke2_id_2',
-  name:         'rke2_name_2'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2022 11:11:39',
+  restoreEnabled: true,
+  snapshotFile:   { status: STATES_ENUM.SUCCESSFUL },
+  id:             'rke2_id_2',
+  name:           'rke2_name_2'
 };
 const RKE2_FAILED_SNAPSHOT = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2021 11:11:39',
-  snapshotFile: { status: STATES_ENUM.FAILED },
-  id:           'rke2_id_3',
-  name:         'rke2_name_3'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2021 11:11:39',
+  restoreEnabled: false,
+  snapshotFile:   { status: STATES_ENUM.FAILED },
+  id:             'rke2_id_3',
+  name:           'rke2_name_3'
 };
 
 describe('component: PromptRestore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   const rke2TestCases = [
     [[], 0],
     [[RKE2_FAILED_SNAPSHOT], 0],
@@ -72,4 +82,144 @@ describe('component: PromptRestore', () => {
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });
+
+  it('should restore imported cluster via operation CR', async() => {
+    (createOperationCR as jest.Mock).mockResolvedValue(undefined);
+    const clusterSave = jest.fn();
+    const buttonDone = jest.fn();
+
+    const importedCluster = {
+      isImported:              true,
+      isImportedWithDayTwoOps: true,
+      type:                    CAPI.RANCHER_CLUSTER,
+      metadata:                { name: 'imported-cluster' },
+      mgmt:                    { id: 'c-m-imported' },
+      save:                    clusterSave,
+    };
+
+    const getters: any = {};
+
+    getters['i18n/t'] = () => (key: string) => key;
+
+    const store = createStore({
+      modules: {
+        'action-menu': {
+          namespaced: true,
+          state:      {
+            showPromptRestore: true,
+            toRestore:         [importedCluster]
+          },
+          mutations: { togglePromptRestore: jest.fn() }
+        },
+      },
+      getters,
+      actions: {
+        'management/findAll': jest.fn().mockResolvedValue([]),
+        'growl/success':      jest.fn(),
+      }
+    });
+
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
+
+    wrapper.vm.allSnapshots = {
+      'snapshot-1': {
+        name:         'snapshot-1',
+        snapshotFile: { name: 'snapshot-file-1' }
+      }
+    };
+    wrapper.vm.selectedSnapshot = 'snapshot-1';
+
+    await wrapper.vm.apply(buttonDone);
+
+    expect(createOperationCR).toHaveBeenCalledTimes(1);
+    expect((createOperationCR as jest.Mock).mock.calls[0][1]).toBe(OPERATION.ETCD_SNAPSHOT_RESTORE);
+    expect((createOperationCR as jest.Mock).mock.calls[0][2]).toStrictEqual({
+      clusterRef: {
+        apiVersion: 'management.cattle.io/v3',
+        kind:       'Cluster',
+        name:       'c-m-imported',
+      },
+      args: { name: 'snapshot-file-1' },
+    });
+    expect((createOperationCR as jest.Mock).mock.calls[0][3]).toBe('c-m-imported');
+    expect((createOperationCR as jest.Mock).mock.calls[0][4]).toBe('c-m-imported');
+    expect(clusterSave).not.toHaveBeenCalled();
+    expect(buttonDone).toHaveBeenCalledWith(true);
+  });
+
+  it('should restore imported snapshot by resolving target cluster from store', async() => {
+    (createOperationCR as jest.Mock).mockResolvedValue(undefined);
+    const buttonDone = jest.fn();
+    const byId = jest.fn();
+
+    const importedCluster = {
+      id:                      'fleet-default/imported-cluster',
+      isImportedWithDayTwoOps: true,
+      mgmt:                    { id: 'c-m-imported' },
+      isImported:              true,
+    };
+
+    byId.mockImplementation((type: string, id: string) => {
+      if (type === CAPI.RANCHER_CLUSTER && id === 'fleet-default/imported-cluster') {
+        return importedCluster;
+      }
+
+      if (type === MANAGEMENT.CLUSTER && id === 'c-m-imported') {
+        return importedCluster.mgmt;
+      }
+
+      return null;
+    });
+
+    const getters: any = {};
+
+    getters['i18n/t'] = () => (key: string) => key;
+    getters['management/byId'] = () => byId;
+
+    const store = createStore({
+      modules: {
+        'action-menu': {
+          namespaced: true,
+          state:      {
+            showPromptRestore: true,
+            toRestore:         [{
+              type:         SNAPSHOT,
+              metadata:     { namespace: 'fleet-default' },
+              spec:         { clusterName: 'imported-cluster', clusterRef: { name: 'c-m-imported' } },
+              snapshotFile: { name: 'snapshot-file-2' },
+              nameDisplay:  'snapshot-2',
+            }]
+          },
+          mutations: { togglePromptRestore: jest.fn() }
+        },
+      },
+      getters,
+      actions: { 'growl/success': jest.fn() }
+    });
+
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
+
+    await wrapper.vm.apply(buttonDone);
+
+    expect(createOperationCR).toHaveBeenCalledTimes(1);
+    expect((createOperationCR as jest.Mock).mock.calls[0][1]).toBe(OPERATION.ETCD_SNAPSHOT_RESTORE);
+    expect((createOperationCR as jest.Mock).mock.calls[0][2]).toStrictEqual({
+      clusterRef: {
+        apiVersion: 'management.cattle.io/v3',
+        kind:       'Cluster',
+        name:       'c-m-imported',
+      },
+      args: { name: 'snapshot-file-2' },
+    });
+    expect((createOperationCR as jest.Mock).mock.calls[0][3]).toBe('c-m-imported');
+    expect((createOperationCR as jest.Mock).mock.calls[0][4]).toBe('c-m-imported');
+    expect(buttonDone).toHaveBeenCalledWith(true);
+    expect(byId).toHaveBeenCalledWith(CAPI.RANCHER_CLUSTER, 'fleet-default/imported-cluster');
+  });
 });

package/components/fleet/GitRepoAdvancedTab.vue

@@ -157,6 +157,7 @@ const validatePollingInterval = () => {
       label-key="fleet.gitRepo.auth.git"
       :cache-secrets="true"
       :show-ssh-known-hosts="true"
+      :allow-github-app="true"
       :is-github-dot-com-repository="isGithubDotComRepository"
       @update:value="updateAuth($event, 'clientSecretName')"
       @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"

package/components/fleet/GitRepoMetadataTab.vue

@@ -14,6 +14,10 @@ defineProps({
   isView: {
     type:    Boolean,
     default: false
+  },
+  nameRules: {
+    type:    Array,
+    default: () => []
   }
 });
 
@@ -31,6 +35,7 @@ const updateValue = (event) => {
       :value="value"
       :namespaced="false"
       :mode="mode"
+      :rules="{ name: nameRules }"
       @update:value="updateValue"
     />
     <Labels

package/components/fleet/HelmOpAppCoConfigTab.vue

@@ -50,6 +50,7 @@ const props = withDefaults(defineProps<{
   hideTarget?: boolean;
   hideAdvanced?: boolean;
   hideChartConfig?: boolean;
+  nameRules?: ((val: any) => string | undefined)[];
 }>(), {
   appCoChartEntries:        () => ({} as Record<string, ChartEntry[]>),
   appCoChartsLoading:       false,
@@ -69,6 +70,7 @@ const props = withDefaults(defineProps<{
   hideTarget:               false,
   hideAdvanced:             false,
   hideChartConfig:          false,
+  nameRules:                () => [],
 });
 
 // eslint-disable-next-line func-call-spacing
@@ -309,6 +311,7 @@ defineExpose({ refreshYamlEditor });
           :mode="mode"
           :name-label="'fleet.helmOp.appCoConfig.name'"
           :no-bottom-margin="true"
+          :rules="{ name: nameRules }"
           data-testid="appco-config-name-ns-description"
           @update:value="emit('update:value', $event)"
         />
@@ -354,6 +357,7 @@ defineExpose({ refreshYamlEditor });
           :namespaced="false"
           :mode="mode"
           :name-label="'fleet.helmOp.appCoConfig.name'"
+          :rules="{ name: nameRules }"
           data-testid="appco-config-name-ns-description"
           @update:value="emit('update:value', $event)"
         />

package/components/fleet/HelmOpMetadataTab.vue

@@ -14,6 +14,10 @@ defineProps({
   isView: {
     type:    Boolean,
     default: false
+  },
+  nameRules: {
+    type:    Array,
+    default: () => []
   }
 });
 
@@ -31,6 +35,7 @@ const updateValue = (value) => {
       :value="value"
       :namespaced="false"
       :mode="mode"
+      :rules="{ name: nameRules }"
       @update:value="updateValue"
     />
     <Labels

package/components/form/FileSelector.vue

@@ -1,6 +1,7 @@
 <script>
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { set } from '@shell/utils/object';
+import { RcButton } from '@components/RcButton';
 
 export function createOnSelected(field) {
   return function(contents) {
@@ -11,6 +12,8 @@ export function createOnSelected(field) {
 export default {
   emits: ['error', 'selected'],
 
+  components: { RcButton },
+
   props: {
     label: {
       type:     String,
@@ -70,6 +73,15 @@ export default {
     class: {
       type:    [String, Array],
       default: () => [],
+    },
+
+    /**
+     * Render the trigger as a small, secondary RcButton instead of the default
+     * plain button.
+     */
+    asRcButton: {
+      type:    Boolean,
+      default: false,
     }
 
   },
@@ -82,6 +94,11 @@ export default {
     customClass() {
       return ['file-selector', 'btn', ...(Array.isArray(this.class) ? this.class : [this.class])];
     },
+
+    // RcButton provides its own `btn` class, so we omit it here to avoid clashing styles
+    rcButtonClass() {
+      return ['file-selector', ...(Array.isArray(this.class) ? this.class : [this.class])];
+    },
   },
 
   methods: {
@@ -154,8 +171,29 @@ export default {
 </script>
 
 <template>
+  <RcButton
+    v-if="!isView && asRcButton"
+    variant="secondary"
+    size="small"
+    :disabled="disabled"
+    :aria-label="label"
+    :class="rcButtonClass"
+    data-testid="file-selector__uploader-button"
+    @click="selectFile"
+  >
+    <span>{{ label }}</span>
+    <input
+      ref="uploader"
+      type="file"
+      class="hide"
+      :multiple="multiple"
+      :webkitdirectory="directory"
+      :accept="accept"
+      @change="fileChange"
+    >
+  </RcButton>
   <button
-    v-if="!isView"
+    v-else-if="!isView"
     :disabled="disabled"
     :aria-label="label"
     type="button"

package/components/form/PrivateRegistry.constants.ts

@@ -0,0 +1,7 @@
+export const PRIVATE_REGISTRY_CONTEXT = {
+  PROVISIONING: 'provisioning',
+  IMPORTING:    'importing',
+  CHARTS:       'charts',
+} as const;
+
+export type PrivateRegistryContext = typeof PRIVATE_REGISTRY_CONTEXT[keyof typeof PRIVATE_REGISTRY_CONTEXT];

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>