Skip to content

Commit

Permalink
PermissionsViewer: Fix permission description tooltip & cleanup (#3040)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sqaaakoi
Sqaaakoi authored Nov 25, 2024
1 parent e7a54b0 commit a9d44e3
Show file tree
Hide file tree
Showing 8 changed files with 87 additions and 234 deletions.
11 changes: 0 additions & 11 deletions src/components/ExpandableHeader.css
View file

This file was deleted.

121 changes: 0 additions & 121 deletions src/components/ExpandableHeader.tsx
View file

This file was deleted.

1 change: 0 additions & 1 deletion src/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
21 changes: 15 additions & 6 deletions src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -56,7 +56,7 @@ function getRoleIconSrc(role: Role) {
}

function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
permissions.sort((a, b) => a.type - b.type);
const guildPermissionSpecMap = useMemo(() => getGuildPermissionSpecMap(guild), [guild.id]);

useStateFromStores(
[GuildMemberStore],
Expand All @@ -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!))
Expand Down Expand Up @@ -173,7 +177,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
</ScrollerThin>
<div className={cl("modal-divider")} />
<ScrollerThin className={cl("modal-perms")} orientation="auto">
{Object.entries(PermissionsBits).map(([permissionName, bit]) => (
{Object.values(PermissionsBits).map(bit => (
<div className={cl("modal-perms-item")}>
<div className={cl("modal-perms-item-icon")}>
{(() => {
Expand All @@ -192,9 +196,14 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
return PermissionDefaultIcon();
})()}
</div>
<Text variant="text-md/normal">{getPermissionString(permissionName)}</Text>
<Text variant="text-md/normal">{guildPermissionSpecMap[String(bit)].title}</Text>

<Tooltip text={getPermissionDescription(permissionName) || "No Description"}>
<Tooltip text={
(() => {
const { description } = guildPermissionSpecMap[String(bit)];
return typeof description === "function" ? i18n.intl.format(description, {}) : description;
})()
}>
{props => <InfoIcon {...props} />}
</Tooltip>
</div>
Expand Down
94 changes: 53 additions & 41 deletions src/plugins/permissionsViewer/components/UserPermissions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,14 @@
*/

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";
import { PermissionsBits, Text, Tooltip, useMemo, UserStore } from "@webpack/common";
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 {
Expand Down Expand Up @@ -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 = [];

Expand All @@ -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",
Expand All @@ -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
Expand All @@ -137,35 +138,24 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
return [rolePermissions, userPermissions];
}, [permissionsSortOrder]);

return (
<ExpandableHeader
forceOpen={forceOpen}
headerText="Permissions"
moreTooltipText="Role Details"
onMoreClick={() =>
openRolesAndUsersPermissionsModal(
rolePermissions,
guild,
guildMember.nick || UserStore.getUser(guildMember.userId).username
)
}
onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state}
defaultState={settings.store.defaultPermissionsDropdownState}
buttons={[
return <div>
<div className={cl("user-header-container")}>
<Text variant="eyebrow">Permissions</Text>
<div className={cl("user-header-btns")}>
<Tooltip text={`Sorting by ${permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
{tooltipProps => (
<div
{...tooltipProps}
className={cl("user-sortorder-btn")}
className={cl("user-header-btn")}
role="button"
tabIndex={0}
onClick={() => {
settings.store.permissionsSortOrder = permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
}}
>
<svg
width="20"
height="20"
width="24"
height="24"
viewBox="0 96 960 960"
transform={permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
>
Expand All @@ -174,24 +164,46 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
</div>
)}
</Tooltip>
]}>
{userPermissions.length > 0 && (
<div className={classes(RoleRootClasses.root)}>
{userPermissions.map(({ permission, roleColor, roleName }) => (
<Tooltip
text={<GrantedByTooltip roleName={roleName} roleColor={roleColor} />}
tooltipClassName={cl("granted-by-container")}
tooltipContentClassName={cl("granted-by-content")}
<Tooltip text="Role Details">
{tooltipProps => (
<div
{...tooltipProps}
className={cl("user-header-btn")}
role="button"
tabIndex={0}
onClick={() => {
closePopout();
openRolesAndUsersPermissionsModal(rolePermissions, guild, guildMember.nick || UserStore.getUser(guildMember.userId).username);
}}
>
{tooltipProps => (
<FakeRole {...tooltipProps} text={permission} color={roleColor} />
)}
</Tooltip>
))}
</div>
)}
</ExpandableHeader>
);
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
</svg>
</div>
)}
</Tooltip>
</div>
</div>
{userPermissions.length > 0 && (
<div className={classes(RoleRootClasses.root)}>
{userPermissions.map(({ permission, roleColor, roleName }) => (
<Tooltip
text={<GrantedByTooltip roleName={roleName} roleColor={roleColor} />}
tooltipClassName={cl("granted-by-container")}
tooltipContentClassName={cl("granted-by-content")}
>
{tooltipProps => (
<FakeRole {...tooltipProps} text={permission} color={roleColor} />
)}
</Tooltip>
))}
</div>
)}
</div>;
}

export default ErrorBoundary.wrap(UserPermissionsComponent, { noop: true });
9 changes: 2 additions & 7 deletions src/plugins/permissionsViewer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -182,9 +177,9 @@ export default definePlugin({
<Popout
position="bottom"
align="center"
renderPopout={() => (
renderPopout={({ closePopout }) => (
<Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
<UserPermissions guild={guild} guildMember={guildMember} forceOpen />
<UserPermissions guild={guild} guildMember={guildMember} closePopout={closePopout} />
</Dialog>
)}
>
Expand Down
Loading

0 comments on commit a9d44e3

Please sign in to comment.