fix(debug-files): Fix modal reload & initialValue issues (#26622)

Author: priscilawebdev

static/app/actionCreators/modal.tsx

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

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

@@ -12,7 +12,7 @@ import FieldFromConfig from 'app/views/settings/components/forms/fieldFromConfig
 import Form from 'app/views/settings/components/forms/form';
 
 import AppStoreConnect from './appStoreConnect';
-import {getFormFields} from './utils';
+import {getFormFields, getInitialData} from './utils';
 
 type AppStoreConnectInitialData = React.ComponentProps<
   typeof AppStoreConnect
@@ -27,7 +27,7 @@ type Props = WithRouterProps<RouteParams, {}> & {
   /**
    * Callback invoked with the updated config value.
    */
-  onSave: (config: Record<string, string>) => void;
+  onSave: (config: Record<string, any>) => void;
   /**
    * Type of this source.
    */
@@ -37,11 +37,10 @@ type Props = WithRouterProps<RouteParams, {}> & {
   /**
    * The sourceConfig. May be empty to create a new one.
    */
-  sourceConfig?: Record<string, string>;
-} & ModalRenderProps;
+  sourceConfig?: Record<string, any>;
+} & Pick<ModalRenderProps, 'Header' | 'Body' | 'Footer'>;
 
 function DebugFileCustomRepository({
-  closeModal,
   Header,
   Body,
   Footer,
@@ -52,9 +51,8 @@ function DebugFileCustomRepository({
   location,
   appStoreConnectContext,
 }: Props) {
-  function handleSave(data: Record<string, string>) {
+  function handleSave(data: Record<string, any>) {
     onSave({...data, type: sourceType});
-    closeModal();
   }
 
   if (sourceType === 'appStoreConnect') {
@@ -74,6 +72,7 @@ function DebugFileCustomRepository({
   }
 
   const fields = getFormFields(sourceType);
+  const initialData = getInitialData(sourceConfig);
 
   return (
     <Fragment>
@@ -86,7 +85,7 @@ function DebugFileCustomRepository({
         <Form
           allowUndo
           requireChanges
-          initialData={sourceConfig}
+          initialData={initialData}
           onSubmit={handleSave}
           footerClass="modal-footer"
         >

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

@@ -212,6 +212,20 @@ export function getFormFields(type: DebugFileSource) {
         commonFields.layoutCasing,
       ];
     default:
-      return null;
+      return undefined;
   }
 }
+
+export function getInitialData(sourceConfig?: Record<string, any>) {
+  if (!sourceConfig) {
+    return undefined;
+  }
+
+  if (sourceConfig.layout) {
+    const {layout, ...initialData} = sourceConfig;
+    const {casing, type} = layout;
+    return {...initialData, ['layout.casing']: casing, ['layout.type']: type};
+  }
+
+  return sourceConfig;
+}

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 {openDebugFileSourceModal} from 'app/actionCreators/modal';
+import {closeModal, openDebugFileSourceModal} from 'app/actionCreators/modal';
 import ProjectActions from 'app/actions/projectActions';
 import {Client} from 'app/api';
 import Feature from 'app/components/acl/feature';
@@ -211,10 +211,7 @@ function SymbolSources({
       sourceType: item.type,
       appStoreConnectContext,
       onSave: updatedData => handleUpdateSymbolSource(updatedData as Item, item.index),
-      onClose:
-        sourceConfig && sourceConfig.type === 'appStoreConnect'
-          ? undefined
-          : handleCloseImageDetailsModal,
+      onClose: handleCloseImageDetailsModal,
     });
   }
 
@@ -263,12 +260,12 @@ function SymbolSources({
 
       ProjectActions.updateSuccess(updatedProjectDetails);
       addSuccessMessage(successMessage);
+      closeModal();
       if (updatedItem && updatedItem.type === 'appStoreConnect') {
-        handleCloseImageDetailsModal();
         reloadPage();
       }
     } catch {
-      handleCloseImageDetailsModal();
+      closeModal();
       addErrorMessage(errorMessage);
     }
   }