Edit
+
+
+ Register new Component
+
+
+
+
+ );
+}
diff --git a/src/app/components/create/type-step.tsx b/src/app/components/create/type-step.tsx
new file mode 100644
index 00000000..60034be6
--- /dev/null
+++ b/src/app/components/create/type-step.tsx
@@ -0,0 +1,42 @@
+import { ComponentIcon } from "@/components/ComponentIcon";
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { StackComponentType } from "@/types/components";
+import * as Wizard from "@/components/wizard/Wizard";
+import { stackComponentTypes } from "@/lib/constants";
+
+type Props = {
+ selectTypeHandler: (type: StackComponentType) => void;
+};
+
+export function TypeSelect({ selectTypeHandler }: Props) {
+ return (
+ <>
+ -
+ {stackComponentTypes.map((type) => (
+
{sortedProperties.map(([key, value]) => (
diff --git a/src/app/stacks/create/existing-infrastructure/steps/orchestrator/Form.tsx b/src/app/stacks/create/existing-infrastructure/steps/orchestrator/Form.tsx
index dfa78323..396824c6 100644
--- a/src/app/stacks/create/existing-infrastructure/steps/orchestrator/Form.tsx
+++ b/src/app/stacks/create/existing-infrastructure/steps/orchestrator/Form.tsx
@@ -114,6 +114,7 @@ export function OrchestratorForm() {
{Object.entries(orchestrator.required_configuration).map(([key, value]) => (
(
diff --git a/src/app/stacks/create/manual/ComponentSelection.tsx b/src/app/stacks/create/manual/ComponentSelection.tsx
index 64bfcabe..985455a6 100644
--- a/src/app/stacks/create/manual/ComponentSelection.tsx
+++ b/src/app/stacks/create/manual/ComponentSelection.tsx
@@ -1,6 +1,10 @@
+import { ComponentIcon } from "@/components/ComponentIcon";
+import { DisplayDate } from "@/components/DisplayDate";
+import { InlineAvatar } from "@/components/InlineAvatar";
import { componentQueries } from "@/data/components";
import { snakeCaseToLowerCase, snakeCaseToTitleCase } from "@/lib/strings";
import { sanitizeUrl } from "@/lib/url";
+import { StackComponentType } from "@/types/components";
import { TabsContent } from "@radix-ui/react-tabs";
import { useInfiniteQuery } from "@tanstack/react-query";
import { Button, Input, Spinner } from "@zenml-io/react-component-library/components/server";
@@ -8,18 +12,15 @@ import debounce from "lodash.debounce";
import { useCallback, useEffect, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { RadioItem, RadioItemLabel } from "../components/RadioItem";
-import { CreateComponentFallback } from "./CreateComponentModal";
-import { FormType, types } from "./schema";
-import { StackComponentType } from "@/types/components";
-import { ComponentIcon } from "@/components/ComponentIcon";
-import { DisplayDate } from "@/components/DisplayDate";
-import { InlineAvatar } from "@/components/InlineAvatar";
import { ComponentTooltip } from "./ComponentsTooltip";
+import { CreateComponentDialog } from "./create-component-modal";
+import { FormType } from "./schema";
+import { stackComponentTypes } from "@/lib/constants";
export function ComponentsSelection() {
return (
<>
- {types.map((type) => (
+ {stackComponentTypes.map((type) => (
@@ -115,7 +116,7 @@ function ComponentList({ type, search }: Props & { search: string }) {
))
)}
-
- {types.map((type) => (
+ {stackComponentTypes.map((type) => (
+
+
+
+ );
+}
diff --git a/src/app/stacks/create/manual/create-component-modal/flavor-select.tsx b/src/app/stacks/create/manual/create-component-modal/flavor-select.tsx
new file mode 100644
index 00000000..2a573000
--- /dev/null
+++ b/src/app/stacks/create/manual/create-component-modal/flavor-select.tsx
@@ -0,0 +1,28 @@
+import { SelectFlavorList } from "@/components/stack-components/create-component/flavor-select";
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { StackComponentType } from "@/types/components";
+import { Flavor } from "@/types/flavors";
+import {
+ DialogHeader,
+ DialogTitle,
+ ScrollArea
+} from "@zenml-io/react-component-library/components/client";
+
+type Props = {
+ type: StackComponentType;
+ setSelectedFlavor: (flavor: Flavor) => void;
+};
+export function SelectFlavorStep({ type, setSelectedFlavor }: Props) {
+ return (
+ <>
+
+ Select {snakeCaseToTitleCase(type)} Flavor
+
+
+
+
+ );
+}
diff --git a/src/app/stacks/create/manual/create-component-modal/index.tsx b/src/app/stacks/create/manual/create-component-modal/index.tsx
new file mode 100644
index 00000000..073ca2cc
--- /dev/null
+++ b/src/app/stacks/create/manual/create-component-modal/index.tsx
@@ -0,0 +1,69 @@
+import { Dialog, DialogContent, DialogTrigger } from "@zenml-io/react-component-library";
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { StackComponentType } from "@/types/components";
+import { SelectFlavorStep } from "./flavor-select";
+import { useState } from "react";
+import { Flavor } from "@/types/flavors";
+import { ConfigurationStep } from "./configuration-step";
+import { sleep } from "@/lib/common";
+
+type Props = {
+ type: StackComponentType;
+};
+
+export type SelectedFlavorState = {
+ name: string;
+ id: string;
+ logoUrl?: string;
+};
+
+export function CreateComponentDialog({ type }: Props) {
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [step, setStep] = useState(0);
+ const [selectedFlavor, setSelectedFlavor] = useState(null);
+
+ async function handleOpenChange(open: boolean) {
+ setDialogOpen(open);
+ // Not a clean solution, but prevents the flickering on close
+ await sleep(100);
+ if (!open) {
+ setStep(0);
+ setSelectedFlavor(null);
+ }
+ }
+
+ function setFlavorIdAndNext(flavor: Flavor) {
+ setSelectedFlavor({
+ id: flavor.id,
+ name: flavor.name,
+ logoUrl: flavor.body?.logo_url ?? undefined
+ });
+ setStep((prev) => prev + 1);
+ }
+
+ function goBack() {
+ setStep(0);
+ setSelectedFlavor(null);
+ }
+
+ return (
+
+ );
+}
diff --git a/src/app/stacks/create/manual/schema.ts b/src/app/stacks/create/manual/schema.ts
index eb196fd4..bfa06535 100644
--- a/src/app/stacks/create/manual/schema.ts
+++ b/src/app/stacks/create/manual/schema.ts
@@ -1,21 +1,6 @@
-import { StackComponentType } from "@/types/components";
import { z } from "zod";
import { stackNameSchema } from "../components/sharedSchema";
-
-export const types: StackComponentType[] = [
- "orchestrator",
- "artifact_store",
- "container_registry",
- "step_operator",
- "model_deployer",
- "feature_store",
- "experiment_tracker",
- "alerter",
- "annotator",
- "data_validator",
- "image_builder",
- "model_registry"
-] as const;
+import { stackComponentTypes } from "@/lib/constants";
const componentSchema = z.object({
id: z.string().trim().min(1),
@@ -23,13 +8,13 @@ const componentSchema = z.object({
logoUrl: z.string().trim().min(1)
});
-const typeSchema = types.reduce(
+const typeSchema = stackComponentTypes.reduce(
(schema, type) => {
schema[type] = componentSchema.nullable();
return schema;
},
{} as Record<
- (typeof types)[number],
+ (typeof stackComponentTypes)[number],
z.ZodNullable>
>
);
diff --git a/src/components/breadcrumbs/SegmentsBreadcrumbs.tsx b/src/components/breadcrumbs/SegmentsBreadcrumbs.tsx
index 4459d623..6e6bb3d4 100644
--- a/src/components/breadcrumbs/SegmentsBreadcrumbs.tsx
+++ b/src/components/breadcrumbs/SegmentsBreadcrumbs.tsx
@@ -28,6 +28,10 @@ export const matchSegmentWithRequest = ({ segment, data }: { segment: string; da
stacks: { name: "Stacks" },
create: { name: "New Stack" }
},
+ createComponent: {
+ components: { name: "Components" },
+ createComponent: { name: "New Component" }
+ },
components: {
components: { name: "Components" }
},
@@ -38,6 +42,14 @@ export const matchSegmentWithRequest = ({ segment, data }: { segment: string; da
name: data?.name
}
},
+ componentEdit: {
+ components: { name: "Components" },
+ component_detail: {
+ id: data?.id,
+ name: data?.name
+ },
+ component_edit: { name: "Edit", id: data?.id }
+ },
secrets: {
secrets: { name: "Secrets" }
},
@@ -115,6 +127,8 @@ export const matchSegmentWithURL = (segment: string, id: string) => {
secrets: routes.settings.secrets.overview,
//components
components: routes.components.overview,
+ component_detail: routes.components.detail(id),
+ component_edit: routes.components.edit(id),
upgrade: routes.upgrade,
// Service Accounts
service_accounts: routes.settings.service_accounts.overview
diff --git a/src/components/form/DynamicField.tsx b/src/components/form/DynamicField.tsx
deleted file mode 100644
index d4dc3751..00000000
--- a/src/components/form/DynamicField.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import Plus from "@/assets/icons/plus.svg?react";
-import Trash from "@/assets/icons/trash.svg?react";
-import { ConnectorConfigPropertiesBody } from "@/types/service-connectors";
-import { Switch, Button, Input } from "@zenml-io/react-component-library";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-
-type DynamicFieldProps = {
- schema: ConnectorConfigPropertiesBody;
- name: string;
- isOptional: boolean;
-};
-
-export function DynamicField({ schema, name, isOptional }: DynamicFieldProps) {
- const type = schema.type || schema.anyOf?.find((item) => item.type !== null)?.type;
-
- if (!type) return null;
-
- switch (type) {
- case "string":
- return
+) {
+ const defaultValues = Object.entries(schema.properties || {}).reduce((acc, [key, prop]) => {
+ let value: string | boolean | object | unknown[] = "";
+
+ if (prop.default) {
+ if (isBooleanField(prop)) {
+ value = prop.default;
+ } else if (isObjectField(prop)) {
+ value = JSON.stringify(prop.default);
+ } else if (isArrayField(prop)) {
+ value = prop.default;
+ } else {
+ value = prop.default.toString();
+ }
+ } else if (isArrayField(prop)) {
+ value = [];
+ }
+
+ return { ...acc, [key]: value };
+ }, {});
+
+ if (initialValues) {
+ Object.entries(initialValues).forEach(([key, value]) => {
+ (defaultValues as Record)[key] = isArray(value)
+ ? value.map((i) => JSON.stringify(i))
+ : isObject(value)
+ ? JSON.stringify(value)
+ : value;
+ });
+ }
+
+ return defaultValues;
+}
diff --git a/src/components/form/integer-field-renderer.tsx b/src/components/form/integer-field-renderer.tsx
new file mode 100644
index 00000000..bfb995be
--- /dev/null
+++ b/src/components/form/integer-field-renderer.tsx
@@ -0,0 +1,35 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { DynamicFieldProps } from "./helper";
+import { Input } from "@zenml-io/react-component-library/components/server";
+import { RendererHeadline } from "./common";
+
+export function IntegerFieldRenderer({ name, isOptional, label }: DynamicFieldProps) {
+ const form = useFormContext();
+
+ const errors = form.formState.errors[name];
+
+ return (
+
-
+
+
+ Configure your {snakeCaseToTitleCase(name)} {snakeCaseToTitleCase(type)}
+
+
+
+
+
+
+
+
+
+
+
-
- (
-
- )}
- />
-
- );
-}
-
-function DynamicArray({ name, schema, isOptional }: DynamicFieldProps) {
- const { control } = useFormContext();
- const { fields, append, remove } = useFieldArray({ name, control });
-
- return (
-
-
-
- );
-}
-
-function DynamicBoolean({ name, schema, isOptional }: DynamicFieldProps) {
- const form = useFormContext();
- const defaultValue = schema.default || false;
- return (
- -
- {fields.map((field, index) => (
-
-
-
} - /> - -
- ))}
-
-
- (
- onChange(e)} {...rest} />
- )}
- />
-
- );
-}
diff --git a/src/components/form/array-field-renderer.tsx b/src/components/form/array-field-renderer.tsx
new file mode 100644
index 00000000..79d257ea
--- /dev/null
+++ b/src/components/form/array-field-renderer.tsx
@@ -0,0 +1,56 @@
+import Plus from "@/assets/icons/plus.svg?react";
+import Trash from "@/assets/icons/trash.svg?react";
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { JSONSchema } from "../../types/forms";
+import { RendererHeadline } from "./common";
+import { DynamicField } from "./form";
+import { DynamicFieldProps } from "./helper";
+
+export function ArrayFieldRenderer({
+ name,
+ label,
+ isOptional,
+ schema,
+ definitions
+}: DynamicFieldProps & { definitions: JSONSchema["$defs"] }) {
+ const form = useFormContext();
+ const { fields, append, remove } = useFieldArray({ name: name, control: form.control });
+
+ return (
+
+ {!!label && (
+
+ )}
+
+ );
+}
diff --git a/src/components/form/boolean-field-renderer.tsx b/src/components/form/boolean-field-renderer.tsx
new file mode 100644
index 00000000..1efebc9d
--- /dev/null
+++ b/src/components/form/boolean-field-renderer.tsx
@@ -0,0 +1,26 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { DynamicFieldProps } from "./helper";
+import { Switch } from "@zenml-io/react-component-library/components/client";
+import { RendererHeadline } from "./common";
+
+export function BooleanFieldRenderer({ name, isOptional, label }: DynamicFieldProps) {
+ const form = useFormContext();
+ const errors = form.formState.errors[name];
+ return (
+ -
+ {fields.map((field, index) => (
+
-
+
+ +
+ ))}
+
+ {!!label && (
+
+ )}
+ (
+ onChange(e)} {...rest} />
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/form/common.tsx b/src/components/form/common.tsx
new file mode 100644
index 00000000..08e13edc
--- /dev/null
+++ b/src/components/form/common.tsx
@@ -0,0 +1,17 @@
+type Props = {
+ label: string;
+ isOptional: boolean;
+};
+
+export function RendererHeadline({ label, isOptional }: Props) {
+ return (
+ <>
+ {label}
+ {!isOptional && (
+
+ *
+
+ )}
+
+ );
+}
diff --git a/src/components/form/enum-field-renderer.tsx b/src/components/form/enum-field-renderer.tsx
new file mode 100644
index 00000000..4d299ee1
--- /dev/null
+++ b/src/components/form/enum-field-renderer.tsx
@@ -0,0 +1,56 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { DynamicFieldProps } from "./helper";
+import {
+ ScrollArea,
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from "@zenml-io/react-component-library/components/client";
+import { RendererHeadline } from "./common";
+
+export function EnumFieldRenderer({
+ name,
+ label,
+ isOptional,
+ enumValues
+}: DynamicFieldProps & { enumValues: string[] }) {
+ const form = useFormContext();
+
+ const errors = form.formState.errors[name];
+
+ return (
+ {errors.message?.toString()}
} +
+ {!!label && (
+
+ )}
+ (
+
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
new file mode 100644
index 00000000..3481fb17
--- /dev/null
+++ b/src/components/form/form.tsx
@@ -0,0 +1,130 @@
+import { JSONSchemaDefinition } from "@/types/forms";
+import { ArrayFieldRenderer } from "./array-field-renderer";
+import { BooleanFieldRenderer } from "./boolean-field-renderer";
+import { EnumFieldRenderer } from "./enum-field-renderer";
+import {
+ getEnumValues,
+ getNameFromSchema,
+ isArrayField,
+ isBooleanField,
+ isEnumField,
+ isIntegerField,
+ isObjectField,
+ isSensitiveField,
+ isTextField,
+ resolveRef
+} from "./helper";
+import { IntegerFieldRenderer } from "./integer-field-renderer";
+import { ObjectFieldRenderer } from "./object-field-renderer";
+import { TextFieldRenderer } from "./text-field-renderer";
+import { SensitiveTextRenderer } from "./sensitive-text-renderer";
+
+type Props = {
+ definitions: JSONSchemaDefinition["$defs"];
+ name: string;
+ isOptional: boolean;
+ schema: JSONSchemaDefinition;
+ isNested?: boolean;
+};
+
+export function DynamicField({ schema, name, isOptional, definitions, isNested }: Props) {
+ let resolvedSchema = resolveRef(schema, definitions);
+
+ // If this is an array item, use the items schema
+ if (isNested && resolvedSchema.items) {
+ resolvedSchema = resolveRef(resolvedSchema.items, definitions);
+ }
+
+ if (isNested && resolvedSchema.prefixItems) {
+ resolvedSchema = resolveRef(resolvedSchema.prefixItems[0], definitions);
+ }
+
+ const label = isNested ? "" : getNameFromSchema(resolvedSchema, name);
+
+ if (resolvedSchema.anyOf) {
+ const nonNullOption = resolvedSchema.anyOf.find((option) => option.type !== null);
+ if (nonNullOption) {
+ const resolvedNullOption = resolveRef(nonNullOption, definitions);
+ resolvedSchema = { ...resolvedSchema, ...resolvedNullOption };
+ }
+ }
+ if (resolvedSchema.allOf) {
+ const resolvedAllOf = resolveRef(resolvedSchema.allOf[0], definitions);
+ resolvedSchema = { ...resolvedSchema, ...resolvedAllOf };
+ }
+
+ if (isEnumField(resolvedSchema)) {
+ return (
+ {errors.message?.toString()}
} +
+ {!!label && (
+
+ )}
+ (
+
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/form/object-field-renderer.tsx b/src/components/form/object-field-renderer.tsx
new file mode 100644
index 00000000..220b0022
--- /dev/null
+++ b/src/components/form/object-field-renderer.tsx
@@ -0,0 +1,37 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { inputVariants } from "@zenml-io/react-component-library/components/server";
+import { DynamicFieldProps } from "./helper";
+import { RendererHeadline } from "./common";
+
+export function ObjectFieldRenderer({ name, label, isOptional }: DynamicFieldProps) {
+ const form = useFormContext();
+ const errors = form.formState.errors[name];
+
+ return (
+ {errors.message?.toString()}
} +
+ {!!label && (
+
+ )}
+ (
+
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/form/sensitive-text-renderer.tsx b/src/components/form/sensitive-text-renderer.tsx
new file mode 100644
index 00000000..421c6f8a
--- /dev/null
+++ b/src/components/form/sensitive-text-renderer.tsx
@@ -0,0 +1,35 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { RendererHeadline } from "./common";
+import { DynamicFieldProps } from "./helper";
+import { Input } from "@zenml-io/react-component-library";
+
+export function SensitiveTextRenderer({ name, label, isOptional }: DynamicFieldProps) {
+ const form = useFormContext();
+ const errors = form.formState.errors[name];
+
+ return (
+ {errors.message?.toString()}
} +
+ {!!label && (
+
+ )}
+ (
+
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/form/text-field-renderer.tsx b/src/components/form/text-field-renderer.tsx
new file mode 100644
index 00000000..556ec6f9
--- /dev/null
+++ b/src/components/form/text-field-renderer.tsx
@@ -0,0 +1,32 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { DynamicFieldProps } from "./helper";
+import { Input } from "@zenml-io/react-component-library/components/server";
+import { RendererHeadline } from "./common";
+
+export function TextFieldRenderer({ name, isOptional, label }: DynamicFieldProps) {
+ const form = useFormContext();
+ const errors = form.formState.errors[name];
+ return (
+ {errors.message?.toString()}
} +
+ {!!label && (
+
+ )}
+ (
+
+ )}
+ />
+ {errors &&
+ );
+}
diff --git a/src/components/service-connectors/create-fallback.tsx b/src/components/service-connectors/create-fallback.tsx
new file mode 100644
index 00000000..9971c30c
--- /dev/null
+++ b/src/components/service-connectors/create-fallback.tsx
@@ -0,0 +1,33 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle
+} from "@zenml-io/react-component-library/components/client";
+import { Codesnippet } from "../CodeSnippet";
+
+type Props = {
+ open: boolean;
+ setOpen: (open: boolean) => void;
+};
+
+export function CreateServiceConnectorFallback({ open, setOpen }: Props) {
+ return (
+
+ );
+}
diff --git a/src/components/stack-components/component-detail/Header.tsx b/src/components/stack-components/component-detail/Header.tsx
index 2c4806b3..85053663 100644
--- a/src/components/stack-components/component-detail/Header.tsx
+++ b/src/components/stack-components/component-detail/Header.tsx
@@ -1,11 +1,21 @@
+import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
+import Edit from "@/assets/icons/edit.svg?react";
import { snakeCaseToTitleCase } from "@/lib/strings";
import { sanitizeUrl } from "@/lib/url";
-import { Skeleton, Badge } from "@zenml-io/react-component-library/components/server";
-import { useComponent } from "./hooks";
+import { routes } from "@/router/routes";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "@zenml-io/react-component-library/components/client";
+import { Badge, Button, Skeleton } from "@zenml-io/react-component-library/components/server";
import { useEffect } from "react";
-import { PageHeader } from "../../PageHeader";
+import { useLocation, useNavigate } from "react-router-dom";
import { useBreadcrumbsContext } from "../../../layouts/AuthenticatedLayout/BreadcrumbsContext";
import { CopyButton } from "../../CopyButton";
+import { PageHeader } from "../../PageHeader";
+import { useComponent } from "./hooks";
type Props = {
componentId: string;
@@ -15,25 +25,36 @@ export function StackComponentsDetailHeader({
isPanel
}: Props & { isPanel: boolean }) {
return (
- {errors.message?.toString()}
} +
-
+
);
}
function ComponentId({ componentId, isPanel }: Props & { isPanel: boolean }) {
const component = useComponent(componentId);
+ const path = useLocation().pathname;
+ const segment = path.split("/").at(-1) as "edit" | null;
+
const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
useEffect(() => {
if (component.data && !isPanel) {
- setCurrentBreadcrumbData({ segment: "componentDetail", data: component.data });
+ if (segment === "edit") {
+ setCurrentBreadcrumbData({ segment: "componentEdit", data: component.data });
+ } else {
+ setCurrentBreadcrumbData({ segment: "componentDetail", data: component.data });
+ }
}
- }, [component.data, isPanel]);
+ }, [component.data, isPanel, segment]);
if (component.isError) return null;
if (component.isPending) return
+
+
+
+
+ navigate(routes.components.edit(componentId))}
+ className="cursor-pointer space-x-2"
+ >
+
+
+
+ );
+}
diff --git a/src/components/stack-components/create-component/configuration-form.tsx b/src/components/stack-components/create-component/configuration-form.tsx
new file mode 100644
index 00000000..4eda74b9
--- /dev/null
+++ b/src/components/stack-components/create-component/configuration-form.tsx
@@ -0,0 +1,269 @@
+import { componentQueries } from "@/data/components";
+import { useCreateComponent } from "@/data/components/create-component";
+import { flavorQueries } from "@/data/flavors";
+import { useCurrentUser } from "@/data/users/current-user-query";
+import { workspaceQueries } from "@/data/workspaces";
+import { getisOptional, getZodSchemaFromConfig } from "@/lib/forms";
+import { Flavor } from "@/types/flavors";
+import { JSONSchema } from "@/types/forms";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { ScrollArea, useToast } from "@zenml-io/react-component-library/components/client";
+import { Input, Skeleton } from "@zenml-io/react-component-library/components/server";
+import { FunctionComponent, ReactNode } from "react";
+import { FieldValues, FormProvider, useForm } from "react-hook-form";
+import { DynamicField } from "../../form/form";
+import { generateDefaultValues } from "../../form/helper";
+import { ConnectorSection } from "./connector-section";
+import { InfoTile } from "./info-tile";
+import { componentBaseSchema } from "./schema";
+import { StackComponent } from "@/types/components";
+import { useUpdateComponent } from "@/data/components/update-component";
+
+type Props = {
+ formId: string;
+ flavorId: string;
+ successHandler?: (id: string) => void;
+ FooterComponent: FunctionComponent;
+ useMaxHeight?: boolean;
+ component?: StackComponent;
+ isCreate?: boolean;
+};
+
+export function ComponentConfigurationForm({
+ flavorId,
+ formId,
+ successHandler,
+ FooterComponent,
+ useMaxHeight = false,
+ component,
+ isCreate = true
+}: Props) {
+ const flavor = useQuery(flavorQueries.flavorDetail(flavorId));
+ const user = useCurrentUser();
+ const workspace = useQuery(workspaceQueries.workspaceDetail("default"));
+ if (flavor.isPending || user.isPending || workspace.isPending)
+ return (
+ ;
+ useMaxHeight: boolean;
+ component?: StackComponent;
+ isCreate: boolean;
+};
+
+function ComponentConfigurationFormBody({
+ formId,
+ schema,
+ flavor,
+ userId,
+ workspaceId,
+ successHandler,
+ infoTile,
+ FooterComponent,
+ useMaxHeight,
+ isCreate,
+ component
+}: FormProps) {
+ const { toast } = useToast();
+ const componentKey = componentQueries.all;
+
+ const queryClient = useQueryClient();
+ const createComponent = useCreateComponent({
+ onSuccess: ({ id }) => {
+ queryClient.invalidateQueries({ queryKey: componentKey });
+ successHandler?.(id);
+ },
+ onError: (e) => {
+ toast({
+ emphasis: "subtle",
+ status: "error",
+ rounded: true,
+ description: e.message
+ });
+ }
+ });
+
+ const updateComponent = useUpdateComponent({
+ onSuccess: ({ id }) => {
+ queryClient.invalidateQueries({ queryKey: componentKey });
+ successHandler?.(id);
+ },
+ onError: (e) => {
+ toast({
+ emphasis: "subtle",
+ status: "error",
+ rounded: true,
+ description: e.message
+ });
+ }
+ });
+
+ const properties = schema.properties || {};
+ const required = schema.required || [];
+ const defs = schema.$defs;
+
+ function submitHandler({ componentName, ...rest }: FieldValues) {
+ Object.keys(rest).forEach((key) => {
+ if (
+ rest[key] === "" ||
+ rest[key] === null ||
+ rest[key] === undefined ||
+ (Array.isArray(rest[key]) && rest[key].length === 0) ||
+ (typeof rest[key] === "object" &&
+ !Array.isArray(rest[key]) &&
+ Object.keys(rest[key]).length === 0)
+ ) {
+ delete rest[key];
+ }
+ });
+
+ if (!flavor.body) return;
+
+ const { connector, ...config } = rest;
+
+ if (isCreate) {
+ createComponent.mutate({
+ workspaceId: workspaceId,
+ payload: {
+ name: componentName,
+ configuration: config,
+ flavor: flavor.name,
+ type: flavor.body.type,
+ user: userId,
+ connector: connector || null,
+ workspace: workspaceId
+ }
+ });
+ } else {
+ if (!component) return;
+ updateComponent.mutate({
+ componentId: component.id,
+ payload: {
+ name: componentName,
+ configuration: config,
+ connector: connector || null
+ }
+ });
+ }
+ }
+
+ const zodConfig = componentBaseSchema.merge(getZodSchemaFromConfig(schema));
+
+ const defaultConfigValues = generateDefaultValues(schema, component?.metadata?.configuration);
+
+ const form = useForm({
+ resolver: zodResolver(zodConfig),
+ defaultValues: {
+ componentName: component?.name ?? "",
+ connector: component?.metadata?.connector?.id ?? "",
+ ...defaultConfigValues
+ }
+ });
+
+ const { handleSubmit } = form;
+
+ const sortedProperties = Object.entries(properties).sort(([key1], [key2]) => {
+ if (required.includes(key1) && !required.includes(key2)) return -1;
+ if (!required.includes(key1) && required.includes(key2)) return 1;
+ return 0;
+ });
+
+ return (
+
+
+
+ );
+}
+
+type FooterProps = {
+ formId: string;
+ isPending: boolean;
+};
diff --git a/src/components/stack-components/create-component/connector-section.tsx b/src/components/stack-components/create-component/connector-section.tsx
new file mode 100644
index 00000000..e551e44c
--- /dev/null
+++ b/src/components/stack-components/create-component/connector-section.tsx
@@ -0,0 +1,23 @@
+import ConnectorIcon from "@/assets/icons/transform.svg?react";
+import { ConnectorSelect } from "./connector-select";
+
+type Props = {
+ connectorResourceType: string;
+};
+
+export function ConnectorSection({ connectorResourceType }: Props) {
+ return (
+
+
+ );
+}
diff --git a/src/components/stack-components/create-component/connector-select.tsx b/src/components/stack-components/create-component/connector-select.tsx
new file mode 100644
index 00000000..1aed9cf8
--- /dev/null
+++ b/src/components/stack-components/create-component/connector-select.tsx
@@ -0,0 +1,183 @@
+import Check from "@/assets/icons/check.svg?react";
+import Plus from "@/assets/icons/plus.svg?react";
+import { serviceConnectorQueries } from "@/data/service-connectors";
+import { ServiceConnector } from "@/types/service-connectors";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ Popover,
+ PopoverContent,
+ PopoverTrigger
+} from "@zenml-io/react-component-library";
+import { Input, Skeleton } from "@zenml-io/react-component-library/components/server";
+import { cn } from "@zenml-io/react-component-library/utilities";
+import clsx from "clsx";
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { CreateServiceConnectorFallback } from "../../service-connectors/create-fallback";
+
+type Props = {
+ connectorResourceType: string;
+};
+
+export function ConnectorSelect({ connectorResourceType }: Props) {
+ const form = useFormContext();
+ const [open, setOpen] = useState(false);
+ const [createFallbackOpen, setCreateFallbackOpen] = useState(false);
+
+ const connectorList = useInfiniteQuery(
+ serviceConnectorQueries.serviceConnectorListInfinite({
+ resource_type: connectorResourceType,
+ sort_by: "desc:created"
+ })
+ );
+
+ if (connectorList.isPending) return (
+
+
+
+
+
+ {
+ if (
+ value.toLowerCase().includes(search.toLowerCase()) ||
+ value.includes("doNotFilter-")
+ )
+ return 1;
+ return 0;
+ }}
+ >
+ {connectors.length > 0 && (
+
+
+
+ )}
+
+
+
+
+
+ )}
+ />
+
+
+ );
+}
diff --git a/src/components/stack-components/create-component/schema.ts b/src/components/stack-components/create-component/schema.ts
new file mode 100644
index 00000000..9cff4441
--- /dev/null
+++ b/src/components/stack-components/create-component/schema.ts
@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const componentBaseSchema = z.object({
+ componentName: z.string().min(1, "Component name is required"),
+ connector: z.string()
+});
diff --git a/src/components/wizard/Wizard.tsx b/src/components/wizard/Wizard.tsx
index d0a4ad16..54982347 100644
--- a/src/components/wizard/Wizard.tsx
+++ b/src/components/wizard/Wizard.tsx
@@ -1,20 +1,32 @@
-import { Box } from "@zenml-io/react-component-library";
-import { ReactNode } from "react";
+import { Box, cn } from "@zenml-io/react-component-library";
+import { HTMLAttributes, ReactNode } from "react";
export function Wrapper({ children }: { children: ReactNode }) {
return {children} ;
}
-export function Header({ children }: { children: ReactNode }) {
+type Props = HTMLAttributes;
+
+export function Header({ children, className, ...rest }: Props) {
return (
-
+
+
+
+
Edit
+
+
+ );
+ if (flavor.isError || user.isError || workspace.isError)
+ return Failed to fetch flavor
; + + return ( +
+
+
+
+ Connect to resource
++ You can select a Service Connector to connect ZenML to external resources +
+Error
;
+
+ const connectors = connectorList.data?.pages.flatMap((page) => page.items);
+
+ return (
+ <>
+
+ {connectors.length > 0 ? (
+ <>
+ No results
+
+ {connectors.map((connector) => (
+ {
+ const [id] = value.split(":");
+ form.setValue("connector", field.value === id ? "" : id);
+ setOpen(false);
+ }}
+ >
+
+ ))}
+
+
+ ) : (
+
+ {connectorList.hasNextPage && (
+ {
+ connectorList.fetchNextPage();
+ }}
+ >
+ Load more
+
+ )}
+ {
+ // Handle create new action
+ setOpen(false);
+ setCreateFallbackOpen(true);
+ }}
+ >
+
+
+
+
+ No connectors found
+
+ )}
+
+ {typeof connector.body?.connector_type === "object" &&
+ connector.body?.connector_type.logo_url && (
+ 
+ )}
+
+ );
+}
diff --git a/src/components/stack-components/create-component/flavor-select.tsx b/src/components/stack-components/create-component/flavor-select.tsx
new file mode 100644
index 00000000..28a4626a
--- /dev/null
+++ b/src/components/stack-components/create-component/flavor-select.tsx
@@ -0,0 +1,76 @@
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { sanitizeUrl } from "@/lib/url";
+import { Button, Skeleton } from "@zenml-io/react-component-library/components/server";
+import { StackComponentType } from "@/types/components";
+import { Flavor } from "@/types/flavors";
+import { flavorQueries } from "../../../data/flavors";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+type Props = {
+ type: StackComponentType;
+ setSelectedFlavor: (flavor: Flavor) => void;
+};
+
+export function SelectFlavorList({ type, setSelectedFlavor }: Props) {
+ const flavorList = useInfiniteQuery(flavorQueries.flavorListInfinite({ type }));
+ if (flavorList.isPending) return
+
+ {connector.name}
+ {connector.id.split("-")[0]}
+ Failed to fetch Flavor List
; + + const { data } = flavorList; + + return ( +-
+ {data.pages.map((page) =>
+ page.items.map((flavor) => (
+
-
+
setSelectedFlavor(flavor)} + id={flavor.id} + name={flavor.name} + logoUrl={flavor.body?.logo_url ?? undefined} + /> +
+ ))
+ )}
+
-
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ {!!logoUrl && (
+ })
+ )}
+
+
+
+
+
+ Need Help?
++ Follow our extensive documentation to get started. +
+-
+ {!!sdkDocsUrl && (
+
- + + + )} +
- + + +
- + + +
+ >;
+ defaultValues: Record;
+ setDefaultValues: Dispatch>>;
};
const SchemaContext = createContext(null);
@@ -20,7 +22,12 @@ type Props = {
};
export function SchemaProvider({ children, initialSchema }: PropsWithChildren) {
const [schema, setSchema] = useState(initialSchema);
- return {children} ;
+ const [defaultValues, setDefaultValues] = useState>({});
+ return (
+
+ {children}
+
+ );
}
export function useSchemaContext() {
diff --git a/src/data/api.ts b/src/data/api.ts
index 610c6f8c..048d7f92 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -48,13 +48,15 @@ export const apiPaths = {
detail: (stackId: string) => `/stacks/${stackId}`
},
flavors: {
- all: "/flavors"
+ all: "/flavors",
+ detail: (id: string) => `/flavors/${id}`
},
serviceConnectors: {
fullStackResources: "/service_connectors/full_stack_resources",
types: {
detail: (connectorType: string) => `/service_connector_types/${connectorType}`
- }
+ },
+ list: "/service_connectors"
},
steps: {
detail: (stepId: string) => `/steps/${stepId}`,
@@ -73,7 +75,8 @@ export const apiPaths = {
workspaces: {
detail: (workspaceName: string) => `/workspaces/${workspaceName}`,
fullStack: (workspaceId: string) => `/workspaces/${workspaceId}/full-stack`,
- stacks: (workspaceId: string) => `/workspaces/${workspaceId}/stacks`
+ stacks: (workspaceId: string) => `/workspaces/${workspaceId}/stacks`,
+ components: (workspaceId: string) => `/workspaces/${workspaceId}/components`
},
serviceAccounts: {
all: "/service_accounts",
diff --git a/src/data/components/create-component.ts b/src/data/components/create-component.ts
new file mode 100644
index 00000000..f3dab389
--- /dev/null
+++ b/src/data/components/create-component.ts
@@ -0,0 +1,53 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { FetchError } from "@/lib/fetch-error";
+import { StackComponent, StackComponentRequest } from "@/types/components";
+import { apiPaths, createApiPath } from "../api";
+import { fetcher } from "../fetch";
+
+type CreateComponentParams = {
+ workspaceId: string;
+ payload: StackComponentRequest;
+};
+
+export async function createComponent({
+ payload,
+ workspaceId
+}: CreateComponentParams): Promise {
+ const url = createApiPath(apiPaths.workspaces.components(workspaceId));
+ const res = await fetcher(url, {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ method: "POST",
+ body: JSON.stringify(payload)
+ });
+
+ if (!res.ok) {
+ const errorData: string = await res
+ .json()
+ .then((data) => {
+ if (Array.isArray(data.detail)) {
+ return data.detail[1];
+ }
+ return data.detail;
+ })
+ .catch(() => "Error while creating new stack");
+ throw new FetchError({
+ status: res.status,
+ statusText: res.statusText,
+ message: errorData
+ });
+ }
+ return res.json();
+}
+
+export function useCreateComponent(
+ options?: UseMutationOptions
+) {
+ return useMutation({
+ ...options,
+ mutationFn: async ({ workspaceId, payload }: CreateComponentParams) => {
+ return createComponent({ workspaceId, payload });
+ }
+ });
+}
diff --git a/src/data/components/update-component.ts b/src/data/components/update-component.ts
new file mode 100644
index 00000000..2a1c7de5
--- /dev/null
+++ b/src/data/components/update-component.ts
@@ -0,0 +1,53 @@
+import { apiPaths, createApiPath } from "../api";
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { FetchError } from "@/lib/fetch-error";
+import { fetcher } from "../fetch";
+import { StackComponent, StackComponentUpdateRequest } from "../../types/components";
+
+type CreateComponentParams = {
+ componentId: string;
+ payload: StackComponentUpdateRequest;
+};
+
+export async function updateComponent({
+ componentId,
+ payload
+}: CreateComponentParams): Promise {
+ const url = createApiPath(apiPaths.components.detail(componentId));
+ const res = await fetcher(url, {
+ headers: {
+ "Content-Type": "application/json"
+ },
+ method: "PUT",
+ body: JSON.stringify(payload)
+ });
+
+ if (!res.ok) {
+ const errorData: string = await res
+ .json()
+ .then((data) => {
+ if (Array.isArray(data.detail)) {
+ return data.detail[1];
+ }
+ return data.detail;
+ })
+ .catch(() => "Error while creating new stack");
+ throw new FetchError({
+ status: res.status,
+ statusText: res.statusText,
+ message: errorData
+ });
+ }
+ return res.json();
+}
+
+export function useUpdateComponent(
+ options?: UseMutationOptions
+) {
+ return useMutation({
+ ...options,
+ mutationFn: async ({ payload, componentId }: CreateComponentParams) => {
+ return updateComponent({ payload, componentId });
+ }
+ });
+}
diff --git a/src/data/flavors/flavor-detail.ts b/src/data/flavors/flavor-detail.ts
new file mode 100644
index 00000000..2c4854c4
--- /dev/null
+++ b/src/data/flavors/flavor-detail.ts
@@ -0,0 +1,36 @@
+import { Flavor } from "@/types/flavors";
+import { fetcher } from "../fetch";
+import { apiPaths, createApiPath } from "../api";
+import { notFound } from "@/lib/not-found-error";
+import { FetchError } from "@/lib/fetch-error";
+
+export async function fetchFlavorDetail(flavorId: string): Promise {
+ const url = createApiPath(apiPaths.flavors.detail(flavorId));
+
+ const res = await fetcher(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json"
+ }
+ });
+
+ if (res.status === 404) notFound();
+
+ if (!res.ok) {
+ const errorData: string = await res
+ .json()
+ .then((data) => {
+ if (Array.isArray(data.detail)) {
+ return data.detail[1];
+ }
+ return data.detail;
+ })
+ .catch(() => `Error while fetching flavor ${flavorId}`);
+ throw new FetchError({
+ status: res.status,
+ statusText: res.statusText,
+ message: errorData
+ });
+ }
+ return res.json();
+}
diff --git a/src/data/flavors/index.ts b/src/data/flavors/index.ts
index d47d1cfc..13458c47 100644
--- a/src/data/flavors/index.ts
+++ b/src/data/flavors/index.ts
@@ -1,6 +1,7 @@
-import { queryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
import { fetchFlavors } from "./flavors-list";
import { FlavorListQueryParams } from "@/types/flavors";
+import { fetchFlavorDetail } from "./flavor-detail";
export const flavorQueries = {
all: ["flavors"],
@@ -8,5 +9,18 @@ export const flavorQueries = {
queryOptions({
queryKey: [...flavorQueries.all, queryParams],
queryFn: async () => fetchFlavors(queryParams)
+ }),
+ flavorDetail: (flavorId: string) =>
+ queryOptions({
+ queryKey: [...flavorQueries.all, flavorId],
+ queryFn: async () => fetchFlavorDetail(flavorId)
+ }),
+ flavorListInfinite: (queryParams: FlavorListQueryParams) =>
+ infiniteQueryOptions({
+ queryKey: [...flavorQueries.all, queryParams, "infinite"],
+ queryFn: ({ pageParam }) => fetchFlavors({ ...queryParams, page: pageParam }),
+ getNextPageParam: (lastPage) =>
+ lastPage.index < lastPage.total_pages ? lastPage.index + 1 : null,
+ initialPageParam: 1
})
};
diff --git a/src/data/service-connectors/connector-list.ts b/src/data/service-connectors/connector-list.ts
new file mode 100644
index 00000000..bf203512
--- /dev/null
+++ b/src/data/service-connectors/connector-list.ts
@@ -0,0 +1,41 @@
+import { FetchError } from "@/lib/fetch-error";
+import { fetcher } from "../fetch";
+import { apiPaths, createApiPath } from "../api";
+import { ServiceConnectorList, ServiceConnectorListQueryParams } from "@/types/service-connectors";
+import { notFound } from "@/lib/not-found-error";
+import { objectToSearchParams } from "@/lib/url";
+
+export async function fetchServiceConnectorList(
+ params: ServiceConnectorListQueryParams
+): Promise {
+ const queryParams = objectToSearchParams(params).toString();
+ const url = createApiPath(
+ apiPaths.serviceConnectors.list + (queryParams ? `?${queryParams}` : "")
+ );
+ const res = await fetcher(url, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json"
+ }
+ });
+
+ if (res.status === 404) notFound();
+
+ if (!res.ok) {
+ const errorData: string = await res
+ .json()
+ .then((data) => {
+ if (Array.isArray(data.detail)) {
+ return data.detail[1];
+ }
+ return data.detail;
+ })
+ .catch(() => "Error while fetching service connector list");
+ throw new FetchError({
+ status: res.status,
+ statusText: res.statusText,
+ message: errorData
+ });
+ }
+ return res.json();
+}
diff --git a/src/data/service-connectors/index.ts b/src/data/service-connectors/index.ts
index 25583a13..2b7ff1d0 100644
--- a/src/data/service-connectors/index.ts
+++ b/src/data/service-connectors/index.ts
@@ -1,11 +1,22 @@
-import { queryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
import { fetchServiceConnectorType } from "./connector-type-detail";
+import { ServiceConnectorListQueryParams } from "../../types/service-connectors";
+import { fetchServiceConnectorList } from "./connector-list";
export const serviceConnectorQueries = {
connectorTypes: ["service_connector_types"],
+ connectors: ["service_connectors"] as const,
serviceConnectorTypeDetail: (connectorType: string) =>
queryOptions({
queryKey: [...serviceConnectorQueries.connectorTypes, connectorType],
queryFn: async () => fetchServiceConnectorType(connectorType)
+ }),
+ serviceConnectorListInfinite: (params: ServiceConnectorListQueryParams = {}) =>
+ infiniteQueryOptions({
+ queryKey: [...serviceConnectorQueries.connectors, params, "infinite"],
+ queryFn: ({ pageParam }) => fetchServiceConnectorList({ ...params, page: pageParam }),
+ getNextPageParam: (lastPage) =>
+ lastPage.index < lastPage.total_pages ? lastPage.index + 1 : null,
+ initialPageParam: 1
})
};
diff --git a/src/layouts/AuthenticatedLayout/Sidebar.tsx b/src/layouts/AuthenticatedLayout/Sidebar.tsx
index 1cb00868..a68da23f 100644
--- a/src/layouts/AuthenticatedLayout/Sidebar.tsx
+++ b/src/layouts/AuthenticatedLayout/Sidebar.tsx
@@ -33,7 +33,7 @@ export function Sidebar() {
return (
) {
const schema = Object.keys(object).reduce(
@@ -11,3 +12,117 @@ export function zodSchemaFromObject(object: Record) {
return z.object(schema);
}
+
+export function getZodSchemaFromConfig(rootSchema: JSONSchemaDefinition) {
+ if (!rootSchema.properties) {
+ return z.object({});
+ }
+
+ const required = rootSchema.required || [];
+ const schema = rootSchema.properties;
+
+ const zodSchema = Object.keys(schema).reduce(
+ (acc, key) => {
+ const config = schema[key];
+ if (!config) return acc;
+
+ const isOptional = getisOptional(key, required);
+ acc[key] = getZodTypeFromSchema(config, rootSchema.$defs, isOptional);
+ return acc;
+ },
+ {} as Record
+ );
+
+ return z.object(zodSchema);
+}
+
+function getZodTypeFromSchema(
+ schema: JSONSchemaDefinition,
+ definitions: JSONSchemaDefinition["$defs"],
+ isOptional: boolean,
+ isNested: boolean = false
+): ZodTypeAny {
+ let resolvedSchema = resolveRef(schema, definitions);
+
+ if (resolvedSchema.anyOf) {
+ const nonNullOption = resolvedSchema.anyOf.find((option) => option.type !== null);
+ if (nonNullOption) {
+ resolvedSchema = resolveRef(nonNullOption, definitions);
+ }
+ }
+
+ if (resolvedSchema.allOf) {
+ resolvedSchema = resolveRef(resolvedSchema.allOf[0], definitions);
+ }
+
+ const schemaType = resolvedSchema.type;
+
+ switch (schemaType) {
+ case "string":
+ return !isOptional ? z.string().trim().min(1, "Required") : z.string().trim();
+ case "boolean":
+ return isOptional ? z.union([z.literal(""), z.boolean()]) : z.boolean();
+ case "array": {
+ if (isNested) {
+ return isOptional ? z.union([z.literal(""), jsonSchema]) : jsonSchema;
+ }
+ const arraySchema = z.array(
+ getZodTypeFromSchema(resolvedSchema.items || {}, definitions, false, false)
+ );
+ return isOptional ? arraySchema : arraySchema.min(1);
+ }
+ case "object":
+ return isOptional ? z.union([z.literal(""), jsonSchema]) : jsonSchema;
+ case "integer":
+ return isOptional
+ ? z.union([z.literal(""), z.preprocess((val) => Number(val), z.number().int())])
+ : z.preprocess((val) => Number(val), z.number().int());
+ default:
+ return isOptional ? z.union([z.literal(""), z.string()]) : z.string().min(1, "Required");
+ }
+}
+
+export function getisOptional(key: string, required: string[]) {
+ return !required.includes(key);
+}
+
+export function resolveDefinitions(defs: JSONSchema["$defs"], key: string) {
+ if (!defs) return null;
+ const defKey = resolveRefName(key);
+ const def = defKey ? defs[defKey] : undefined;
+ if (!def) return null;
+ return def.properties;
+}
+
+export function resolveRefName(key: string) {
+ return key.split("/").pop();
+}
+
+const jsonSchema = z
+ .string()
+ .refine(
+ (value) => {
+ try {
+ JSON.parse(value);
+ return true;
+ } catch (_) {
+ return false;
+ }
+ },
+ {
+ message: "Invalid JSON"
+ }
+ )
+ .transform((value) => (value === "" ? value : JSON.parse(value)));
+
+export function resolveRef(
+ schema: JSONSchemaDefinition,
+ definitions?: JSONSchemaDefinition["$defs"]
+): JSONSchemaDefinition {
+ if (!schema.$ref || !definitions) return schema;
+
+ const refName = schema.$ref.split("/").pop();
+ if (!refName || !definitions[refName]) return schema;
+
+ return definitions[refName];
+}
diff --git a/src/lib/service-connectors.ts b/src/lib/service-connectors.ts
deleted file mode 100644
index f5e3a475..00000000
--- a/src/lib/service-connectors.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ConnectorConfigProperties } from "@/types/service-connectors";
-import { z, ZodTypeAny } from "zod";
-
-export function getZodSchemaFromConfig(schema: ConnectorConfigProperties, required: string[]) {
- const zodSchema = Object.keys(schema).reduce(
- (acc, key) => {
- const config = schema[key];
- let type: ZodTypeAny;
- const isOptional = getisOptional(key, required);
- const schemaType = config.type || config.anyOf?.find((item) => item.type !== null)?.type;
-
- switch (schemaType) {
- case "string":
- type = z.string().trim();
- break;
- case "boolean":
- type = z.boolean();
- break;
- case "array":
- type = z.array(z.string());
- break;
- default:
- type = z.string();
- break;
- }
- if (isOptional) {
- type = type.optional();
- }
-
- if (!isOptional && config.type === "string") {
- if (type instanceof z.ZodString) {
- type = type.min(1, "Required");
- }
- }
-
- acc[key] = type;
- return acc;
- },
- {} as Record
- );
- return z.object(zodSchema);
-}
-
-export function getisOptional(key: string, required: string[]) {
- return !required.includes(key);
-}
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index d7c10729..363eed2d 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -1,4 +1,5 @@
import { CreateStacksLayout } from "@/app/stacks/create/layout";
+import ComponentDetailLayout from "@/app/components/[componentId]/layout";
import { surveyLoader } from "@/app/survey/loader";
import { RootBoundary } from "@/error-boundaries/RootBoundary";
import { AuthenticatedLayout } from "@/layouts/AuthenticatedLayout";
@@ -43,6 +44,8 @@ const ServiceAccountsDetail = lazy(
// Components
const Components = lazy(() => import("@/app/components/page"));
const ComponentDetail = lazy(() => import("@/app/components/[componentId]/page"));
+const ComponentCreate = lazy(() => import("@/app/components/create/page"));
+const ComponentEdit = lazy(() => import("@/app/components/[componentId]/edit/page"));
//Stacks
const Stacks = lazy(() => import("@/app/stacks/page"));
@@ -257,12 +260,32 @@ export const router = createBrowserRouter(
}
/>
+
+
+ }
+ />
+
+
+ }
+ />
+
-
}
/>
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index 1fb4e237..d73a978b 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -21,7 +21,9 @@ export const routes = {
},
components: {
overview: "/components",
- detail: (componentId: string) => `/components/${componentId}`
+ detail: (componentId: string) => `/components/${componentId}`,
+ edit: (componentId: string) => `/components/${componentId}/edit`,
+ create: "/components/create"
},
stacks: {
overview: "/stacks",
diff --git a/src/types/components.ts b/src/types/components.ts
index 2fa15caa..753f235e 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -6,3 +6,6 @@ export type StackComponentPage = components["schemas"]["Page_ComponentResponse_"
export type StackComponentListParams = NonNullable<
operations["list_stack_components_api_v1_components_get"]["parameters"]["query"]
>;
+
+export type StackComponentRequest = components["schemas"]["ComponentRequest"];
+export type StackComponentUpdateRequest = components["schemas"]["ComponentUpdate"];
diff --git a/src/types/flavors.ts b/src/types/flavors.ts
index 363a27b3..856692cb 100644
--- a/src/types/flavors.ts
+++ b/src/types/flavors.ts
@@ -4,3 +4,5 @@ export type FlavorsPage = components["schemas"]["Page_FlavorResponse_"];
export type FlavorListQueryParams = NonNullable<
operations["list_flavors_api_v1_flavors_get"]["parameters"]["query"]
>;
+
+export type Flavor = components["schemas"]["FlavorResponse"];
diff --git a/src/types/forms.ts b/src/types/forms.ts
new file mode 100644
index 00000000..839e7330
--- /dev/null
+++ b/src/types/forms.ts
@@ -0,0 +1,55 @@
+export type JSONSchemaType =
+ | "string"
+ | "number"
+ | "integer"
+ | "boolean"
+ | "object"
+ | "array"
+ | "null";
+
+export type JSONSchemaDefinition = {
+ prefixItems?: JSONSchemaDefinition[];
+ type?: JSONSchemaType | JSONSchemaType[];
+ title?: string;
+ description?: string;
+ default?: any;
+ examples?: any[];
+ const?: any;
+ enum?: any[];
+ multipleOf?: number;
+ maximum?: number;
+ exclusiveMaximum?: number;
+ minimum?: number;
+ exclusiveMinimum?: number;
+ maxLength?: number;
+ items?: JSONSchemaDefinition;
+ minLength?: number;
+ pattern?: string;
+ sensitive?: boolean;
+ format?: string;
+ maxItems?: number;
+ minItems?: number;
+ uniqueItems?: boolean;
+ maxProperties?: number;
+ minProperties?: number;
+ required?: string[];
+ additionalProperties?: boolean | JSONSchemaDefinition;
+ properties?: { [key: string]: JSONSchemaDefinition };
+ patternProperties?: { [key: string]: JSONSchemaDefinition };
+ dependencies?: { [key: string]: string[] | JSONSchemaDefinition };
+ propertyNames?: JSONSchemaDefinition;
+ allOf?: JSONSchemaDefinition[];
+ anyOf?: JSONSchemaDefinition[];
+ oneOf?: JSONSchemaDefinition[];
+ not?: JSONSchemaDefinition;
+ if?: JSONSchemaDefinition;
+ then?: JSONSchemaDefinition;
+ else?: JSONSchemaDefinition;
+ $ref?: string;
+ $defs?: { [key: string]: JSONSchemaDefinition };
+};
+
+export type JSONSchema = JSONSchemaDefinition & {
+ $schema?: string;
+ $id?: string;
+};
diff --git a/src/types/service-connectors.ts b/src/types/service-connectors.ts
index 2f820894..26029b04 100644
--- a/src/types/service-connectors.ts
+++ b/src/types/service-connectors.ts
@@ -1,31 +1,8 @@
import { StackComponent } from "./components";
-import { components } from "./core";
+import { components, operations } from "./core";
export type ServiceConnectorType = components["schemas"]["ServiceConnectorTypeModel"];
-export type ConnectorConfigPropertiesBody = {
- type?: string;
- anyOf?: AnyOf[];
- title: string;
- format?: string;
- default?: boolean | null;
-};
-
-type AnyOf = {
- type: string | null;
- items?: { type: string };
-};
-
-export type ConnectorConfigProperties = { [key: string]: ConnectorConfigPropertiesBody };
-
-export type ServiceConnectorConfigSchema = {
- required: string[];
- title: string;
- type: string;
- description: string;
- properties: ConnectorConfigProperties;
-};
-
export type ServiceConnectorInfo = components["schemas"]["ServiceConnectorInfo"];
export type ServiceConnectorResourceInfo = components["schemas"]["ServiceConnectorResourcesInfo"];
@@ -45,3 +22,10 @@ export type ServiceConnectorResourceInfoItem = {
accessible_by_service_connector: string[];
connected_through_service_connector?: StackComponent[];
};
+
+export type ServiceConnectorList = components["schemas"]["Page_ServiceConnectorResponse_"];
+export type ServiceConnectorListQueryParams = NonNullable<
+ operations["list_service_connectors_api_v1_service_connectors_get"]["parameters"]["query"]
+>;
+
+export type ServiceConnector = components["schemas"]["ServiceConnectorResponse"];
{children}
);
}
-export function Body({ children }: { children: ReactNode }) {
- return {children}
;
+export function Body({ children, className, ...rest }: Props) {
+ return (
+
+ {children}
+
+ );
}
export function Footer({ children }: { children: ReactNode }) {
diff --git a/src/context/SchemaContext.tsx b/src/context/SchemaContext.tsx
index 213c16c7..6f9b57e2 100644
--- a/src/context/SchemaContext.tsx
+++ b/src/context/SchemaContext.tsx
@@ -11,6 +11,8 @@ import { ZodSchema } from "zod";
type SchemaContextType = {
schema: ZodSchema;
setSchema: Dispatch