Skip to content

Commit 1ea0177

Browse files
moshloopmoshloop
committed
wip: formik modal
1 parent 2e0ee68 commit 1ea0177

File tree

7 files changed

+473
-209
lines changed

7 files changed

+473
-209
lines changed

‎src/components/Forms/SpecEditorForm.tsx

Lines changed: 167 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import clsx from "clsx";
2-
import { Form, Formik } from "formik";
2+
import { Form, Formik, useFormikContext } from "formik";
33
import { useCallback, useMemo, useRef, useState } from "react";
44
import { Button } from "../../ui/Buttons/Button";
55
import { Tab, Tabs } from "../../ui/Tabs/Tabs";
@@ -18,6 +18,7 @@ import FormikTextInput from "./Formik/FormikTextInput";
1818

1919
type SpecEditorFormProps = {
2020
loadSpec: () => Record<string, any>;
21+
footer: boolean;
2122
updateSpec: (spec: Record<string, any>) => void;
2223
onBack: () => void;
2324
specFormat: "yaml" | "json";
@@ -26,14 +27,17 @@ type SpecEditorFormProps = {
2627
onDeleted: () => void;
2728
};
2829

30+
31+
2932
export default function SpecEditorForm({
3033
resourceInfo,
3134
loadSpec = () => ({}),
32-
updateSpec = () => {},
33-
onBack = () => {},
35+
updateSpec = () => { },
36+
onBack = () => { },
3437
specFormat = "yaml",
38+
footer = true,
3539
selectedSpec,
36-
onDeleted = () => {}
40+
onDeleted = () => { }
3741
}: SpecEditorFormProps) {
3842
const formRef = useRef<HTMLFormElement>(null);
3943
const [activeTabs, setActiveTabs] = useState<"Form" | "Code">(
@@ -90,164 +94,170 @@ export default function SpecEditorForm({
9094
};
9195

9296
return (
93-
<Formik
94-
initialValues={initialValues}
95-
onSubmit={(values) => {
96-
updateSpec(values);
97-
}}
98-
validateOnBlur
99-
validateOnChange
100-
>
101-
{({ handleSubmit, handleReset, setFieldTouched }) => (
102-
<Form
103-
onSubmit={(e) => {
104-
handleSubmit(e);
105-
touchAllFormFields(setFieldTouched);
106-
}}
107-
onReset={handleReset}
108-
className="flex flex-col flex-1 overflow-y-auto space-y-4"
109-
ref={formRef}
110-
>
111-
<div className="flex flex-col flex-1 overflow-y-auto space-y-4 px-4 py-4">
112-
<div className="flex flex-col space-y-2">
113-
{isFieldSupportedByResourceType("name") && (
114-
<FormikTextInput name="name" label="Name" required />
115-
)}
116-
{isFieldSupportedByResourceType("icon") && (
117-
<FormikIconPicker name="icon" label="Icon" />
118-
)}
119-
{isFieldSupportedByResourceType("labels") && (
120-
<FormikKeyValueMapField name="labels" label="Labels" />
121-
)}
122-
{isFieldSupportedByResourceType("source") && (
123-
<FormikTextInput
124-
name="source"
125-
label="Source"
126-
required
127-
readOnly
97+
// <Formik
98+
// initialValues={initialValues}
99+
// onSubmit={(values) => {
100+
// console.log('123')
101+
// updateSpec(values);
102+
// }}
103+
// validateOnBlur
104+
// validateOnChange
105+
// >
106+
// {({ handleSubmit, handleReset, setFieldTouched }) => (
107+
// <Form
108+
// onSubmit={(e) => {
109+
// console.log('456')
110+
// handleSubmit(e);
111+
// touchAllFormFields(setFieldTouched);
112+
// }}
113+
// onReset={handleReset}
114+
// className="flex flex-col flex-1 overflow-y-auto space-y-4"
115+
// ref={formRef}
116+
// >
117+
<>
118+
<div className="flex flex-col flex-1 space-y-4 px-4 py-4">
119+
<div className="flex flex-col space-y-2">
120+
{isFieldSupportedByResourceType("name") && (
121+
<FormikTextInput name="name" label="Name" required />
122+
)}
123+
{isFieldSupportedByResourceType("icon") && (
124+
<FormikIconPicker name="icon" label="Icon" />
125+
)}
126+
{isFieldSupportedByResourceType("labels") && (
127+
<FormikKeyValueMapField name="labels" label="Labels" />
128+
)}
129+
{isFieldSupportedByResourceType("source") && (
130+
<FormikTextInput
131+
name="source"
132+
label="Source"
133+
hidden
134+
readOnly
135+
/>
136+
)}
137+
{isFieldSupportedByResourceType("schedule") && (
138+
<FormikAutocompleteDropdown
139+
name="schedule"
140+
label="Schedule"
141+
options={[
142+
{
143+
label: "@every 30s",
144+
value: "@every 30s"
145+
},
146+
{
147+
label: "@every 1m",
148+
value: "@every 1m"
149+
},
150+
{
151+
label: "@every 5m",
152+
value: "@every 5m"
153+
},
154+
{
155+
label: "@every 30m",
156+
value: "@every 30m"
157+
},
158+
{
159+
label: "@hourly",
160+
value: "@hourly"
161+
},
162+
{
163+
label: "@every 6h",
164+
value: "@every 6h"
165+
},
166+
{
167+
label: "@daily",
168+
value: "@daily"
169+
},
170+
{
171+
label: "@weekly",
172+
value: "@weekly"
173+
}
174+
]}
175+
/>
176+
)}
177+
</div>
178+
<div className="flex flex-col py-2">
179+
{selectedSpec.type !== "form" ? (
180+
<>
181+
<label className="form-label">Specs</label>
182+
<FormikCodeEditor
183+
format={specFormat}
184+
className="flex flex-col h-[min(600px,calc(90vh))]"
185+
fieldName={
186+
selectedSpec.type === "code"
187+
? `spec.${selectedSpec.specsMapField}`
188+
: // if it's a custom spec, then the field name is `spec`
189+
`spec`
190+
}
191+
schemaFileName={selectedSpec.schemaFileName}
192+
enableSpecUnwrap
193+
/>
194+
</>
195+
) : (
196+
<Tabs
197+
activeTab={activeTabs}
198+
onSelectTab={(v) => setActiveTabs(v as "Code" | "Form")}
199+
>
200+
<Tab label="Form" value="Form">
201+
<div className="flex flex-col space-y-4 p-4">
202+
<selectedSpec.configForm
203+
fieldName="spec"
204+
specsMapField={selectedSpec.specsMapField}
205+
/>
206+
</div>
207+
</Tab>
208+
<Tab label="Code" value="Code">
209+
<FormikCodeEditor
210+
format={specFormat}
211+
fieldName="spec"
212+
schemaFileName={selectedSpec.schemaFileName}
128213
/>
214+
</Tab>
215+
</Tabs>
216+
)}
217+
</div>
218+
</div>
219+
{footer &&
220+
<div className="flex flex-row bg-gray-100 p-4">
221+
<div className="flex flex-1 flex-row items-center space-x-4 justify-end">
222+
<CanEditResource
223+
resourceType={resourceInfo.table}
224+
id={initialValues.id}
225+
namespace={initialValues.namespace}
226+
name={initialValues.name}
227+
agentId={initialValues.agent_details?.id}
228+
agentName={initialValues.agent_details?.name}
229+
source={initialValues.source}
230+
>
231+
{!initialValues.id && (
232+
<div className="flex flex-1 flex-row">
233+
<Button
234+
type="button"
235+
text="Back"
236+
className="btn-default btn-btn-secondary-base btn-secondary"
237+
onClick={onBack}
238+
/>{" "}
239+
</div>
129240
)}
130-
{isFieldSupportedByResourceType("schedule") && (
131-
<FormikAutocompleteDropdown
132-
name="schedule"
133-
label="Schedule"
134-
options={[
135-
{
136-
label: "@every 30s",
137-
value: "@every 30s"
138-
},
139-
{
140-
label: "@every 1m",
141-
value: "@every 1m"
142-
},
143-
{
144-
label: "@every 5m",
145-
value: "@every 5m"
146-
},
147-
{
148-
label: "@every 30m",
149-
value: "@every 30m"
150-
},
151-
{
152-
label: "@hourly",
153-
value: "@hourly"
154-
},
155-
{
156-
label: "@every 6h",
157-
value: "@every 6h"
158-
},
159-
{
160-
label: "@daily",
161-
value: "@daily"
162-
},
163-
{
164-
label: "@weekly",
165-
value: "@weekly"
166-
}
167-
]}
241+
{!!initialValues.id && (
242+
<DeleteResource
243+
resourceId={initialValues.id}
244+
resourceInfo={resourceInfo}
245+
onDeleted={onDeleted}
168246
/>
169247
)}
170-
</div>
171-
<div className="flex flex-col py-2">
172-
{selectedSpec.type !== "form" ? (
173-
<>
174-
<label className="form-label">Specs</label>
175-
<FormikCodeEditor
176-
format={specFormat}
177-
className="flex flex-col h-[min(600px,calc(90vh))]"
178-
fieldName={
179-
selectedSpec.type === "code"
180-
? `spec.${selectedSpec.specsMapField}`
181-
: // if it's a custom spec, then the field name is `spec`
182-
`spec`
183-
}
184-
schemaFileName={selectedSpec.schemaFileName}
185-
enableSpecUnwrap
186-
/>
187-
</>
188-
) : (
189-
<Tabs
190-
activeTab={activeTabs}
191-
onSelectTab={(v) => setActiveTabs(v as "Code" | "Form")}
192-
>
193-
<Tab label="Form" value="Form">
194-
<div className="flex flex-col space-y-4 p-4">
195-
<selectedSpec.configForm
196-
fieldName="spec"
197-
specsMapField={selectedSpec.specsMapField}
198-
/>
199-
</div>
200-
</Tab>
201-
<Tab label="Code" value="Code">
202-
<FormikCodeEditor
203-
format={specFormat}
204-
fieldName="spec"
205-
schemaFileName={selectedSpec.schemaFileName}
206-
/>
207-
</Tab>
208-
</Tabs>
209-
)}
210-
</div>
211-
</div>
212-
<div className="flex flex-row bg-gray-100 p-4">
213-
<div className="flex flex-1 flex-row items-center space-x-4 justify-end">
214-
<CanEditResource
215-
resourceType={resourceInfo.table}
216-
id={initialValues.id}
217-
namespace={initialValues.namespace}
218-
name={initialValues.name}
219-
agentId={initialValues.agent_details?.id}
220-
agentName={initialValues.agent_details?.name}
221-
source={initialValues.source}
222-
>
223-
{!initialValues.id && (
224-
<div className="flex flex-1 flex-row">
225-
<Button
226-
type="button"
227-
text="Back"
228-
className="btn-default btn-btn-secondary-base btn-secondary"
229-
onClick={onBack}
230-
/>{" "}
231-
</div>
232-
)}
233-
{!!initialValues.id && (
234-
<DeleteResource
235-
resourceId={initialValues.id}
236-
resourceInfo={resourceInfo}
237-
onDeleted={onDeleted}
238-
/>
239-
)}
240248

241-
<Button
242-
type="submit"
243-
text={!!initialValues.id ? "Update" : "Save"}
244-
className={clsx("btn-primary")}
245-
/>
246-
</CanEditResource>
247-
</div>
249+
<Button
250+
type="submit"
251+
text={!!initialValues.id ? "Update" : "Save"}
252+
className={clsx("btn-primary")}
253+
/>
254+
</CanEditResource>
248255
</div>
249-
</Form>
250-
)}
251-
</Formik>
256+
</div>
257+
}
258+
</>
259+
// </Form>
260+
// )}
261+
// </Formik>
252262
);
253263
}

‎src/components/Integrations/Add/steps/CatalogFormOption.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { useSettingsCreateResource } from "@flanksource-ui/api/query-hooks/mutations/useSettingsResourcesMutations";
22
import { schemaResourceTypes } from "@flanksource-ui/components/SchemaResourcePage/resourceTypes";
33
import ConfigScrapperSpecEditor from "@flanksource-ui/components/SpecEditor/ConfigScrapperSpecEditor";
4+
import { SpecEditorProps } from "@flanksource-ui/components/SpecEditor/SpecEditor";
45

5-
type Props = {
6+
type Props = Pick<SpecEditorProps, "onTypeSelected" | "onBack"> & {
67
onSuccess: () => void;
7-
onBack: () => void;
88
};
99

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

2020
return (
2121
<div className="flex flex-col gap-2 overflow-y-auto h-full">
22-
<ConfigScrapperSpecEditor onSubmit={createResource} onBack={onBack} />
22+
<ConfigScrapperSpecEditor onSubmit={createResource} footer={false} {...props} />
2323
</div>
2424
);
2525
}

0 commit comments

Comments
 (0)