set autofocus on Cancel only for Open Team Membership for now

getsentry · Dec 20, 2024 · e592e58 · e592e58
1 parent 39e60ec
commit e592e58
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/static/app/components/confirm.tsx b/static/app/components/confirm.tsx
@@ -75,6 +75,12 @@ export type OpenConfirmOptions = {
    * Header of modal
    */
   header?: React.ReactNode;
+  /**
+   * By default, the Confirm button has autofocus.
+   * However, if `isDangerous` is true, the Cancel button receives autofocus instead,
+   * preventing users from accidental modification of dangerous settings.
+   */
+  isDangerous?: boolean;
   /**
    * Message to display to user when asking for confirmation
    */
@@ -213,6 +219,7 @@ type ModalProps = ModalRenderProps &
     | 'confirmText'
     | 'cancelText'
     | 'header'
+    | 'isDangerous'
     | 'onConfirm'
     | 'onCancel'
     | 'disableConfirmButton'
@@ -298,6 +305,7 @@ class ConfirmModal extends Component<ModalProps, ModalState> {
       confirmText,
       cancelText,
       header,
+      isDangerous,
       renderConfirmButton,
       renderCancelButton,
     } = this.props;
@@ -315,7 +323,7 @@ class ConfirmModal extends Component<ModalProps, ModalState> {
             ) : (
               <Button
                 onClick={this.handleClose}
-                autoFocus
+                autoFocus={!!isDangerous}
                 aria-label={typeof cancelText === 'string' ? cancelText : t('Cancel')}
               >
                 {cancelText ?? t('Cancel')}
@@ -332,6 +340,7 @@ class ConfirmModal extends Component<ModalProps, ModalState> {
                 disabled={this.state.disableConfirmButton}
                 priority={priority}
                 onClick={this.handleConfirm}
+                autoFocus={!isDangerous}
                 aria-label={typeof confirmText === 'string' ? confirmText : t('Confirm')}
               >
                 {confirmText ?? t('Confirm')}

diff --git a/static/app/components/forms/fields/booleanField.tsx b/static/app/components/forms/fields/booleanField.tsx
@@ -13,6 +13,7 @@ export interface BooleanFieldProps extends InputFieldProps {
     false?: React.ReactNode;
     true?: React.ReactNode;
   };
+  isDangerous?: boolean;
 }
 
 export default class BooleanField extends Component<BooleanFieldProps> {
@@ -33,7 +34,7 @@ export default class BooleanField extends Component<BooleanFieldProps> {
   };
 
   render() {
-    const {confirm, ...fieldProps} = this.props;
+    const {confirm, isDangerous, ...fieldProps} = this.props;
 
     return (
       <FormField {...fieldProps} resetOnError>
@@ -71,6 +72,7 @@ export default class BooleanField extends Component<BooleanFieldProps> {
               <Confirm
                 renderMessage={() => confirm[(!value).toString()]}
                 onConfirm={() => handleChange({})}
+                isDangerous={isDangerous}
               >
                 {({open}) => (
                   <Tooltip title={disabledReason} skipWrapper disabled={!disabled}>

diff --git a/static/app/components/forms/types.tsx b/static/app/components/forms/types.tsx
@@ -62,6 +62,7 @@ interface BaseField {
   hideLabel?: boolean;
   // TODO(ts): FormField prop?
   inline?: boolean;
+  isDangerous?: boolean;
   label?: React.ReactNode | (() => React.ReactNode);
   /**
    * May be used to give the field an aria-label when the field's label is a

diff --git a/static/app/data/forms/organizationMembershipSettings.tsx b/static/app/data/forms/organizationMembershipSettings.tsx
@@ -24,6 +24,7 @@ const formGroups: JsonFormObject[] = [
         type: 'boolean',
         label: t('Open Team Membership'),
         help: t('Allow organization members to freely join any team'),
+        isDangerous: true,
         confirm: {
           true: t(
             'This will allow any members of your organization to freely join any team and access any project of your organization. Do you want to continue?'