fix: Save button remains in loading state after saving app settings

[sushen123]

Proposed changes (including videos or screenshots)

This PR fixes an issue where the save button in the app settings page remains in a loading state even after the settings have been successfully saved. The issue occurs because the loading prop of the save button depends on both isSubmitting and isSubmitted states from react-hook-form. The isSubmitted state remains true after submission, causing the button to stay in a loading state indefinitely.

Before:

Screencast.2025-03-04.18.46.27.mp4

After:
https://github.com/user-attachments/assets/f81958e1-6e15-49cb-8b32-38dbec9aee4f

Issue(s)

Closes #35391
CORE-1012

Steps to test or reproduce

• Go to Apps Marketplace.
• Click on Private Apps.
• Click on one Apps
• Open the Settings tab f.
• Modify one or more settings.
• Click the Save Changes button.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is targeting the wrong base branch. It should target 7.6.0, but it targets 7.5.0

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: ef85018

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/apps	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/freeswitch	Patch
@rocket.chat/fuselage-ui-kit	Patch
@rocket.chat/gazzodown	Patch
@rocket.chat/livechat	Patch
@rocket.chat/model-typings	Patch
@rocket.chat/ui-contexts	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/stream-hub-service	Patch
@rocket.chat/license	Patch
@rocket.chat/omnichannel-services	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
rocketchat-services	Patch
@rocket.chat/models	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/ui-avatar	Patch
@rocket.chat/ui-client	Patch
@rocket.chat/ui-video-conf	Patch
@rocket.chat/ui-voip	Patch
@rocket.chat/web-ui-registration	Patch
@rocket.chat/instance-status	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[abhinavkrin]

Hey @sushant52 , Thanks for identifying and fixing this issue.
Could you please add a change set?
Adding changeset guidelines

[sushen123]

Hey @sushant52 , Thanks for identifying and fixing this issue. Could you please add a change set? Adding changeset guidelines

Hey @abhinavkrin I’ve added the changeset as requested. You can look

[abhinavkrin]

After saving the settings, the footer which includes the save and cancel button should go away.
But currently it does not seem to be the case.

Screen.Recording.2025-03-05.at.3.21.33.PM.mov

Would suggest to reset the form in the saveAppSettings function so that the isDirty state resets for the form.

const saveAppSettings = useCallback(
		async (data: AppDetailsPageFormData) => {
			try {
				await AppClientOrchestratorInstance.setAppSettings(
					id,
					(Object.values(settings || {}) as ISetting[]).map((setting) => ({
						...setting,
						value: data[setting.id],
					})),
				);
				reset(data); // reset form here
				dispatchToastMessage({ type: 'success', message: `${name} settings saved succesfully` });
			} catch (e: any) {
				handleAPIError(e);
			}
		},
		[dispatchToastMessage, id, name, reset, settings],  // add to dependency
	);

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.72%. Comparing base (2178835) to head (ef85018).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #35394   +/-   ##
========================================
  Coverage    59.72%   59.72%           
========================================
  Files         2829     2829           
  Lines        68243    68243           
  Branches     15126    15126           
========================================
  Hits         40759    40759           
  Misses       24876    24876           
  Partials      2608     2608           

Flag	Coverage Δ
unit	75.92% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[sushen123]

After saving the settings, the footer which includes the save and cancel button should go away. But currently it does not seem to be the case.

Screen.Recording.2025-03-05.at.3.21.33.PM.mov
Would suggest to reset the form in the saveAppSettings function so that the isDirty state resets for the form.

const saveAppSettings = useCallback(
		async (data: AppDetailsPageFormData) => {
			try {
				await AppClientOrchestratorInstance.setAppSettings(
					id,
					(Object.values(settings || {}) as ISetting[]).map((setting) => ({
						...setting,
						value: data[setting.id],
					})),
				);
				reset(data); // reset form here
				dispatchToastMessage({ type: 'success', message: `${name} settings saved succesfully` });
			} catch (e: any) {
				handleAPIError(e);
			}
		},
		[dispatchToastMessage, id, name, reset, settings],  // add to dependency
	);

Thank you for pointing this out. I’ve implemented the fix. Let me know if there’s anything else I need to address

[abhinavkrin]

Looks good. Could you add tests for the fix? It is the last thing needed now. Tests make sure that such errors does not reoccur in future. Unit tests for AppDetailsPage.tsx ?

[sushen123]

Looks good. Could you add tests for the fix? It is the last thing needed now. Tests make sure that such errors does not reoccur in future. Unit tests for AppDetailsPage.tsx ?

Hey, I have added unit tests . I’m still learning how to write tests, I’d appreciate it if you could review them and let me know if there’s anything I need to improve or adjust.