Skip to content

Commit

Permalink
advanced settings in a separate component
Browse files Browse the repository at this point in the history
  • Loading branch information
aakrem committed May 17, 2024
1 parent b5300df commit 1002198
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 31 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, {useState, useEffect} from "react"
import {Form, Input, Collapse} from "antd"
import {CaretRightOutlined} from "@ant-design/icons"
import {createUseStyles} from "react-jss"

type AdvancedSettings = {
correct_answer_keys: string[]
}

const useStyles = createUseStyles((theme: any) => ({
label: {
display: "flex",
alignItems: "center",
gap: "0.5rem",
},
}))

type AdvancedSettingsProps = {
settings: {key: string; label: string; default: string[]; required?: boolean}[]
form: any
}

const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({settings, form}) => {
const classes = useStyles()
const [isCollapsed, setIsCollapsed] = useState(true)

const handleCollapseChange = (key: string[]) => {
setIsCollapsed(!key.length)
}

useEffect(() => {
// Initialize the form with default values for advanced settings
const initialValues = settings.reduce((acc, field) => {
acc[field.key] = field.default
return acc
}, {})
form.setFieldsValue({advancedSettings: initialValues})
}, [form, settings])

console.log("Passed settings to AdvancedSettings:", settings)

return (
<Collapse
bordered={false}
expandIcon={({isActive}) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
className={"my-[10px]"}
onChange={handleCollapseChange}
>
<Collapse.Panel key="1" header="Advanced Settings">
{settings.map((field) => (
<Form.Item
key={field.key}
name={["advancedSettings", field.key]}
label={
<div className={classes.label}>
<span>{field.label}</span>
</div>
}
rules={[
{required: field.required ?? true, message: "This field is required"},
]}
>
{field.key === "correct_answer_keys" && <Input />}
</Form.Item>
))}
</Collapse.Panel>
</Collapse>
)
}

export default AdvancedSettings
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import Link from "next/link"
import React, {useEffect, useMemo, useState} from "react"
import {createUseStyles} from "react-jss"
import {ColumnsType} from "antd/es/table"
import AdvancedSettings from "./AdvancedSettings"

const useStyles = createUseStyles((theme: JSSTheme) => ({
label: {
Expand Down Expand Up @@ -170,7 +171,7 @@ const DynamicFormField: React.FC<DynamicFormFieldProps> = ({

return (
<>
{label !== "Correct Answer" ? (
{label !== "Correct Answer" && (
<Form.Item
name={name}
label={
Expand Down Expand Up @@ -213,36 +214,6 @@ const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
/>
) : null}
</Form.Item>
) : (
<>
<Collapse
bordered={false}
expandIcon={({isActive}) => (
<CaretRightOutlined rotate={isActive ? 90 : 0} />
)}
className={"my-[10px]"}
items={[
{
key: "1",
label: "Advanced Settings",
children: (
<Form.Item
name={name}
label={
<div className={classes.label}>
<span>{label}</span>
</div>
}
initialValue={defaultVal}
rules={rules}
>
<Input className="w-[50%]" />
</Form.Item>
),
},
]}
/>
</>
)}

{ExternalHelpInfo}
Expand Down Expand Up @@ -309,6 +280,8 @@ const NewEvaluatorModal: React.FC<Props> = ({
}
}, [newEvalModalConfigOpen])

const advancedSettingsFields = evalFields.filter((field) => field.key === "correct_answer_keys")

const onSubmit = (values: CreateEvaluationConfigData) => {
setSubmitLoading(true)
if (!selectedEval?.key) throw new Error("No selected key")
Expand Down Expand Up @@ -453,6 +426,10 @@ const NewEvaluatorModal: React.FC<Props> = ({
/>
))}

{advancedSettingsFields.length > 0 && (
<AdvancedSettings settings={advancedSettingsFields} form={form} />
)}

<Form.Item style={{marginBottom: 0}}>
<div className={classes.evalBtnContainer}>
{!editMode && (
Expand Down

0 comments on commit 1002198

Please sign in to comment.