Merge pull request #4981 from open-formulieren/issue/fix-objects-api-…

…prefill-help-text

💬 Tailor field help texts to registration/prefill context

src/openforms/js/compiled-lang/en.json

@@ -221,12 +221,6 @@
       "value": "Confirm"
     }
   ],
-  "1Hb/pK": [
-    {
-      "type": 0,
-      "value": "This is used to perform validation to verify that the authenticated user is the owner of the object."
-    }
-  ],
   "1HfdUc": [
     {
       "type": 0,
@@ -3725,6 +3719,12 @@
       "value": "Active"
     }
   ],
+  "X18/UP": [
+    {
+      "type": 0,
+      "value": "Owner identifier"
+    }
+  ],
   "XAKzo5": [
     {
       "type": 0,
@@ -4677,6 +4677,12 @@
       "value": "Amount of days incomplete submissions of this form will remain before being removed. Leave blank to use value in General Configuration."
     }
   ],
+  "fB1baI": [
+    {
+      "type": 0,
+      "value": "The property that gets compared with the identifier (e.g. BSN/KVK) of the authenticated user to verify ownership of the object being updated. This is important to prevent malicious users modifying information of other people than themselves."
+    }
+  ],
   "fGTdJz": [
     {
       "type": 0,
@@ -4791,6 +4797,12 @@
       "value": "Do nothing"
     }
   ],
+  "g1i5ru": [
+    {
+      "type": 0,
+      "value": "The property that gets compared with the identifier (e.g. BSN/KVK) of the authenticated user. This is important to prevent malicious users looking up private information of other people."
+    }
+  ],
   "gAf9pR": [
     {
       "type": 0,
@@ -5511,12 +5523,6 @@
       "value": "Partner 1"
     }
   ],
-  "lu7yMK": [
-    {
-      "type": 0,
-      "value": "Path to auth attribute (e.g. BSN/KVK) in objects"
-    }
-  ],
   "m20av3": [
     {
       "type": 0,

src/openforms/js/compiled-lang/nl.json

@@ -221,12 +221,6 @@
       "value": "Bevestigen"
     }
   ],
-  "1Hb/pK": [
-    {
-      "type": 0,
-      "value": "Dit attribuut wordt gebruikt om te controleren dat de ingelogde gebruiker bij het object hoort dat bijgewerkt wordt."
-    }
-  ],
   "1HfdUc": [
     {
       "type": 0,
@@ -3738,6 +3732,12 @@
       "value": "Actief"
     }
   ],
+  "X18/UP": [
+    {
+      "type": 0,
+      "value": "Identificatie-attribuut"
+    }
+  ],
   "XAKzo5": [
     {
       "type": 0,
@@ -4695,6 +4695,12 @@
       "value": "Aantal dagen dat een sessie bewaard blijft. Laat leeg om de waarde van de algemene configuratie te gebruiken."
     }
   ],
+  "fB1baI": [
+    {
+      "type": 0,
+      "value": "Het attribuut dat vergeleken wordt met de identificatiewaarde (bijv. BSN/KVK-nummer) van de ingelogde gebruiker om de eigenaar van het object dat bijgewerkt wordt te controleren. Dit is belangrijk om te voorkomen dat kwaadwillenden gegevens van anderen bijwerken in plaast van zichzelf."
+    }
+  ],
   "fGTdJz": [
     {
       "type": 0,
@@ -4809,6 +4815,12 @@
       "value": "Negeren"
     }
   ],
+  "g1i5ru": [
+    {
+      "type": 0,
+      "value": "Het attribuut dat vergeleken wordt met de identificatiewaarde (bijv. BSN/KVK-nummer) van de ingelogde gebruiker. Dit is belangrijk om te voorkomen dat kwaadwillenden gegevens van anderen kunnen opvragen."
+    }
+  ],
   "gAf9pR": [
     {
       "type": 0,
@@ -5529,12 +5541,6 @@
       "value": "Partner 1"
     }
   ],
-  "lu7yMK": [
-    {
-      "type": 0,
-      "value": "Bronpad van het autorisatiekenmerk (bijv. BSN/KVK)"
-    }
-  ],
   "m20av3": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -18,6 +18,7 @@ import {
 import {
   AdminChangeFormDecorator,
   FormDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -26,7 +27,12 @@ import RegistrationFields from './RegistrationFields';
 
 export default {
   title: 'Form design / Registration / RegistrationFields',
-  decorators: [ValidationErrorsDecorator, FormDecorator, AdminChangeFormDecorator],
+  decorators: [
+    ValidationErrorsDecorator,
+    FormDecorator,
+    AdminChangeFormDecorator,
+    FormModalContentDecorator,
+  ],
   component: RegistrationFields,
   args: {
     availableBackends: [
@@ -799,9 +805,7 @@ export const ObjectsAPI = {
         expect(otherSettingsTitle).toBeVisible();
         await userEvent.click(within(otherSettingsTitle).getByRole('link', {name: '(Tonen)'}));
 
-        const authAttributePath = modal.getByText(
-          'Bronpad van het autorisatiekenmerk (bijv. BSN/KVK)'
-        );
+        const authAttributePath = modal.getByText('Identificatie-attribuut');
 
         expect(authAttributePath.parentElement.parentElement).toHaveClass('field--disabled');
 

src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js

@@ -7,14 +7,14 @@ import Fieldset from 'components/admin/forms/Fieldset';
 import FormRow from 'components/admin/forms/FormRow';
 import {TextArea, TextInput} from 'components/admin/forms/Inputs';
 import {
-  AuthAttributePath,
   ObjectTypeSelect,
   ObjectTypeVersionSelect,
   ObjectsAPIGroup,
 } from 'components/admin/forms/objects_api';
 import ErrorBoundary from 'components/errors/ErrorBoundary';
 
 import {
+  AuthAttributePath,
   DocumentTypesFieldet,
   LegacyDocumentTypesFieldet,
   OrganisationRSIN,
@@ -129,14 +129,7 @@ const LegacyConfigFields = ({apiGroupChoices}) => {
         fieldNames={['updateExistingObject', 'authAttributePath']}
       >
         <UpdateExistingObject />
-        <AuthAttributePath
-          name="authAttributePath"
-          objectsApiGroup={objectsApiGroup}
-          objecttypeUuid={objecttype}
-          objecttypeVersion={objecttypeVersion}
-          disabled={!updateExistingObject}
-          required={updateExistingObject}
-        />
+        <AuthAttributePath />
       </Fieldset>
 
       <Fieldset

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js

@@ -1,9 +1,9 @@
 import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import {Form, Formik} from 'formik';
-import selectEvent from 'react-select-event';
 
 import {
   FeatureFlagsDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -30,7 +30,7 @@ const render = ({apiGroups, formData}) => (
 
 export default {
   title: 'Form design/Registration/Objects API',
-  decorators: [ValidationErrorsDecorator, FeatureFlagsDecorator],
+  decorators: [ValidationErrorsDecorator, FeatureFlagsDecorator, FormModalContentDecorator],
   render,
   args: {
     apiGroups: [

src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js

@@ -5,14 +5,14 @@ import {FormattedMessage} from 'react-intl';
 import useConfirm from 'components/admin/form_design/useConfirm';
 import Fieldset from 'components/admin/forms/Fieldset';
 import {
-  AuthAttributePath,
   ObjectTypeSelect,
   ObjectTypeVersionSelect,
   ObjectsAPIGroup,
 } from 'components/admin/forms/objects_api';
 import ErrorBoundary from 'components/errors/ErrorBoundary';
 
 import {
+  AuthAttributePath,
   DocumentTypesFieldet,
   LegacyDocumentTypesFieldet,
   OrganisationRSIN,
@@ -152,14 +152,7 @@ const V2ConfigFields = ({apiGroupChoices}) => {
         fieldNames={['updateExistingObject', 'authAttributePath']}
       >
         <UpdateExistingObject />
-        <AuthAttributePath
-          name={'authAttributePath'}
-          objectsApiGroup={objectsApiGroup}
-          objecttypeUuid={objecttype}
-          objecttypeVersion={objecttypeVersion}
-          disabled={!updateExistingObject}
-          required={updateExistingObject}
-        />
+        <AuthAttributePath />
       </Fieldset>
 
       <Fieldset

src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/AuthAttributePath.js

@@ -0,0 +1,36 @@
+import {useFormikContext} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import {AuthAttributePath as SharedAuthAttributePath} from 'components/admin/forms/objects_api';
+
+const AuthAttributePath = () => {
+  const {
+    values: {
+      objectsApiGroup = null,
+      objecttype = '',
+      objecttypeVersion = null,
+      updateExistingObject = false,
+    },
+  } = useFormikContext();
+  return (
+    <SharedAuthAttributePath
+      name={'authAttributePath'}
+      objectsApiGroup={objectsApiGroup}
+      objecttypeUuid={objecttype}
+      objecttypeVersion={objecttypeVersion}
+      disabled={!updateExistingObject}
+      required={updateExistingObject}
+      helpText={
+        <FormattedMessage
+          description="Objects API registration: authAttributePath helpText"
+          defaultMessage={`The property that gets compared with the identifier (e.g.
+        BSN/KVK) of the authenticated user to verify ownership of the object being
+        updated. This is important to prevent malicious users modifying information
+        of other people than themselves.`}
+        />
+      }
+    />
+  );
+};
+
+export default AuthAttributePath;

src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/index.js

@@ -3,3 +3,4 @@ export {DocumentTypesFieldet} from './DocumentTypes';
 export {default as UpdateExistingObject} from './UpdateExistingObject';
 export {default as UploadSubmissionCsv} from './UploadSubmissionCSV';
 export {default as OrganisationRSIN} from './OrganisationRSIN';
+export {default as AuthAttributePath} from './AuthAttributePath';

src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js

@@ -4,6 +4,7 @@ import {Form, Formik} from 'formik';
 import {
   FeatureFlagsDecorator,
   FormDecorator,
+  FormModalContentDecorator,
   ValidationErrorsDecorator,
 } from 'components/admin/form_design/story-decorators';
 import {rsSelect} from 'utils/storybookTestHelpers';
@@ -56,7 +57,12 @@ const render = ({apiGroups, objectsApiGroupChoices, confidentialityLevelChoices,
 export default {
   title: 'Form design/Registration/ZGW',
   component: ZGWFormFields,
-  decorators: [ValidationErrorsDecorator, FormDecorator, FeatureFlagsDecorator],
+  decorators: [
+    ValidationErrorsDecorator,
+    FormDecorator,
+    FeatureFlagsDecorator,
+    FormModalContentDecorator,
+  ],
   render,
   args: {
     apiGroups: [

src/openforms/js/components/admin/form_design/story-decorators.js

@@ -1,6 +1,6 @@
 import {fn} from '@storybook/test';
 import {Form, Formik} from 'formik';
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
 
 import {
   FeatureFlagsContext,
@@ -47,6 +47,27 @@ export const AdminChangeFormDecorator = (Story, {parameters}) => {
   );
 };
 
+/**
+ * Decorator to mark story as being rendered inside a modal.
+ *
+ * It ensures that the DOM layout/hierarchy is as expected w/r to styling effects.
+ */
+export const FormModalContentDecorator = Story => {
+  // // remove the change-form body class which affects the positioning of validation errors
+  // useEffect(() => {
+  //   // body of the story inside the story iframe
+  //   const body = document.querySelector('body');
+  //   body.classList.remove('change-form');
+  // }, []);
+  return (
+    <div className="react-modal">
+      <div className="react-modal__form">
+        <Story />
+      </div>
+    </div>
+  );
+};
+
 export const FormDecorator = (Story, {args}) => (
   <FormContext.Provider
     value={{

src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js

@@ -255,6 +255,14 @@ const ObjectsAPIFields = () => {
             objecttypeUuid={objecttypeUuid}
             objecttypeVersion={objecttypeVersion}
             required
+            helpText={
+              <FormattedMessage
+                description="Objects API prefill: authAttributePath helpText"
+                defaultMessage={`The property that gets compared with the identifier (e.g. BSN/KVK) of
+                the authenticated user. This is important to prevent malicious users
+                looking up private information of other people.`}
+              />
+            }
           />
         )}
       </Fieldset>

src/openforms/js/components/admin/forms/Field.stories.js

@@ -7,7 +7,19 @@ export default {
   title: 'Admin/Django/Field',
   component: Field,
 
-  decorators: [AdminChangeFormDecorator],
+  decorators: [
+    Story => (
+      <div class="form-row">
+        <Story />
+      </div>
+    ),
+    AdminChangeFormDecorator,
+    Story => (
+      <div class="react-form-create">
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     adminChangeForm: {
       wrapFieldset: true,