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 ( - + ) pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy