UI: Update local MDM default team UI after editing it in the modal (#9384)

# Fixes

On MDM settings page, local state of the MDM default team was not
getting updated when the user updates that team via the edit team modal.
Now it's fixed.

**Before:**


https://user-images.githubusercontent.com/61553566/213004206-4f0bb138-24ca-406b-8f65-d98f4c443993.mov


**After:**


https://user-images.githubusercontent.com/61553566/213004263-efa46870-4d36-4067-a77d-d8f5300d55fe.mov




# Checklist for submitter

- [x] Manual QA for all new/changed functionality

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

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

@@ -40,6 +40,7 @@ const Mdm = (): JSX.Element => {
 
   const [showRequestCSRModal, setShowRequestCSRModal] = useState(false);
   const [showEditTeamModal, setShowEditTeamModal] = useState(false);
+  const [defaultTeamName, setDefaultTeamName] = useState("No team");
 
   const [showCSRFlag, setShowCSRFlag] = useState(true);
 
@@ -66,6 +67,9 @@ const Mdm = (): JSX.Element => {
     {
       enabled: isPremiumTier,
       staleTime: 5000,
+      onSuccess: (appleBmData) => {
+        setDefaultTeamName(appleBmData.default_team ?? "No team");
+      },
     }
   );
 
@@ -242,7 +246,7 @@ const Mdm = (): JSX.Element => {
             </TooltipWrapper>
           </h4>
           <p>
-            {mdmAppleBm.default_team || "No team"}{" "}
+            {defaultTeamName}{" "}
             <Button
               className={`${baseClass}__edit-team-btn`}
               onClick={toggleEditTeamModal}
@@ -285,7 +289,10 @@ const Mdm = (): JSX.Element => {
       {showEditTeamModal && (
         <EditTeamModal
           onCancel={toggleEditTeamModal}
-          currentDefaultTeamName={mdmAppleBm?.default_team}
+          defaultTeamName={defaultTeamName}
+          onUpdateSuccess={(newDefaultTeamName) =>
+            setDefaultTeamName(newDefaultTeamName)
+          }
         />
       )}
     </div>

frontend/pages/admin/IntegrationsPage/cards/Mdm/components/EditTeamModal.tsx

@@ -11,35 +11,36 @@ import Dropdown from "components/forms/fields/Dropdown";
 
 interface IEditTeamModal {
   onCancel: () => void;
-  currentDefaultTeamName: string | undefined;
+  defaultTeamName: string;
+  onUpdateSuccess: (newName: string) => void;
 }
 
 const baseClass = "edit-team-modal";
 
 const EditTeamModal = ({
   onCancel,
-  currentDefaultTeamName,
+  defaultTeamName,
+  onUpdateSuccess,
 }: IEditTeamModal): JSX.Element => {
   const { availableTeams } = useContext(AppContext);
 
+  const [selectedTeam, setSelectedTeam] = useState(defaultTeamName);
+
   const teamNameOptions = availableTeams?.map((teamSummary) => {
     return { value: teamSummary.name, label: teamSummary.name };
   });
 
-  const [defaultTeamName, setDefaultTeamName] = useState(
-    currentDefaultTeamName
-  );
-
   const [isLoading, setIsLoading] = useState(false);
 
   const onFormSubmit = async (event: FormEvent) => {
     event.preventDefault();
     try {
       setIsLoading(true);
-      await configAPI.update({
-        mdm: { apple_bm_default_team: defaultTeamName },
+      const configData = await configAPI.update({
+        mdm: { apple_bm_default_team: selectedTeam },
       });
       setIsLoading(false);
+      onUpdateSuccess(configData.mdm.apple_bm_default_team);
     } finally {
       onCancel();
     }
@@ -50,10 +51,10 @@ const EditTeamModal = ({
       <form className={`${baseClass}__form`} onSubmit={onFormSubmit}>
         <div className="bottom-label">
           <Dropdown
-            placeholder={defaultTeamName ?? "No team"}
+            placeholder={selectedTeam}
             options={teamNameOptions}
-            onChange={setDefaultTeamName}
-            value={defaultTeamName ?? ""}
+            onChange={setSelectedTeam}
+            value={selectedTeam}
             label="Team"
           />
           <p>