feat: projects integration (draft)

packages/www/components/Admin/CommonAdminTable/index.tsx

@@ -13,7 +13,7 @@ import {
   useRowSelect,
 } from "react-table";
 import Help from "../../../public/img/help.svg";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { User, Stream } from "@livepeer.studio/api";
 import "regenerator-runtime/runtime";
 
@@ -48,12 +48,7 @@ export const StreamName = ({
   return (
     <Box>
       {stream.createdByTokenName ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
+        <ReactTooltip id={pid} className="tooltip" place="top">
           Created by token <b>{stream.createdByTokenName}</b>
         </ReactTooltip>
       ) : null}
@@ -96,9 +91,7 @@ export const RelativeTime = ({
           <ReactTooltip
             id={`tooltip-${idpref}`}
             className="tooltip"
-            place="top"
-            type="dark"
-            effect="solid">
+            place="top">
             {toolTip}
           </ReactTooltip>
           <span data-tip data-for={`tooltip-${idpref}`}>
@@ -120,12 +113,7 @@ export const UserName = ({ user }: { user: User }) => {
         overflow: "hidden",
         textOverflow: "ellipsis",
       }}>
-      <ReactTooltip
-        id={tid}
-        className="tooltip"
-        place="top"
-        type="dark"
-        effect="solid">
+      <ReactTooltip id={tid} className="tooltip" place="top">
         <span>{user.id}</span>
         <span>{user.firstName}</span>
         <span>{user.lastName}</span>
@@ -311,7 +299,7 @@ const CommonAdminTable = ({
                 </Button>
                 <Button
                   variant="secondarySmall"
-                  disabled={rows.length < rowsPerPage || nextCursor === ""}
+                  disabled={rows.length < +rowsPerPage || nextCursor === ""}
                   sx={{ margin: 0, ml: 2, padding: "2px", px: "4px" }}
                   onClick={() => {
                     prevCursor.push(cursor);
@@ -461,9 +449,7 @@ const CommonAdminTable = ({
                             <ReactTooltip
                               id={`tooltip-multiorder`}
                               className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
+                              place="top">
                               To multi-sort (sort by two column simultaneously)
                               hold shift while clicking on second column name.
                             </ReactTooltip>

packages/www/components/Admin/StreamsTable/index.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { jsx } from "theme-ui";
 import Link from "next/link";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useApi, usePageVisibility } from "hooks";
 import { Box, Button, Flex, Container, Link as A } from "@theme-ui/components";
@@ -98,9 +98,7 @@ export const RenditionsDetails = ({ stream }: { stream: Stream }) => {
             <ReactTooltip
               id={`tooltip-details-${stream.id}`}
               className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
+              place="top">
               {detailsTooltip}
             </ReactTooltip>
             <Help

packages/www/components/Admin/Table-v2/cells/streams-table.tsx

@@ -3,7 +3,7 @@ import { jsx } from "theme-ui";
 import { Stream } from "@livepeer.studio/api";
 import { Box } from "@theme-ui/components";
 import { Flex } from "@theme-ui/components";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import Help from "../../../../public/img/help.svg";
 
@@ -94,9 +94,7 @@ const RenditionsDetailsCell = <D extends TableData>({
             <ReactTooltip
               id={`tooltip-details-${stream.id}`}
               className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
+              place="top">
               {detailsTooltip}
             </ReactTooltip>
             <Help

packages/www/components/Admin/Table-v2/cells/text.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import { jsx } from "theme-ui";
 import Link from "next/link";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 
 export type TextCellProps = {
@@ -18,12 +18,7 @@ const TextCell = <D extends TableData>({
   return (
     <div>
       {cell.value.tooltipChildren ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
+        <ReactTooltip id={pid} className="tooltip" place="top">
           {cell.value.tooltipChildren}
         </ReactTooltip>
       ) : null}

packages/www/components/Admin/Table-v2/index.tsx

@@ -11,7 +11,7 @@ import {
 } from "react-table";
 import { useEffect, useMemo, useCallback } from "react";
 import Paginator from "./paginator";
-import ReactTooltip from "react-tooltip";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 import Help from "../../../public/img/help.svg";
 import Checkbox from "components/Admin/Checkbox";
 import {
@@ -297,9 +297,7 @@ const Table = <T extends Record<string, unknown>>({
                             <ReactTooltip
                               id={`tooltip-multiorder`}
                               className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
+                              place="top">
                               To multi-sort (sort by two column simultaneously)
                               hold shift while clicking on second column name.
                             </ReactTooltip>

packages/www/components/AssetsTable/helpers.tsx

@@ -14,6 +14,7 @@ import { RowsPageFromStateResult, SortTypeArgs } from "../Table/types";
 import { State } from "../Table";
 import TableEmptyState from "../Table/components/TableEmptyState";
 import { useApi } from "hooks";
+import useProject from "hooks/use-project";
 
 type ApiClient = ReturnType<typeof useApi>;
 
@@ -100,7 +101,8 @@ export const rowsPageFromState = async (
   userId: string,
   getAssets: ApiClient["getAssets"],
   getTasks: ApiClient["getTasks"],
-  onDeleteAsset: Function
+  onDeleteAsset: Function,
+  appendProjectId: Function
 ): Promise<RowsPageFromStateResult<AssetsTableData>> => {
   const assetsPromise = getAssets(userId, {
     filters: formatFiltersForApiRequest(state.filters),
@@ -137,7 +139,7 @@ export const rowsPageFromState = async (
         id: asset.id,
         name: {
           id: asset.id,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
           name: asset.name,
           isStatusFailed,
           errorMessage,
@@ -149,18 +151,18 @@ export const rowsPageFromState = async (
             </Box>
           ),
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
         },
         sessionId: {
           children: <Box>{sessionId}</Box>,
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/sessions?sessionId=${sessionId}`,
+          href: appendProjectId(`/sessions?sessionId=${sessionId}`),
         },
         createdAt: {
           id: asset.id,
           date: new Date(asset.createdAt),
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
           asset: asset as Asset, // CreatedAt cell expect SDK asset instead of API
         },
         updatedAt: {
@@ -169,7 +171,7 @@ export const rowsPageFromState = async (
               ? new Date(asset.status.updatedAt)
               : null,
           fallback: <Box css={{ color: "$primary8" }}>—</Box>,
-          href: `/assets/${asset.id}`,
+          href: appendProjectId(`/assets/${asset.id}`),
         },
         action: {
           id: asset.id,

packages/www/components/AssetsTable/index.tsx

@@ -17,6 +17,7 @@ import {
   rowsPageFromState,
 } from "./helpers";
 import { makeCreateAction } from "../Table/helpers";
+import useProject from "hooks/use-project";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -36,6 +37,7 @@ const AssetsTable = ({
   const { getAssets, uploadAssets, deleteAsset, getTasks, getFileUploads } =
     useApi();
   const [openSnackbar] = useSnackbar();
+  const { appendProjectId } = useProject();
   const createDialogState = useToggleState();
   const { state, stateSetter } = useTableState<AssetsTableData>({
     pageSize,
@@ -71,7 +73,14 @@ const AssetsTable = ({
 
   const fetcher: Fetcher<AssetsTableData> = useCallback(
     async (state) =>
-      rowsPageFromState(state, userId, getAssets, getTasks, onDeleteAsset),
+      rowsPageFromState(
+        state,
+        userId,
+        getAssets,
+        getTasks,
+        onDeleteAsset,
+        appendProjectId
+      ),
     [userId]
   );
 

packages/www/components/Breadcrumbs/index.tsx

@@ -1,5 +1,9 @@
 import { styled, Box } from "@livepeer/design-system";
+import { useApi } from "hooks";
+import useProject from "hooks/use-project";
+import { usePathname } from "next/navigation";
 import { Children, isValidElement } from "react";
+import { useQuery } from "react-query";
 
 const BreadcrumbsOl = styled("ol", {
   display: "flex",
@@ -38,6 +42,13 @@ function insertSeparators(items) {
 }
 
 const Breadcrumbs = ({ children }) => {
+  const { activeProjectId } = useProject();
+  const { getProjects } = useApi();
+  const { data } = useQuery("projects", getProjects);
+  const pathname = usePathname();
+
+  const isSettingsPage = pathname?.includes("settings");
+
   const allItems = Children.toArray(children)
     .filter((child) => {
       return isValidElement(child);
@@ -54,6 +65,40 @@ const Breadcrumbs = ({ children }) => {
         <Box css={{ display: "inline-flex" }}>{child}</Box>
       </Box>
     ));
+
+  if (isSettingsPage) {
+    allItems.unshift(
+      <Box
+        as="li"
+        css={{
+          m: 0,
+          fontSize: "$3",
+          lineHeight: 1.5,
+        }}
+        key="project">
+        <Box css={{ display: "inline-flex" }}>Settings</Box>
+      </Box>
+    );
+  } else {
+    if (activeProjectId) {
+      const project = data?.find((project) => project.id === activeProjectId);
+      allItems.unshift(
+        <Box
+          as="li"
+          css={{
+            m: 0,
+            fontSize: "$3",
+            lineHeight: 1.5,
+          }}
+          key="project">
+          <Box css={{ display: "inline-flex" }}>
+            {project?.name || "Untitled Project"}
+          </Box>
+        </Box>
+      );
+    }
+  }
+
   return (
     <Box>
       <BreadcrumbsOl>{insertSeparators(allItems)}</BreadcrumbsOl>

packages/www/components/GettingStarted/index.tsx

@@ -12,9 +12,11 @@ import {
 } from "@livepeer/design-system";
 import Link from "next/link";
 import { ArrowRightIcon, ArrowTopRightIcon } from "@radix-ui/react-icons";
+import useProject from "hooks/use-project";
 import { getBrandName } from "lib/utils";
 
 const GettingStarted = ({ firstName = "" }) => {
+  const { appendProjectId } = useProject();
   return (
     <>
       <Heading size="2" css={{ letterSpacing: "0", fontWeight: 600, mb: "$4" }}>
@@ -44,7 +46,7 @@ const GettingStarted = ({ firstName = "" }) => {
                 </Text>
               </Box>
               <Flex align="center" gap={2}>
-                <Link href="/assets" passHref legacyBehavior>
+                <Link href={appendProjectId("/assets")} passHref legacyBehavior>
                   <Button
                     variant="primary"
                     css={{
@@ -96,7 +98,10 @@ const GettingStarted = ({ firstName = "" }) => {
                 </Text>
               </Box>
               <Flex align="center" gap={2}>
-                <Link href="/streams" passHref legacyBehavior>
+                <Link
+                  href={appendProjectId("/streams")}
+                  passHref
+                  legacyBehavior>
                   <Button
                     variant="primary"
                     css={{
@@ -146,7 +151,7 @@ const GettingStarted = ({ firstName = "" }) => {
               </Text>
               <Flex align="center" gap={2}>
                 <Link
-                  href="dashboard/developers/api-keys"
+                  href={appendProjectId("/developers/api-keys")}
                   passHref
                   legacyBehavior>
                   <Button