blueprints enhancements

This commit is contained in:
miloschwartz
2025-12-17 22:05:36 -05:00
parent 3a781f9ac4
commit 79eefc0ac7
4 changed files with 107 additions and 127 deletions

View File

@@ -2312,5 +2312,6 @@
"organizationLoginPageDescription": "Customize the login page for this organization", "organizationLoginPageDescription": "Customize the login page for this organization",
"resourceLoginPageTitle": "Resource Login Page", "resourceLoginPageTitle": "Resource Login Page",
"resourceLoginPageDescription": "Customize the login page for individual resources", "resourceLoginPageDescription": "Customize the login page for individual resources",
"enterConfirmation": "Enter confirmation" "enterConfirmation": "Enter confirmation",
"blueprintViewDetails": "Details"
} }

View File

@@ -52,8 +52,14 @@ export default function BlueprintDetailsForm({
<Form {...form}> <Form {...form}>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<Alert> <Alert>
<AlertDescription> <AlertDescription className="space-y-2">
<InfoSections cols={3}> <InfoSections cols={4}>
<InfoSection>
<InfoSectionTitle>{t("name")}</InfoSectionTitle>
<InfoSectionContent>
{blueprint.name}
</InfoSectionContent>
</InfoSection>
<InfoSection> <InfoSection>
<InfoSectionTitle> <InfoSectionTitle>
{t("status")} {t("status")}
@@ -121,6 +127,8 @@ export default function BlueprintDetailsForm({
</time> </time>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
</InfoSections>
<InfoSections cols={1}>
{blueprint.message && ( {blueprint.message && (
<InfoSection> <InfoSection>
<InfoSectionTitle> <InfoSectionTitle>
@@ -138,27 +146,7 @@ export default function BlueprintDetailsForm({
</Alert> </Alert>
<SettingsContainer> <SettingsContainer>
<SettingsSection> <SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("blueprintInfo")}
</SettingsSectionTitle>
</SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm className="max-w-2xl">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("name")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="contents" name="contents"
@@ -170,7 +158,7 @@ export default function BlueprintDetailsForm({
<FormControl> <FormControl>
<div <div
className={cn( className={cn(
"resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md" "resize-y h-64 min-h-128 overflow-y-auto overflow-x-clip max-w-full rounded-md"
)} )}
> >
<Editor <Editor
@@ -191,7 +179,6 @@ export default function BlueprintDetailsForm({
</FormItem> </FormItem>
)} )}
/> />
</SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>
</SettingsContainer> </SettingsContainer>

View File

@@ -32,35 +32,6 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
const router = useRouter(); const router = useRouter();
const columns: ExtendedColumnDef<BlueprintRow>[] = [ const columns: ExtendedColumnDef<BlueprintRow>[] = [
{
accessorKey: "createdAt",
friendlyName: t("appliedAt"),
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
{t("appliedAt")}
<ArrowUpDown className="ml-2 size-4" />
</Button>
);
},
cell: ({ row }) => {
return (
<time
className="text-muted-foreground"
dateTime={row.original.createdAt.toString()}
>
{new Date(
row.original.createdAt * 1000
).toLocaleString()}
</time>
);
}
},
{ {
accessorKey: "name", accessorKey: "name",
enableHiding: false, enableHiding: false,
@@ -79,7 +50,32 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
); );
} }
}, },
{
accessorKey: "createdAt",
friendlyName: t("appliedAt"),
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
{t("appliedAt")}
<ArrowUpDown className="ml-2 size-4" />
</Button>
);
},
cell: ({ row }) => {
return (
<time dateTime={row.original.createdAt.toString()}>
{new Date(
row.original.createdAt * 1000
).toLocaleString()}
</time>
);
}
},
{ {
accessorKey: "source", accessorKey: "source",
friendlyName: t("source"), friendlyName: t("source"),
@@ -104,7 +100,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
<Badge variant="secondary"> <Badge variant="secondary">
<span className="inline-flex items-center gap-1 "> <span className="inline-flex items-center gap-1 ">
API API
<Webhook className="size-4 flex-none" /> <Webhook className="w-3 h-3 flex-none" />
</span> </span>
</Badge> </Badge>
); );
@@ -114,7 +110,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
<Badge variant="secondary"> <Badge variant="secondary">
<span className="inline-flex items-center gap-1 "> <span className="inline-flex items-center gap-1 ">
Newt CLI Newt CLI
<Terminal className="size-4 flex-none" /> <Terminal className="w-3 h-3 flex-none" />
</span> </span>
</Badge> </Badge>
); );
@@ -174,7 +170,7 @@ export default function BlueprintsTable({ blueprints, orgId }: Props) {
href={`/${orgId}/settings/blueprints/${row.original.blueprintId}`} href={`/${orgId}/settings/blueprints/${row.original.blueprintId}`}
> >
<Button variant="outline" className="items-center"> <Button variant="outline" className="items-center">
View Details {t("blueprintViewDetails")}
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </Button>
</Link> </Link>

View File

@@ -127,7 +127,7 @@ export default function CreateBlueprintForm({
</SettingsSectionTitle> </SettingsSectionTitle>
</SettingsSectionHeader> </SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm className="max-w-2xl"> <SettingsSectionForm>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"
@@ -141,24 +141,21 @@ export default function CreateBlueprintForm({
</FormItem> </FormItem>
)} )}
/> />
</SettingsSectionForm>
<FormField <FormField
control={form.control} control={form.control}
name="contents" name="contents"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>{t("contents")}</FormLabel>
{t("contents")}
</FormLabel>
<FormDescription> <FormDescription>
{t( {t("blueprintContentsDescription")}
"blueprintContentsDescription"
)}
</FormDescription> </FormDescription>
<FormControl> <FormControl>
<div <div
className={cn( className={cn(
"resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md" "resize-y h-64 min-h-128 overflow-y-auto overflow-x-clip max-w-full rounded-md"
)} )}
> >
<Editor <Editor
@@ -178,7 +175,6 @@ export default function CreateBlueprintForm({
</FormItem> </FormItem>
)} )}
/> />
</SettingsSectionForm>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>