From 1b405dbe9f89e6ee08903101e9d654572989a6c0 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Thu, 26 May 2022 19:15:02 +0000 Subject: [PATCH] chore: remove admin dropdown resolves #1748 --- .../AdminDropdown/AdminDropdown.stories.tsx | 17 --- .../AdminDropdown/AdminDropdown.test.tsx | 28 ---- .../AdminDropdown/AdminDropdown.tsx | 137 ------------------ site/src/components/Navbar/Navbar.test.tsx | 40 ----- site/src/components/Navbar/Navbar.tsx | 9 +- .../components/NavbarView/NavbarView.test.tsx | 4 +- site/src/components/NavbarView/NavbarView.tsx | 5 +- 7 files changed, 5 insertions(+), 235 deletions(-) delete mode 100644 site/src/components/AdminDropdown/AdminDropdown.stories.tsx delete mode 100644 site/src/components/AdminDropdown/AdminDropdown.test.tsx delete mode 100644 site/src/components/AdminDropdown/AdminDropdown.tsx delete mode 100644 site/src/components/Navbar/Navbar.test.tsx diff --git a/site/src/components/AdminDropdown/AdminDropdown.stories.tsx b/site/src/components/AdminDropdown/AdminDropdown.stories.tsx deleted file mode 100644 index 8cc6c7d70ce15..0000000000000 --- a/site/src/components/AdminDropdown/AdminDropdown.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import Box from "@material-ui/core/Box" -import { Story } from "@storybook/react" -import React from "react" -import { AdminDropdown } from "./AdminDropdown" - -export default { - title: "components/AdminDropdown", - component: AdminDropdown, -} - -const Template: Story = () => ( - - - -) - -export const Example = Template.bind({}) diff --git a/site/src/components/AdminDropdown/AdminDropdown.test.tsx b/site/src/components/AdminDropdown/AdminDropdown.test.tsx deleted file mode 100644 index 23e442adb5e79..0000000000000 --- a/site/src/components/AdminDropdown/AdminDropdown.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { screen } from "@testing-library/react" -import React from "react" -import { history, render } from "../../testHelpers/renderHelpers" -import { AdminDropdown, Language } from "./AdminDropdown" - -const renderAndClick = async () => { - render() - const trigger = await screen.findByText(Language.menuTitle) - trigger.click() -} - -describe("AdminDropdown", () => { - describe("when the trigger is clicked", () => { - it("opens the menu", async () => { - await renderAndClick() - expect(screen.getByText(Language.usersLabel)).toBeDefined() - }) - }) - - it("links to the users page", async () => { - await renderAndClick() - - const usersLink = screen.getByText(Language.usersLabel).closest("a") - usersLink?.click() - - expect(history.location.pathname).toEqual("/users") - }) -}) diff --git a/site/src/components/AdminDropdown/AdminDropdown.tsx b/site/src/components/AdminDropdown/AdminDropdown.tsx deleted file mode 100644 index 5c889eba95d9e..0000000000000 --- a/site/src/components/AdminDropdown/AdminDropdown.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import ListItem from "@material-ui/core/ListItem" -import ListItemText from "@material-ui/core/ListItemText" -import { fade, makeStyles, Theme } from "@material-ui/core/styles" -import React, { useState } from "react" -import { navHeight } from "../../theme/constants" -import { BorderedMenu } from "../BorderedMenu/BorderedMenu" -import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow" -import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows" -import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" - -export const Language = { - menuTitle: "Admin", - usersLabel: "Users", - usersDescription: "Manage users, roles, and permissions.", -} - -const entries = [ - { - label: Language.usersLabel, - description: Language.usersDescription, - path: "/users", - Icon: UsersOutlinedIcon, - }, -] - -export const AdminDropdown: React.FC = () => { - const styles = useStyles() - const [anchorEl, setAnchorEl] = useState() - const onClose = () => setAnchorEl(undefined) - const onOpenAdminMenu = (ev: React.MouseEvent) => setAnchorEl(ev.currentTarget) - - return ( - <> -
- - - {anchorEl ? : } - -
- - - {entries.map((entry) => ( - { - onClose() - }} - /> - ))} - - - ) -} - -const useStyles = makeStyles((theme: Theme) => ({ - link: { - "&:focus": { - outline: "none", - - "& .MuiListItem-button": { - background: fade(theme.palette.primary.light, 0.1), - }, - }, - - "& .MuiListItemText-root": { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - "& .feature-stage-chip": { - position: "absolute", - bottom: theme.spacing(1), - - "& .MuiChip-labelSmall": { - fontSize: "10px", - }, - }, - whiteSpace: "nowrap", - "& .MuiListItem-button": { - height: navHeight, - color: "#A7A7A7", - padding: `0 ${theme.spacing(3)}px`, - - "&.Mui-selected": { - background: "transparent", - "& .MuiListItemText-root": { - color: theme.palette.primary.contrastText, - - "&:not(.no-brace) .MuiTypography-root": { - position: "relative", - - "&::before": { - content: `"{"`, - left: -14, - position: "absolute", - }, - "&::after": { - content: `"}"`, - position: "absolute", - right: -14, - }, - }, - }, - }, - - "&.Mui-focusVisible, &:hover": { - background: "#333", - }, - - "& .MuiListItemText-primary": { - fontFamily: theme.typography.fontFamily, - fontSize: 16, - fontWeight: 500, - }, - }, - }, -})) diff --git a/site/src/components/Navbar/Navbar.test.tsx b/site/src/components/Navbar/Navbar.test.tsx deleted file mode 100644 index 3a014d415327a..0000000000000 --- a/site/src/components/Navbar/Navbar.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { screen, waitFor } from "@testing-library/react" -import React from "react" -import * as API from "../../api/api" -import { renderWithAuth } from "../../testHelpers/renderHelpers" -import { checks } from "../../xServices/auth/authXService" -import { Language as AdminDropdownLanguage } from "../AdminDropdown/AdminDropdown" -import { Navbar } from "./Navbar" - -beforeEach(() => { - jest.resetAllMocks() -}) - -describe("Navbar", () => { - describe("when user has permission to update users", () => { - it("displays the admin menu", async () => { - const checkUserPermissionsSpy = jest.spyOn(API, "checkUserPermissions").mockResolvedValueOnce({ - [checks.updateUsers]: true, - }) - - renderWithAuth() - - // Wait for the request is done - await waitFor(() => expect(checkUserPermissionsSpy).toBeCalledTimes(1)) - await screen.findByRole("button", { name: AdminDropdownLanguage.menuTitle }) - }) - }) - - describe("when user has NO permission to update users", () => { - it("does not display the admin menu", async () => { - const checkUserPermissionsSpy = jest.spyOn(API, "checkUserPermissions").mockResolvedValueOnce({ - [checks.updateUsers]: false, - }) - renderWithAuth() - - // Wait for the request is done - await waitFor(() => expect(checkUserPermissionsSpy).toBeCalledTimes(1)) - expect(screen.queryByRole("button", { name: AdminDropdownLanguage.menuTitle })).not.toBeInTheDocument() - }) - }) -}) diff --git a/site/src/components/Navbar/Navbar.tsx b/site/src/components/Navbar/Navbar.tsx index 90a3c4676794a..0ac64ef7d1269 100644 --- a/site/src/components/Navbar/Navbar.tsx +++ b/site/src/components/Navbar/Navbar.tsx @@ -1,6 +1,5 @@ -import { useActor, useSelector } from "@xstate/react" +import { useActor } from "@xstate/react" import React, { useContext } from "react" -import { selectPermissions } from "../../xServices/auth/authSelectors" import { XServiceContext } from "../../xServices/StateContext" import { NavbarView } from "../NavbarView/NavbarView" @@ -8,11 +7,7 @@ export const Navbar: React.FC = () => { const xServices = useContext(XServiceContext) const [authState, authSend] = useActor(xServices.authXService) const { me } = authState.context - const permissions = useSelector(xServices.authXService, selectPermissions) - // When we have more options in the admin dropdown we may want to check this - // for more permissions - const displayAdminDropdown = !!permissions?.updateUsers const onSignOut = () => authSend("SIGN_OUT") - return + return } diff --git a/site/src/components/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx index 13cc85a789036..c2f44e6ad5d27 100644 --- a/site/src/components/NavbarView/NavbarView.test.tsx +++ b/site/src/components/NavbarView/NavbarView.test.tsx @@ -10,7 +10,7 @@ describe("NavbarView", () => { } it("renders content", async () => { // When - render() + render() // Then await screen.findAllByText("Coder", { exact: false }) @@ -24,7 +24,7 @@ describe("NavbarView", () => { } // When - render() + render() // Then // There should be a 'B' avatar! diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx index 1a471dc8bcb28..195120a417572 100644 --- a/site/src/components/NavbarView/NavbarView.tsx +++ b/site/src/components/NavbarView/NavbarView.tsx @@ -5,17 +5,15 @@ import React from "react" import { NavLink } from "react-router-dom" import * as TypesGen from "../../api/typesGenerated" import { navHeight } from "../../theme/constants" -import { AdminDropdown } from "../AdminDropdown/AdminDropdown" import { Logo } from "../Icons/Logo" import { UserDropdown } from "../UserDropdown/UsersDropdown" export interface NavbarViewProps { user?: TypesGen.User onSignOut: () => void - displayAdminDropdown: boolean } -export const NavbarView: React.FC = ({ user, onSignOut, displayAdminDropdown }) => { +export const NavbarView: React.FC = ({ user, onSignOut }) => { const styles = useStyles() return ( )