dashboard: refactor multiple pages to common package (#33607)

Refactors the logs, history, and files pages to the dashboard-common package so it can be used in the self-hosted dashboard

GitOrigin-RevId: c15652984d6812518f474ed3aad90ff1f3935a1f

Author: atrakh

Diff for: npm-packages/common/config/rush/pnpm-lock.yaml

@@ -29,6 +29,7 @@
     "@radix-ui/react-icons": "~1.3.0",
     "@radix-ui/react-tooltip": "~1.0.6",
     "@sentry/nextjs": "7.120.2",
+    "@tanstack/react-table": "~8.20.6",
     "acorn": "~8.8.1",
     "base64-js": "^1.5.1",
     "convex-analytics": "workspace:*",

Diff for: npm-packages/dashboard-common/package.json

@@ -2,7 +2,7 @@
 
 import { CalendarIcon, CheckIcon } from "@radix-ui/react-icons";
 import { endOfToday, parse, startOfDay, format } from "date-fns";
-import { useRouter } from "next/router";
+import { NextRouter } from "next/router";
 import * as React from "react";
 import { DateRange } from "react-day-picker";
 import { Button, Calendar } from "dashboard-common";
@@ -108,15 +108,14 @@ export function DateRangePicker({
 
 export const DATE_FORMAT = "yyyy-MM-dd";
 
-export function useDateFilters() {
+export function useDateFilters(router: NextRouter) {
   // Current day
   const maxEndDate = endOfToday();
 
   // A week from current day
   const initStartDate = new Date(maxEndDate);
   initStartDate.setDate(initStartDate.getDate() - 7);
 
-  const router = useRouter();
   const startDate = router.query.startDate
     ? parse(router.query.startDate as string, DATE_FORMAT, new Date())
     : initStartDate;
@@ -127,6 +126,7 @@ export function useDateFilters() {
   const checkAndSetStartDate = React.useCallback(
     async (date: Date) => {
       const start = startOfDay(date);
+      // eslint-disable-next-line no-param-reassign
       router.query.startDate = format(start, DATE_FORMAT);
       await router.replace({
         query: router.query,
@@ -138,6 +138,7 @@ export function useDateFilters() {
   const checkAndSetEndDate = React.useCallback(
     async (date: Date) => {
       const end = startOfDay(date);
+      // eslint-disable-next-line no-param-reassign
       router.query.endDate = format(end, DATE_FORMAT);
       await router.replace({
         query: router.query,

Diff for: npm-packages/dashboard/src/elements/DateRangePicker.stories.tsx renamed to npm-packages/dashboard-common/src/elements/DateRangePicker.stories.tsx

@@ -2,7 +2,7 @@
 // TODO: CX-4916 fix the types in this file.
 import { StoryObj } from "@storybook/react";
 import { Id } from "system-udfs/convex/_generated/dataModel";
-import { DeploymentEventContent } from "elements/DeploymentEventContent";
+import { DeploymentEventContent } from "./DeploymentEventContent";
 
 export default { component: DeploymentEventContent };
 

Diff for: npm-packages/dashboard/src/elements/DateRangePicker.tsx renamed to npm-packages/dashboard-common/src/elements/DateRangePicker.tsx

@@ -5,18 +5,7 @@ import {
   PlusIcon,
   UpdateIcon,
 } from "@radix-ui/react-icons";
-import {
-  TimestampDistance,
-  Button,
-  Loading,
-  ReadonlyCodeDiff,
-  NENT_APP_PLACEHOLDER,
-  NentNameOption,
-  displaySchema,
-  SchemaJson,
-  DeploymentAuditLogEvent,
-} from "dashboard-common";
-import { useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { Infer } from "convex/values";
 import { Disclosure } from "@headlessui/react";
 import {
@@ -25,9 +14,14 @@ import {
   cronDiffType,
   schemaDiffType,
 } from "system-udfs/convex/tableDefs/deploymentAuditLogTable";
-import { TeamMemberLink } from "elements/TeamMemberLink";
-import { useGetCloudBackup } from "api/backups";
-import { BackupIdentifier } from "elements/BackupIdentifier";
+import { SchemaJson, displaySchema } from "../lib/format";
+import { DeploymentAuditLogEvent } from "../lib/useDeploymentAuditLog";
+import { DeploymentInfoContext } from "../lib/deploymentContext";
+import { TimestampDistance } from "./TimestampDistance";
+import { Button } from "./Button";
+import { ReadonlyCodeDiff } from "./ReadonlyCode";
+import { NentNameOption } from "./NentSwitcher";
+import { NENT_APP_PLACEHOLDER } from "../lib/useNents";
 
 function useSchemaCode(schema: null | string): string {
   return useMemo(() => {
@@ -42,6 +36,7 @@ export function DeploymentEventContent({
 }: {
   event: DeploymentAuditLogEvent;
 }) {
+  const { TeamMemberLink } = useContext(DeploymentInfoContext);
   let body;
   switch (event.action) {
     case "build_indexes":
@@ -106,6 +101,7 @@ export function DeploymentEventContent({
 }
 
 export function ActionText({ event }: { event: DeploymentAuditLogEvent }) {
+  const { CloudImport } = useContext(DeploymentInfoContext);
   switch (event.action) {
     case "create_environment_variable":
       return (
@@ -214,16 +210,6 @@ export function ActionText({ event }: { event: DeploymentAuditLogEvent }) {
   }
 }
 
-function CloudImport({ sourceCloudBackupId }: { sourceCloudBackupId: number }) {
-  const backup = useGetCloudBackup(sourceCloudBackupId);
-  const ident = backup ? (
-    <BackupIdentifier backup={backup} />
-  ) : (
-    <Loading fullHeight={false} className="inline-block h-3 w-80" />
-  );
-  return <span>restored from backup: {ident}</span>;
-}
-
 function Variable({ variableName }: { variableName: string }) {
   return <div className="font-mono font-semibold">{variableName}</div>;
 }

Diff for: npm-packages/dashboard/src/components/logs/DeploymentEventContent.stories.tsx renamed to npm-packages/dashboard-common/src/elements/DeploymentEventContent.stories.tsx

@@ -1,6 +1,5 @@
 import { ConvexProvider } from "convex/react";
 import { act, render, within } from "@testing-library/react";
-import { mockConvexReactClient } from "dashboard-common";
 import userEvent from "@testing-library/user-event";
 import udfs from "udfs";
 import { Id } from "system-udfs/convex/_generated/dataModel";
@@ -10,25 +9,9 @@ import {
   Uploader,
   useUploadFiles,
 } from "./FileStorageContent";
-
-jest.mock("api/roles", () => ({
-  useHasProjectAdminPermissions: jest.fn(),
-}));
-jest.mock("api/profile", () => {});
-jest.mock("api/projects", () => ({
-  useCurrentProject: jest.fn(),
-}));
-jest.mock("api/teams", () => ({ useCurrentTeam: jest.fn() }));
-jest.mock("api/deployments", () => ({ useCurrentDeployment: jest.fn() }));
-jest.mock("dashboard-common", () => ({
-  ...jest.requireActual("dashboard-common"),
-  useNents: () => ({
-    nents: [],
-    selectedNent: null,
-    setSelectedNent: jest.fn(),
-  }),
-  NentSwitcher: jest.fn(),
-}));
+import { mockConvexReactClient } from "../../../lib/mockConvexReactClient";
+import { DeploymentInfoContext } from "../../../lib/deploymentContext";
+import { deploymentInfo } from "../../../pages/_app";
 
 const mockRouter = jest
   .fn()
@@ -72,9 +55,11 @@ describe("FileStorageContent", () => {
     const setup = () =>
       act(() =>
         render(
-          <ConvexProvider client={mockClient}>
-            <FileStorageContent />
-          </ConvexProvider>,
+          <DeploymentInfoContext.Provider value={deploymentInfo}>
+            <ConvexProvider client={mockClient}>
+              <FileStorageContent />
+            </ConvexProvider>
+          </DeploymentInfoContext.Provider>,
         ),
       );
 
@@ -110,9 +95,11 @@ describe("FileStorageContent", () => {
     const setup = () =>
       act(() =>
         render(
-          <ConvexProvider client={mockClient}>
-            <UploaderWithLogic />
-          </ConvexProvider>,
+          <DeploymentInfoContext.Provider value={deploymentInfo}>
+            <ConvexProvider client={mockClient}>
+              <UploaderWithLogic />
+            </ConvexProvider>
+          </DeploymentInfoContext.Provider>,
         ),
       );
 

Diff for: npm-packages/dashboard/src/elements/DeploymentEventContent.tsx renamed to npm-packages/dashboard-common/src/elements/DeploymentEventContent.tsx

@@ -7,37 +7,33 @@ import {
   UploadIcon,
 } from "@radix-ui/react-icons";
 import * as Sentry from "@sentry/nextjs";
-import {
-  Button,
-  buttonClasses,
-  Loading,
-  Tooltip,
-  Spinner,
-  NentSwitcher,
-  useNents,
-  toast,
-  formatBytes,
-  useCopy,
-  Sheet,
-  ConfirmationDialog,
-  EmptySection,
-  Checkbox,
-} from "dashboard-common";
 import { useMutation, usePaginatedQuery, useQuery } from "convex/react";
 import Link from "next/link";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import udfs from "udfs";
 import { Id } from "system-udfs/convex/_generated/dataModel";
 import { FileMetadata } from "system-udfs/convex/_system/frontend/fileStorageV2";
 import Image from "next/image";
-import { useCurrentDeployment } from "api/deployments";
-import { useHasProjectAdminPermissions } from "api/roles";
 import {
   useReactTable,
   getCoreRowModel,
   flexRender,
   createColumnHelper,
 } from "@tanstack/react-table";
+import { toast } from "../../../lib/utils";
+import { NentSwitcher } from "../../../elements/NentSwitcher";
+import { useNents } from "../../../lib/useNents";
+import { DeploymentInfoContext } from "../../../lib/deploymentContext";
+import { Button, buttonClasses } from "../../../elements/Button";
+import { Tooltip } from "../../../elements/Tooltip";
+import { Spinner } from "../../../elements/Spinner";
+import { Checkbox } from "../../../elements/Checkbox";
+import { formatBytes } from "../../../lib/format";
+import { Loading } from "../../../elements/Loading";
+import { EmptySection } from "../../../elements/EmptySection";
+import { Sheet } from "../../../elements/Sheet";
+import { ConfirmationDialog } from "../../../elements/ConfirmationDialog";
+import { useCopy } from "../../../lib/useCopy";
 
 const columnHelper = createColumnHelper<FileMetadata>();
 
@@ -154,6 +150,9 @@ export function DeleteFilesButton({
   selectedFiles: Id<"_storage">[];
 }) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const { useCurrentDeployment, useHasProjectAdminPermissions } = useContext(
+    DeploymentInfoContext,
+  );
   const deployment = useCurrentDeployment();
   const hasAdminPermissions = useHasProjectAdminPermissions(
     deployment?.projectId,
@@ -197,6 +196,9 @@ export function DeleteFilesButton({
 }
 
 export function useUploadFiles() {
+  const { useCurrentDeployment, useHasProjectAdminPermissions } = useContext(
+    DeploymentInfoContext,
+  );
   const deployment = useCurrentDeployment();
   const hasAdminPermissions = useHasProjectAdminPermissions(
     deployment?.projectId,
@@ -588,6 +590,9 @@ function Files({
 }
 
 function FileActions({ file }: { file: FileMetadata }) {
+  const { useCurrentDeployment, useHasProjectAdminPermissions } = useContext(
+    DeploymentInfoContext,
+  );
   const deployment = useCurrentDeployment();
   const hasAdminPermissions = useHasProjectAdminPermissions(
     deployment?.projectId,

Diff for: npm-packages/dashboard/src/elements/Popover.tsx renamed to npm-packages/dashboard-common/src/elements/Popover.tsx

@@ -1,27 +1,33 @@
-import { DateRangePicker, useDateFilters } from "elements/DateRangePicker";
+import { endOfDay, endOfToday, startOfDay } from "date-fns";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { DeploymentEventContent } from "../../../elements/DeploymentEventContent";
+import {
+  DateRangePicker,
+  useDateFilters,
+} from "../../../elements/DateRangePicker";
+import { DeploymentInfoContext } from "../../../lib/deploymentContext";
 import {
-  Loading,
-  toast,
-  Sheet,
   DeploymentAuditLogEvent,
   DeploymentAuditLogFilters,
   usePaginatedDeploymentEvents,
-} from "dashboard-common";
-import { DeploymentEventContent } from "elements/DeploymentEventContent";
-import { endOfDay, endOfToday, startOfDay } from "date-fns";
-import { useCurrentTeam, useTeamMembers, useTeamEntitlements } from "api/teams";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+} from "../../../lib/useDeploymentAuditLog";
+import { Loading } from "../../../elements/Loading";
+import { toast } from "../../../lib/utils";
+import { Sheet } from "../../../elements/Sheet";
 
 const INITIAL_EVENTS_TO_LOAD = 10;
 const PAGE_SIZE = 10;
 const DISTANCE_FROM_BOTTOM_THRESHOLD_PX = 300;
 
 export function History() {
   const router = useRouter();
+  const { useCurrentTeam, useTeamEntitlements } = useContext(
+    DeploymentInfoContext,
+  );
   const team = useCurrentTeam();
-  const { startDate, endDate, setDate } = useDateFilters();
+  const { startDate, endDate, setDate } = useDateFilters(router);
   const entitlements = useTeamEntitlements(team?.id);
   const auditLogsEnabled = entitlements?.auditLogsEnabled;
 
@@ -63,6 +69,7 @@ export function History() {
 }
 
 function HistoryList({ filters }: { filters: DeploymentAuditLogFilters }) {
+  const { useCurrentTeam, useTeamMembers } = useContext(DeploymentInfoContext);
   const currentTeam = useCurrentTeam();
   const teamMembers = useTeamMembers(currentTeam?.id) ?? [];
 

Diff for: npm-packages/dashboard/src/elements/ToastContainer.stories.tsx renamed to npm-packages/dashboard-common/src/elements/ToastContainer.stories.tsx

@@ -1,18 +1,16 @@
-import { useState } from "react";
-import {
-  Button,
-  formatDateTime,
-  DeploymentAuditLogEvent,
-  DetailPanel,
-} from "dashboard-common";
+import { useContext, useState } from "react";
 import classNames from "classnames";
 import { GearIcon } from "@radix-ui/react-icons";
-import { TeamMemberLink } from "elements/TeamMemberLink";
 import {
   DeploymentEventContent,
   ActionText,
-} from "elements/DeploymentEventContent";
+} from "../../../elements/DeploymentEventContent";
 import { ITEM_SIZE } from "./LogListItem";
+import { Button } from "../../../elements/Button";
+import { formatDateTime } from "../../../lib/format";
+import { DeploymentAuditLogEvent } from "../../../lib/useDeploymentAuditLog";
+import { DetailPanel } from "../../../elements/DetailPanel";
+import { DeploymentInfoContext } from "../../../lib/deploymentContext";
 
 export function DeploymentEventListItem({
   event,
@@ -21,6 +19,7 @@ export function DeploymentEventListItem({
   event: DeploymentAuditLogEvent;
   inline?: boolean;
 }) {
+  const { TeamMemberLink } = useContext(DeploymentInfoContext);
   const [showDetails, setShowDetails] = useState(false);
   const timestamp = formatDateTime(new Date(event._creationTime));