Skip to content

Commit

Permalink
wip: formik modal
Browse files Browse the repository at this point in the history 
chore: improve modal

fix: fix type issues
  • Loading branch information
@moshloop @mainawycliffe
moshloop authored and mainawycliffe committed Jul 10, 2024
1 parent 12142f0 commit 127dba3
Show file tree
Hide file tree
Showing 9 changed files with 583 additions and 234 deletions.
324 changes: 167 additions & 157 deletions src/components/Forms/SpecEditorForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import clsx from "clsx";
import { Form, Formik } from "formik";
import { Form, Formik, useFormikContext } from "formik";

Check warning on line 2 in src/components/Forms/SpecEditorForm.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'Form' is defined but never used

Check warning on line 2 in src/components/Forms/SpecEditorForm.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'Formik' is defined but never used
import { useCallback, useMemo, useRef, useState } from "react";
import { Button } from "../../ui/Buttons/Button";
import { Tab, Tabs } from "../../ui/Tabs/Tabs";
Expand All @@ -18,6 +18,7 @@ import FormikTextInput from "./Formik/FormikTextInput";

type SpecEditorFormProps = {
loadSpec: () => Record<string, any>;
footer: boolean;
updateSpec: (spec: Record<string, any>) => void;
onBack: () => void;
specFormat: "yaml" | "json";
Expand All @@ -26,14 +27,17 @@ type SpecEditorFormProps = {
onDeleted: () => void;
};



export default function SpecEditorForm({
resourceInfo,
loadSpec = () => ({}),
updateSpec = () => {},
onBack = () => {},
updateSpec = () => { },
onBack = () => { },
specFormat = "yaml",
footer = true,
selectedSpec,
onDeleted = () => {}
onDeleted = () => { }
}: SpecEditorFormProps) {
const formRef = useRef<HTMLFormElement>(null);
const [activeTabs, setActiveTabs] = useState<"Form" | "Code">(
Expand Down Expand Up @@ -90,164 +94,170 @@ export default function SpecEditorForm({
};

return (
<Formik
initialValues={initialValues}
onSubmit={(values) => {
updateSpec(values);
}}
validateOnBlur
validateOnChange
>
{({ handleSubmit, handleReset, setFieldTouched }) => (
<Form
onSubmit={(e) => {
handleSubmit(e);
touchAllFormFields(setFieldTouched);
}}
onReset={handleReset}
className="flex flex-col flex-1 overflow-y-auto space-y-4"
ref={formRef}
>
<div className="flex flex-col flex-1 overflow-y-auto space-y-4 px-4 py-4">
<div className="flex flex-col space-y-2">
{isFieldSupportedByResourceType("name") && (
<FormikTextInput name="name" label="Name" required />
)}
{isFieldSupportedByResourceType("icon") && (
<FormikIconPicker name="icon" label="Icon" />
)}
{isFieldSupportedByResourceType("labels") && (
<FormikKeyValueMapField name="labels" label="Labels" />
)}
{isFieldSupportedByResourceType("source") && (
<FormikTextInput
name="source"
label="Source"
required
readOnly
// <Formik
// initialValues={initialValues}
// onSubmit={(values) => {
// console.log('123')
// updateSpec(values);
// }}
// validateOnBlur
// validateOnChange
// >
// {({ handleSubmit, handleReset, setFieldTouched }) => (
// <Form
// onSubmit={(e) => {
// console.log('456')
// handleSubmit(e);
// touchAllFormFields(setFieldTouched);
// }}
// onReset={handleReset}
// className="flex flex-col flex-1 overflow-y-auto space-y-4"
// ref={formRef}
// >
<>
<div className="flex flex-col flex-1 space-y-4 px-4 py-4">
<div className="flex flex-col space-y-2">
{isFieldSupportedByResourceType("name") && (
<FormikTextInput name="name" label="Name" required />
)}
{isFieldSupportedByResourceType("icon") && (
<FormikIconPicker name="icon" label="Icon" />
)}
{isFieldSupportedByResourceType("labels") && (
<FormikKeyValueMapField name="labels" label="Labels" />
)}
{isFieldSupportedByResourceType("source") && (
<FormikTextInput
name="source"
label="Source"
hidden
readOnly
/>
)}
{isFieldSupportedByResourceType("schedule") && (
<FormikAutocompleteDropdown
name="schedule"
label="Schedule"
options={[
{
label: "@every 30s",
value: "@every 30s"
},
{
label: "@every 1m",
value: "@every 1m"
},
{
label: "@every 5m",
value: "@every 5m"
},
{
label: "@every 30m",
value: "@every 30m"
},
{
label: "@hourly",
value: "@hourly"
},
{
label: "@every 6h",
value: "@every 6h"
},
{
label: "@daily",
value: "@daily"
},
{
label: "@weekly",
value: "@weekly"
}
]}
/>
)}
</div>
<div className="flex flex-col py-2">
{selectedSpec.type !== "form" ? (
<>
<label className="form-label">Specs</label>
<FormikCodeEditor
format={specFormat}
className="flex flex-col h-[min(600px,calc(90vh))]"
fieldName={
selectedSpec.type === "code"
? `spec.${selectedSpec.specsMapField}`
: // if it's a custom spec, then the field name is `spec`
`spec`
}
schemaFileName={selectedSpec.schemaFileName}
enableSpecUnwrap
/>
</>
) : (
<Tabs
activeTab={activeTabs}
onSelectTab={(v) => setActiveTabs(v as "Code" | "Form")}
>
<Tab label="Form" value="Form">
<div className="flex flex-col space-y-4 p-4">
<selectedSpec.configForm
fieldName="spec"
specsMapField={selectedSpec.specsMapField}
/>
</div>
</Tab>
<Tab label="Code" value="Code">
<FormikCodeEditor
format={specFormat}
fieldName="spec"
schemaFileName={selectedSpec.schemaFileName}
/>
</Tab>
</Tabs>
)}
</div>
</div>
{footer &&
<div className="flex flex-row bg-gray-100 p-4">
<div className="flex flex-1 flex-row items-center space-x-4 justify-end">
<CanEditResource
resourceType={resourceInfo.table}
id={initialValues.id}
namespace={initialValues.namespace}
name={initialValues.name}
agentId={initialValues.agent_details?.id}
agentName={initialValues.agent_details?.name}
source={initialValues.source}
>
{!initialValues.id && (
<div className="flex flex-1 flex-row">
<Button
type="button"
text="Back"
className="btn-default btn-btn-secondary-base btn-secondary"
onClick={onBack}
/>{" "}
</div>
)}
{isFieldSupportedByResourceType("schedule") && (
<FormikAutocompleteDropdown
name="schedule"
label="Schedule"
options={[
{
label: "@every 30s",
value: "@every 30s"
},
{
label: "@every 1m",
value: "@every 1m"
},
{
label: "@every 5m",
value: "@every 5m"
},
{
label: "@every 30m",
value: "@every 30m"
},
{
label: "@hourly",
value: "@hourly"
},
{
label: "@every 6h",
value: "@every 6h"
},
{
label: "@daily",
value: "@daily"
},
{
label: "@weekly",
value: "@weekly"
}
]}
{!!initialValues.id && (
<DeleteResource
resourceId={initialValues.id}
resourceInfo={resourceInfo}
onDeleted={onDeleted}
/>
)}
</div>
<div className="flex flex-col py-2">
{selectedSpec.type !== "form" ? (
<>
<label className="form-label">Specs</label>
<FormikCodeEditor
format={specFormat}
className="flex flex-col h-[min(600px,calc(90vh))]"
fieldName={
selectedSpec.type === "code"
? `spec.${selectedSpec.specsMapField}`
: // if it's a custom spec, then the field name is `spec`
`spec`
}
schemaFileName={selectedSpec.schemaFileName}
enableSpecUnwrap
/>
</>
) : (
<Tabs
activeTab={activeTabs}
onSelectTab={(v) => setActiveTabs(v as "Code" | "Form")}
>
<Tab label="Form" value="Form">
<div className="flex flex-col space-y-4 p-4">
<selectedSpec.configForm
fieldName="spec"
specsMapField={selectedSpec.specsMapField}
/>
</div>
</Tab>
<Tab label="Code" value="Code">
<FormikCodeEditor
format={specFormat}
fieldName="spec"
schemaFileName={selectedSpec.schemaFileName}
/>
</Tab>
</Tabs>
)}
</div>
</div>
<div className="flex flex-row bg-gray-100 p-4">
<div className="flex flex-1 flex-row items-center space-x-4 justify-end">
<CanEditResource
resourceType={resourceInfo.table}
id={initialValues.id}
namespace={initialValues.namespace}
name={initialValues.name}
agentId={initialValues.agent_details?.id}
agentName={initialValues.agent_details?.name}
source={initialValues.source}
>
{!initialValues.id && (
<div className="flex flex-1 flex-row">
<Button
type="button"
text="Back"
className="btn-default btn-btn-secondary-base btn-secondary"
onClick={onBack}
/>{" "}
</div>
)}
{!!initialValues.id && (
<DeleteResource
resourceId={initialValues.id}
resourceInfo={resourceInfo}
onDeleted={onDeleted}
/>
)}

<Button
type="submit"
text={!!initialValues.id ? "Update" : "Save"}
className={clsx("btn-primary")}
/>
</CanEditResource>
</div>
<Button
type="submit"
text={!!initialValues.id ? "Update" : "Save"}
className={clsx("btn-primary")}
/>
</CanEditResource>
</div>
</Form>
)}
</Formik>
</div>
}
</>
// </Form>
// )}
// </Formik>
);
}
8 changes: 4 additions & 4 deletions src/components/Integrations/Add/steps/CatalogFormOption.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { useSettingsCreateResource } from "@flanksource-ui/api/query-hooks/mutations/useSettingsResourcesMutations";
import { schemaResourceTypes } from "@flanksource-ui/components/SchemaResourcePage/resourceTypes";
import ConfigScrapperSpecEditor from "@flanksource-ui/components/SpecEditor/ConfigScrapperSpecEditor";
import { SpecEditorProps } from "@flanksource-ui/components/SpecEditor/SpecEditor";

type Props = {
type Props = Pick<SpecEditorProps, "onTypeSelected" | "onBack"> & {
onSuccess: () => void;
onBack: () => void;
};

export default function CatalogFormOption({ onSuccess, onBack }: Props) {
export default function CatalogFormOption({ onSuccess, ...props }: Props) {
const resourceInfo = schemaResourceTypes.find(
(resource) => resource.name === "Catalog Scraper"
);
Expand All @@ -19,7 +19,7 @@ export default function CatalogFormOption({ onSuccess, onBack }: Props) {

return (
<div className="flex flex-col gap-2 overflow-y-auto h-full">
<ConfigScrapperSpecEditor onSubmit={createResource} onBack={onBack} />
<ConfigScrapperSpecEditor onSubmit={createResource} footer={false} {...props} />
</div>
);
}
Loading

0 comments on commit 127dba3

Please sign in to comment.