From 457a29cfcfa907b1c6e0f378a2a7194293ed3c00 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 24 Oct 2024 18:15:16 +0100 Subject: [PATCH 01/88] Updated styling --- apps/webapp/app/components/primitives/Table.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 65921adec2..a9ae3da4c7 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -17,7 +17,7 @@ export const Table = forwardRef( return (
@@ -114,7 +114,7 @@ export const TableHeaderCell = forwardRef Date: Fri, 25 Oct 2024 10:05:11 +0100 Subject: [PATCH 02/88] Updated the main Table component styles to the new design --- apps/webapp/app/components/primitives/Table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index a9ae3da4c7..d3f94c9440 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -41,7 +41,7 @@ export const TableHeader = forwardRef @@ -114,7 +114,7 @@ export const TableHeaderCell = forwardRef Date: Fri, 25 Oct 2024 10:05:21 +0100 Subject: [PATCH 03/88] Run page table layout style updates --- apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 4 ++-- .../route.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index e31b30f0c5..843385ca9c 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -106,7 +106,7 @@ export function TaskRunsTable({ {allowSelection && ( - + {runs.length > 0 && ( r.id))} @@ -282,7 +282,7 @@ export function TaskRunsTable({ return ( {allowSelection && ( - + { diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx index 305ab3863e..f9abb5f774 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx @@ -124,7 +124,7 @@ export default function Page() { selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_3.5rem]" )} > -
+
@@ -147,7 +147,7 @@ export default function Page() { ) : (
-
+
-
)} From 3c90d9b6a88066b46272cd4c50b640fde08b7b71 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 25 Oct 2024 11:30:17 +0100 Subject: [PATCH 04/88] Updated row styling and new scrolling behaviour --- .../app/components/primitives/Table.tsx | 25 ++++-- .../app/components/runs/v3/TaskRunsTable.tsx | 2 +- .../route.tsx | 90 +++++++++---------- 3 files changed, 60 insertions(+), 57 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index d3f94c9440..2170efe6bc 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -41,7 +41,7 @@ export const TableHeader = forwardRef @@ -59,10 +59,7 @@ type TableBodyProps = { export const TableBody = forwardRef( ({ className, children }, ref) => { return ( - + {children} ); @@ -78,7 +75,14 @@ type TableRowProps = { export const TableRow = forwardRef( ({ className, disabled, children }, ref) => { return ( - + {children} ); @@ -145,9 +149,12 @@ type TableCellProps = TableCellBasicProps & { }; const rowHoverStyles = { - default: "group-hover/table-row:bg-charcoal-800", - dimmed: "group-hover/table-row:bg-charcoal-850", - bright: "group-hover/table-row:bg-charcoal-750", + default: + "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:z-10 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", + dimmed: + "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", + bright: + "group-hover/table-row:bg-charcoal-750 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-700 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-700 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", }; const stickyStyles = diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 843385ca9c..7972ffbddf 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -102,7 +102,7 @@ export function TaskRunsTable({ ); return ( - +
{allowSelection && ( diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx index f9abb5f774..4da6abfdca 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx @@ -124,57 +124,53 @@ export default function Page() { selectedItems.size === 0 ? "grid-rows-1" : "grid-rows-[1fr_3.5rem]" )} > -
- -
- - Loading runs -
+ +
+ + Loading runs
- } - > - - {(list) => ( - <> - {list.runs.length === 0 && !list.hasFilters ? ( - list.possibleTasks.length === 0 ? ( - - ) : ( - - ) +
+ } + > + + {(list) => ( + <> + {list.runs.length === 0 && !list.hasFilters ? ( + list.possibleTasks.length === 0 ? ( + ) : ( -
-
-
- -
- -
-
- - + + ) + ) : ( +
+
+ +
+
- )} - - )} - - -
+ + +
+ )} + + )} + +
)} From a02df2ce4fa5de0c33cfb3932c6d8b38249084e5 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 25 Oct 2024 12:57:51 +0100 Subject: [PATCH 05/88] Fixed bulk action bar no appearing --- .../route.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx index 4da6abfdca..f78595bfa2 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx @@ -121,7 +121,7 @@ export default function Page() {
) ) : ( -
+
From ec37ba4e98944b95c161a83e203beebbecb76884 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 25 Oct 2024 12:58:23 +0100 Subject: [PATCH 06/88] Improved table component styles --- apps/webapp/app/components/primitives/Table.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 2170efe6bc..30dcfcaf43 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -17,7 +17,7 @@ export const Table = forwardRef( return (
@@ -150,7 +150,7 @@ type TableCellProps = TableCellBasicProps & { const rowHoverStyles = { default: - "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:z-10 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", + "group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", dimmed: "group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3", bright: @@ -199,7 +199,7 @@ export const TableCell = forwardRef(
Date: Fri, 25 Oct 2024 13:03:21 +0100 Subject: [PATCH 07/88] Pagination arrows now chevrons --- apps/webapp/app/components/ListPagination.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx index c62b749722..7ac60cd283 100644 --- a/apps/webapp/app/components/ListPagination.tsx +++ b/apps/webapp/app/components/ListPagination.tsx @@ -26,7 +26,7 @@ function NextButton({ cursor }: { cursor?: string }) { Date: Fri, 25 Oct 2024 13:50:22 +0100 Subject: [PATCH 08/88] Added link to Runs docs page --- .../route.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx index f78595bfa2..64c8db6c0e 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx @@ -21,7 +21,7 @@ import { } from "~/components/primitives/Dialog"; import { Header1, Header2 } from "~/components/primitives/Headers"; import { InfoPanel } from "~/components/primitives/InfoPanel"; -import { NavBar, PageTitle } from "~/components/primitives/PageHeader"; +import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader"; import { Paragraph } from "~/components/primitives/Paragraph"; import { SelectedItemsProvider, @@ -40,7 +40,13 @@ import { findProjectBySlug } from "~/models/project.server"; import { RunListPresenter } from "~/presenters/v3/RunListPresenter.server"; import { requireUserId } from "~/services/session.server"; import { cn } from "~/utils/cn"; -import { ProjectParamSchema, v3ProjectPath, v3RunsPath, v3TestPath } from "~/utils/pathBuilder"; +import { + docsPath, + ProjectParamSchema, + v3ProjectPath, + v3RunsPath, + v3TestPath, +} from "~/utils/pathBuilder"; import { ListPagination } from "../../components/ListPagination"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { @@ -111,6 +117,15 @@ export default function Page() { <> + + + Runs docs + + Date: Sat, 26 Oct 2024 13:05:44 +0100 Subject: [PATCH 09/88] Small popover tweak --- apps/webapp/app/components/primitives/Popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx index 2deab69c62..6d425928b5 100644 --- a/apps/webapp/app/components/primitives/Popover.tsx +++ b/apps/webapp/app/components/primitives/Popover.tsx @@ -190,11 +190,11 @@ function PopoverVerticalEllipseTrigger({ - + ); } From 7ecf336a5f4df3350cb6ff181fd8f2de7ca10ded Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 26 Oct 2024 13:09:56 +0100 Subject: [PATCH 10/88] Moved the extra Test button out of Tables and into the RunsTable --- .../app/components/primitives/Table.tsx | 35 +++++++++++-------- .../app/components/runs/v3/TaskRunsTable.tsx | 18 ++++++++-- 2 files changed, 37 insertions(+), 16 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 30dcfcaf43..874e466291 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -1,9 +1,10 @@ -import { ChevronRightIcon } from "@heroicons/react/24/solid"; +import { BeakerIcon, ChevronRightIcon } from "@heroicons/react/24/solid"; import { Link } from "@remix-run/react"; import { ReactNode, forwardRef, useState } from "react"; import { cn } from "~/utils/cn"; import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover"; -import { InfoIconTooltip } from "./Tooltip"; +import { InfoIconTooltip, SimpleTooltip } from "./Tooltip"; +import { Button, LinkButton } from "./Buttons"; type TableProps = { containerClassName?: string; @@ -158,7 +159,7 @@ const rowHoverStyles = { }; const stickyStyles = - "sticky right-0 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]"; + "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto"; export const TableCell = forwardRef( ( @@ -244,7 +245,7 @@ export const TableCellChevron = forwardRef< alignment="right" > {children} - + ); }); @@ -256,8 +257,9 @@ export const TableCellMenu = forwardRef< children?: ReactNode; isSticky?: boolean; onClick?: (event: React.MouseEvent) => void; + actionButton?: ReactNode; } ->(({ className, children, isSticky, onClick }, ref) => { +>(({ className, children, isSticky, onClick, actionButton }, ref) => { const [isOpen, setIsOpen] = useState(false); return ( - setIsOpen(open)}> - - -
{children}
- - +
+
+ {actionButton &&
{actionButton}
} + setIsOpen(open)}> + + +
{children}
+ + +
+
); }); diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 7972ffbddf..38e3e6e6e3 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -23,7 +23,7 @@ import { useProject } from "~/hooks/useProject"; import { useUser } from "~/hooks/useUser"; import { RunListAppliedFilters, RunListItem } from "~/presenters/v3/RunListPresenter.server"; import { formatCurrencyAccurate, formatNumber } from "~/utils/numberFormatter"; -import { docsPath, v3RunSpanPath, v3TestPath } from "~/utils/pathBuilder"; +import { docsPath, v3RunSpanPath, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder"; import { EnvironmentLabel } from "../../environments/EnvironmentLabel"; import { DateTime } from "../../primitives/DateTime"; import { Paragraph } from "../../primitives/Paragraph"; @@ -401,11 +401,25 @@ export function TaskRunsTable({ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { const location = useLocation(); + const organization = useOrganization(); + const project = useProject(); + const testPath = v3TestPath(organization, project); if (!run.isCancellable && !run.isReplayable) return {""}; + const actionButton = testPath ? ( + + + + } + content="Run a test" + /> + ) : null; + return ( - + {run.isCancellable && ( From c9ffd21e9a3f9d5e7df92f3d12fb5bcb7e124ed5 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 29 Oct 2024 11:11:48 +0000 Subject: [PATCH 11/88] WIP refactoring the sticky table cell --- .../app/components/primitives/Table.tsx | 38 +++++--- .../app/components/runs/v3/TaskRunsTable.tsx | 89 ++++++++++--------- 2 files changed, 70 insertions(+), 57 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 874e466291..f3688cd16f 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -254,13 +254,15 @@ export const TableCellMenu = forwardRef< HTMLTableCellElement, { className?: string; - children?: ReactNode; isSticky?: boolean; onClick?: (event: React.MouseEvent) => void; - actionButton?: ReactNode; + visibleButtons?: ReactNode; + hiddenButtons?: ReactNode; + popoverContent?: ReactNode; } ->(({ className, children, isSticky, onClick, actionButton }, ref) => { +>(({ className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent }, ref) => { const [isOpen, setIsOpen] = useState(false); + return (
- {actionButton &&
{actionButton}
} - setIsOpen(open)}> - - -
{children}
- - + {/* Always visible buttons */} + {visibleButtons} + + {/* Hidden buttons that show on hover */} + {hiddenButtons && ( +
{hiddenButtons}
+ )} + + {/* Always visible opover with ellipsis trigger */} + {popoverContent && ( + setIsOpen(open)}> + + +
{popoverContent}
+ + + )}
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 38e3e6e6e3..68174e4ac0 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -3,7 +3,7 @@ import { ClockIcon, CpuChipIcon, RectangleStackIcon, - StopCircleIcon, + StopIcon, } from "@heroicons/react/20/solid"; import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid"; import { useLocation } from "@remix-run/react"; @@ -23,7 +23,7 @@ import { useProject } from "~/hooks/useProject"; import { useUser } from "~/hooks/useUser"; import { RunListAppliedFilters, RunListItem } from "~/presenters/v3/RunListPresenter.server"; import { formatCurrencyAccurate, formatNumber } from "~/utils/numberFormatter"; -import { docsPath, v3RunSpanPath, v3TestPath, v3TestTaskPath } from "~/utils/pathBuilder"; +import { docsPath, v3RunSpanPath, v3TestPath } from "~/utils/pathBuilder"; import { EnvironmentLabel } from "../../environments/EnvironmentLabel"; import { DateTime } from "../../primitives/DateTime"; import { Paragraph } from "../../primitives/Paragraph"; @@ -367,7 +367,7 @@ export function TaskRunsTable({ )} - {run.isTest ? : "–"} + {run.isTest ? : "–"} {run.createdAt ? : "–"} @@ -401,52 +401,53 @@ export function TaskRunsTable({ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { const location = useLocation(); - const organization = useOrganization(); - const project = useProject(); - const testPath = v3TestPath(organization, project); if (!run.isCancellable && !run.isReplayable) return {""}; - const actionButton = testPath ? ( - - - + return ( + + {run.isCancellable && ( + + + + + + + } + content="Cancel run" + side="left" + disableHoverableContent + /> + )} + {run.isReplayable && ( + + + + + + + } + content="Replay run" + side="left" + disableHoverableContent + /> + )} + } - content="Run a test" /> - ) : null; - - return ( - - {run.isCancellable && ( - - - - - - - )} - {run.isReplayable && ( - - - - - - - )} - ); } From 5063d616fc06f8ff5dcaf7bd1b9666b8d6415d6c Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 29 Oct 2024 17:47:06 +0000 Subject: [PATCH 12/88] Support for the existing way we have menus in the sticky table cells --- .../app/components/primitives/Table.tsx | 92 +++++++++++-------- 1 file changed, 56 insertions(+), 36 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index f3688cd16f..a41d16c082 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -259,46 +259,66 @@ export const TableCellMenu = forwardRef< visibleButtons?: ReactNode; hiddenButtons?: ReactNode; popoverContent?: ReactNode; + children?: ReactNode; } ->(({ className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent }, ref) => { - const [isOpen, setIsOpen] = useState(false); - - return ( - -
-
- {/* Always visible buttons */} - {visibleButtons} +>( + ( + { className, isSticky, onClick, visibleButtons, hiddenButtons, popoverContent, children }, + ref + ) => { + const [isOpen, setIsOpen] = useState(false); - {/* Hidden buttons that show on hover */} - {hiddenButtons && ( -
{hiddenButtons}
- )} + return ( + +
+
+ {/* Hidden buttons that show on hover */} + {hiddenButtons && ( +
{hiddenButtons}
+ )} + {/* Always visible buttons */} + {visibleButtons} + {/* Always visible opover with ellipsis trigger */} + {popoverContent && ( + setIsOpen(open)}> + + +
{popoverContent}
+ + + )} - {/* Always visible opover with ellipsis trigger */} - {popoverContent && ( - setIsOpen(open)}> - - -
{popoverContent}
- - - )} + {/* + Todo: This is support for the legacy TableCell where all buttons were in Popovers. + Replace all instances of this with the new options above and remove when done. + */} + {!visibleButtons && !hiddenButtons && !popoverContent && ( + setIsOpen(open)}> + + +
{children}
+ + + )} +
-
- - ); -}); + + ); + } +); type TableBlankRowProps = { className?: string; From a57188eeb8f15c11c5c03ef565fdee6995325ca2 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 29 Oct 2024 18:38:34 +0000 Subject: [PATCH 13/88] Created a specific Docs style button --- .../app/components/primitives/Buttons.tsx | 38 ++++++++++++++++--- .../route.tsx | 2 +- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index e8db5a4008..8d4faa7577 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -46,6 +46,7 @@ const theme = { "bg-primary group-hover:bg-apple-200 group-disabled:opacity-50 group-disabled:bg-primary group-disabled:pointer-events-none", shortcut: "border-black/40 text-charcoal-900 group-hover:border-black/60 group-hover:text-charcoal-900", + icon: "", }, secondary: { textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", @@ -53,6 +54,7 @@ const theme = { "bg-secondary group-hover:bg-charcoal-600 group-hover:border-charcoal-650 border border-charcoal-600 group-disabled:bg-secondary group-disabled:opacity-60 group-disabled:pointer-events-none", shortcut: "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", + icon: "", }, tertiary: { textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", @@ -60,6 +62,7 @@ const theme = { "bg-tertiary group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", shortcut: "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", + icon: "", }, minimal: { textColor: @@ -68,6 +71,7 @@ const theme = { "bg-transparent group-hover:bg-tertiary disabled:opacity-50 group-disabled:bg-transparent group-disabled:pointer-events-none", shortcut: "border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60", + icon: "", }, danger: { textColor: @@ -75,6 +79,15 @@ const theme = { button: "bg-error group-hover:bg-rose-500 disabled:opacity-50 group-disabled:bg-error group-disabled:pointer-events-none", shortcut: "border-text-bright text-text-bright group-hover:border-bright/60", + icon: "", + }, + docs: { + textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", + icon: "text-blue-500", + button: + "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", + shortcut: + "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", }, }; @@ -84,7 +97,7 @@ function createVariant(sizeName: Size, themeName: Theme) { return { textColor: theme[themeName].textColor, button: cn(sizes[sizeName].button, theme[themeName].button), - icon: sizes[sizeName].icon, + icon: cn(sizes[sizeName].icon, theme[themeName].icon), iconSpacing: sizes[sizeName].iconSpacing, shortcutVariant: sizes[sizeName].shortcutVariant, shortcut: cn(sizes[sizeName].shortcut, theme[themeName].shortcut), @@ -111,7 +124,10 @@ const variant = { "danger/small": createVariant("small", "danger"), "danger/medium": createVariant("medium", "danger"), "danger/large": createVariant("large", "danger"), - "danger/extra-large": createVariant("extra-large", "danger"), + "docs/small": createVariant("small", "docs"), + "docs/medium": createVariant("medium", "docs"), + "docs/large": createVariant("large", "docs"), + "docs/extra-large": createVariant("extra-large", "docs"), "menu-item": { textColor: "text-text-bright px-1", button: "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-750", @@ -192,13 +208,18 @@ export function ButtonContent(props: ButtonContentPropsType) { (typeof LeadingIcon === "string" ? ( ) : ( ) : ( From 72e727caac027007941431e74d0b7c3fdb055af1 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 29 Oct 2024 18:43:06 +0000 Subject: [PATCH 14/88] Improved dialog trigger button styles --- .../app/components/runs/v3/TaskRunsTable.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 68174e4ac0..1dbf84e7dd 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -413,8 +413,11 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { - - + + - - + + Date: Tue, 29 Oct 2024 18:43:11 +0000 Subject: [PATCH 15/88] Improved docs button styles --- apps/webapp/app/components/primitives/Buttons.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 8d4faa7577..976308752a 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -82,10 +82,10 @@ const theme = { icon: "", }, docs: { - textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", + textColor: "text-blue-200/70 transition group-disabled:text-text-dimmed/80", icon: "text-blue-500", button: - "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", + "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover:bg-charcoal-650 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", shortcut: "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", }, From 51741c70e6543542c9a9bfc2c7eb760181ff1c97 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 29 Oct 2024 18:48:16 +0000 Subject: [PATCH 16/88] Updated Docs buttons to the new style in the tooltips --- apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 1dbf84e7dd..95a7998e0e 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -210,8 +210,9 @@ export function TaskRunsTable({ Read docs @@ -233,8 +234,9 @@ export function TaskRunsTable({ Read docs @@ -254,8 +256,9 @@ export function TaskRunsTable({ Read docs From 3373f34cae0523e43c18fa8e703522f16c48613b Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 30 Oct 2024 10:35:37 +0000 Subject: [PATCH 17/88] Adding a Test button on hover --- .../route.tsx | 50 ++++++++++++++++--- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index fac0c29158..656de7d114 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -1,4 +1,10 @@ -import { ChatBubbleLeftRightIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/20/solid"; +import { + BeakerIcon, + BookOpenIcon, + ChatBubbleLeftRightIcon, + ChevronDownIcon, + ChevronUpIcon, +} from "@heroicons/react/20/solid"; import { useRevalidator } from "@remix-run/react"; import { LoaderFunctionArgs } from "@remix-run/server-runtime"; import { formatDurationMilliseconds } from "@trigger.dev/core/v3"; @@ -13,7 +19,7 @@ import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; import { InlineCode } from "~/components/code/InlineCode"; import { EnvironmentLabels } from "~/components/environments/EnvironmentLabel"; import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout"; -import { Button } from "~/components/primitives/Buttons"; +import { Button, LinkButton } from "~/components/primitives/Buttons"; import { Callout } from "~/components/primitives/Callout"; import { formatDateTime } from "~/components/primitives/DateTime"; import { Header1, Header2, Header3 } from "~/components/primitives/Headers"; @@ -28,7 +34,7 @@ import { TableBlankRow, TableBody, TableCell, - TableCellChevron, + TableCellMenu, TableHeader, TableHeaderCell, TableRow, @@ -38,8 +44,8 @@ import TooltipPortal from "~/components/primitives/TooltipPortal"; import { TaskFunctionName } from "~/components/runs/v3/TaskPath"; import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus"; import { - TaskTriggerSourceIcon, taskTriggerSourceDescription, + TaskTriggerSourceIcon, } from "~/components/runs/v3/TaskTriggerSource"; import { useEventSource } from "~/hooks/useEventSource"; import { useOrganization } from "~/hooks/useOrganizations"; @@ -48,7 +54,13 @@ import { useTextFilter } from "~/hooks/useTextFilter"; import { Task, TaskActivity, TaskListPresenter } from "~/presenters/v3/TaskListPresenter.server"; import { requireUserId } from "~/services/session.server"; import { cn } from "~/utils/cn"; -import { ProjectParamSchema, v3RunsPath, v3TasksStreamingPath } from "~/utils/pathBuilder"; +import { + docsPath, + ProjectParamSchema, + v3RunsPath, + v3TasksStreamingPath, + v3TestTaskPath, +} from "~/utils/pathBuilder"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); @@ -144,6 +156,13 @@ export default function Page() { ))} + + Tasks docs + @@ -182,6 +201,7 @@ export default function Page() { const path = v3RunsPath(organization, project, { tasks: [task.slug], }); + const taskFriendlyId = task.filePath; return ( @@ -262,7 +282,23 @@ export default function Page() { - + + Test + + } + /> ); }) @@ -457,7 +493,7 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps) return (
- {formattedDate} + {formattedDate}
{items.map((item) => ( From 92aa8f7edcc9294ac211801b8865405786868382 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 30 Oct 2024 18:55:45 +0000 Subject: [PATCH 18/88] Removed the page padding and made table scroll --- .../route.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index 656de7d114..ec5abfe0b0 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -165,13 +165,13 @@ export default function Page() { - +
{hasTasks ? ( -
+
{!userHasTasks && } -
-
+
+
- +
Task ID From 36497f02f26de84abbe58f61c58ef2a7be220b92 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 30 Oct 2024 19:15:40 +0000 Subject: [PATCH 19/88] Fixed table scrolling --- .../route.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index ec5abfe0b0..ba71321f8e 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -182,7 +182,7 @@ export default function Page() { autoFocus /> -
+
Task ID From f4cba716fb32ca1e58b4070ae76e364fd70aa729 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 31 Oct 2024 09:04:40 +0000 Subject: [PATCH 20/88] cleaned up imports --- apps/webapp/app/components/primitives/Table.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index a41d16c082..b1f68eee44 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -1,10 +1,9 @@ -import { BeakerIcon, ChevronRightIcon } from "@heroicons/react/24/solid"; +import { ChevronRightIcon } from "@heroicons/react/24/solid"; import { Link } from "@remix-run/react"; import { ReactNode, forwardRef, useState } from "react"; import { cn } from "~/utils/cn"; import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover"; -import { InfoIconTooltip, SimpleTooltip } from "./Tooltip"; -import { Button, LinkButton } from "./Buttons"; +import { InfoIconTooltip } from "./Tooltip"; type TableProps = { containerClassName?: string; From 1574e692d5f105e76e3408734fe16839bf445b32 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 31 Oct 2024 17:19:44 +0000 Subject: [PATCH 21/88] WIP adding a test button that links to the test page --- .../presenters/v3/TaskListPresenter.server.ts | 1 + .../route.tsx | 16 +++++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts b/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts index 90441e5073..cb1aa77b04 100644 --- a/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/TaskListPresenter.server.ts @@ -31,6 +31,7 @@ export type Task = { environments: { id: string; type: RuntimeEnvironmentType; + slug: string; userName?: string; }[]; }; diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index ba71321f8e..deda31e5eb 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -59,6 +59,7 @@ import { ProjectParamSchema, v3RunsPath, v3TasksStreamingPath, + v3TestPath, v3TestTaskPath, } from "~/utils/pathBuilder"; @@ -201,7 +202,6 @@ export default function Page() { const path = v3RunsPath(organization, project, { tasks: [task.slug], }); - const taskFriendlyId = task.filePath; return ( @@ -288,12 +288,14 @@ export default function Page() { Test From 37d489b80b884f0a004d549e1778178f87c757e0 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 31 Oct 2024 17:20:14 +0000 Subject: [PATCH 22/88] added a docs button to the header --- .../route.tsx | 36 +++++++++++-------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx index 70941ef5b8..25379381c5 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx @@ -94,7 +94,6 @@ export default function Page() { possibleTasks, possibleEnvironments, hasFilters, - filters, limits, currentPage, totalPages, @@ -132,11 +131,20 @@ export default function Page() { + + Schedules docs + + {limits.used >= limits.limit ? ( } - defaultValue="help" - /> - )} - -
-
+ Upgrade + + ) : ( + Request more} + defaultValue="help" /> -
+ )}
- )} - + + )} @@ -343,7 +362,7 @@ function SchedulesTable({ const { scheduleParam } = useParams(); return ( -
+
ID From 4ff5ebb10d5457cc307895d50bc9e07d90d6b076 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 31 Oct 2024 19:19:28 +0000 Subject: [PATCH 24/88] Fixed the button types in the schedules info panel --- .../route.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx index c608095c9e..1aa6be9b63 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx @@ -252,7 +252,7 @@ export default function Page() { Timezone {schedule.timezone} - + Environments @@ -272,7 +272,7 @@ export default function Page() { {schedule.userProvidedDeduplicationKey ? schedule.deduplicationKey : "–"} - + Status @@ -354,11 +354,11 @@ export default function Page() { {isImperative && (
-
+
- + Delete schedule - + Are you sure you want to delete this schedule? This can't be reversed.
@@ -268,7 +261,6 @@ export default function Page() { /> )}
-
From 15609b27c6f95b89541cc2976170cdc7bf1ae749 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 1 Nov 2024 09:16:53 +0000 Subject: [PATCH 27/88] Delete modal button position updated --- .../route.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx index 1aa6be9b63..788795ddf3 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules.$scheduleParam/route.tsx @@ -384,7 +384,7 @@ export default function Page() { Are you sure you want to delete this schedule? This can't be reversed. - +
+ +
+
Environment @@ -124,7 +124,7 @@ export default function Page() {
- + Secret keys should be used on your server. They give full API access and allow you to trigger tasks from your From 95b4d42337c12be34ba775af55735685aceab4d0 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 11:03:42 +0000 Subject: [PATCH 38/88] Fix typo and modal layout --- .../environments/RegenerateApiKeyModal.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index 08d2667705..6255933b4c 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -39,7 +39,7 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) { - {`Regenerate ${title} Environment Key`} + {`Regenerate ${title.toUpperCase()} environment key`} +
- {`Regenerating the keys for this environment will temporarily break any live Jobs in the - ${title} Environmentuntil the new API keys are set in the relevant environment variables.`} + {`Regenerating the keys for this environment will temporarily break any live tasks in the + ${title} environment until the new API keys are set in the relevant environment variables.`}
- + Enter this text below to confirm: Regenerate } - cancelButton={} + cancelButton={} + className="border-t border-grid-bright pt-4" />
From a553a9f9e137ccde6245ce1a70dc869a85e7f325 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 11:09:16 +0000 Subject: [PATCH 39/88] Table uses new sticky button type --- .../route.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx index 211750ceed..9ef6a97d50 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.apikeys/route.tsx @@ -104,7 +104,7 @@ export default function Page() { className="w-full max-w-none" secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`} value={environment.apiKey} - variant={"tertiary/small"} + variant={"secondary/small"} /> @@ -112,19 +112,22 @@ export default function Page() { {environment.latestVersion ?? "–"} {environment.environmentVariableCount} - - - + + } + > ))}
- + Secret keys should be used on your server. They give full API access and allow you to trigger tasks from your From 970787fb8c4681f835667321724a28c9d050684f Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 11:09:21 +0000 Subject: [PATCH 40/88] Tidy imports --- .../environments/RegenerateApiKeyModal.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index 6255933b4c..49a76a72e2 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -1,18 +1,16 @@ -import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/20/solid"; -import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; +import { ArrowPathIcon } from "@heroicons/react/20/solid"; import { useFetcher } from "@remix-run/react"; import { useState } from "react"; import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog"; import { generateTwoRandomWords } from "~/utils/randomWords"; import { Button } from "../primitives/Buttons"; -import { Header1 } from "../primitives/Headers"; -import { Input } from "../primitives/Input"; -import { Paragraph } from "../primitives/Paragraph"; -import { Spinner } from "../primitives/Spinner"; import { Callout } from "../primitives/Callout"; import { Fieldset } from "../primitives/Fieldset"; -import { InputGroup } from "../primitives/InputGroup"; import { FormButtons } from "../primitives/FormButtons"; +import { Input } from "../primitives/Input"; +import { InputGroup } from "../primitives/InputGroup"; +import { Paragraph } from "../primitives/Paragraph"; +import { Spinner } from "../primitives/Spinner"; type ModalProps = { id: string; @@ -35,7 +33,7 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) { leadingIconClassName="text-text-dimmed" LeadingIcon={ArrowPathIcon} > - Regenerate + Regenerate… From 7f561f460a78980734781770d500b834da05c1f6 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 12:09:40 +0000 Subject: [PATCH 41/88] Env var table now full width --- .../route.tsx | 1 - .../route.tsx | 50 +++++++++++-------- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx index 01c2b841db..d5ec7d6681 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables.new/route.tsx @@ -311,7 +311,6 @@ export default function Page() { Cancel } - className="mt-2" /> diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx index 78749082fd..6eb0397a7b 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx @@ -184,33 +184,33 @@ export default function Page() { Environment variables docs - -
-
- {environmentVariables.length > 0 && ( + +
+ {environmentVariables.length > 0 && ( +
setRevealAll(e.valueOf())} /> - )} - - Add new - -
- + + Add new + + + )} +
Key @@ -239,7 +239,7 @@ export default function Page() { className="-ml-2" secure={!revealAll} value={value} - variant={"tertiary/small"} + variant={"secondary/small"} /> ); @@ -257,8 +257,16 @@ export default function Page() { ) : ( -
- No environment variables have been set +
+ You haven't set any environment variables yet. + + Add new +
@@ -266,8 +274,8 @@ export default function Page() {
-
- +
+ Dev environment variables specified here will be overridden by ones in your .env file when running locally. From 424c0ca7cff9ba2dc193be8d531ec87ff47746e2 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 12:11:06 +0000 Subject: [PATCH 42/88] Form buttons have a border top --- apps/webapp/app/components/primitives/FormButtons.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/FormButtons.tsx b/apps/webapp/app/components/primitives/FormButtons.tsx index 9175290e42..e7d6db75d2 100644 --- a/apps/webapp/app/components/primitives/FormButtons.tsx +++ b/apps/webapp/app/components/primitives/FormButtons.tsx @@ -10,7 +10,12 @@ export function FormButtons({ className?: string; }) { return ( -
+
{cancelButton ? cancelButton :
} {confirmButton}
); From dbacd43d7c9eb3437a26eb9122cf1fd14f47a403 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 12:19:17 +0000 Subject: [PATCH 43/88] Updated button styles --- .../route.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx index a73f2c43b1..ce065fcffe 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx @@ -231,7 +231,7 @@ function CreateDeploymentInstructions() { @@ -247,7 +247,7 @@ function CreateDeploymentInstructions() {
@@ -255,7 +255,7 @@ function CreateDeploymentInstructions() { From d921c0407d88fc657b52c13e4c7284880442250c Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 12:20:55 +0000 Subject: [PATCH 44/88] Updated blank state message style to be consistent --- .../route.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx index 6eb0397a7b..ee0f14769a 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx @@ -28,6 +28,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components import { Fieldset } from "~/components/primitives/Fieldset"; import { FormButtons } from "~/components/primitives/FormButtons"; import { FormError } from "~/components/primitives/FormError"; +import { Header2 } from "~/components/primitives/Headers"; import { InfoPanel } from "~/components/primitives/InfoPanel"; import { Input } from "~/components/primitives/Input"; import { InputGroup } from "~/components/primitives/InputGroup"; @@ -258,7 +259,7 @@ export default function Page() {
- You haven't set any environment variables yet. + You haven't set any environment variables yet. Date: Sat, 2 Nov 2024 12:31:42 +0000 Subject: [PATCH 45/88] Removed unnecessary form button border --- .../route.tsx | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx index 1ee059a6af..0012f52e4f 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts.new/route.tsx @@ -416,28 +416,21 @@ export default function Page() { {environmentTypes.error} {form.error} -
- - {isLoading ? "Saving…" : "Save"} - - } - cancelButton={ - - Cancel - - } - /> -
+ + {isLoading ? "Saving…" : "Save"} + + } + cancelButton={ + + Cancel + + } + /> From e64cca2bac210a99d8427aac715951204eefc8c8 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 12:32:09 +0000 Subject: [PATCH 46/88] Alerts page tables now full width --- .../route.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx index 576ba0f5bd..69b4f86b71 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.alerts/route.tsx @@ -163,16 +163,16 @@ export default function Page() { Alerts docs - -
+ +
{alertChannels.length > 0 && !requiresUpgrade && ( -
+
Project alerts
)} - +
Name @@ -238,7 +238,7 @@ export default function Page() { )) ) : ( - +
You haven't created any project alerts yet @@ -328,6 +328,7 @@ function DeleteAlertChannelButton(props: { id: string }) {
-
- {requiresUpgrade ? ( - - - You've used all {limits.limit} of your available alerts. Upgrade your plan to - enable more. - - - ) : ( -
-
- - You've used {limits.used}/{limits.limit} of your alerts. - +
+
+
+ + + + + +
+ } + content={`${Math.round((limits.used / limits.limit) * 100)}%`} + /> +
+ {requiresUpgrade ? ( + + You've used all {limits.limit} of your available alerts. Upgrade your plan to + enable more. + + ) : ( + + You've used {limits.used}/{limits.limit} of your alerts. + + )} Upgrade
-
-
-
- )} +
@@ -431,6 +457,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP leadingIconClassName="text-charcoal-400" label={"Email"} description={alertChannel.properties.email} + boxClassName="group-hover/table-row:bg-charcoal-800" /> ); } @@ -462,6 +489,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP className="mt-1 w-80" /> } + boxClassName="group-hover/table-row:bg-charcoal-800" /> ); } @@ -477,6 +505,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP leadingIconClassName="text-charcoal-400" label={"Slack"} description={`#${alertChannel.properties.channelName}`} + boxClassName="group-hover/table-row:bg-charcoal-800" /> ); } From b6d86828c24c5ffb43177bf5ff92155e6d6f3f76 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 18:02:39 +0000 Subject: [PATCH 49/88] Concurrency limits page now full width --- .../route.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx index b094460778..3dba82a7bf 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.concurrency/route.tsx @@ -62,7 +62,7 @@ export default function Page() { @@ -70,10 +70,10 @@ export default function Page() { - +
-
+
Environments {plan ? ( plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? ( From 26c20deff569eebfbdd1c8958b33c538f72e6603 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 18:12:14 +0000 Subject: [PATCH 50/88] Fixed function name label extending too far --- .../route.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx index b6ce6c08eb..12e3e74379 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx @@ -245,7 +245,7 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu
From 76c2d1df074b5b2072e28de9bfbc49e96279a883 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 18:15:00 +0000 Subject: [PATCH 51/88] Improved the button sizes on the replay modal --- apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx index b8af3646f8..589b686a5c 100644 --- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx @@ -129,12 +129,12 @@ function ReplayForm({ defaultValue={environment.id} items={environments} dropdownIcon - variant="tertiary/small" + variant="tertiary/medium" className="w-fit pl-1" text={(value) => { const env = environments.find((env) => env.id === value)!; return ( -
+
); @@ -152,11 +152,11 @@ function ReplayForm({
- + - } - defaultValue="help" - /> - ) : ( - - Upgrade for more concurrency - - ) - ) : null} -
- - - - Environment - Queued - Running - Concurrency limit - - - - }> - Error loading environments

}> - {(environments) => } - - - -
-
+
+ + + + Environment + Queued + Running + Concurrency limit + + + + }> + Error loading environments

}> + {(environments) => } + + + +
+ {plan ? ( + plan?.v3Subscription?.plan?.limits.concurrentRuns.canExceed ? ( +
+ + Need more concurrency? + + + Request more + + } + defaultValue="help" + /> +
+ ) : ( +
+ + + Upgrade for more concurrency + + + Upgrade + +
+ ) + ) : null}
From a8852df8ca7265bd3199f405427829902b078630 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 2 Nov 2024 22:07:26 +0000 Subject: [PATCH 56/88] Usage page tables now full width --- .../route.tsx | 38 ++++++++++++------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx index 3ab2d7f630..12fa2db12b 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx @@ -101,13 +101,13 @@ export default function Page() { - +
-
+
}> {(usage) => ( -
-
- +
+
+ {isCurrentMonth ? "Month-to-date" : "Usage"} - +

{formatCurrency(usage.overall.current, false)}

@@ -164,8 +164,10 @@ export default function Page() {
- Usage by day -
+ + Usage by day + +
@@ -187,7 +189,9 @@ export default function Page() {
- Tasks + + Tasks + }> -
- No runs for this period +
+ + No runs for this period +
@@ -248,7 +254,11 @@ export default function Page() { )} - + Dev environment runs are excluded from the usage data above, since they do not have an associated compute cost. From 4d41ab50f6bdfd073b5384dffb2f65f19c387788 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 13:15:00 +0000 Subject: [PATCH 57/88] Personal access token page using full width tables --- .../app/routes/account.tokens/route.tsx | 87 +++++++++++++------ 1 file changed, 59 insertions(+), 28 deletions(-) diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx index 4220f1ce68..edbaea6a38 100644 --- a/apps/webapp/app/routes/account.tokens/route.tsx +++ b/apps/webapp/app/routes/account.tokens/route.tsx @@ -1,6 +1,6 @@ import { conform, useForm } from "@conform-to/react"; import { parse } from "@conform-to/zod"; -import { ShieldCheckIcon } from "@heroicons/react/20/solid"; +import { ShieldCheckIcon, TrashIcon } from "@heroicons/react/20/solid"; import { ShieldExclamationIcon } from "@heroicons/react/24/solid"; import { Form, useActionData, useFetcher } from "@remix-run/react"; import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime"; @@ -27,10 +27,12 @@ import { TableBlankRow, TableBody, TableCell, + TableCellMenu, TableHeader, TableHeaderCell, TableRow, } from "~/components/primitives/Table"; +import { SimpleTooltip } from "~/components/primitives/Tooltip"; import { redirectWithSuccessMessage } from "~/models/message.server"; import { CreatedPersonalAccessToken, @@ -41,6 +43,7 @@ import { } from "~/services/personalAccessToken.server"; import { requireUserId } from "~/services/session.server"; import { personalAccessTokensPath } from "~/utils/pathBuilder"; +import { DialogClose } from "@radix-ui/react-dialog"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); @@ -139,9 +142,9 @@ export default function Page() { - -
- + +
+
Name @@ -168,15 +171,19 @@ export default function Page() { "Never" )} - - - + } + /> ); }) ) : ( - + You have no Personal Access Tokens (that haven't been revoked). @@ -249,6 +256,11 @@ function CreatePersonalAccessToken() { Update } + cancelButton={ + + + + } /> @@ -270,25 +282,44 @@ function RevokePersonalAccessToken({ token }: { token: ObfuscatedPersonalAccessT }); return ( - - - - - - - + + + + + + Revoke Personal Access Token +
+ + Are you sure you want to revoke "{token.name}"? This can't be reversed. + + + + + + + } + cancelButton={ + + + + } + /> +
+ + + } + content="Revoke token" + side="left" + disableHoverableContent + /> ); } From 1e9714b74f19d36d06bf945d2fddba5f6a6ef75d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 13:15:10 +0000 Subject: [PATCH 58/88] Small CSS fixes --- .../app/components/environments/RegenerateApiKeyModal.tsx | 1 - apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index 49a76a72e2..27aad1e652 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -99,7 +99,6 @@ const RegenerateApiKeyModalContent = ({ id, randomWord, title, closeModal }: Mod } cancelButton={} - className="border-t border-grid-bright pt-4" /> diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 95a7998e0e..070971c380 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -418,7 +418,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { From a4cb65786cce18ef6d155cb3b49f8bd32bf17bb6 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 13:30:55 +0000 Subject: [PATCH 59/88] Deployments page table now full width --- .../route.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx index ce065fcffe..ffeabc7f6f 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx @@ -16,7 +16,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons"; import { DateTime } from "~/components/primitives/DateTime"; import { Dialog, DialogTrigger } from "~/components/primitives/Dialog"; import { InfoPanel } from "~/components/primitives/InfoPanel"; -import { NavBar, PageTitle } from "~/components/primitives/PageHeader"; +import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader"; import { PaginationControls } from "~/components/primitives/Pagination"; import { Paragraph } from "~/components/primitives/Paragraph"; import { @@ -98,13 +98,22 @@ export default function Page() { + + + Deployments docs + + {hasDeployments ? (
-
+
@@ -212,7 +221,7 @@ export default function Page() { {deploymentParam && ( <> - + From 39db0e273028630f383ad315469eaf8c17f6fcd8 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 14:19:49 +0000 Subject: [PATCH 60/88] Deploy page scrolls properly and pagination stays on screen if table is scrollable --- .../app/components/primitives/Pagination.tsx | 10 +- .../route.tsx | 194 +++++++++--------- 2 files changed, 101 insertions(+), 103 deletions(-) diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx index a885fd323b..974eeca90c 100644 --- a/apps/webapp/app/components/primitives/Pagination.tsx +++ b/apps/webapp/app/components/primitives/Pagination.tsx @@ -20,14 +20,14 @@ export function PaginationControls({ } return ( -
- - - Deploy - Env - Version - Status - Tasks - Deployed at - Deployed by - Go to page - - - - {deployments.length > 0 ? ( - deployments.map((deployment) => { - const usernameForEnv = - user.id !== deployment.environment.userId - ? deployment.environment.userName - : undefined; - const path = v3DeploymentPath( - organization, - project, - deployment, - currentPage - ); - return ( - - -
+
+
+ + + Deploy + Env + Version + Status + Tasks + Deployed at + Deployed by + Go to page + + + + {deployments.length > 0 ? ( + deployments.map((deployment) => { + const usernameForEnv = + user.id !== deployment.environment.userId + ? deployment.environment.userName + : undefined; + const path = v3DeploymentPath( + organization, + project, + deployment, + currentPage + ); + return ( + + +
+ {deployment.shortCode} + {deployment.label && ( + {deployment.label} + )} +
+ + + + + {deployment.version} + + + + + {deployment.tasksCount !== null ? deployment.tasksCount : "–"} + + + {deployment.deployedAt ? ( + + ) : ( + "–" + )} + + + {deployment.deployedBy ? ( +
+ - {deployment.shortCode} + {deployment.deployedBy.name ?? + deployment.deployedBy.displayName} - {deployment.label && ( - {deployment.label} - )}
- - - - - {deployment.version} - - - - - {deployment.tasksCount !== null ? deployment.tasksCount : "–"} - - - {deployment.deployedAt ? ( - - ) : ( - "–" - )} - - - {deployment.deployedBy ? ( -
- - - {deployment.deployedBy.name ?? - deployment.deployedBy.displayName} - -
- ) : ( - "–" - )} - - - - ); - }) - ) : ( - - - No deploys match your filters - - - )} - -
-
+ ) : ( + "–" + )} + + + + ); + }) + ) : ( + + + No deploys match your filters + + + )} + + + {totalPages > 1 && ( +
-
+ )}
) : ( @@ -299,7 +297,7 @@ function DeploymentActionsCell({ Date: Sun, 3 Nov 2024 14:29:03 +0000 Subject: [PATCH 61/88] TableCellMenu using the correct popover --- .../route.tsx | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx index 3ae1431ee4..cc422c0f74 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx @@ -292,35 +292,40 @@ function DeploymentActionsCell({ } return ( - - {canRollback && ( - - - - - - - )} - {canRetryIndexing && ( - - - - - - - )} - + + {canRollback && ( + + + + + + + )} + {canRetryIndexing && ( + + + + + + + )} + + } + /> ); } From 0d7f5333a922c607d381123ec2df12956bdf3672 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 14:48:25 +0000 Subject: [PATCH 62/88] Added missing button variant --- apps/webapp/app/components/primitives/Buttons.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 302f8519ae..47d84485fa 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -124,6 +124,7 @@ const variant = { "danger/small": createVariant("small", "danger"), "danger/medium": createVariant("medium", "danger"), "danger/large": createVariant("large", "danger"), + "danger/extra-large": createVariant("extra-large", "danger"), "docs/small": createVariant("small", "docs"), "docs/medium": createVariant("medium", "docs"), "docs/large": createVariant("large", "docs"), From c2145aefbcba0979f515de9bc80e643bc8ae895d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 3 Nov 2024 15:03:06 +0000 Subject: [PATCH 63/88] =?UTF-8?q?Button=20group=20is=20now=20named=20so=20?= =?UTF-8?q?it=20doesn=E2=80=99t=20cause=20conflicts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/components/primitives/Buttons.tsx | 55 ++++++++++--------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 47d84485fa..f3b1ba1ecc 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -41,52 +41,52 @@ type Size = keyof typeof sizes; const theme = { primary: { textColor: - "text-charcoal-900 group-hover:text-charcoal-900 transition group-disabled:text-charcoal-900", + "text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900", button: - "bg-primary group-hover:bg-apple-200 group-disabled:opacity-50 group-disabled:bg-primary group-disabled:pointer-events-none", + "bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none", shortcut: - "border-black/40 text-charcoal-900 group-hover:border-black/60 group-hover:text-charcoal-900", + "border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900", icon: "text-charcoal-900", }, secondary: { - textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", + textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80", button: - "bg-secondary group-hover:bg-charcoal-600 group-hover:border-charcoal-650 border border-charcoal-600 group-disabled:bg-secondary group-disabled:opacity-60 group-disabled:pointer-events-none", + "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-650 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none", shortcut: - "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", + "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed", icon: "text-text-bright", }, tertiary: { - textColor: "text-text-bright transition group-disabled:text-text-dimmed/80", + textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80", button: - "bg-tertiary group-hover:bg-charcoal-600 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", + "bg-tertiary group-hover/button:bg-charcoal-600 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none", shortcut: - "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", + "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed", icon: "text-text-bright", }, minimal: { textColor: - "text-text-dimmed group-hover:text-text-bright transition group-disabled:text-text-dimmed/80", + "text-text-dimmed group-hover/button:text-text-bright transition group-disabled/button:text-text-dimmed/80", button: - "bg-transparent group-hover:bg-tertiary disabled:opacity-50 group-disabled:bg-transparent group-disabled:pointer-events-none", + "bg-transparent group-hover/button:bg-tertiary disabled:opacity-50 group-disabled/button:bg-transparent group-disabled/button:pointer-events-none", shortcut: - "border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60", + "border-dimmed/40 text-text-dimmed group-hover/button:text-text-bright/80 group-hover/button:border-dimmed/60", icon: "text-text-dimmed", }, danger: { textColor: - "text-text-bright group-hover:text-white transition group-disabled:text-text-bright/80", + "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-bright/80", button: - "bg-error group-hover:bg-rose-500 disabled:opacity-50 group-disabled:bg-error group-disabled:pointer-events-none", - shortcut: "border-text-bright text-text-bright group-hover:border-bright/60", + "bg-error group-hover/button:bg-rose-500 disabled:opacity-50 group-disabled/button:bg-error group-disabled/button:pointer-events-none", + shortcut: "border-text-bright text-text-bright group-hover/button:border-bright/60", icon: "text-text-bright", }, docs: { - textColor: "text-blue-200/70 transition group-disabled:text-text-dimmed/80", + textColor: "text-blue-200/70 transition group-disabled/button:text-text-dimmed/80", button: - "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover:bg-charcoal-650 group-disabled:bg-tertiary group-disabled:opacity-60 group-disabled:pointer-events-none", + "bg-charcoal-700 border border-charcoal-600/50 shadow group-hover/button:bg-charcoal-650 group-disabled/button:bg-tertiary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none", shortcut: - "border-text-dimmed/40 text-text-dimmed group-hover:text-text-bright group-hover:border-text-dimmed", + "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed", icon: "text-blue-500", }, }; @@ -131,7 +131,8 @@ const variant = { "docs/extra-large": createVariant("extra-large", "docs"), "menu-item": { textColor: "text-text-bright px-1", - button: "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-750", + button: + "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover/button:bg-charcoal-750", icon: "h-5", iconSpacing: "gap-x-0.5", shortcutVariant: undefined, @@ -140,7 +141,7 @@ const variant = { "small-menu-item": { textColor: "text-text-bright", button: - "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750", + "h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750", icon: "h-4", iconSpacing: "gap-x-1.5", shortcutVariant: undefined, @@ -149,7 +150,7 @@ const variant = { "small-menu-sub-item": { textColor: "text-text-dimmed", button: - "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750 focus-custom", + "h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover/button:bg-charcoal-750 focus-custom", icon: undefined, iconSpacing: undefined, shortcutVariant: undefined, @@ -158,7 +159,7 @@ const variant = { }; const allVariants = { - $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none focus-custom", + $all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus/button:outline-none group-disabled/button:opacity-75 group-disabled/button:pointer-events-none focus-custom", variant: variant, }; @@ -294,7 +295,7 @@ export const Button = forwardRef( return ( +
+ + or + + Run a test + +
); From 3fe3792166157c29b784683554acb3bb645bf847 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 10:18:11 +0000 Subject: [PATCH 67/88] Make the table sticky cell buttons more obvious --- .../app/components/primitives/Popover.tsx | 2 +- .../app/components/primitives/Table.tsx | 10 ++-- .../app/components/runs/v3/TaskRunsTable.tsx | 4 +- .../route.tsx | 57 ++++++++++++++----- 4 files changed, 53 insertions(+), 20 deletions(-) diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx index 6d425928b5..95c4d92e8a 100644 --- a/apps/webapp/app/components/primitives/Popover.tsx +++ b/apps/webapp/app/components/primitives/Popover.tsx @@ -190,7 +190,7 @@ function PopoverVerticalEllipseTrigger({ diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index ad12d5383b..f3d8cf2fdc 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -277,19 +277,21 @@ export const TableCellMenu = forwardRef< hasAction={true} >
-
+
{/* Hidden buttons that show on hover */} {hiddenButtons && ( -
{hiddenButtons}
+
+ {hiddenButtons} +
)} {/* Always visible buttons */} {visibleButtons} - {/* Always visible opover with ellipsis trigger */} + {/* Always visible popover with ellipsis trigger */} {popoverContent && ( setIsOpen(open)}>
{popoverContent}
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 069e8cc2b1..6cb5efcca4 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -2,7 +2,9 @@ import { ArrowPathIcon, ClockIcon, CpuChipIcon, + NoSymbolIcon, RectangleStackIcon, + StopCircleIcon, StopIcon, } from "@heroicons/react/20/solid"; import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid"; @@ -420,7 +422,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { asChild className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright" > - + + + + + } hiddenButtons={ - - Test - + + } + content="Test" + side="left" + disableHoverableContent + /> } /> From e6de2530ececf4340459e48d49f5ec2a2bb6827b Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 10:28:20 +0000 Subject: [PATCH 68/88] Env var page now using the new popover menu --- .../route.tsx | 23 ++++++++++++------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx index e60b2f8234..7c830321f6 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.environment-variables/route.tsx @@ -246,14 +246,19 @@ export default function Page() { ); })} - - - - + + + + + } + > )) ) : ( @@ -470,6 +475,8 @@ function DeleteEnvironmentVariableButton({ value="delete" type="submit" variant="small-menu-item" + fullWidth + textAlignLeft LeadingIcon={TrashIcon} leadingIconClassName="text-rose-500" className="text-xs" From ce442b1735aee82aab1cd5019f80a5bd8fcba906 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 11:33:45 +0000 Subject: [PATCH 69/88] Improved the menu items --- .../app/components/primitives/Table.tsx | 2 +- .../app/components/runs/v3/TaskRunsTable.tsx | 67 +++++++++++++++++-- 2 files changed, 64 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index f3d8cf2fdc..4384ba1273 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -277,7 +277,7 @@ export const TableCellMenu = forwardRef< hasAction={true} >
-
+
{/* Hidden buttons that show on hover */} {hiddenButtons && (
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 6cb5efcca4..863e369f37 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -1,11 +1,10 @@ import { ArrowPathIcon, + ArrowRightIcon, ClockIcon, CpuChipIcon, NoSymbolIcon, RectangleStackIcon, - StopCircleIcon, - StopIcon, } from "@heroicons/react/20/solid"; import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid"; import { useLocation } from "@remix-run/react"; @@ -16,6 +15,7 @@ import { Button, LinkButton } from "~/components/primitives/Buttons"; import { Checkbox } from "~/components/primitives/Checkbox"; import { Dialog, DialogTrigger } from "~/components/primitives/Dialog"; import { Header3 } from "~/components/primitives/Headers"; +import { PopoverMenuItem } from "~/components/primitives/Popover"; import { useSelectedItems } from "~/components/primitives/SelectedItemsProvider"; import { SimpleTooltip } from "~/components/primitives/Tooltip"; import { useEnvironments } from "~/hooks/useEnvironments"; @@ -412,9 +412,65 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { return ( + + {!run.isCancellable && ( + + + + + + + )} + {run.isReplayable && ( + + + + + + + )} + + } hiddenButtons={ -
- {run.isCancellable && ( +
+ {!run.isCancellable && ( @@ -435,6 +491,9 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { disableHoverableContent /> )} + {!run.isCancellable && run.isReplayable && ( +
+ )} {run.isReplayable && ( Date: Wed, 6 Nov 2024 11:33:51 +0000 Subject: [PATCH 70/88] Copy tweak --- .../route.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index 17deed95d2..11b88f30b8 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -303,7 +303,7 @@ export default function Page() { // task.environments[0].slug // )} to={v3TestPath(organization, project)} - title="Test" + title="Test task" /> } @@ -324,7 +324,7 @@ export default function Page() { to={v3TestPath(organization, project)} /> } - content="Test" + content="Test task" side="left" disableHoverableContent /> From a20136ec0266a843ff1b8ddf880559f521aa7227 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 11:52:26 +0000 Subject: [PATCH 71/88] Made the icons bright on hover --- apps/webapp/app/components/primitives/Table.tsx | 5 ++++- apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 4384ba1273..88a8c1cac1 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -289,7 +289,10 @@ export const TableCellMenu = forwardRef< {/* Always visible popover with ellipsis trigger */} {popoverContent && ( setIsOpen(open)}> - + - {!run.isCancellable && ( + {run.isCancellable && ( - {!run.isCancellable && ( + {run.isCancellable && ( @@ -491,7 +491,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { disableHoverableContent /> )} - {!run.isCancellable && run.isReplayable && ( + {run.isCancellable && run.isReplayable && (
)} {run.isReplayable && ( @@ -500,7 +500,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { From afa5636919734bc61e428ad00ba0819b752c6572 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 11:52:43 +0000 Subject: [PATCH 72/88] Updated the cancel run dialog --- .../components/runs/v3/CancelRunDialog.tsx | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx index 40be25ec74..7fe2e66bf8 100644 --- a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx @@ -1,4 +1,6 @@ import { StopCircleIcon } from "@heroicons/react/20/solid"; +import { NoSymbolIcon } from "@heroicons/react/24/solid"; +import { DialogClose } from "@radix-ui/react-dialog"; import { Form, useFetcher, useNavigation } from "@remix-run/react"; import { Button } from "~/components/primitives/Buttons"; import { @@ -7,6 +9,8 @@ import { DialogFooter, DialogHeader, } from "~/components/primitives/Dialog"; +import { FormButtons } from "~/components/primitives/FormButtons"; +import { Paragraph } from "~/components/primitives/Paragraph"; type CancelRunDialogProps = { runFriendlyId: string; @@ -22,24 +26,35 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog return ( Cancel this run? - - Canceling a run will stop execution, along with any executing subtasks. - - -
- -
- +
+ + Canceling a run will stop execution, along with any executing subtasks. + + + + + + } + cancelButton={ + + + + } + /> + +
); } From ac162ec91c687ad98d428fd30a3b8af86b07d5ad Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 6 Nov 2024 11:58:51 +0000 Subject: [PATCH 73/88] Improved the API keys sticky menu behaviour --- .../app/components/environments/RegenerateApiKeyModal.tsx | 6 ++++-- .../route.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx index 27aad1e652..ff94af7b01 100644 --- a/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx +++ b/apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx @@ -29,8 +29,10 @@ export function RegenerateApiKeyModal({ id, title }: ModalProps) { @@ -478,8 +471,8 @@ function DeleteEnvironmentVariableButton({ fullWidth textAlignLeft LeadingIcon={TrashIcon} - leadingIconClassName="text-rose-500" - className="text-xs" + leadingIconClassName="text-rose-500 group-hover/button:text-text-bright transition-colors" + className="transition-colors group-hover/button:bg-error" > {isLoading ? "Deleting" : "Delete"} From eabeadd23579e001613a2d114816fc8754ecde48 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:11:02 +0000 Subject: [PATCH 76/88] Fixed weird Dialog text styling --- apps/webapp/app/components/primitives/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx index 58b6bb1bb9..24c23bd261 100644 --- a/apps/webapp/app/components/primitives/Dialog.tsx +++ b/apps/webapp/app/components/primitives/Dialog.tsx @@ -106,7 +106,7 @@ const DialogDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )); From cc76688f16a0042b36b513b9f7ef8872662e7a22 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:11:31 +0000 Subject: [PATCH 77/88] Schedules page blank state using correct docs button style --- .../route.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx index 316852d841..05d0eab6dd 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.schedules/route.tsx @@ -289,13 +289,18 @@ function CreateScheduledTaskInstructions() { icon={ClockIcon} iconClassName="text-sun-500" panelClassName="max-w-full" - to={docsPath("v3/tasks-scheduled")} - buttonLabel="Schedules docs" > - + You have no scheduled tasks in your project. Before you can schedule a task you need to create a schedules.task. + + View the docs + ); From 638f959fedfba83e6b0dbf45c56bc75c73ab5753 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:14:11 +0000 Subject: [PATCH 78/88] Copy tweak --- apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index 605f598b4a..03d2e822f5 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -457,7 +457,7 @@ function RunActionsCell({ run, path }: { run: RunListItem; path: string }) { textAlignLeft className="w-full px-1.5 py-[0.9rem]" > - Replay run + Replay run… Date: Thu, 7 Nov 2024 09:25:54 +0000 Subject: [PATCH 79/88] Menu buttons styled correctly --- .../route.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx index cc422c0f74..971e81aa7d 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments/route.tsx @@ -299,7 +299,13 @@ function DeploymentActionsCell({ {canRollback && ( - @@ -313,7 +319,13 @@ function DeploymentActionsCell({ {canRetryIndexing && ( - From 7f993c246923dafd60fffa23371fdb0ef174baa4 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:26:19 +0000 Subject: [PATCH 80/88] Added close buttons to the deploy dialogs --- .../components/runs/v3/RetryDeploymentIndexingDialog.tsx | 6 +++++- .../app/components/runs/v3/RollbackDeploymentDialog.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx index 7169ef85a9..d689a874e8 100644 --- a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx +++ b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx @@ -1,4 +1,5 @@ import { ArrowPathIcon } from "@heroicons/react/20/solid"; +import { DialogClose } from "@radix-ui/react-dialog"; import { Form, useNavigation } from "@remix-run/react"; import { Button } from "~/components/primitives/Buttons"; import { @@ -33,6 +34,9 @@ export function RetryDeploymentIndexingDialog({ any errors and re-deploy. + + +
+ + + Date: Thu, 7 Nov 2024 09:26:49 +0000 Subject: [PATCH 81/88] Made the Dialog footer match the Form footer style --- apps/webapp/app/components/primitives/Dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx index 24c23bd261..5e67afab77 100644 --- a/apps/webapp/app/components/primitives/Dialog.tsx +++ b/apps/webapp/app/components/primitives/Dialog.tsx @@ -82,7 +82,7 @@ DialogHeader.displayName = "DialogHeader"; const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
); From 4db88cc4e792aefd794f306eb49a26480f93205d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:52:23 +0000 Subject: [PATCH 82/88] Fixed feedback form buttons --- apps/webapp/app/components/Feedback.tsx | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/apps/webapp/app/components/Feedback.tsx b/apps/webapp/app/components/Feedback.tsx index 5a5472a976..814f7bc047 100644 --- a/apps/webapp/app/components/Feedback.tsx +++ b/apps/webapp/app/components/Feedback.tsx @@ -18,6 +18,7 @@ import { Paragraph } from "./primitives/Paragraph"; import { Select, SelectItem } from "./primitives/Select"; import { TextArea } from "./primitives/TextArea"; import { TextLink } from "./primitives/TextLink"; +import { DialogClose } from "@radix-ui/react-dialog"; type FeedbackProps = { button: ReactNode; @@ -120,16 +121,18 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) { {message.error} {form.error} -
- - Send message - - } - /> -
+ + Send message + + } + cancelButton={ + + + + } + />
From 87c7eb94172d7472f491da01127a11ef3bb6c75e Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 7 Nov 2024 09:53:56 +0000 Subject: [PATCH 83/88] Fixed cancel run dialog --- .../components/runs/v3/CancelRunDialog.tsx | 46 +++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx index 7fe2e66bf8..d4264886b7 100644 --- a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx @@ -30,30 +30,28 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog Canceling a run will stop execution, along with any executing subtasks. - - - - - } - cancelButton={ - - - - } - /> - + + + + } + cancelButton={ + + + + } + />
); From 4c2890a1f3995e1fa31456daaa96ff6d0cbb891d Mon Sep 17 00:00:00 2001 From: Matt Aitken Date: Fri, 15 Nov 2024 18:43:36 +0000 Subject: [PATCH 84/88] Test page uses the taskIdentifier in the path --- .../app/presenters/v3/TestPresenter.server.ts | 4 +- .../presenters/v3/TestTaskPresenter.server.ts | 183 +++++++++++------- .../route.tsx | 54 ++++-- .../route.tsx | 38 +++- apps/webapp/app/utils/pathBuilder.ts | 10 +- 5 files changed, 192 insertions(+), 97 deletions(-) diff --git a/apps/webapp/app/presenters/v3/TestPresenter.server.ts b/apps/webapp/app/presenters/v3/TestPresenter.server.ts index 328534e056..541a45512f 100644 --- a/apps/webapp/app/presenters/v3/TestPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/TestPresenter.server.ts @@ -113,10 +113,10 @@ export class TestPresenter extends BasePresenter { triggerSource: TaskTriggerSource; }[] >`WITH workers AS ( - SELECT + SELECT bw.*, ROW_NUMBER() OVER(ORDER BY string_to_array(bw.version, '.')::int[] DESC) AS rn - FROM + FROM ${sqlDatabaseSchema}."BackgroundWorker" bw WHERE "runtimeEnvironmentId" = ${envId} ), diff --git a/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts b/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts index 2b90b53706..779b904263 100644 --- a/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts @@ -1,13 +1,15 @@ import { ScheduledTaskPayload, parsePacket, prettyPrintPacket } from "@trigger.dev/core/v3"; -import { RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database"; +import { BackgroundWorkerTask, RuntimeEnvironmentType, TaskRunStatus } from "@trigger.dev/database"; import { PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server"; import { getTimezones } from "~/utils/timezones.server"; import { getUsername } from "~/utils/username"; +import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server"; type TestTaskOptions = { userId: string; projectSlug: string; - taskFriendlyId: string; + environmentSlug: string; + taskIdentifier: string; }; type Task = { @@ -37,6 +39,15 @@ export type TestTask = runs: ScheduledRun[]; }; +export type TestTaskResult = + | { + foundTask: true; + task: TestTask; + } + | { + foundTask: false; + }; + type RawRun = { id: string; number: BigInt; @@ -71,55 +82,79 @@ export class TestTaskPresenter { this.#prismaClient = prismaClient; } - public async call({ userId, projectSlug, taskFriendlyId }: TestTaskOptions): Promise { - const task = await this.#prismaClient.backgroundWorkerTask.findFirstOrThrow({ + public async call({ + userId, + projectSlug, + environmentSlug, + taskIdentifier, + }: TestTaskOptions): Promise { + const environment = await this.#prismaClient.runtimeEnvironment.findFirstOrThrow({ + where: { + slug: environmentSlug, + project: { + slug: projectSlug, + }, + orgMember: environmentSlug === "dev" ? { userId } : undefined, + }, select: { id: true, - filePath: true, - exportName: true, - slug: true, - triggerSource: true, - runtimeEnvironment: { + type: true, + orgMember: { select: { - id: true, - type: true, - orgMember: { + user: { select: { - user: { - select: { - id: true, - name: true, - displayName: true, - }, - }, + id: true, + name: true, + displayName: true, }, }, }, }, }, - where: { - friendlyId: taskFriendlyId, - }, }); + let task: BackgroundWorkerTask | null = null; + if (environment.type !== "DEVELOPMENT") { + const deployment = await findCurrentWorkerDeployment(environment.id); + if (deployment) { + task = deployment.worker?.tasks.find((t) => t.slug === taskIdentifier) ?? null; + } + } else { + task = await this.#prismaClient.backgroundWorkerTask.findFirst({ + where: { + slug: taskIdentifier, + runtimeEnvironmentId: environment.id, + }, + orderBy: { + createdAt: "desc", + }, + }); + } + + if (!task) { + return { + foundTask: false, + }; + } + const latestRuns = await this.#prismaClient.$queryRaw` WITH taskruns AS ( - SELECT - tr.* - FROM + SELECT + tr.* + FROM ${sqlDatabaseSchema}."TaskRun" as tr JOIN ${sqlDatabaseSchema}."BackgroundWorkerTask" as bwt ON tr."taskIdentifier" = bwt.slug WHERE - bwt."friendlyId" = ${taskFriendlyId} AND - tr."runtimeEnvironmentId" = ${task.runtimeEnvironment.id} - ORDER BY + bwt."friendlyId" = ${task.friendlyId} AND + tr."runtimeEnvironmentId" = ${environment.id} + ORDER BY tr."createdAt" DESC LIMIT 5 ) - SELECT + SELECT taskr.id, taskr.number, taskr."friendlyId", @@ -131,7 +166,7 @@ export class TestTaskPresenter { taskr."seedMetadata", taskr."seedMetadataType", taskr."runtimeEnvironmentId" - FROM + FROM taskruns AS taskr WHERE taskr."payloadType" = 'application/json' OR taskr."payloadType" = 'application/super+json' @@ -143,58 +178,64 @@ export class TestTaskPresenter { taskIdentifier: task.slug, filePath: task.filePath, exportName: task.exportName, - friendlyId: taskFriendlyId, + friendlyId: task.friendlyId, environment: { - id: task.runtimeEnvironment.id, - type: task.runtimeEnvironment.type, - userId: task.runtimeEnvironment.orgMember?.user.id, - userName: getUsername(task.runtimeEnvironment.orgMember?.user), + id: environment.id, + type: environment.type, + userId: environment.orgMember?.user.id, + userName: getUsername(environment.orgMember?.user), }, }; switch (task.triggerSource) { case "STANDARD": return { - triggerSource: "STANDARD", - task: taskWithEnvironment, - runs: await Promise.all( - latestRuns.map(async (r) => { - const number = Number(r.number); - - return { - ...r, - number, - payload: await prettyPrintPacket(r.payload, r.payloadType), - metadata: r.seedMetadata - ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType) - : undefined, - }; - }) - ), - }; - case "SCHEDULED": - const possibleTimezones = getTimezones(); - return { - triggerSource: "SCHEDULED", - task: taskWithEnvironment, - possibleTimezones, - runs: ( - await Promise.all( + foundTask: true, + task: { + triggerSource: "STANDARD", + task: taskWithEnvironment, + runs: await Promise.all( latestRuns.map(async (r) => { const number = Number(r.number); - const payload = await getScheduleTaskRunPayload(r); - - if (payload.success) { - return { - ...r, - number, - payload: payload.data, - }; - } + return { + ...r, + number, + payload: await prettyPrintPacket(r.payload, r.payloadType), + metadata: r.seedMetadata + ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType) + : undefined, + }; }) - ) - ).filter(Boolean), + ), + }, + }; + case "SCHEDULED": + const possibleTimezones = getTimezones(); + return { + foundTask: true, + task: { + triggerSource: "SCHEDULED", + task: taskWithEnvironment, + possibleTimezones, + runs: ( + await Promise.all( + latestRuns.map(async (r) => { + const number = Number(r.number); + + const payload = await getScheduleTaskRunPayload(r); + + if (payload.success) { + return { + ...r, + number, + payload: payload.data, + }; + } + }) + ) + ).filter(Boolean), + }, }; } } diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx index 864030c302..5a0c3efb7b 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test.tasks.$taskParam/route.tsx @@ -5,7 +5,7 @@ import { Form, useActionData, useSubmit } from "@remix-run/react"; import { ActionFunction, LoaderFunctionArgs, json } from "@remix-run/server-runtime"; import { TaskRunStatus } from "@trigger.dev/database"; import { useCallback, useEffect, useRef, useState } from "react"; -import { typedjson, useTypedLoaderData } from "remix-typedjson"; +import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson"; import { JSONEditor } from "~/components/code/JSONEditor"; import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel"; import { Button } from "~/components/primitives/Buttons"; @@ -32,7 +32,11 @@ import { TextLink } from "~/components/primitives/TextLink"; import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus"; import { TimezoneList } from "~/components/scheduled/timezones"; import { useSearchParams } from "~/hooks/useSearchParam"; -import { redirectBackWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server"; +import { + redirectBackWithErrorMessage, + redirectWithErrorMessage, + redirectWithSuccessMessage, +} from "~/models/message.server"; import { ScheduledRun, StandardRun, @@ -42,7 +46,7 @@ import { import { logger } from "~/services/logger.server"; import { requireUserId } from "~/services/session.server"; import { cn } from "~/utils/cn"; -import { docsPath, v3RunSpanPath, v3TaskParamsSchema } from "~/utils/pathBuilder"; +import { docsPath, v3RunSpanPath, v3TaskParamsSchema, v3TestPath } from "~/utils/pathBuilder"; import { TestTaskService } from "~/v3/services/testTask.server"; import { OutOfEntitlementError } from "~/v3/services/triggerTask.server"; import { TestTaskData } from "~/v3/testTask"; @@ -51,14 +55,30 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); const { projectParam, organizationSlug, taskParam } = v3TaskParamsSchema.parse(params); - const presenter = new TestTaskPresenter(); - const result = await presenter.call({ - userId, - projectSlug: projectParam, - taskFriendlyId: taskParam, - }); + //need an environment + const searchParams = new URL(request.url).searchParams; + const environment = searchParams.get("environment"); + if (!environment) { + return redirect(v3TestPath({ slug: organizationSlug }, { slug: projectParam })); + } - return typedjson(result); + const presenter = new TestTaskPresenter(); + try { + const result = await presenter.call({ + userId, + projectSlug: projectParam, + taskIdentifier: taskParam, + environmentSlug: environment, + }); + + return typedjson(result); + } catch (error) { + return redirectWithErrorMessage( + v3TestPath({ slug: organizationSlug }, { slug: projectParam }, environment), + request, + `Couldn't load test page for ${taskParam}` + ); + } }; export const action: ActionFunction = async ({ request, params }) => { @@ -113,16 +133,20 @@ export const action: ActionFunction = async ({ request, params }) => { export default function Page() { const result = useTypedLoaderData(); - switch (result.triggerSource) { + if (!result.foundTask) { + return
; + } + + switch (result.task.triggerSource) { case "STANDARD": { - return ; + return ; } case "SCHEDULED": { return ( ); } diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx index 12e3e74379..57c10df9ff 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx @@ -78,13 +78,13 @@ export default function Page() { const navigation = useNavigation(); const location = useLocation(); - const locationSearchParams = new URLSearchParams(location.search); - const navigationSearchParams = new URLSearchParams(navigation.location?.search); + const currentEnvironment = new URLSearchParams(location.search).get("environment"); + const pendingEnvironment = new URLSearchParams(navigation.location?.search).get("environment"); const isLoadingTasks = navigation.state === "loading" && navigation.location.pathname === location.pathname && - navigationSearchParams.get("environment") !== locationSearchParams.get("environment"); + currentEnvironment !== pendingEnvironment; return ( @@ -117,7 +117,16 @@ export default function Page() { : "border-grid-bright text-text-dimmed transition hover:border-charcoal-600 hover:text-text-bright" )} key={env.id} - to={v3TestPath(organization, project, env.slug)} + to={ + taskParam + ? v3TestTaskPath( + organization, + project, + { taskIdentifier: taskParam }, + env.slug + ) + : v3TestPath(organization, project, env.slug) + } > {environmentTitle(env)} @@ -140,6 +149,7 @@ export default function Page() { )}
@@ -162,14 +172,24 @@ export default function Page() { function TaskSelector({ tasks, environmentSlug, + activeTaskIdentifier, }: { tasks: TaskListItem[]; environmentSlug: string; + activeTaskIdentifier?: string; }) { const { filterText, setFilterText, filteredItems } = useFilterTasks({ tasks }); + const hasTaskInEnvironment = activeTaskIdentifier + ? tasks.some((t) => t.taskIdentifier === activeTaskIdentifier) + : undefined; return ( -
+
setFilterText(e.target.value)} />
+ {hasTaskInEnvironment === false && ( +
+ + There is no task {activeTaskIdentifier} in the selected environment. + +
+ )} @@ -224,6 +251,7 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu const path = v3TestTaskPath(organization, project, task, environmentSlug); const { isActive, isPending } = useLinkStatus(path); + return ( ; export type EventForPath = Pick; export type WebhookForPath = Pick; export type HttpEndpointForPath = Pick; -export type TaskForPath = Pick; +export type TaskForPath = { + taskIdentifier: string; +}; export type v3RunForPath = Pick; export type v3SpanForPath = Pick; export type DeploymentForPath = Pick; @@ -362,9 +364,9 @@ export function v3TestTaskPath( task: TaskForPath, environmentSlug: string ) { - return `${v3TestPath(organization, project)}/tasks/${ - task.friendlyId - }?environment=${environmentSlug}`; + return `${v3TestPath(organization, project)}/tasks/${encodeURIComponent( + task.taskIdentifier + )}?environment=${environmentSlug}`; } export function v3RunsPath( From 9dfa995123bfdcc7d11d162383d451275e664198 Mon Sep 17 00:00:00 2001 From: Matt Aitken Date: Fri, 15 Nov 2024 19:22:10 +0000 Subject: [PATCH 85/88] Test task button working --- .../route.tsx | 59 +++++++++---------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx index 11b88f30b8..e8738659cc 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx @@ -203,6 +203,24 @@ export default function Page() { const path = v3RunsPath(organization, project, { tasks: [task.slug], }); + + const devYouEnvironment = task.environments.find( + (e) => e.type === "DEVELOPMENT" && !e.userName + ); + const firstDeployedEnvironment = task.environments + .filter((e) => e.type !== "DEVELOPMENT") + .at(0); + const testEnvironment = devYouEnvironment ?? firstDeployedEnvironment; + + const testPath = testEnvironment + ? v3TestTaskPath( + organization, + project, + { taskIdentifier: task.slug }, + testEnvironment.slug + ) + : v3TestPath(organization, project); + return ( @@ -293,41 +311,18 @@ export default function Page() { title="View runs" leadingIconClassName="text-teal-500" /> - + } hiddenButtons={ - - } - content="Test task" - side="left" - disableHoverableContent - /> + + Test + } /> From 63be29f0bf2e69c21df3b20526b86a744f30f21d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sat, 16 Nov 2024 12:50:35 +0000 Subject: [PATCH 86/88] Added Spline component for 404 logo to remove spline logo --- apps/webapp/app/components/ErrorDisplay.tsx | 8 ++--- apps/webapp/package.json | 3 +- pnpm-lock.yaml | 38 ++++++++++++++++++++- 3 files changed, 41 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/ErrorDisplay.tsx b/apps/webapp/app/components/ErrorDisplay.tsx index ecd19c97b6..fb2be3cfeb 100644 --- a/apps/webapp/app/components/ErrorDisplay.tsx +++ b/apps/webapp/app/components/ErrorDisplay.tsx @@ -5,6 +5,7 @@ import { friendlyErrorDisplay } from "~/utils/httpErrors"; import { LinkButton } from "./primitives/Buttons"; import { Header1 } from "./primitives/Headers"; import { Paragraph } from "./primitives/Paragraph"; +import Spline from "@splinetool/react-spline"; type ErrorDisplayOptions = { button?: { @@ -55,18 +56,13 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) { {button ? button.title : "Go to homepage"} -
-