From f3173454cca9ced1f86049a72856b8a74dabce83 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 21 Nov 2024 18:06:13 +0100 Subject: [PATCH] :boom: [#3283] Remove password Formio component --- package-lock.json | 17 +- package.json | 2 +- .../ComponentConfiguration.stories.tsx | 74 --------- src/registry/index.ts | 2 - src/registry/password/edit-validation.ts | 22 --- src/registry/password/edit.tsx | 148 ------------------ src/registry/password/index.ts | 14 -- src/registry/password/preview.tsx | 31 ---- 8 files changed, 9 insertions(+), 301 deletions(-) delete mode 100644 src/registry/password/edit-validation.ts delete mode 100644 src/registry/password/edit.tsx delete mode 100644 src/registry/password/index.ts delete mode 100644 src/registry/password/preview.tsx diff --git a/package-lock.json b/package-lock.json index 160e4c44..e4f33ad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,7 @@ "@formatjs/cli": "^6.1.1", "@formatjs/ts-transformer": "^3.12.0", "@fortawesome/fontawesome-free": "^6.4.0", - "@open-formulieren/types": "^0.34.0", + "@open-formulieren/types": "^0.35.0", "@storybook/addon-actions": "^8.3.5", "@storybook/addon-essentials": "^8.3.5", "@storybook/addon-interactions": "^8.3.5", @@ -5087,11 +5087,10 @@ } }, "node_modules/@open-formulieren/types": { - "version": "0.34.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.34.0.tgz", - "integrity": "sha512-4MGJdllKYqcKMNRvJSTn+wIu8v0LB1dxfYNK5CV+6y751GN/Ss8sbEbfO69nYvO92zFs1b3NgQ63I6pQC8THMg==", - "dev": true, - "license": "EUPL-1.2" + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.35.0.tgz", + "integrity": "sha512-89LHE9MF6t0pp5IfQqEnrA2QA4zQDpbE47VD6F+s5SRdZeaBt6GbKuwcCUjz3Fwhr1C+iq2MtgJ5YcX6XRtpSw==", + "dev": true }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", @@ -24607,9 +24606,9 @@ } }, "@open-formulieren/types": { - "version": "0.34.0", - "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.34.0.tgz", - "integrity": "sha512-4MGJdllKYqcKMNRvJSTn+wIu8v0LB1dxfYNK5CV+6y751GN/Ss8sbEbfO69nYvO92zFs1b3NgQ63I6pQC8THMg==", + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/@open-formulieren/types/-/types-0.35.0.tgz", + "integrity": "sha512-89LHE9MF6t0pp5IfQqEnrA2QA4zQDpbE47VD6F+s5SRdZeaBt6GbKuwcCUjz3Fwhr1C+iq2MtgJ5YcX6XRtpSw==", "dev": true }, "@pkgjs/parseargs": { diff --git a/package.json b/package.json index 38fc0201..4c9e7381 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@formatjs/cli": "^6.1.1", "@formatjs/ts-transformer": "^3.12.0", "@fortawesome/fontawesome-free": "^6.4.0", - "@open-formulieren/types": "^0.34.0", + "@open-formulieren/types": "^0.35.0", "@storybook/addon-actions": "^8.3.5", "@storybook/addon-essentials": "^8.3.5", "@storybook/addon-interactions": "^8.3.5", diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx index 5e930ef4..15f3ce89 100644 --- a/src/components/ComponentConfiguration.stories.tsx +++ b/src/components/ComponentConfiguration.stories.tsx @@ -2743,80 +2743,6 @@ export const CosignV2: Story = { }, }; -export const Password: Story = { - render: Template, - name: 'type: password', - - args: { - component: { - id: 'wekruya', - type: 'password', - validateOn: 'blur', - key: 'password', - label: 'A password field', - validate: { - required: false, - }, - }, - - builderInfo: { - title: 'Password Field', - icon: 'wallet', - group: 'basic', - weight: 10, - schema: {}, - }, - }, - - play: async ({canvasElement, args}) => { - const canvas = within(canvasElement); - - await expect(canvas.getByLabelText('Label')).toHaveValue('A password field'); - await waitFor(async () => { - await expect(canvas.getByLabelText('Property Name')).toHaveValue('aPasswordField'); - }); - await expect(canvas.getByLabelText('Description')).toHaveValue(''); - await expect(canvas.getByLabelText('Show in summary')).toBeChecked(); - await expect(canvas.getByLabelText('Show in email')).not.toBeChecked(); - await expect(canvas.getByLabelText('Show in PDF')).toBeChecked(); - await expect(canvas.queryByLabelText('Placeholder')).not.toBeInTheDocument(); - - // ensure that changing fields in the edit form properly update the preview - const preview = within(canvas.getByTestId('componentPreview')); - - await userEvent.clear(canvas.getByLabelText('Label')); - await userEvent.type(canvas.getByLabelText('Label'), 'Updated preview label'); - expect(await preview.findByText('Updated preview label')); - - const previewInput = preview.getByLabelText('Updated preview label'); - await expect(previewInput).toHaveDisplayValue(''); - await expect(previewInput.type).toEqual('password'); - - // Ensure that the manually entered key is kept instead of derived from the label, - // even when key/label components are not mounted. - const keyInput = canvas.getByLabelText('Property Name'); - fireEvent.change(keyInput, {target: {value: 'customKey'}}); - await userEvent.click(canvas.getByRole('tab', {name: 'Advanced'})); - await userEvent.click(canvas.getByRole('tab', {name: 'Basic'})); - await userEvent.clear(canvas.getByLabelText('Label')); - await userEvent.type(canvas.getByLabelText('Label'), 'Other label', {delay: 50}); - await expect(canvas.getByLabelText('Property Name')).toHaveDisplayValue('customKey'); - - // check that toggling the 'multiple' checkbox properly updates the preview. - // We use fireEvent because firefox borks on userEvent.click, see: - // https://github.com/testing-library/user-event/issues/1149 - fireEvent.click(canvas.getByLabelText('Multiple values')); - await userEvent.click(preview.getByRole('button', {name: 'Add another'})); - // await expect(preview.getByTestId('input-customKey[0]')).toHaveDisplayValue(''); - // test for the default value inputs -> these don't have accessible labels/names :( - const addButtons = canvas.getAllByRole('button', {name: 'Add another'}); - await userEvent.click(addButtons[0]); - - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalled(); - }, -}; - // FIXME: this component is bad for accesibility :( export const Signature: Story = { render: Template, diff --git a/src/registry/index.ts b/src/registry/index.ts index 919345b9..deceb750 100644 --- a/src/registry/index.ts +++ b/src/registry/index.ts @@ -21,7 +21,6 @@ import Licenseplate from './licenseplate'; import LeafletMap from './map'; import NpFamilyMembers from './npFamilyMembers'; import NumberField from './number'; -import Password from './password'; import PhoneNumber from './phonenumber'; import Postcode from './postcode'; import ProductPrice from './productPrice'; @@ -88,7 +87,6 @@ const REGISTRY: Registry = { softRequiredErrors: SoftRequiredErrors, // deprecated coSign: CosignV1, - password: Password, productPrice: ProductPrice, }; diff --git a/src/registry/password/edit-validation.ts b/src/registry/password/edit-validation.ts deleted file mode 100644 index 9ad9308a..00000000 --- a/src/registry/password/edit-validation.ts +++ /dev/null @@ -1,22 +0,0 @@ -import {z} from 'zod'; - -import {buildCommonSchema} from '@/registry/validation'; - -import {EditSchema} from '../types'; - -const passwordSchema = z.string().optional(); - -// case for when component.multiple=false -const singleValueSchema = z - .object({multiple: z.literal(false)}) - .and(z.object({defaultValue: passwordSchema})); - -// case for when component.multiple=true -const multipleValueSchema = z - .object({multiple: z.literal(true)}) - .and(z.object({defaultValue: passwordSchema.array()})); -const defaultValueSchema = singleValueSchema.or(multipleValueSchema); - -const schema: EditSchema = ({intl}) => buildCommonSchema(intl).and(defaultValueSchema); - -export default schema; diff --git a/src/registry/password/edit.tsx b/src/registry/password/edit.tsx deleted file mode 100644 index a2e6e200..00000000 --- a/src/registry/password/edit.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import {PasswordComponentSchema} from '@open-formulieren/types'; -import {useIntl} from 'react-intl'; - -import { - AutoComplete, - BuilderTabs, - ClearOnHide, - Description, - Hidden, - IsSensitiveData, - Key, - Label, - Multiple, - PresentationConfig, - Registration, - SimpleConditional, - Tooltip, - Translations, - Validate, - useDeriveComponentKey, -} from '@/components/builder'; -import {LABELS} from '@/components/builder/messages'; -import {TabList, TabPanel, Tabs} from '@/components/formio'; -import {useErrorChecker} from '@/utils/errors'; - -import {EditFormDefinition} from '../types'; - -/** - * Form to configure a Formio 'password' type component. - */ -const EditForm: EditFormDefinition = () => { - const intl = useIntl(); - const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey(); - const {hasAnyError} = useErrorChecker(); - - Validate.useManageValidatorsTranslations(['required']); - return ( - - - - - - - - - - {/* Basic tab */} - - - - {/* Advanced tab */} - - - - - {/* Validation tab */} - - - - - - - {/* Registration tab */} - - - - - {/* Translations */} - - - propertyLabels={{ - label: intl.formatMessage(LABELS.label), - description: intl.formatMessage(LABELS.description), - tooltip: intl.formatMessage(LABELS.tooltip), - }} - /> - - - ); -}; - -/* - Making this introspected or declarative doesn't seem advisable, as React is calling - React.Children and related API's legacy API - this may get removed in future - versions. - - Explicitly specifying the schema and default values is therefore probbaly best, at - the cost of some repetition. - */ -EditForm.defaultValues = { - // basic tab - label: '', - key: '', - description: '', - tooltip: '', - autocomplete: '', - showInSummary: true, - showInEmail: false, - showInPDF: true, - multiple: false, - hidden: false, - clearOnHide: true, - isSensitiveData: true, - // Advanced tab - conditional: { - show: undefined, - when: '', - eq: '', - }, - // Validation tab - validate: { - required: false, - plugins: [], - }, - validateOn: 'blur', - translatedErrors: {}, - registration: { - attribute: '', - }, -}; - -export default EditForm; diff --git a/src/registry/password/index.ts b/src/registry/password/index.ts deleted file mode 100644 index c3bb7905..00000000 --- a/src/registry/password/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {PasswordComponentSchema} from '@open-formulieren/types'; - -import {RegistryEntry} from '@/registry/types'; - -import EditForm from './edit'; -import validationSchema from './edit-validation'; -import Preview from './preview'; - -export default { - edit: EditForm, - editSchema: validationSchema, - preview: {panel: Preview}, - defaultValue: '', -} satisfies RegistryEntry; diff --git a/src/registry/password/preview.tsx b/src/registry/password/preview.tsx deleted file mode 100644 index f00606fa..00000000 --- a/src/registry/password/preview.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import {PasswordComponentSchema} from '@open-formulieren/types'; - -import {TextField} from '@/components/formio'; - -import {ComponentPreviewProps} from '../types'; - -/** - * Show a formio password component preview. - * - * NOTE: for the time being, this is rendered in the default Formio bootstrap style, - * however at some point this should use the components of - * @open-formulieren/formio-renderer instead for a more accurate preview. - */ -const Preview: React.FC> = ({component}) => { - const {key, label, description, tooltip, validate = {}, autocomplete = '', multiple} = component; - const {required = false} = validate; - return ( - - ); -}; - -export default Preview;