Page MenuHomePhabricator
Files F3388549

D8419.id28351.diff
No OneTemporary
Actions

D8419.id28351.diff
View Options

diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -7,8 +7,9 @@
export type ButtonVariant = 'plain' | 'filled' | 'outline' | 'text';
export type ButtonColor = {
- +backgroundColor?: string,
- +color?: string,
+ +'backgroundColor'?: string,
+ +'color'?: string,
+ +'border-color'?: string,
};
export const buttonThemes: { [string]: ButtonColor } = {
diff --git a/web/invite-links/manage-invite-links-modal.react.js b/web/invite-links/manage-invite-links-modal.react.js
--- a/web/invite-links/manage-invite-links-modal.react.js
+++ b/web/invite-links/manage-invite-links-modal.react.js
@@ -8,6 +8,7 @@
import type { InviteLink } from 'lib/types/link-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+import DisableLinkModal from './manage/disable-link-modal.react.js';
import EditLinkModal from './manage/edit-link-modal.react.js';
import EmptyLinkContent from './manage/empty-link-content.react.js';
import ExistingLinkContent from './manage/existing-link-content.react.js';
@@ -33,17 +34,32 @@
const [modalStage, setModalStage] = React.useState('view');
const enterEditMode = React.useCallback(() => setModalStage('edit'), []);
const enterViewMode = React.useCallback(() => setModalStage('view'), []);
+ const enterDisableMode = React.useCallback(
+ () => setModalStage('disable'),
+ [],
+ );
if (modalStage === 'edit') {
return (
<EditLinkModal
inviteLink={inviteLink}
enterViewMode={enterViewMode}
+ enterDisableMode={enterDisableMode}
community={community}
/>
);
}
+ if (modalStage === 'disable' && inviteLink) {
+ return (
+ <DisableLinkModal
+ inviteLink={inviteLink}
+ enterEditMode={enterEditMode}
+ enterViewMode={enterViewMode}
+ />
+ );
+ }
+
let content;
if (inviteLink) {
content = (
diff --git a/web/invite-links/manage/disable-link-modal.react.js b/web/invite-links/manage/disable-link-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/invite-links/manage/disable-link-modal.react.js
@@ -0,0 +1,61 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { useInviteLinksActions } from 'lib/hooks/invite-links.js';
+import type { InviteLink } from 'lib/types/link-types.js';
+
+import css from './manage-invite-links-modal.css';
+import Button, { buttonThemes } from '../../components/button.react.js';
+import Modal from '../../modals/modal.react.js';
+
+type Props = {
+ +inviteLink: InviteLink,
+ +enterEditMode: () => mixed,
+ +enterViewMode: () => mixed,
+};
+
+function DisableLinkModal(props: Props): React.Node {
+ const { inviteLink, enterEditMode, enterViewMode } = props;
+ const { popModal } = useModalContext();
+ const { isLoading, disableInviteLink } = useInviteLinksActions(
+ inviteLink.communityID,
+ inviteLink,
+ );
+ const disableLink = React.useCallback(async () => {
+ await disableInviteLink();
+ enterViewMode();
+ }, [disableInviteLink, enterViewMode]);
+
+ return (
+ <Modal name="Disable public link" onClose={popModal} size="large">
+ <div className={classnames(css.container, css.editLinkContainer)}>
+ <div>
+ Are you sure you want to disable your public link? Members who have
+ your community’s public link but have not joined will not able to with
+ the disabled link.
+ <br />
+ <br />
+ Other communities may also claim your previous public link url.
+ </div>
+ <div className={css.disableLinkButtons}>
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ disabled={isLoading}
+ onClick={disableLink}
+ >
+ Confirm disable
+ </Button>
+ <Button variant="outline" onClick={enterEditMode}>
+ Cancel
+ </Button>
+ </div>
+ </div>
+ </Modal>
+ );
+}
+
+export default DisableLinkModal;
diff --git a/web/invite-links/manage/edit-link-modal.react.js b/web/invite-links/manage/edit-link-modal.react.js
--- a/web/invite-links/manage/edit-link-modal.react.js
+++ b/web/invite-links/manage/edit-link-modal.react.js
@@ -17,11 +17,16 @@
type Props = {
+inviteLink: ?InviteLink,
+enterViewMode: () => mixed,
+ +enterDisableMode: () => mixed,
+community: ThreadInfo,
};
+const disableButtonColor = {
+ color: 'var(--error-primary)',
+ ['border-color']: 'var(--error-primary)',
+};
function EditLinkModal(props: Props): React.Node {
- const { inviteLink, enterViewMode, community } = props;
+ const { inviteLink, enterViewMode, enterDisableMode, community } = props;
const { popModal } = useModalContext();
const { error, isLoading, name, setName, createOrUpdateInviteLink } =
@@ -38,6 +43,25 @@
errorComponent = <div className={css.errorContainer}>{error}</div>;
}
+ let disableLinkComponent = null;
+ if (inviteLink) {
+ disableLinkComponent = (
+ <>
+ <hr className={css.separator} />
+ <div className={css.disableLinkRow}>
+ <div>You may also disable the community public link</div>
+ <Button
+ variant="outline"
+ buttonColor={disableButtonColor}
+ onClick={enterDisableMode}
+ >
+ Disable
+ </Button>
+ </div>
+ </>
+ );
+ }
+
return (
<Modal name="Public link" onClose={popModal} size="large">
<div className={classnames(css.container, css.editLinkContainer)}>
@@ -75,6 +99,7 @@
</Button>
</div>
</div>
+ {disableLinkComponent}
</div>
</Modal>
);
diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css
--- a/web/invite-links/manage/manage-invite-links-modal.css
+++ b/web/invite-links/manage/manage-invite-links-modal.css
@@ -74,3 +74,17 @@
font-size: var(--s-font-14);
color: var(--error-primary);
}
+
+.disableLinkRow {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ font-size: var(--s-font-14);
+}
+
+.disableLinkButtons {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 2:51 PM (19 h, 9 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2601352
Default Alt Text
D8419.id28351.diff (6 KB)

Event Timeline