mirror/hatchet
1
0
Fork 0
mirror of https://github.com/hatchet-dev/hatchet.git synced 2025-12-16 22:35:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: format

Browse Source
This commit is contained in:
mrkaye97
2025-12-12 17:12:25 -05:00
parent 26d3558224
commit 1e5b9ef08d
140 changed files with 747 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/src/components/molecules/confirm-dialog.tsx
View File

@@ -33,13 +33,13 @@ export function ConfirmDialog({
}: ConfirmDialogProps) {
return (
<Dialog open={isOpen}>
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">{description}</div>
<div className="flex flex-row gap-4 justify-end">
<div className="mb-4 text-sm text-foreground">{description}</div>
<div className="flex flex-row justify-end gap-4">
<Button
variant="ghost"
onClick={() => {

10
frontend/app/src/components/molecules/nav-bar/nav-bar.tsx
View File

@@ -65,7 +65,7 @@ function HelpDropdown() {
className="relative h-10 w-10 rounded-full p-1"
aria-label="Help Menu"
>
<BiHelpCircle className="h-6 w-6 text-foreground cursor-pointer" />
<BiHelpCircle className="h-6 w-6 cursor-pointer text-foreground" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
@@ -143,9 +143,9 @@ function AccountDropdown({ user }: { user: User }) {
className="relative h-10 w-10 rounded-full p-1"
aria-label="User Menu"
>
<BiUserCircle className="h-6 w-6 text-foreground cursor-pointer" />
<BiUserCircle className="h-6 w-6 cursor-pointer text-foreground" />
{(pendingInvitesQuery.data ?? 0) > 0 && (
<div className="absolute -top-0.5 -right-0.5 h-2.5 w-2.5 bg-blue-500 rounded-full border-2 border-background animate-pulse"></div>
<div className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 animate-pulse rounded-full border-2 border-background bg-blue-500"></div>
)}
</Button>
</DropdownMenuTrigger>
@@ -197,9 +197,9 @@ export default function MainNav({ user }: MainNavProps) {
const breadcrumbs = useBreadcrumbs();
return (
<div className="fixed top-0 w-screen z-50">
<div className="fixed top-0 z-50 w-screen">
<div className="h-16 border-b bg-background">
<div className="flex h-16 items-center pr-4 pl-4">
<div className="flex h-16 items-center pl-4 pr-4">
<div className="flex flex-row items-center gap-x-8">
<div className="flex items-center gap-3">
<Button

8
frontend/app/src/components/refetch-interval-dropdown.tsx
View File

@@ -48,9 +48,9 @@ export const RefetchIntervalDropdown = ({
}, [userRefetchIntervalPreference]);
return (
<div className="flex flex-row items-center h-8">
<div className="flex h-8 flex-row items-center">
<Button
className="h-full rounded-l-md rounded-r-none flex flex-row gap-x-2 pl-3"
className="flex h-full flex-row gap-x-2 rounded-l-md rounded-r-none pl-3"
variant="outline"
onClick={onRefetch}
>
@@ -58,10 +58,10 @@ export const RefetchIntervalDropdown = ({
data-is-refetching={isRefetching}
className="size-4 data-[is-refetching=true]:animate-spin"
/>
<span className="hidden cq-xl:inline">Refresh</span>
<span className="cq-xl:inline hidden">Refresh</span>
</Button>
<Select value={value} onValueChange={handleValueChange}>
<SelectTrigger className="flex flex-row items-center gap-x-2 h-full rounded-r-md rounded-l-none border-l-0 hover:bg-accent">
<SelectTrigger className="flex h-full flex-row items-center gap-x-2 rounded-l-none rounded-r-md border-l-0 hover:bg-accent">
{value !== 'off' && <SelectValue />}
</SelectTrigger>
<SelectContent>

16
frontend/app/src/components/side-panel.tsx
View File

@@ -84,7 +84,7 @@ export function SidePanel() {
<div
ref={panelRef}
className={cn(
'flex flex-col border-l border-border bg-background relative flex-shrink-0 overflow-hidden',
'relative flex flex-shrink-0 flex-col overflow-hidden border-l border-border bg-background',
!isResizing && 'transition-all duration-300 ease-in-out',
)}
style={{
@@ -95,20 +95,20 @@ export function SidePanel() {
<>
<div
className={cn(
'absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-500/20 transition-colors z-10',
'absolute bottom-0 left-0 top-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-blue-500/20',
isResizing && 'bg-blue-500/30',
)}
onMouseDown={handleMouseDown}
/>
<div className="sticky top-0 z-20 flex flex-row w-full justify-between items-center bg-background px-4 pt-4 pb-2">
<div className="flex flex-row gap-x-2 items-center">
<div className="sticky top-0 z-20 flex w-full flex-row items-center justify-between bg-background px-4 pb-2 pt-4">
<div className="flex flex-row items-center gap-x-2">
<Button
variant="ghost"
size="sm"
onClick={goBack}
disabled={!canGoBack}
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex-shrink-0 border"
className="flex-shrink-0 rounded-sm border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<ChevronLeftIcon className="h-4 w-4" />
<span className="sr-only">Go Back</span>
@@ -118,7 +118,7 @@ export function SidePanel() {
size="sm"
onClick={goForward}
disabled={!canGoForward}
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex-shrink-0 border"
className="flex-shrink-0 rounded-sm border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<ChevronRightIcon className="h-4 w-4" />
<span className="sr-only">Go Forward</span>
@@ -128,7 +128,7 @@ export function SidePanel() {
<Button
variant="ghost"
onClick={close}
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex-shrink-0"
className="flex-shrink-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
>
<Cross2Icon className="h-4 w-4" />
<span className="sr-only">Close</span>
@@ -138,7 +138,7 @@ export function SidePanel() {
<div
className={cn(
'flex-1 p-4 overflow-auto side-panel-content',
'side-panel-content flex-1 overflow-auto p-4',
isResizing && 'pointer-events-none',
)}
>

10
frontend/app/src/components/v1/cloud/billing/payment-methods.tsx
View File

@@ -59,8 +59,8 @@ export function PaymentMethods({
return (
<>
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Payment Methods
</h3>
@@ -73,9 +73,9 @@ export function PaymentMethods({
? ccIcons[method.brand]
: ccIcons.generic;
return (
<div key={i} className="flex flex-row items-center gap-4 mb-4">
<div className="flex flex-col mt-4 text-sm">
<div className="flex flex-row gap-2 items-center">
<div key={i} className="mb-4 flex flex-row items-center gap-4">
<div className="mt-4 flex flex-col text-sm">
<div className="flex flex-row items-center gap-2">
<Icon size={24} />
{method.brand.toUpperCase()}
{method.last4 && ` *** *** ${method.last4} `}

16
frontend/app/src/components/v1/cloud/billing/subscription.tsx
View File

@@ -155,9 +155,9 @@ export const Subscription: React.FC<SubscriptionProps> = ({
onCancel={() => setChangeConfirmOpen(undefined)}
isLoading={!!loading}
/>
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<h3 className="text-xl font-semibold leading-tight text-foreground flex flex-row gap-2">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h3 className="flex flex-row gap-2 text-xl font-semibold leading-tight text-foreground">
Subscription
{coupons?.map((coupon, i) => (
<Badge key={`c${i}`} variant="successful">
@@ -182,7 +182,7 @@ export const Subscription: React.FC<SubscriptionProps> = ({
</Label>
</div>
</div>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
For plan details, please visit{' '}
<a
href="https://hatchet.run/pricing"
@@ -206,7 +206,7 @@ export const Subscription: React.FC<SubscriptionProps> = ({
</AlertTitle>
<AlertDescription>
A payment method is required to upgrade your subscription, please{' '}
<a onClick={manageClicked} className="underline pointer" href="#">
<a onClick={manageClicked} className="pointer underline" href="#">
add one
</a>{' '}
first.
@@ -216,9 +216,9 @@ export const Subscription: React.FC<SubscriptionProps> = ({
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
{sortedPlans?.map((plan, i) => (
<Card className="bg-muted/30 gap-4 flex-col flex" key={i}>
<Card className="flex flex-col gap-4 bg-muted/30" key={i}>
<CardHeader>
<CardTitle className="tracking-wide text-sm">
<CardTitle className="text-sm tracking-wide">
{plan.name}
</CardTitle>
<CardDescription className="py-4">
@@ -258,7 +258,7 @@ export const Subscription: React.FC<SubscriptionProps> = ({
))}
</div>
{active?.note && <p className="mt-4">{active?.note}</p>}
<p className="text-sm text-gray-500 mt-4">
<p className="mt-4 text-sm text-gray-500">
* subscription fee billed upfront {showAnnual ? 'yearly' : 'monthly'},
overages billed at the end of each month for usage in that month
</p>

10
frontend/app/src/components/v1/cloud/logging/logs.tsx
View File

@@ -161,12 +161,12 @@ const LoggingComponent: React.FC<LogProps> = ({
return (
<div
className="w-full mx-auto overflow-y-auto p-6 text-indigo-300 font-mono text-xs rounded-md max-h-[25rem] min-h-[25rem] bg-muted scrollbar-thin scrollbar-track-muted scrollbar-thumb-muted-foreground"
className="scrollbar-thin scrollbar-track-muted scrollbar-thumb-muted-foreground mx-auto max-h-[25rem] min-h-[25rem] w-full overflow-y-auto rounded-md bg-muted p-6 font-mono text-xs text-indigo-300"
ref={containerRef}
onScroll={handleScroll}
>
{refreshing && (
<div className="absolute top-0 left-0 right-0 bg-gray-800 text-white p-2 text-center">
<div className="absolute left-0 right-0 top-0 bg-gray-800 p-2 text-center text-white">
Refreshing...
</div>
)}
@@ -183,12 +183,12 @@ const LoggingComponent: React.FC<LogProps> = ({
return (
<p
key={logHash}
className="pb-2 break-all overflow-x-hidden whitespace-pre-wrap"
className="overflow-x-hidden whitespace-pre-wrap break-all pb-2"
id={'log' + i}
>
{log.badge}
{log.timestamp && (
<span className="text-gray-500 mr-2 ml--2">
<span className="ml--2 mr-2 text-gray-500">
{new Date(log.timestamp)
.toLocaleString('sv', options)
.replace(',', '.')
@@ -196,7 +196,7 @@ const LoggingComponent: React.FC<LogProps> = ({
</span>
)}
{log.instance && (
<span className="text-foreground dark:text-white mr-2 ml--2">
<span className="ml--2 mr-2 text-foreground dark:text-white">
{log.instance}
</span>
)}

4
frontend/app/src/components/v1/docs/docs-button.tsx
View File

@@ -39,7 +39,7 @@ export const DocsButton = ({
return (
<Button
onClick={handleClick}
className="w-auto px-4 py-2 flex flex-row items-center gap-x-2"
className="flex w-auto flex-row items-center gap-x-2 px-4 py-2"
variant={variant}
>
<BookOpenText className="size-4" />
@@ -48,7 +48,7 @@ export const DocsButton = ({
);
case 'mini':
return (
<div className="flex flex-row items-center gap-x-4 w-full justify-center">
<div className="flex w-full flex-row items-center justify-center gap-x-4">
<span className="text-mono font-semibold">{label}</span>
<Button
variant="ghost"

8
frontend/app/src/components/v1/molecules/charts/zoomable.tsx
View File

@@ -165,7 +165,7 @@ export function ZoomableChart<T extends string>({
return (
<ChartContainer
config={chartConfig}
className={cn('w-full h-[200px] min-h-[200px]', className)}
className={cn('h-[200px] min-h-[200px] w-full', className)}
>
<div className="h-full" ref={chartRef} style={{ touchAction: 'none' }}>
{getChildChart(kind, {
@@ -259,7 +259,7 @@ function ChildBarChart<T extends string>({
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px] sm:w-[200px] font-mono text-xs sm:text-xs"
className="w-[150px] font-mono text-xs sm:w-[200px] sm:text-xs"
labelFormatter={(value) => new Date(value).toLocaleString()}
/>
}
@@ -337,7 +337,7 @@ function ChildLineChart<T extends string>({
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px] sm:w-[200px] font-mono text-xs sm:text-xs"
className="w-[150px] font-mono text-xs sm:w-[200px] sm:text-xs"
labelFormatter={(value) => new Date(value).toLocaleString()}
/>
}
@@ -418,7 +418,7 @@ function ChildAreaChart<T extends string>({
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px] sm:w-[200px] font-mono text-xs sm:text-xs"
className="w-[150px] font-mono text-xs sm:w-[200px] sm:text-xs"
labelFormatter={(value) => new Date(value).toLocaleString()}
/>
}

12
frontend/app/src/components/v1/molecules/combobox/combobox.tsx
View File

@@ -121,7 +121,7 @@ export function Combobox({
<Badge
key={index}
variant="secondary"
className="rounded-sm px-1 font-normal flex items-center space-x-1"
className="flex items-center space-x-1 rounded-sm px-1 font-normal"
>
{options?.find(({ value }) => value == option)?.label ||
option}
@@ -141,7 +141,7 @@ export function Combobox({
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-2 z-[70]" align="start">
<PopoverContent className="z-[70] w-[300px] p-2" align="start">
{[ToolbarType.Array, ToolbarType.KeyValue].includes(type) && (
<div>
<div className="">
@@ -149,7 +149,7 @@ export function Combobox({
<Badge
key={index}
variant="secondary"
className="mr-2 mb-2 rounded-sm px-1 font-normal flex items-center space-x-1 pl-2"
className="mb-2 mr-2 flex items-center space-x-1 rounded-sm px-1 pl-2 font-normal"
>
<span className="grow">{filter}</span>
<Button
@@ -165,7 +165,7 @@ export function Combobox({
</div>
<form onSubmit={handleSubmit(submit)}>
{type === ToolbarType.KeyValue ? (
<div className="flex items-center space-x-2 mb-2">
<div className="mb-2 flex items-center space-x-2">
<Input
type="text"
placeholder="Key"
@@ -195,7 +195,7 @@ export function Combobox({
{values.length > 0 && (
<Button
onClick={() => setValues([])}
className="w-full mt-2"
className="mt-2 w-full"
size="sm"
variant={'ghost'}
>
@@ -214,7 +214,7 @@ export function Combobox({
onValueChange={onSearchChange}
/>
<CommandList>
<CommandEmpty className="py-2 text-sm text-muted-foreground text-center">
<CommandEmpty className="py-2 text-center text-sm text-muted-foreground">
{emptyMessage || 'No results found.'}
</CommandEmpty>
<CommandGroup>

6
frontend/app/src/components/v1/molecules/confirm-dialog.tsx
View File

@@ -33,13 +33,13 @@ export function ConfirmDialog({
}: ConfirmDialogProps) {
return (
<Dialog open={isOpen}>
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">{description}</div>
<div className="flex flex-row gap-4 justify-end">
<div className="mb-4 text-sm text-foreground">{description}</div>
<div className="flex flex-row justify-end gap-4">
<Button
variant="ghost"
onClick={() => {

64
frontend/app/src/components/v1/molecules/data-table/data-table-options.tsx
View File

@@ -75,7 +75,7 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
<div className="space-y-3">
{config.isCustomTimeRange && (
<div className="space-y-3">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground">
Custom Range
</span>
@@ -85,12 +85,12 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
size="sm"
className="h-6 px-2 text-xs"
>
<XCircleIcon className="h-3 w-3 mr-1" />
<XCircleIcon className="mr-1 h-3 w-3" />
Clear
</Button>
</div>
<div className="space-y-2">
<div className="space-y-1 w-full">
<div className="w-full space-y-1">
<DateTimePicker
label="After"
date={
@@ -104,7 +104,7 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
triggerClassName="w-full"
/>
</div>
<div className="space-y-1 w-full">
<div className="w-full space-y-1">
<DateTimePicker
label="Before"
date={
@@ -147,10 +147,10 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
);
case ToolbarType.Switch:
return (
<div className="flex items-center justify-between hover:bg-muted/50 rounded-md px-3 py-2 bg-muted/10 border">
<div className="flex items-center justify-between rounded-md border bg-muted/10 px-3 py-2 hover:bg-muted/50">
<Label
htmlFor={`filter-${filter.columnId}`}
className="text-sm font-medium cursor-pointer flex-1"
className="flex-1 cursor-pointer text-sm font-medium"
>
{filter.title}
</Label>
@@ -189,10 +189,10 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
return (
<div
key={index}
className="flex items-center justify-between bg-muted/50 rounded-md px-2 py-1 text-xs"
className="flex items-center justify-between rounded-md bg-muted/50 px-2 py-1 text-xs"
>
<div className="flex items-center gap-1 font-mono">
<span className="text-blue-600 font-medium">{key}</span>
<span className="font-medium text-blue-600">{key}</span>
<span className="text-muted-foreground">{separator}</span>
<span className="text-green-600">{value}</span>
</div>
@@ -261,7 +261,7 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
size="sm"
disabled={!newKey.trim() || !newValue.trim()}
onClick={addKeyValue}
className="w-full h-8 text-xs"
className="h-8 w-full text-xs"
>
Add Filter
</Button>
@@ -290,7 +290,7 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
return (
<div
key={index}
className="flex items-center justify-between bg-muted/50 rounded-md px-2 py-1 text-xs"
className="flex items-center justify-between rounded-md bg-muted/50 px-2 py-1 text-xs"
>
<div className="flex items-center gap-1 font-mono">
<span className="text-muted-foreground">{val}</span>
@@ -327,14 +327,14 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
addArrayValue();
}
}}
className="h-8 text-xs placeholder:text-muted-foreground/50 w-full"
className="h-8 w-full text-xs placeholder:text-muted-foreground/50"
/>
<Button
variant="outline"
size="sm"
disabled={!newArrayValue.trim()}
onClick={addArrayValue}
className="w-full h-8 text-xs"
className="h-8 w-full text-xs"
>
Add Filter
</Button>
@@ -366,12 +366,12 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
className="h-8 text-xs"
/>
)}
<div className="max-h-56 overflow-y-auto space-y-1 border rounded-md p-2 bg-muted/10">
<div className="max-h-56 space-y-1 overflow-y-auto rounded-md border bg-muted/10 p-2">
{filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<div
key={option.value}
className="flex items-center space-x-2 hover:bg-muted/50 rounded-md px-2 py-1.5"
className="flex items-center space-x-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
>
<Checkbox
id={`${filter.columnId}-${option.value}`}
@@ -392,14 +392,14 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
/>
<Label
htmlFor={`${filter.columnId}-${option.value}`}
className="text-sm cursor-pointer flex-1 truncate"
className="flex-1 cursor-pointer truncate text-sm"
>
{option.label}
</Label>
</div>
))
) : (
<div className="text-xs text-muted-foreground text-center py-3">
<div className="py-3 text-center text-xs text-muted-foreground">
No options found
</div>
)}
@@ -420,7 +420,7 @@ function FilterControl<TData>({ column, filter }: FilterControlProps<TData>) {
column?.setFilterValue(undefined);
}
}}
className="h-8 text-xs placeholder:text-muted-foreground/50 w-full"
className="h-8 w-full text-xs placeholder:text-muted-foreground/50"
/>
);
@@ -520,18 +520,18 @@ export function DataTableOptions<TData>({
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="h-8 flex-shrink-0">
<MixerHorizontalIcon className="h-4 w-4" />
<span className="cq-xl:inline hidden ml-2 text-sm">Filters</span>
<span className="cq-xl:inline ml-2 hidden text-sm">Filters</span>
{activeFiltersCount > 0 && (
<Badge variant="secondary" className="ml-2 px-1 py-0 text-xs">
{activeFiltersCount}
</Badge>
)}
<ChevronDownIcon className="h-4 w-4 ml-2 hidden cq-xl:inline" />
<ChevronDownIcon className="cq-xl:inline ml-2 hidden h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="w-96 max-h-[32rem] overflow-y-auto z-[70] shadow-lg p-0"
className="z-[70] max-h-[32rem] w-96 overflow-y-auto p-0 shadow-lg"
>
<DataTableOptionsContent
table={table}
@@ -582,20 +582,20 @@ function FiltersContent<TData>({
return (
<div className="space-y-0">
{onResetFilters && activeFiltersCount > 0 && (
<div className="p-3 border-b bg-muted/10">
<div className="border-b bg-muted/10 p-3">
<Button
variant="outline"
size="sm"
onClick={onResetFilters}
className="w-full h-8 text-xs"
className="h-8 w-full text-xs"
>
<Cross2Icon className="h-3 w-3 mr-2" />
<Cross2Icon className="mr-2 h-3 w-3" />
Clear All Filters
</Button>
</div>
)}
<div className="max-h-96 overflow-y-auto">
<div className="p-3 space-y-4">
<div className="space-y-4 p-3">
{visibleFilters.map((filter, index) => (
<div key={filter.columnId} className="space-y-2">
<div className="flex items-center justify-between">
@@ -652,7 +652,7 @@ function ColumnsContent<TData>({
return (
<div className="space-y-0">
<div className="max-h-80 overflow-y-auto">
<div className="p-3 space-y-1">
<div className="space-y-1 p-3">
{table
.getAllColumns()
.filter(
@@ -668,7 +668,7 @@ function ColumnsContent<TData>({
return (
<div
key={column.id}
className="flex items-center space-x-3 hover:bg-muted/50 rounded-md px-2 py-2 transition-colors"
className="flex items-center space-x-3 rounded-md px-2 py-2 transition-colors hover:bg-muted/50"
>
<Checkbox
id={`column-${column.id}`}
@@ -679,7 +679,7 @@ function ColumnsContent<TData>({
/>
<Label
htmlFor={`column-${column.id}`}
className="text-sm cursor-pointer flex-1 truncate font-medium"
className="flex-1 cursor-pointer truncate text-sm font-medium"
>
{columnName}
</Label>
@@ -688,13 +688,13 @@ function ColumnsContent<TData>({
})}
</div>
</div>
<div className="p-3 border-t">
<div className="flex gap-1 w-full">
<div className="border-t p-3">
<div className="flex w-full gap-1">
<Button
variant="ghost"
size="sm"
onClick={() => table.toggleAllColumnsVisible(false)}
className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground flex-1"
className="h-7 flex-1 px-2 text-xs text-muted-foreground hover:text-foreground"
>
Hide All
</Button>
@@ -702,7 +702,7 @@ function ColumnsContent<TData>({
variant="ghost"
size="sm"
onClick={() => table.toggleAllColumnsVisible(true)}
className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground flex-1"
className="h-7 flex-1 px-2 text-xs text-muted-foreground hover:text-foreground"
>
Show All
</Button>
@@ -772,7 +772,7 @@ export function DataTableOptionsContent<TData>({
onValueChange={(value) => setSelectedTab(value as 'filters' | 'columns')}
className="w-full rounded-none p-0"
>
<TabsList className="grid w-full grid-cols-2 bg-muted/30 rounded-none px-2">
<TabsList className="grid w-full grid-cols-2 rounded-none bg-muted/30 px-2">
<TabsTrigger
value="filters"
className="text-xs font-medium data-[state=active]:bg-background data-[state=active]:text-foreground"

2
frontend/app/src/components/v1/molecules/data-table/data-table-pagination.tsx
View File

@@ -59,7 +59,7 @@ export function DataTablePagination<TData>({
}}
>
<SelectTrigger
className="h-8 w-[70px] z-[70]"
className="z-[70] h-8 w-[70px]"
id="rows-per-page"
aria-labelledby="rows-per-page-label"
>

6
frontend/app/src/components/v1/molecules/data-table/data-table-toolbar.tsx
View File

@@ -102,12 +102,12 @@ export function DataTableToolbar<TData>({
return (
<div className="flex items-center justify-between">
<div className="flex flex-row items-center flex-shrink-0 w-full justify-between overflow-x-auto">
<div className="flex items-center gap-2 min-w-0 flex-shrink-0">
<div className="flex w-full flex-shrink-0 flex-row items-center justify-between overflow-x-auto">
<div className="flex min-w-0 flex-shrink-0 items-center gap-2">
{isLoading && <Spinner />}
{leftActions}
</div>
<div className="flex flex-row gap-2 items-center flex-shrink-0">
<div className="flex flex-shrink-0 flex-row items-center gap-2">
{rightActions}
{refetchProps && (
<RefetchIntervalDropdown

6
frontend/app/src/components/v1/molecules/data-table/data-table.tsx
View File

@@ -227,7 +227,7 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
<TableHead
key={header.id}
colSpan={header.colSpan}
className={cn('bg-background border-b', headerClassName)}
className={cn('border-b bg-background', headerClassName)}
>
{header.isPlaceholder
? null
@@ -288,7 +288,7 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
);
return (
<div className="flex flex-col max-h-full space-y-4">
<div className="flex max-h-full flex-col space-y-4">
{tableActions?.selectedActionType && (
<ConfirmActionModal
actionType={tableActions.selectedActionType}
@@ -316,7 +316,7 @@ export function DataTable<TData extends IDGetter<TData>, TValue>({
/>
)}
<div
className={`flex-1 min-h-0 rounded-md ${!card && 'border'} ${!card && 'overflow-auto'}`}
className={`min-h-0 flex-1 rounded-md ${!card && 'border'} ${!card && 'overflow-auto'}`}
>
{!card ? getTable() : getCards()}
</div>

26
frontend/app/src/components/v1/molecules/nav-bar/organization-selector.tsx
View File

@@ -80,11 +80,11 @@ function OrganizationGroup({
<CommandItem
onSelect={onToggleExpand}
value={`org-${organization.metadata.id}`}
className="text-sm cursor-pointer hover:bg-accent focus:bg-accent"
className="cursor-pointer text-sm hover:bg-accent focus:bg-accent"
>
<div className="flex items-start justify-between w-full">
<div className="flex items-start gap-2 flex-1 min-w-0">
<div className="flex items-center gap-2 flex-shrink-0">
<div className="flex w-full items-start justify-between">
<div className="flex min-w-0 flex-1 items-start gap-2">
<div className="flex flex-shrink-0 items-center gap-2">
{isExpanded ? (
<ChevronDownIcon className="h-3 w-3" />
) : (
@@ -92,12 +92,12 @@ function OrganizationGroup({
)}
<BuildingOffice2Icon className="h-4 w-4" />
</div>
<span className="font-medium leading-tight break-words">
<span className="break-words font-medium leading-tight">
{organization.name}
</span>
</div>
{organization.isOwner && (
<div className="flex items-center gap-1 flex-shrink-0 ml-2">
<div className="ml-2 flex flex-shrink-0 items-center gap-1">
<Button
variant="ghost"
size="sm"
@@ -138,12 +138,12 @@ function OrganizationGroup({
onTenantSelect(membership.tenant);
onClose();
}}
className="text-sm cursor-pointer pl-6 hover:bg-accent focus:bg-accent"
className="cursor-pointer pl-6 text-sm hover:bg-accent focus:bg-accent"
>
<div className="flex items-center justify-between w-full">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-5 h-5 flex items-center justify-center">
<div className="w-2 h-2 rounded-full bg-green-500" />
<div className="flex h-5 w-5 items-center justify-center">
<div className="h-2 w-2 rounded-full bg-green-500" />
</div>
<span className="text-muted-foreground">
{membership.tenant?.name}
@@ -311,7 +311,7 @@ export function OrganizationSelector({
side="top"
align="start"
sideOffset={20}
className="w-[287px] p-0 z-50 border border-border shadow-md rounded-md"
className="z-50 w-[287px] rounded-md border border-border p-0 shadow-md"
>
<Command className="border-0">
<CommandList>
@@ -339,7 +339,7 @@ export function OrganizationSelector({
<Button
variant="outline"
size="sm"
className="w-full justify-center gap-2 h-8 text-sm hover:bg-accent"
className="h-8 w-full justify-center gap-2 text-sm hover:bg-accent"
onClick={handleCreateOrgClick}
>
<PlusIcon className="h-4 w-4" />
@@ -382,7 +382,7 @@ export function OrganizationSelector({
handleTenantSelect(membership.tenant);
handleClose();
}}
className="text-sm cursor-pointer"
className="cursor-pointer text-sm"
>
<BuildingOffice2Icon className="mr-2 h-4 w-4" />
{membership.tenant?.name}

6
frontend/app/src/components/v1/molecules/nav-bar/tenant-switcher.tsx
View File

@@ -59,7 +59,7 @@ export function TenantSwitcher({
<CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent side="right" className="w-full p-0 mb-6 z-50">
<PopoverContent side="right" className="z-50 mb-6 w-full p-0">
<Command className="min-w-[260px]" value={currTenant.slug}>
<CommandList>
<CommandEmpty>No tenants found.</CommandEmpty>
@@ -72,7 +72,7 @@ export function TenantSwitcher({
setOpen(false);
}}
value={membership.tenant?.slug}
className="text-sm cursor-pointer"
className="cursor-pointer text-sm"
>
<BuildingOffice2Icon className="mr-2 h-4 w-4" />
{membership.tenant?.name}
@@ -92,7 +92,7 @@ export function TenantSwitcher({
<CommandSeparator />
<CommandList>
<Link to="/onboarding/create-tenant">
<CommandItem className="text-sm cursor-pointer">
<CommandItem className="cursor-pointer text-sm">
<PlusCircledIcon className="mr-2 h-4 w-4" />
New Tenant
</CommandItem>

6
frontend/app/src/components/v1/molecules/time-picker/date-time-picker.tsx
View File

@@ -47,7 +47,7 @@ export function DateTimePicker({
<Button
variant={'outline'}
className={cn(
'w-fit justify-start text-left font-normal text-xs',
'w-fit justify-start text-left text-xs font-normal',
!date && 'text-muted-foreground',
triggerClassName,
)}
@@ -60,14 +60,14 @@ export function DateTimePicker({
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 z-[80]">
<PopoverContent className="z-[80] w-auto p-0">
<Calendar
mode="single"
selected={date}
onSelect={(d) => handleSelect(d)}
initialFocus
/>
<div className="p-3 border-t border-border">
<div className="border-t border-border p-3">
<TimePicker setDate={setDate} date={date} />
</div>
</PopoverContent>

2
frontend/app/src/components/v1/molecules/time-picker/time-picker-input.tsx
View File

@@ -122,7 +122,7 @@ const TimePickerInput = React.forwardRef<
id={id || picker}
name={name || picker}
className={cn(
'w-[48px] text-xs text-center font-mono tabular-nums caret-transparent focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none',
'w-[48px] text-center font-mono text-xs tabular-nums caret-transparent focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none',
className,
)}
value={value || valueToTwoDigits(parseInt(calculatedValue))}

4
frontend/app/src/components/v1/shared/copy-workflow-config.tsx
View File

@@ -21,12 +21,12 @@ export function CopyWorkflowConfigButton({
>
{copySuccess ? (
<>
<CheckIcon className="w-3 h-3 mr-2" />
<CheckIcon className="mr-2 h-3 w-3" />
Copied!
</>
) : (
<>
<CopyIcon className="w-3 h-3 mr-2" />
<CopyIcon className="mr-2 h-3 w-3" />
Copy Config
</>
)}

2
frontend/app/src/components/v1/ui/accordion.tsx
View File

@@ -35,7 +35,7 @@ const AccordionTrigger = React.forwardRef<
>
{children}
{!hideChevron && (
<ChevronDownIcon className="h-4 w-4 shrink-0 text-gray-700 dark:text-gray-300 transition-transform duration-200" />
<ChevronDownIcon className="h-4 w-4 shrink-0 text-gray-700 transition-transform duration-200 dark:text-gray-300" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

4
frontend/app/src/components/v1/ui/code-editor.tsx
View File

@@ -40,7 +40,7 @@ export function CodeEditor({
<div
className={cn(
className,
'w-full h-fit relative rounded-lg overflow-hidden',
'relative h-fit w-full overflow-hidden rounded-lg',
)}
>
<Editor
@@ -73,7 +73,7 @@ export function CodeEditor({
/>
{copy && (
<CopyToClipboard
className="absolute top-2 right-2"
className="absolute right-2 top-2"
text={code?.trim() || ''}
/>
)}

4
frontend/app/src/components/v1/ui/code-highlighter.tsx
View File

@@ -42,7 +42,7 @@ export function CodeHighlighter({
const { theme } = useTheme();
return (
<div className={cn('w-full h-fit relative bg-muted rounded-lg', className)}>
<div className={cn('relative h-fit w-full rounded-lg bg-muted', className)}>
<SyntaxHighlighter
language={language}
style={theme == 'dark' ? anOldHope : atomOneLight}
@@ -71,7 +71,7 @@ export function CodeHighlighter({
</SyntaxHighlighter>
{copy && (
<CopyToClipboard
className="absolute top-2 right-2"
className="absolute right-2 top-2"
text={(copyCode || code).trim()}
/>
)}

8
frontend/app/src/components/v1/ui/copy-to-clipboard.tsx
View File

@@ -24,8 +24,8 @@ const CopyToClipboard: React.FC<Props> = ({
className={cn(
className,
withText
? 'cursor-pointer flex flex-row gap-2 items-center mt-2'
: 'w-6 h-6 p-0 cursor-pointer',
? 'mt-2 flex cursor-pointer flex-row items-center gap-2'
: 'h-6 w-6 cursor-pointer p-0',
)}
variant={withText ? 'default' : 'ghost'}
onClick={() => {
@@ -39,9 +39,9 @@ const CopyToClipboard: React.FC<Props> = ({
}}
>
{successCopy ? (
<CheckIcon className="w-4 h-4" />
<CheckIcon className="h-4 w-4" />
) : (
<CopyIcon className="w-4 h-4" />
<CopyIcon className="h-4 w-4" />
)}
{withText && (successCopy ? 'Copied' : 'Copy to clipboard')}
</Button>

6
frontend/app/src/components/v1/ui/envvar.tsx
View File

@@ -128,7 +128,7 @@ const EnvGroupArray: React.FC<PropsType> = ({
disabled={disabled || entry.locked || entry.deleted}
className={cn(
'w-64',
entry.locked && 'bg-gray-200 cursor-not-allowed',
entry.locked && 'cursor-not-allowed bg-gray-200',
)}
/>
{entry.hidden ? (
@@ -140,7 +140,7 @@ const EnvGroupArray: React.FC<PropsType> = ({
disabled={disabled || entry.locked || entry.deleted}
className={cn(
'flex-1',
entry.locked && 'bg-gray-200 cursor-not-allowed',
entry.locked && 'cursor-not-allowed bg-gray-200',
!entry.isEditing && entry.hint && 'text-gray-400',
)}
/>
@@ -155,7 +155,7 @@ const EnvGroupArray: React.FC<PropsType> = ({
disabled={disabled || entry.locked || entry.deleted}
className={cn(
'flex-1',
entry.locked && 'bg-gray-200 cursor-not-allowed',
entry.locked && 'cursor-not-allowed bg-gray-200',
!entry.isEditing && entry.hint && 'text-gray-400',
)}
/>

2
frontend/app/src/components/v1/ui/loading.tsx
View File

@@ -7,7 +7,7 @@ export function Spinner() {
export function Loading({ className }: { className?: string }) {
return (
<div className={cn('flex flex-row flex-1 w-full h-full', className)}>
<div className={cn('flex h-full w-full flex-1 flex-row', className)}>
<Spinner />
</div>
);

6
frontend/app/src/components/v1/ui/secret-copier.tsx
View File

@@ -90,8 +90,8 @@ export function SecretCopier({
};
return (
<div className={cn(className, 'w-full h-fit relative')}>
<div className="mb-2 justify-right flex flex-row items-center">
<div className={cn(className, 'relative h-fit w-full')}>
<div className="justify-right mb-2 flex flex-row items-center">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -131,7 +131,7 @@ export function SecretCopier({
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
onClick && onClick();
}}
className="relative flex bg-muted rounded-lg"
className="relative flex rounded-lg bg-muted"
>
{format === Formats.TABLE ? (
renderSecrets()

6
frontend/app/src/components/v1/ui/steps.tsx
View File

@@ -33,7 +33,7 @@ const Step = ({
<Accordion
type="single"
collapsible={true}
className="w-full relative"
className="relative w-full"
value={open ? 'open' : 'closed'}
disabled={disabled}
onValueChange={(value) => setOpen(value === 'open')}
@@ -41,9 +41,9 @@ const Step = ({
<AccordionItem value="open" className="border-none">
<AccordionTrigger
hideChevron={disabled}
className={disabled ? 'hover:no-underline cursor-default' : ''}
className={disabled ? 'cursor-default hover:no-underline' : ''}
>
<div className="absolute w-[33px] h-[33px] border-4 border-muted bg-muted rounded-full text-foreground text-base font-normal text-center mt-[3px] ml-[-41px]">
<div className="absolute ml-[-41px] mt-[3px] h-[33px] w-[33px] rounded-full border-4 border-muted bg-muted text-center text-base font-normal text-foreground">
{stepNumber}
</div>
{title && (

2
frontend/app/src/components/v1/ui/textarea.tsx
View File

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
'flex w-full rounded-md border min-h-9 border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
'flex min-h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}

4
frontend/app/src/hooks/use-side-panel.tsx
View File

@@ -140,10 +140,10 @@ function useSidePanelData(): SidePanelData {
return {
isDocs: true,
component: (
<div className="p-4 size-full">
<div className="size-full p-4">
<iframe
src={url}
className="inset-0 w-full rounded-md border border-slate-800 size-full"
className="inset-0 size-full w-full rounded-md border border-slate-800"
loading="lazy"
/>
</div>

6
frontend/app/src/pages/auth/login/index.tsx
View File

@@ -44,8 +44,8 @@ export default function Login() {
].filter(Boolean);
return (
<div className="flex flex-1 flex-col items-center justify-center w-full h-full lg:flex-row">
<div className="container relative flex-col items-center justify-center w-full lg:px-0">
<div className="flex h-full w-full flex-1 flex-col items-center justify-center lg:flex-row">
<div className="container relative w-full flex-col items-center justify-center lg:px-0">
<div className="mx-auto flex w-full max-w-md lg:p-8">
<div className="flex w-full flex-col justify-center space-y-6">
<div className="flex flex-col space-y-2 text-center">
@@ -74,7 +74,7 @@ export default function Login() {
</Link>
</p>
</div>
<p className="text-left text-sm text-gray-700 dark:text-gray-300 w-full">
<p className="w-full text-left text-sm text-gray-700 dark:text-gray-300">
By clicking continue, you agree to our{' '}
<Link
to="https://www.iubenda.com/terms-and-conditions/76608149"

6
frontend/app/src/pages/auth/register/index.tsx
View File

@@ -66,8 +66,8 @@ export default function Register() {
].filter(Boolean);
return (
<div className="flex flex-1 flex-col items-center justify-center w-full h-full lg:flex-row">
<div className="container relative flex-col items-center justify-center w-full lg:px-0">
<div className="flex h-full w-full flex-1 flex-col items-center justify-center lg:flex-row">
<div className="container relative w-full flex-col items-center justify-center lg:px-0">
<div className="mx-auto flex w-full max-w-md lg:p-8">
<div className="flex w-full flex-col justify-center space-y-6">
<div className="flex flex-col space-y-2 text-center">
@@ -95,7 +95,7 @@ export default function Register() {
</Link>
</p>
</div>
<p className="text-left text-sm text-gray-700 dark:text-gray-300 w-full">
<p className="w-full text-left text-sm text-gray-700 dark:text-gray-300">
By clicking continue, you agree to our{' '}
<Link
to="https://www.iubenda.com/terms-and-conditions/76608149"

4
frontend/app/src/pages/authenticated.tsx
View File

@@ -151,12 +151,12 @@ export default function Authenticated() {
return (
<PostHogProvider user={userQuery.data}>
<SupportChat user={userQuery.data}>
<div className="flex flex-row flex-1 w-full h-full">
<div className="flex h-full w-full flex-1 flex-row">
<MainNav
user={userQuery.data}
tenantMemberships={listMembershipsQuery.data?.rows || []}
/>
<div className="pt-16 flex-grow overflow-y-auto overflow-x-hidden">
<div className="flex-grow overflow-y-auto overflow-x-hidden pt-16">
<Outlet context={ctx} />
</div>
</div>

2
frontend/app/src/pages/error/index.tsx
View File

@@ -12,7 +12,7 @@ export default function ErrorBoundary() {
console.error(error);
const Layout: React.FC<PropsWithChildren> = ({ children }) => (
<div className="flex flex-row justify-center items-center flex-1 w-full h-full">
<div className="flex h-full w-full flex-1 flex-row items-center justify-center">
<div className="flex flex-col space-y-2 text-center">{children}</div>
</div>
);

2
frontend/app/src/pages/main/info/components/version-info.tsx
View File

@@ -19,7 +19,7 @@ export const VersionInfo: React.FC = () => {
if (isError || !data?.version) {
const errorMessage =
error instanceof Error ? error.message : 'Failed to fetch version info';
return <div className="text-red-500 text-xs">{errorMessage}</div>;
return <div className="text-xs text-red-500">{errorMessage}</div>;
}
return <div className="text-xs">{data.version}</div>;

24
frontend/app/src/pages/main/v1/events/components/additional-metadata.tsx
View File

@@ -44,29 +44,29 @@ export const AdditionalMetadata = memo(
const metadataCount = metadataEntries.length;
return (
<div className="flex items-center justify-start max-w-32">
<div className="flex max-w-32 items-center justify-start">
<Popover open={isOpen} onOpenChange={onOpenChange}>
<PopoverTrigger asChild>
<div className="flex items-center gap-1 cursor-pointer hover:bg-muted/50 rounded px-2 py-1 transition-colors">
<TagIcon className="h-3 w-3 text-muted-foreground flex-shrink-0" />
<span className="text-xs text-muted-foreground font-medium">
<div className="flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50">
<TagIcon className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
<span className="text-xs font-medium text-muted-foreground">
{metadataCount}
</span>
</div>
</PopoverTrigger>
<PopoverContent
className="w-80 p-0 shadow-md shadow-slate-800/30 z-[70]"
className="z-[70] w-80 p-0 shadow-md shadow-slate-800/30"
align={align}
>
<div className="p-3">
<div className="flex items-center gap-2 mb-3 pb-2 border-b">
<div className="mb-3 flex items-center gap-2 border-b pb-2">
<TagIcon className="h-4 w-4 text-muted-foreground" />
<span className="font-medium text-sm">
<span className="text-sm font-medium">
{title} ({metadataCount}{' '}
{metadataCount === 1 ? 'item' : 'items'})
</span>
</div>
<div className="space-y-2 max-h-60 overflow-y-auto">
<div className="max-h-60 space-y-2 overflow-y-auto">
{metadataEntries
.sort(([a], [b]) =>
a.toLowerCase().localeCompare(b.toLowerCase()),
@@ -74,15 +74,15 @@ export const AdditionalMetadata = memo(
.map(([key, value]) => (
<div
key={key}
className="group flex flex-col gap-1 p-2 rounded border hover:bg-muted/30 transition-colors cursor-pointer"
className="group flex cursor-pointer flex-col gap-1 rounded border p-2 transition-colors hover:bg-muted/30"
onClick={() => onClick?.({ key, value })}
>
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground tracking-wide">
<span className="text-xs font-medium tracking-wide text-muted-foreground">
{key}
</span>
</div>
<div className="text-sm break-all">
<div className="break-all text-sm">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
@@ -91,7 +91,7 @@ export const AdditionalMetadata = memo(
</div>
</TooltipTrigger>
<TooltipContent side="left" className="max-w-xs">
<pre className="text-xs whitespace-pre-wrap">
<pre className="whitespace-pre-wrap text-xs">
{JSON.stringify(value, null, 2)}
</pre>
</TooltipContent>

4
frontend/app/src/pages/main/v1/events/components/event-columns.tsx
View File

@@ -74,7 +74,7 @@ export const columns = ({
cell: ({ row }) => (
<div className="w-full">
<Button
className="cursor-pointer pl-0 text-left h-auto whitespace-normal min-w-0 justify-start"
className="h-auto min-w-0 cursor-pointer justify-start whitespace-normal pl-0 text-left"
variant="link"
onClick={() => {
onRowClick?.(row.original);
@@ -221,7 +221,7 @@ function WorkflowRunSummary({ event }: { event: V1Event }) {
];
return (
<div className="flex flex-row gap-2 items-center justify-start">
<div className="flex flex-row items-center justify-start gap-2">
{badges.map(
({ variant, count, label }) =>
count > 0 && (

20
frontend/app/src/pages/main/v1/events/index.tsx
View File

@@ -139,7 +139,7 @@ export default function Events() {
}}
onResetFilters={resetFilters}
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No events found</p>
<div className="w-fit">
<DocsButton
@@ -166,17 +166,17 @@ export function ExpandedEventContent({ event }: { event: V1Event }) {
return (
<div className="w-full">
<div className="space-y-6">
<div className="flex flex-col justify-center items-start gap-3 pb-4 border-b text-sm">
<div className="flex flex-row items-center gap-3 min-w-0 w-full">
<span className="text-muted-foreground font-medium shrink-0">
<div className="flex flex-col items-start justify-center gap-3 border-b pb-4 text-sm">
<div className="flex w-full min-w-0 flex-row items-center gap-3">
<span className="shrink-0 font-medium text-muted-foreground">
Key
</span>
<div className="px-2 py-1 overflow-x-auto min-w-0 flex-1">
<div className="min-w-0 flex-1 overflow-x-auto px-2 py-1">
<span className="whitespace-nowrap">{event.key}</span>
</div>
</div>
<div className="flex items-center gap-3">
<span className="text-muted-foreground font-medium">Seen</span>
<span className="font-medium text-muted-foreground">Seen</span>
<span className="font-medium">
<RelativeDate date={event.metadata.createdAt} />
</span>
@@ -185,7 +185,7 @@ export function ExpandedEventContent({ event }: { event: V1Event }) {
<div className="space-y-4">
<div>
<h3 className="text-sm font-semibold text-foreground mb-2">
<h3 className="mb-2 text-sm font-semibold text-foreground">
Payload
</h3>
<Separator className="mb-3" />
@@ -196,7 +196,7 @@ export function ExpandedEventContent({ event }: { event: V1Event }) {
{hasScope && filters && filters.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-foreground mb-2">
<h3 className="mb-2 text-sm font-semibold text-foreground">
Filters
</h3>
<Separator className="mb-3" />
@@ -208,7 +208,7 @@ export function ExpandedEventContent({ event }: { event: V1Event }) {
)}
<div>
<h3 className="text-sm font-semibold text-foreground mb-2">Runs</h3>
<h3 className="mb-2 text-sm font-semibold text-foreground">Runs</h3>
<Separator className="mb-3" />
<EventWorkflowRunsList event={event} />
</div>
@@ -251,7 +251,7 @@ function FiltersSection({
return (
<div className="w-full overflow-x-auto">
<div className="min-w-[500px] [&_th:last-child]:w-[60px] [&_th:last-child]:min-w-[60px] [&_th:last-child]:max-w-[60px] [&_td:last-child]:w-[60px] [&_td:last-child]:min-w-[60px] [&_td:last-child]:max-w-[60px]">
<div className="min-w-[500px] [&_td:last-child]:w-[60px] [&_td:last-child]:min-w-[60px] [&_td:last-child]:max-w-[60px] [&_th:last-child]:w-[60px] [&_th:last-child]:min-w-[60px] [&_th:last-child]:max-w-[60px]">
<DataTable
columns={columns}
data={filters}

4
frontend/app/src/pages/main/v1/filters/components/filter-detail-view.tsx
View File

@@ -232,7 +232,7 @@ export function FilterDetailView({ filterId }: FilterDetailViewProps) {
id="expression"
value={filter.expression}
disabled
className="bg-muted min-h-[100px] font-mono disabled:cursor-text"
className="min-h-[100px] bg-muted font-mono disabled:cursor-text"
/>
)}
</div>
@@ -260,7 +260,7 @@ export function FilterDetailView({ filterId }: FilterDetailViewProps) {
id="payload"
value={JSON.stringify(filter.payload || {}, null, 2)}
disabled
className="bg-muted min-h-[120px] font-mono text-sm disabled:cursor-text"
className="min-h-[120px] bg-muted font-mono text-sm disabled:cursor-text"
/>
)}
</div>

2
frontend/app/src/pages/main/v1/filters/index.tsx
View File

@@ -93,7 +93,7 @@ export default function Filters() {
pageCount={numFilters}
getRowId={(row) => row.metadata.id}
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No filters found</p>
<div className="w-fit">
<DocsButton

14
frontend/app/src/pages/main/v1/index.tsx
View File

@@ -48,10 +48,10 @@ function Main() {
return (
<SidePanelProvider>
<div className="flex flex-row flex-1 w-full h-full">
<div className="flex h-full w-full flex-1 flex-row">
<Sidebar memberships={memberships} />
<div
className="px-8 py-4 flex-grow overflow-y-auto overflow-x-hidden"
className="flex-grow overflow-y-auto overflow-x-hidden px-8 py-4"
style={{ containerType: 'inline-size' }}
>
<Outlet context={childCtx} />
@@ -105,12 +105,12 @@ function Sidebar({ className, memberships }: SidebarProps) {
return (
<div
className={cn(
'h-full border-r overflow-y-auto w-full md:min-w-64 md:w-64 top-16 absolute z-[100] md:relative md:top-0 md:bg-[unset] md:dark:bg-[unset] bg-slate-100 dark:bg-slate-900',
'absolute top-16 z-[100] h-full w-full overflow-y-auto border-r bg-slate-100 dark:bg-slate-900 md:relative md:top-0 md:w-64 md:min-w-64 md:bg-[unset] md:dark:bg-[unset]',
className,
)}
>
<div className="flex flex-col justify-between items-start space-y-4 px-4 py-4 h-full pb-16 md:pb-4">
<div className="grow w-full">
<div className="flex h-full flex-col items-start justify-between space-y-4 px-4 py-4 pb-16 md:pb-4">
<div className="w-full grow">
<div className="py-2">
<h2 className="mb-2 text-lg font-semibold tracking-tight">
Activity
@@ -329,7 +329,7 @@ function SidebarButtonPrimary({
className="w-full"
>
{primaryLink}
<CollapsibleContent className={'space-y-2 ml-4 border-l border-muted'}>
<CollapsibleContent className={'ml-4 space-y-2 border-l border-muted'}>
{collapsibleChildren}
</CollapsibleContent>
</Collapsible>
@@ -357,7 +357,7 @@ function SidebarButtonSecondary({
variant="ghost"
size="sm"
className={cn(
'w-[calc(100%-3px)] justify-start pl-3 pr-0 ml-1 mr-3 my-[1px]',
'my-[1px] ml-1 mr-3 w-[calc(100%-3px)] justify-start pl-3 pr-0',
selected && 'bg-slate-200 dark:bg-slate-800',
)}
>

4
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/github-button.tsx
View File

@@ -16,7 +16,7 @@ export default function GithubButton({
}
return (
<div className="text-sm w-fit flex flex-row items-center gap-2 text-gray-700 dark:text-gray-300">
<div className="flex w-fit flex-row items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
{prefix}
<a
href={getHref(buildConfig, commitSha)}
@@ -24,7 +24,7 @@ export default function GithubButton({
rel="noreferrer"
>
<Button variant="link" className="flex items-center gap-1" size={'xs'}>
<GitHubLogoIcon className="w-4 h-4" />
<GitHubLogoIcon className="h-4 w-4" />
{commitSha
? commitSha.substring(0, 7)
: `${buildConfig.githubRepository.repo_owner}/${buildConfig.githubRepository.repo_name}`}

34
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-activity.tsx
View File

@@ -80,12 +80,12 @@ function EventList({
const events = getLogsQuery.data?.rows || [];
return (
<div className="flex flex-col gap-2 mt-4">
<div className="mt-4 flex flex-col gap-2">
{getLogsQuery.isLoading && <Spinner />}
{events.length === 0 && (
<Card className="bg-muted/30 h-[400px]">
<Card className="h-[400px] bg-muted/30">
<CardHeader>
<CardTitle className="tracking-wide text-sm">
<CardTitle className="text-sm tracking-wide">
No events found
</CardTitle>
</CardHeader>
@@ -106,14 +106,14 @@ function EventList({
function Build({ buildId, back }: { buildId: string; back: () => void }) {
return (
<div className="flex flex-col justify-start items-start gap-4 mt-8">
<div className="flex flex-row justify-start gap-4 items-center">
<div className="mt-8 flex flex-col items-start justify-start gap-4">
<div className="flex flex-row items-center justify-start gap-4">
<Button
onClick={back}
variant="link"
className="flex items-center gap-1"
>
<ChevronLeftIcon className="w-4 h-4" />
<ChevronLeftIcon className="h-4 w-4" />
Back
</Button>
</div>
@@ -133,14 +133,14 @@ function IaCDebug({
back: () => void;
}) {
return (
<div className="flex flex-col justify-start items-start gap-4 mt-8">
<div className="flex flex-row justify-start gap-4 items-center">
<div className="mt-8 flex flex-col items-start justify-start gap-4">
<div className="flex flex-row items-center justify-start gap-4">
<Button
onClick={back}
variant="link"
className="flex items-center gap-1"
>
<ChevronLeftIcon className="w-4 h-4" />
<ChevronLeftIcon className="h-4 w-4" />
Back
</Button>
</div>
@@ -165,12 +165,12 @@ function ManagedWorkerEventCard({
setDeployKey: (key: string) => void;
}) {
return (
<Card className=" bg-muted/30">
<Card className="bg-muted/30">
<CardHeader>
<div className="flex flex-row justify-between items-center text-sm">
<div className="flex flex-row justify-between gap-3 items-center">
<div className="flex flex-row items-center justify-between text-sm">
<div className="flex flex-row items-center justify-between gap-3">
<EventIndicator severity={event.status} />
<CardTitle className="tracking-wide text-sm">
<CardTitle className="text-sm tracking-wide">
{event.message}
</CardTitle>
</div>
@@ -178,7 +178,7 @@ function ManagedWorkerEventCard({
</div>
<CardDescription className="mt-2">{event.message}</CardDescription>
</CardHeader>
<CardContent className="p-0 z-10 bg-background"></CardContent>
<CardContent className="z-10 bg-background p-0"></CardContent>
{renderCardFooter(managedWorker, event, setBuildId, setDeployKey)}
</Card>
);
@@ -204,7 +204,7 @@ function renderCardFooter(
setBuildId(data.build_id);
}}
>
<ArrowRightIcon className="w-4 h-4 mr-1" />
<ArrowRightIcon className="mr-1 h-4 w-4" />
View build info
</Button>,
);
@@ -219,7 +219,7 @@ function renderCardFooter(
setDeployKey(data.deploy_key);
}}
>
<ArrowRightIcon className="w-4 h-4 mr-1" />
<ArrowRightIcon className="mr-1 h-4 w-4" />
View IaC debug info
</Button>,
);
@@ -256,7 +256,7 @@ function EventIndicator({ severity }: { severity: ManagedWorkerEventStatus }) {
<div
className={cn(
RUN_STATUS_VARIANTS[severity],
'rounded-full h-[6px] w-[6px]',
'h-[6px] w-[6px] rounded-full',
)}
/>
);

2
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-build.tsx
View File

@@ -16,7 +16,7 @@ export function ManagedWorkerBuild({ buildId }: { buildId: string }) {
const build = getBuildQuery.data;
return (
<div className="flex flex-col gap-4 w-full">
<div className="flex w-full flex-col gap-4">
<h4 className="text-lg font-semibold text-foreground">Build Overview</h4>
<div className="flex flex-row gap-4">
<div className="flex flex-col gap-2">

2
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-iac.tsx
View File

@@ -8,7 +8,7 @@ export function ManagedWorkerIaC({
deployKey: string;
}) {
return (
<div className="flex flex-col gap-4 w-full">
<div className="flex w-full flex-col gap-4">
<h4 className="text-lg font-semibold text-foreground">IaC Logs</h4>
<ManagedWorkerIaCLogs
managedWorkerId={managedWorkerId}

2
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-instances-columns.tsx
View File

@@ -15,7 +15,7 @@ export const columns: ColumnDef<InstanceWithMetadata>[] = [
<DataTableColumnHeader column={column} title="Name" />
),
cell: ({ row }) => (
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap text-md p-2">
<div className="text-md min-w-fit cursor-pointer whitespace-nowrap p-2 hover:underline">
{row.original.name}
</div>
),

14
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-instances-table.tsx
View File

@@ -51,7 +51,7 @@ export function ManagedWorkerInstancesTable({
<CardHeader>
<CardTitle>No Instances</CardTitle>
<CardDescription>
<p className="text-gray-700 dark:text-gray-300 mb-4">
<p className="mb-4 text-gray-700 dark:text-gray-300">
There are no instances currently active for this managed worker
pool.
</p>
@@ -64,19 +64,19 @@ export function ManagedWorkerInstancesTable({
const card: React.FC<{ data: Instance }> = ({ data }) => (
<div
key={data.instanceId}
className="border overflow-hidden shadow rounded-lg"
className="overflow-hidden rounded-lg border shadow"
>
<div className="p-4 sm:p-6">
<div className="flex items-center justify-between">
<h3 className="text-lg leading-6 font-medium text-foreground">
<h3 className="text-lg font-medium leading-6 text-foreground">
{data.name}
</h3>
<StateBadge state={data.state} />
</div>
<div className="mt-2 flex items-center text-sm text-background-secondary">
<div className="text-background-secondary mt-2 flex items-center text-sm">
CPUs: {data.cpus} {data.cpuKind}
</div>
<div className="mt-2 flex items-center text-sm text-background-secondary">
<div className="text-background-secondary mt-2 flex items-center text-sm">
Memory: {data.memoryMb} MB
</div>
</div>
@@ -96,9 +96,9 @@ export function ManagedWorkerInstancesTable({
aria-label="Toggle card/table view"
>
{!cardToggle ? (
<BiCard className={`h-4 w-4 `} />
<BiCard className={`h-4 w-4`} />
) : (
<BiTable className={`h-4 w-4 `} />
<BiTable className={`h-4 w-4`} />
)}
</Button>,
<Button

2
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-logs.tsx
View File

@@ -109,7 +109,7 @@ export function ManagedWorkerLogs({
return (
<div className="flex flex-col gap-4">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<form
onSubmit={() =>
setQueryParams({

14
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/managed-worker-metrics.tsx
View File

@@ -122,11 +122,11 @@ export function ManagedWorkerMetrics({
return (
<div className="flex flex-col gap-4">
<div className="flex flex-row justify-between items-center mt-4">
<div className="mt-4 flex flex-row items-center justify-between">
<h3 className="text-xl font-bold leading-tight text-foreground">
Metrics
</h3>
<div className="flex flex-row justify-end items-center my-4 gap-2">
<div className="my-4 flex flex-row items-center justify-end gap-2">
{customTimeRange && [
<Button
key="clear"
@@ -135,9 +135,9 @@ export function ManagedWorkerMetrics({
}}
variant="outline"
size="sm"
className="text-xs h-9 py-2"
className="h-9 py-2 text-xs"
>
<XCircleIcon className="h-[18px] w-[18px] mr-2" />
<XCircleIcon className="mr-2 h-[18px] w-[18px]" />
Clear
</Button>,
<DateTimePicker
@@ -186,7 +186,7 @@ export function ManagedWorkerMetrics({
</div>
</div>
<Separator />
<h4 className="text-lg font-bold leading-tight text-foreground mt-2 ml-4">
<h4 className="ml-4 mt-2 text-lg font-bold leading-tight text-foreground">
CPU
</h4>
<Separator />
@@ -201,7 +201,7 @@ export function ManagedWorkerMetrics({
showYAxis={true}
/>
}
<h4 className="text-lg font-bold leading-tight text-foreground mt-16 ml-4">
<h4 className="ml-4 mt-16 text-lg font-bold leading-tight text-foreground">
Memory
</h4>
<Separator />
@@ -218,7 +218,7 @@ export function ManagedWorkerMetrics({
showYAxis={true}
/>
}
<h4 className="text-lg font-bold leading-tight text-foreground mt-16 ml-4">
<h4 className="ml-4 mt-16 text-lg font-bold leading-tight text-foreground">
Disk
</h4>
<Separator />

12
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/components/update-form.tsx
View File

@@ -488,7 +488,7 @@ export default function UpdateWorkerForm({
<AccordionTrigger className="text-lg font-semibold text-foreground">
Build configuration
</AccordionTrigger>
<AccordionContent className="max-w-3xl grid gap-4">
<AccordionContent className="grid max-w-3xl gap-4">
<Label htmlFor="role">Github account</Label>
<Controller
control={control}
@@ -689,7 +689,7 @@ export default function UpdateWorkerForm({
Infra-As-Code
</TabsTrigger>
</TabsList>
<TabsContent value="iac" className="pt-4 grid gap-4">
<TabsContent value="iac" className="grid gap-4 pt-4">
<a
href="https://docs.hatchet.run/compute/cpu"
className="underline"
@@ -697,7 +697,7 @@ export default function UpdateWorkerForm({
Learn how to configure infra-as-code.
</a>
</TabsContent>
<TabsContent value="ui" className="pt-4 grid gap-4">
<TabsContent value="ui" className="grid gap-4 pt-4">
<Label htmlFor="region">Region</Label>
<Select
value={region?.toString()}
@@ -819,7 +819,7 @@ export default function UpdateWorkerForm({
</TabsTrigger>
))}
</TabsList>
<TabsContent value="Static" className="pt-4 grid gap-4">
<TabsContent value="Static" className="grid gap-4 pt-4">
<Label htmlFor="numReplicas">Number of replicas</Label>
<Controller
control={control}
@@ -852,7 +852,7 @@ export default function UpdateWorkerForm({
</TabsContent>
<TabsContent
value="Autoscaling"
className="pt-4 grid gap-4"
className="grid gap-4 pt-4"
>
<Label htmlFor="minAwakeReplicas">Min Replicas</Label>
<Controller
@@ -908,7 +908,7 @@ export default function UpdateWorkerForm({
name="runtimeConfig.autoscaling.scaleToZero"
render={({ field }) => {
return (
<div className="flex flex-row gap-4 items-center">
<div className="flex flex-row items-center gap-4">
<Label htmlFor="scaleToZero">
Scale to zero during periods of inactivity?
</Label>

22
frontend/app/src/pages/main/v1/managed-workers/$managed-worker/index.tsx
View File

@@ -90,17 +90,17 @@ export default function ExpandedWorkflow() {
const managedWorker = managedWorkerQuery.data;
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row gap-4 items-center">
<CpuChipIcon className="h-6 w-6 text-foreground mt-1" />
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center gap-4">
<CpuChipIcon className="mt-1 h-6 w-6 text-foreground" />
<h2 className="text-2xl font-bold leading-tight text-foreground">
{managedWorker.name}
</h2>
</div>
</div>
<div className="flex flex-row justify-start items-center mt-4 gap-6">
<div className="mt-4 flex flex-row items-center justify-start gap-6">
<div className="text-sm text-gray-700 dark:text-gray-300">
Created {relativeDate(managedWorker.metadata.createdAt)}
</div>
@@ -111,7 +111,7 @@ export default function ExpandedWorkflow() {
/>
)}
</div>
<div className="flex flex-row justify-start items-center mt-4"></div>
<div className="mt-4 flex flex-row items-center justify-start"></div>
<Tabs defaultValue="activity">
<TabsList layout="underlined">
<TabsTrigger variant="underlined" value="activity">
@@ -134,7 +134,7 @@ export default function ExpandedWorkflow() {
<ManagedWorkerActivity managedWorker={managedWorker} />
</TabsContent>
<TabsContent value="instances">
<h3 className="text-xl font-bold leading-tight text-foreground mt-4">
<h3 className="mt-4 text-xl font-bold leading-tight text-foreground">
Instances
</h3>
<Separator className="my-4" />
@@ -143,7 +143,7 @@ export default function ExpandedWorkflow() {
/>
</TabsContent>
<TabsContent value="logs">
<h3 className="text-xl font-bold leading-tight text-foreground mt-4">
<h3 className="mt-4 text-xl font-bold leading-tight text-foreground">
Logs
</h3>
<Separator className="my-4" />
@@ -153,7 +153,7 @@ export default function ExpandedWorkflow() {
<ManagedWorkerMetrics managedWorker={managedWorker} />
</TabsContent>
<TabsContent value="configuration">
<h3 className="text-xl font-bold leading-tight text-foreground mt-4">
<h3 className="mt-4 text-xl font-bold leading-tight text-foreground">
Configuration
</h3>
<Separator className="my-4" />
@@ -164,7 +164,7 @@ export default function ExpandedWorkflow() {
fieldErrors={fieldErrors}
/>
<Separator className="my-4" />
<h4 className="text-lg font-bold leading-tight text-foreground mt-8">
<h4 className="mt-8 text-lg font-bold leading-tight text-foreground">
Danger Zone
</h4>
<Separator className="my-4" />

40
frontend/app/src/pages/main/v1/managed-workers/components/billing-required.tsx
View File

@@ -33,30 +33,30 @@ export function BillingRequired({
computeCostQuery.data?.creditsRemaining !== undefined;
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="border rounded-lg bg-card p-12 shadow-sm">
<div className="flex flex-col items-center text-center max-w-md mx-auto">
<div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center mb-6">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="rounded-lg border bg-card p-12 shadow-sm">
<div className="mx-auto flex max-w-md flex-col items-center text-center">
<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
<CpuChipIcon className="h-8 w-8 text-primary" />
</div>
<h3 className="text-2xl font-semibold mb-2">
<h3 className="mb-2 text-2xl font-semibold">
Ready to supercharge your task runs?
</h3>
<p className="text-muted-foreground mb-6">
<p className="mb-6 text-muted-foreground">
Unlock Managed Compute by adding a payment method. No commitment
required - you only pay for what you use!
</p>
{/* Pricing Information */}
<div className="border rounded-lg p-4 mb-6 bg-muted/10 w-full">
<div className="mb-6 w-full rounded-lg border bg-muted/10 p-4">
<div className="flex items-start">
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
<CurrencyDollarIcon className="h-5 w-5 text-primary" />
</div>
<div className="text-left flex-1">
<div className="flex-1 text-left">
<h4 className="font-medium">
Transparent Pay as You Go Pricing
</h4>
@@ -85,32 +85,32 @@ export function BillingRequired({
</div>
</div>
<div className="flex justify-center mb-8 bg-muted/30 p-6 rounded-lg">
<div className="grid grid-cols-2 gap-x-8 gap-y-3 text-sm text-left">
<div className="mb-8 flex justify-center rounded-lg bg-muted/30 p-6">
<div className="grid grid-cols-2 gap-x-8 gap-y-3 text-left text-sm">
<div className="flex items-start">
<span className="text-primary mr-2 flex items-center">•</span>
<span className="mr-2 flex items-center text-primary">•</span>
<span>Auto-scaling workers based on slots</span>
</div>
<div className="flex items-start">
<span className="text-primary mr-2 flex items-center">•</span>
<span className="mr-2 flex items-center text-primary">•</span>
<span>Zero infrastructure headaches</span>
</div>
<div className="flex items-start">
<span className="text-primary mr-2 flex items-center">•</span>
<span className="mr-2 flex items-center text-primary">•</span>
<span>Multiple regions and machine types</span>
</div>
<div className="flex items-start">
<span className="text-primary mr-2 flex items-center">•</span>
<span className="mr-2 flex items-center text-primary">•</span>
<span>No cold starts</span>
</div>
</div>
</div>
<div className="flex flex-col gap-4 w-full">
<div className="flex w-full flex-col gap-4">
<Button
onClick={manageClicked}
disabled={portalLoading}
className="min-w-40 py-6 px-8 text-base"
className="min-w-40 px-8 py-6 text-base"
size="lg"
>
{portalLoading ? 'Loading...' : 'Add Payment Method →'}
@@ -133,7 +133,7 @@ export function BillingRequired({
>
<Button
variant="outline"
className="min-w-40 py-6 px-8 text-base w-full"
className="w-full min-w-40 px-8 py-6 text-base"
size="lg"
>
Deploy a Demo Template for Free
@@ -159,7 +159,7 @@ export function BillingRequired({
>
<Button
variant="ghost"
className="min-w-40 py-6 px-8 text-base w-full flex items-center justify-center gap-2"
className="flex w-full min-w-40 items-center justify-center gap-2 px-8 py-6 text-base"
size="lg"
>
<CalendarIcon className="h-5 w-5" />

6
frontend/app/src/pages/main/v1/managed-workers/components/managed-worker-columns.tsx
View File

@@ -15,7 +15,7 @@ export const columns: (tenantId: string) => ColumnDef<ManagedWorker>[] = (
),
cell: ({ row }) => (
<Link to={`/tenants/${tenantId}/workflows/${row.original.metadata.id}`}>
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap text-md p-2">
<div className="text-md min-w-fit cursor-pointer whitespace-nowrap p-2 hover:underline">
{row.original.name}
</div>
</Link>
@@ -53,11 +53,11 @@ export const columns: (tenantId: string) => ColumnDef<ManagedWorker>[] = (
accessorKey: 'chevron',
cell: ({ row }) => {
return (
<div className="flex gap-2 justify-end">
<div className="flex justify-end gap-2">
<Link
to={`/tenants/${tenantId}/workflows/${row.original.metadata.id}`}
>
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap text-md p-2">
<div className="text-md min-w-fit cursor-pointer whitespace-nowrap p-2 hover:underline">
<ChevronRightIcon
className="h-5 w-5 flex-none text-gray-700 dark:text-gray-300"
aria-hidden="true"

16
frontend/app/src/pages/main/v1/managed-workers/components/managed-workers-table.tsx
View File

@@ -57,7 +57,7 @@ export function ManagedWorkersTable() {
<CardHeader>
<CardTitle>No Managed Services</CardTitle>
<CardDescription>
<p className="text-gray-700 dark:text-gray-300 mb-4">
<p className="mb-4 text-gray-700 dark:text-gray-300">
There are no managed services created in this tenant.
</p>
</CardDescription>
@@ -83,11 +83,11 @@ export function ManagedWorkersTable() {
return (
<div
key={data.metadata?.id}
className="border overflow-hidden shadow rounded-lg"
className="overflow-hidden rounded-lg border shadow"
>
<div className="px-4 py-5 sm:p-6 gap-1 flex flex-col">
<div className="flex flex-row gap-2 items-center">
<CpuChipIcon className="h-6 w-6 text-foreground mt-1" />
<div className="flex flex-col gap-1 px-4 py-5 sm:p-6">
<div className="flex flex-row items-center gap-2">
<CpuChipIcon className="mt-1 h-6 w-6 text-foreground" />
<h3 className="text-lg font-semibold leading-tight text-foreground">
{data.name}
</h3>
@@ -107,7 +107,7 @@ export function ManagedWorkersTable() {
</p>
</div>
<div className="px-4 py-4 sm:px-6">
<div className="text-sm text-background-secondary">
<div className="text-background-secondary text-sm">
<Link
to={`/tenants/${tenantId}/managed-workers/${data.metadata?.id}`}
>
@@ -131,9 +131,9 @@ export function ManagedWorkersTable() {
aria-label="Toggle card/table view"
>
{!cardToggle ? (
<BiCard className={`h-4 w-4 `} />
<BiCard className={`h-4 w-4`} />
) : (
<BiTable className={`h-4 w-4 `} />
<BiTable className={`h-4 w-4`} />
)}
</Button>,
<Button

8
frontend/app/src/pages/main/v1/managed-workers/components/monthly-usage-card.tsx
View File

@@ -21,8 +21,8 @@ export function MonthlyUsageCard({
return (
<Card className="w-full">
<CardHeader className="pb-2">
<CardTitle className="text-md font-medium flex items-center">
<CurrencyDollarIcon className="h-5 w-5 mr-2 text-primary" />
<CardTitle className="text-md flex items-center font-medium">
<CurrencyDollarIcon className="mr-2 h-5 w-5 text-primary" />
Monthly Usage
</CardTitle>
</CardHeader>
@@ -48,8 +48,8 @@ export function MonthlyUsageCard({
return (
<Card className="w-full">
<CardHeader className="pb-2">
<CardTitle className="text-md font-medium flex items-center">
<CurrencyDollarIcon className="h-5 w-5 mr-2 text-primary" />
<CardTitle className="text-md flex items-center font-medium">
<CurrencyDollarIcon className="mr-2 h-5 w-5 text-primary" />
Monthly Usage
</CardTitle>
<CardDescription>Current billing period</CardDescription>

26
frontend/app/src/pages/main/v1/managed-workers/create/components/create-worker-form.tsx
View File

@@ -479,7 +479,7 @@ export default function CreateWorkerForm({
Configure the Github repository the service should deploy from.
</div>
<div className="max-w-3xl grid gap-4">
<div className="grid max-w-3xl gap-4">
<Label htmlFor="role">Github account</Label>
<Controller
control={control}
@@ -684,7 +684,7 @@ export default function CreateWorkerForm({
Infra-As-Code
</TabsTrigger>
</TabsList>
<TabsContent value="iac" className="pt-4 grid gap-4">
<TabsContent value="iac" className="grid gap-4 pt-4">
<a
href="https://docs.hatchet.run/compute/cpu"
className="underline"
@@ -692,7 +692,7 @@ export default function CreateWorkerForm({
Learn how to configure infra-as-code.
</a>
</TabsContent>
<TabsContent value="ui" className="pt-4 grid gap-4">
<TabsContent value="ui" className="grid gap-4 pt-4">
<Label htmlFor="region">Region</Label>
<Select
value={region?.toString()}
@@ -813,7 +813,7 @@ export default function CreateWorkerForm({
</TabsTrigger>
))}
</TabsList>
<TabsContent value="Static" className="pt-4 grid gap-4">
<TabsContent value="Static" className="grid gap-4 pt-4">
<Label htmlFor="numReplicas">
Number of replicas (max: {getMaxReplicas})
</Label>
@@ -850,7 +850,7 @@ export default function CreateWorkerForm({
</div>
)}
</TabsContent>
<TabsContent value="Autoscaling" className="pt-4 grid gap-4">
<TabsContent value="Autoscaling" className="grid gap-4 pt-4">
<Label htmlFor="minAwakeReplicas">Min Replicas</Label>
<Controller
control={control}
@@ -939,7 +939,7 @@ export default function CreateWorkerForm({
name="runtimeConfig.autoscaling.scaleToZero"
render={({ field }) => {
return (
<div className="flex flex-row gap-4 items-center">
<div className="flex flex-row items-center gap-4">
<Label htmlFor="scaleToZero">
Scale to zero during periods of inactivity?
</Label>
@@ -1147,11 +1147,11 @@ export default function CreateWorkerForm({
{(!isComputeAllowed ||
!isReplicaCountAllowed ||
!isAutoscalingMaxReplicasAllowed) && (
<div className="border border-red-300 dark:border-red-500 bg-red-50 dark:bg-red-900/30 p-4 rounded-md">
<h3 className="text-red-800 dark:text-red-200 font-medium mb-2">
<div className="rounded-md border border-red-300 bg-red-50 p-4 dark:border-red-500 dark:bg-red-900/30">
<h3 className="mb-2 font-medium text-red-800 dark:text-red-200">
Your configuration requires a plan upgrade
</h3>
<ul className="list-disc list-inside text-sm text-red-700 dark:text-red-300 space-y-1">
<ul className="list-inside list-disc space-y-1 text-sm text-red-700 dark:text-red-300">
{!isComputeAllowed && (
<li>
The selected machine type is not available on your current
@@ -1174,7 +1174,7 @@ export default function CreateWorkerForm({
rel="noopener noreferrer"
>
<Button variant="outline" size="sm">
<ArrowUpIcon className="h-4 w-4 mr-1" />
<ArrowUpIcon className="mr-1 h-4 w-4" />
Upgrade Plan
</Button>
</a>
@@ -1236,7 +1236,7 @@ const getBillingPortalUrl = () => {
};
export const UpgradeMessage = ({ feature }: { feature: string }) => (
<div className="flex flex-col gap-2 border border-yellow-400 dark:border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 p-4 rounded-md my-3">
<div className="my-3 flex flex-col gap-2 rounded-md border border-yellow-400 bg-yellow-50 p-4 dark:border-yellow-500 dark:bg-yellow-900/30">
<div className="flex items-start gap-2">
<span className="text-yellow-500 dark:text-yellow-400">⚠️</span>
<p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
@@ -1248,9 +1248,9 @@ export const UpgradeMessage = ({ feature }: { feature: string }) => (
<Button
variant="outline"
size="sm"
className="text-xs border-yellow-400 dark:border-yellow-500 text-yellow-700 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/50"
className="border-yellow-400 text-xs text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:text-yellow-300 dark:hover:bg-yellow-900/50"
>
<ArrowUpIcon className="h-3 w-3 mr-1" />
<ArrowUpIcon className="mr-1 h-3 w-3" />
Upgrade Plan
</Button>
</a>

10
frontend/app/src/pages/main/v1/managed-workers/create/index.tsx
View File

@@ -74,11 +74,11 @@ export default function CreateWorker() {
}
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row gap-4 items-center justify-between">
<ServerStackIcon className="h-6 w-6 text-foreground mt-1" />
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center justify-between gap-4">
<ServerStackIcon className="mt-1 h-6 w-6 text-foreground" />
<h2 className="text-2xl font-bold leading-tight text-foreground">
New Service
</h2>

134
frontend/app/src/pages/main/v1/managed-workers/demo-template/index.tsx
View File

@@ -348,9 +348,9 @@ func main() {
};
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row items-center mb-4">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="mb-4 flex flex-row items-center">
<Link to={`/tenants/${tenantId}/managed-workers`} className="mr-4">
<Button variant="ghost" size="icon">
<ArrowLeftIcon className="h-4 w-4" />
@@ -361,7 +361,7 @@ func main() {
</h2>
</div>
<Separator className="my-4" />
<div className="max-w-3xl mx-auto">
<div className="mx-auto max-w-3xl">
<Steps className="mt-6">
<Step
title="Select your template language"
@@ -369,29 +369,29 @@ func main() {
setOpen={setOverviewOpen}
>
<div className="grid gap-6">
<div className="bg-muted/30 p-4 rounded-lg mb-2">
<h4 className="font-medium mb-2">Demo Includes:</h4>
<div className="mb-2 rounded-lg bg-muted/30 p-4">
<h4 className="mb-2 font-medium">Demo Includes:</h4>
<ul className="space-y-2">
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>Sample workflow with 3 steps</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>1 managed service (limited resources)</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>Active for 1 hour</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>No payment method required</span>
@@ -400,7 +400,7 @@ func main() {
</div>
<div className="mb-4">
<h3 className="text-lg font-medium mb-4">
<h3 className="mb-4 text-lg font-medium">
Choose your programming language:
</h3>
<RadioGroup
@@ -418,7 +418,7 @@ func main() {
}
>
<Card
className={`p-4 border-2 ${selectedTemplate === TemplateOptions.QUICKSTART_TYPESCRIPT ? 'border-primary' : 'border-border'}`}
className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_TYPESCRIPT ? 'border-primary' : 'border-border'}`}
>
<div className="flex items-center space-x-3">
<RadioGroupItem
@@ -429,11 +429,11 @@ func main() {
<div className="grid gap-1">
<Label
htmlFor="typescript"
className="font-medium text-lg cursor-pointer"
className="cursor-pointer text-lg font-medium"
>
TypeScript
</Label>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Modern JavaScript with type safety.
</p>
</div>
@@ -449,7 +449,7 @@ func main() {
rel="noopener noreferrer"
className="inline-flex items-center text-sm font-medium text-primary hover:underline"
>
<GitHubLogoIcon className="h-4 w-4 mr-2" />
<GitHubLogoIcon className="mr-2 h-4 w-4" />
View TypeScript source on GitHub
<span className="ml-1">↗</span>
</a>
@@ -476,7 +476,7 @@ func main() {
}
>
<Card
className={`p-4 border-2 ${selectedTemplate === TemplateOptions.QUICKSTART_PYTHON ? 'border-primary' : 'border-border'}`}
className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_PYTHON ? 'border-primary' : 'border-border'}`}
>
<div className="flex items-center space-x-3">
<RadioGroupItem
@@ -487,11 +487,11 @@ func main() {
<div className="grid gap-1">
<Label
htmlFor="python"
className="font-medium text-lg cursor-pointer"
className="cursor-pointer text-lg font-medium"
>
Python
</Label>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Simple, readable syntax for rapid development.
</p>
</div>
@@ -507,7 +507,7 @@ func main() {
rel="noopener noreferrer"
className="inline-flex items-center text-sm font-medium text-primary hover:underline"
>
<GitHubLogoIcon className="h-4 w-4 mr-2" />
<GitHubLogoIcon className="mr-2 h-4 w-4" />
View Python source on GitHub
<span className="ml-1">↗</span>
</a>
@@ -532,7 +532,7 @@ func main() {
}
>
<Card
className={`p-4 border-2 ${selectedTemplate === TemplateOptions.QUICKSTART_GO ? 'border-primary' : 'border-border'}`}
className={`border-2 p-4 ${selectedTemplate === TemplateOptions.QUICKSTART_GO ? 'border-primary' : 'border-border'}`}
>
<div className="flex items-center space-x-3">
<RadioGroupItem
@@ -543,11 +543,11 @@ func main() {
<div className="grid gap-1">
<Label
htmlFor="go"
className="font-medium text-lg cursor-pointer"
className="cursor-pointer text-lg font-medium"
>
Go
</Label>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Efficient, concurrent programming language.
</p>
</div>
@@ -562,7 +562,7 @@ func main() {
rel="noopener noreferrer"
className="inline-flex items-center text-sm font-medium text-primary hover:underline"
>
<GitHubLogoIcon className="h-4 w-4 mr-2" />
<GitHubLogoIcon className="mr-2 h-4 w-4" />
View Go source on GitHub
<span className="ml-1">↗</span>
</a>
@@ -581,7 +581,7 @@ func main() {
</RadioGroup>
</div>
<Button onClick={handleConfirmInfo} className="w-fit mt-2">
<Button onClick={handleConfirmInfo} className="mt-2 w-fit">
Continue
</Button>
</div>
@@ -594,16 +594,16 @@ func main() {
disabled={!infoConfirmed}
>
<div className="grid gap-4">
<div className="border rounded-lg bg-card p-6 shadow-sm">
<div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="flex items-start space-x-4">
<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10">
<PlayIcon className="h-5 w-5 text-primary" />
</div>
<div className="flex-1">
<h3 className="text-xl font-medium mb-2">
<h3 className="mb-2 text-xl font-medium">
Ready to Deploy
</h3>
<p className="text-muted-foreground mb-4">
<p className="mb-4 text-muted-foreground">
Click the button below to deploy your{' '}
{selectedTemplate
.replace('QUICKSTART_', '')
@@ -612,11 +612,11 @@ func main() {
workflow that you can use to explore the features.
</p>
<div className="bg-muted/30 p-4 rounded-lg mb-6">
<h4 className="font-medium mb-2">What happens next:</h4>
<div className="mb-6 rounded-lg bg-muted/30 p-4">
<h4 className="mb-2 font-medium">What happens next:</h4>
<ul className="space-y-2">
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>
@@ -625,7 +625,7 @@ func main() {
</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>
@@ -633,7 +633,7 @@ func main() {
</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center">
<span className="mr-2 flex items-center text-primary">
•
</span>
<span>
@@ -645,21 +645,21 @@ func main() {
</div>
{deploying && (
<div className="border rounded-lg p-4 mb-4 bg-muted/20">
<div className="flex items-center mb-2">
<ArrowPathIcon className="h-4 w-4 mr-2 animate-spin" />
<div className="mb-4 rounded-lg border bg-muted/20 p-4">
<div className="mb-2 flex items-center">
<ArrowPathIcon className="mr-2 h-4 w-4 animate-spin" />
<h4 className="font-medium">
Deployment in progress...
</h4>
</div>
<p className="text-sm text-muted-foreground flex justify-between items-center">
<p className="flex items-center justify-between text-sm text-muted-foreground">
<span>{deploymentStatus}</span>
{deployedWorkerId && (
<a
href={`/tenants/${tenantId}/managed-workers/${deployedWorkerId}`}
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline ml-2"
className="ml-2 text-primary hover:underline"
>
View Logs
</a>
@@ -669,8 +669,8 @@ func main() {
)}
{deploymentError && (
<div className="border border-destructive rounded-lg p-4 mb-4 bg-destructive/10">
<h4 className="font-medium text-destructive mb-1">
<div className="mb-4 rounded-lg border border-destructive bg-destructive/10 p-4">
<h4 className="mb-1 font-medium text-destructive">
Deployment failed
</h4>
<p className="text-sm text-muted-foreground">
@@ -680,7 +680,7 @@ func main() {
)}
<div className="border-t pt-4">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div className="text-sm text-muted-foreground">
{deploying
? 'Deploying demo template...'
@@ -715,15 +715,15 @@ func main() {
>
<div className="grid gap-6">
{/* Success header */}
<div className="border rounded-lg bg-card p-6 shadow-sm">
<div className="flex items-center justify-center flex-col text-center py-4">
<div className="h-16 w-16 rounded-full bg-green-500/10 flex items-center justify-center mb-4">
<div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="flex flex-col items-center justify-center py-4 text-center">
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10">
<CheckCircleIcon className="h-8 w-8 text-green-500" />
</div>
<h3 className="text-xl font-medium mb-2">
<h3 className="mb-2 text-xl font-medium">
Demo Template Deployed!
</h3>
<p className="text-muted-foreground mb-4 max-w-md">
<p className="mb-4 max-w-md text-muted-foreground">
Your{' '}
{selectedTemplate
.replace('QUICKSTART_', '')
@@ -731,7 +731,7 @@ func main() {
demo template has been successfully deployed. You can now
explore the managed service features.
{isSimulation && (
<span className="block mt-2 text-amber-500 font-medium">
<span className="mt-2 block font-medium text-amber-500">
Note: This was a simulated deployment. No actual
resources were created.
</span>
@@ -741,16 +741,16 @@ func main() {
</div>
{/* Trigger Run Programmatically section */}
<div className="border rounded-lg bg-card p-6 shadow-sm">
<div className="flex items-start mb-4">
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3">
<div className="rounded-lg border bg-card p-6 shadow-sm">
<div className="mb-4 flex items-start">
<div className="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
<KeyIcon className="h-4 w-4 text-primary" />
</div>
<div className="flex-1">
<h4 className="font-medium mb-1">
<h4 className="mb-1 font-medium">
Trigger a Remote Run Programmatically
</h4>
<p className="text-sm text-muted-foreground mb-4">
<p className="mb-4 text-sm text-muted-foreground">
Run the following code locally to execute a task on the
deployed service.
</p>
@@ -759,11 +759,11 @@ func main() {
<Button
onClick={handleGenerateToken}
disabled={isGeneratingToken}
className="w-full mb-2"
className="mb-2 w-full"
>
{isGeneratingToken ? (
<>
<ArrowPathIcon className="h-4 w-4 mr-2 animate-spin" />
<ArrowPathIcon className="mr-2 h-4 w-4 animate-spin" />
Generating Token...
</>
) : (
@@ -772,11 +772,11 @@ func main() {
</Button>
) : (
<>
<div className="bg-green-500/10 text-green-600 p-3 rounded mb-4 text-sm">
<div className="mb-4 rounded bg-green-500/10 p-3 text-sm text-green-600">
API token successfully generated!
</div>
<p className="text-sm text-muted-foreground mb-2">
<p className="mb-2 text-sm text-muted-foreground">
This is the only time we will show you this auth
token. Make sure to copy it now.
</p>
@@ -788,7 +788,7 @@ func main() {
className="mb-3"
/>
<div className="flex space-x-2 mb-4">
<div className="mb-4 flex space-x-2">
<Button
type="button"
variant="outline"
@@ -809,8 +809,8 @@ func main() {
</div>
</>
)}
<div className="border-t pt-4 mt-2">
<h5 className="font-medium mb-2">Example Code</h5>
<div className="mt-2 border-t pt-4">
<h5 className="mb-2 font-medium">Example Code</h5>
<Tabs
value={selectedCodeTab}
onValueChange={setSelectedCodeTab}
@@ -851,11 +851,11 @@ func main() {
</div>
{/* What's next section */}
<div className="border rounded-lg bg-card p-6 shadow-sm">
<h4 className="font-medium mb-3">What's next?</h4>
<ul className="space-y-3 mb-4">
<div className="rounded-lg border bg-card p-6 shadow-sm">
<h4 className="mb-3 font-medium">What's next?</h4>
<ul className="mb-4 space-y-3">
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center mt-0.5">
<span className="mr-2 mt-0.5 flex items-center text-primary">
•
</span>
<span>
@@ -863,7 +863,7 @@ func main() {
</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center mt-0.5">
<span className="mr-2 mt-0.5 flex items-center text-primary">
•
</span>
<span>
@@ -871,13 +871,13 @@ func main() {
</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center mt-0.5">
<span className="mr-2 mt-0.5 flex items-center text-primary">
•
</span>
<span>Use the API to trigger additional task runs</span>
</li>
<li className="flex items-start">
<span className="text-primary mr-2 flex items-center mt-0.5">
<span className="mr-2 mt-0.5 flex items-center text-primary">
•
</span>
<span>Monitor task runs in the dashboard</span>
@@ -889,7 +889,7 @@ func main() {
<Link
to={`/tenants/${tenantId}/managed-workers/${deployedWorkerId}`}
>
<Button variant="default" className="w-full mb-4">
<Button variant="default" className="mb-4 w-full">
View Your Service
</Button>
</Link>

20
frontend/app/src/pages/main/v1/managed-workers/index.tsx
View File

@@ -110,9 +110,9 @@ export default function ManagedWorkers() {
return (
// TODO use correct modal component
<div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50">
<div className="bg-background border border-border rounded-lg shadow-lg max-w-md w-full p-6">
<h3 className="text-lg font-medium mb-4 text-foreground">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70">
<div className="w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg">
<h3 className="mb-4 text-lg font-medium text-foreground">
Plan Upgrade Required
</h3>
<p className="mb-4 text-muted-foreground">
@@ -131,7 +131,7 @@ export default function ManagedWorkers() {
to={`/tenants/${tenantId}/tenant-settings/billing-and-limits`}
>
<Button>
<ArrowUpIcon className="h-4 w-4 mr-2" />
<ArrowUpIcon className="mr-2 h-4 w-4" />
Upgrade Plan
</Button>
</Link>
@@ -142,22 +142,22 @@ export default function ManagedWorkers() {
};
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h2 className="text-2xl font-bold leading-tight text-foreground">
Managed Compute
</h2>
{canCreateMoreWorkerPools ? (
<Link to={`/tenants/${tenantId}/managed-workers/create`}>
<Button>
<PlusIcon className="w-4 h-4 mr-2" />
<PlusIcon className="mr-2 h-4 w-4" />
Add Service
</Button>
</Link>
) : (
<Button onClick={handleAddWorkerPool}>
<PlusIcon className="w-4 h-4 mr-2" />
<PlusIcon className="mr-2 h-4 w-4" />
Add Service ({workerPoolCount}/{getWorkerPoolLimit()})
</Button>
)}
@@ -168,7 +168,7 @@ export default function ManagedWorkers() {
) : (
<ManagedWorkersTable />
)}
<div className="mt-6 mb-6">
<div className="mb-6 mt-6">
<MonthlyUsageCard
computeCost={computeCostQuery.data}
isLoading={computeCostQuery.isLoading}

6
frontend/app/src/pages/main/v1/recurring/components/delete-cron.tsx
View File

@@ -58,16 +58,16 @@ export function DeleteCron({
function DeleteCronForm({ className, ...props }: DeleteCronFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete cron job</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to delete the cron job? This action will prevent
the run from running in the future and cannot be undone.
</div>
<div className="flex flex-row gap-4 justify-end">
<div className="flex flex-row justify-end gap-4">
<Button
variant="ghost"
onClick={() => {

2
frontend/app/src/pages/main/v1/recurring/components/recurring-columns.tsx
View File

@@ -110,7 +110,7 @@ export const columns = ({
),
cell: ({ row }) => (
<div className="flex flex-row items-center gap-4">
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap">
<div className="min-w-fit cursor-pointer whitespace-nowrap hover:underline">
<Link
to={`/tenants/${tenantId}/workflows/${row.original.workflowId}`}
>

2
frontend/app/src/pages/main/v1/recurring/index.tsx
View File

@@ -142,7 +142,7 @@ export default function CronsTable() {
onResetFilters={resetFilters}
showSelectedRows={false}
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No crons found</p>
<div className="w-fit">
<DocsButton

6
frontend/app/src/pages/main/v1/scheduled-runs/components/delete-scheduled-runs.tsx
View File

@@ -70,12 +70,12 @@ function DeleteScheduledRunForm({
...props
}: DeleteScheduledRunFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete scheduled run</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to delete the scheduled run?
{isFutureRun ? (
<>
@@ -89,7 +89,7 @@ function DeleteScheduledRunForm({
</>
)}
</div>
<div className="flex flex-row gap-4 justify-end">
<div className="flex flex-row justify-end gap-4">
<Button
variant="ghost"
onClick={() => {

20
frontend/app/src/pages/main/v1/scheduled-runs/components/expanded-scheduled-run-content.tsx
View File

@@ -16,40 +16,40 @@ export function ExpandedScheduledRunContent({
return (
<div className="w-full">
<div className="space-y-6">
<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 pb-4 border-b text-sm">
<span className="text-muted-foreground font-medium">Workflow</span>
<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 border-b pb-4 text-sm">
<span className="font-medium text-muted-foreground">Workflow</span>
<Link
to={`/tenants/${tenantId}/workflows/${scheduledRun.workflowId}`}
className="font-medium hover:underline truncate"
className="truncate font-medium hover:underline"
>
{scheduledRun.workflowName}
</Link>
<span className="text-muted-foreground font-medium">Trigger At</span>
<span className="font-medium text-muted-foreground">Trigger At</span>
<span className="font-medium">
<RelativeDate date={scheduledRun.triggerAt} />
</span>
<span className="text-muted-foreground font-medium">Status</span>
<span className="font-medium text-muted-foreground">Status</span>
<div>
<RunStatus status={scheduledRun.workflowRunStatus || 'SCHEDULED'} />
</div>
{scheduledRun.workflowRunId && (
<>
<span className="text-muted-foreground font-medium">
<span className="font-medium text-muted-foreground">
Workflow Run
</span>
<Link
to={`/tenants/${tenantId}/runs/${scheduledRun.workflowRunId}`}
className="font-medium hover:underline truncate"
className="truncate font-medium hover:underline"
>
{scheduledRun.workflowRunName || scheduledRun.workflowRunId}
</Link>
</>
)}
<span className="text-muted-foreground font-medium">Created At</span>
<span className="font-medium text-muted-foreground">Created At</span>
<span className="font-medium">
<RelativeDate date={scheduledRun.metadata.createdAt} />
</span>
@@ -58,7 +58,7 @@ export function ExpandedScheduledRunContent({
<div className="space-y-4">
{scheduledRun.input && (
<div>
<h3 className="text-sm font-semibold text-foreground mb-2">
<h3 className="mb-2 text-sm font-semibold text-foreground">
Payload
</h3>
<Separator className="mb-3" />
@@ -75,7 +75,7 @@ export function ExpandedScheduledRunContent({
{scheduledRun.additionalMetadata &&
Object.keys(scheduledRun.additionalMetadata).length > 0 && (
<div>
<h3 className="text-sm font-semibold text-foreground mb-2">
<h3 className="mb-2 text-sm font-semibold text-foreground">
Metadata
</h3>
<Separator className="mb-3" />

8
frontend/app/src/pages/main/v1/scheduled-runs/components/scheduled-runs-columns.tsx
View File

@@ -50,7 +50,7 @@ export const columns = ({
),
cell: ({ row }) => (
<div
className="cursor-pointer hover:underline min-w-fit whitespace-nowrap"
className="min-w-fit cursor-pointer whitespace-nowrap hover:underline"
onClick={() => onRowClick?.(row.original)}
>
{row.original.metadata.id}
@@ -70,7 +70,7 @@ export const columns = ({
cell: ({ row }) =>
row.original.workflowRunId ? (
<Link to={`/tenants/${tenantId}/runs/${row.original.workflowRunId}`}>
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap">
<div className="min-w-fit cursor-pointer whitespace-nowrap hover:underline">
{row.original.workflowRunName}
</div>
</Link>
@@ -107,7 +107,7 @@ export const columns = ({
),
cell: ({ row }) => (
<div
className="flex flex-row items-center gap-4 cursor-pointer"
className="flex cursor-pointer flex-row items-center gap-4"
onClick={() => onRowClick?.(row.original)}
>
<RelativeDate date={row.original.triggerAt} />
@@ -126,7 +126,7 @@ export const columns = ({
),
cell: ({ row }) => (
<div className="flex flex-row items-center gap-4">
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap">
<div className="min-w-fit cursor-pointer whitespace-nowrap hover:underline">
<a
href={`/tenants/${tenantId}/workflows/${row.original.workflowId}`}
>

2
frontend/app/src/pages/main/v1/scheduled-runs/index.tsx
View File

@@ -126,7 +126,7 @@ export default function ScheduledRunsTable({
<DataTable
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No runs found</p>
<div className="w-fit">
<DocsButton

14
frontend/app/src/pages/main/v1/task-runs-v1/actions.tsx
View File

@@ -196,7 +196,7 @@ const CancelByExternalIdsContent = ({ label, params }: ModalContentProps) => {
<p className="text-md">
Confirm to {label.toLowerCase()} the following runs:
</p>
<ul className="list-disc pl-4 ml-4">
<ul className="ml-4 list-disc pl-4">
{displayNames?.slice(0, 10).map((record) => (
<li className="font-semibold" key={record.metadata.id}>
{record.displayName}
@@ -258,9 +258,9 @@ export function ConfirmActionModal<TData extends IDGetter<TData>>({
return (
<Dialog open={isActionModalOpen} onOpenChange={setIsActionModalOpen}>
<DialogContent className="sm:max-w-[700px] py-8 max-h-[90%] overflow-auto z-[70]">
<DialogContent className="z-[70] max-h-[90%] overflow-auto py-8 sm:max-w-[700px]">
<DialogHeader className="gap-2">
<div className="flex flex-row justify-between items-center w-full">
<div className="flex w-full flex-row items-center justify-between">
<DialogTitle>{label} runs</DialogTitle>
</div>
</DialogHeader>
@@ -278,7 +278,7 @@ export function ConfirmActionModal<TData extends IDGetter<TData>>({
/>
</div>
<div className="flex flex-row items-center gap-3 justify-end pt-4 border-t">
<div className="flex flex-row items-center justify-end gap-3 border-t pt-4">
<Button
onClick={() => {
setIsActionModalOpen(false);
@@ -332,7 +332,7 @@ const BaseActionButton = ({
return (
<Button
size={'sm'}
className={cn('text-sm px-2 py-2 gap-2', className)}
className={cn('gap-2 px-2 py-2 text-sm', className)}
variant={'outline'}
disabled={disabled}
onClick={() => {
@@ -375,7 +375,7 @@ export const TaskRunActionButton = ({
<BaseActionButton
disabled={disabled}
params={{ ...params, actionType: 'cancel' }}
icon={<XCircleIcon className="w-4 h-4" />}
icon={<XCircleIcon className="h-4 w-4" />}
label={'Cancel'}
showModal={showModal}
className={className}
@@ -386,7 +386,7 @@ export const TaskRunActionButton = ({
<BaseActionButton
disabled={disabled}
params={{ ...params, actionType: 'replay' }}
icon={<Repeat1 className="w-4 h-4" />}
icon={<Repeat1 className="h-4 w-4" />}
label={'Replay'}
showModal={showModal}
className={className}

2
frontend/app/src/pages/main/v1/tenant-settings/alerting/components/create-email-group-dialog.tsx
View File

@@ -39,7 +39,7 @@ export function CreateEmailGroupDialog({
errors.emails?.message?.toString() || props.fieldErrors?.name;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Create an email group</DialogTitle>
<DialogDescription className="py-2">

4
frontend/app/src/pages/main/v1/tenant-settings/alerting/components/delete-email-group-form.tsx
View File

@@ -20,12 +20,12 @@ export function DeleteEmailGroupForm({
...props
}: DeleteEmailGroupFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete email group</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to delete this email group?
</div>
<div className="flex flex-row gap-4">

4
frontend/app/src/pages/main/v1/tenant-settings/alerting/components/delete-slack-form.tsx
View File

@@ -17,12 +17,12 @@ interface DeleteSlackFormProps {
export function DeleteSlackForm({ className, ...props }: DeleteSlackFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete webhook</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to delete the Slack webhook for channel{' '}
{props.slackWebhook.channelName} in team {props.slackWebhook.teamName}
?

4
frontend/app/src/pages/main/v1/tenant-settings/alerting/components/email-groups-columns.tsx
View File

@@ -53,7 +53,7 @@ export const columns = ({
{
id: 'enabled',
cell: ({ row }) => (
<div className="flex items-center space-x-2 justify-end">
<div className="flex items-center justify-end space-x-2">
{row.original.metadata.id != 'default' || alertTenantEmailsSet ? (
<Badge variant="successful">Enabled</Badge>
) : (
@@ -65,7 +65,7 @@ export const columns = ({
{
id: 'actions',
cell: ({ row }) => (
<div className="flex items-center space-x-2 justify-end mr-4">
<div className="mr-4 flex items-center justify-end space-x-2">
<DataTableRowActions
row={row}
actions={[

10
frontend/app/src/pages/main/v1/tenant-settings/alerting/index.tsx
View File

@@ -29,12 +29,12 @@ export default function Alerting() {
const hasSlackIntegration = integrations?.find((i) => i.name === 'slack');
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<h2 className="text-2xl font-semibold leading-tight text-foreground">
Alerting
</h2>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Manage alerts to get notified on task failure.
</p>
<Separator className="my-4" />
@@ -154,7 +154,7 @@ function EmailGroupsList() {
return (
<div>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Email Groups
</h3>
@@ -285,7 +285,7 @@ function SlackWebhooksList() {
return (
<div>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Slack Webhooks
</h3>

2
frontend/app/src/pages/main/v1/tenant-settings/api-tokens/components/create-token-dialog.tsx
View File

@@ -76,7 +76,7 @@ export function CreateTokenDialog({
}
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Create a new API token</DialogTitle>
</DialogHeader>

4
frontend/app/src/pages/main/v1/tenant-settings/api-tokens/components/revoke-token-form.tsx
View File

@@ -17,12 +17,12 @@ interface RevokeTokenFormProps {
export function RevokeTokenForm({ className, ...props }: RevokeTokenFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete token</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to revoke the API token {props.apiToken.name}?
This action will immediately prevent any services running with this
token from dispatching events or executing steps.

8
frontend/app/src/pages/main/v1/tenant-settings/api-tokens/index.tsx
View File

@@ -27,9 +27,9 @@ export default function APITokens() {
});
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h2 className="text-2xl font-semibold leading-tight text-foreground">
API Tokens
</h2>
@@ -41,7 +41,7 @@ export default function APITokens() {
Create API Token
</Button>
</div>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
API tokens are used by workers to connect with the Hatchet API and
engine.
</p>

4
frontend/app/src/pages/main/v1/tenant-settings/github/components/github-installations-columns.tsx
View File

@@ -17,8 +17,8 @@ export const columns = (
),
cell: ({ row }) => {
return (
<div className="flex flex-row gap-4 items-center">
<Avatar className="w-6 h-6">
<div className="flex flex-row items-center gap-4">
<Avatar className="h-6 w-6">
<AvatarImage src={row.original.account_avatar_url} />
<AvatarFallback />
</Avatar>

12
frontend/app/src/pages/main/v1/tenant-settings/github/index.tsx
View File

@@ -20,8 +20,8 @@ export default function Github() {
if (!cloudMeta || !hasGithubIntegration) {
return (
<div className="flex-grow h-full w-full">
<p className="text-gray-700 dark:text-gray-300 my-4">
<div className="h-full w-full flex-grow">
<p className="my-4 text-gray-700 dark:text-gray-300">
Not enabled for this tenant or instance.
</p>
</div>
@@ -29,12 +29,12 @@ export default function Github() {
}
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<h2 className="text-2xl font-semibold leading-tight text-foreground">
Github Integration
</h2>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Link your Github account to Hatchet to integrate with CI/CD and
workflow versioning.
</p>
@@ -91,7 +91,7 @@ function GithubInstallationsList() {
return (
<div>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Github Accounts
</h3>

2
frontend/app/src/pages/main/v1/tenant-settings/ingestors/components/create-sns-dialog.tsx
View File

@@ -63,7 +63,7 @@ export function CreateSNSDialog({
errors.topicArn?.message?.toString() || props.fieldErrors?.name;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Create a new SNS integration</DialogTitle>
</DialogHeader>

4
frontend/app/src/pages/main/v1/tenant-settings/ingestors/components/delete-sns-form.tsx
View File

@@ -17,12 +17,12 @@ interface DeleteSNSFormProps {
export function DeleteSNSForm({ className, ...props }: DeleteSNSFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete integration</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to revoke the SNS integration on Topic ARN{' '}
{props.snsIntegration.topicArn}? This action will immediately prevent
any SNS events from being sent to the Hatchet subscriber.

6
frontend/app/src/pages/main/v1/tenant-settings/ingestors/components/sns-integrations-columns.tsx
View File

@@ -17,7 +17,7 @@ const CopyIngestURL: React.FC<Props> = ({ ingestUrl }: Props) => {
return (
<Button
className="cursor-pointer flex flex-row gap-2 items-center mt-2 w-[200px]"
className="mt-2 flex w-[200px] cursor-pointer flex-row items-center gap-2"
variant="ghost"
onClick={() => {
navigator.clipboard.writeText(ingestUrl);
@@ -29,9 +29,9 @@ const CopyIngestURL: React.FC<Props> = ({ ingestUrl }: Props) => {
}}
>
{successCopy ? (
<CheckIcon className="w-4 h-4" />
<CheckIcon className="h-4 w-4" />
) : (
<CopyIcon className="w-4 h-4" />
<CopyIcon className="h-4 w-4" />
)}
{successCopy ? 'Copied' : 'Copy ingest URL'}
</Button>

8
frontend/app/src/pages/main/v1/tenant-settings/ingestors/index.tsx
View File

@@ -17,12 +17,12 @@ import { useCurrentTenantId } from '@/hooks/use-tenant';
export default function Ingestors() {
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<h2 className="text-2xl font-semibold leading-tight text-foreground">
Ingestors
</h2>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Ingestors are integrations that allow you to send events to Hatchet.
</p>
<Separator className="my-4" />
@@ -49,7 +49,7 @@ function SNSIntegrationsList() {
return (
<div>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
SNS Integrations
</h3>

2
frontend/app/src/pages/main/v1/tenant-settings/members/components/change-password-dialog.tsx
View File

@@ -59,7 +59,7 @@ export function ChangePasswordDialog({
const globalError = errors[''] as z.ZodIssue;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Change Password</DialogTitle>
</DialogHeader>

2
frontend/app/src/pages/main/v1/tenant-settings/members/components/create-invite-form.tsx
View File

@@ -58,7 +58,7 @@ export function CreateInviteForm({
errors.role?.message?.toString() || props.fieldErrors?.password;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Invite new member</DialogTitle>
</DialogHeader>

4
frontend/app/src/pages/main/v1/tenant-settings/members/components/delete-invite-form.tsx
View File

@@ -20,12 +20,12 @@ export function DeleteInviteForm({
...props
}: DeleteInviteFormProps) {
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Delete invite</DialogTitle>
</DialogHeader>
<div>
<div className="text-sm text-foreground mb-4">
<div className="mb-4 text-sm text-foreground">
Are you sure you want to delete this invite?
</div>
<div className="flex flex-row gap-4">

2
frontend/app/src/pages/main/v1/tenant-settings/members/components/update-invite-form.tsx
View File

@@ -54,7 +54,7 @@ export function UpdateInviteForm({
const roleError = errors.role?.message?.toString() || props.fieldErrors?.role;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Update invite</DialogTitle>
</DialogHeader>

2
frontend/app/src/pages/main/v1/tenant-settings/members/components/update-member-form.tsx
View File

@@ -51,7 +51,7 @@ export function UpdateMemberForm({
const roleError = errors.role?.message?.toString() || props.fieldErrors?.role;
return (
<DialogContent className="w-fit max-w-[80%] min-w-[500px]">
<DialogContent className="w-fit min-w-[500px] max-w-[80%]">
<DialogHeader>
<DialogTitle>Update member role</DialogTitle>
</DialogHeader>

10
frontend/app/src/pages/main/v1/tenant-settings/members/index.tsx
View File

@@ -62,8 +62,8 @@ export default function Members() {
const meta = useApiMeta();
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold leading-tight text-foreground">
Members and Invites
</h2>
@@ -136,14 +136,14 @@ function MembersList() {
{/* Owners Section - Only show in cloud mode */}
{isCloudEnabled && (
<>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Owners
</h3>
{organizationId && isCurrentUserOwner && (
<a
href={`/organizations/${organizationId}`}
className="text-primary hover:underline text-sm"
className="text-sm text-primary hover:underline"
>
Manage in Organization →
</a>
@@ -288,7 +288,7 @@ function InvitesList() {
return (
<div>
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Invites
</h3>

2
frontend/app/src/pages/main/v1/tenant-settings/overview/components/update-tenant-form.tsx
View File

@@ -55,7 +55,7 @@ export function UpdateTenantForm({
type="name"
autoCapitalize="none"
autoCorrect="off"
className=" min-w-[300px]"
className="min-w-[300px]"
disabled={props.isLoading}
/>
{nameError && (

10
frontend/app/src/pages/main/v1/tenant-settings/overview/index.tsx
View File

@@ -18,8 +18,8 @@ export default function TenantSettings() {
const { tenant } = useTenantDetails();
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<h2 className="text-2xl font-bold leading-tight text-foreground">
{capitalize(tenant?.name || '')} Overview
</h2>
@@ -108,7 +108,7 @@ const AnalyticsOptOut: React.FC = () => {
Analytics Opt-Out
</h2>
<Separator className="my-4" />
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Choose whether to opt out of all analytics tracking.
</p>
<div className="flex items-center space-x-2">
@@ -176,7 +176,7 @@ const InactivityTimeout: React.FC = () => {
<Separator className="my-4" />
{isDisabled ? (
<>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Inactivity timeout is currently <strong>disabled</strong>. This
feature automatically logs out users after a period of inactivity to
enhance security.
@@ -190,7 +190,7 @@ const InactivityTimeout: React.FC = () => {
</>
) : (
<>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Current inactivity logout timeout:{' '}
<strong>
{formatTimeoutMs(cloudMetadata?.inactivityLogoutMs)}

2
frontend/app/src/pages/main/v1/tenant-settings/resource-limits/components/resource-limit-columns.tsx
View File

@@ -40,7 +40,7 @@ export function LimitIndicator({
variant = indicatorVariants.exhausted;
}
return <div className={cn(variant, 'rounded-full h-[6px] w-[6px]')} />;
return <div className={cn(variant, 'h-[6px] w-[6px] rounded-full')} />;
}
const durationMap: Record<string, string> = {

14
frontend/app/src/pages/main/v1/tenant-settings/resource-limits/index.tsx
View File

@@ -31,18 +31,18 @@ export default function ResourceLimits() {
if (resourcePolicyQuery.isLoading || billingState.isLoading) {
return (
<div className="flex-grow h-full w-full px-4 sm:px-6 lg:px-8">
<div className="h-full w-full flex-grow px-4 sm:px-6 lg:px-8">
<Spinner />
</div>
);
}
return (
<div className="flex-grow h-full w-full">
<div className="h-full w-full flex-grow">
{billingEnabled && (
<>
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h2 className="text-2xl font-semibold leading-tight text-foreground">
Billing and Limits
</h2>
@@ -64,13 +64,13 @@ export default function ResourceLimits() {
</>
)}
<div className="mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div className="flex flex-row justify-between items-center">
<div className="mx-auto px-4 py-8 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<h3 className="text-xl font-semibold leading-tight text-foreground">
Resource Limits
</h3>
</div>
<p className="text-gray-700 dark:text-gray-300 my-4">
<p className="my-4 text-gray-700 dark:text-gray-300">
Resource limits are used to control the usage of resources within a
tenant. When a limit is reached, the system will take action based on
the limit type. Please upgrade your plan, or{' '}

6
frontend/app/src/pages/main/v1/webhooks/components/auth-method.tsx
View File

@@ -9,21 +9,21 @@ export const AuthMethod = ({
switch (authMethod) {
case V1WebhookAuthType.BASIC:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<UserCheck className="size-4" />
Basic
</span>
);
case V1WebhookAuthType.API_KEY:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<Key className="size-4" />
API Key
</span>
);
case V1WebhookAuthType.HMAC:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<ShieldCheck className="size-4" />
HMAC
</span>

2
frontend/app/src/pages/main/v1/webhooks/components/auth-setup.tsx
View File

@@ -198,7 +198,7 @@ const PreconfiguredHMACAuth = ({
/>
</div>
{helpText && (
<div className="text-xs text-muted-foreground pl-1">
<div className="pl-1 text-xs text-muted-foreground">
<p>
{helpText}
{helpLink && (

10
frontend/app/src/pages/main/v1/webhooks/components/source-name.tsx
View File

@@ -12,35 +12,35 @@ export const SourceName = ({
switch (sourceName) {
case V1WebhookSourceName.GENERIC:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<Webhook className="size-4" />
Generic
</span>
);
case V1WebhookSourceName.GITHUB:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<GitHubLogoIcon className="size-4" />
GitHub
</span>
);
case V1WebhookSourceName.STRIPE:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<FaStripeS className="size-4" />
Stripe
</span>
);
case V1WebhookSourceName.SLACK:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<FaSlack className="size-4" />
Slack
</span>
);
case V1WebhookSourceName.LINEAR:
return (
<span className="flex flex-row gap-x-2 items-center">
<span className="flex flex-row items-center gap-x-2">
<CgLinear className="size-4" />
Linear
</span>

12
frontend/app/src/pages/main/v1/webhooks/components/webhook-columns.tsx
View File

@@ -116,7 +116,7 @@ const WebhookActionsCell = ({ row }: { row: Row<V1Webhook> }) => {
<DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0 hover:bg-muted/50">
<DotsVerticalIcon className="h-4 w-4 text-muted-foreground cursor-pointer" />
<DotsVerticalIcon className="h-4 w-4 cursor-pointer text-muted-foreground" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
@@ -214,24 +214,24 @@ const EditableExpressionCell = ({ row }: { row: Row<V1Webhook> }) => {
handleCancel();
}
}}
className={`bg-muted rounded px-2 py-3 font-mono text-xs w-full h-6 transition-colors ${
className={`h-6 w-full rounded bg-muted px-2 py-3 font-mono text-xs transition-colors ${
isEditing || hasChanges
? 'border-input focus:border-ring focus:ring-1 focus:ring-ring cursor-text'
: 'border-transparent cursor-text hover:bg-muted/80'
? 'cursor-text border-input focus:border-ring focus:ring-1 focus:ring-ring'
: 'cursor-text border-transparent hover:bg-muted/80'
}`}
readOnly={!isEditing && !hasChanges}
autoFocus={isEditing}
/>
</div>
{(isEditing || hasChanges) && (
<div className="flex flex-row items-center gap-x-2 animate-in fade-in-0 slide-in-from-right-2 duration-200">
<div className="flex flex-row items-center gap-x-2 duration-200 animate-in fade-in-0 slide-in-from-right-2">
<Button
variant="ghost"
size="icon"
onClick={handleSave}
className={`h-7 w-7 ${
hasChanges && !mutations.isUpdatePending
? 'text-red-500/80 animate-pulse'
? 'animate-pulse text-red-500/80'
: ''
}`}
disabled={!hasChanges || !value.trim() || mutations.isUpdatePending}

26
frontend/app/src/pages/main/v1/webhooks/index.tsx
View File

@@ -47,7 +47,7 @@ export default function Webhooks() {
return (
<div>
<div className="flex flex-row justify-end w-full">
<div className="flex w-full flex-row justify-end">
<CreateWebhookModal />
</div>
<DataTable
@@ -57,7 +57,7 @@ export default function Webhooks() {
data={data}
columnKeyToName={WebhookColumn}
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No webhooks found</p>
<div className="w-fit">
<DocsButton
@@ -247,7 +247,7 @@ const SourceCaption = ({ sourceName }: { sourceName: V1WebhookSourceName }) => {
switch (sourceName) {
case V1WebhookSourceName.GITHUB:
return (
<div className="flex flex-row items-center gap-x-2 ml-1">
<div className="ml-1 flex flex-row items-center gap-x-2">
<AlertTriangle className="size-4 text-yellow-500" />
<p className="text-xs text-muted-foreground">
Select <span className="font-semibold">application/json</span> as
@@ -349,11 +349,11 @@ const CreateWebhookModal = () => {
<DialogTrigger asChild>
<Button className="h-8 border px-3">Create Webhook</Button>
</DialogTrigger>
<DialogContent className="max-w-[90%] md:max-w-[80%] lg:max-w-[60%] xl:max-w-[50%] max-h-[90dvh] overflow-y-auto">
<DialogContent className="max-h-[90dvh] max-w-[90%] overflow-y-auto md:max-w-[80%] lg:max-w-[60%] xl:max-w-[50%]">
<DialogHeader>
<DialogTitle className="flex flex-col items-start gap-y-4">
<div className="flex flex-row items-center gap-x-3">
<div className="flex items-center justify-center w-8 h-8 bg-blue-100 rounded-full">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
<Webhook className="h-4 w-4 text-indigo-700" />
</div>
Create a webhook
@@ -382,7 +382,7 @@ const CreateWebhookModal = () => {
<div className="flex flex-col items-start gap-2 text-xs text-muted-foreground">
<span className="">Send incoming webhook requests to:</span>
<div className="flex flex-row items-center gap-2">
<code className="max-w-full font-mono bg-muted px-2 py-1 rounded text-xs">
<code className="max-w-full rounded bg-muted px-2 py-1 font-mono text-xs">
{createWebhookURL(webhookName)}
</code>
<Button
@@ -390,7 +390,7 @@ const CreateWebhookModal = () => {
variant="ghost"
size="sm"
onClick={copyToClipboard}
className="h-6 w-6 p-0 flex-shrink-0"
className="h-6 w-6 flex-shrink-0 p-0"
disabled={!webhookName}
>
{copied ? (
@@ -421,9 +421,9 @@ const CreateWebhookModal = () => {
<SelectContent>
{Object.values(V1WebhookSourceName).map((source) => (
<SelectItem key={source} value={source} className="h-10">
<div className="h-10 flex flex-row items-center gap-x-2">
<div className="flex h-10 flex-row items-center gap-x-2">
<SourceName sourceName={source} />
<span className="text-sm truncate max-w-full">
<span className="max-w-full truncate text-sm">
{createSourceInlineDescription(source)}
</span>
</div>
@@ -460,7 +460,7 @@ const CreateWebhookModal = () => {
{errors.eventKeyExpression.message}
</p>
)}
<div className="text-xs text-muted-foreground pl-1">
<div className="pl-1 text-xs text-muted-foreground">
<p>
CEL expression to extract the event key from the webhook
payload. See{' '}
@@ -479,10 +479,10 @@ const CreateWebhookModal = () => {
<li>`headers` refers to the headers</li>
</ul>
{sourceName === V1WebhookSourceName.SLACK && (
<div className="mt-2 p-3 bg-muted border border-border rounded-md">
<div className="mt-2 rounded-md border border-border bg-muted p-3">
<p className="text-xs text-muted-foreground">
For Slack webhooks, the event key expression{' '}
<code className="bg-background px-1.5 py-0.5 rounded text-foreground">
<code className="rounded bg-background px-1.5 py-0.5 text-foreground">
input.type
</code>{' '}
works well since Slack interactive payloads don't have a
@@ -494,7 +494,7 @@ const CreateWebhookModal = () => {
</div>
<div className="space-y-4">
<div className="space-y-4 pl-4 border-l-2 border-gray-200">
<div className="space-y-4 border-l-2 border-gray-200 pl-4">
{sourceName === V1WebhookSourceName.GENERIC && (
<div className="space-y-2">
<Label htmlFor="authType" className="text-sm font-medium">

28
frontend/app/src/pages/main/v1/workers/$worker/index.tsx
View File

@@ -74,7 +74,7 @@ const WorkerStatus = ({
};
return (
<div className="flex flex-row gap-2 item-center">
<div className="item-center flex flex-row gap-2">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
@@ -141,11 +141,11 @@ export default function ExpandedWorkflowRun() {
}
return (
<div className="flex-grow h-full w-full">
<div className="mx-auto px-4 sm:px-6 lg:px-8 flex flex-col">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row gap-4 items-center justify-between">
<ServerStackIcon className="h-6 w-6 text-foreground mt-1" />
<div className="h-full w-full flex-grow">
<div className="mx-auto flex flex-col px-4 sm:px-6 lg:px-8">
<div className="flex flex-row items-center justify-between">
<div className="flex flex-row items-center justify-between gap-4">
<ServerStackIcon className="mt-1 h-6 w-6 text-foreground" />
<Badge>{worker.type}</Badge>
<h2 className="text-2xl font-bold leading-tight text-foreground">
<Link to={`/tenants/${tenantId}/workers`}>Workers/</Link>
@@ -201,7 +201,7 @@ export default function ExpandedWorkflowRun() {
</p>
<Separator className="my-4" />
<div className="flex flex-row justify-between items-center mb-4">
<div className="mb-4 flex flex-row items-center justify-between">
<h3 className="text-xl font-bold leading-tight text-foreground">
{(worker.maxRuns ?? 0) > 0
? `${worker.availableRuns} / ${worker.maxRuns ?? 0}`
@@ -217,7 +217,7 @@ export default function ExpandedWorkflowRun() {
</div>
<Separator className="my-4" />
<div className="flex flex-row justify-between items-center mb-4">
<div className="mb-4 flex flex-row items-center justify-between">
<h3 className="text-xl font-bold leading-tight text-foreground">
Recent Task Runs
</h3>
@@ -238,10 +238,10 @@ export default function ExpandedWorkflowRun() {
<RunsTable />
</RunsProvider>
<Separator className="my-4" />
<h3 className="text-xl font-bold leading-tight text-foreground mb-4">
<h3 className="mb-4 text-xl font-bold leading-tight text-foreground">
Registered Workflows
</h3>
<div className="flex-wrap flex flex-row gap-4">
<div className="flex flex-row flex-wrap gap-4">
{filteredWorkflows.map((workflow) => {
return (
<Link
@@ -253,7 +253,7 @@ export default function ExpandedWorkflowRun() {
);
})}
</div>
<div className="flex flex-row w-full items-center justify-center py-4">
<div className="flex w-full flex-row items-center justify-center py-4">
{!showAllActions &&
registeredWorkflows.length > N_ACTIONS_TO_PREVIEW && (
<Button variant="outline" onClick={() => setShowAllActions(true)}>
@@ -264,7 +264,7 @@ export default function ExpandedWorkflowRun() {
{worker.webhookId && (
<>
<Separator className="my-4" />
<div className="flex flex-row justify-between items-center mb-4">
<div className="mb-4 flex flex-row items-center justify-between">
<h3 className="text-xl font-bold leading-tight text-foreground">
Recent HTTP Health Checks
</h3>
@@ -276,7 +276,7 @@ export default function ExpandedWorkflowRun() {
{worker.labels && worker.labels.length > 0 && (
<>
<Separator className="my-4" />
<h3 className="text-xl font-bold leading-tight text-foreground mb-4">
<h3 className="mb-4 text-xl font-bold leading-tight text-foreground">
Worker Labels
</h3>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
@@ -305,7 +305,7 @@ export default function ExpandedWorkflowRun() {
worker.runtimeInfo?.runtimeExtra) && (
<>
<Separator className="my-4" />
<h3 className="text-xl font-bold leading-tight text-foreground mb-4">
<h3 className="mb-4 text-xl font-bold leading-tight text-foreground">
Worker Runtime Info
</h3>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300">

2
frontend/app/src/pages/main/v1/workers/components/sdk-info.tsx
View File

@@ -23,7 +23,7 @@ export const SdkInfo: React.FC<{
: undefined;
return (
<div className="flex flex-row gap-2 items-center">
<div className="flex flex-row items-center gap-2">
{Icon && React.createElement(Icon)}
{!iconOnly && runtimeInfo.sdkVersion}
</div>

6
frontend/app/src/pages/main/v1/workers/components/worker-columns.tsx
View File

@@ -110,7 +110,7 @@ function WorkerStatusBadge({
className={cn(
'px-3 py-1',
finalConfig.colors,
'text-xs font-medium rounded-md border-transparent',
'rounded-md border-transparent text-xs font-medium',
className,
)}
variant={variant}
@@ -144,7 +144,7 @@ export const columns: (tenantId: string) => ColumnDef<Worker>[] = (
),
cell: ({ row }) => (
<Link to={`/tenants/${tenantId}/workers/${row.original.metadata.id}`}>
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap">
<div className="min-w-fit cursor-pointer whitespace-nowrap hover:underline">
{row.original.webhookUrl || row.original.name}
</div>
</Link>
@@ -158,7 +158,7 @@ export const columns: (tenantId: string) => ColumnDef<Worker>[] = (
<DataTableColumnHeader column={column} title={WorkerColumn.type} />
),
cell: ({ row }) => (
<div className="cursor-pointer hover:underline min-w-fit whitespace-nowrap">
<div className="min-w-fit cursor-pointer whitespace-nowrap hover:underline">
{row.original.type.toLocaleLowerCase()}
</div>
),

2
frontend/app/src/pages/main/v1/workers/index.tsx
View File

@@ -84,7 +84,7 @@ export default function Workers() {
},
]}
emptyState={
<div className="w-full h-full flex flex-col gap-y-4 text-foreground py-8 justify-center items-center">
<div className="flex h-full w-full flex-col items-center justify-center gap-y-4 py-8 text-foreground">
<p className="text-lg font-semibold">No workers found</p>
<div className="w-fit">
<DocsButton

Some files were not shown because too many files have changed in this diff Show More