From 4aa738cf65496cb0500b2e41b425ec6c5ce01ac1 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 17:32:09 +0000 Subject: [PATCH 01/12] Add initial route --- site/pages/workspaces/[user]/[workspace].tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 site/pages/workspaces/[user]/[workspace].tsx diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx new file mode 100644 index 0000000000000..e69de29bb2d1d From 57143dafaa7af326e97d327fc84a63504d19a78e Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 17:45:13 +0000 Subject: [PATCH 02/12] Initial scaffolding for workspaces page --- site/pages/workspaces/[user]/[workspace].tsx | 43 ++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index e69de29bb2d1d..b4a1b50788f74 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -0,0 +1,43 @@ +import React from "react" +import { makeStyles } from "@material-ui/core/styles" +import { useRouter } from "next/router" +import { Navbar } from "../../components/Navbar" +import { Footer } from "../../components/Page" +import { useUser } from "../../contexts/UserContext" + +//import { Workspace } from "../../components/Workspace" +//import { MockWorkspace } from "../../test_helpers" + +const WorkspacesPage: React.FC = () => { + const styles = useStyles() + const router = useRouter() + const { me, signOut } = useUser(true) + + const { user, workspace } = router.query + + return ( +
+ + +
+
Hello, world
+
+ +
+
+ ) +} + +const useStyles = makeStyles(() => ({ + root: { + display: "flex", + flexDirection: "column", + }, + inner: { + maxWidth: "1380px", + margin: "1em auto", + width: "100%", + }, +})) + +export default WorkspacesPage From 07c7f7063ee426439637a826c557267d9b147e34 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:00:02 +0000 Subject: [PATCH 03/12] More routing --- site/pages/workspaces/[user]/[workspace].tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index b4a1b50788f74..b1eb489e1020b 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -13,7 +13,10 @@ const WorkspacesPage: React.FC = () => { const router = useRouter() const { me, signOut } = useUser(true) - const { user, workspace } = router.query + const { user: userQueryParam, workspace: workspaceQueryParam } = router.query + + const userParam = firstOrDefault(userQueryParam, null) + const workspaceParam = firstOrDefault(workspaceQueryParam, null) return (
From 4e0e64c79629a2770f249329f6504ac11bcc5dda Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:08:41 +0000 Subject: [PATCH 04/12] Set up initial data population --- site/pages/workspaces/[user]/[workspace].tsx | 27 ++++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index b1eb489e1020b..88ff2c2bdc76f 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -1,13 +1,19 @@ import React from "react" +import useSWR from "swr" import { makeStyles } from "@material-ui/core/styles" import { useRouter } from "next/router" -import { Navbar } from "../../components/Navbar" -import { Footer } from "../../components/Page" -import { useUser } from "../../contexts/UserContext" +import { Navbar } from "../../../components/Navbar" +import { Footer } from "../../../components/Page" +import { useUser } from "../../../contexts/UserContext" +import { firstOrItem } from "../../../util/array" +import { ErrorSummary } from "../../../components/ErrorSummary" +import { FullScreenLoader } from "../../../components/Loader/FullScreenLoader" //import { Workspace } from "../../components/Workspace" //import { MockWorkspace } from "../../test_helpers" +import * as API from "../../../api" + const WorkspacesPage: React.FC = () => { const styles = useStyles() const router = useRouter() @@ -15,8 +21,18 @@ const WorkspacesPage: React.FC = () => { const { user: userQueryParam, workspace: workspaceQueryParam } = router.query - const userParam = firstOrDefault(userQueryParam, null) - const workspaceParam = firstOrDefault(workspaceQueryParam, null) + const userParam = firstOrItem(userQueryParam, null) + const workspaceParam = firstOrItem(workspaceQueryParam, null) + + const { data: workspace, error: workspaceError } = useSWR(() => `/api/v2/workspaces/${(userParam as any).toString()}/${(workspaceParam as any).toString()}`) + + if (workspaceError) { + return + } + + if (!me || !workspace) { + return + } return (
@@ -44,3 +60,4 @@ const useStyles = makeStyles(() => ({ })) export default WorkspacesPage + From fddfda175242fdc97c0a28fbc37d12036379378a Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:15:11 +0000 Subject: [PATCH 05/12] Formatting --- site/pages/workspaces/[user]/[workspace].tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index 88ff2c2bdc76f..dedd5c9f146a7 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -21,10 +21,18 @@ const WorkspacesPage: React.FC = () => { const { user: userQueryParam, workspace: workspaceQueryParam } = router.query - const userParam = firstOrItem(userQueryParam, null) - const workspaceParam = firstOrItem(workspaceQueryParam, null) + const { data: workspace, error: workspaceError } = useSWR(() => { + const userParam = firstOrItem(userQueryParam, null) + const workspaceParam = firstOrItem(workspaceQueryParam, null) - const { data: workspace, error: workspaceError } = useSWR(() => `/api/v2/workspaces/${(userParam as any).toString()}/${(workspaceParam as any).toString()}`) + // TODO: Getting non-personal users isn't supported yet in the backend. + // So if the user is the same as 'me', use 'me' as the parameter + const normalizedUserParam = me && userParam === me.id ? "me" : userParam + + // The SWR API expects us to 'throw' if the query isn't ready yet, so these casts to `any` are OK + // because the API expects exceptions. + return `/api/v2/workspaces/${(normalizedUserParam as any).toString()}/${(workspaceParam as any).toString()}` + }) if (workspaceError) { return @@ -60,4 +68,3 @@ const useStyles = makeStyles(() => ({ })) export default WorkspacesPage - From d139d7be58be9e84c77ea7d05eeea41ab75275c9 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:20:14 +0000 Subject: [PATCH 06/12] Add a workspaces component to iterate --- site/components/Workspace/Workspace.tsx | 14 ++++++++++++++ site/components/Workspace/index.ts | 1 + site/pages/workspaces/[user]/[workspace].tsx | 6 ++---- 3 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 site/components/Workspace/Workspace.tsx create mode 100644 site/components/Workspace/index.ts diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx new file mode 100644 index 0000000000000..083e852f5bbb2 --- /dev/null +++ b/site/components/Workspace/Workspace.tsx @@ -0,0 +1,14 @@ +import React from "react" + +import * as API from "../../api" + +export interface WorkspaceProps { + workspace: API.Workspace +} + +/** + * Workspace is the top-level component for viewing an individual workspace + */ +export const Workspace: React.FC = ({ workspace }) => { + return
Hello, workspace: {workspace.name}
+} \ No newline at end of file diff --git a/site/components/Workspace/index.ts b/site/components/Workspace/index.ts new file mode 100644 index 0000000000000..23b9b908c9768 --- /dev/null +++ b/site/components/Workspace/index.ts @@ -0,0 +1 @@ +export * from "./Workspace" \ No newline at end of file diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index dedd5c9f146a7..61464f354cd84 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -8,9 +8,7 @@ import { useUser } from "../../../contexts/UserContext" import { firstOrItem } from "../../../util/array" import { ErrorSummary } from "../../../components/ErrorSummary" import { FullScreenLoader } from "../../../components/Loader/FullScreenLoader" - -//import { Workspace } from "../../components/Workspace" -//import { MockWorkspace } from "../../test_helpers" +import { Workspace } from "../../../components/Workspace" import * as API from "../../../api" @@ -47,7 +45,7 @@ const WorkspacesPage: React.FC = () => {
-
Hello, world
+
From 764acb8ea28e682f5b8e6b770077550f5624ade4 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:23:14 +0000 Subject: [PATCH 07/12] Add initial story for workspace dashboard --- .../Workspace/Workspace.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 site/components/Workspace/Workspace.stories.tsx diff --git a/site/components/Workspace/Workspace.stories.tsx b/site/components/Workspace/Workspace.stories.tsx new file mode 100644 index 0000000000000..e177b93a410fa --- /dev/null +++ b/site/components/Workspace/Workspace.stories.tsx @@ -0,0 +1,19 @@ +import { Story } from "@storybook/react" +import React from "react" +import { Workspace, WorkspaceProps } from "./Workspace" +import { MockWorkspace } from "../../test_helpers" + +export default { + title: "Workspace", + component: Workspace, + argTypes: { + + }, +} + +const Template: Story = (args) => + +export const Example = Template.bind({}) +Example.args = { + workspace: MockWorkspace +} \ No newline at end of file From f63270e02d186e683475e80b8a271e64b1b1386e Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:25:06 +0000 Subject: [PATCH 08/12] Add initial test case --- site/components/Workspace/Workspace.test.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 site/components/Workspace/Workspace.test.tsx diff --git a/site/components/Workspace/Workspace.test.tsx b/site/components/Workspace/Workspace.test.tsx new file mode 100644 index 0000000000000..245455e729da1 --- /dev/null +++ b/site/components/Workspace/Workspace.test.tsx @@ -0,0 +1,15 @@ +import { render, screen } from "@testing-library/react" +import React from "react" +import { Workspace } from "./Workspace" +import { MockWorkspace } from "../../test_helpers" + +describe("Workspace", () => { + it("renders", async () => { + // When + render() + + // Then + const element = await screen.findByText(MockWorkspace.name) + expect(element).toBeDefined() + }) +}) From 1e3eecee25c82f9bea0d453c74b7f3861d7def04 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 18:53:58 +0000 Subject: [PATCH 09/12] Add scaffolding for workspace page --- site/components/Workspace/Workspace.tsx | 60 ++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 2 deletions(-) diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx index 083e852f5bbb2..8451ab2bdf49d 100644 --- a/site/components/Workspace/Workspace.tsx +++ b/site/components/Workspace/Workspace.tsx @@ -1,3 +1,7 @@ +import { Box, Paper, Typography, Link as MuiLink } from "@material-ui/core" +import { makeStyles } from "@material-ui/core/styles" +import CloudCircleIcon from "@material-ui/icons/CloudCircle" +import Link from "next/link" import React from "react" import * as API from "../../api" @@ -6,9 +10,61 @@ export interface WorkspaceProps { workspace: API.Workspace } +namespace Constants { + export const TitleIconSize = 48 + export const CardRadius = 8 + export const CardPadding = 20 +} + /** * Workspace is the top-level component for viewing an individual workspace */ export const Workspace: React.FC = ({ workspace }) => { - return
Hello, workspace: {workspace.name}
-} \ No newline at end of file + const styles = useStyles() + return
+ +
+ +
+ {workspace.name} + + {workspace.project_id} + +
+
+ +
+} + +// Component to render the 'Hero Icon' in the header of a workspace +export const WorkspaceHeroIcon = () => { + return + + +} + +export const useStyles = makeStyles((theme) => { + return { + root: { + display: "flex", + flexDirection: "column", + }, + horizontal: { + display: "flex", + flexDirection: "row", + }, + vertical: { + display: "flex", + flexDirection: "column", + }, + section: { + border: `1px solid ${theme.palette.divider}`, + borderRadius: Constants.CardRadius, + padding: Constants.CardPadding, + }, + icon: { + width: Constants.TitleIconSize, + height: Constants.TitleIconSize, + } + } +}) \ No newline at end of file From 8cbd09de5fd2219190dc29884afc622937c3a981 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 19:02:23 +0000 Subject: [PATCH 10/12] First round of clean-up --- .../Workspace/Workspace.stories.tsx | 8 ++-- site/components/Workspace/Workspace.tsx | 40 ++++++++++++++----- site/components/Workspace/index.ts | 2 +- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/site/components/Workspace/Workspace.stories.tsx b/site/components/Workspace/Workspace.stories.tsx index e177b93a410fa..4e03c3b456e4e 100644 --- a/site/components/Workspace/Workspace.stories.tsx +++ b/site/components/Workspace/Workspace.stories.tsx @@ -6,14 +6,12 @@ import { MockWorkspace } from "../../test_helpers" export default { title: "Workspace", component: Workspace, - argTypes: { - - }, + argTypes: {}, } const Template: Story = (args) => export const Example = Template.bind({}) Example.args = { - workspace: MockWorkspace -} \ No newline at end of file + workspace: MockWorkspace, +} diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx index 8451ab2bdf49d..a3d32da291dc1 100644 --- a/site/components/Workspace/Workspace.tsx +++ b/site/components/Workspace/Workspace.tsx @@ -1,4 +1,6 @@ -import { Box, Paper, Typography, Link as MuiLink } from "@material-ui/core" +import Box from "@material-ui/core/Box" +import Paper from "@material-ui/core/Paper" +import Typography from "@material-ui/core/Typography" import { makeStyles } from "@material-ui/core/styles" import CloudCircleIcon from "@material-ui/icons/CloudCircle" import Link from "next/link" @@ -21,7 +23,21 @@ namespace Constants { */ export const Workspace: React.FC = ({ workspace }) => { const styles = useStyles() - return
+ + return ( +
+ +
+ ) +} + +/** + * Component for the header at the top of the workspace page + */ +export const WorkspaceHeader: React.FC = ({ workspace }) => { + const styles = useStyles() + + return (
@@ -33,14 +49,18 @@ export const Workspace: React.FC = ({ workspace }) => {
-
+ ) } -// Component to render the 'Hero Icon' in the header of a workspace -export const WorkspaceHeroIcon = () => { - return - - +/** + * Component to render the 'Hero Icon' in the header of a workspace + */ +export const WorkspaceHeroIcon: React.FC = () => { + return ( + + + + ) } export const useStyles = makeStyles((theme) => { @@ -65,6 +85,6 @@ export const useStyles = makeStyles((theme) => { icon: { width: Constants.TitleIconSize, height: Constants.TitleIconSize, - } + }, } -}) \ No newline at end of file +}) diff --git a/site/components/Workspace/index.ts b/site/components/Workspace/index.ts index 23b9b908c9768..4c8c38cc721c8 100644 --- a/site/components/Workspace/index.ts +++ b/site/components/Workspace/index.ts @@ -1 +1 @@ -export * from "./Workspace" \ No newline at end of file +export * from "./Workspace" From 73c9f6cf9b4929f089e3854856eea6134cfcfe90 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 19:03:06 +0000 Subject: [PATCH 11/12] Add my name on a TODO --- site/pages/workspaces/[user]/[workspace].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/workspaces/[user]/[workspace].tsx b/site/pages/workspaces/[user]/[workspace].tsx index 61464f354cd84..6ae0c52713697 100644 --- a/site/pages/workspaces/[user]/[workspace].tsx +++ b/site/pages/workspaces/[user]/[workspace].tsx @@ -23,7 +23,7 @@ const WorkspacesPage: React.FC = () => { const userParam = firstOrItem(userQueryParam, null) const workspaceParam = firstOrItem(workspaceQueryParam, null) - // TODO: Getting non-personal users isn't supported yet in the backend. + // TODO(Bryan): Getting non-personal users isn't supported yet in the backend. // So if the user is the same as 'me', use 'me' as the parameter const normalizedUserParam = me && userParam === me.id ? "me" : userParam From 1cd5cf35f50f3b77d49870f964e0889ef9826b15 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Wed, 9 Feb 2022 19:04:40 +0000 Subject: [PATCH 12/12] Fix lint issues --- site/components/Workspace/Workspace.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx index a3d32da291dc1..23d9cf07d32d9 100644 --- a/site/components/Workspace/Workspace.tsx +++ b/site/components/Workspace/Workspace.tsx @@ -57,7 +57,7 @@ export const WorkspaceHeader: React.FC = ({ workspace }) => { */ export const WorkspaceHeroIcon: React.FC = () => { return ( - + )