Page MenuHomePhabricator
Files F3379617

D3809.diff
No OneTemporary
Actions

D3809.diff
View Options

diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -27,6 +27,7 @@
import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
+import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react';
@@ -197,16 +198,28 @@
);
}, [onClickLeaveThread, threadInfo]);
+ const onClickPromoteSidebarToThread = React.useCallback(
+ () =>
+ pushModal(
+ <SidebarPromoteModal
+ threadInfo={threadInfo}
+ onClose={popModal}
+ onConfirm={onPromoteSidebar}
+ />,
+ ),
+ [pushModal, threadInfo, popModal, onPromoteSidebar],
+ );
+
const promoteSidebar = React.useMemo(() => {
return (
<MenuItem
key="promote"
text="Promote Thread"
icon="message-square-lines"
- onClick={onPromoteSidebar}
+ onClick={onClickPromoteSidebarToThread}
/>
);
- }, [onPromoteSidebar]);
+ }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => {
const notificationsItem = (
diff --git a/web/modals/chat/sidebar-promote-modal.css b/web/modals/chat/sidebar-promote-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/sidebar-promote-modal.css
@@ -0,0 +1,16 @@
+div.modal_body {
+ padding: 20px;
+ color: var(--fg);
+ background-color: var(--modal-bg);
+ border-radius: 16px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+div.buttonContainer {
+ padding-top: 32px;
+ display: flex;
+ gap: 24px;
+ justify-content: flex-end;
+}
diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/sidebar-promote-modal.react.js
@@ -0,0 +1,49 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import Button from '../../components/button.react';
+import Modal from '../modal.react';
+import css from './sidebar-promote-modal.css';
+
+type Props = {
+ +onClose: () => void,
+ +onConfirm: () => void,
+ +threadInfo: ThreadInfo,
+};
+
+function SidebarPromoteModal(props: Props): React.Node {
+ const { threadInfo, onClose, onConfirm } = props;
+ const { uiName } = threadInfo;
+
+ const handleConfirm = React.useCallback(() => {
+ onConfirm();
+ onClose();
+ }, [onClose, onConfirm]);
+
+ return (
+ <Modal
+ size="large"
+ name="Promote Thread"
+ icon="warning-circle"
+ onClose={onClose}
+ >
+ <div className={css.modal_body}>
+ <p>{`Are you sure you want to promote "${uiName}"?`}</p>
+ <p>Promoting a sidebar to a full thread cannot be undone.</p>
+ <div className={css.buttonContainer}>
+ <Button onClick={onClose} type="submit" variant="secondary">
+ Cancel
+ </Button>
+ <Button onClick={handleConfirm} type="submit" variant="danger">
+ Promote to Full Thread
+ </Button>
+ </div>
+ </div>
+ </Modal>
+ );
+}
+
+export default SidebarPromoteModal;

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 5:38 PM (21 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594535
Default Alt Text
D3809.diff (3 KB)

Event Timeline