style: improve destructive modals (#3552)

frontend/global.d.ts

@@ -1,5 +1,14 @@
 import { Component, FC, ReactNode } from 'react'
 import _Select from './web/components/Select'
+export type OpenConfirm = {
+  title: ReactNode
+  body: ReactNode
+  onYes: () => void
+  onNo?: () => void
+  destructive?: boolean
+  yesText?: string
+  noText?: string
+}
 import { TooltipProps } from './web/components/Tooltip'
 
 export declare const openModal: (name?: string) => Promise<void>
@@ -16,14 +25,7 @@ declare global {
     className?: string,
     onClose?: () => void,
   ) => void
-  const openConfirm: (
-    header: ReactNode,
-    body: ReactNode,
-    onYes: () => void,
-    onNo?: () => void,
-    yesText?: string,
-    noText?: string,
-  ) => void
+  const openConfirm: (data: OpenConfirm) => void
   const Row: typeof Component
   const toast: (value: string) => void
   const Flex: typeof Component

frontend/web/components/AdminAPIKeys.js

@@ -383,13 +383,14 @@ export default class AdminAPIKeys extends PureComponent {
   }
 
   remove = (v) => {
-    openConfirm(
-      'Are you sure?',
-      <div>
-        This will revoke the API key <strong>{v.name}</strong> ({v.prefix}
-        *****************). This change cannot be reversed.
-      </div>,
-      () => {
+    openConfirm({
+      body: (
+        <div>
+          This will revoke the API key <strong>{v.name}</strong> ({v.prefix}
+          *****************). This change cannot be undone.
+        </div>
+      ),
+      onYes: () => {
         data
           .delete(
             `${Project.api}organisations/${this.props.organisationId}/master-api-keys/${v.prefix}/`,
@@ -398,7 +399,9 @@ export default class AdminAPIKeys extends PureComponent {
             this.fetch()
           })
       },
-    )
+      title: 'Revoke the API key',
+      yesText: 'Confirm',
+    })
   }
 
   render() {

frontend/web/components/CollapsibleNestedRolePermissionsList.tsx

@@ -99,14 +99,14 @@ const CollapsibleNestedRolePermissionsList: React.FC<CollapsibleNestedRolePermis
           onClosing() {
             if (unsavedProjects.length > 0) {
               return new Promise((resolve) => {
-                openConfirm(
-                  'Are you sure?',
-                  'Closing this will discard your unsaved changes.',
-                  () => resolve(true),
-                  () => resolve(false),
-                  'Ok',
-                  'Cancel',
-                )
+                openConfirm({
+                  body: 'Closing this will discard your unsaved changes.',
+                  noText: 'Cancel',
+                  onNo: () => resolve(false),
+                  onYes: () => resolve(true),
+                  title: 'Discard changes',
+                  yesText: 'Ok',
+                })
               })
             } else {
               return Promise.resolve(true)

frontend/web/components/EditPermissions.tsx

@@ -116,14 +116,14 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = forwardRef(
       setInterceptClose(() => {
         if (valueChanged) {
           return new Promise((resolve) => {
-            openConfirm(
-              'Are you sure?',
-              'Closing this will discard your unsaved changes.',
-              () => resolve(true),
-              () => resolve(false),
-              'Ok',
-              'Cancel',
-            )
+            openConfirm({
+              body: 'Closing this will discard your unsaved changes.',
+              noText: 'Cancel',
+              onNo: () => resolve(false),
+              onYes: () => resolve(true),
+              title: 'Discard changes',
+              yesText: 'Ok',
+            })
           })
         } else {
           return Promise.resolve(true)

frontend/web/components/Feature.js

@@ -15,13 +15,15 @@ export default class Feature extends PureComponent {
     const idToRemove = this.props.multivariate_options[i].id
 
     if (idToRemove) {
-      openConfirm(
-        'Please confirm',
-        'This will remove the variation on your feature for all environments, if you wish to turn it off just for this environment you can set the % value to 0.',
-        () => {
+      openConfirm({
+        body: 'This will remove the variation on your feature for all environments, if you wish to turn it off just for this environment you can set the % value to 0.',
+        destructive: true,
+        onYes: () => {
           this.props.removeVariation(i)
         },
-      )
+        title: 'Delete variation',
+        yesText: 'Confirm',
+      })
     } else {
       this.props.removeVariation(i)
     }

frontend/web/components/IntegrationList.js

@@ -206,15 +206,17 @@ class IntegrationList extends Component {
       ? ProjectStore.getEnvironment(integration.flagsmithEnvironment)
       : ''
     const name = env && env.name
-    openConfirm(
-      'Confirm remove integration',
-      <span>
-        This will remove your integration from the{' '}
-        {integration.flagsmithEnvironment ? 'environment ' : 'project'}
-        {name ? <strong>{name}</strong> : ''}, it will no longer receive data.
-        Are you sure?
-      </span>,
-      () => {
+    openConfirm({
+      body: (
+        <span>
+          This will remove your integration from the{' '}
+          {integration.flagsmithEnvironment ? 'environment ' : 'project'}
+          {name ? <strong>{name}</strong> : ''}, it will no longer receive data.
+          Are you sure?
+        </span>
+      ),
+      destructive: true,
+      onYes: () => {
         if (integration.flagsmithEnvironment) {
           _data
             .delete(
@@ -231,7 +233,9 @@ class IntegrationList extends Component {
             .catch(this.onError)
         }
       },
-    )
+      title: 'Delete integration',
+      yesText: 'Confirm',
+    })
   }
 
   addIntegration = (integration, id) => {

frontend/web/components/SegmentOverrides.js

@@ -499,19 +499,22 @@ class TheComponent extends Component {
       }
       return
     }
-    openConfirm(
-      'Delete Segment Override',
-      <div>
-        {
-          'Are you sure you want to delete this segment override? This will be applied when you click Update Segment Overrides.'
-        }
-      </div>,
-      () => {
+    openConfirm({
+      body: (
+        <div>
+          {
+            'Are you sure you want to delete this segment override? This will be applied when you click Update Segment Overrides and cannot be undone.'
+          }
+        </div>
+      ),
+      destructive: true,
+      onYes: () => {
         this.props.value[i].toRemove = true
         this.setState({ isLoading: false })
       },
-      () => {},
-    )
+      title: 'Delete Segment Override',
+      yesText: 'Confirm',
+    })
   }
 
   setValue = (i, value) => {

frontend/web/components/ServerSideSDKKeys.js

@@ -112,13 +112,15 @@ class ServerSideSDKKeys extends Component {
   }
 
   remove = (id, name) => {
-    openConfirm(
-      'Delete Server-side Environment Keys',
-      <div>
-        The key <strong>{name}</strong> will be permanently deleted, are you
-        sure?
-      </div>,
-      () => {
+    openConfirm({
+      body: (
+        <div>
+          Are you sure you want to remove the SDK key <strong>{name}</strong>?
+          This action cannot be undone.
+        </div>
+      ),
+      destructive: true,
+      onYes: () => {
         this.setState({ isSaving: true })
         deleteServersideEnvironmentKeys(getStore(), {
           environmentId: this.props.environmentId,
@@ -129,7 +131,9 @@ class ServerSideSDKKeys extends Component {
             this.setState({ isSaving: false })
           })
       },
-    )
+      title: 'Delete Server-side Environment Keys',
+      yesText: 'Confirm',
+    })
   }
 
   fetch = (environmentId) => {

frontend/web/components/UserGroupList.tsx

@@ -37,15 +37,19 @@ const UserGroupsList: FC<UserGroupsListType> = ({
   const isAdmin = AccountStore.isAdmin()
 
   const removeGroup = (id: number, name: string) => {
-    openConfirm(
-      'Delete Group',
-      <div>
-        {'Are you sure you want to delete '}
-        <strong>{name}</strong>
-        {'?'}
-      </div>,
-      () => deleteGroup({ id, orgId }),
-    )
+    openConfirm({
+      body: (
+        <div>
+          {'Are you sure you want to delete '}
+          <strong>{name}</strong>
+          {'? This action cannot be undone.'}
+        </div>
+      ),
+      destructive: true,
+      onYes: () => deleteGroup({ id, orgId }),
+      title: 'Delete Group',
+      yesText: 'Confirm',
+    })
   }
 
   return (

frontend/web/components/import-export/ImportPage.tsx

@@ -173,19 +173,22 @@ const ImportPage: FC<ImportPageType> = ({
                       <Button
                         className='btn-project'
                         onClick={() =>
-                          openConfirm(
-                            'Import LaunchDarkly project',
-                            <span>
-                              Flagsmith will import {<strong>{name}</strong>} to{' '}
-                              {<strong>{projectName}</strong>}. Are you sure?
-                            </span>,
-                            () => {
-                              createImportLDProjects(LDKey, key, projectId)
-                            },
-                            () => {
+                          openConfirm({
+                            body: (
+                              <span>
+                                Flagsmith will import {<strong>{name}</strong>}{' '}
+                                to {<strong>{projectName}</strong>}. Are you
+                                sure?
+                              </span>
+                            ),
+                            onNo: () => {
                               return
                             },
-                          )
+                            onYes: () => {
+                              createImportLDProjects(LDKey, key, projectId)
+                            },
+                            title: 'Import LaunchDarkly project',
+                          })
                         }
                       >
                         <Row className='flex-nowrap'>

frontend/web/components/modals/ConfirmRemoveFeature.tsx

@@ -35,14 +35,15 @@ const ConfirmRemoveFeature: FC<ConfirmRemoveFeatureType> = ({
               {identity ? (
                 <p>
                   This will reset <strong>{projectFlag.name}</strong> for to the
-                  environment defaults for the user <strong>{identity}</strong>
+                  environment defaults for the user <strong>{identity}</strong>.
+                  This action cannot be undone.
                 </p>
               ) : (
                 <p>
                   This will remove <strong>{projectFlag.name}</strong> for{' '}
                   <strong>all environments</strong>. You should ensure that you
                   do not contain any references to this feature in your
-                  applications before proceeding.
+                  applications before proceeding. This action cannot be undone.
                 </p>
               )}
               <InputGroup
@@ -69,9 +70,9 @@ const ConfirmRemoveFeature: FC<ConfirmRemoveFeatureType> = ({
               id='confirm-remove-feature-btn'
               type='submit'
               disabled={challenge != projectFlag.name}
-              theme='primary'
+              theme='danger'
             >
-              Confirm changes
+              Confirm
             </Button>
           </div>
         </form>

frontend/web/components/modals/ConfirmRemoveOrganisation.tsx

@@ -33,7 +33,7 @@ const ConfirmRemoveOrganisation: FC<ConfirmRemoveOrganisationType> = ({
               This will remove <strong>{organisation.name}</strong> and{' '}
               <strong>all of it's projects</strong>. You should ensure that you
               do not contain any references to this organisation in your
-              applications before proceeding.
+              applications before proceeding. This action cannot be undone.
             </>
             <InputGroup
               className='mb-0'
@@ -53,9 +53,10 @@ const ConfirmRemoveOrganisation: FC<ConfirmRemoveOrganisationType> = ({
             <Button
               id='confirm-del-org-btn'
               type='submit'
+              theme='danger'
               disabled={challenge != organisation.name}
             >
-              Confirm changes
+              Confirm
             </Button>
           </div>
         </form>

frontend/web/components/modals/ConfirmRemoveProject.tsx

@@ -33,7 +33,7 @@ const ConfirmRemoveProject: FC<ConfirmRemoveProjectType> = ({
               This will remove <strong>{project.name}</strong> and{' '}
               <strong>all environments</strong>. You should ensure that you do
               not contain any references to this project in your applications
-              before proceeding.
+              before proceeding. This action cannot be undone.
             </p>
             <InputGroup
               className='mb-0'
@@ -51,8 +51,12 @@ const ConfirmRemoveProject: FC<ConfirmRemoveProjectType> = ({
             <Button className='mr-2' onClick={closeModal} theme='secondary'>
               Cancel
             </Button>
-            <Button disabled={challenge != project.name} type='submit'>
-              Confirm changes
+            <Button
+              theme='danger'
+              disabled={challenge != project.name}
+              type='submit'
+            >
+              Confirm
             </Button>
           </div>
         </form>