-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui/custom-metadata: Refactor taxonomy to use a single form submission…
… flow (#2586)
- Loading branch information
1 parent
bb3f4af
commit 368a407
Showing
22 changed files
with
840 additions
and
295 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...ts/admin-ui/cypress/fixtures/taxonomy/custom-metadata/custom-field-definition/create.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| { | ||
| "name": "11111111111111", | ||
| "name": "Created custom field", | ||
| "description": null, | ||
| "field_type": "string", | ||
| "allow_list_id": "plu_e868c7a7-fc87-48cf-8219-192c7770d2b6", | ||
| "allow_list_id": "id-allow-list-pokemon", | ||
| "resource_type": "data category", | ||
| "field_definition": null, | ||
| "active": true, | ||
| "id": "plu_27bc6001-3125-44b0-b9eb-90ecb9a58802" | ||
| "id": "id-custom-field-definition-created" | ||
| } |
32 changes: 32 additions & 0 deletions
32
clients/admin-ui/cypress/fixtures/taxonomy/custom-metadata/custom-field-definition/list.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| [ | ||
| { | ||
| "name": "Starter pokemon", | ||
| "description": null, | ||
| "field_type": "string", | ||
| "allow_list_id": "id-allow-list-pokemon", | ||
| "resource_type": "data category", | ||
| "field_definition": null, | ||
| "active": true, | ||
| "id": "id-custom-field-definition-starter-pokemon" | ||
| }, | ||
| { | ||
| "name": "Pokemon party", | ||
| "description": null, | ||
| "field_type": "string[]", | ||
| "allow_list_id": "id-allow-list-pokemon", | ||
| "resource_type": "data category", | ||
| "field_definition": null, | ||
| "active": true, | ||
| "id": "id-custom-field-definition-pokemon-party" | ||
| }, | ||
| { | ||
| "name": "Prime number", | ||
| "description": null, | ||
| "field_type": "string", | ||
| "allow_list_id": "id-allow-list-prime-numbers", | ||
| "resource_type": "data category", | ||
| "field_definition": null, | ||
| "active": true, | ||
| "id": "id-custom-field-definition-prime-number" | ||
| } | ||
| ] |
14 changes: 14 additions & 0 deletions
14
clients/admin-ui/cypress/fixtures/taxonomy/custom-metadata/custom-field/list.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| [ | ||
| { | ||
| "resource_id": "user.biometric", | ||
| "custom_field_definition_id": "id-custom-field-definition-starter-pokemon", | ||
| "value": "Squirtle", | ||
| "id": "id-custom-field-starter-pokemon" | ||
| }, | ||
| { | ||
| "resource_id": "user.biometric", | ||
| "custom_field_definition_id": "id-custom-field-definition-pokemon-party", | ||
| "value": ["Charmander", "Eevee", "Snorlax"], | ||
| "id": "id-custom-field-pokemon-party" | ||
| } | ||
| ] |
6 changes: 6 additions & 0 deletions
6
clients/admin-ui/cypress/fixtures/taxonomy/custom-metadata/custom-field/update-party.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "resource_id": "user.biometric", | ||
| "custom_field_definition_id": "id-custom-field-definition-pokemon-party", | ||
| "value": ["Charmander", "Eevee"], | ||
| "id": "id-custom-field-pokemon-party" | ||
| } |
65 changes: 65 additions & 0 deletions
65
clients/admin-ui/src/features/common/custom-fields/CustomFieldSelector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { useField } from "formik"; | ||
| import { useEffect } from "react"; | ||
|
|
||
| import { CustomSelect } from "~/features/common/form/inputs"; | ||
| import { AllowedTypes } from "~/types/api"; | ||
|
|
||
| import { | ||
| AllowListWithOptions, | ||
| CustomFieldDefinitionExisting, | ||
| CustomFieldExisting, | ||
| } from "./types"; | ||
|
|
||
| type Props = { | ||
| allowList: AllowListWithOptions; | ||
| customField?: CustomFieldExisting; | ||
| customFieldDefinition: CustomFieldDefinitionExisting; | ||
| }; | ||
|
|
||
| export const CustomFieldSelector = ({ | ||
| allowList, | ||
| customField, | ||
| customFieldDefinition, | ||
| }: Props) => { | ||
| const name = `definitionIdToCustomFieldValue.${customFieldDefinition.id}`; | ||
| const label = customFieldDefinition.name; | ||
| const tooltip = customFieldDefinition.description; | ||
| const { options } = allowList; | ||
|
|
||
| const [, meta, helpers] = useField({ name }); | ||
|
|
||
| // This is a bit of a hack to set the initial value of the selector based on the CustomField | ||
| // returned by the API (if any). The "correct" way to do this would be to have the `initialValues` | ||
| // passed to `Formik` include the API values mapped by definition ID. However, because custom | ||
| // fields are so dynamic and depend on multiple API calls, mixing that logic into the (already | ||
| // complex) taxonomy form initialization isn't feasible for now. Those values are created by: | ||
| // src/features/taxonomy/hooks.tsx. | ||
| useEffect( | ||
| () => { | ||
| if (!customField?.value) { | ||
| return; | ||
| } | ||
|
|
||
| if (meta.touched) { | ||
| return; | ||
| } | ||
|
|
||
| helpers.setValue(customField.value, false); | ||
| }, | ||
| // This should only ever run once, on first render. | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <CustomSelect | ||
| isClearable | ||
| isMulti={customFieldDefinition.field_type !== AllowedTypes.STRING} | ||
| label={label} | ||
| name={name} | ||
| options={options} | ||
| tooltip={tooltip} | ||
| defaultValue={customField?.value ?? ""} | ||
| /> | ||
| ); | ||
| }; |
Oops, something went wrong.