Skip to content

refactor(site): make minor design tweaks and fix issues on more options menus #10493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Nov 3, 2023
Merged
Prev Previous commit
Next Next commit
Refactor menus on group and permissions page
  • Loading branch information
BrunoQuaresma committed Nov 2, 2023
commit c5bbe8449b0ed184519ad4cfec8d0fbfe5a05446
31 changes: 19 additions & 12 deletions site/src/pages/GroupsPage/GroupPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
PageHeaderTitle,
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
import { TableRowMenu } from "components/TableRowMenu/TableRowMenu";
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { type FC, useState } from "react";
import { Helmet } from "react-helmet-async";
Expand All @@ -46,6 +45,12 @@ import Box from "@mui/material/Box";
import { LastSeen } from "components/LastSeen/LastSeen";
import { type Interpolation, type Theme } from "@emotion/react";
import LoadingButton from "@mui/lab/LoadingButton";
import {
MoreMenu,
MoreMenuContent,
MoreMenuItem,
MoreMenuTrigger,
} from "components/MoreMenu/MoreMenu";

export const GroupPage: FC = () => {
const { groupId } = useParams() as { groupId: string };
Expand Down Expand Up @@ -281,12 +286,12 @@ const GroupMemberRow = (props: {
</TableCell>
<TableCell width="1%">
{canUpdate && (
<TableRowMenu
data={member}
menuItems={[
{
label: "Remove",
onClick: async () => {
<MoreMenu>
<MoreMenuTrigger />
<MoreMenuContent>
<MoreMenuItem
danger
onClick={async () => {
try {
await removeMemberMutation.mutateAsync({
groupId: group.id,
Expand All @@ -298,11 +303,13 @@ const GroupMemberRow = (props: {
getErrorMessage(error, "Failed to remove member."),
);
}
},
disabled: group.id === group.organization_id,
},
]}
/>
}}
disabled={group.id === group.organization_id}
>
Remove
</MoreMenuItem>
</MoreMenuContent>
</MoreMenu>
)}
</TableCell>
</TableRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Stack } from "components/Stack/Stack";
import { TableLoader } from "components/TableLoader/TableLoader";
import { TableRowMenu } from "components/TableRowMenu/TableRowMenu";
import {
UserOrGroupAutocomplete,
UserOrGroupAutocompleteValue,
Expand All @@ -30,6 +29,12 @@ import { GroupAvatar } from "components/GroupAvatar/GroupAvatar";
import { getGroupSubtitle } from "utils/groups";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import LoadingButton from "@mui/lab/LoadingButton";
import {
MoreMenu,
MoreMenuContent,
MoreMenuItem,
MoreMenuTrigger,
} from "components/MoreMenu/MoreMenu";

type AddTemplateUserOrGroupProps = {
organizationId: string;
Expand Down Expand Up @@ -281,16 +286,17 @@ export const TemplatePermissionsPageView: FC<

<TableCell>
{canUpdatePermissions && (
<TableRowMenu
data={group}
menuItems={[
{
label: "Remove",
onClick: () => onRemoveGroup(group),
disabled: false,
},
]}
/>
<MoreMenu>
<MoreMenuTrigger />
<MoreMenuContent>
<MoreMenuItem
danger
onClick={() => onRemoveGroup(group)}
>
Remove
</MoreMenuItem>
</MoreMenuContent>
</MoreMenu>
)}
</TableCell>
</TableRow>
Expand Down Expand Up @@ -327,16 +333,17 @@ export const TemplatePermissionsPageView: FC<

<TableCell>
{canUpdatePermissions && (
<TableRowMenu
data={user}
menuItems={[
{
label: "Remove",
onClick: () => onRemoveUser(user),
disabled: false,
},
]}
/>
<MoreMenu>
<MoreMenuTrigger />
<MoreMenuContent>
<MoreMenuItem
danger
onClick={() => onRemoveUser(user)}
>
Remove
</MoreMenuItem>
</MoreMenuContent>
</MoreMenu>
)}
</TableCell>
</TableRow>
Expand Down