Page MenuHomePhabricator
Files F3369059

D10081.id34021.diff
No OneTemporary
Actions

D10081.id34021.diff
View Options

diff --git a/web/roles/delete-role-modal.css b/web/modals/confirmation-alert.css
copy from web/roles/delete-role-modal.css
copy to web/modals/confirmation-alert.css
--- a/web/roles/delete-role-modal.css
+++ b/web/modals/confirmation-alert.css
@@ -1,20 +1,11 @@
-.roleDeletionText {
- color: var(--modal-fg);
- font-size: var(--m-font-14);
- padding: 16px 32px;
-}
-
.buttonsContainer {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 16px 32px;
+ column-gap: 8px;
}
.cancelButton {
width: 100px;
}
-
-.deleteRoleButton {
- margin-left: 8px;
-}
diff --git a/web/modals/confirmation-alert.react.js b/web/modals/confirmation-alert.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/confirmation-alert.react.js
@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './confirmation-alert.css';
+import Modal from './modal.react.js';
+import Button, { buttonThemes } from '../components/button.react.js';
+
+type Props = {
+ +children: React.Node,
+ +title: string,
+ +confirmationButtonContent: React.Node,
+ +onConfirm: () => mixed,
+ +isDestructive?: boolean,
+};
+
+function ConfirmationAlert(props: Props): React.Node {
+ const {
+ children,
+ title,
+ confirmationButtonContent,
+ onConfirm,
+ isDestructive = false,
+ } = props;
+ const { popModal } = useModalContext();
+
+ return (
+ <Modal name={title} onClose={popModal} size="large">
+ {children}
+ <div className={css.buttonsContainer}>
+ <Button
+ variant="outline"
+ className={css.cancelButton}
+ buttonColor={buttonThemes.outline}
+ onClick={popModal}
+ >
+ Cancel
+ </Button>
+ <Button
+ variant="filled"
+ buttonColor={
+ isDestructive ? buttonThemes.danger : buttonThemes.primary
+ }
+ onClick={onConfirm}
+ >
+ {confirmationButtonContent}
+ </Button>
+ </div>
+ </Modal>
+ );
+}
+
+export default ConfirmationAlert;
diff --git a/web/roles/delete-role-modal.css b/web/roles/delete-role-modal.css
--- a/web/roles/delete-role-modal.css
+++ b/web/roles/delete-role-modal.css
@@ -3,18 +3,3 @@
font-size: var(--m-font-14);
padding: 16px 32px;
}
-
-.buttonsContainer {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- padding: 16px 32px;
-}
-
-.cancelButton {
- width: 100px;
-}
-
-.deleteRoleButton {
- margin-left: 8px;
-}
diff --git a/web/roles/delete-role-modal.react.js b/web/roles/delete-role-modal.react.js
--- a/web/roles/delete-role-modal.react.js
+++ b/web/roles/delete-role-modal.react.js
@@ -15,9 +15,8 @@
import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
import css from './delete-role-modal.css';
-import Button, { buttonThemes } from '../components/button.react.js';
import LoadingIndicator from '../loading-indicator.react.js';
-import Modal from '../modals/modal.react.js';
+import ConfirmationAlert from '../modals/confirmation-alert.react.js';
import { useSelector } from '../redux/redux-utils.js';
const deleteRoleLoadingStatusSelector = createLoadingStatusSelector(
@@ -81,27 +80,14 @@
}, [deleteRoleLoadingStatus]);
return (
- <Modal name="Delete role" onClose={popModal} size="large">
+ <ConfirmationAlert
+ title="Delete role"
+ confirmationButtonContent={deleteButtonContent}
+ onConfirm={onDeleteRole}
+ isDestructive
+ >
<div className={css.roleDeletionText}>{message}</div>
- <div className={css.buttonsContainer}>
- <Button
- variant="outline"
- className={css.cancelButton}
- buttonColor={buttonThemes.outline}
- onClick={popModal}
- >
- Cancel
- </Button>
- <Button
- variant="filled"
- className={css.deleteRoleButton}
- buttonColor={buttonThemes.danger}
- onClick={onDeleteRole}
- >
- {deleteButtonContent}
- </Button>
- </div>
- </Modal>
+ </ConfirmationAlert>
);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 9:34 PM (19 h, 51 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2585999
Default Alt Text
D10081.id34021.diff (4 KB)

Event Timeline