chore: un-nest components (#1090)

Closes #936.

site/src/AppRouter.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { Route, Routes } from "react-router-dom"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
-import { RequireAuth } from "./components/Page/RequireAuth"
-import { PreferencesLayout } from "./components/Preferences/Layout"
+import { PreferencesLayout } from "./components/PreferencesLayout/PreferencesLayout"
+import { RequireAuth } from "./components/RequireAuth/RequireAuth"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404Page/404Page"
 import { CliAuthenticationPage } from "./pages/CliAuthPage/CliAuthPage"

site/src/app.tsx

@@ -4,7 +4,7 @@ import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
-import { GlobalSnackbar } from "./components/Snackbar/GlobalSnackbar"
+import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { light } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"

site/src/components/AuthAndFrame/AuthAndFrame.tsx

@@ -1,7 +1,7 @@
 import React from "react"
+import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
-import { Footer } from "../Page/Footer"
-import { RequireAuth } from "../Page/RequireAuth"
+import { RequireAuth } from "../RequireAuth/RequireAuth"
 
 interface AuthAndFrameProps {
   children: JSX.Element

site/src/components/CodeExample/CodeExample.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { CopyButton } from "../Button/CopyButton"
+import { CopyButton } from "../CopyButton/CopyButton"
 
 export interface CodeExampleProps {
   code: string

site/src/components/FormDropdownField/FormDropdownField.tsx

@@ -3,23 +3,23 @@ import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { FormTextField, FormTextFieldProps } from "./FormTextField"
+import { FormTextField, FormTextFieldProps } from "../FormTextField/FormTextField"
 
-export interface DropdownItem {
+export interface FormDropdownItem {
   value: string
   name: string
   description?: string
 }
 
 export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
-  items: DropdownItem[]
+  items: FormDropdownItem[]
 }
 
 export const FormDropdownField = <T,>({ items, ...props }: FormDropdownFieldProps<T>): React.ReactElement => {
   const styles = useStyles()
   return (
     <FormTextField select {...props}>
-      {items.map((item: DropdownItem) => (
+      {items.map((item: FormDropdownItem) => (
         <MenuItem key={item.value} value={item.value}>
           <Box alignItems="center" display="flex">
             <Box ml={1}>

site/src/components/FormTextField/FormTextField.tsx

@@ -1,7 +1,7 @@
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
 import { FormikContextType } from "formik"
 import React from "react"
-import { PasswordField } from "./PasswordField"
+import { PasswordField } from "../PasswordField/PasswordField"
 
 /**
  * FormFieldProps are required props for creating form fields using a factory.

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -2,9 +2,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import React, { useCallback, useState } from "react"
 import { useCustomEvent } from "../../hooks/events"
 import { CustomEventListener } from "../../util/events"
+import { EnterpriseSnackbar } from "../EnterpriseSnackbar/EnterpriseSnackbar"
 import { ErrorIcon } from "../Icons/ErrorIcon"
 import { Typography } from "../Typography/Typography"
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
 import {
   AdditionalMessage,
   isNotificationList,

site/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { HeaderButton } from "./HeaderButton"
+import { HeaderButton } from "../HeaderButton/HeaderButton"
 
 export interface HeaderAction {
   readonly text: string

site/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
-import { NavbarView } from "./NavbarView/NavbarView"
+import { NavbarView } from "../NavbarView/NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)

site/src/components/NavbarView/NavbarView.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { render } from "../../../testHelpers"
-import { MockUser } from "../../../testHelpers/entities"
+import { render } from "../../testHelpers"
+import { MockUser } from "../../testHelpers/entities"
 import { NavbarView } from "./NavbarView"
 
 describe("NavbarView", () => {

site/src/components/NavbarView/NavbarView.tsx

@@ -3,10 +3,10 @@ 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 { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
-import { Logo } from "../../Icons/Logo"
+import { UserResponse } from "../../api/types"
+import { navHeight } from "../../theme/constants"
+import { AdminDropdown } from "../AdminDropdown/AdminDropdown"
+import { Logo } from "../Icons/Logo"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {

site/src/components/PreferencesAccountForm/PreferencesAccountForm.tsx

@@ -3,9 +3,9 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
-import { LoadingButton } from "./../Button/LoadingButton"
 
 interface AccountFormValues {
   name: string

site/src/components/Section/Section.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { SectionAction } from "./Action"
+import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"
 

site/src/components/SignInForm/SignInForm.tsx

@@ -4,9 +4,9 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
-import { LoadingButton } from "./../Button/LoadingButton"
-import { Welcome } from "./Welcome"
+import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { Welcome } from "../Welcome/Welcome"
+import { LoadingButton } from "./../LoadingButton/LoadingButton"
 
 /**
  * BuiltInAuthFormValues describes a form using built-in (email/password)

site/src/components/TabPanel/TabPanel.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 import React from "react"
-import { TabSidebar, TabSidebarItem } from "./TabSidebar"
+import { TabSidebar, TabSidebarItem } from "../TabSidebar/TabSidebar"
 
 export type AdminMenuItemCallback = (menuItem: string) => void
 

site/src/components/Table/Table.tsx

@@ -5,8 +5,8 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import React from "react"
-import { TableHeaders } from "./TableHeaders"
-import { TableTitle } from "./TableTitle"
+import { TableHeaders } from "../TableHeaders/TableHeaders"
+import { TableTitle } from "../TableTitle/TableTitle"
 
 export interface Column<T> {
   /**

site/src/components/UserCell/UserCell.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { MockUser, MockUserAgent } from "../../../testHelpers"
+import { MockUser, MockUserAgent } from "../../testHelpers"
 import { UserCell, UserCellProps } from "./UserCell"
 
 export default {

site/src/components/UserCell/UserCell.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 import React from "react"
-import { MockUser, MockUserAgent, WrapperComponent } from "../../../testHelpers"
+import { MockUser, MockUserAgent, WrapperComponent } from "../../testHelpers"
 import { UserCell, UserCellProps } from "./UserCell"
 
 namespace Helpers {

site/src/components/UserCell/UserCell.tsx

@@ -3,7 +3,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { UserAvatar, UserAvatarProps } from "../../User/UserAvatar"
+import { UserAvatar, UserAvatarProps } from "../UserAvatar/UserAvatar"
 
 export interface UserCellProps {
   Avatar: UserAvatarProps

site/src/components/UserDropdown/UserDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { render } from "../../../testHelpers"
-import { MockUser } from "../../../testHelpers/entities"
+import { render } from "../../testHelpers"
+import { MockUser } from "../../testHelpers/entities"
 import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {

site/src/components/UserDropdown/UsersDropdown.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/BorderedMenu"
-import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
-import { DocsIcon } from "../../Icons/DocsIcon"
-import { LogoutIcon } from "../../Icons/LogoutIcon"
-import { UserAvatar } from "../../User/UserAvatar"
-import { UserProfileCard } from "../../User/UserProfileCard"
+import { UserResponse } from "../../api/types"
+import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
+import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
+import { DocsIcon } from "../Icons/DocsIcon"
+import { LogoutIcon } from "../Icons/LogoutIcon"
+import { UserAvatar } from "../UserAvatar/UserAvatar"
+import { UserProfileCard } from "../UserProfileCard/UserProfileCard"
 
 export const Language = {
   accountLabel: "Account",

site/src/components/UserProfileCard/UserProfileCard.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
 import { UserResponse } from "../../api/types"
-import { UserAvatar } from "./UserAvatar"
+import { UserAvatar } from "../UserAvatar/UserAvatar"
 
 interface UserProfileCardProps {
   user: UserResponse

site/src/components/UsersTable/UsersTable.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
-import { Column, Table } from "../../components/Table/Table"
 import { EmptyState } from "../EmptyState/EmptyState"
-import { UserCell } from "../Table/Cells/UserCell"
+import { Column, Table } from "../Table/Table"
+import { UserCell } from "../UserCell/UserCell"
 
 const Language = {
   pageTitle: "Users",

site/src/components/Workspace/Workspace.tsx

@@ -6,9 +6,9 @@ import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import React from "react"
 import { Link } from "react-router-dom"
 import * as Types from "../../api/types"
+import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 import * as Constants from "./constants"
-import { WorkspaceSchedule } from "./WorkspaceSchedule"
-import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
   organization: Types.Organization

site/src/components/WorkspaceSchedule/WorkspaceSchedule.tsx

@@ -3,7 +3,7 @@ import Typography from "@material-ui/core/Typography"
 import cronstrue from "cronstrue"
 import React from "react"
 import { extractTimezone, stripTimezone } from "../../util/schedule"
-import { WorkspaceSection } from "./WorkspaceSection"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 const Language = {
   autoStartLabel: (schedule: string): string => {

site/src/components/WorkspaceSection/WorkspaceSection.tsx

@@ -2,7 +2,7 @@ import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CardPadding, CardRadius } from "./constants"
+import { CardPadding, CardRadius } from "../Workspace/constants"
 
 export interface WorkspaceSectionProps {
   title: string

site/src/forms/CreateTemplateForm.tsx

@@ -4,12 +4,12 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateTemplateRequest, Organization, Provisioner, Template } from "../api/types"
-import { LoadingButton } from "../components/Button/LoadingButton"
-import { FormCloseButton } from "../components/Form/FormCloseButton"
-import { DropdownItem, FormDropdownField } from "../components/Form/FormDropdownField"
-import { FormSection } from "../components/Form/FormSection"
-import { FormTextField } from "../components/Form/FormTextField"
-import { FormTitle } from "../components/Form/FormTitle"
+import { FormCloseButton } from "../components/FormCloseButton/FormCloseButton"
+import { FormDropdownField, FormDropdownItem } from "../components/FormDropdownField/FormDropdownField"
+import { FormSection } from "../components/FormSection/FormSection"
+import { FormTextField } from "../components/FormTextField/FormTextField"
+import { FormTitle } from "../components/FormTitle/FormTitle"
+import { LoadingButton } from "../components/LoadingButton/LoadingButton"
 
 export interface CreateTemplateFormProps {
   provisioners: Provisioner[]
@@ -45,14 +45,14 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({
     },
   })
 
-  const organizationDropDownItems: DropdownItem[] = organizations.map((org) => {
+  const organizationDropDownItems: FormDropdownItem[] = organizations.map((org) => {
     return {
       value: org.name,
       name: org.name,
     }
   })
 
-  const provisionerDropDownItems: DropdownItem[] = provisioners.map((provisioner) => {
+  const provisionerDropDownItems: FormDropdownItem[] = provisioners.map((provisioner) => {
     return {
       value: provisioner.id,
       name: provisioner.name,

site/src/forms/CreateWorkspaceForm.tsx

@@ -4,11 +4,11 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateWorkspaceRequest, Template, Workspace } from "../api/types"
-import { LoadingButton } from "../components/Button/LoadingButton"
-import { FormCloseButton } from "../components/Form/FormCloseButton"
-import { FormSection } from "../components/Form/FormSection"
-import { FormTextField } from "../components/Form/FormTextField"
-import { FormTitle } from "../components/Form/FormTitle"
+import { FormCloseButton } from "../components/FormCloseButton/FormCloseButton"
+import { FormSection } from "../components/FormSection/FormSection"
+import { FormTextField } from "../components/FormTextField/FormTextField"
+import { FormTitle } from "../components/FormTitle/FormTitle"
+import { LoadingButton } from "../components/LoadingButton/LoadingButton"
 
 export interface CreateWorkspaceForm {
   template: Template

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -2,8 +2,8 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
 import { getApiKey } from "../../api"
+import { CliAuthToken } from "../../components/CliAuthToken/CliAuthToken"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { CliAuthToken } from "../../components/SignIn/CliAuthToken"
 import { XServiceContext } from "../../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {

site/src/pages/LoginPage/LoginPage.test.tsx

@@ -2,7 +2,7 @@ import { act, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { rest } from "msw"
 import React from "react"
-import { Language } from "../../components/SignIn/SignInForm"
+import { Language } from "../../components/SignInForm/SignInForm"
 import { history, render } from "../../testHelpers"
 import { server } from "../../testHelpers/server"
 import { LoginPage } from "./LoginPage"

site/src/pages/LoginPage/LoginPage.tsx

@@ -2,8 +2,8 @@ import { makeStyles } from "@material-ui/core/styles"
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { Navigate, useLocation } from "react-router-dom"
-import { Footer } from "../../components/Page/Footer"
-import { SignInForm } from "../../components/SignIn/SignInForm"
+import { Footer } from "../../components/Footer/Footer"
+import { SignInForm } from "../../components/SignInForm/SignInForm"
 import { retrieveRedirect } from "../../util/redirect"
 import { XServiceContext } from "../../xServices/StateContext"
 

site/src/pages/PreferencesPages/AccountPage/AccountPage.test.tsx

@@ -1,8 +1,8 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react"
 import React from "react"
 import * as API from "../../../api"
-import * as AccountForm from "../../../components/Preferences/AccountForm"
-import { GlobalSnackbar } from "../../../components/Snackbar/GlobalSnackbar"
+import { GlobalSnackbar } from "../../../components/GlobalSnackbar/GlobalSnackbar"
+import * as AccountForm from "../../../components/PreferencesAccountForm/PreferencesAccountForm"
 import { renderWithAuth } from "../../../testHelpers"
 import * as AuthXService from "../../../xServices/auth/authXService"
 import { AccountPage, Language } from "./AccountPage"

site/src/pages/PreferencesPages/AccountPage/AccountPage.tsx

@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { isApiError, mapApiErrorToFieldErrors } from "../../../api/errors"
-import { AccountForm } from "../../../components/Preferences/AccountForm"
+import { AccountForm } from "../../../components/PreferencesAccountForm/PreferencesAccountForm"
 import { Section } from "../../../components/Section/Section"
 import { XServiceContext } from "../../../xServices/StateContext"
 

site/src/testHelpers/index.tsx

@@ -3,7 +3,7 @@ import { render as wrappedRender, RenderResult } from "@testing-library/react"
 import { createMemoryHistory } from "history"
 import React from "react"
 import { MemoryRouter, Route, Routes, unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
-import { RequireAuth } from "../components/Page/RequireAuth"
+import { RequireAuth } from "../components/RequireAuth/RequireAuth"
 import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 import { MockUser } from "./entities"

site/src/util/formUtils.test.ts

@@ -1,5 +1,5 @@
 import { FormikContextType } from "formik/dist/types"
-import { getFormHelpers, onChangeTrimmed } from "./utils"
+import { getFormHelpers, onChangeTrimmed } from "./formUtils"
 
 interface TestType {
   untouchedGoodField: string

site/src/xServices/auth/authXService.ts

@@ -1,7 +1,7 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"
-import { displaySuccess } from "../../components/Snackbar/utils"
+import { displaySuccess } from "../../components/GlobalSnackbar/utils"
 
 export const Language = {
   successProfileUpdate: "Updated preferences.",