May 16, 2022 · May 13, 2022 · May 13, 2022 · May 14, 2022 · May 14, 2022 · May 14, 2022
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { withThemes } from "@react-theming/storybook-addon"
 import { createMemoryHistory } from "history"
 import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark, light } from "../src/theme"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"

 const providerFn = ({ children, theme }) => (
  <ThemeProvider theme={theme}>
 addDecorator((story) => (
  <ThemeProvider theme={dark}>
    <CssBaseline />
    {children}
    {story()}
  </ThemeProvider>
 )

 addDecorator(withThemes(null, [light, dark], { providerFn }))
 ))

 const history = createMemoryHistory()

diff --git a/site/e2e/pom/TemplatesPage.ts → site/e2e/pom/WorkspacesPage.ts b/site/e2e/pom/TemplatesPage.ts → site/e2e/pom/WorkspacesPage.ts
 import { Page } from "@playwright/test"
 import { BasePom } from "./BasePom"

 export classTemplatesPage extends BasePom {
 export classWorkspacesPage extends BasePom {
  constructor(baseURL: string | undefined, page: Page) {
    super(baseURL, "/templates", page)
    super(baseURL, "/workspaces", page)
  }
 }
diff --git a/site/e2e/pom/index.ts b/site/e2e/pom/index.ts
 export * from "./SignInPage"
 export * from "./TemplatesPage"
 export * from "./WorkspacesPage"
diff --git a/site/e2e/tests/login.spec.ts b/site/e2e/tests/login.spec.ts
 import { test } from "@playwright/test"
 import { email, password } from "../constants"
 import { SignInPage,TemplatesPage } from "../pom"
 import { SignInPage,WorkspacesPage } from "../pom"
 import { waitForClientSideNavigation } from "./../util"

 test("Login takes user to /templates", async ({ baseURL, page }) => {
 test("Login takes user to /workspaces", async ({ baseURL, page }) => {
  await page.goto(baseURL + "/", { waitUntil: "networkidle" })

  // Log-in with the default credentials we set up in the development server
  const signInPage = new SignInPage(baseURL, page)
  await signInPage.submitBuiltInAuthentication(email, password)

  consttemplatesPage = newTemplatesPage(baseURL, page)
  await waitForClientSideNavigation(page, { to:templatesPage.url })
  constworkspacesPage = newWorkspacesPage(baseURL, page)
  await waitForClientSideNavigation(page, { to:workspacesPage.url })

  await page.waitForSelector("text=Templates")
  await page.waitForSelector("text=Workspaces")
 })
diff --git a/site/package.json b/site/package.json
    "typegen": "xstate typegen 'src/**/*.ts'"
  },
  "dependencies": {
    "@fontsource/fira-code": "4.5.9",
    "@fontsource/ibm-plex-mono": "4.5.9",
    "@fontsource/inter": "4.5.7",
    "@material-ui/core": "4.9.4",
    "@material-ui/icons": "4.5.1",
    "@xstate/react": "3.0.0",
    "axios": "0.26.1",
    "cronstrue": "2.4.0",
    "dayjs": "^1.11.2",
    "formik": "2.2.9",
    "history": "5.3.0",
    "react": "17.0.2",
  "devDependencies": {
    "@playwright/test": "1.21.1",
    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
    "@react-theming/storybook-addon": "1.1.5",
    "@storybook/addon-actions": "6.4.22",
    "@storybook/addon-essentials": "6.4.22",
    "@storybook/addon-links": "6.4.22",
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
 import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
 import { AccountPage } from "./pages/SettingsPages/AccountPage/AccountPage"
 import { SSHKeysPage } from "./pages/SettingsPages/SSHKeysPage/SSHKeysPage"
 import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
 import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
 import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
 import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"

 const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
 const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))

 export const AppRouter: React.FC = () => (
  <React.Suspense fallback={<></>}>
          }
        />

        <Route path="templates">
        <Route path="workspaces">
          <Route
            index
            element={
              <AuthAndFrame>
                <TemplatesPage />
                <WorkspacesPage />
              </AuthAndFrame>
            }
          />
          <Route path=":organization/:template">
            <Route
              index
              element={
                <AuthAndFrame>
                  <TemplatePage />
                </AuthAndFrame>
              }
            />
            <Route
              path="create"
              element={
                <RequireAuth>
                  <CreateWorkspacePage />
                </RequireAuth>
              }
            />
          </Route>
        </Route>

        <Route path="workspaces">
          <Route path=":workspace">
            <Route
              index
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
  return response.data
 }

 export const getWorkspaces = async (userID = "me"): Promise<TypesGen.Workspace[]> => {
  const response = await axios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
  return response.data
 }

 export const getWorkspaceByOwnerAndName = async (
  organizationID: string,
  username = "me",
diff --git a/site/src/app.tsx b/site/src/app.tsx
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import {light } from "./theme"
 import {dark } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"

        }}
      >
        <XServiceProvider>
          <ThemeProvider theme={light}>
          <ThemeProvider theme={dark}>
            <CssBaseline />
            <AppRouter />
            <GlobalSnackbar />
diff --git a/site/src/components/AdminDropdown/AdminDropdown.tsx b/site/src/components/AdminDropdown/AdminDropdown.tsx
    <>
      <div className={styles.link}>
        <ListItem selected={Boolean(anchorEl)} button onClick={onOpenAdminMenu}>
          <ListItemText className="no-brace"color="primary"primary={Language.menuTitle} />
          <ListItemText className="no-brace" primary={Language.menuTitle} />
          {anchorEl ? <CloseDropdown /> : <OpenDropdown />}
        </ListItem>
      </div>
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
  root: {
    minHeight: 156,
    background: theme.palette.background.default,
    color: theme.palette.codeBlock.contrastText,
    color: theme.palette.text.primary,
    fontFamily: MONOSPACE_FONT_FAMILY,
    fontSize: 13,
    wordBreak: "break-all",
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
    justifyContent: "space-between",
    alignItems: "center",
    background: theme.palette.background.default,
    color: theme.palette.codeBlock.contrastText,
    color: theme.palette.primary.contrastText,
    fontFamily: MONOSPACE_FONT_FAMILY,
    fontSize: 13,
    padding: theme.spacing(2),
diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.test.tsx
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { fireEvent, render } from "@testing-library/react"
 import React from "react"
 import { act } from "react-dom/test-utils"
 import {light } from "../../theme"
 import {WrapperComponent } from "../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"

 namespace Helpers {
  export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
    return (
      <ThemeProvider theme={light}>
      <WrapperComponent>
        <ConfirmDialog {...props} />
      </ThemeProvider>
      </WrapperComponent>
    )
  }
 }
diff --git a/site/src/components/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/ConfirmDialog/ConfirmDialog.tsx
 const useStyles = makeStyles((theme) => ({
  dialogWrapper: (props: StyleProps) => ({
    "& .MuiPaper-root": {
      background:
        props.type === "info"
          ? theme.palette.confirmDialog.info.background
          : theme.palette.confirmDialog.error.background,
      background: props.type === "info" ? theme.palette.primary.main : theme.palette.error.dark,
    },
  }),
  dialogContent: (props: StyleProps) => ({
    color: props.type === "info" ? theme.palette.confirmDialog.info.text : theme.palette.confirmDialog.error.text,
    color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText,
    padding: theme.spacing(6),
    textAlign: "center",
  }),
  description: (props: StyleProps) => ({
    color:
      props.type === "info"
        ? fade(theme.palette.confirmDialog.info.text, 0.75)
        : fade(theme.palette.confirmDialog.error.text, 0.75),
        ? fade(theme.palette.primary.contrastText, 0.75)
        : fade(theme.palette.error.contrastText, 0.75),
    lineHeight: "160%",

    "& strong": {
      color:
        props.type === "info"
          ? fade(theme.palette.confirmDialog.info.text, 0.95)
          : fade(theme.palette.confirmDialog.error.text, 0.95),
          ? fade(theme.palette.primary.contrastText, 0.95)
          : fade(theme.palette.error.contrastText, 0.95),
    },
  }),
 }))
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
  },
  copyButton: {
    borderRadius: 7,
    background: theme.palette.codeBlock.button.main,
    color: theme.palette.codeBlock.button.contrastText,
    background: theme.palette.background.default,
    color: theme.palette.primary.contrastText,
    padding: theme.spacing(0.85),
    minWidth: 32,

    "&:hover": {
      background: theme.palette.codeBlock.button.hover,
      background: theme.palette.background.paper,
    },
  },
  fileCopyIcon: {
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
    },
  },
  confirmDialogCancelButton: (props: StyleProps) => {
    const color = props.type === "info" ? theme.palette.confirmDialog.info.text : theme.palette.confirmDialog.error.text
    const color = props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText
    return {
      background: fade(color, 0.15),
      color,
diff --git a/site/src/components/Header/Header.tsx b/site/src/components/Header/Header.tsx
    display: "flex",
    alignItems: "center",
    height: 126,
    background: theme.palette.hero.main,
    background: theme.palette.background.default,
    boxShadow: theme.shadows[3],
  },
  topInner: {
diff --git a/site/src/components/HeaderButton/HeaderButton.tsx b/site/src/components/HeaderButton/HeaderButton.tsx
 import Button from "@material-ui/core/Button"
 import {lighten,makeStyles } from "@material-ui/core/styles"
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"

 export interface HeaderButtonProps {
  )
 }

 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles(() => ({
  pageButton: {
    whiteSpace: "nowrap",
    backgroundColor: lighten(theme.palette.hero.main, 0.1),
    color: "#B5BFD2",
  },
 }))
diff --git a/site/src/components/Margins/Margins.stories.tsx b/site/src/components/Margins/Margins.stories.tsx

 const Template: Story = (args) => (
  <Margins {...args}>
    <div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
    <div style={{ width: "100%", background: "black" }}>Here is some content that will not get too wide!</div>
  </Margins>
 )

diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
    maxWidth,
    padding: `0 ${sidePadding}`,
    flex: 1,
    width: "100%",
  },
 }))

 export const Margins: React.FC = ({ children }) => {
  const styles = useStyles()
  return (
    <div>
      <div className={styles.margins}>{children}</div>
    </div>
  )
  return <div className={styles.margins}>{children}</div>
 }
Original file line number	Diff line number	Diff line change
		@@ -1,20 +1,17 @@
		import CssBaseline from "@material-ui/core/CssBaseline"
		import ThemeProvider from "@material-ui/styles/ThemeProvider"
		import { withThemes } from "@react-theming/storybook-addon"
Copy link Contributor greyscaledMay 16, 2022• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Question(if-minor): Are we able to remove this dependency now`"@react-theming/storybook-addon": "1.1.5",` ? Copy link MemberAuthor kylecarbsMay 16, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I think so! Copy link MemberAuthor kylecarbsMay 16, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Good catch.
		import { createMemoryHistory } from "history"
		import { addDecorator } from "node_modules/@storybook/react"
		import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
		import { dark, light } from "../src/theme"
		import { dark } from "../src/theme"
		import "../src/theme/globalFonts"

		const providerFn = ({ children, theme }) => (
		<ThemeProvider theme={theme}>
		addDecorator((story) => (
		<ThemeProvider theme={dark}>
		<CssBaseline />
		{children}
		{story()}
		</ThemeProvider>
		)

		addDecorator(withThemes(null, [light, dark], { providerFn }))
		))

		const history = createMemoryHistory()

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,8 @@
		import { Page } from "@playwright/test"
		import { BasePom } from "./BasePom"

		export classTemplatesPage extends BasePom {
		export classWorkspacesPage extends BasePom {
		constructor(baseURL: string \| undefined, page: Page) {
		super(baseURL, "/templates", page)
		super(baseURL, "/workspaces", page)
		}
		}
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,2 @@
		export * from "./SignInPage"
		export * from "./TemplatesPage"
		export * from "./WorkspacesPage"
Original file line number	Diff line number	Diff line change
		@@ -1,17 +1,17 @@
		import { test } from "@playwright/test"
		import { email, password } from "../constants"
		import { SignInPage,TemplatesPage } from "../pom"
		import { SignInPage,WorkspacesPage } from "../pom"
		import { waitForClientSideNavigation } from "./../util"

		test("Login takes user to /templates", async ({ baseURL, page }) => {
		test("Login takes user to /workspaces", async ({ baseURL, page }) => {
		await page.goto(baseURL + "/", { waitUntil: "networkidle" })

		// Log-in with the default credentials we set up in the development server
		const signInPage = new SignInPage(baseURL, page)
		await signInPage.submitBuiltInAuthentication(email, password)

		consttemplatesPage = newTemplatesPage(baseURL, page)
		await waitForClientSideNavigation(page, { to:templatesPage.url })
		constworkspacesPage = newWorkspacesPage(baseURL, page)
		await waitForClientSideNavigation(page, { to:workspacesPage.url })

		await page.waitForSelector("text=Templates")
		await page.waitForSelector("text=Workspaces")
		})
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,7 +25,7 @@
		"typegen": "xstate typegen 'src/*/.ts'"
		},
		"dependencies": {
		"@fontsource/fira-code": "4.5.9",
		"@fontsource/ibm-plex-mono": "4.5.9",
		"@fontsource/inter": "4.5.7",
		"@material-ui/core": "4.9.4",
		"@material-ui/icons": "4.5.1",
Expand All		@@ -35,6 +35,7 @@
		"@xstate/react": "3.0.0",
		"axios": "0.26.1",
		"cronstrue": "2.4.0",
		"dayjs": "^1.11.2",
		"formik": "2.2.9",
		"history": "5.3.0",
		"react": "17.0.2",
Expand All		@@ -53,7 +54,6 @@
		"devDependencies": {
		"@playwright/test": "1.21.1",
		"@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
		"@react-theming/storybook-addon": "1.1.5",
		"@storybook/addon-actions": "6.4.22",
		"@storybook/addon-essentials": "6.4.22",
		"@storybook/addon-links": "6.4.22",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,15 +12,13 @@ import { OrgsPage } from "./pages/OrgsPage/OrgsPage"
		import { SettingsPage } from "./pages/SettingsPage/SettingsPage"
		import { AccountPage } from "./pages/SettingsPages/AccountPage/AccountPage"
		import { SSHKeysPage } from "./pages/SettingsPages/SSHKeysPage/SSHKeysPage"
		import { CreateWorkspacePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/CreateWorkspacePage"
		import { TemplatePage } from "./pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage"
		import { TemplatesPage } from "./pages/TemplatesPages/TemplatesPage"
		import { CreateUserPage } from "./pages/UsersPage/CreateUserPage/CreateUserPage"
		import { UsersPage } from "./pages/UsersPage/UsersPage"
		import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
		import { WorkspaceSettingsPage } from "./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"

		const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
		const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))

		export const AppRouter: React.FC = () => (
		<React.Suspense fallback={<></>}>
Expand All		@@ -46,36 +44,15 @@ export const AppRouter: React.FC = () => (
		}
		/>

		<Route path="templates">
		<Route path="workspaces">
		<Route
		index
		element={
		<AuthAndFrame>
		<TemplatesPage />
		<WorkspacesPage />
		</AuthAndFrame>
		}
		/>
		<Route path=":organization/:template">
		<Route
		index
		element={
		<AuthAndFrame>
		<TemplatePage />
		</AuthAndFrame>
		}
		/>
		<Route
		path="create"
		element={
		<RequireAuth>
		<CreateWorkspacePage />
		</RequireAuth>
		}
		/>
		</Route>
		</Route>

		<Route path="workspaces">
		<Route path=":workspace">
		<Route
		index
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -115,6 +115,11 @@ export const getWorkspace = async (workspaceId: string): Promise<TypesGen.Worksp
		return response.data
		}

		export const getWorkspaces = async (userID = "me"): Promise<TypesGen.Workspace[]> => {
kylecarbs marked this conversation as resolved. Show resolvedHide resolved
		const response = await axios.get<TypesGen.Workspace[]>(`/api/v2/users/${userID}/workspaces`)
		return response.data
		}

		export const getWorkspaceByOwnerAndName = async (
		organizationID: string,
		username = "me",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from "react-router-dom"
		import { SWRConfig } from "swr"
		import { AppRouter } from "./AppRouter"
		import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
		import {light } from "./theme"
		import {dark } from "./theme"
		import "./theme/globalFonts"
		import { XServiceProvider } from "./xServices/StateContext"

Expand All		@@ -31,7 +31,7 @@ export const App: React.FC = () => {
		}}
		>
		<XServiceProvider>
		<ThemeProvider theme={light}>
		<ThemeProvider theme={dark}>
kylecarbs marked this conversation as resolved. Show resolvedHide resolved
		<CssBaseline />
		<AppRouter />
		<GlobalSnackbar />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,7 +51,7 @@ export const AdminDropdown: React.FC = () => {
		<>
		<div className={styles.link}>
		<ListItem selected={Boolean(anchorEl)} button onClick={onOpenAdminMenu}>
		<ListItemText className="no-brace"color="primary"primary={Language.menuTitle} />
		<ListItemText className="no-brace" primary={Language.menuTitle} />
		{anchorEl ? <CloseDropdown /> : <OpenDropdown />}
		</ListItem>
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
		root: {
		minHeight: 156,
		background: theme.palette.background.default,
		color: theme.palette.codeBlock.contrastText,
		color: theme.palette.text.primary,
		fontFamily: MONOSPACE_FONT_FAMILY,
		fontSize: 13,
		wordBreak: "break-all",
Expand Down