Page MenuHomePhabricator
Differential D10081

[web] introduce confirmation alert component
ClosedPublic
Actions

Authored by ginsu on Nov 28 2023, 8:32 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Apr 6, 7:53 AM
Unknown Object (File)
Mar 13 2025, 5:57 AM
Unknown Object (File)
Mar 13 2025, 5:57 AM
Unknown Object (File)
Mar 13 2025, 5:57 AM
Unknown Object (File)
Mar 13 2025, 5:57 AM
Unknown Object (File)
Mar 13 2025, 5:57 AM
Unknown Object (File)
Jan 28 2025, 2:11 PM
Unknown Object (File)
Jan 13 2025, 4:25 PM
View All 70 Files
Subscribers
ashoat
tomek

Details

Reviewers
rohan
inka
michal
Commits
rCOMMd19f5c7d992a: [web] introduce confirmation alert component
Summary

To confirm the deletion of a keyserver, I will need a very similar modal to the delete role modal. Rather than copying and pasting, I introduced a ConfirmationAlert component that can be used in both instances.

Depends on D10080

Test Plan

Confirmed that the delete role modal looked and behaved as before

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Nov 28 2023, 8:32 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptNov 28 2023, 8:32 PM
ginsu edited the summary of this revision. (Show Details)Nov 28 2023, 8:53 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: rohan, inka, michal.
ginsu added a parent revision: D10080: [web] introduce temp onClickDisconnectKeyserver.
ginsu added a child revision: D10089: [web] introduce on click remove keyserver functionality.Nov 28 2023, 9:02 PM
Harbormaster completed remote builds in B24589: Diff 33968.Nov 28 2023, 9:08 PM
ginsu requested review of this revision.Nov 28 2023, 9:08 PM
rohan accepted this revision.Nov 29 2023, 3:59 AM

Thanks for doing this! Could you share a screenshot for what the delete roles modal looks like now please?

This revision is now accepted and ready to land.Nov 29 2023, 3:59 AM
ginsu added a comment.Nov 29 2023, 10:00 PM

Thanks for doing this! Could you share a screenshot for what the delete roles modal looks like now please?

Screenshot 2023-11-30 at 12.59.25 AM.png (1×3 px, 798 KB)

Here is a screenshot. There should be no visual changes!

ginsu attached a referenced file: F902252: Screenshot 2023-11-30 at 12.59.25 AM.png. (Show Details)Nov 29 2023, 10:00 PM
ginsu updated this revision to Diff 34021.Nov 29 2023, 10:00 PM

rebase before landing

Harbormaster completed remote builds in B24620: Diff 34021.Nov 29 2023, 10:17 PM
Closed by commit rCOMMd19f5c7d992a: [web] introduce confirmation alert component (authored by ginsu). · Explain WhyNov 29 2023, 10:42 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMd19f5c7d992a: [web] introduce confirmation alert component.

Revision Contents
Changeset List

PathSize
web/
modals/
roles/
confirmation-alert.css
delete-role-modal.css
11 lines
modals/
55 lines
roles/
15 lines
30 lines

Diff 34024

View Options

web/modals/confirmation-alert.css

// @flow // @flow
import { memberHasAdminPowers } from './thread-utils.js'; import { memberHasAdminPowers } from './thread-utils.js';
import bots from '../facts/bots.js';
import staff from '../facts/staff.js';
import { useENSNames } from '../hooks/ens-cache.js'; import { useENSNames } from '../hooks/ens-cache.js';
import type { import type {
ServerThreadInfo,
RawThreadInfo, RawThreadInfo,
ServerThreadInfo,
ThreadInfo, ThreadInfo,
} from '../types/thread-types.js'; } from '../types/thread-types.js';
import type { UserInfo } from '../types/user-types.js'; import type { UserInfo } from '../types/user-types.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
function stringForUser(user: { function stringForUser(user: {
+username?: ?string, +username?: ?string,
+isViewer?: ?boolean, +isViewer?: ?boolean,
Show All 9 Lines
function stringForUserExplicit(user: { +username: ?string, ... }): string { function stringForUserExplicit(user: { +username: ?string, ... }): string {
if (user.username) { if (user.username) {
return user.username; return user.username;
} else { } else {
return 'anonymous'; return 'anonymous';
} }
} }
function isStaff(userID: string): boolean {
if (staff.includes(userID)) {
return true;
}
for (const key in bots) {
const bot = bots[key];
if (userID === bot.userID) {
return true;
}
}
return false;
}
function useKeyserverAdmin( function useKeyserverAdmin(
community: ThreadInfo | RawThreadInfo | ServerThreadInfo, community: ThreadInfo | RawThreadInfo | ServerThreadInfo,
): ?UserInfo { ): ?UserInfo {
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
// This hack only works as long as there is only one admin // This hack only works as long as there is only one admin
// Linear task to revert this: // Linear task to revert this:
// https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info // https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info
const admin = community.members.find(memberHasAdminPowers); const admin = community.members.find(memberHasAdminPowers);
const adminUserInfo = admin ? userInfos[admin.id] : undefined; const adminUserInfo = admin ? userInfos[admin.id] : undefined;
const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]); const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]);
return adminUserInfoWithENSName; return adminUserInfoWithENSName;
} }
export { stringForUser, stringForUserExplicit, isStaff, useKeyserverAdmin }; export { stringForUser, stringForUserExplicit, useKeyserverAdmin };
View Options

web/modals/confirmation-alert.react.js

// @flow // @flow
import { memberHasAdminPowers } from './thread-utils.js'; import { memberHasAdminPowers } from './thread-utils.js';
import bots from '../facts/bots.js';
import staff from '../facts/staff.js';
import { useENSNames } from '../hooks/ens-cache.js'; import { useENSNames } from '../hooks/ens-cache.js';
import type { import type {
ServerThreadInfo,
RawThreadInfo, RawThreadInfo,
ServerThreadInfo,
ThreadInfo, ThreadInfo,
} from '../types/thread-types.js'; } from '../types/thread-types.js';
import type { UserInfo } from '../types/user-types.js'; import type { UserInfo } from '../types/user-types.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
function stringForUser(user: { function stringForUser(user: {
+username?: ?string, +username?: ?string,
+isViewer?: ?boolean, +isViewer?: ?boolean,
Show All 9 Lines
function stringForUserExplicit(user: { +username: ?string, ... }): string { function stringForUserExplicit(user: { +username: ?string, ... }): string {
if (user.username) { if (user.username) {
return user.username; return user.username;
} else { } else {
return 'anonymous'; return 'anonymous';
} }
} }
function isStaff(userID: string): boolean {
if (staff.includes(userID)) {
return true;
}
for (const key in bots) {
const bot = bots[key];
if (userID === bot.userID) {
return true;
}
}
return false;
}
function useKeyserverAdmin( function useKeyserverAdmin(
community: ThreadInfo | RawThreadInfo | ServerThreadInfo, community: ThreadInfo | RawThreadInfo | ServerThreadInfo,
): ?UserInfo { ): ?UserInfo {
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
// This hack only works as long as there is only one admin // This hack only works as long as there is only one admin
// Linear task to revert this: // Linear task to revert this:
// https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info // https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info
const admin = community.members.find(memberHasAdminPowers); const admin = community.members.find(memberHasAdminPowers);
const adminUserInfo = admin ? userInfos[admin.id] : undefined; const adminUserInfo = admin ? userInfos[admin.id] : undefined;
const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]); const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]);
return adminUserInfoWithENSName; return adminUserInfoWithENSName;
} }
export { stringForUser, stringForUserExplicit, isStaff, useKeyserverAdmin }; export { stringForUser, stringForUserExplicit, useKeyserverAdmin };
View Options

web/roles/delete-role-modal.css

// @flow // @flow
import { memberHasAdminPowers } from './thread-utils.js'; import { memberHasAdminPowers } from './thread-utils.js';
import bots from '../facts/bots.js';
import staff from '../facts/staff.js';
import { useENSNames } from '../hooks/ens-cache.js'; import { useENSNames } from '../hooks/ens-cache.js';
import type { import type {
ServerThreadInfo,
RawThreadInfo, RawThreadInfo,
ServerThreadInfo,
ThreadInfo, ThreadInfo,
} from '../types/thread-types.js'; } from '../types/thread-types.js';
import type { UserInfo } from '../types/user-types.js'; import type { UserInfo } from '../types/user-types.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
function stringForUser(user: { function stringForUser(user: {
+username?: ?string, +username?: ?string,
+isViewer?: ?boolean, +isViewer?: ?boolean,
Show All 9 Lines
function stringForUserExplicit(user: { +username: ?string, ... }): string { function stringForUserExplicit(user: { +username: ?string, ... }): string {
if (user.username) { if (user.username) {
return user.username; return user.username;
} else { } else {
return 'anonymous'; return 'anonymous';
} }
} }
function isStaff(userID: string): boolean {
if (staff.includes(userID)) {
return true;
}
for (const key in bots) {
const bot = bots[key];
if (userID === bot.userID) {
return true;
}
}
return false;
}
function useKeyserverAdmin( function useKeyserverAdmin(
community: ThreadInfo | RawThreadInfo | ServerThreadInfo, community: ThreadInfo | RawThreadInfo | ServerThreadInfo,
): ?UserInfo { ): ?UserInfo {
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
// This hack only works as long as there is only one admin // This hack only works as long as there is only one admin
// Linear task to revert this: // Linear task to revert this:
// https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info // https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info
const admin = community.members.find(memberHasAdminPowers); const admin = community.members.find(memberHasAdminPowers);
const adminUserInfo = admin ? userInfos[admin.id] : undefined; const adminUserInfo = admin ? userInfos[admin.id] : undefined;
const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]); const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]);
return adminUserInfoWithENSName; return adminUserInfoWithENSName;
} }
export { stringForUser, stringForUserExplicit, isStaff, useKeyserverAdmin }; export { stringForUser, stringForUserExplicit, useKeyserverAdmin };
View Options

web/roles/delete-role-modal.react.js

// @flow // @flow
import { memberHasAdminPowers } from './thread-utils.js'; import { memberHasAdminPowers } from './thread-utils.js';
import bots from '../facts/bots.js';
import staff from '../facts/staff.js';
import { useENSNames } from '../hooks/ens-cache.js'; import { useENSNames } from '../hooks/ens-cache.js';
import type { import type {
ServerThreadInfo,
RawThreadInfo, RawThreadInfo,
ServerThreadInfo,
ThreadInfo, ThreadInfo,
} from '../types/thread-types.js'; } from '../types/thread-types.js';
import type { UserInfo } from '../types/user-types.js'; import type { UserInfo } from '../types/user-types.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
function stringForUser(user: { function stringForUser(user: {
+username?: ?string, +username?: ?string,
+isViewer?: ?boolean, +isViewer?: ?boolean,
Show All 9 Lines
function stringForUserExplicit(user: { +username: ?string, ... }): string { function stringForUserExplicit(user: { +username: ?string, ... }): string {
if (user.username) { if (user.username) {
return user.username; return user.username;
} else { } else {
return 'anonymous'; return 'anonymous';
} }
} }
function isStaff(userID: string): boolean {
if (staff.includes(userID)) {
return true;
}
for (const key in bots) {
const bot = bots[key];
if (userID === bot.userID) {
return true;
}
}
return false;
}
function useKeyserverAdmin( function useKeyserverAdmin(
community: ThreadInfo | RawThreadInfo | ServerThreadInfo, community: ThreadInfo | RawThreadInfo | ServerThreadInfo,
): ?UserInfo { ): ?UserInfo {
const userInfos = useSelector(state => state.userStore.userInfos); const userInfos = useSelector(state => state.userStore.userInfos);
// This hack only works as long as there is only one admin // This hack only works as long as there is only one admin
// Linear task to revert this: // Linear task to revert this:
// https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info // https://linear.app/comm/issue/ENG-1707/revert-fix-getting-the-keyserver-admin-info
const admin = community.members.find(memberHasAdminPowers); const admin = community.members.find(memberHasAdminPowers);
const adminUserInfo = admin ? userInfos[admin.id] : undefined; const adminUserInfo = admin ? userInfos[admin.id] : undefined;
const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]); const [adminUserInfoWithENSName] = useENSNames([adminUserInfo]);
return adminUserInfoWithENSName; return adminUserInfoWithENSName;
} }
export { stringForUser, stringForUserExplicit, isStaff, useKeyserverAdmin }; export { stringForUser, stringForUserExplicit, useKeyserverAdmin };