fix: Credentials save button is hidden unless you make changes to the (#11492)

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -88,6 +88,7 @@ const isDeleting = ref(false);
 const isSaving = ref(false);
 const isTesting = ref(false);
 const hasUnsavedChanges = ref(false);
+const isSaved = ref(false);
 const loading = ref(false);
 const showValidationWarning = ref(false);
 const testedSuccessfully = ref(false);
@@ -317,8 +318,8 @@ const defaultCredentialTypeName = computed(() => {
 
 const showSaveButton = computed(() => {
 	return (
-		(hasUnsavedChanges.value || !!credentialId.value) &&
-		(credentialPermissions.value.create || credentialPermissions.value.update)
+		(props.mode === 'new' || hasUnsavedChanges.value || isSaved.value) &&
+		(credentialPermissions.value.create ?? credentialPermissions.value.update)
 	);
 });
 
@@ -838,6 +839,7 @@ async function updateCredential(
 			isSharedWithChanged.value = false;
 		}
 		hasUnsavedChanges.value = false;
+		isSaved.value = true;
 
 		if (credential) {
 			await externalHooks.run('credential.saved', {
@@ -889,6 +891,7 @@ async function deleteCredential() {
 		isDeleting.value = true;
 		await credentialsStore.deleteCredential({ id: credentialId.value });
 		hasUnsavedChanges.value = false;
+		isSaved.value = true;
 	} catch (error) {
 		toast.showError(
 			error,
@@ -1074,7 +1077,7 @@ function resetCredentialData(): void {
 					/>
 					<SaveButton
 						v-if="showSaveButton"
-						:saved="!hasUnsavedChanges && !isTesting"
+						:saved="!hasUnsavedChanges && !isTesting && !!credentialId"
 						:is-saving="isSaving || isTesting"
 						:saving-label="
 							isTesting

packages/editor-ui/src/components/CredentialEdit/__tests__/CredentialEdit.test.ts

@@ -0,0 +1,70 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import CredentialEdit from '@/components/CredentialEdit/CredentialEdit.vue';
+import { createTestingPinia } from '@pinia/testing';
+import { CREDENTIAL_EDIT_MODAL_KEY, STORES } from '@/constants';
+import { cleanupAppModals, createAppModals, retry } from '@/__tests__/utils';
+
+vi.mock('@/permissions', () => ({
+	getResourcePermissions: vi.fn(() => ({
+		credential: {
+			create: true,
+			update: true,
+		},
+	})),
+}));
+
+const renderComponent = createComponentRenderer(CredentialEdit, {
+	pinia: createTestingPinia({
+		initialState: {
+			[STORES.UI]: {
+				modalsById: {
+					[CREDENTIAL_EDIT_MODAL_KEY]: { open: true },
+				},
+			},
+			[STORES.SETTINGS]: {
+				settings: {
+					templates: {
+						host: '',
+					},
+				},
+			},
+		},
+	}),
+});
+describe('CredentialEdit', () => {
+	beforeEach(() => {
+		createAppModals();
+	});
+
+	afterEach(() => {
+		cleanupAppModals();
+		vi.clearAllMocks();
+	});
+
+	test('shows the save button when credentialId is null', async () => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				isTesting: false,
+				isSaving: false,
+				hasUnsavedChanges: false,
+				modalName: CREDENTIAL_EDIT_MODAL_KEY,
+				mode: 'new',
+			},
+		});
+		await retry(() => expect(queryByTestId('credential-save-button')).toBeInTheDocument());
+	});
+
+	test('hides the save button when credentialId exists and there are no unsaved changes', async () => {
+		const { queryByTestId } = renderComponent({
+			props: {
+				activeId: '123', // credentialId will be set to this value in edit mode
+				isTesting: false,
+				isSaving: false,
+				hasUnsavedChanges: false,
+				modalName: CREDENTIAL_EDIT_MODAL_KEY,
+				mode: 'edit',
+			},
+		});
+		await retry(() => expect(queryByTestId('credential-save-button')).not.toBeInTheDocument());
+	});
+});