diff --git a/client/src/components/User/Credentials/ServiceCredentials.vue b/client/src/components/User/Credentials/ServiceCredentials.vue index a6516b438e7b..31130c877437 100644 --- a/client/src/components/User/Credentials/ServiceCredentials.vue +++ b/client/src/components/User/Credentials/ServiceCredentials.vue @@ -26,13 +26,28 @@ const selectedSet = ref( ); const availableSets = computed(() => Object.values(props.credentialPayload.groups)); const newSetName = ref(""); -const canCreateNewSet = computed(() => newSetName.value.trim() !== ""); +const canCreateNewSet = computed( + () => newSetName.value.trim() !== "" && !availableSets.value.some((set) => set.name === newSetName.value) +); +const canShowSetSelector = computed( + () => props.credentialDefinition.multiple && availableSets.value.length > 1 +); +const isAddingNewSet = ref(false); const emit = defineEmits<{ (e: "new-credentials-set", credential: ServiceCredentialPayload, newSet: ServiceGroupPayload): void; (e: "update-current-set", credential: ServiceCredentialPayload, newSet: ServiceGroupPayload): void; }>(); +function onAddingNewSet() { + isAddingNewSet.value = true; +} + +function onCancelAddingNewSet() { + isAddingNewSet.value = false; + newSetName.value = ""; +} + function onCreateNewSet() { const newSet: ServiceGroupPayload = { name: generateUniqueName(newSetName.value, props.credentialPayload.groups), @@ -42,6 +57,8 @@ function onCreateNewSet() { emit("new-credentials-set", props.credentialPayload, newSet); selectedSet.value = newSet; onCurrentSetChange(newSet); + isAddingNewSet.value = false; + newSetName.value = ""; } function onCurrentSetChange(selectedSet: ServiceGroupPayload) { @@ -99,14 +116,14 @@ function getVariableDescription(name: string, type: CredentialType): string | un + title="You can provide multiple sets of credentials for this tool. But only one set can be active at a time."> Multiple

{{ credentialDefinition.description }}

-

- Select a set of credentials: +
+ Using set: - - - - -

+
@@ -142,6 +155,25 @@ function getVariableDescription(name: string, type: CredentialType): string | un :optional="credentialDefinition.optional" :help="getVariableDescription(secret.name, 'secret')" />
+ +
+ +
+ + + +
+
@@ -155,4 +187,9 @@ function getVariableDescription(name: string, type: CredentialType): string | un color: green; margin-left: 0.5em; } +.set-management-bar { + display: flex; + gap: 1em; + align-items: center; +}