feat: projects integration

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 } from "react-tooltip";
 import { User, Stream } from "@livepeer.studio/api";
 import "regenerator-runtime/runtime";
 
@@ -44,20 +44,12 @@ export const StreamName = ({
   admin?: boolean;
 }) => {
   const pid = `stream-name-${stream.id}-${name}`;
+  const tooltipContent = `Created by token ${stream?.createdByTokenName}`;
   const query = admin ? { admin: true } : {};
   return (
     <Box>
-      {stream.createdByTokenName ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
-          Created by token <b>{stream.createdByTokenName}</b>
-        </ReactTooltip>
-      ) : null}
-      <Box data-tip data-for={pid}>
+      {stream.createdByTokenName ? <Tooltip id={pid} /> : null}
+      <Box data-tooltip-id={pid} data-tooltip-content={tooltipContent}>
         <Link
           href={{ pathname: "/app/stream/[id]", query }}
           as={`/app/stream/${stream.id}`}>
@@ -93,15 +85,10 @@ export const RelativeTime = ({
     <Box id={idpref} key={idpref}>
       {tm ? (
         <>
-          <ReactTooltip
-            id={`tooltip-${idpref}`}
-            className="tooltip"
-            place="top"
-            type="dark"
-            effect="solid">
-            {toolTip}
-          </ReactTooltip>
-          <span data-tip data-for={`tooltip-${idpref}`}>
+          <Tooltip id={`tooltip-${idpref}`} />
+          <span
+            data-tooltip-id={`tooltip-${idpref}`}
+            data-tooltip-content={toolTip}>
             {main}
           </span>
         </>
@@ -114,27 +101,23 @@ export const RelativeTime = ({
 
 export const UserName = ({ user }: { user: User }) => {
   const tid = `tooltip-name-${user.id}`;
+  const tcontent = `
+    ${user.id}
+    ${user.firstName}
+    ${user.lastName}
+  `;
   return (
     <Box
       sx={{
         overflow: "hidden",
         textOverflow: "ellipsis",
       }}>
-      <ReactTooltip
-        id={tid}
-        className="tooltip"
-        place="top"
-        type="dark"
-        effect="solid">
-        <span>{user.id}</span>
-        <span>{user.firstName}</span>
-        <span>{user.lastName}</span>
-      </ReactTooltip>
-      <span data-tip data-for={tid}>
+      <span data-tooltip-id={tid} data-tooltip-content={tcontent}>
         {user.email.includes("@")
           ? user.email.split("@").join("@\u{200B}")
           : user.email}
       </span>
+      <Tooltip id={tid} />
     </Box>
   );
 };
@@ -311,7 +294,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);
@@ -458,18 +441,10 @@ const CommonAdminTable = ({
                         <Flex
                           sx={{ alignItems: "center", ml: "auto", mr: "1em" }}>
                           <Flex>
-                            <ReactTooltip
-                              id={`tooltip-multiorder`}
-                              className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
-                              To multi-sort (sort by two column simultaneously)
-                              hold shift while clicking on second column name.
-                            </ReactTooltip>
+                            <Tooltip id={`tooltip-multiorder`} />
                             <Help
-                              data-tip
-                              data-for={`tooltip-multiorder`}
+                              data-tooltip-id={`tooltip-multiorder`}
+                              data-tooltip-content="To multi-sort (sort by two column simultaneously) hold shift while clicking on second column name."
                               sx={{
                                 cursor: "pointer",
                                 ml: 1,

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 } 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";
@@ -95,17 +95,10 @@ export const RenditionsDetails = ({ stream }: { stream: Stream }) => {
       {detailsTooltip ? (
         <Flex sx={{ alignItems: "center" }}>
           <Flex>
-            <ReactTooltip
-              id={`tooltip-details-${stream.id}`}
-              className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
-              {detailsTooltip}
-            </ReactTooltip>
+            <Tooltip id={`tooltip-details-${stream.id}`} />
             <Help
-              data-tip
-              data-for={`tooltip-details-${stream.id}`}
+              data-tooltip-id={`tooltip-details-${stream.id}`}
+              data-tooltip-content={`${detailsTooltip}`}
               sx={{
                 color: "muted",
                 cursor: "pointer",

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 } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 import Help from "../../../../public/img/help.svg";
 
@@ -91,23 +91,16 @@ const RenditionsDetailsCell = <D extends TableData>({
       {detailsTooltip ? (
         <Flex sx={{ alignItems: "center" }}>
           <Flex>
-            <ReactTooltip
-              id={`tooltip-details-${stream.id}`}
-              className="tooltip"
-              place="top"
-              type="dark"
-              effect="solid">
-              {detailsTooltip}
-            </ReactTooltip>
             <Help
-              data-tip
-              data-for={`tooltip-details-${stream.id}`}
+              data-tooltip-id={`tooltip-details-${stream.id}`}
+              content={`${detailsTooltip}`}
               sx={{
                 color: "muted",
                 cursor: "pointer",
                 ml: 1,
               }}
             />
+            <Tooltip id={`tooltip-details-${stream.id}`} />
           </Flex>
         </Flex>
       ) : null}

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 } from "react-tooltip";
 import { CellComponentProps, TableData } from "../types";
 
 export type TextCellProps = {
@@ -17,17 +17,8 @@ const TextCell = <D extends TableData>({
   const pid = "tooltip-" + cell.value.id;
   return (
     <div>
-      {cell.value.tooltipChildren ? (
-        <ReactTooltip
-          id={pid}
-          className="tooltip"
-          place="top"
-          type="dark"
-          effect="solid">
-          {cell.value.tooltipChildren}
-        </ReactTooltip>
-      ) : null}
-      <div data-tip data-for={pid}>
+      {cell.value.tooltipChildren ? <Tooltip id={pid} /> : null}
+      <div data-tooltip-id={pid} content={`${cell?.value?.tooltipChildren}`}>
         {cell.value.href ? (
           <Link href={cell.value.href}>{cell.value.children}</Link>
         ) : (

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 } from "react-tooltip";
 import Help from "../../../public/img/help.svg";
 import Checkbox from "components/Admin/Checkbox";
 import {
@@ -294,18 +294,10 @@ const Table = <T extends Record<string, unknown>>({
                               top: "50%",
                               transform: "translateY(-50%)",
                             }}>
-                            <ReactTooltip
-                              id={`tooltip-multiorder`}
-                              className="tooltip"
-                              place="top"
-                              type="dark"
-                              effect="solid">
-                              To multi-sort (sort by two column simultaneously)
-                              hold shift while clicking on second column name.
-                            </ReactTooltip>
+                            <Tooltip id={`tooltip-multiorder`} />
                             <Help
-                              data-tip
-                              data-for={`tooltip-multiorder`}
+                              data-tooltip-id={`tooltip-multiorder`}
+                              data-tooltip-content={`To multi-sort (sort by two column simultaneously) hold shift while clicking on second column name.`}
                               sx={{
                                 cursor: "pointer",
                                 ml: 1,

packages/www/components/ApiKeys/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useApi } from "../../hooks";
 import Table, {
   DefaultSortBy,
@@ -17,6 +17,7 @@ import {
 import { makeCreateAction, makeSelectAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
 import { useJune, events } from "hooks/use-june";
+import { useProjectContext } from "context/ProjectContext";
 
 const ApiKeysTable = ({
   title = "API Keys",
@@ -32,6 +33,7 @@ const ApiKeysTable = ({
   });
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
+  const { projectId } = useProjectContext();
   const columns = useMemo(makeColumns, []);
   const June = useJune();
 
@@ -44,6 +46,10 @@ const ApiKeysTable = ({
     if (June) June.track(events.developer.apiKeyCreate);
   }, [June]);
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <>
       <Table

packages/www/components/AssetsTable/helpers.tsx

@@ -100,7 +100,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 +138,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 +150,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 +170,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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useApi } from "hooks";
 import Table, {
   useTableState,
@@ -17,6 +17,7 @@ import {
   rowsPageFromState,
 } from "./helpers";
 import { makeCreateAction } from "../Table/helpers";
+import { useProjectContext } from "context/ProjectContext";
 
 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, projectId } = useProjectContext();
   const createDialogState = useToggleState();
   const { state, stateSetter } = useTableState<AssetsTableData>({
     pageSize,
@@ -71,10 +73,21 @@ const AssetsTable = ({
 
   const fetcher: Fetcher<AssetsTableData> = useCallback(
     async (state) =>
-      rowsPageFromState(state, userId, getAssets, getTasks, onDeleteAsset),
-    [userId]
+      rowsPageFromState(
+        state,
+        userId,
+        getAssets,
+        getTasks,
+        onDeleteAsset,
+        appendProjectId
+      ),
+    [userId, appendProjectId]
   );
 
+  useEffect(() => {
+    stateSetter.setProjectId(projectId);
+  }, [projectId]);
+
   return (
     <>
       <Table