fix(app-store-connect): Fix closeModal + refresh on save (#26828)

static/app/actionCreators/modal.tsx

@@ -196,7 +196,7 @@ export type SentryAppDetailsModalOptions = {
 
 type DebugFileSourceModalOptions = {
   sourceType: DebugFileSource;
-  onSave: (data: Record<string, any>) => void;
+  onSave: (data: Record<string, any>) => Promise<void>;
   appStoreConnectContext?: AppStoreConnectContextProps;
   onClose?: () => void;
   sourceConfig?: Record<string, any>;

static/app/components/modals/debugFileCustomRepository/appStoreConnect/index.tsx

@@ -45,7 +45,7 @@ type ItunesRevalidationSessionContext = SessionContext & {
   itunes_session: string;
 };
 
-type IntialData = {
+type InitialData = {
   appId: string;
   appName: string;
   appconnectIssuer: string;
@@ -68,10 +68,10 @@ type Props = Pick<ModalRenderProps, 'Header' | 'Body' | 'Footer'> & {
   api: Client;
   orgSlug: Organization['slug'];
   projectSlug: Project['slug'];
-  onSubmit: (data: IntialData) => void;
+  onSubmit: (data: InitialData) => void;
   location: Location;
   appStoreConnectContext?: AppStoreConnectContextProps;
-  initialData?: IntialData;
+  initialData?: InitialData;
 };
 
 const steps = [
@@ -263,7 +263,7 @@ function AppStoreConnect({
           sessionContext: newSessionContext ?? sessionContext,
         },
       });
-      onSubmit(response as IntialData);
+      onSubmit(response as InitialData);
     } catch (error) {
       setIsLoading(false);
       addErrorMessage(errorMessage);

static/app/components/modals/debugFileCustomRepository/index.tsx

@@ -27,7 +27,7 @@ type Props = WithRouterProps<RouteParams, {}> & {
   /**
    * Callback invoked with the updated config value.
    */
-  onSave: (config: Record<string, any>) => void;
+  onSave: (data: Record<string, any>) => Promise<void>;
   /**
    * Type of this source.
    */
@@ -38,7 +38,7 @@ type Props = WithRouterProps<RouteParams, {}> & {
    * The sourceConfig. May be empty to create a new one.
    */
   sourceConfig?: Record<string, any>;
-} & Pick<ModalRenderProps, 'Header' | 'Body' | 'Footer'>;
+} & Pick<ModalRenderProps, 'Header' | 'Body' | 'Footer' | 'closeModal'>;
 
 function DebugFileCustomRepository({
   Header,
@@ -50,9 +50,19 @@ function DebugFileCustomRepository({
   params: {orgId, projectId: projectSlug},
   location,
   appStoreConnectContext,
+  closeModal,
 }: Props) {
   function handleSave(data: Record<string, any>) {
-    onSave({...data, type: sourceType});
+    onSave({...data, type: sourceType}).then(() => {
+      closeModal();
+
+      if (
+        sourceType === 'appStoreConnect' &&
+        appStoreConnectContext?.updateAlertMessage
+      ) {
+        window.location.reload();
+      }
+    });
   }
 
   if (sourceType === 'appStoreConnect') {

static/app/views/settings/projectDebugFiles/externalSources/symbolSources.tsx

@@ -5,7 +5,7 @@ import {Location} from 'history';
 import omit from 'lodash/omit';
 
 import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
-import {closeModal, openDebugFileSourceModal} from 'app/actionCreators/modal';
+import {openDebugFileSourceModal} from 'app/actionCreators/modal';
 import ProjectActions from 'app/actions/projectActions';
 import {Client} from 'app/api';
 import Feature from 'app/components/acl/feature';
@@ -23,6 +23,7 @@ import {IconRefresh, IconWarning} from 'app/icons';
 import {t, tct, tn} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization, Project} from 'app/types';
+import {defined} from 'app/utils';
 import Field from 'app/views/settings/components/forms/field';
 import RichListField from 'app/views/settings/components/forms/richListField';
 import TextBlock from 'app/views/settings/components/text/textBlock';
@@ -210,20 +211,21 @@ function SymbolSources({
       sourceConfig,
       sourceType: item.type,
       appStoreConnectContext,
-      onSave: updatedData => handleUpdateSymbolSource(updatedData as Item, itemIndex),
-      onClose: handleCloseImageDetailsModal,
+      onSave: updatedItem =>
+        handleSaveModal({updatedItem: updatedItem as Item, index: itemIndex}),
+      onClose: handleCloseModal,
     });
   }
 
-  function getRequestMessages(symbolSourcesQuantity: number) {
-    if (symbolSourcesQuantity > symbolSources.length) {
+  function getRequestMessages(updatedSymbolSourcesQuantity: number) {
+    if (updatedSymbolSourcesQuantity > symbolSources.length) {
       return {
         successMessage: t('Successfully added custom repository'),
         errorMessage: t('An error occurred while adding a new custom repository'),
       };
     }
 
-    if (symbolSourcesQuantity < symbolSources.length) {
+    if (updatedSymbolSourcesQuantity < symbolSources.length) {
       return {
         successMessage: t('Successfully removed custom repository'),
         errorMessage: t('An error occurred while removing the custom repository'),
@@ -236,50 +238,53 @@ function SymbolSources({
     };
   }
 
-  async function handleChange(updatedSymbolSources: Item[], updatedItem?: Item) {
-    const symbolSourcesWithoutErrors = updatedSymbolSources.map(updatedSymbolSource =>
-      omit(updatedSymbolSource, ['error', 'warning'])
-    );
+  function handleSaveModal({
+    updatedItems,
+    updatedItem,
+    index,
+  }: {
+    updatedItems?: Item[];
+    updatedItem?: Item;
+    index?: number;
+  }) {
+    let items = updatedItems ?? [];
+
+    if (updatedItem && defined(index)) {
+      items = [...symbolSources] as Item[];
+      items.splice(index, 1, updatedItem);
+    }
 
-    const {successMessage, errorMessage} = getRequestMessages(
-      updatedSymbolSources.length
+    const symbolSourcesWithoutErrors = items.map(item =>
+      omit(item, ['error', 'warning'])
     );
 
-    const expandedSymbolSourceKeys = symbolSourcesWithoutErrors.map(expandKeys);
+    const {successMessage, errorMessage} = getRequestMessages(items.length);
 
-    try {
-      const updatedProjectDetails: Project = await api.requestPromise(
-        `/projects/${organization.slug}/${projectSlug}/`,
-        {
-          method: 'PUT',
-          data: {
-            symbolSources: JSON.stringify(expandedSymbolSourceKeys),
-          },
-        }
-      );
+    const expandedSymbolSourceKeys = symbolSourcesWithoutErrors.map(expandKeys);
 
-      ProjectActions.updateSuccess(updatedProjectDetails);
-      addSuccessMessage(successMessage);
-      closeModal();
-      if (updatedItem && updatedItem.type === 'appStoreConnect') {
-        // TODO(Priscila): check the reason why the closeModal doesn't call the function
-        // handleCloseImageDetailsModal when revalidating
-        handleCloseImageDetailsModal();
-        reloadPage();
+    const promise: Promise<any> = api.requestPromise(
+      `/projects/${organization.slug}/${projectSlug}/`,
+      {
+        method: 'PUT',
+        data: {
+          symbolSources: JSON.stringify(expandedSymbolSourceKeys),
+        },
       }
-    } catch {
-      closeModal();
+    );
+
+    promise.catch(() => {
       addErrorMessage(errorMessage);
-    }
-  }
+    });
 
-  function handleUpdateSymbolSource(updatedItem: Item, index: number) {
-    const items = [...symbolSources] as Item[];
-    items.splice(index, 1, updatedItem);
-    handleChange(items, updatedItem);
+    promise.then(result => {
+      ProjectActions.updateSuccess(result);
+      addSuccessMessage(successMessage);
+    });
+
+    return promise;
   }
 
-  function handleOpenDebugFileSourceModalToEdit(repositoryId: string) {
+  function handleEditModal(repositoryId: string) {
     router.push({
       ...location,
       query: {
@@ -289,13 +294,7 @@ function SymbolSources({
     });
   }
 
-  function reloadPage() {
-    if (appStoreConnectContext && appStoreConnectContext.updateAlertMessage) {
-      window.location.reload();
-    }
-  }
-
-  function handleCloseImageDetailsModal() {
+  function handleCloseModal() {
     router.push({
       ...location,
       query: {
@@ -361,23 +360,24 @@ function SymbolSources({
           addButtonText={t('Add Repository')}
           name="symbolSources"
           value={value}
-          onChange={handleChange}
+          onChange={(updatedItems: Item[]) => {
+            handleSaveModal({updatedItems});
+          }}
           renderItem={item => (
             <TextOverflow>{item.name ?? t('<Unnamed Repository>')}</TextOverflow>
           )}
           disabled={!organization.features.includes('custom-symbol-sources')}
           formatMessageValue={false}
-          onAddItem={(item, addItem) =>
+          onEditItem={item => handleEditModal(item.id)}
+          onAddItem={(item, addItem) => {
             openDebugFileSourceModal({
               sourceType: item.value,
-              onSave: addItem,
-            })
-          }
-          onEditItem={item => handleOpenDebugFileSourceModalToEdit(item.id)}
+              onSave: updatedData => Promise.resolve(addItem(updatedData as Item)),
+            });
+          }}
           removeConfirm={{
             onConfirm: item => {
               if (item.type === 'appStoreConnect') {
-                handleCloseImageDetailsModal();
                 window.location.reload();
               }
             },