From 3ea1129993a3a51fa66e8320da1bcb6bf8c5b36d Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sat, 3 Feb 2024 21:13:15 +0530 Subject: [PATCH 01/17] ui: settings page --- packages/www/components/Sidebar/NavIcons.tsx | 14 ++ packages/www/components/Sidebar/index.tsx | 17 +- packages/www/content/index.tsx | 8 + .../www/pages/dashboard/settings/index.tsx | 164 ++++++++++++++++++ 4 files changed, 200 insertions(+), 3 deletions(-) create mode 100644 packages/www/pages/dashboard/settings/index.tsx diff --git a/packages/www/components/Sidebar/NavIcons.tsx b/packages/www/components/Sidebar/NavIcons.tsx index 280a855a30..667f4c457c 100644 --- a/packages/www/components/Sidebar/NavIcons.tsx +++ b/packages/www/components/Sidebar/NavIcons.tsx @@ -97,6 +97,20 @@ export const UsageIcon = ({ active = false }) => ( ); +export const SettingsIcon = ({ active = false }) => ( + + + +); + export const AssetsIcon = ({ active = false }) => ( { const { user, logout } = useApi(); @@ -259,6 +261,15 @@ const Sidebar = ({ id }: { id: SidebarId }) => { )} + + + + + + Settings + + + { + useLoggedIn(); + const { user } = useApi(); + + if (!user) { + return ; + } + return ( + + + + + + Settings + + + Manage your project settings + + + + + + + Logo + + Project logo + + Pick a logo for your project. Recommended size is 256x256px. + + + + + Project Name + + + + + + + + + Delete Project + + + If you want to permanently delete this project and all of its + data, including but not limited to streams, sessions, and assets, + you can do so below. + + + + + + + ); +}; + +export default Settings; From 94685aa4783593092e7d37782fc6e184b6220f31 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sat, 3 Feb 2024 21:52:11 +0530 Subject: [PATCH 02/17] ui: update breadcrumbs --- packages/www/components/Header/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx index a0789910fb..c6d6d75d94 100644 --- a/packages/www/components/Header/index.tsx +++ b/packages/www/components/Header/index.tsx @@ -20,6 +20,8 @@ import PolygonIcon from "../../public/img/icons/polygonWithoutBorderBottom.svg"; import CheckedIcon from "../../public/img/icons/checked.svg"; import { useEffect, useState, useRef } from "react"; import { useApi, useHubspotForm } from "hooks"; +import { Breadcrumb } from "layouts/dashboard"; +import { workspaces } from "pages/dashboard/settings"; const StyledHornIcon = styled(HornIcon, { color: "$hiContrast", @@ -47,6 +49,8 @@ const Header = ({ breadcrumbs = [] }) => { reaction: "", feedback: "", }); + const [navBreadcrumbs, setNavBreadcrumbs] = + useState(breadcrumbs); const [formSent, setFormSent] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const { data, handleSubmit } = useHubspotForm({ @@ -67,6 +71,13 @@ const Header = ({ breadcrumbs = [] }) => { } }, [user]); + useEffect(() => { + setNavBreadcrumbs([ + { title: workspaces[0].projects[0].name, href: "/settings" }, + ...breadcrumbs, + ]); + }, []); + return ( { align="center" justify="between" css={{ - px: "$6", height: 60, width: "100%", margin: "0 auto", maxWidth: "1520px", }}> - {breadcrumbs.map((breadcrumb, i) => { + {navBreadcrumbs.map((breadcrumb, i) => { if (breadcrumb?.href) { return ( From 1d6455ba0386e8e512866c9e085cf0a99e4cb7bc Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sat, 3 Feb 2024 21:52:28 +0530 Subject: [PATCH 03/17] add placeholder workspace --- .../www/pages/dashboard/settings/index.tsx | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/www/pages/dashboard/settings/index.tsx b/packages/www/pages/dashboard/settings/index.tsx index 2fc57990f4..ffb09ac19f 100644 --- a/packages/www/pages/dashboard/settings/index.tsx +++ b/packages/www/pages/dashboard/settings/index.tsx @@ -69,9 +69,7 @@ const Settings = () => { Logo Project logo { required size="2" type="text" - value={"Paramount Plus"} + defaultValue={workspaces[0].projects[0].name} id="projectName" css={{ width: "20%", @@ -161,4 +159,28 @@ const Settings = () => { ); }; +// Placeholder constants, it will be removed and replaced with real data from the API +export const workspaces = [ + { + name: "Paramount", + logo: "https://pbs.twimg.com/profile_images/1712502841494138880/GofqA30R_400x400.jpg", + url: "https://www.paramountplus.com/", + projects: [ + { + name: "Paramount Plus", + logo: "https://pbs.twimg.com/profile_images/1712502841494138880/GofqA30R_400x400.jpg", + activeStreams: 10, + inProgressUploads: 5, + }, + ], + members: [ + { + name: "John Doe", + email: "john@livepeer.org", + role: "Admin", + }, + ], + }, +]; + export default Settings; From b71f26610a7db20e3a9cdc0748ce36e517be19e7 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sun, 4 Feb 2024 15:21:47 +0530 Subject: [PATCH 04/17] ui: add workspace settings --- packages/www/components/Sidebar/NavIcons.tsx | 40 +++ packages/www/components/Sidebar/index.tsx | 319 +++++++++++++++---- 2 files changed, 302 insertions(+), 57 deletions(-) diff --git a/packages/www/components/Sidebar/NavIcons.tsx b/packages/www/components/Sidebar/NavIcons.tsx index 667f4c457c..172b03aad7 100644 --- a/packages/www/components/Sidebar/NavIcons.tsx +++ b/packages/www/components/Sidebar/NavIcons.tsx @@ -122,3 +122,43 @@ export const AssetsIcon = ({ active = false }) => ( ); + +export const WorkspaceIcon = ({ active = false }) => ( + + + + +); + +export const AccountIcon = ({ active = false }) => ( + + + + +); diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index 0e273ac6be..a99d971a13 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -14,8 +14,10 @@ import { AlertDialog, AlertDialogTrigger, AlertDialogContent, + Heading, + Button, } from "@livepeer/design-system"; -import { ChevronDownIcon } from "@radix-ui/react-icons"; + import ThemeSwitch from "../ThemeSwitch"; import Link from "next/link"; import { @@ -26,11 +28,17 @@ import { UsageIcon, AssetsIcon, SettingsIcon, + WorkspaceIcon, + AccountIcon, } from "./NavIcons"; import { useApi } from "../../hooks"; -import Router from "next/router"; +import Router, { useRouter } from "next/router"; import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons"; import Contact from "../Contact"; +import Image from "next/image"; +import { workspaces } from "pages/dashboard/settings"; +import { User } from "@livepeer.studio/api"; +import { FiChevronLeft } from "react-icons/fi"; export const NavLink = styled(A, { fontSize: 14, @@ -60,7 +68,6 @@ export const NavLink = styled(A, { export type SidebarId = | "home" | "streams" - | "streams/sessions" // /dashboard/stream-health - unhandled in the sidebar | "streams/health" | "assets" @@ -70,11 +77,21 @@ export type SidebarId = | "usage" | "billing" | "billing/plans" - | "settings"; + | "settings" + // Workspace settings + | "workspace/general" + | "workspace/projects" + | "workspace/members" + | "workspace/plans" + | "workspace/billing" + | "account/profile" + | "account/preferences"; const Sidebar = ({ id }: { id: SidebarId }) => { const { user, logout } = useApi(); + const { pathname } = useRouter(); + return ( { justifyContent: "flex-end", bottom: 0, }}> + {pathname.includes("workspace") ? ( + + ) : ( + + )} + + ); +}; + +const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { + return ( + <> - - - {user?.firstName} + {workspaces[0].name} + + + + {user?.email} - - - - { - e.preventDefault(); - Router.push("/dashboard/billing"); + css={{ + pb: "$3", + pl: "$3", + borderBottom: "1px solid", + borderColor: "$neutral6", + }}> + {workspaces.map((workspace) => ( + + Project logo + {workspace.name} + + ))} + + + - Billing - - { - e.preventDefault(); - logout(); + + Workspace settings + + + Invite & manage members + + + + + - Logout - - + + Create or join a workspace + + + Add an account + + + Log out + + + - + { Streams - - {id?.split("/")[0] === "streams" && ( - :first-child": { - mt: "$1", - }, - }}> - - Sessions - - - )} @@ -349,7 +452,109 @@ const Sidebar = ({ id }: { id: SidebarId }) => { - + + ); +}; + +const WorkspaceSidebar = ({ id, user }: { id: SidebarId; user: User }) => { + const goBack = () => { + Router.push("/dashboard"); + }; + + return ( + <> + + + + + + + + + Workspace + + + + General + + + Projects + + + Members + + + Plans + + + Billing + + + + + + + Account + + + + Profile + + + + Preferences + + + + + + + ); }; From 58bd1c90977dad0d3a0438789866008c0a4ab533 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sun, 4 Feb 2024 15:22:15 +0530 Subject: [PATCH 05/17] ui: workspace settings page --- packages/www/components/Header/index.tsx | 2 +- .../www/pages/dashboard/settings/index.tsx | 3 +- .../www/pages/dashboard/workspace/general.tsx | 196 ++++++++++++++++++ 3 files changed, 199 insertions(+), 2 deletions(-) create mode 100644 packages/www/pages/dashboard/workspace/general.tsx diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx index c6d6d75d94..e48734a6f2 100644 --- a/packages/www/components/Header/index.tsx +++ b/packages/www/components/Header/index.tsx @@ -73,7 +73,7 @@ const Header = ({ breadcrumbs = [] }) => { useEffect(() => { setNavBreadcrumbs([ - { title: workspaces[0].projects[0].name, href: "/settings" }, + { title: workspaces[0].projects[0].name, href: "/dashboard/settings" }, ...breadcrumbs, ]); }, []); diff --git a/packages/www/pages/dashboard/settings/index.tsx b/packages/www/pages/dashboard/settings/index.tsx index ffb09ac19f..752a9ecac7 100644 --- a/packages/www/pages/dashboard/settings/index.tsx +++ b/packages/www/pages/dashboard/settings/index.tsx @@ -164,11 +164,12 @@ export const workspaces = [ { name: "Paramount", logo: "https://pbs.twimg.com/profile_images/1712502841494138880/GofqA30R_400x400.jpg", - url: "https://www.paramountplus.com/", + url: "https://livepeer.studio/paramount", projects: [ { name: "Paramount Plus", logo: "https://pbs.twimg.com/profile_images/1712502841494138880/GofqA30R_400x400.jpg", + url: "https://livepeer.studio/paramount/paramount-plus", activeStreams: 10, inProgressUploads: 5, }, diff --git a/packages/www/pages/dashboard/workspace/general.tsx b/packages/www/pages/dashboard/workspace/general.tsx new file mode 100644 index 0000000000..6095a19c49 --- /dev/null +++ b/packages/www/pages/dashboard/workspace/general.tsx @@ -0,0 +1,196 @@ +import Layout from "layouts/dashboard"; +import { useApi, useLoggedIn } from "hooks"; +import { DashboardStreams as Content } from "content"; +import { + Box, + Heading, + Flex, + Text, + TextField, + Button, +} from "@livepeer/design-system"; +import { workspaces } from "../settings"; +import Image from "next/image"; + +const WorkspaceGeneral = () => { + useLoggedIn(); + const { user } = useApi(); + + if (!user) { + return ; + } + + return ( + + + + + + Workspace + + + Manage your workspace settings + + + + + + + Logo + + Project logo + + Pick a logo for your workspace. Recommended size is 256x256px. + + + + + General + + + + Workspace name + + + + + + Workspace URL + + + + + + + + + + Delete Workspace + + + If you want to permanently delete this workspace and all of its + data, including but not limited to streams, sessions, and assets, + you can do so below. + + + + + + + ); +}; + +export default WorkspaceGeneral; From e879dad5ac9569f20d2b96e588cfef7950cdd5d5 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Sun, 4 Feb 2024 23:34:58 +0530 Subject: [PATCH 06/17] ui: workspace project page --- packages/www/components/ProjectTile/index.tsx | 75 +++++++++++++++++++ .../pages/dashboard/workspace/projects.tsx | 70 +++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 packages/www/components/ProjectTile/index.tsx create mode 100644 packages/www/pages/dashboard/workspace/projects.tsx diff --git a/packages/www/components/ProjectTile/index.tsx b/packages/www/components/ProjectTile/index.tsx new file mode 100644 index 0000000000..a43f5e2f5b --- /dev/null +++ b/packages/www/components/ProjectTile/index.tsx @@ -0,0 +1,75 @@ +import { Box, Flex, Text } from "@livepeer/design-system"; +import { GoDotFill } from "react-icons/go"; +import Image from "next/image"; +import React from "react"; + +export default function ProjectTile({ + name, + logo, + url, + activeStreams, + inProgressUploads, + ...props +}) { + return ( + + + Project logo + + + {name} + + + {url} + + + + + + {activeStreams} active streams + + + {inProgressUploads} in-progress uploads + + + + ); +} diff --git a/packages/www/pages/dashboard/workspace/projects.tsx b/packages/www/pages/dashboard/workspace/projects.tsx new file mode 100644 index 0000000000..e67a463a05 --- /dev/null +++ b/packages/www/pages/dashboard/workspace/projects.tsx @@ -0,0 +1,70 @@ +import Layout from "layouts/dashboard"; +import { useApi, useLoggedIn } from "hooks"; +import { DashboardStreams as Content } from "content"; +import { + Box, + Heading, + Flex, + Text, + TextField, + Button, +} from "@livepeer/design-system"; +import { workspaces } from "../settings"; +import Image from "next/image"; +import ProjectTile from "components/ProjectTile"; + +const WorkspaceProjects = () => { + useLoggedIn(); + const { user } = useApi(); + + if (!user) { + return ; + } + + return ( + + + + + + Projects + + + Manage your workspace projects + + + + {workspaces[0].projects.map((project) => ( + + ))} + + + ); +}; + +export default WorkspaceProjects; From 3a9218ee3d29ad80188d66a794d7ef88f0a00245 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 00:53:28 +0530 Subject: [PATCH 07/17] ui: create project dialog --- .../Project/CreateProjectDialog.tsx | 94 ++++++++++++++ .../index.tsx => Project/ProjectTile.tsx} | 0 packages/www/components/Sidebar/NavIcons.tsx | 24 ++++ packages/www/components/Sidebar/index.tsx | 120 +++++++++++++++++- .../pages/dashboard/workspace/projects.tsx | 2 +- 5 files changed, 238 insertions(+), 2 deletions(-) create mode 100644 packages/www/components/Project/CreateProjectDialog.tsx rename packages/www/components/{ProjectTile/index.tsx => Project/ProjectTile.tsx} (100%) diff --git a/packages/www/components/Project/CreateProjectDialog.tsx b/packages/www/components/Project/CreateProjectDialog.tsx new file mode 100644 index 0000000000..e74469ffb6 --- /dev/null +++ b/packages/www/components/Project/CreateProjectDialog.tsx @@ -0,0 +1,94 @@ +import { + Box, + Button, + Flex, + AlertDialog, + AlertDialogTitle, + AlertDialogContent, + AlertDialogCancel, + AlertDialogDescription, + TextField, + Heading, + Text, + Label, +} from "@livepeer/design-system"; + +const CreateProjectDialog = ({ + isOpen, + onOpenChange, + onCreate, +}: { + isOpen: boolean; + onOpenChange: (isOpen: boolean) => void; + onCreate: (projectName: string) => Promise; +}) => { + return ( + + + + Create project + + { + // Handle create project + }}> + + + Working with different projects helps create a clear separation + between different customers or working environments. + + + + + + + + + + + + + + + ); +}; + +export default CreateProjectDialog; diff --git a/packages/www/components/ProjectTile/index.tsx b/packages/www/components/Project/ProjectTile.tsx similarity index 100% rename from packages/www/components/ProjectTile/index.tsx rename to packages/www/components/Project/ProjectTile.tsx diff --git a/packages/www/components/Sidebar/NavIcons.tsx b/packages/www/components/Sidebar/NavIcons.tsx index 172b03aad7..2ba9b0db16 100644 --- a/packages/www/components/Sidebar/NavIcons.tsx +++ b/packages/www/components/Sidebar/NavIcons.tsx @@ -162,3 +162,27 @@ export const AccountIcon = ({ active = false }) => ( /> ); + +export const TopBottomChevron = ({ active = false }) => ( + + + + + + +); diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index a99d971a13..afc7af1f66 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -30,15 +30,23 @@ import { SettingsIcon, WorkspaceIcon, AccountIcon, + TopBottomChevron, } from "./NavIcons"; import { useApi } from "../../hooks"; import Router, { useRouter } from "next/router"; -import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons"; +import { + RocketIcon, + ChatBubbleIcon, + LoopIcon, + PlusIcon, +} from "@radix-ui/react-icons"; import Contact from "../Contact"; import Image from "next/image"; import { workspaces } from "pages/dashboard/settings"; import { User } from "@livepeer.studio/api"; import { FiChevronLeft } from "react-icons/fi"; +import CreateProjectDialog from "components/Project/CreateProjectDialog"; +import { useState } from "react"; export const NavLink = styled(A, { fontSize: 14, @@ -115,6 +123,8 @@ const Sidebar = ({ id }: { id: SidebarId }) => { }; const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { + const [showCreateProjectDialog, setShowCreateProjectDialog] = useState(false); + return ( <> @@ -258,6 +268,106 @@ const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { } /> + + + + {workspaces[0].projects[0].name} + + + + + + Projects + + + {workspaces[0].projects.map((project) => ( + + Project logo + {project.name} + + ))} + + + + setShowCreateProjectDialog(true)} + align={"center"} + css={{ + color: "$neutral12", + gap: "$2", + cursor: "pointer", + }}> + + New project + + + + + { + + { + console.log(projectName); + }} + /> ); }; diff --git a/packages/www/pages/dashboard/workspace/projects.tsx b/packages/www/pages/dashboard/workspace/projects.tsx index e67a463a05..80bd40ddf6 100644 --- a/packages/www/pages/dashboard/workspace/projects.tsx +++ b/packages/www/pages/dashboard/workspace/projects.tsx @@ -11,7 +11,7 @@ import { } from "@livepeer/design-system"; import { workspaces } from "../settings"; import Image from "next/image"; -import ProjectTile from "components/ProjectTile"; +import ProjectTile from "components/Project/ProjectTile"; const WorkspaceProjects = () => { useLoggedIn(); From 69da385a077699f94d1ff58fd303eea0cf3baa31 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 01:34:55 +0530 Subject: [PATCH 08/17] ui: workspace member page - in progress --- .../www/pages/dashboard/workspace/members.tsx | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 packages/www/pages/dashboard/workspace/members.tsx diff --git a/packages/www/pages/dashboard/workspace/members.tsx b/packages/www/pages/dashboard/workspace/members.tsx new file mode 100644 index 0000000000..2c5d678a9c --- /dev/null +++ b/packages/www/pages/dashboard/workspace/members.tsx @@ -0,0 +1,147 @@ +import Layout from "layouts/dashboard"; +import { useApi, useLoggedIn } from "hooks"; +import { DashboardStreams as Content } from "content"; +import { + Box, + Heading, + Flex, + Text, + TextField, + Button, +} from "@livepeer/design-system"; +import { workspaces } from "../settings"; +import Image from "next/image"; +import ProjectTile from "components/Project/ProjectTile"; +import { ChevronDownIcon } from "@radix-ui/react-icons"; + +const WorkspaceMembers = () => { + useLoggedIn(); + const { user } = useApi(); + + if (!user) { + return ; + } + + return ( + + + + + + Members + + + Manage who has access to this workspace + + + + + + + Manage members + + Mange workspace members and their permissions + + + + + + + + + + {workspaces[0].members.length} members + + + + + + + ); +}; + +export default WorkspaceMembers; From 905d78622a1e852f58ff09c274368484b1de2754 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 04:13:14 +0530 Subject: [PATCH 09/17] ui: developer page - in progress --- packages/www/components/Sidebar/index.tsx | 50 +++------- .../pages/dashboard/developers/api-keys.tsx | 14 +-- .../www/pages/dashboard/developers/index.tsx | 95 +++++++++++++++++++ 3 files changed, 109 insertions(+), 50 deletions(-) create mode 100644 packages/www/pages/dashboard/developers/index.tsx diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index afc7af1f66..804fe4abaa 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -80,8 +80,8 @@ export type SidebarId = | "streams/health" | "assets" | "developers" - | "developers/signing-keys" - | "developers/webhooks" + // | "developers/signing-keys" + // | "developers/webhooks" | "usage" | "billing" | "billing/plans" @@ -400,45 +400,12 @@ const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { - - - + + + Developers - - {id?.split("/")[0] === "developers" && ( - - - API Keys - - - - Signing Keys - - - - - Webhooks - - - - )} @@ -484,7 +451,12 @@ const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { - + { +const APIKeys = () => { useLoggedIn(); const { user } = useApi(); @@ -20,10 +15,7 @@ const ApiKeys = () => { return ( @@ -34,4 +26,4 @@ const ApiKeys = () => { ); }; -export default ApiKeys; +export default Developers; diff --git a/packages/www/pages/dashboard/developers/index.tsx b/packages/www/pages/dashboard/developers/index.tsx new file mode 100644 index 0000000000..a4c4295114 --- /dev/null +++ b/packages/www/pages/dashboard/developers/index.tsx @@ -0,0 +1,95 @@ +import Layout from "../../../layouts/dashboard"; +import { + Box, + Heading, + Tabs, + TabsTrigger, + TabsList, + TabLink, + TabsContent, +} from "@livepeer/design-system"; +import { useApi, useLoggedIn } from "hooks"; +import ApiKeysTable from "components/ApiKeys"; +import { DashboardAPIKeys as Content } from "content"; +import WebhooksTable from "components/WebhooksTable"; + +const Developers = () => { + useLoggedIn(); + const { user } = useApi(); + + if (!user) { + return ; + } + + const TT = ({ title, value }) => ( + + {title} + + ); + + return ( + + + + + + Developers + + + + + + + + + + + + + + + + + + + ); +}; + +export default Developers; From 593ee00b8372dc903bd1c44feb365125f865a037 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 05:58:52 +0530 Subject: [PATCH 10/17] ui: stream & sessions page --- .../components/StreamSessionsTable/index.tsx | 1 - .../www/components/StreamsTable/helpers.tsx | 44 ++- .../www/components/StreamsTable/index.tsx | 4 - packages/www/components/Table/cells/date.tsx | 2 +- .../pages/dashboard/developers/api-keys.tsx | 2 +- .../www/pages/dashboard/developers/index.tsx | 2 +- .../www/pages/dashboard/streams/index.tsx | 288 +++++++++++++++++- 7 files changed, 310 insertions(+), 33 deletions(-) diff --git a/packages/www/components/StreamSessionsTable/index.tsx b/packages/www/components/StreamSessionsTable/index.tsx index 47ba860f8f..63cce01341 100644 --- a/packages/www/components/StreamSessionsTable/index.tsx +++ b/packages/www/components/StreamSessionsTable/index.tsx @@ -44,7 +44,6 @@ const StreamSessionsTable = ({ title = "Sessions" }: { title?: string }) => { fetcher={fetcher} initialSortBy={[DefaultSortBy]} showOverflow={true} - filterItems={filterItems} emptyState={makeEmptyState()} /> ); diff --git a/packages/www/components/StreamsTable/helpers.tsx b/packages/www/components/StreamsTable/helpers.tsx index 8ecab2799f..ad53a8e56f 100644 --- a/packages/www/components/StreamsTable/helpers.tsx +++ b/packages/www/components/StreamsTable/helpers.tsx @@ -1,4 +1,4 @@ -import { Box, Text } from "@livepeer/design-system"; +import { Box, Flex, Text } from "@livepeer/design-system"; import { State } from "../Table"; import DateCell, { DateCellProps } from "../Table/cells/date"; import { RenditionDetailsCellProps } from "../Table/cells/streams-table"; @@ -7,6 +7,7 @@ import TableEmptyState from "../Table/components/TableEmptyState"; import { FilterItem, formatFiltersForApiRequest } from "../Table/filters"; import { stringSort, dateSort } from "../Table/sorts"; import { RowsPageFromStateResult, SortTypeArgs } from "../Table/types"; +import Image from "next/image"; export type StreamsTableData = { id: string; @@ -45,19 +46,21 @@ export const makeColumns = () => [ sortType: (...params: SortTypeArgs) => dateSort("original.createdAt.date", ...params), }, - { - Header: "Last seen", - accessor: "lastSeen", - Cell: DateCell, - sortType: (...params: SortTypeArgs) => - dateSort("original.lastSeen.date", ...params), - }, + { Header: "Status", accessor: "status", Cell: TextCell, disableSortBy: true, }, + // TODO: Update this to param from the API + { + Header: "Views", + accessor: "lastSeen", + Cell: DateCell, + sortType: (...params: SortTypeArgs) => + dateSort("original.lastSeen.date", ...params), + }, ]; export const rowsPageFromState = async ( @@ -87,7 +90,30 @@ export const rowsPageFromState = async ( name: { id: stream.id, value: stream.name, - children: {stream.name}, + children: ( + + Placeholder image + + {stream.name} 1 + + + ), tooltipChildren: stream.createdByTokenName ? ( <> Created by token {stream.createdByTokenName} diff --git a/packages/www/components/StreamsTable/index.tsx b/packages/www/components/StreamsTable/index.tsx index 0052732a46..d3c06e7000 100644 --- a/packages/www/components/StreamsTable/index.tsx +++ b/packages/www/components/StreamsTable/index.tsx @@ -79,10 +79,6 @@ const StreamsTable = ({ initialSortBy={[DefaultSortBy]} emptyState={makeEmptyState(createDialogState)} selectAction={makeSelectAction("Delete", deleteDialogState.onOn)} - createAction={makeCreateAction( - "Create livestream", - createDialogState.onOn - )} header={ diff --git a/packages/www/components/Table/cells/date.tsx b/packages/www/components/Table/cells/date.tsx index 2285ed50a6..33963e9a30 100644 --- a/packages/www/components/Table/cells/date.tsx +++ b/packages/www/components/Table/cells/date.tsx @@ -12,7 +12,7 @@ const DateCell = ({ }: CellComponentProps) => { const { date, fallback } = cell.value; try { - return format(date, "MMMM dd, yyyy h:mm a"); + return format(date, "MMM do, h:mm a"); } catch (error) { return fallback; } diff --git a/packages/www/pages/dashboard/developers/api-keys.tsx b/packages/www/pages/dashboard/developers/api-keys.tsx index 0a4dad7c0f..04d46073a3 100644 --- a/packages/www/pages/dashboard/developers/api-keys.tsx +++ b/packages/www/pages/dashboard/developers/api-keys.tsx @@ -26,4 +26,4 @@ const APIKeys = () => { ); }; -export default Developers; +export default APIKeys; diff --git a/packages/www/pages/dashboard/developers/index.tsx b/packages/www/pages/dashboard/developers/index.tsx index a4c4295114..eb4dc6193a 100644 --- a/packages/www/pages/dashboard/developers/index.tsx +++ b/packages/www/pages/dashboard/developers/index.tsx @@ -57,7 +57,7 @@ const Developers = () => { Developers - + { useLoggedIn(); const { user } = useApi(); + const [activeFilter, setActiveFilter] = useState< + "all" | "active" | "unhealthy" + >("all"); if (!user) { return ; } + const TT = ({ title, value }) => ( + + {title} + + ); + return ( - - + + + + + Streams + + + + + + + + + + + + setActiveFilter("all")} + css={{ + px: "$3", + py: "$2", + height: "100%", + border: activeFilter === "all" ? "2px solid" : "1px solid", + borderColor: + activeFilter === "all" ? "$blue11" : "$neutral8", + width: "20%", + borderRadius: "$3", + }}> + + All + + + 255 + + + setActiveFilter("active")} + css={{ + px: "$3", + py: "$2", + height: "100%", + border: + activeFilter === "active" ? "2px solid" : "1px solid", + borderColor: + activeFilter === "active" ? "$blue11" : "$neutral8", + width: "20%", + borderRadius: "$3", + }}> + + Active + + + 5 + + + setActiveFilter("unhealthy")} + css={{ + px: "$3", + py: "$2", + height: "100%", + border: + activeFilter === "unhealthy" ? "2px solid" : "1px solid", + borderColor: + activeFilter === "unhealthy" ? "$blue11" : "$neutral8", + width: "20%", + borderRadius: "$3", + }}> + + Unhealthy + + + 1 + + + + + + + Date Created + + + + Name + + + + Views + + + + Minutes delivered + + + + Minutes transcoded + + + + + + + + + ); From 555cb5f5afe89e9360da9d354457d91787c736c6 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 06:02:40 +0530 Subject: [PATCH 11/17] minor ui fix --- packages/www/components/Project/ProjectTile.tsx | 2 +- packages/www/pages/dashboard/streams/index.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx index a43f5e2f5b..2767e57eb5 100644 --- a/packages/www/components/Project/ProjectTile.tsx +++ b/packages/www/components/Project/ProjectTile.tsx @@ -53,7 +53,7 @@ export default function ProjectTile({ { backgroundColor: "black", color: "white", }}> + Create Stream From 1ae747284df53d63d3ae38ae745075c280d8fcb3 Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 06:10:34 +0530 Subject: [PATCH 12/17] refactor: sidebar nav items --- packages/www/components/Sidebar/index.tsx | 299 ++++++++++++---------- 1 file changed, 166 insertions(+), 133 deletions(-) diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index 804fe4abaa..6991616b24 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -76,24 +76,138 @@ export const NavLink = styled(A, { export type SidebarId = | "home" | "streams" - // /dashboard/stream-health - unhandled in the sidebar | "streams/health" | "assets" | "developers" - // | "developers/signing-keys" - // | "developers/webhooks" | "usage" | "billing" | "billing/plans" | "settings" - // Workspace settings | "workspace/general" | "workspace/projects" | "workspace/members" | "workspace/plans" | "workspace/billing" + | "workspace/audit-log" | "account/profile" - | "account/preferences"; + | "account/preferences" + | "account/notifications"; + +const generalSidebarItems = [ + { + title: "Home", + path: "/dashboard", + icon: , + id: "home", + }, + { + title: "Streams", + path: "/dashboard/streams", + icon: , + id: "streams", + }, + { + title: "Assets", + path: "/dashboard/assets", + icon: , + id: "assets", + }, + { + title: "Developers", + path: "/dashboard/developers", + icon: , + id: "developers", + }, + { + title: "Usage", + path: "/dashboard/usage", + icon: , + id: "usage", + }, + { + title: "Billing", + path: "/dashboard/billing", + icon: , + id: "billing", + children: [ + { + title: "Plans", + path: "/dashboard/billing/plans", + id: "billing/plans", + }, + ], + }, + { + title: "Settings", + path: "/dashboard/settings", + icon: , + id: "settings", + }, +]; + +const workspaceSidebarItems = [ + { + title: "Workspace", + path: "/dashboard/workspace/general", + icon: , + id: "workspace/general", + children: [ + { + title: "General", + path: "/dashboard/workspace/general", + id: "workspace/general", + }, + { + title: "Projects", + path: "/dashboard/workspace/projects", + id: "workspace/projects", + }, + { + title: "Members", + path: "/dashboard/workspace/members", + id: "workspace/members", + }, + { + title: "Plans", + path: "/dashboard/workspace/plans", + id: "workspace/plans", + }, + { + title: "Billing", + path: "/dashboard/workspace/billing", + id: "workspace/billing", + }, + { + title: "Audit Log", + path: "/dashboard/workspace/audit-log", + id: "workspace/audit-log", + }, + ], + }, + { + title: "Account", + path: "/dashboard/account/profile", + icon: , + id: "account/profile", + children: [ + { + title: "Profile", + path: "/dashboard/account/profile", + id: "account/profile", + }, + { + title: "Preferences", + path: "/dashboard/account/preferences", + id: "account/preferences", + }, + { + title: "Notifications", + path: "/dashboard/account/notifications", + id: "account/notifications", + }, + ], + }, +]; const Sidebar = ({ id }: { id: SidebarId }) => { const { user, logout } = useApi(); @@ -379,77 +493,31 @@ const GeneralSidebar = ({ id, user }: { id: SidebarId; user: User }) => { textDecoration: "none", }, }}> - - - - Home - - - - - - - Streams - - - - - - - Assets - - - - - - - Developers - - - - - - - - - Usage - - - - - - - - - Billing - - - - {id?.split("/")[0] === "billing" && ( - :first-child": { - mt: "$1", - }, - }}> - - Plans - - - )} - - - - - - - Settings - - - + {generalSidebarItems.map((item) => ( + + + + {item.icon} + {item.title} + + + {item.children && id === item.id && ( + + {item.children.map((child) => ( + + {child.title} + + ))} + + )} + + ))} { - { textDecoration: "none", }, }}> - - - - Workspace - + {workspaceSidebarItems.map((item) => ( - - General - - - Projects - - - Members - - - Plans - - - Billing - - - - - - - Account - - - - Profile - - - - Preferences - - + + {item.icon} + {item.title} + + {item.children && ( + + {item.children.map((child) => ( + + {child.title} + + ))} + + )} - + ))} From f7c1ef2b55ed4915f1a54d83e89867eafdf8852b Mon Sep 17 00:00:00 2001 From: Suhail Kakar Date: Mon, 5 Feb 2024 06:21:30 +0530 Subject: [PATCH 13/17] ui: update settings page --- .../www/components/Project/ProjectTile.tsx | 3 +- packages/www/lib/url-sanitizer.ts | 4 ++ .../www/pages/dashboard/settings/index.tsx | 37 ++++++++++++++++++- .../www/pages/dashboard/workspace/general.tsx | 3 +- 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 packages/www/lib/url-sanitizer.ts diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx index 2767e57eb5..9e0b7e7744 100644 --- a/packages/www/components/Project/ProjectTile.tsx +++ b/packages/www/components/Project/ProjectTile.tsx @@ -2,6 +2,7 @@ import { Box, Flex, Text } from "@livepeer/design-system"; import { GoDotFill } from "react-icons/go"; import Image from "next/image"; import React from "react"; +import { sanitizeUrl } from "lib/url-sanitizer"; export default function ProjectTile({ name, @@ -46,7 +47,7 @@ export default function ProjectTile({ mt: "$0.5", color: "$neutral10", }}> - {url} + {sanitizeUrl(url)} diff --git a/packages/www/lib/url-sanitizer.ts b/packages/www/lib/url-sanitizer.ts new file mode 100644 index 0000000000..9d68676049 --- /dev/null +++ b/packages/www/lib/url-sanitizer.ts @@ -0,0 +1,4 @@ +export function sanitizeUrl(url: string) { + const urlObject = new URL(url); + return urlObject.hostname + urlObject.pathname; +} diff --git a/packages/www/pages/dashboard/settings/index.tsx b/packages/www/pages/dashboard/settings/index.tsx index 752a9ecac7..db76403d66 100644 --- a/packages/www/pages/dashboard/settings/index.tsx +++ b/packages/www/pages/dashboard/settings/index.tsx @@ -9,12 +9,22 @@ import { Button, } from "@livepeer/design-system"; import { DashboardSettings as Content } from "content"; -import React from "react"; +import React, { useRef, useState } from "react"; import Image from "next/image"; const Settings = () => { useLoggedIn(); const { user } = useApi(); + const [projectName, setProjectName] = useState(null); + const [projectLogo, setProjectLogo] = useState(null); + + // TODO: Replace with proper media upload once the API is ready + const logoRef = useRef(null); + + const handleSubmit = () => { + console.log("Project Name: ", projectName); + console.log("Project Logo: ", projectLogo); + }; if (!user) { return ; @@ -69,14 +79,34 @@ const Settings = () => { Logo logoRef.current?.click()} + src={ + projectLogo + ? URL.createObjectURL(projectLogo) + : workspaces[0].projects[0].logo + } alt="Project logo" style={{ borderRadius: "12px", + cursor: "pointer", }} width={90} height={90} /> + { + const file = e.target.files?.[0]; + if (file) { + setProjectLogo(file); + } + }} + /> Pick a logo for your project. Recommended size is 256x256px. @@ -100,6 +130,8 @@ const Settings = () => { size="2" type="text" defaultValue={workspaces[0].projects[0].name} + onChange={(e) => setProjectName(e.target.value)} + value={projectName} id="projectName" css={{ width: "20%", @@ -108,6 +140,7 @@ const Settings = () => { />