Page MenuHomePhabricator
Differential D8238

[web] Create link view modal
ClosedPublic
Actions

Authored by tomek on Jun 16 2023, 4:31 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 5:59 PM
Unknown Object (File)
Sat, Mar 8, 9:27 AM
Unknown Object (File)
Fri, Mar 7, 12:38 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:07 PM
Unknown Object (File)
Thu, Mar 6, 5:00 PM
View All 96 Files
Subscribers
ashoat

Details

Reviewers
bartek
kamil
inka
Commits
rCOMMc1e60b201e86: [web] Create link view modal
Summary

Display the modal after button click. The modal contains all the necessary info but doesn't handle copying yet.

view-invite-web.png (594×978 px, 53 KB)

Depends on D8237

Test Plan

Open the modal and check if it is displayed correctly.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Jun 16 2023, 4:31 AM
Herald added a subscriber: ashoat. · View Herald TranscriptJun 16 2023, 4:31 AM
tomek edited the summary of this revision. (Show Details)Jun 16 2023, 4:32 AM
tomek added a child revision: D8239: [web] Allow copying the link.Jun 16 2023, 4:33 AM
Harbormaster completed remote builds in B20309: Diff 27832.Jun 16 2023, 4:47 AM
tomek requested review of this revision.Jun 16 2023, 4:47 AM
inka accepted this revision.Jun 19 2023, 8:31 AM
This revision is now accepted and ready to land.Jun 19 2023, 8:31 AM
tomek edited parent revisions, added: D8292: [lib][native] Extract invite link url; removed: D8237: [web] Display invite links button conditionally.Jun 22 2023, 7:21 AM
tomek updated this revision to Diff 27998.Jun 22 2023, 7:24 AM
tomek added a parent revision: D8237: [web] Display invite links button conditionally.

Use link url function

tomek removed a parent revision: D8237: [web] Display invite links button conditionally.Jun 22 2023, 7:27 AM
Harbormaster failed remote builds in B20424: Diff 27998!Jun 22 2023, 7:47 AM
Harbormaster completed remote builds in B20424: Diff 27998.Jun 26 2023, 4:12 AM
Closed by commit rCOMMc1e60b201e86: [web] Create link view modal (authored by tomek). · Explain WhyJun 26 2023, 6:04 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMMc1e60b201e86: [web] Create link view modal.

Revision Contents
Changeset List

Diff 28108

View Options

web/invite-links/invite-links-menu.react.js

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype Props = {
+currentTabType: TabType, +currentTabType: TabType,
+setCurrentTabType: SetState<TabType>, +setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges, +queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>, +setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string, +namePlaceholder: string,
+changeQueued: boolean, +changeQueued: boolean,
+setTab: (tabType: TabType) => void, +setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void, +onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
}; };
class ThreadSettingsModal extends React.PureComponent<Props> { class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement; nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement; accountPasswordInput: ?HTMLInputElement;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
} }
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines if (this.props.currentTabType === 'general') {
mainContent = ( mainContent = (
<ThreadSettingsGeneralTab <ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))} threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder} threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName} threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled} threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef} threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')} threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription} threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled} threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')} threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor} threadColorOnColorSelection={this.onChangeColor}
/> />
); );
} else if (this.props.currentTabType === 'privacy') { } else if (this.props.currentTabType === 'privacy') {
mainContent = ( mainContent = (
<ThreadSettingsPrivacyTab <ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Linesclass ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => { nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput; this.nameInput = nameInput;
}; };
accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => { accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput; this.accountPasswordInput = accountPasswordInput;
}; };
onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};
onChangeColor = (color: string) => { onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined; const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({ this.props.setQueuedChanges({
...this.props.queuedChanges, ...this.props.queuedChanges,
color: newValue, color: newValue,
}); });
}; };
▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines const onChangeName = React.useCallback(
name: firstLine( name: firstLine(
target.value !== threadInfo.name ? target.value : undefined, target.value !== threadInfo.name ? target.value : undefined,
), ),
}); });
}, },
[queuedChanges, threadInfo], [queuedChanges, threadInfo],
); );
const onChangeDescription = React.useCallback(
(event: SyntheticEvent<HTMLTextAreaElement>) => {
invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
const target = event.currentTarget;
setQueuedChanges({
...queuedChanges,
description:
target.value !== threadInfo.description ? target.value : undefined,
});
},
[queuedChanges, threadInfo],
);
if (!threadInfo) { if (!threadInfo) {
return ( return (
<Modal onClose={modalContext.clearModal} name="Invalid thread"> <Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}> <div className={css.modal_body}>
<p>You no longer have permission to view this thread</p> <p>You no longer have permission to view this thread</p>
</div> </div>
</Modal> </Modal>
); );
Show All 17 Lines return (
currentTabType={currentTabType} currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType} setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges} queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges} setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder} namePlaceholder={namePlaceholder}
changeQueued={changeQueued} changeQueued={changeQueued}
setTab={setTab} setTab={setTab}
onChangeName={onChangeName} onChangeName={onChangeName}
onChangeDescription={onChangeDescription}
/> />
); );
}, },
); );
export default ConnectedThreadSettingsModal; export default ConnectedThreadSettingsModal;
View Options

web/invite-links/view-invite-link-modal.css

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype Props = {
+currentTabType: TabType, +currentTabType: TabType,
+setCurrentTabType: SetState<TabType>, +setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges, +queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>, +setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string, +namePlaceholder: string,
+changeQueued: boolean, +changeQueued: boolean,
+setTab: (tabType: TabType) => void, +setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void, +onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
}; };
class ThreadSettingsModal extends React.PureComponent<Props> { class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement; nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement; accountPasswordInput: ?HTMLInputElement;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
} }
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines if (this.props.currentTabType === 'general') {
mainContent = ( mainContent = (
<ThreadSettingsGeneralTab <ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))} threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder} threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName} threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled} threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef} threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')} threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription} threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled} threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')} threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor} threadColorOnColorSelection={this.onChangeColor}
/> />
); );
} else if (this.props.currentTabType === 'privacy') { } else if (this.props.currentTabType === 'privacy') {
mainContent = ( mainContent = (
<ThreadSettingsPrivacyTab <ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Linesclass ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => { nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput; this.nameInput = nameInput;
}; };
accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => { accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput; this.accountPasswordInput = accountPasswordInput;
}; };
onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};
onChangeColor = (color: string) => { onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined; const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({ this.props.setQueuedChanges({
...this.props.queuedChanges, ...this.props.queuedChanges,
color: newValue, color: newValue,
}); });
}; };
▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines const onChangeName = React.useCallback(
name: firstLine( name: firstLine(
target.value !== threadInfo.name ? target.value : undefined, target.value !== threadInfo.name ? target.value : undefined,
), ),
}); });
}, },
[queuedChanges, threadInfo], [queuedChanges, threadInfo],
); );
const onChangeDescription = React.useCallback(
(event: SyntheticEvent<HTMLTextAreaElement>) => {
invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
const target = event.currentTarget;
setQueuedChanges({
...queuedChanges,
description:
target.value !== threadInfo.description ? target.value : undefined,
});
},
[queuedChanges, threadInfo],
);
if (!threadInfo) { if (!threadInfo) {
return ( return (
<Modal onClose={modalContext.clearModal} name="Invalid thread"> <Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}> <div className={css.modal_body}>
<p>You no longer have permission to view this thread</p> <p>You no longer have permission to view this thread</p>
</div> </div>
</Modal> </Modal>
); );
Show All 17 Lines return (
currentTabType={currentTabType} currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType} setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges} queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges} setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder} namePlaceholder={namePlaceholder}
changeQueued={changeQueued} changeQueued={changeQueued}
setTab={setTab} setTab={setTab}
onChangeName={onChangeName} onChangeName={onChangeName}
onChangeDescription={onChangeDescription}
/> />
); );
}, },
); );
export default ConnectedThreadSettingsModal; export default ConnectedThreadSettingsModal;
View Options

web/invite-links/view-invite-link-modal.react.js

Show First 20 Lines • Show All 91 Lines • ▼ Show 20 Linestype Props = {
+currentTabType: TabType, +currentTabType: TabType,
+setCurrentTabType: SetState<TabType>, +setCurrentTabType: SetState<TabType>,
+queuedChanges: ThreadChanges, +queuedChanges: ThreadChanges,
+setQueuedChanges: SetState<ThreadChanges>, +setQueuedChanges: SetState<ThreadChanges>,
+namePlaceholder: string, +namePlaceholder: string,
+changeQueued: boolean, +changeQueued: boolean,
+setTab: (tabType: TabType) => void, +setTab: (tabType: TabType) => void,
+onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void, +onChangeName: (event: SyntheticEvent<HTMLInputElement>) => void,
+onChangeDescription: (event: SyntheticEvent<HTMLTextAreaElement>) => void,
}; };
class ThreadSettingsModal extends React.PureComponent<Props> { class ThreadSettingsModal extends React.PureComponent<Props> {
nameInput: ?HTMLInputElement; nameInput: ?HTMLInputElement;
accountPasswordInput: ?HTMLInputElement; accountPasswordInput: ?HTMLInputElement;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
} }
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines if (this.props.currentTabType === 'general') {
mainContent = ( mainContent = (
<ThreadSettingsGeneralTab <ThreadSettingsGeneralTab
threadNameValue={firstLine(this.possiblyChangedValue('name'))} threadNameValue={firstLine(this.possiblyChangedValue('name'))}
threadNamePlaceholder={this.props.namePlaceholder} threadNamePlaceholder={this.props.namePlaceholder}
threadNameOnChange={this.props.onChangeName} threadNameOnChange={this.props.onChangeName}
threadNameDisabled={inputDisabled} threadNameDisabled={inputDisabled}
threadNameInputRef={this.nameInputRef} threadNameInputRef={this.nameInputRef}
threadDescriptionValue={this.possiblyChangedValue('description')} threadDescriptionValue={this.possiblyChangedValue('description')}
threadDescriptionOnChange={this.onChangeDescription} threadDescriptionOnChange={this.props.onChangeDescription}
threadDescriptionDisabled={inputDisabled} threadDescriptionDisabled={inputDisabled}
threadColorCurrentColor={this.possiblyChangedValue('color')} threadColorCurrentColor={this.possiblyChangedValue('color')}
threadColorOnColorSelection={this.onChangeColor} threadColorOnColorSelection={this.onChangeColor}
/> />
); );
} else if (this.props.currentTabType === 'privacy') { } else if (this.props.currentTabType === 'privacy') {
mainContent = ( mainContent = (
<ThreadSettingsPrivacyTab <ThreadSettingsPrivacyTab
▲ Show 20 Lines • Show All 102 Lines • ▼ Show 20 Linesclass ThreadSettingsModal extends React.PureComponent<Props> {
nameInputRef = (nameInput: ?HTMLInputElement) => { nameInputRef = (nameInput: ?HTMLInputElement) => {
this.nameInput = nameInput; this.nameInput = nameInput;
}; };
accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => { accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
this.accountPasswordInput = accountPasswordInput; this.accountPasswordInput = accountPasswordInput;
}; };
onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
const target = event.currentTarget;
const newValue =
target.value !== this.props.threadInfo.description
? target.value
: undefined;
this.props.setQueuedChanges({
...this.props.queuedChanges,
description: newValue,
});
};
onChangeColor = (color: string) => { onChangeColor = (color: string) => {
const newValue = color !== this.props.threadInfo.color ? color : undefined; const newValue = color !== this.props.threadInfo.color ? color : undefined;
this.props.setQueuedChanges({ this.props.setQueuedChanges({
...this.props.queuedChanges, ...this.props.queuedChanges,
color: newValue, color: newValue,
}); });
}; };
▲ Show 20 Lines • Show All 128 Lines • ▼ Show 20 Lines const onChangeName = React.useCallback(
name: firstLine( name: firstLine(
target.value !== threadInfo.name ? target.value : undefined, target.value !== threadInfo.name ? target.value : undefined,
), ),
}); });
}, },
[queuedChanges, threadInfo], [queuedChanges, threadInfo],
); );
const onChangeDescription = React.useCallback(
(event: SyntheticEvent<HTMLTextAreaElement>) => {
invariant(threadInfo, 'threadInfo should exist in onChangeDescription');
const target = event.currentTarget;
setQueuedChanges({
...queuedChanges,
description:
target.value !== threadInfo.description ? target.value : undefined,
});
},
[queuedChanges, threadInfo],
);
if (!threadInfo) { if (!threadInfo) {
return ( return (
<Modal onClose={modalContext.clearModal} name="Invalid thread"> <Modal onClose={modalContext.clearModal} name="Invalid thread">
<div className={css.modal_body}> <div className={css.modal_body}>
<p>You no longer have permission to view this thread</p> <p>You no longer have permission to view this thread</p>
</div> </div>
</Modal> </Modal>
); );
Show All 17 Lines return (
currentTabType={currentTabType} currentTabType={currentTabType}
setCurrentTabType={setCurrentTabType} setCurrentTabType={setCurrentTabType}
queuedChanges={queuedChanges} queuedChanges={queuedChanges}
setQueuedChanges={setQueuedChanges} setQueuedChanges={setQueuedChanges}
namePlaceholder={namePlaceholder} namePlaceholder={namePlaceholder}
changeQueued={changeQueued} changeQueued={changeQueued}
setTab={setTab} setTab={setTab}
onChangeName={onChangeName} onChangeName={onChangeName}
onChangeDescription={onChangeDescription}
/> />
); );
}, },
); );
export default ConnectedThreadSettingsModal; export default ConnectedThreadSettingsModal;