Fix issue where end-user sso form sometimes shows stale data (#35469)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #35322

# Details

Since the end-user auth form uses calls its own API rather than the
common config update handler in the parent `IntegrationsPage`, we need
to notify that parent when updates occur so that it can re-fetch the app
config which serves as the base state for all of the sub-sections.

# Checklist for submitter

## Testing

- [ ] Added/updated automated tests
- [X] QA'd all new/changed functionality manually

For unreleased bug fixes in a release candidate, one of:

- [X] Confirmed that the fix is not expected to adversely impact load
test results

frontend/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -60,9 +60,17 @@ const IntegrationsPage = ({
         return false;
       }
 
+      const diff = deepDifference(formUpdates, appConfig);
+
+      // If there's no actual change, don't make the API call to update config.
+      // Still refetch in case settings were changed inside a card (like end-user auth).
+      if (Object.keys(diff).length === 0) {
+        refetchConfig();
+        return true;
+      }
+
       setIsUpdatingSettings(true);
 
-      const diff = deepDifference(formUpdates, appConfig);
       // send all formUpdates.agent_options because diff overrides all agent options
       diff.agent_options = formUpdates.agent_options;
 

frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/components/EndUserAuthSection/EndUserAuthSection.tsx

@@ -32,6 +32,7 @@ export interface IEndUserAuthSectionProps {
   formData: IFormDataIdp;
   setFormData: React.Dispatch<React.SetStateAction<IFormDataIdp>>;
   originalFormData: MutableRefObject<IFormDataIdp>;
+  onSubmit: () => void;
 }
 
 const EndUserAuthSection = ({
@@ -39,6 +40,9 @@ const EndUserAuthSection = ({
   formData,
   setFormData,
   originalFormData,
+  // Notify parent component of changes, since we're calling our own API
+  // rather than using the common config update handler.
+  onSubmit: announceChanges,
 }: IEndUserAuthSectionProps) => {
   const { config, isPremiumTier } = useContext(AppContext);
   const gitOpsModeEnabled = config?.gitops.gitops_mode_enabled;
@@ -98,6 +102,9 @@ const EndUserAuthSection = ({
         renderFlash("success", "Successfully updated end user authentication!");
         originalFormData.current = { ...formData };
         setDirty(false);
+        // Notify parent component of changes, since we're calling our own API
+        // rather than using the common config update handler.
+        announceChanges();
       } catch (err) {
         const ae = (typeof err === "object" ? err : {}) as AxiosResponse;
         if (ae.status === 422) {

frontend/pages/admin/IntegrationsPage/cards/Sso/Sso.tsx

@@ -334,12 +334,19 @@ const Sso = ({
     );
   };
 
+  const onSubmitEndUserSso = async () => {
+    // Notify parent component that it needs to re-fetch app config.
+    // No formUpdates needed because changes are made inside the card.
+    await handleSubmit({});
+  };
+
   const renderEndUserSsoTab = () => (
     <EndUserAuthSection
       setDirty={setFormDirty}
       formData={endUserFormData}
       setFormData={setEndUserFormData}
       originalFormData={originalEndUserFormData}
+      onSubmit={onSubmitEndUserSso}
     />
   );