From d6dacf96b2d3d9d19a56c13f067df911df74bf34 Mon Sep 17 00:00:00 2001 From: Presley Date: Tue, 5 Apr 2022 18:51:04 +0000 Subject: [PATCH 01/22] Start porting components for Admin menu --- .../BorderedMenu/BorderedMenuRow.tsx | 140 ++++++++++++++++++ .../index.tsx} | 2 +- site/src/components/BorderedMenu/types.ts | 11 ++ site/src/components/Navbar/Admin/Admin.tsx | 51 +++++++ site/src/components/Navbar/UserDropdown.tsx | 2 +- site/src/components/Typography/index.tsx | 42 ++++++ site/src/util/ellipsizeText.test.ts | 17 +++ site/src/util/ellipsizeText.ts | 9 ++ site/src/util/nullable.ts | 5 + 9 files changed, 277 insertions(+), 2 deletions(-) create mode 100644 site/src/components/BorderedMenu/BorderedMenuRow.tsx rename site/src/components/{Navbar/BorderedMenu.tsx => BorderedMenu/index.tsx} (92%) create mode 100644 site/src/components/BorderedMenu/types.ts create mode 100644 site/src/components/Navbar/Admin/Admin.tsx create mode 100644 site/src/components/Typography/index.tsx create mode 100644 site/src/util/ellipsizeText.test.ts create mode 100644 site/src/util/ellipsizeText.ts create mode 100644 site/src/util/nullable.ts diff --git a/site/src/components/BorderedMenu/BorderedMenuRow.tsx b/site/src/components/BorderedMenu/BorderedMenuRow.tsx new file mode 100644 index 0000000000000..c4b0ae5e56270 --- /dev/null +++ b/site/src/components/BorderedMenu/BorderedMenuRow.tsx @@ -0,0 +1,140 @@ +import ListItem from "@material-ui/core/ListItem" +import { makeStyles } from "@material-ui/core/styles" +import SvgIcon from "@material-ui/core/SvgIcon" +import CheckIcon from "@material-ui/icons/Check" +import React from "react" +import { NavLink } from "react-router-dom" +import { ellipsizeText } from "../../util/ellipsizeText" +import { Typography } from "../Typography" + +type BorderedMenuRowVariant = "narrow" | "wide" + +interface BorderedMenuRowProps { + /** `true` indicates this row is currently selected */ + active?: boolean + /** Optional description that appears beneath the title */ + description?: string + /** An SvgIcon that will be rendered to the left of the title */ + Icon: typeof SvgIcon + /** URL path */ + path?: string + /** Required title of this row */ + title: string + /** Defaults to `"wide"` */ + variant?: BorderedMenuRowVariant + /** Callback fired when this row is clicked */ + onClick?: () => void +} + +export const BorderedMenuRow: React.FC = ({ + active, + description, + Icon, + path, + title, + variant, + onClick, +}) => { + const styles = useStyles() + + const Component = () => ( + +
+
+ + {title} + {active && } +
+ + {description && ( + + {ellipsizeText(description)} + + )} +
+ + ) + + if (path) { + return ( + + + + ) + } + + return +} + +const iconSize = 20 + +const useStyles = makeStyles((theme) => ({ + root: { + cursor: "pointer", + padding: `0 ${theme.spacing(1)}px`, + + "&:hover": { + backgroundColor: "unset", + "& $content": { + backgroundColor: theme.palette.background.default, + }, + }, + + "&[data-status='active']": { + color: theme.palette.primary.main, + "& .BorderedMenuRow-description": { + color: theme.palette.text.primary, + }, + "& .BorderedMenuRow-icon": { + color: theme.palette.primary.main, + }, + }, + }, + rootGutters: { + padding: `0 ${theme.spacing(1.5)}px`, + }, + content: { + borderRadius: 7, + display: "flex", + flexDirection: "column", + padding: theme.spacing(2), + width: 320, + + "&[data-variant='narrow']": { + width: 268, + }, + }, + contentTop: { + alignItems: "center", + display: "flex", + }, + icon: { + color: theme.palette.text.secondary, + height: iconSize, + width: iconSize, + + "& path": { + fill: theme.palette.text.secondary, + }, + }, + title: { + fontSize: 16, + fontWeight: 500, + lineHeight: 1.5, + marginLeft: theme.spacing(2), + }, + checkMark: { + height: iconSize, + marginLeft: "auto", + width: iconSize, + }, + description: { + marginLeft: theme.spacing(4.5), + marginTop: theme.spacing(0.5), + }, +})) diff --git a/site/src/components/Navbar/BorderedMenu.tsx b/site/src/components/BorderedMenu/index.tsx similarity index 92% rename from site/src/components/Navbar/BorderedMenu.tsx rename to site/src/components/BorderedMenu/index.tsx index 1228d530673a7..58561aff87224 100644 --- a/site/src/components/Navbar/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/index.tsx @@ -2,7 +2,7 @@ import Popover, { PopoverProps } from "@material-ui/core/Popover" import { fade, makeStyles } from "@material-ui/core/styles" import React from "react" -type BorderedMenuVariant = "manage-dropdown" | "user-dropdown" +type BorderedMenuVariant = "admin-dropdown" | "user-dropdown" type BorderedMenuProps = Omit & { variant?: BorderedMenuVariant diff --git a/site/src/components/BorderedMenu/types.ts b/site/src/components/BorderedMenu/types.ts new file mode 100644 index 0000000000000..bc6c565432263 --- /dev/null +++ b/site/src/components/BorderedMenu/types.ts @@ -0,0 +1,11 @@ +/** + * Shared types used by multiple components go here. + */ + + import { RouteConfig } from "../../router" + + export interface NavbarEntryProps extends Pick { + selected: boolean + className?: string + onClick?: () => void + } diff --git a/site/src/components/Navbar/Admin/Admin.tsx b/site/src/components/Navbar/Admin/Admin.tsx new file mode 100644 index 0000000000000..318f6b847c8ad --- /dev/null +++ b/site/src/components/Navbar/Admin/Admin.tsx @@ -0,0 +1,51 @@ +import React from "react" +import { useNavigate } from "react-router-dom" +import { BorderedMenu } from "../../BorderedMenu" +import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" +import { NavbarEntryProps } from "../../BorderedMenu/types" + +interface AdminDropdownProps { + anchorEl?: HTMLElement + entries: NavbarEntryProps[] + onClose: () => void +} + +export const AdminDropdown: React.FC = ({ anchorEl, entries, onClose }) => { + const navigate = useNavigate() + + return ( + + {entries.map((entry) => + entry.label && entry.Icon ? ( + { + onClose() + navigate(entry.path) + }} + /> + ) : null, + )} + + ) +} diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx index 4a5f741ab08c1..48254650477e3 100644 --- a/site/src/components/Navbar/UserDropdown.tsx +++ b/site/src/components/Navbar/UserDropdown.tsx @@ -8,7 +8,7 @@ import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown" import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp" import React, { useState } from "react" import { LogoutIcon } from "../Icons" -import { BorderedMenu } from "./BorderedMenu" +import { BorderedMenu } from "../BorderedMenu" import { UserProfileCard } from "../User/UserProfileCard" import { UserAvatar } from "../User" diff --git a/site/src/components/Typography/index.tsx b/site/src/components/Typography/index.tsx new file mode 100644 index 0000000000000..511352790fade --- /dev/null +++ b/site/src/components/Typography/index.tsx @@ -0,0 +1,42 @@ +/** + * @fileoverview (TODO: Grey) This file is in a temporary state and is a + * verbatim port from `@coder/ui`. + */ + + import { makeStyles } from "@material-ui/core/styles" + import MuiTypography, { TypographyProps as MuiTypographyProps } from "@material-ui/core/Typography" + import * as React from "react" +import { combineClasses, appendCSSString } from "../../util/combineClasses" + + export interface TypographyProps extends MuiTypographyProps { + short?: boolean + } + + /** + * Wrapper around Material UI's Typography component to allow for future + * custom typography types. + * + * See original component's Material UI documentation here: https://material-ui.com/components/typography/ + */ + export const Typography: React.FC = ({ className, short, ...rest }) => { + const styles = useStyles() + + let classes = combineClasses({ [styles.short]: short }) + if (className) { + classes = appendCSSString(classes ?? "", className) + } + + return + } + + const useStyles = makeStyles({ + short: { + "&.MuiTypography-body1": { + lineHeight: "21px", + }, + "&.MuiTypography-body2": { + lineHeight: "18px", + letterSpacing: 0.2, + }, + }, + }) diff --git a/site/src/util/ellipsizeText.test.ts b/site/src/util/ellipsizeText.test.ts new file mode 100644 index 0000000000000..7c30b0ef1cf3b --- /dev/null +++ b/site/src/util/ellipsizeText.test.ts @@ -0,0 +1,17 @@ +import { ellipsizeText } from "./ellipsizeText" +import { Nullable } from "./nullable" + +describe("ellipsizeText", () => { + it.each([ + [undefined, 10, undefined], + [null, 10, undefined], + ["", 10, ""], + ["Hello World", "Hello World".length, "Hello World"], + ["Hello World", "Hello...".length, "Hello..."], + ])( + `ellipsizeText(%p, %p) returns %p`, + (str: Nullable, maxLength: number | undefined, output: Nullable) => { + expect(ellipsizeText(str, maxLength)).toBe(output) + }, + ) +}) diff --git a/site/src/util/ellipsizeText.ts b/site/src/util/ellipsizeText.ts new file mode 100644 index 0000000000000..7509eff789c9e --- /dev/null +++ b/site/src/util/ellipsizeText.ts @@ -0,0 +1,9 @@ +import { Nullable } from "./nullable" + +/** Truncates and ellipsizes text if it's longer than maxLength */ +export const ellipsizeText = (text: Nullable, maxLength = 80): string | undefined => { + if (typeof text !== "string") { + return + } + return text.length <= maxLength ? text : `${text.substr(0, maxLength - 3)}...` +} diff --git a/site/src/util/nullable.ts b/site/src/util/nullable.ts new file mode 100644 index 0000000000000..c253e4475ce2e --- /dev/null +++ b/site/src/util/nullable.ts @@ -0,0 +1,5 @@ +/** + * A Nullable may be its concrete type, `null` or `undefined` + * @remark Exact opposite of the native TS type NonNullable + */ + export type Nullable = null | undefined | T From a9e4dd4fa9dc507f3a0eeed4170a9775f433e68e Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 00:16:49 +0000 Subject: [PATCH 02/22] More porting, wip --- site/src/components/BorderedMenu/types.ts | 29 +++++++++++++++---- .../Navbar/Admin/{Admin.tsx => index.tsx} | 0 site/src/components/Sidebar/index.tsx | 2 +- site/src/util/combineClasses.test.ts | 28 ++++++++++++++++++ .../{combine-classes.ts => combineClasses.ts} | 0 5 files changed, 53 insertions(+), 6 deletions(-) rename site/src/components/Navbar/Admin/{Admin.tsx => index.tsx} (100%) create mode 100644 site/src/util/combineClasses.test.ts rename site/src/util/{combine-classes.ts => combineClasses.ts} (100%) diff --git a/site/src/components/BorderedMenu/types.ts b/site/src/components/BorderedMenu/types.ts index bc6c565432263..f64f7b4bd6185 100644 --- a/site/src/components/BorderedMenu/types.ts +++ b/site/src/components/BorderedMenu/types.ts @@ -1,10 +1,29 @@ -/** - * Shared types used by multiple components go here. - */ +import SvgIcon from "@material-ui/core/SvgIcon"; +import { RouteProps } from "react-router-dom"; - import { RouteConfig } from "../../router" +export type RouteNavbarGroup = "main" | "admin" - export interface NavbarEntryProps extends Pick { + interface BasicRouteConfig { + path: string + /** Use to match when the path includes variables. */ + re?: RegExp + component: RouteProps["component"] + enabled: boolean + label?: string + Icon?: typeof SvgIcon + group?: RouteNavbarGroup + hideNavbar?: boolean + description?: string +} + +interface RouteConfigWithNav extends BasicRouteConfig { + label: string + icon: typeof SvgIcon + group: RouteNavbarGroup +} + +export type RouteConfig = BasicRouteConfig | RouteConfigWithNav +export interface NavbarEntryProps extends Pick { selected: boolean className?: string onClick?: () => void diff --git a/site/src/components/Navbar/Admin/Admin.tsx b/site/src/components/Navbar/Admin/index.tsx similarity index 100% rename from site/src/components/Navbar/Admin/Admin.tsx rename to site/src/components/Navbar/Admin/index.tsx diff --git a/site/src/components/Sidebar/index.tsx b/site/src/components/Sidebar/index.tsx index 2058621775d92..c7a6954d59901 100644 --- a/site/src/components/Sidebar/index.tsx +++ b/site/src/components/Sidebar/index.tsx @@ -2,7 +2,7 @@ import List from "@material-ui/core/List" import ListItem from "@material-ui/core/ListItem" import { makeStyles } from "@material-ui/core/styles" import React from "react" -import { combineClasses } from "../../util/combine-classes" +import { combineClasses } from "../../util/combineClasses" export interface SidebarItem { value: string diff --git a/site/src/util/combineClasses.test.ts b/site/src/util/combineClasses.test.ts new file mode 100644 index 0000000000000..7890f00f1df9e --- /dev/null +++ b/site/src/util/combineClasses.test.ts @@ -0,0 +1,28 @@ +import { combineClasses } from "./combineClasses" + +const staticStyles = { + text: "MuiText", + success: "MuiText-Green", + warning: "MuiText-Red", +} + +describe("combineClasses", () => { + it.each([ + // Falsy + [undefined, undefined], + [{ [staticStyles.text]: false }, undefined], + [{ [staticStyles.text]: undefined }, undefined], + [[], undefined], + + // Truthy + [{ [staticStyles.text]: true }, "MuiText"], + [{ [staticStyles.text]: true, [staticStyles.warning]: true }, "MuiText MuiText-Red"], + [[staticStyles.text], "MuiText"], + + // Mixed + [{ [staticStyles.text]: true, [staticStyles.success]: false }, "MuiText"], + [[staticStyles.text, staticStyles.success], "MuiText MuiText-Green"], + ])(`classNames(%p) returns %p`, (staticClasses, result) => { + expect(combineClasses(staticClasses)).toBe(result) + }) +}) diff --git a/site/src/util/combine-classes.ts b/site/src/util/combineClasses.ts similarity index 100% rename from site/src/util/combine-classes.ts rename to site/src/util/combineClasses.ts From 8944e10625bb075f6ed5aa0bfca710e74d2041a0 Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 02:06:41 +0000 Subject: [PATCH 03/22] Add icons --- site/src/components/Icons/BuildingIcon.tsx | 13 ++++++++++ .../components/Icons/UsersOutlinedIcon.tsx | 25 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 site/src/components/Icons/BuildingIcon.tsx create mode 100644 site/src/components/Icons/UsersOutlinedIcon.tsx diff --git a/site/src/components/Icons/BuildingIcon.tsx b/site/src/components/Icons/BuildingIcon.tsx new file mode 100644 index 0000000000000..381cd106154e4 --- /dev/null +++ b/site/src/components/Icons/BuildingIcon.tsx @@ -0,0 +1,13 @@ +import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon" +import React from "react" + +export const BuildingIcon = (props: SvgIconProps): JSX.Element => ( + + + +) diff --git a/site/src/components/Icons/UsersOutlinedIcon.tsx b/site/src/components/Icons/UsersOutlinedIcon.tsx new file mode 100644 index 0000000000000..b297380d125e4 --- /dev/null +++ b/site/src/components/Icons/UsersOutlinedIcon.tsx @@ -0,0 +1,25 @@ +import SvgIcon from "@material-ui/core/SvgIcon" +import React from "react" + +export const UsersOutlinedIcon: typeof SvgIcon = (props) => ( + + + + + + + + +) From 88bac07af51c8aeb0884d4d2dca77d4a101d1c9c Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 02:09:06 +0000 Subject: [PATCH 04/22] Extract arrow components, navHeight --- site/src/components/Navbar/Arrows.tsx | 26 +++++++++++++++++++++ site/src/components/Navbar/UserDropdown.tsx | 14 +++-------- site/src/theme/constants.ts | 1 + 3 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 site/src/components/Navbar/Arrows.tsx diff --git a/site/src/components/Navbar/Arrows.tsx b/site/src/components/Navbar/Arrows.tsx new file mode 100644 index 0000000000000..e29b69dea7c2b --- /dev/null +++ b/site/src/components/Navbar/Arrows.tsx @@ -0,0 +1,26 @@ +import React from "react" +import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown" +import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp" +import { fade, makeStyles, Theme } from "@material-ui/core/styles" + +const useStyles = makeStyles((theme: Theme) => ({ + arrowIcon: { + color: fade(theme.palette.primary.contrastText, 0.7), + marginLeft: theme.spacing(1), + width: 16, + height: 16, + }, + arrowIconUp: { + color: theme.palette.primary.contrastText, + }, +})) + +export const OpenDropdown = () => { + const styles = useStyles() + return +} + +export const CloseDropdown = () => { + const styles = useStyles() + return +} diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx index 21da25a91a296..f4285fa621494 100644 --- a/site/src/components/Navbar/UserDropdown.tsx +++ b/site/src/components/Navbar/UserDropdown.tsx @@ -12,6 +12,7 @@ import { BorderedMenu } from "../BorderedMenu" import { LogoutIcon } from "../Icons" import { UserAvatar } from "../User" import { UserProfileCard } from "../User/UserProfileCard" +import { CloseDropdown, OpenDropdown } from "./Arrows" export interface UserDropdownProps { user: UserResponse @@ -38,9 +39,9 @@ export const UserDropdown: React.FC = ({ user, onSignOut }: U {anchorEl ? ( - + ) : ( - + )} @@ -94,15 +95,6 @@ export const useStyles = makeStyles((theme) => ({ userInfo: { marginBottom: theme.spacing(1), }, - arrowIcon: { - color: fade(theme.palette.primary.contrastText, 0.7), - marginLeft: theme.spacing(1), - width: 16, - height: 16, - }, - arrowIconUp: { - color: theme.palette.primary.contrastText, - }, menuItem: { height: 44, diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 6a4aa1bb4c036..008063489519d 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -6,3 +6,4 @@ export const MONOSPACE_FONT_FAMILY = export const BODY_FONT_FAMILY = `"Inter", sans-serif` export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)" export const emptyBoxShadow = "none" +export const navHeight = 56 From 14b9e86828fa2e207911ad5e759675e58e7b6b7d Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 02:12:06 +0000 Subject: [PATCH 05/22] Add Admin Dropdown --- site/src/components/Navbar/Admin/index.tsx | 51 ------ .../components/Navbar/AdminDropdown/index.tsx | 164 ++++++++++++++++++ site/src/components/Navbar/NavbarView.tsx | 4 + 3 files changed, 168 insertions(+), 51 deletions(-) delete mode 100644 site/src/components/Navbar/Admin/index.tsx create mode 100644 site/src/components/Navbar/AdminDropdown/index.tsx diff --git a/site/src/components/Navbar/Admin/index.tsx b/site/src/components/Navbar/Admin/index.tsx deleted file mode 100644 index 318f6b847c8ad..0000000000000 --- a/site/src/components/Navbar/Admin/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from "react" -import { useNavigate } from "react-router-dom" -import { BorderedMenu } from "../../BorderedMenu" -import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" -import { NavbarEntryProps } from "../../BorderedMenu/types" - -interface AdminDropdownProps { - anchorEl?: HTMLElement - entries: NavbarEntryProps[] - onClose: () => void -} - -export const AdminDropdown: React.FC = ({ anchorEl, entries, onClose }) => { - const navigate = useNavigate() - - return ( - - {entries.map((entry) => - entry.label && entry.Icon ? ( - { - onClose() - navigate(entry.path) - }} - /> - ) : null, - )} - - ) -} diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx new file mode 100644 index 0000000000000..49b702539f85a --- /dev/null +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -0,0 +1,164 @@ +import React, { useState } from "react" +import { useNavigate } from "react-router-dom" +import { BorderedMenu } from "../../BorderedMenu" +import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" +import { CloseDropdown, OpenDropdown } from "../Arrows" +import ListItem from "@material-ui/core/ListItem" +import ListItemText from "@material-ui/core/ListItemText" +import { makeStyles } from "@material-ui/styles" +import AdminIcon from "@material-ui/icons/SettingsOutlined" +import { fade, Theme } from "@material-ui/core" +import { BuildingIcon } from "../../Icons/BuildingIcon" +import { UsersOutlinedIcon } from "../../Icons/UsersOutlinedIcon" +import { navHeight } from "../../../theme/constants" + +const Language = { + usersLabel: "Users", + usersDescription: "Manage users, roles, and permissions.", + orgsLabel: "Organizations", + orgsDescription: "Manage organizations.", + settingsLabel: "Settings", + settingsDescription: "Configure authentication and more." +} + +const entries = [ + { + label: Language.usersLabel, + description: Language.usersDescription, + path: "/users", + Icon: UsersOutlinedIcon, + }, + { + label: Language.orgsLabel, + description: Language.orgsDescription, + path: "/orgs", + Icon: BuildingIcon, + }, + { + label: Language.settingsLabel, + description: Language.settingsDescription, + path: "/settings", + Icon: AdminIcon + } +] + +export const AdminDropdown: React.FC = () => { + const styles = useStyles() + const navigate = useNavigate() + const [anchorEl, setAnchorEl] = useState() + const onClose = () => setAnchorEl(undefined) + const onOpenAdminMenu = (ev: React.MouseEvent) => setAnchorEl(ev.currentTarget) + + return ( + <> +
+ + + {anchorEl ? ( + + ) : ( + + )} + +
+ + + {entries.map((entry) => + entry.label && entry.Icon ? ( + { + onClose() + navigate(entry.path) + }} + /> + ) : null, + )} + + + ) +} + +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/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx index 8e1d1d26a68c9..a3142475b73e8 100644 --- a/site/src/components/Navbar/NavbarView.tsx +++ b/site/src/components/Navbar/NavbarView.tsx @@ -4,6 +4,7 @@ import React from "react" import { Link } from "react-router-dom" import { UserResponse } from "../../api/types" import { Logo } from "../Icons" +import { AdminDropdown } from "./AdminDropdown" import { UserDropdown } from "./UserDropdown" export interface NavbarViewProps { @@ -23,6 +24,9 @@ export const NavbarView: React.FC = ({ user, onSignOut }) => {
+ {user && user.email === "admin@coder.com" && + + }
{user && }
) From b50b34dfd4664394251bb6a9e28abaf3b06b66e0 Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 14:24:53 +0000 Subject: [PATCH 06/22] Format --- site/src/components/BorderedMenu/types.ts | 14 ++-- .../components/Navbar/AdminDropdown/index.tsx | 12 ++-- site/src/components/Navbar/NavbarView.tsx | 4 +- site/src/components/Navbar/UserDropdown.tsx | 6 +- site/src/components/Typography/index.tsx | 72 +++++++++---------- site/src/util/nullable.ts | 2 +- 6 files changed, 50 insertions(+), 60 deletions(-) diff --git a/site/src/components/BorderedMenu/types.ts b/site/src/components/BorderedMenu/types.ts index f64f7b4bd6185..95c24bd703e6b 100644 --- a/site/src/components/BorderedMenu/types.ts +++ b/site/src/components/BorderedMenu/types.ts @@ -1,9 +1,9 @@ -import SvgIcon from "@material-ui/core/SvgIcon"; -import { RouteProps } from "react-router-dom"; +import SvgIcon from "@material-ui/core/SvgIcon" +import { RouteProps } from "react-router-dom" export type RouteNavbarGroup = "main" | "admin" - interface BasicRouteConfig { +interface BasicRouteConfig { path: string /** Use to match when the path includes variables. */ re?: RegExp @@ -24,7 +24,7 @@ interface RouteConfigWithNav extends BasicRouteConfig { export type RouteConfig = BasicRouteConfig | RouteConfigWithNav export interface NavbarEntryProps extends Pick { - selected: boolean - className?: string - onClick?: () => void - } + selected: boolean + className?: string + onClick?: () => void +} diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx index 49b702539f85a..51c975aaee745 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -18,7 +18,7 @@ const Language = { orgsLabel: "Organizations", orgsDescription: "Manage organizations.", settingsLabel: "Settings", - settingsDescription: "Configure authentication and more." + settingsDescription: "Configure authentication and more.", } const entries = [ @@ -38,8 +38,8 @@ const entries = [ label: Language.settingsLabel, description: Language.settingsDescription, path: "/settings", - Icon: AdminIcon - } + Icon: AdminIcon, + }, ] export const AdminDropdown: React.FC = () => { @@ -54,11 +54,7 @@ export const AdminDropdown: React.FC = () => {
- {anchorEl ? ( - - ) : ( - - )} + {anchorEl ? : }
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx index a3142475b73e8..ee1b1e2ae723b 100644 --- a/site/src/components/Navbar/NavbarView.tsx +++ b/site/src/components/Navbar/NavbarView.tsx @@ -24,9 +24,7 @@ export const NavbarView: React.FC = ({ user, onSignOut }) => {
- {user && user.email === "admin@coder.com" && - - } + {user && user.email === "admin@coder.com" && }
{user && }
) diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx index f4285fa621494..408aff5de239d 100644 --- a/site/src/components/Navbar/UserDropdown.tsx +++ b/site/src/components/Navbar/UserDropdown.tsx @@ -38,11 +38,7 @@ export const UserDropdown: React.FC = ({ user, onSignOut }: U - {anchorEl ? ( - - ) : ( - - )} + {anchorEl ? : } diff --git a/site/src/components/Typography/index.tsx b/site/src/components/Typography/index.tsx index 511352790fade..d6de2aed88139 100644 --- a/site/src/components/Typography/index.tsx +++ b/site/src/components/Typography/index.tsx @@ -3,40 +3,40 @@ * verbatim port from `@coder/ui`. */ - import { makeStyles } from "@material-ui/core/styles" - import MuiTypography, { TypographyProps as MuiTypographyProps } from "@material-ui/core/Typography" - import * as React from "react" +import { makeStyles } from "@material-ui/core/styles" +import MuiTypography, { TypographyProps as MuiTypographyProps } from "@material-ui/core/Typography" +import * as React from "react" import { combineClasses, appendCSSString } from "../../util/combineClasses" - - export interface TypographyProps extends MuiTypographyProps { - short?: boolean - } - - /** - * Wrapper around Material UI's Typography component to allow for future - * custom typography types. - * - * See original component's Material UI documentation here: https://material-ui.com/components/typography/ - */ - export const Typography: React.FC = ({ className, short, ...rest }) => { - const styles = useStyles() - - let classes = combineClasses({ [styles.short]: short }) - if (className) { - classes = appendCSSString(classes ?? "", className) - } - - return - } - - const useStyles = makeStyles({ - short: { - "&.MuiTypography-body1": { - lineHeight: "21px", - }, - "&.MuiTypography-body2": { - lineHeight: "18px", - letterSpacing: 0.2, - }, - }, - }) + +export interface TypographyProps extends MuiTypographyProps { + short?: boolean +} + +/** + * Wrapper around Material UI's Typography component to allow for future + * custom typography types. + * + * See original component's Material UI documentation here: https://material-ui.com/components/typography/ + */ +export const Typography: React.FC = ({ className, short, ...rest }) => { + const styles = useStyles() + + let classes = combineClasses({ [styles.short]: short }) + if (className) { + classes = appendCSSString(classes ?? "", className) + } + + return +} + +const useStyles = makeStyles({ + short: { + "&.MuiTypography-body1": { + lineHeight: "21px", + }, + "&.MuiTypography-body2": { + lineHeight: "18px", + letterSpacing: 0.2, + }, + }, +}) diff --git a/site/src/util/nullable.ts b/site/src/util/nullable.ts index c253e4475ce2e..dda3b129e80c6 100644 --- a/site/src/util/nullable.ts +++ b/site/src/util/nullable.ts @@ -2,4 +2,4 @@ * A Nullable may be its concrete type, `null` or `undefined` * @remark Exact opposite of the native TS type NonNullable */ - export type Nullable = null | undefined | T +export type Nullable = null | undefined | T From 8b4834f001f7950111bb705f332f05db45d829bf Mon Sep 17 00:00:00 2001 From: Presley Date: Wed, 6 Apr 2022 14:29:25 +0000 Subject: [PATCH 07/22] Delete types --- site/src/components/BorderedMenu/types.ts | 30 ----------------------- 1 file changed, 30 deletions(-) delete mode 100644 site/src/components/BorderedMenu/types.ts diff --git a/site/src/components/BorderedMenu/types.ts b/site/src/components/BorderedMenu/types.ts deleted file mode 100644 index 95c24bd703e6b..0000000000000 --- a/site/src/components/BorderedMenu/types.ts +++ /dev/null @@ -1,30 +0,0 @@ -import SvgIcon from "@material-ui/core/SvgIcon" -import { RouteProps } from "react-router-dom" - -export type RouteNavbarGroup = "main" | "admin" - -interface BasicRouteConfig { - path: string - /** Use to match when the path includes variables. */ - re?: RegExp - component: RouteProps["component"] - enabled: boolean - label?: string - Icon?: typeof SvgIcon - group?: RouteNavbarGroup - hideNavbar?: boolean - description?: string -} - -interface RouteConfigWithNav extends BasicRouteConfig { - label: string - icon: typeof SvgIcon - group: RouteNavbarGroup -} - -export type RouteConfig = BasicRouteConfig | RouteConfigWithNav -export interface NavbarEntryProps extends Pick { - selected: boolean - className?: string - onClick?: () => void -} From 98ec516297197fa60a4000a00c445efa53f11974 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 16:57:01 +0000 Subject: [PATCH 08/22] Fix styles --- site/src/components/BorderedMenu/BorderedMenuRow.tsx | 6 +++++- site/src/components/BorderedMenu/index.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/site/src/components/BorderedMenu/BorderedMenuRow.tsx b/site/src/components/BorderedMenu/BorderedMenuRow.tsx index c4b0ae5e56270..4c55083c81a95 100644 --- a/site/src/components/BorderedMenu/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenu/BorderedMenuRow.tsx @@ -62,7 +62,7 @@ export const BorderedMenuRow: React.FC = ({ if (path) { return ( - + ) @@ -122,6 +122,10 @@ const useStyles = makeStyles((theme) => ({ fill: theme.palette.text.secondary, }, }, + link: { + textDecoration: "none", + color: "inherit", + }, title: { fontSize: 16, fontWeight: 500, diff --git a/site/src/components/BorderedMenu/index.tsx b/site/src/components/BorderedMenu/index.tsx index 58561aff87224..f7b674d2b8c2b 100644 --- a/site/src/components/BorderedMenu/index.tsx +++ b/site/src/components/BorderedMenu/index.tsx @@ -20,7 +20,14 @@ export const BorderedMenu: React.FC = ({ children, variant, . const useStyles = makeStyles((theme) => ({ root: { - paddingBottom: theme.spacing(1), + "&[data-variant='admin-dropdown'] $paperRoot": { + padding: `${theme.spacing(3)}px 0`, + }, + + "&[data-variant='user-dropdown'] $paperRoot": { + paddingBottom: theme.spacing(1), + width: 292, + }, }, paperRoot: { width: "292px", From 1d4c94f6c7a8b0409c3cb7c79b739002b8e8abe0 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 19:24:17 +0000 Subject: [PATCH 09/22] Lint --- site/src/components/Navbar/AdminDropdown/index.tsx | 14 +++++++------- site/src/components/Navbar/Arrows.tsx | 4 ++-- site/src/components/Typography/index.tsx | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx index 51c975aaee745..a0f9a3c9c0e12 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -1,16 +1,16 @@ +import { fade, Theme } from "@material-ui/core" +import ListItem from "@material-ui/core/ListItem" +import ListItemText from "@material-ui/core/ListItemText" +import AdminIcon from "@material-ui/icons/SettingsOutlined" +import { makeStyles } from "@material-ui/styles" import React, { useState } from "react" import { useNavigate } from "react-router-dom" +import { navHeight } from "../../../theme/constants" import { BorderedMenu } from "../../BorderedMenu" import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" -import { CloseDropdown, OpenDropdown } from "../Arrows" -import ListItem from "@material-ui/core/ListItem" -import ListItemText from "@material-ui/core/ListItemText" -import { makeStyles } from "@material-ui/styles" -import AdminIcon from "@material-ui/icons/SettingsOutlined" -import { fade, Theme } from "@material-ui/core" import { BuildingIcon } from "../../Icons/BuildingIcon" import { UsersOutlinedIcon } from "../../Icons/UsersOutlinedIcon" -import { navHeight } from "../../../theme/constants" +import { CloseDropdown, OpenDropdown } from "../Arrows" const Language = { usersLabel: "Users", diff --git a/site/src/components/Navbar/Arrows.tsx b/site/src/components/Navbar/Arrows.tsx index e29b69dea7c2b..410d508cd6163 100644 --- a/site/src/components/Navbar/Arrows.tsx +++ b/site/src/components/Navbar/Arrows.tsx @@ -1,7 +1,7 @@ -import React from "react" +import { fade, makeStyles, Theme } from "@material-ui/core/styles" import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown" import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp" -import { fade, makeStyles, Theme } from "@material-ui/core/styles" +import React from "react" const useStyles = makeStyles((theme: Theme) => ({ arrowIcon: { diff --git a/site/src/components/Typography/index.tsx b/site/src/components/Typography/index.tsx index d6de2aed88139..ef5210dfa6ffb 100644 --- a/site/src/components/Typography/index.tsx +++ b/site/src/components/Typography/index.tsx @@ -6,7 +6,7 @@ import { makeStyles } from "@material-ui/core/styles" import MuiTypography, { TypographyProps as MuiTypographyProps } from "@material-ui/core/Typography" import * as React from "react" -import { combineClasses, appendCSSString } from "../../util/combineClasses" +import { appendCSSString, combineClasses } from "../../util/combineClasses" export interface TypographyProps extends MuiTypographyProps { short?: boolean From f134141acee0e97ccc132ff2657f3a88d53bccd8 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 19:33:12 +0000 Subject: [PATCH 10/22] Add stub pages --- site/src/AppRouter.tsx | 7 +++++++ site/src/pages/orgs/index.tsx | 5 +++++ site/src/pages/settings/index.tsx | 5 +++++ site/src/pages/users.tsx | 5 +++++ 4 files changed, 22 insertions(+) create mode 100644 site/src/pages/orgs/index.tsx create mode 100644 site/src/pages/settings/index.tsx create mode 100644 site/src/pages/users.tsx diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 43cd52ba83a0d..a6ac193254a04 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -6,10 +6,13 @@ import { NotFoundPage } from "./pages/404" import { CliAuthenticationPage } from "./pages/cli-auth" import { HealthzPage } from "./pages/healthz" import { SignInPage } from "./pages/login" +import { OrganizationsPage } from "./pages/orgs" import { PreferencesPage } from "./pages/preferences" +import { SettingsPage } from "./pages/settings" import { TemplatesPage } from "./pages/templates" import { TemplatePage } from "./pages/templates/[organization]/[template]" import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create" +import { UsersPage } from "./pages/users" import { WorkspacePage } from "./pages/workspaces/[workspace]" export const AppRouter: React.FC = () => ( @@ -68,6 +71,10 @@ export const AppRouter: React.FC = () => ( /> + } /> + } /> + } /> + { + return
Coming soon!
+} diff --git a/site/src/pages/settings/index.tsx b/site/src/pages/settings/index.tsx new file mode 100644 index 0000000000000..fba4845cccae4 --- /dev/null +++ b/site/src/pages/settings/index.tsx @@ -0,0 +1,5 @@ +import React from "react" + +export const SettingsPage: React.FC = () => { + return
Coming soon!
+} diff --git a/site/src/pages/users.tsx b/site/src/pages/users.tsx new file mode 100644 index 0000000000000..a04e1ab5b4646 --- /dev/null +++ b/site/src/pages/users.tsx @@ -0,0 +1,5 @@ +import React from "react" + +export const UsersPage: React.FC = () => { + return
Coming soon!
+} From db542cae2701b3fc54edb974da9fce24adf8ee1f Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 19:40:51 +0000 Subject: [PATCH 11/22] Use navHeight constant --- site/src/components/Navbar/NavbarView.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx index a4f72efc19298..2aaebd289c780 100644 --- a/site/src/components/Navbar/NavbarView.tsx +++ b/site/src/components/Navbar/NavbarView.tsx @@ -4,6 +4,7 @@ import { fade, makeStyles } from "@material-ui/core/styles" import React from "react" import { NavLink } from "react-router-dom" import { UserResponse } from "../../api/types" +import { navHeight } from "../../theme/constants" import { Logo } from "../Icons" import { AdminDropdown } from "./AdminDropdown" import { UserDropdown } from "./UserDropdown" @@ -44,7 +45,7 @@ const useStyles = makeStyles((theme) => ({ flexDirection: "row", justifyContent: "center", alignItems: "center", - height: 56, + height: navHeight, background: theme.palette.navbar.main, marginTop: 0, transition: "margin 150ms ease", @@ -64,7 +65,7 @@ const useStyles = makeStyles((theme) => ({ logo: { alignItems: "center", display: "flex", - height: 56, + height: navHeight, paddingLeft: theme.spacing(4), paddingRight: theme.spacing(2), "& svg": { @@ -83,7 +84,7 @@ const useStyles = makeStyles((theme) => ({ color: "#A7A7A7", display: "flex", fontSize: 16, - height: 56, + height: navHeight, padding: `0 ${theme.spacing(3)}px`, textDecoration: "none", transition: "background-color 0.3s ease", From a5ca43942a8feb64ea87fcd53d543a9e10710f74 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 19:52:10 +0000 Subject: [PATCH 12/22] Move files --- .../Navbar/{ => NavbarView}/NavbarView.stories.tsx | 2 +- .../Navbar/{ => NavbarView}/NavbarView.test.tsx | 6 +++--- .../{NavbarView.tsx => NavbarView/index.tsx} | 10 +++++----- .../{ => UserDropdown}/UserDropdown.stories.tsx | 2 +- .../{ => UserDropdown}/UserDropdown.test.tsx | 6 +++--- .../{UserDropdown.tsx => UserDropdown/index.tsx} | 14 +++++++------- 6 files changed, 20 insertions(+), 20 deletions(-) rename site/src/components/Navbar/{ => NavbarView}/NavbarView.stories.tsx (89%) rename site/src/components/Navbar/{ => NavbarView}/NavbarView.test.tsx (82%) rename site/src/components/Navbar/{NavbarView.tsx => NavbarView/index.tsx} (91%) rename site/src/components/Navbar/{ => UserDropdown}/UserDropdown.stories.tsx (90%) rename site/src/components/Navbar/{ => UserDropdown}/UserDropdown.test.tsx (90%) rename site/src/components/Navbar/{UserDropdown.tsx => UserDropdown/index.tsx} (91%) diff --git a/site/src/components/Navbar/NavbarView.stories.tsx b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx similarity index 89% rename from site/src/components/Navbar/NavbarView.stories.tsx rename to site/src/components/Navbar/NavbarView/NavbarView.stories.tsx index d6e9e5d30493b..f9faad120eeca 100644 --- a/site/src/components/Navbar/NavbarView.stories.tsx +++ b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx @@ -1,6 +1,6 @@ import { Story } from "@storybook/react" import React from "react" -import { NavbarView, NavbarViewProps } from "./NavbarView" +import { NavbarView, NavbarViewProps } from "." export default { title: "Page/NavbarView", diff --git a/site/src/components/Navbar/NavbarView.test.tsx b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx similarity index 82% rename from site/src/components/Navbar/NavbarView.test.tsx rename to site/src/components/Navbar/NavbarView/NavbarView.test.tsx index 8fd54020ccc13..9c9d130696643 100644 --- a/site/src/components/Navbar/NavbarView.test.tsx +++ b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx @@ -1,8 +1,8 @@ import { screen } from "@testing-library/react" import React from "react" -import { render } from "../../test_helpers" -import { MockUser } from "../../test_helpers/entities" -import { NavbarView } from "./NavbarView" +import { render } from "../../../test_helpers" +import { MockUser } from "../../../test_helpers/entities" +import { NavbarView } from "." describe("NavbarView", () => { const noop = () => { diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView/index.tsx similarity index 91% rename from site/src/components/Navbar/NavbarView.tsx rename to site/src/components/Navbar/NavbarView/index.tsx index 2aaebd289c780..3a7a694e13050 100644 --- a/site/src/components/Navbar/NavbarView.tsx +++ b/site/src/components/Navbar/NavbarView/index.tsx @@ -3,11 +3,11 @@ import ListItem from "@material-ui/core/ListItem" import { fade, makeStyles } from "@material-ui/core/styles" import React from "react" import { NavLink } from "react-router-dom" -import { UserResponse } from "../../api/types" -import { navHeight } from "../../theme/constants" -import { Logo } from "../Icons" -import { AdminDropdown } from "./AdminDropdown" -import { UserDropdown } from "./UserDropdown" +import { UserResponse } from "../../../api/types" +import { navHeight } from "../../../theme/constants" +import { Logo } from "../../Icons" +import { AdminDropdown } from "../AdminDropdown" +import { UserDropdown } from "../UserDropdown" export interface NavbarViewProps { user?: UserResponse diff --git a/site/src/components/Navbar/UserDropdown.stories.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx similarity index 90% rename from site/src/components/Navbar/UserDropdown.stories.tsx rename to site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx index fb83f3be70f54..f6ed3bccdae59 100644 --- a/site/src/components/Navbar/UserDropdown.stories.tsx +++ b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx @@ -1,7 +1,7 @@ import Box from "@material-ui/core/Box" import { Story } from "@storybook/react" import React from "react" -import { UserDropdown, UserDropdownProps } from "./UserDropdown" +import { UserDropdown, UserDropdownProps } from "." export default { title: "Page/UserDropdown", diff --git a/site/src/components/Navbar/UserDropdown.test.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx similarity index 90% rename from site/src/components/Navbar/UserDropdown.test.tsx rename to site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx index 0a058b45b9eb2..bb96bc9c4ae18 100644 --- a/site/src/components/Navbar/UserDropdown.test.tsx +++ b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx @@ -1,8 +1,8 @@ import { screen } from "@testing-library/react" import React from "react" -import { render } from "../../test_helpers" -import { MockUser } from "../../test_helpers/entities" -import { Language, UserDropdown, UserDropdownProps } from "./UserDropdown" +import { render } from "../../../test_helpers" +import { MockUser } from "../../../test_helpers/entities" +import { Language, UserDropdown, UserDropdownProps } from "." const renderAndClick = async (props: Partial = {}) => { render() diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown/index.tsx similarity index 91% rename from site/src/components/Navbar/UserDropdown.tsx rename to site/src/components/Navbar/UserDropdown/index.tsx index 2f022beafbfcb..5474b21a749bf 100644 --- a/site/src/components/Navbar/UserDropdown.tsx +++ b/site/src/components/Navbar/UserDropdown/index.tsx @@ -7,13 +7,13 @@ import { fade, makeStyles } from "@material-ui/core/styles" import AccountIcon from "@material-ui/icons/AccountCircleOutlined" import React, { useState } from "react" import { Link } from "react-router-dom" -import { UserResponse } from "../../api/types" -import { BorderedMenu } from "../BorderedMenu" -import { LogoutIcon } from "../Icons" -import { DocsIcon } from "../Icons/DocsIcon" -import { UserAvatar } from "../User" -import { UserProfileCard } from "../User/UserProfileCard" -import { CloseDropdown, OpenDropdown } from "./Arrows" +import { UserResponse } from "../../../api/types" +import { BorderedMenu } from "../../BorderedMenu" +import { LogoutIcon } from "../../Icons" +import { DocsIcon } from "../../Icons/DocsIcon" +import { UserAvatar } from "../../User" +import { UserProfileCard } from "../../User/UserProfileCard" +import { CloseDropdown, OpenDropdown } from "../Arrows" export const Language = { accountLabel: "Account", From 6bb47e02260d9346f7a16c0f7c2fcf8a05bb913d Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 21:20:05 +0000 Subject: [PATCH 13/22] Add and organize stories --- .../BorderedMenu/BorderedMenu.stories.tsx | 39 +++++++++++++++++++ site/src/components/BorderedMenu/index.tsx | 2 +- .../AdminDropdown/AdminDropdown.stories.tsx | 17 ++++++++ .../Navbar/NavbarView/NavbarView.stories.tsx | 14 +++++-- .../UserDropdown/UserDropdown.stories.tsx | 2 +- 5 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 site/src/components/BorderedMenu/BorderedMenu.stories.tsx create mode 100644 site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx new file mode 100644 index 0000000000000..a4aa241f3411e --- /dev/null +++ b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx @@ -0,0 +1,39 @@ +import { Story } from "@storybook/react" +import React from "react" +import { BorderedMenu, BorderedMenuProps } from "." +import { BuildingIcon } from "../Icons/BuildingIcon" +import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" +import { BorderedMenuRow } from "./BorderedMenuRow" + +export default { + title: "Navbar/BorderedMenu", + component: BorderedMenu, +} + +const Template: Story = (args: BorderedMenuProps) => ( + + + + +) + +export const AdminVariant = Template.bind({}) +AdminVariant.args = { + variant: "admin-dropdown", + open: true +} + +export const UserVariant = Template.bind({}) +UserVariant.args = { + variant: "user-dropdown", + open: true +} diff --git a/site/src/components/BorderedMenu/index.tsx b/site/src/components/BorderedMenu/index.tsx index f7b674d2b8c2b..3842b4be785a9 100644 --- a/site/src/components/BorderedMenu/index.tsx +++ b/site/src/components/BorderedMenu/index.tsx @@ -4,7 +4,7 @@ import React from "react" type BorderedMenuVariant = "admin-dropdown" | "user-dropdown" -type BorderedMenuProps = Omit & { +export type BorderedMenuProps = Omit & { variant?: BorderedMenuVariant } diff --git a/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx b/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx new file mode 100644 index 0000000000000..58ddf03620dd2 --- /dev/null +++ b/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx @@ -0,0 +1,17 @@ +import Box from "@material-ui/core/Box" +import { Story } from "@storybook/react" +import React from "react" +import { AdminDropdown } from "." + +export default { + title: "Navbar/AdminDropdown", + component: AdminDropdown, +} + +const Template: Story = () => ( + + + +) + +export const Example = Template.bind({}) diff --git a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx index f9faad120eeca..76c4b50568229 100644 --- a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx +++ b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx @@ -3,7 +3,7 @@ import React from "react" import { NavbarView, NavbarViewProps } from "." export default { - title: "Page/NavbarView", + title: "Navbar/NavbarView", component: NavbarView, argTypes: { onSignOut: { action: "Sign Out" }, @@ -12,8 +12,16 @@ export default { const Template: Story = (args: NavbarViewProps) => -export const Primary = Template.bind({}) -Primary.args = { +export const ForAdmin = Template.bind({}) +ForAdmin.args = { + user: { id: "1", username: "Administrator", email: "admin@coder.com", created_at: "dawn" }, + onSignOut: () => { + return Promise.resolve() + }, +} + +export const ForMember = Template.bind({}) +ForMember.args = { user: { id: "1", username: "CathyCoder", email: "cathy@coder.com", created_at: "dawn" }, onSignOut: () => { return Promise.resolve() diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx index f6ed3bccdae59..1af9cfdd13a86 100644 --- a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx +++ b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx @@ -4,7 +4,7 @@ import React from "react" import { UserDropdown, UserDropdownProps } from "." export default { - title: "Page/UserDropdown", + title: "Navbar/UserDropdown", component: UserDropdown, argTypes: { onSignOut: { action: "Sign Out" }, From bc84caf6f8aa6292df1f44320f8a147e71d753ca Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 21:36:23 +0000 Subject: [PATCH 14/22] Storybook and organize text stories --- .../components/CodeBlock/index.stories.tsx | 2 +- .../CodeExample/CodeExample.stories.tsx | 2 +- .../Typography/Typography.stories.tsx | 28 +++++++++++++++++++ 3 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 site/src/components/Typography/Typography.stories.tsx diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/index.stories.tsx index 6e921faca30e0..df0c131937947 100644 --- a/site/src/components/CodeBlock/index.stories.tsx +++ b/site/src/components/CodeBlock/index.stories.tsx @@ -9,7 +9,7 @@ Started container user Using user 'coder' with shell '/bin/bash'`.split("\n") export default { - title: "CodeBlock/CodeBlock", + title: "Text/CodeBlock", component: CodeBlock, argTypes: { lines: { control: "text", defaultValue: sampleLines }, diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx index f7972f678afb0..cb5ff959e146d 100644 --- a/site/src/components/CodeExample/CodeExample.stories.tsx +++ b/site/src/components/CodeExample/CodeExample.stories.tsx @@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample" const sampleCode = `echo "Hello, world"` export default { - title: "CodeBlock/CodeExample", + title: "Text/CodeExample", component: CodeExample, argTypes: { code: { control: "string", defaultValue: sampleCode }, diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx new file mode 100644 index 0000000000000..3ecd5fc4a058d --- /dev/null +++ b/site/src/components/Typography/Typography.stories.tsx @@ -0,0 +1,28 @@ +import { Story } from "@storybook/react" +import React from "react" +import { Typography, TypographyProps } from "." + +export default { + title: "Text/Typography", + component: Typography, +} + +const Template: Story = (args: TypographyProps) => ( + <> + + Colorless green ideas sleep furiously + + + More people have been to France than I have + + +) + +export const Short = Template.bind({}) +Short.args = { + short: true +} +export const Tall = Template.bind({}) +Tall.args = { + short: false +} From 675b19575492d0b10f9f2fd657d11fa43d8a1216 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 22:01:36 +0000 Subject: [PATCH 15/22] Add test --- .../AdminDropdown/AdminDropdown.test.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx diff --git a/site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx b/site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx new file mode 100644 index 0000000000000..4d41657a937f0 --- /dev/null +++ b/site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx @@ -0,0 +1,48 @@ +import { screen } from "@testing-library/react" +import React from "react" +import { AdminDropdown, Language } from "." +import { history, render } from "../../../test_helpers" + +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() + expect(screen.getByText(Language.orgsLabel)).toBeDefined() + expect(screen.getByText(Language.settingsLabel)).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") + }) + + it("links to the orgs page", async () => { + await renderAndClick() + + const usersLink = screen.getByText(Language.orgsLabel).closest("a") + usersLink?.click() + + expect(history.location.pathname).toEqual("/orgs") + }) + + it("links to the settings page", async () => { + await renderAndClick() + + const usersLink = screen.getByText(Language.settingsLabel).closest("a") + usersLink?.click() + + expect(history.location.pathname).toEqual("/settings") + }) +}) From a121c7e1a048114e088893398b2d70f028f9b6b9 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 22:01:48 +0000 Subject: [PATCH 16/22] Lint --- .../BorderedMenu/BorderedMenu.stories.tsx | 17 ++------- .../components/Navbar/AdminDropdown/index.tsx | 38 +++++++++---------- site/src/components/Navbar/Arrows.tsx | 4 +- .../Navbar/NavbarView/NavbarView.test.tsx | 2 +- .../Navbar/UserDropdown/UserDropdown.test.tsx | 2 +- .../Typography/Typography.stories.tsx | 12 ++---- 6 files changed, 30 insertions(+), 45 deletions(-) diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx index a4aa241f3411e..03083c5afeaa5 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx @@ -12,28 +12,19 @@ export default { const Template: Story = (args: BorderedMenuProps) => ( - - + + ) export const AdminVariant = Template.bind({}) AdminVariant.args = { variant: "admin-dropdown", - open: true + open: true, } export const UserVariant = Template.bind({}) UserVariant.args = { variant: "user-dropdown", - open: true + open: true, } diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx index a0f9a3c9c0e12..d6a75e3688dbf 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -1,8 +1,7 @@ -import { fade, Theme } from "@material-ui/core" import ListItem from "@material-ui/core/ListItem" import ListItemText from "@material-ui/core/ListItemText" +import { fade, makeStyles, Theme } from "@material-ui/core/styles" import AdminIcon from "@material-ui/icons/SettingsOutlined" -import { makeStyles } from "@material-ui/styles" import React, { useState } from "react" import { useNavigate } from "react-router-dom" import { navHeight } from "../../../theme/constants" @@ -12,7 +11,8 @@ import { BuildingIcon } from "../../Icons/BuildingIcon" import { UsersOutlinedIcon } from "../../Icons/UsersOutlinedIcon" import { CloseDropdown, OpenDropdown } from "../Arrows" -const Language = { +export const Language = { + menuTitle: "Admin", usersLabel: "Users", usersDescription: "Manage users, roles, and permissions.", orgsLabel: "Organizations", @@ -53,7 +53,7 @@ export const AdminDropdown: React.FC = () => { <>
- + {anchorEl ? : }
@@ -74,22 +74,20 @@ export const AdminDropdown: React.FC = () => { variant="admin-dropdown" onClose={onClose} > - {entries.map((entry) => - entry.label && entry.Icon ? ( - { - onClose() - navigate(entry.path) - }} - /> - ) : null, - )} + {entries.map((entry) => ( + { + onClose() + navigate(entry.path) + }} + /> + ))} ) diff --git a/site/src/components/Navbar/Arrows.tsx b/site/src/components/Navbar/Arrows.tsx index 410d508cd6163..4e236903f109e 100644 --- a/site/src/components/Navbar/Arrows.tsx +++ b/site/src/components/Navbar/Arrows.tsx @@ -15,12 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({ }, })) -export const OpenDropdown = () => { +export const OpenDropdown: React.FC = () => { const styles = useStyles() return } -export const CloseDropdown = () => { +export const CloseDropdown: React.FC = () => { const styles = useStyles() return } diff --git a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx index 9c9d130696643..3a2f9174a8237 100644 --- a/site/src/components/Navbar/NavbarView/NavbarView.test.tsx +++ b/site/src/components/Navbar/NavbarView/NavbarView.test.tsx @@ -1,8 +1,8 @@ import { screen } from "@testing-library/react" import React from "react" +import { NavbarView } from "." import { render } from "../../../test_helpers" import { MockUser } from "../../../test_helpers/entities" -import { NavbarView } from "." describe("NavbarView", () => { const noop = () => { diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx index bb96bc9c4ae18..f09abc7bac0ee 100644 --- a/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx +++ b/site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx @@ -1,8 +1,8 @@ import { screen } from "@testing-library/react" import React from "react" +import { Language, UserDropdown, UserDropdownProps } from "." import { render } from "../../../test_helpers" import { MockUser } from "../../../test_helpers/entities" -import { Language, UserDropdown, UserDropdownProps } from "." const renderAndClick = async (props: Partial = {}) => { render() diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx index 3ecd5fc4a058d..031a88a0eab61 100644 --- a/site/src/components/Typography/Typography.stories.tsx +++ b/site/src/components/Typography/Typography.stories.tsx @@ -9,20 +9,16 @@ export default { const Template: Story = (args: TypographyProps) => ( <> - - Colorless green ideas sleep furiously - - - More people have been to France than I have - + Colorless green ideas sleep furiously + More people have been to France than I have ) export const Short = Template.bind({}) Short.args = { - short: true + short: true, } export const Tall = Template.bind({}) Tall.args = { - short: false + short: false, } From 466a43d0c9c73960f29b9405fc8092bfe20b29b6 Mon Sep 17 00:00:00 2001 From: Presley Date: Thu, 7 Apr 2022 22:36:24 +0000 Subject: [PATCH 17/22] Lint --- site/src/AppRouter.tsx | 2 +- site/src/components/TabPanel/TabSidebar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index ace1aa8f57d97..76a3d4595e2b0 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -8,11 +8,11 @@ import { CliAuthenticationPage } from "./pages/cli-auth" import { HealthzPage } from "./pages/healthz" import { SignInPage } from "./pages/login" import { OrganizationsPage } from "./pages/orgs" -import { SettingsPage } from "./pages/settings" import { PreferencesAccountPage } from "./pages/preferences/account" import { PreferencesLinkedAccountsPage } from "./pages/preferences/linked-accounts" import { PreferencesSecurityPage } from "./pages/preferences/security" import { PreferencesSSHKeysPage } from "./pages/preferences/ssh-keys" +import { SettingsPage } from "./pages/settings" import { TemplatesPage } from "./pages/templates" import { TemplatePage } from "./pages/templates/[organization]/[template]" import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create" diff --git a/site/src/components/TabPanel/TabSidebar.tsx b/site/src/components/TabPanel/TabSidebar.tsx index 5f308b0dc91a9..99973084d670c 100644 --- a/site/src/components/TabPanel/TabSidebar.tsx +++ b/site/src/components/TabPanel/TabSidebar.tsx @@ -2,8 +2,8 @@ import List from "@material-ui/core/List" import ListItem from "@material-ui/core/ListItem" import { makeStyles } from "@material-ui/core/styles" import React from "react" -import { combineClasses } from "../../util/combineClasses" import { NavLink } from "react-router-dom" +import { combineClasses } from "../../util/combineClasses" export interface TabSidebarItem { path: string From f6342da0a62e4d91137e41adddea3ff479f58d97 Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 8 Apr 2022 00:42:43 +0000 Subject: [PATCH 18/22] Fix double navigation --- site/src/components/Navbar/AdminDropdown/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx index d6a75e3688dbf..3f269a12cbe49 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -84,7 +84,6 @@ export const AdminDropdown: React.FC = () => { variant="narrow" onClick={() => { onClose() - navigate(entry.path) }} /> ))} From c78fa88677308d3bbd90afd1752932858850ac7f Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 8 Apr 2022 03:34:58 +0000 Subject: [PATCH 19/22] Lint --- site/src/components/Navbar/AdminDropdown/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/Navbar/AdminDropdown/index.tsx index 3f269a12cbe49..df0b87f78ad85 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/Navbar/AdminDropdown/index.tsx @@ -3,7 +3,6 @@ import ListItemText from "@material-ui/core/ListItemText" import { fade, makeStyles, Theme } from "@material-ui/core/styles" import AdminIcon from "@material-ui/icons/SettingsOutlined" import React, { useState } from "react" -import { useNavigate } from "react-router-dom" import { navHeight } from "../../../theme/constants" import { BorderedMenu } from "../../BorderedMenu" import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" @@ -44,7 +43,6 @@ const entries = [ export const AdminDropdown: React.FC = () => { const styles = useStyles() - const navigate = useNavigate() const [anchorEl, setAnchorEl] = useState() const onClose = () => setAnchorEl(undefined) const onOpenAdminMenu = (ev: React.MouseEvent) => setAnchorEl(ev.currentTarget) From 9a06d69a590c31c0f238bbed7944b378a361df2d Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 8 Apr 2022 14:27:09 +0000 Subject: [PATCH 20/22] Wrap new routes in AuthAndNav --- site/src/AppRouter.tsx | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx index 76a3d4595e2b0..fea52045aacd6 100644 --- a/site/src/AppRouter.tsx +++ b/site/src/AppRouter.tsx @@ -75,9 +75,30 @@ export const AppRouter: React.FC = () => ( /> - } /> - } /> - } /> + + + + } + /> + + + + } + /> + + + + } + /> }> } /> From f1dd2c8714a6eb3c2ee4a92e12c30895e28303f3 Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 8 Apr 2022 21:58:46 +0000 Subject: [PATCH 21/22] Undo unrelated storybook changes --- site/src/components/CodeBlock/index.stories.tsx | 2 +- site/src/components/CodeExample/CodeExample.stories.tsx | 2 +- .../src/components/Navbar/UserDropdown/UserDropdown.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/index.stories.tsx index df0c131937947..6e921faca30e0 100644 --- a/site/src/components/CodeBlock/index.stories.tsx +++ b/site/src/components/CodeBlock/index.stories.tsx @@ -9,7 +9,7 @@ Started container user Using user 'coder' with shell '/bin/bash'`.split("\n") export default { - title: "Text/CodeBlock", + title: "CodeBlock/CodeBlock", component: CodeBlock, argTypes: { lines: { control: "text", defaultValue: sampleLines }, diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx index cb5ff959e146d..f7972f678afb0 100644 --- a/site/src/components/CodeExample/CodeExample.stories.tsx +++ b/site/src/components/CodeExample/CodeExample.stories.tsx @@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample" const sampleCode = `echo "Hello, world"` export default { - title: "Text/CodeExample", + title: "CodeBlock/CodeExample", component: CodeExample, argTypes: { code: { control: "string", defaultValue: sampleCode }, diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx index 1af9cfdd13a86..f6ed3bccdae59 100644 --- a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx +++ b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx @@ -4,7 +4,7 @@ import React from "react" import { UserDropdown, UserDropdownProps } from "." export default { - title: "Navbar/UserDropdown", + title: "Page/UserDropdown", component: UserDropdown, argTypes: { onSignOut: { action: "Sign Out" }, From acc92f8fcb5c0e2bde26cd4a1b1e8131ca16a078 Mon Sep 17 00:00:00 2001 From: Presley Date: Fri, 8 Apr 2022 22:04:05 +0000 Subject: [PATCH 22/22] Refactor according to conventions --- .../AdminDropdown/AdminDropdown.stories.tsx | 4 ++-- .../AdminDropdown/AdminDropdown.test.tsx | 4 ++-- .../index.tsx => AdminDropdown/AdminDropdown.tsx} | 12 ++++++------ .../components/BorderedMenu/BorderedMenu.stories.tsx | 6 +++--- .../BorderedMenu/{index.tsx => BorderedMenu.tsx} | 0 .../BorderedMenuRow.tsx | 2 +- .../Arrows.tsx => DropdownArrows/DropdownArrows.tsx} | 0 .../Navbar/NavbarView/NavbarView.stories.tsx | 2 +- site/src/components/Navbar/NavbarView/index.tsx | 2 +- site/src/components/Navbar/UserDropdown/index.tsx | 4 ++-- .../src/components/Typography/Typography.stories.tsx | 4 ++-- .../Typography/{index.tsx => Typography.tsx} | 0 12 files changed, 20 insertions(+), 20 deletions(-) rename site/src/components/{Navbar => }/AdminDropdown/AdminDropdown.stories.tsx (78%) rename site/src/components/{Navbar => }/AdminDropdown/AdminDropdown.test.tsx (92%) rename site/src/components/{Navbar/AdminDropdown/index.tsx => AdminDropdown/AdminDropdown.tsx} (91%) rename site/src/components/BorderedMenu/{index.tsx => BorderedMenu.tsx} (100%) rename site/src/components/{BorderedMenu => BorderedMenuRow}/BorderedMenuRow.tsx (98%) rename site/src/components/{Navbar/Arrows.tsx => DropdownArrows/DropdownArrows.tsx} (100%) rename site/src/components/Typography/{index.tsx => Typography.tsx} (100%) diff --git a/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx b/site/src/components/AdminDropdown/AdminDropdown.stories.tsx similarity index 78% rename from site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx rename to site/src/components/AdminDropdown/AdminDropdown.stories.tsx index 58ddf03620dd2..8cc6c7d70ce15 100644 --- a/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx +++ b/site/src/components/AdminDropdown/AdminDropdown.stories.tsx @@ -1,10 +1,10 @@ import Box from "@material-ui/core/Box" import { Story } from "@storybook/react" import React from "react" -import { AdminDropdown } from "." +import { AdminDropdown } from "./AdminDropdown" export default { - title: "Navbar/AdminDropdown", + title: "components/AdminDropdown", component: AdminDropdown, } diff --git a/site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx b/site/src/components/AdminDropdown/AdminDropdown.test.tsx similarity index 92% rename from site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx rename to site/src/components/AdminDropdown/AdminDropdown.test.tsx index 4d41657a937f0..cf74eb782f7da 100644 --- a/site/src/components/Navbar/AdminDropdown/AdminDropdown.test.tsx +++ b/site/src/components/AdminDropdown/AdminDropdown.test.tsx @@ -1,7 +1,7 @@ import { screen } from "@testing-library/react" import React from "react" -import { AdminDropdown, Language } from "." -import { history, render } from "../../../test_helpers" +import { history, render } from "../../test_helpers" +import { AdminDropdown, Language } from "./AdminDropdown" const renderAndClick = async () => { render() diff --git a/site/src/components/Navbar/AdminDropdown/index.tsx b/site/src/components/AdminDropdown/AdminDropdown.tsx similarity index 91% rename from site/src/components/Navbar/AdminDropdown/index.tsx rename to site/src/components/AdminDropdown/AdminDropdown.tsx index df0b87f78ad85..455331e66d18f 100644 --- a/site/src/components/Navbar/AdminDropdown/index.tsx +++ b/site/src/components/AdminDropdown/AdminDropdown.tsx @@ -3,12 +3,12 @@ import ListItemText from "@material-ui/core/ListItemText" import { fade, makeStyles, Theme } from "@material-ui/core/styles" import AdminIcon from "@material-ui/icons/SettingsOutlined" import React, { useState } from "react" -import { navHeight } from "../../../theme/constants" -import { BorderedMenu } from "../../BorderedMenu" -import { BorderedMenuRow } from "../../BorderedMenu/BorderedMenuRow" -import { BuildingIcon } from "../../Icons/BuildingIcon" -import { UsersOutlinedIcon } from "../../Icons/UsersOutlinedIcon" -import { CloseDropdown, OpenDropdown } from "../Arrows" +import { navHeight } from "../../theme/constants" +import { BorderedMenu } from "../BorderedMenu/BorderedMenu" +import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow" +import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows" +import { BuildingIcon } from "../Icons/BuildingIcon" +import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" export const Language = { menuTitle: "Admin", diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx index 03083c5afeaa5..73186fd77faec 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx @@ -1,12 +1,12 @@ import { Story } from "@storybook/react" import React from "react" -import { BorderedMenu, BorderedMenuProps } from "." +import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow" import { BuildingIcon } from "../Icons/BuildingIcon" import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon" -import { BorderedMenuRow } from "./BorderedMenuRow" +import { BorderedMenu, BorderedMenuProps } from "./BorderedMenu" export default { - title: "Navbar/BorderedMenu", + title: "components/BorderedMenu", component: BorderedMenu, } diff --git a/site/src/components/BorderedMenu/index.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx similarity index 100% rename from site/src/components/BorderedMenu/index.tsx rename to site/src/components/BorderedMenu/BorderedMenu.tsx diff --git a/site/src/components/BorderedMenu/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx similarity index 98% rename from site/src/components/BorderedMenu/BorderedMenuRow.tsx rename to site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 4c55083c81a95..d83bebdf52166 100644 --- a/site/src/components/BorderedMenu/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -5,7 +5,7 @@ import CheckIcon from "@material-ui/icons/Check" import React from "react" import { NavLink } from "react-router-dom" import { ellipsizeText } from "../../util/ellipsizeText" -import { Typography } from "../Typography" +import { Typography } from "../Typography/Typography" type BorderedMenuRowVariant = "narrow" | "wide" diff --git a/site/src/components/Navbar/Arrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx similarity index 100% rename from site/src/components/Navbar/Arrows.tsx rename to site/src/components/DropdownArrows/DropdownArrows.tsx diff --git a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx index 76c4b50568229..e5d43d916d09d 100644 --- a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx +++ b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx @@ -3,7 +3,7 @@ import React from "react" import { NavbarView, NavbarViewProps } from "." export default { - title: "Navbar/NavbarView", + title: "components/NavbarView", component: NavbarView, argTypes: { onSignOut: { action: "Sign Out" }, diff --git a/site/src/components/Navbar/NavbarView/index.tsx b/site/src/components/Navbar/NavbarView/index.tsx index 3a7a694e13050..58a9b387f9285 100644 --- a/site/src/components/Navbar/NavbarView/index.tsx +++ b/site/src/components/Navbar/NavbarView/index.tsx @@ -5,8 +5,8 @@ import React from "react" import { NavLink } from "react-router-dom" import { UserResponse } from "../../../api/types" import { navHeight } from "../../../theme/constants" +import { AdminDropdown } from "../../AdminDropdown/AdminDropdown" import { Logo } from "../../Icons" -import { AdminDropdown } from "../AdminDropdown" import { UserDropdown } from "../UserDropdown" export interface NavbarViewProps { diff --git a/site/src/components/Navbar/UserDropdown/index.tsx b/site/src/components/Navbar/UserDropdown/index.tsx index 5474b21a749bf..16fc166d07a68 100644 --- a/site/src/components/Navbar/UserDropdown/index.tsx +++ b/site/src/components/Navbar/UserDropdown/index.tsx @@ -8,12 +8,12 @@ import AccountIcon from "@material-ui/icons/AccountCircleOutlined" import React, { useState } from "react" import { Link } from "react-router-dom" import { UserResponse } from "../../../api/types" -import { BorderedMenu } from "../../BorderedMenu" +import { BorderedMenu } from "../../BorderedMenu/BorderedMenu" +import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows" import { LogoutIcon } from "../../Icons" import { DocsIcon } from "../../Icons/DocsIcon" import { UserAvatar } from "../../User" import { UserProfileCard } from "../../User/UserProfileCard" -import { CloseDropdown, OpenDropdown } from "../Arrows" export const Language = { accountLabel: "Account", diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx index 031a88a0eab61..87fc049446d2b 100644 --- a/site/src/components/Typography/Typography.stories.tsx +++ b/site/src/components/Typography/Typography.stories.tsx @@ -1,9 +1,9 @@ import { Story } from "@storybook/react" import React from "react" -import { Typography, TypographyProps } from "." +import { Typography, TypographyProps } from "./Typography" export default { - title: "Text/Typography", + title: "components/Typography", component: Typography, } diff --git a/site/src/components/Typography/index.tsx b/site/src/components/Typography/Typography.tsx similarity index 100% rename from site/src/components/Typography/index.tsx rename to site/src/components/Typography/Typography.tsx