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,60 +146,39 @@ export default function BlueprintDetailsForm({
</Alert> </Alert>
<SettingsContainer> <SettingsContainer>
<SettingsSection> <SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("blueprintInfo")}
</SettingsSectionTitle>
</SettingsSectionHeader>
<SettingsSectionBody> <SettingsSectionBody>
<SettingsSectionForm className="max-w-2xl"> <FormField
<FormField control={form.control}
control={form.control} name="contents"
name="name" render={({ field }) => (
render={({ field }) => ( <FormItem>
<FormItem> <FormLabel>
<FormLabel>{t("name")}</FormLabel> {t("parsedContents")}
<FormControl> </FormLabel>
<Input {...field} /> <FormControl>
</FormControl> <div
<FormMessage /> className={cn(
</FormItem> "resize-y h-64 min-h-128 overflow-y-auto overflow-x-clip max-w-full rounded-md"
)} )}
/> >
<Editor
<FormField className="w-full h-full max-w-full"
control={form.control} language="yaml"
name="contents" theme="vs-dark"
render={({ field }) => ( options={{
<FormItem> minimap: {
<FormLabel> enabled: false
{t("parsedContents")} },
</FormLabel> readOnly: true
<FormControl> }}
<div {...field}
className={cn( />
"resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md" </div>
)} </FormControl>
> <FormMessage />
<Editor </FormItem>
className="w-full h-full max-w-full" )}
language="yaml" />
theme="vs-dark"
options={{
minimap: {
enabled: false
},
readOnly: true
}}
{...field}
/>
</div>
</FormControl>
<FormMessage />
</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,44 +141,40 @@ export default function CreateBlueprintForm({
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="contents"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("contents")}
</FormLabel>
<FormDescription>
{t(
"blueprintContentsDescription"
)}
</FormDescription>
<FormControl>
<div
className={cn(
"resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md"
)}
>
<Editor
className="w-full h-full max-w-full"
language="yaml"
theme="vs-dark"
options={{
minimap: {
enabled: false
}
}}
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsSectionForm> </SettingsSectionForm>
<FormField
control={form.control}
name="contents"
render={({ field }) => (
<FormItem>
<FormLabel>{t("contents")}</FormLabel>
<FormDescription>
{t("blueprintContentsDescription")}
</FormDescription>
<FormControl>
<div
className={cn(
"resize-y h-64 min-h-128 overflow-y-auto overflow-x-clip max-w-full rounded-md"
)}
>
<Editor
className="w-full h-full max-w-full"
language="yaml"
theme="vs-dark"
options={{
minimap: {
enabled: false
}
}}
{...field}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsSectionBody> </SettingsSectionBody>
</SettingsSection> </SettingsSection>