From a9d44e3341d909ee46e4e769c44e5d50e84a7227 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Mon, 25 Nov 2024 17:14:25 +1300 Subject: [PATCH] PermissionsViewer: Fix permission description tooltip & cleanup (#3040) --- src/components/ExpandableHeader.css | 11 -- src/components/ExpandableHeader.tsx | 121 ------------------ src/components/index.ts | 1 - .../components/RolesAndUsersPermissions.tsx | 21 ++- .../components/UserPermissions.tsx | 94 ++++++++------ src/plugins/permissionsViewer/index.tsx | 9 +- src/plugins/permissionsViewer/styles.css | 16 ++- src/plugins/permissionsViewer/utils.ts | 48 +------ 8 files changed, 87 insertions(+), 234 deletions(-) delete mode 100644 src/components/ExpandableHeader.css delete mode 100644 src/components/ExpandableHeader.tsx diff --git a/src/components/ExpandableHeader.css b/src/components/ExpandableHeader.css deleted file mode 100644 index a556e36b..00000000 --- a/src/components/ExpandableHeader.css +++ /dev/null @@ -1,11 +0,0 @@ -.vc-expandableheader-center-flex { - display: flex; - place-items: center; -} - -.vc-expandableheader-btn { - all: unset; - cursor: pointer; - width: 24px; - height: 24px; -} diff --git a/src/components/ExpandableHeader.tsx b/src/components/ExpandableHeader.tsx deleted file mode 100644 index 473dffaa..00000000 --- a/src/components/ExpandableHeader.tsx +++ /dev/null @@ -1,121 +0,0 @@ -/* - * Vencord, a modification for Discord's desktop app - * Copyright (c) 2023 Vendicated and contributors - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . -*/ - -import "./ExpandableHeader.css"; - -import { classNameFactory } from "@api/Styles"; -import { Text, Tooltip, useState } from "@webpack/common"; - -const cl = classNameFactory("vc-expandableheader-"); - -export interface ExpandableHeaderProps { - onMoreClick?: () => void; - moreTooltipText?: string; - onDropDownClick?: (state: boolean) => void; - defaultState?: boolean; - headerText: string; - children: React.ReactNode; - buttons?: React.ReactNode[]; - forceOpen?: boolean; -} - -export function ExpandableHeader({ - children, - onMoreClick, - buttons, - moreTooltipText, - onDropDownClick, - headerText, - defaultState = false, - forceOpen = false, -}: ExpandableHeaderProps) { - const [showContent, setShowContent] = useState(defaultState || forceOpen); - - return ( - <> -
- - {headerText} - - -
- { - buttons ?? null - } - - { - onMoreClick && // only show more button if callback is provided - - {tooltipProps => ( - - )} - - } - - - - {tooltipProps => ( - - )} - -
-
- {showContent && children} - - ); -} diff --git a/src/components/index.ts b/src/components/index.ts index 38e610fd..2782cb54 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -10,7 +10,6 @@ export * from "./CodeBlock"; export * from "./DonateButton"; export { default as ErrorBoundary } from "./ErrorBoundary"; export * from "./ErrorCard"; -export * from "./ExpandableHeader"; export * from "./Flex"; export * from "./Heart"; export * from "./Icons"; diff --git a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx index 32dcaf8d..b1593779 100644 --- a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx +++ b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx @@ -22,12 +22,12 @@ import { InfoIcon, OwnerCrownIcon } from "@components/Icons"; import { getIntlMessage, getUniqueUsername } from "@utils/discord"; import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal"; import { findByCodeLazy } from "@webpack"; -import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common"; +import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, useMemo, UserStore, useState, useStateFromStores } from "@webpack/common"; import { UnicodeEmoji } from "@webpack/types"; import type { Guild, Role, User } from "discord-types/general"; import { settings } from ".."; -import { cl, getPermissionDescription, getPermissionString } from "../utils"; +import { cl, getGuildPermissionSpecMap } from "../utils"; import { PermissionAllowedIcon, PermissionDefaultIcon, PermissionDeniedIcon } from "./icons"; export const enum PermissionType { @@ -56,7 +56,7 @@ function getRoleIconSrc(role: Role) { } function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array; guild: Guild; modalProps: ModalProps; header: string; }) { - permissions.sort((a, b) => a.type - b.type); + const guildPermissionSpecMap = useMemo(() => getGuildPermissionSpecMap(guild), [guild.id]); useStateFromStores( [GuildMemberStore], @@ -65,6 +65,10 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea (old, current) => old.length === current.length ); + useEffect(() => { + permissions.sort((a, b) => a.type - b.type); + }, [permissions]); + useEffect(() => { const usersToRequest = permissions .filter(p => p.type === PermissionType.User && !GuildMemberStore.isMember(guild.id, p.id!)) @@ -173,7 +177,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
- {Object.entries(PermissionsBits).map(([permissionName, bit]) => ( + {Object.values(PermissionsBits).map(bit => (
{(() => { @@ -192,9 +196,14 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea return PermissionDefaultIcon(); })()}
- {getPermissionString(permissionName)} + {guildPermissionSpecMap[String(bit)].title} - + { + const { description } = guildPermissionSpecMap[String(bit)]; + return typeof description === "function" ? i18n.intl.format(description, {}) : description; + })() + }> {props => }
diff --git a/src/plugins/permissionsViewer/components/UserPermissions.tsx b/src/plugins/permissionsViewer/components/UserPermissions.tsx index 720445da..6eaeef84 100644 --- a/src/plugins/permissionsViewer/components/UserPermissions.tsx +++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx @@ -17,7 +17,6 @@ */ import ErrorBoundary from "@components/ErrorBoundary"; -import { ExpandableHeader } from "@components/ExpandableHeader"; import { getIntlMessage } from "@utils/discord"; import { classes } from "@utils/misc"; import { filters, findBulk, proxyLazyWebpack } from "@webpack"; @@ -25,7 +24,7 @@ import { PermissionsBits, Text, Tooltip, useMemo, UserStore } from "@webpack/com import type { Guild, GuildMember } from "discord-types/general"; import { PermissionsSortOrder, settings } from ".."; -import { cl, getPermissionString, getSortedRoles, sortUserRoles } from "../utils"; +import { cl, getGuildPermissionSpecMap, getSortedRoles, sortUserRoles } from "../utils"; import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermission } from "./RolesAndUsersPermissions"; interface UserPermission { @@ -87,9 +86,11 @@ function GrantedByTooltip({ roleName, roleColor }: GrantedByTooltipProps) { ); } -function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) { +function UserPermissionsComponent({ guild, guildMember, closePopout }: { guild: Guild; guildMember: GuildMember; closePopout: () => void; }) { const { permissionsSortOrder } = settings.use(["permissionsSortOrder"]); + const guildPermissionSpecMap = useMemo(() => getGuildPermissionSpecMap(guild), [guild.id]); + const [rolePermissions, userPermissions] = useMemo(() => { const userPermissions: UserPermissions = []; @@ -106,7 +107,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g permissions: Object.values(PermissionsBits).reduce((prev, curr) => prev | curr, 0n) }); - const OWNER = getIntlMessage("GUILD_OWNER") || "Server Owner"; + const OWNER = getIntlMessage("GUILD_OWNER") ?? "Server Owner"; userPermissions.push({ permission: OWNER, roleName: "Owner", @@ -117,11 +118,11 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g sortUserRoles(userRoles); - for (const [permission, bit] of Object.entries(PermissionsBits)) { + for (const bit of Object.values(PermissionsBits)) { for (const { permissions, colorString, position, name } of userRoles) { if ((permissions & bit) === bit) { userPermissions.push({ - permission: getPermissionString(permission), + permission: guildPermissionSpecMap[String(bit)].title, roleName: name, roleColor: colorString || "var(--primary-300)", rolePosition: position @@ -137,26 +138,15 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g return [rolePermissions, userPermissions]; }, [permissionsSortOrder]); - return ( - - openRolesAndUsersPermissionsModal( - rolePermissions, - guild, - guildMember.nick || UserStore.getUser(guildMember.userId).username - ) - } - onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state} - defaultState={settings.store.defaultPermissionsDropdownState} - buttons={[ + return
+
+ Permissions +
{tooltipProps => (
{ @@ -164,8 +154,8 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g }} > @@ -174,24 +164,46 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
)} - ]}> - {userPermissions.length > 0 && ( -
- {userPermissions.map(({ permission, roleColor, roleName }) => ( - } - tooltipClassName={cl("granted-by-container")} - tooltipContentClassName={cl("granted-by-content")} + + {tooltipProps => ( +
{ + closePopout(); + openRolesAndUsersPermissionsModal(rolePermissions, guild, guildMember.nick || UserStore.getUser(guildMember.userId).username); + }} > - {tooltipProps => ( - - )} - - ))} -
- )} - - ); + + + +
+ )} + +
+
+ {userPermissions.length > 0 && ( +
+ {userPermissions.map(({ permission, roleColor, roleName }) => ( + } + tooltipClassName={cl("granted-by-container")} + tooltipContentClassName={cl("granted-by-content")} + > + {tooltipProps => ( + + )} + + ))} +
+ )} +
; } export default ErrorBoundary.wrap(UserPermissionsComponent, { noop: true }); diff --git a/src/plugins/permissionsViewer/index.tsx b/src/plugins/permissionsViewer/index.tsx index 20b0b191..8d0cd4b1 100644 --- a/src/plugins/permissionsViewer/index.tsx +++ b/src/plugins/permissionsViewer/index.tsx @@ -56,11 +56,6 @@ export const settings = definePluginSettings({ { label: "Lowest Role", value: PermissionsSortOrder.LowestRole } ] }, - defaultPermissionsDropdownState: { - description: "Whether the permissions dropdown on user popouts should be open by default", - type: OptionType.BOOLEAN, - default: false - } }); function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) { @@ -182,9 +177,9 @@ export default definePlugin({ ( + renderPopout={({ closePopout }) => ( - + )} > diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css index 0123f86e..b7e42096 100644 --- a/src/plugins/permissionsViewer/styles.css +++ b/src/plugins/permissionsViewer/styles.css @@ -1,12 +1,22 @@ /* User Permissions Component */ -.vc-permviewer-user-sortorder-btn { +.vc-permviewer-user-header-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.vc-permviewer-user-header-btns { + display: flex; + gap: 8px; +} + +.vc-permviewer-user-header-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; - width: 24px; - height: 24px; } /* RolesAndUsersPermissions Component */ diff --git a/src/plugins/permissionsViewer/utils.ts b/src/plugins/permissionsViewer/utils.ts index b2015840..dfa81e73 100644 --- a/src/plugins/permissionsViewer/utils.ts +++ b/src/plugins/permissionsViewer/utils.ts @@ -17,57 +17,17 @@ */ import { classNameFactory } from "@api/Styles"; -import { getIntlMessage } from "@utils/discord"; -import { wordsToTitle } from "@utils/text"; -import { GuildStore, Parser } from "@webpack/common"; +import { findByPropsLazy } from "@webpack"; +import { GuildStore } from "@webpack/common"; import { Guild, GuildMember, Role } from "discord-types/general"; -import type { ReactNode } from "react"; import { PermissionsSortOrder, settings } from "."; import { PermissionType } from "./components/RolesAndUsersPermissions"; +export const { getGuildPermissionSpecMap } = findByPropsLazy("getGuildPermissionSpecMap"); + export const cl = classNameFactory("vc-permviewer-"); -function formatPermissionWithoutMatchingString(permission: string) { - return wordsToTitle(permission.toLowerCase().split("_")); -} - -// because discord is unable to be consistent with their names -const PermissionKeyMap = { - MANAGE_GUILD: "MANAGE_SERVER", - MANAGE_GUILD_EXPRESSIONS: "MANAGE_EXPRESSIONS", - CREATE_GUILD_EXPRESSIONS: "CREATE_EXPRESSIONS", - MODERATE_MEMBERS: "MODERATE_MEMBER", // HELLOOOO ?????? - STREAM: "VIDEO", - SEND_VOICE_MESSAGES: "ROLE_PERMISSIONS_SEND_VOICE_MESSAGE", -} as const; - -export function getPermissionString(permission: string) { - permission = PermissionKeyMap[permission] || permission; - - return getIntlMessage(permission) || - // shouldn't get here but just in case - formatPermissionWithoutMatchingString(permission); -} - -export function getPermissionDescription(permission: string): ReactNode { - // DISCORD PLEEEEEEEEAAAAASE IM BEGGING YOU :( - if (permission === "USE_APPLICATION_COMMANDS") - permission = "USE_APPLICATION_COMMANDS_GUILD"; - else if (permission === "SEND_VOICE_MESSAGES") - permission = "SEND_VOICE_MESSAGE_GUILD"; - else if (permission !== "STREAM") - permission = PermissionKeyMap[permission] || permission; - - const msg = getIntlMessage(`ROLE_PERMISSIONS_${permission}_DESCRIPTION`) as any; - if (msg?.hasMarkdown) - return Parser.parse(msg.message); - - if (typeof msg === "string") return msg; - - return ""; -} - export function getSortedRoles({ id }: Guild, member: GuildMember) { const roles = GuildStore.getRoles(id);