Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: autocomplete data fields in the editor #4062

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open

feat: autocomplete data fields in the editor #4062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
48d60ce
wip
jessicamcinchak Dec 10, 2024
d0e707e
fix: Autocomplete types
DafyddLlyr Dec 10, 2024
3b2c2c5
Merge branch 'main' of github.com:theopensystemslab/planx-new into je…
jessicamcinchak Dec 11, 2024
76676e5
styled and mostly working x3 component types
jessicamcinchak Dec 11, 2024
aa13297
Question options plus ODP enum overrides working
jessicamcinchak Dec 12, 2024
04e19ce
hide popup icon
jessicamcinchak Dec 17, 2024
e6a8be6
rebase and filter out flag values
jessicamcinchak Dec 17, 2024
949f090
fix add new option
jessicamcinchak Dec 17, 2024
cd5f1b8
more component types
jessicamcinchak Dec 18, 2024
5496a47
final component types
jessicamcinchak Dec 18, 2024
6dba5b7
type fix
jessicamcinchak Dec 18, 2024
d878159
rebase plus store tests
jessicamcinchak Dec 18, 2024
c27fdf1
update e2e placeholders
jessicamcinchak Dec 18, 2024
cea734f
try page.locator by id in e2e, placeholder matches multiple elements
jessicamcinchak Dec 18, 2024
8e11f6c
prettier
jessicamcinchak Dec 18, 2024
83e6e3a
try getByRole('combobox')
jessicamcinchak Dec 19, 2024
5114475
fix(e2e): Add click on combobox
DafyddLlyr Dec 20, 2024
867a6c2
set default schema options and remove getFlowSchema()?.nodes calls pe…
jessicamcinchak Dec 20, 2024
e57ba7f
fix(e2e): Missing clicks and enters
DafyddLlyr Dec 20, 2024
0e822be
Merge branch 'main' of github.com:theopensystemslab/planx-new into je…
jessicamcinchak Dec 20, 2024
a24345a
rebase
jessicamcinchak Dec 20, 2024
ec9c832
fix(e2e): Drop index, use last. Match by value without using fill()
DafyddLlyr Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 28 additions & 10 deletions e2e/tests/ui-driven/src/helpers/addComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,17 @@ const createBaseComponent = async (
break;
case ComponentType.AddressInput:
await page.getByPlaceholder("Title").fill(title || "");
await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
await page.getByRole("combobox", { name: "Data field" }).click();
await page
.getByRole("combobox", { name: "Data field" })
.fill(options?.[0] || "");
Copy link
Member Author

@jessicamcinchak jessicamcinchak Dec 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

‼️ E2E still are ultimately failing because nodes with a required data field are not being correctly populated - I've tried a couple iterations here, but still not landed on the right solution.

Opening for wider review in the meantime and any pointers very welcome!

Here's what I've tried so far:

  • The placeholder text has changed from "Data Field" to "Data field", but getByPlaceholder() will now match more than one element (MUI Autocompletes have many nested elements)
    Screenshot from 2024-12-18 21-46-20
  • So, "getByRole("combobox", { name: "Data field" }) should exclusively be matching the input element
  • On the first component, there will be no flow schema or suggestions yet and the popupIcon arrow is disabled, so there's no dropdown of options to .click() or open/expand - but I'm guessing I'm still using the wrong combo of .fill/.click here to mimic typing input ??

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working for me locally - 5114475

Running on CI now 🤞

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It failed on some still - to be fair I didn't run them all locally just the first few. Will pick this up again but I think adding the .click() is what we're after.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Appreciate second eyes on this - it's a tedious tricky one! Once one node with a data field is successfully added, then future ones will have suggested schema options - so might require combination of fill & click ?

break;
case ComponentType.ContactInput:
await page.getByPlaceholder("Title").fill(title || "");
await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
await page.getByRole("combobox", { name: "Data field" }).click();
await page
.getByRole("combobox", { name: "Data field" })
.fill(options?.[0] || "");
break;
case ComponentType.TaskList:
await page.getByPlaceholder("Main Title").fill(title || "");
Expand Down Expand Up @@ -112,15 +118,24 @@ const createBaseComponent = async (
}
break;
case ComponentType.FileUpload:
await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
await page.getByRole("combobox", { name: "Data field" }).click();
await page
.getByRole("combobox", { name: "Data field" })
.fill(options?.[0] || "");
break;
case ComponentType.FileUploadAndLabel:
await page.getByPlaceholder("File type").fill(options?.[0] || "");
await page.getByPlaceholder("Data Field").fill(options?.[1] || "");
await page.getByRole("combobox", { name: "Data field" }).click();
await page
.getByRole("combobox", { name: "Data field" })
.fill(options?.[1] || "");
break;
case ComponentType.List:
await page.getByPlaceholder("Title").fill(title || "");
await page.getByPlaceholder("Data Field").fill(options?.[0] || "");
await page.getByRole("combobox", { name: "Data field" }).click();
await page
.getByRole("combobox", { name: "Data field" })
.fill(options?.[0] || "");
break;
case ComponentType.Content:
await page
Expand Down Expand Up @@ -176,7 +191,9 @@ export const createQuestionWithDataFieldOptions = async (
await locatingNode.click();
await page.getByRole("dialog").waitFor();
await page.getByPlaceholder("Text").fill(questionText);
await page.getByPlaceholder("Data Field").fill(dataField);
await page.getByRole("combobox", { name: "Data field" }).click();
await page.getByRole("combobox", { name: "Data field" }).fill(dataField);
await page.getByRole("combobox", { name: "Data field" }).press("Enter");
await createComponentOptionsWithDataValues(page, options);
await page.locator('button[form="modal"][type="submit"]').click();
};
Expand Down Expand Up @@ -377,12 +394,13 @@ async function createComponentOptionsWithDataValues(
page: Page,
options: OptionWithDataValues[],
) {
let index = 0;
for (const option of options) {
await page.locator("button").filter({ hasText: "add new" }).click();
await page.getByPlaceholder("Option").nth(index).fill(option.optionText);
await page.getByPlaceholder("Data Value").nth(index).fill(option.dataValue);
index++;
await page.getByPlaceholder("Option").last().fill(option.optionText);
await page.getByRole("combobox", { name: "Data field" }).last().click();
await page
.getByRole("option", { name: option.dataValue, exact: true })
.click();
}
}

Expand Down
19 changes: 8 additions & 11 deletions editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import { AddressInput, parseAddressInput } from "./model";

Expand All @@ -25,8 +26,9 @@ export default function AddressInputComponent(props: Props): FCReturn {
});
}
},
validate: () => {},
validate: () => { },
});

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -51,16 +53,11 @@ export default function AddressInputComponent(props: Props): FCReturn {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
</ModalSectionContent>
</ModalSection>
<ModalFooter formik={formik} />
Expand Down
17 changes: 7 additions & 10 deletions editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import { Switch } from "ui/shared/Switch";

import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import type { Calculate } from "./model";
import { evaluate, getVariables, parseCalculate } from "./model";
Expand All @@ -25,6 +26,7 @@ const ConditionLabel = styled("span")(() => ({
}));

const UNKNOWN = "unknown";

export default function Component(props: Props) {
const formik = useFormik({
initialValues: parseCalculate(props.node?.data),
Expand Down Expand Up @@ -123,16 +125,11 @@ export default function Component(props: Props) {
</InputRow>
</ModalSectionContent>
<ModalSectionContent title="Output">
<InputRow>
<Input
required
placeholder="output data field"
name="output"
format="data"
value={formik.values.output}
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
value={formik.values.output}
onChange={(value) => formik.setFieldValue("output", value)}
/>
<InputRow>
<Switch
checked={formik.values.formatOutputForAutomations}
Expand Down
20 changes: 5 additions & 15 deletions editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import { Switch } from "ui/shared/Switch";

import { DataFieldAutocomplete } from "@planx/components/shared/DataFieldAutocomplete";
import { Option, parseBaseNodeData } from "../../shared";
import { ICONS } from "../../shared/icons";
import type { Checklist } from "../model";
Expand Down Expand Up @@ -123,15 +124,13 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
inputRef={focusRef}
required
/>

<ImgInput
img={formik.values.img}
onChange={(newUrl) => {
formik.setFieldValue("img", newUrl);
}}
/>
</InputRow>

<InputRow>
<RichTextInput
name="description"
Expand All @@ -140,18 +139,10 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
onChange={formik.handleChange}
/>
</InputRow>

<InputRow>
<Input
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
error={Boolean(formik.errors?.fn)}
errorMessage={formik.errors?.fn}
/>
</InputRow>
<DataFieldAutocomplete
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
<InputRow>
<Switch
checked={!!formik.values.groupedOptions}
Expand Down Expand Up @@ -198,7 +189,6 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
<Options formik={formik} />
</ErrorWrapper>
</ModalSection>

<ModalFooter formik={formik} />
</form>
);
Expand Down
17 changes: 15 additions & 2 deletions editor.planx.uk/src/@planx/components/Checklist/Editor/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { getOptionsSchemaByFn } from "@planx/components/shared/utils";
import { useStore } from "pages/FlowEditor/lib/store";
import { Option } from "../../shared";
import type { Group } from "../model";
import ChecklistOptionsEditor from "./OptionsEditor";
Expand All @@ -28,6 +30,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {

const exclusiveOrOptionManagerShouldRender =
hasFeatureFlag("EXCLUSIVE_OR") && nonExclusiveOptions.length;

const schema = useStore().getFlowSchema()?.options;
const initialOptions: Option[] | undefined = formik.initialValues.options || formik.initialValues.groupedOptions?.map((group: Group<Option>) => group.children)?.flat();
const initialOptionVals = initialOptions?.map((option) => option.data?.val);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of a lazy rebase right now while the exclusive-or work is still in-progress - I think initialOptions should be able to be simplified/derived from exclusiveOptions or nonExclusiveOptions once those are handling "grouped" options


return (
<ModalSectionContent subtitle="Options">
Expand Down Expand Up @@ -115,6 +121,7 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
groups: formik.values.groupedOptions.map(
(opt: Group<Option>) => opt.title
),
schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
}}
/>
</Box>
Expand Down Expand Up @@ -160,7 +167,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
}) as Option
}
Editor={ChecklistOptionsEditor}
editorExtraProps={{ showValueField: !!formik.values.fn }}
editorExtraProps={{
showValueField: !!formik.values.fn,
schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
}}
/>
)}
{exclusiveOrOptionManagerShouldRender ? (
Expand Down Expand Up @@ -189,7 +199,10 @@ export const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
}) as Option
}
Editor={BaseOptionsEditor}
editorExtraProps={{ showValueField: !!formik.values.fn }}
editorExtraProps={{
showValueField: !!formik.values.fn,
schema: getOptionsSchemaByFn(formik.values.fn, schema, initialOptionVals),
}}
/>
</ErrorWrapper>
</Box>
Expand Down
2 changes: 2 additions & 0 deletions editor.planx.uk/src/@planx/components/Checklist/Editor/OptionsEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type ChecklistOptionsEditorProps = BaseOptionsEditorProps & {

const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
value,
schema,
onChange,
showValueField = false,
groups,
Expand All @@ -24,6 +25,7 @@ const ChecklistOptionsEditor: React.FC<ChecklistOptionsEditorProps> = ({
return (
<BaseOptionsEditor
value={value}
schema={schema}
onChange={onChange}
showValueField={showValueField}
>
Expand Down
17 changes: 7 additions & 10 deletions editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";
import { ContactInput, parseContactInput } from "./model";

Expand All @@ -27,6 +28,7 @@ export default function ContactInputComponent(props: Props): FCReturn {
},
validate: () => {},
});

return (
<form onSubmit={formik.handleSubmit} id="modal">
<ModalSection>
Expand All @@ -51,16 +53,11 @@ export default function ContactInputComponent(props: Props): FCReturn {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
required
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
</ModalSectionContent>
</ModalSection>
<ModalFooter formik={formik} />
Expand Down
15 changes: 5 additions & 10 deletions editor.planx.uk/src/@planx/components/DateInput/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";

import { DataFieldAutocomplete } from "../shared/DataFieldAutocomplete";
import { ICONS } from "../shared/icons";

export type Props = EditorProps<TYPES.DateInput, DateInput>;
Expand Down Expand Up @@ -57,16 +58,10 @@ const DateInputComponent: React.FC<Props> = (props) => {
onChange={formik.handleChange}
/>
</InputRow>
<InputRow>
<Input
// required
format="data"
name="fn"
value={formik.values.fn}
placeholder="Data Field"
onChange={formik.handleChange}
/>
</InputRow>
<DataFieldAutocomplete
value={formik.values.fn}
onChange={(value) => formik.setFieldValue("fn", value)}
/>
<Box mt={2}>
<InputRow>
<DateInputUi
Expand Down
Loading
Loading