diff --git a/apps/webapp/app/components/events/EventsTable.tsx b/apps/webapp/app/components/events/EventsTable.tsx index c80de1d96a..fd54902855 100644 --- a/apps/webapp/app/components/events/EventsTable.tsx +++ b/apps/webapp/app/components/events/EventsTable.tsx @@ -52,19 +52,17 @@ export function EventsTable({ return ( - - Event - Env - Received Time - Delivery Time - Delivered - Canceled Time - Test - Runs - - Go to page - - + Event + Env + Received Time + Delivery Time + Delivered + Canceled Time + Test + Runs + + Go to page + {total === 0 && !hasFilters ? ( diff --git a/apps/webapp/app/components/jobs/JobsTable.tsx b/apps/webapp/app/components/jobs/JobsTable.tsx index 451fa9b868..fa42e667fd 100644 --- a/apps/webapp/app/components/jobs/JobsTable.tsx +++ b/apps/webapp/app/components/jobs/JobsTable.tsx @@ -31,15 +31,13 @@ export function JobsTable({ jobs, noResultsText }: { jobs: ProjectJob[]; noResul return (
- - Job - ID - Integrations - Properties - Last run - Status - Go to page - + Job + ID + Integrations + Properties + Last run + Status + Go to page {jobs.length > 0 ? ( diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx index a78d11ed3c..7cb4b8a32d 100644 --- a/apps/webapp/app/components/primitives/Input.tsx +++ b/apps/webapp/app/components/primitives/Input.tsx @@ -4,7 +4,7 @@ import { cn } from "~/utils/cn"; import { Icon, RenderIcon } from "./Icon"; const containerBase = - "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-text-link has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text"; + "has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text"; const inputBase = "h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none"; @@ -17,27 +17,27 @@ const variants = { container: "px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650", input: "px-2 text-sm", - iconSize: "h-4 w-4 ml-1", + iconSize: "size-4 ml-1", shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none", }, medium: { container: "px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650", input: "px-1.5 rounded text-sm", - iconSize: "h-4 w-4 ml-0.5", + iconSize: "size-4 ml-0.5", shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]", }, small: { container: "px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650", input: "px-1 rounded text-xs", - iconSize: "h-3 w-3 ml-0.5", + iconSize: "size-3 ml-0.5", shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]", }, tertiary: { container: "px-1 h-6 w-full rounded hover:bg-charcoal-750", input: "px-1 rounded text-xs", - iconSize: "h-3 w-3 ml-0.5", + iconSize: "size-3 ml-0.5", shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]", }, }; diff --git a/apps/webapp/app/components/primitives/SimpleSelect.tsx b/apps/webapp/app/components/primitives/SimpleSelect.tsx index 61ea34133f..d7b9e4cccb 100644 --- a/apps/webapp/app/components/primitives/SimpleSelect.tsx +++ b/apps/webapp/app/components/primitives/SimpleSelect.tsx @@ -29,7 +29,7 @@ const SelectTrigger = React.forwardRef< ( - ({ className, containerClassName, children, fullWidth }, ref) => { +// Add TableContext +const TableContext = createContext<{ variant: TableVariant }>({ variant: "dimmed" }); + +export const Table = forwardRef( + ({ className, containerClassName, children, fullWidth, variant = "dimmed" }, ref) => { return ( -
-
- {children} -
- + +
+ + {children} +
+
+ ); } ); @@ -33,19 +61,22 @@ export const Table = forwardRef( type TableHeaderProps = { className?: string; children: ReactNode; + variant?: TableVariant; }; -export const TableHeader = forwardRef( +export const TableHeader = forwardRef>( ({ className, children }, ref) => { + const { variant } = useContext(TableContext); return ( - {children} + {children} ); } @@ -71,17 +102,19 @@ type TableRowProps = { children: ReactNode; disabled?: boolean; isSelected?: boolean; + variant?: TableVariant; }; -export const TableRow = forwardRef( +export const TableRow = forwardRef>( ({ className, disabled, isSelected, children }, ref) => { + const { variant } = useContext(TableContext); return ( @@ -94,7 +127,7 @@ export const TableRow = forwardRef( type TableCellBasicProps = { className?: string; alignment?: "left" | "center" | "right"; - children: ReactNode; + children?: ReactNode; colSpan?: number; }; @@ -125,6 +158,7 @@ export const TableHeaderCell = forwardRef {hiddenLabel ? ( {children} @@ -147,25 +181,14 @@ type TableCellProps = TableCellBasicProps & { hasAction?: boolean; isSticky?: boolean; actionClassName?: string; - rowHoverStyle?: keyof typeof rowHoverStyles; + rowHoverStyle?: string; isSelected?: boolean; + isTabbableCell?: boolean; + variant?: TableVariant; + children?: ReactNode; }; -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: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 = - "sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto"; - -const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750"; - -export const TableCell = forwardRef( +export const TableCell = forwardRef>( ( { className, @@ -177,8 +200,8 @@ export const TableCell = forwardRef( onClick, hasAction = false, isSticky = false, - rowHoverStyle = "default", isSelected, + isTabbableCell = false, }, ref ) => { @@ -193,34 +216,47 @@ export const TableCell = forwardRef( } const flexClasses = cn( - "flex w-full whitespace-nowrap px-3 py-3 text-xs text-text-dimmed", + "flex w-full whitespace-nowrap px-3 py-3 items-center text-xs text-text-dimmed", alignment === "left" ? "justify-start text-left" : alignment === "center" ? "justify-center text-center" : "justify-end text-right" ); + const { variant } = useContext(TableContext); return ( {to ? ( - + {children} ) : onClick ? ( - ) : ( @@ -258,7 +294,7 @@ export const TableCellChevron = forwardRef< export const TableCellMenu = forwardRef< HTMLTableCellElement, - { + Omit & { className?: string; isSticky?: boolean; onClick?: (event: React.MouseEvent) => void; @@ -267,6 +303,7 @@ export const TableCellMenu = forwardRef< popoverContent?: ReactNode; children?: ReactNode; isSelected?: boolean; + variant?: TableVariant; } >( ( @@ -283,6 +320,7 @@ export const TableCellMenu = forwardRef< ref ) => { const [isOpen, setIsOpen] = useState(false); + const { variant } = useContext(TableContext); return (
{/* Hidden buttons that show on hover */} {hiddenButtons && ( -
+
{hiddenButtons}
)} diff --git a/apps/webapp/app/components/primitives/TextLink.tsx b/apps/webapp/app/components/primitives/TextLink.tsx index 984edbf610..e5c8e7d487 100644 --- a/apps/webapp/app/components/primitives/TextLink.tsx +++ b/apps/webapp/app/components/primitives/TextLink.tsx @@ -4,9 +4,9 @@ import { cn } from "~/utils/cn"; const variations = { primary: - "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group", + "text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group focus-visible:focus-custom", secondary: - "text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group", + "text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group focus-visible:focus-custom", } as const; type TextLinkProps = { @@ -34,14 +34,14 @@ export function TextLink({ {children}{" "} {trailingIcon && ( - + )} ) : href ? ( {children}{" "} {trailingIcon && ( - + )} ) : ( diff --git a/apps/webapp/app/components/runs/RunsTable.tsx b/apps/webapp/app/components/runs/RunsTable.tsx index c194da9532..535727525f 100644 --- a/apps/webapp/app/components/runs/RunsTable.tsx +++ b/apps/webapp/app/components/runs/RunsTable.tsx @@ -58,21 +58,19 @@ export function RunsTable({ return ( - - Run - {showJob && Job} - Env - Status - Started - Duration - Exec Time - Test - Version - Created at - - Go to page - - + Run + {showJob && Job} + Env + Status + Started + Duration + Exec Time + Test + Version + Created at + + Go to page + {total === 0 && !hasFilters ? ( diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx index 875457dc2e..014bb15fa2 100644 --- a/apps/webapp/app/components/runs/v3/RunTag.tsx +++ b/apps/webapp/app/components/runs/v3/RunTag.tsx @@ -22,7 +22,7 @@ export function RunTag({ tag }: { tag: string }) { {tagResult.key} - + {tagResult.value} diff --git a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx index 66f6743938..7cbb182e76 100644 --- a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx +++ b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx @@ -93,7 +93,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul }, []); return ( -
+
handleSearchChange(e.target.value)} /> - +
+
- - {allowSelection && ( - - {runs.length > 0 && ( - r.id))} - onChange={(element) => { - const ids = runs.map((r) => r.id); - const checked = element.currentTarget.checked; - if (checked) { - select(ids); - } else { - deselect(ids); - } - }} - ref={(r) => { - checkboxes.current[0] = r; - }} - onKeyDown={(event) => navigateCheckboxes(event, 0)} - /> - )} - - )} - Run # - Env - Task - Version - - {filterableTaskRunStatuses.map((status) => ( -
-
- -
- - {descriptionForTaskRunStatus(status)} - -
- ))} - - } - > - Status + {allowSelection && ( + + {runs.length > 0 && ( + r.id))} + onChange={(element) => { + const ids = runs.map((r) => r.id); + const checked = element.currentTarget.checked; + if (checked) { + select(ids); + } else { + deselect(ids); + } + }} + ref={(r) => { + checkboxes.current[0] = r; + }} + onKeyDown={(event) => navigateCheckboxes(event, 0)} + /> + )} - Started - -
-
- - Queued duration -
- - The amount of time from when the run was created to it starting to run. - -
-
-
- Run duration + )} + Run # + Env + Task + Version + + {filterableTaskRunStatuses.map((status) => ( +
+
+
- - The total amount of time from the run starting to it finishing. This includes - all time spent waiting. + + {descriptionForTaskRunStatus(status)}
-
-
- - Compute duration -
- - The amount of compute time used in the run. This does not include time spent - waiting. - + ))} +
+ } + > + Status + + Started + +
+
+ + Queued duration
-
- } - > - Duration - - {showCompute && ( - <> - Compute - - )} - Test - Created at - - - When you want to trigger a task now, but have it run at a later time, you can use - the delay option. + + The amount of time from when the run was created to it starting to run. - - Runs that are delayed and have not been enqueued yet will display in the dashboard - with a “Delayed” status. - - - Read docs -
- } - > - Delayed until - - - - You can set a TTL (time to live) when triggering a task, which will automatically - expire the run if it hasn’t started within the specified time. - - - All runs in development have a default ttl of 10 minutes. You can disable this by - setting the ttl option. +
+
+ Run duration +
+ + The total amount of time from the run starting to it finishing. This includes all + time spent waiting. - - Read docs -
- } - > - TTL - - - - You can add tags to a run and then filter runs using them. - - - You can add tags when triggering a run or inside the run function. +
+
+ + Compute duration +
+ + The amount of compute time used in the run. This does not include time spent + waiting. - - Read docs -
- } - > - Tags - - - Go to page - - +
+ } + > + Duration + + {showCompute && ( + <> + Compute + + )} + Test + Created at + + + When you want to trigger a task now, but have it run at a later time, you can use + the delay option. + + + Runs that are delayed and have not been enqueued yet will display in the dashboard + with a “Delayed” status. + + + Read docs + + + } + > + Delayed until + + + + You can set a TTL (time to live) when triggering a task, which will automatically + expire the run if it hasn’t started within the specified time. + + + All runs in development have a default ttl of 10 minutes. You can disable this by + setting the ttl option. + + + Read docs + + + } + > + TTL + + + + You can add tags to a run and then filter runs using them. + + + You can add tags when triggering a run or inside the run function. + + + Read docs + + + } + > + Tags + + + Go to page + {total === 0 && !hasFilters ? ( @@ -300,7 +301,7 @@ export function TaskRunsTable({ /> )} - + {formatNumber(run.number)} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx index b8c9a1bb8b..332a6cc820 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints.$httpEndpointParam/route.tsx @@ -114,14 +114,12 @@ export default function Page() {
- - Environment - Endpoint URL - Secret - Source - Respond to request? - Updated - + Environment + Endpoint URL + Secret + Source + Respond to request? + Updated {httpEndpoint.httpEndpointEnvironments.map((httpEnvironment) => { diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx index 5887a111fa..d05197a014 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.http-endpoints._index/route.tsx @@ -67,13 +67,11 @@ export default function Page() {
- - ID - Title - Updated - Environments - Go to page - + ID + Title + Updated + Environments + Go to page {httpEndpoints.length > 0 ? ( diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx index 8903add2e8..6025b0dc20 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.triggers._index/route.tsx @@ -49,14 +49,12 @@ export default function Integrations() {
- - Integration - Dynamic - Properties - Environment - Active - Go to page - + Integration + Dynamic + Properties + Environment + Active + Go to page {triggers.length > 0 ? ( 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 74d5ca966c..7ff742f6eb 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 @@ -224,7 +224,7 @@ export default function Page() {
{!userHasTasks && }
-
+
- - Task ID - Task - Running - Queued - Activity (7d) - Avg. duration - Environments - Go to page - + Task ID + Task + Running + Queued + Activity (7d) + Avg. duration + Environments + Go to page {filteredItems.length > 0 ? ( @@ -282,7 +280,7 @@ export default function Page() { return ( - +
} @@ -291,13 +289,13 @@ export default function Page() { {task.slug}
- + - + @@ -313,7 +311,7 @@ export default function Page() { - + }> {(data) => { @@ -323,7 +321,7 @@ export default function Page() { - + }> {(data) => { @@ -343,7 +341,7 @@ export default function Page() { - + }> {(data) => { 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 29876d96dc..42dba07567 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 @@ -187,14 +187,12 @@ export default function Page() {
- - Name - Alert types - Environments - Channel - Enabled - Actions - + Name + Alert types + Environments + Channel + Enabled + Actions {alertChannels.length > 0 ? ( @@ -216,7 +214,7 @@ export default function Page() { /> ))} - + @@ -460,6 +458,7 @@ function AlertChannelDetails({ alertChannel }: { alertChannel: AlertChannelListP label={"Email"} description={alertChannel.properties.email} boxClassName="group-hover/table-row:bg-charcoal-800" + className="h-12" /> ); } 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 ea9c9c4e2e..cea798a085 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 @@ -85,14 +85,12 @@ export default function Page() {
- - Environment - Secret key - Key generated - Latest version - Env vars - Actions - + Environment + Secret key + Key generated + Latest version + Env vars + Actions {environments.map((environment) => ( diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx index ceb620624f..ebf23664cd 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.batches/route.tsx @@ -134,38 +134,36 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) { return (
- - ID - Env - - {allBatchStatuses.map((status) => ( -
-
- -
- - {descriptionForBatchStatus(status)} - + ID + Env + + {allBatchStatuses.map((status) => ( +
+
+
- ))} -
- } - > - Status - - Runs - Duration - Created - Finished - - Go to batch - - + + {descriptionForBatchStatus(status)} + +
+ ))} + + } + > + Status + + Runs + Duration + Created + Finished + + Go to batch + {batches.length === 0 && !hasFilters ? ( @@ -187,7 +185,9 @@ function BatchesTable({ batches, hasFilters, filters }: BatchList) { const path = v3BatchRunsPath(organization, project, batch); return ( - {batch.friendlyId} + + {batch.friendlyId} + - + Legacy batch } 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 b4ef617d52..86d72566b8 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 @@ -80,12 +80,10 @@ export default function Page() {
- - Environment - Queued - Running - Concurrency limit - + Environment + Queued + Running + Concurrency limit }> diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx index 7678f53633..4fb4db5b81 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx @@ -4,7 +4,6 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { ExitIcon } from "~/assets/icons/ExitIcon"; import { UserAvatar } from "~/components/UserProfilePhoto"; import { AdminDebugTooltip } from "~/components/admin/debugTooltip"; -import { CodeBlock } from "~/components/code/CodeBlock"; import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel"; import { Badge } from "~/components/primitives/Badge"; import { LinkButton } from "~/components/primitives/Buttons"; @@ -108,112 +107,121 @@ export default function Page() { -
-
- - - Deploy - - {deployment.shortCode} - {deployment.label && {deployment.label}} - - - - Environment - - - - - - Version - {deployment.version} - - - Status - - - - - - Tasks - {deployment.tasks ? deployment.tasks.length : "–"} - - - SDK Version - {deployment.sdkVersion ? deployment.sdkVersion : "–"} - - - CLI Version - {deployment.cliVersion ? deployment.cliVersion : "–"} - - - Started at - - UTC - - - - Built at - - {deployment.builtAt ? ( - <> - UTC - - ) : ( - "–" - )} - - - - Deployed at - - {deployment.deployedAt ? ( - <> - UTC - - ) : ( - "–" - )} - - - - Deployed by - - {deployment.deployedBy ? ( -
- - - {deployment.deployedBy.name ?? deployment.deployedBy.displayName} - -
- ) : ( - "–" - )} - - - +
+
+
+ + + Deploy + + {deployment.shortCode} + {deployment.label && {deployment.label}} + + + + Environment + + + + + + Version + {deployment.version} + + + Status + + + + + + Tasks + {deployment.tasks ? deployment.tasks.length : "–"} + + + SDK Version + + {deployment.sdkVersion ? deployment.sdkVersion : "–"} + + + + CLI Version + + {deployment.cliVersion ? deployment.cliVersion : "–"} + + + + Started at + + UTC + + + + Built at + + {deployment.builtAt ? ( + <> + UTC + + ) : ( + "–" + )} + + + + Deployed at + + {deployment.deployedAt ? ( + <> + UTC + + ) : ( + "–" + )} + + + + Deployed by + + {deployment.deployedBy ? ( +
+ + + {deployment.deployedBy.name ?? deployment.deployedBy.displayName} + +
+ ) : ( + "–" + )} + + + +
{deployment.tasks ? (
-
+
- - Task - File path - + Task + File path {deployment.tasks.map((t) => { 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 411698cdb6..c3ee4779b1 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 @@ -120,39 +120,37 @@ export default function Page() {
- - Deploy - Env - Version - - {deploymentStatuses.map((status) => ( -
-
- -
- - {deploymentStatusDescription(status)} - + Deploy + Env + Version + + {deploymentStatuses.map((status) => ( +
+
+
- ))} -
- } - > - Status - - Tasks - Deployed at - Deployed by - Go to page - + + {deploymentStatusDescription(status)} + +
+ ))} + + } + > + Status + + Tasks + Deployed at + Deployed by + Go to page {deployments.length > 0 ? ( @@ -170,7 +168,7 @@ export default function Page() { const isSelected = deploymentParam === deployment.shortCode; return ( - +
{deployment.shortCode} {deployment.label && ( 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 9b3d2aa566..f937e63046 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 @@ -214,15 +214,13 @@ export default function Page() { )}
- - Key - {environments.map((environment) => ( - - - - ))} - Actions - + Key + {environments.map((environment) => ( + + + + ))} + Actions {environmentVariables.length > 0 ? ( 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 a246a32ab3..126f7202cc 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 @@ -220,11 +220,12 @@ export default function Page() { TrailingIcon={ExitIcon} shortcut={{ key: "esc" }} shortcutPosition="before-trailing-icon" + className="pl-1" />
-
-
+
+
Schedule ID @@ -282,61 +283,62 @@ export default function Page() { )} -
- Last 5 runs - -
-
- Next 5 runs -
- - - {!isUtc && {schedule.timezone}} - UTC - - - - {schedule.active ? ( - schedule.nextRuns.length ? ( - schedule.nextRuns.map((run, index) => ( - - {!isUtc && ( - - - - )} + +
+ Last 5 runs + +
+
+ Next 5 runs +
+ + {!isUtc && {schedule.timezone}} + UTC + + + {schedule.active ? ( + schedule.nextRuns.length ? ( + schedule.nextRuns.map((run, index) => ( + + {!isUtc && ( - + - - )) - ) : ( - - - - ) + )} + + + + + )) ) : ( - + - )} - -
-
- {!isImperative && ( + ) + ) : ( + + + + )} + + +
+ {!isImperative && ( +
- )} -
+ + )} {isImperative && ( 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 7a47613a8f..182a4f91c5 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 @@ -65,6 +65,7 @@ import { import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route"; import { ArrowUpCircleIcon } from "@heroicons/react/24/outline"; import { SimpleTooltip } from "~/components/primitives/Tooltip"; +import { cn } from "~/utils/cn"; export const loader = async ({ request, params }: LoaderFunctionArgs) => { const userId = await requireUserId(request); @@ -210,9 +211,19 @@ export default function Page() { -
+
1 ? "grid-rows-[1fr_auto]" : "grid-rows-[1fr]" + )} + > -
+
1 && "justify-end border-t border-grid-dimmed px-2 py-3" + )} + >
@@ -374,64 +385,62 @@ function SchedulesTable({ return ( - - ID - Task ID - -
-
-
- - {scheduleTypeName("DECLARATIVE")} -
+ ID + Task ID + +
+
+
+ + {scheduleTypeName("DECLARATIVE")}
- - Declarative schedules are defined in a{" "} - schedules.task with the{" "} - cron - property. They sync when you update your{" "} - schedules.task definition and run - the CLI dev or deploy commands. -
-
-
-
- - {scheduleTypeName("IMPERATIVE")} -
+ + Declarative schedules are defined in a{" "} + schedules.task with the{" "} + cron + property. They sync when you update your{" "} + schedules.task definition and run + the CLI dev or deploy commands. + +
+
+
+
+ + {scheduleTypeName("IMPERATIVE")}
- - Imperative schedules are defined here in the dashboard or by using the SDK - functions to create or delete them. They can be created, updated, disabled, and - deleted from the dashboard or using the SDK. -
- - View the docs - + + Imperative schedules are defined here in the dashboard or by using the SDK + functions to create or delete them. They can be created, updated, disabled, and + deleted from the dashboard or using the SDK. +
- } - > - Type - - External ID - CRON - CRON description - Timezone - Next run - Last run - Deduplication key - Environments - Enabled - + + View the docs + +
+ } + > + Type + + External ID + CRON + CRON description + Timezone + Next run + Last run + Deduplication key + Environments + Enabled {schedules.length === 0 ? ( @@ -443,7 +452,7 @@ function SchedulesTable({ const cellClass = schedule.active ? "" : "opacity-50"; return ( - + {schedule.friendlyId} 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 57c10df9ff..e6e946467a 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 @@ -210,12 +210,10 @@ function TaskSelector({ )}
- - - Task - - File path - + + Task + + File path {filteredItems.length > 0 ? ( @@ -266,6 +264,7 @@ function TaskRow({ task, environmentSlug }: { task: TaskListItem; environmentSlu 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 b509a9728f..0c0a22c6ca 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 @@ -207,14 +207,12 @@ export default function Page() { <>
- - Task - Runs - Average duration - Average cost - Total duration - Total cost - + Task + Runs + Average duration + Average cost + Total duration + Total cost {tasks.length === 0 ? ( diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js index b7c505964f..e57368fb3c 100644 --- a/apps/webapp/tailwind.config.js +++ b/apps/webapp/tailwind.config.js @@ -212,10 +212,10 @@ module.exports = { prod: prodEnv, }, focusStyles: { - outline: "2px solid", + outline: "1px solid", outlineOffset: "0px", outlineColor: textLink, - borderRadius: "2px", + borderRadius: "3px", }, borderRadius: { lg: radius,