feat: add support to form in action modals (#11094)

* feat: add support to form in action modals

* chore: add validation for custom actions in events

* chore: amend tests

* fix: amend custom action validation condition

* fix: remove declaration for custom action before validation

* chore: add test for non-required fields

* fix: replace responsive modal with dialog for custom action modal

* fix: move util to commons

* feat: show custom field value in audit modal

* chore: hide modal body for empty annotation

* fix: remove lint errors

* separate modal result and values (#11130)

* fix: hide action menu items for scopes

* chore: add story for custom action menu

* fix: rename custom action component

* fix: amend action modal body text

* fix: fetch action config only for the executing custom action instead of all

* fix: remove action for pending records

* fix: move pending flags check at the top

* fix: amend archive client test

* fix: amend field modal styling

* fix: remove compilation issues

* fix: amend width of modal

* fix: add knipignore for component props

* fix: use hooks on top of function

---------

Co-authored-by: Nil20 <[email protected]>
Co-authored-by: Cihan Bebek <[email protected]>

Author: 3 people

packages/client/.storybook/preview.tsx

@@ -40,6 +40,7 @@ import {
   setDraftData
 } from '@client/v2-events/features/events/useEvents/api'
 import {
+  ActionType,
   Draft,
   EventDocument,
   tennisClubMembershipEvent,
@@ -174,6 +175,36 @@ export async function clearStorage() {
 
 clearStorage()
 
+const tennisClubMembershipEventWithCustomAction = {
+  ...tennisClubMembershipEvent,
+  actions: tennisClubMembershipEvent.actions.concat([
+    {
+      type: ActionType.CUSTOM,
+      customActionType: 'CONFIRM',
+      label: {
+        id: 'event.tennis-club-membership.action.confirm.label',
+        defaultMessage: 'Confirm',
+        description:
+          'This is shown as the action name anywhere the user can trigger the action from'
+      },
+      // @TODO: once action conditionals are implemented, add some conditional here?
+      form: [
+        {
+          id: 'notes',
+          type: 'TEXTAREA',
+          required: true,
+          label: {
+            defaultMessage: 'Notes',
+            description: 'This is the label for the field for a custom action',
+            id: 'event.birth.custom.action.approve.field.notes.label'
+          }
+        }
+      ],
+      flags: []
+    }
+  ])
+}
+
 const preview: Preview = {
   loaders: [
     mswLoader,
@@ -258,7 +289,7 @@ const preview: Preview = {
        */
 
       const offlineConfigs: Array<EventConfig> = options.parameters?.offline
-        ?.configs ?? [tennisClubMembershipEvent]
+        ?.configs ?? [tennisClubMembershipEventWithCustomAction]
 
       offlineConfigs.forEach((config) => {
         addLocalEventConfig(config)

packages/client/src/tests/__snapshots__/token-generator.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Generates tokens > fieldAgent token 1`] = `"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6WyJyZWNvcmQuZGVjbGFyYXRpb24tc3VibWl0LWZvci1yZXZpZXciLCJzZWFyY2guYmlydGgiLCJzZWFyY2guZGVhdGgiLCJzZWFyY2gubWFycmlhZ2UiLCJ3b3JrcXVldWVbaWQ9YWxsLWV2ZW50c3xhc3NpZ25lZC10by15b3V8cmVjZW50fHJlcXVpcmVzLXVwZGF0ZXN8c2VudC1mb3ItcmV2aWV3XSIsInNlYXJjaFtldmVudD1iaXJ0aCxhY2Nlc3M9YWxsXSIsInNlYXJjaFtldmVudD1kZWF0aCxhY2Nlc3M9YWxsXSIsInNlYXJjaFtldmVudD10ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwLGFjY2Vzcz1hbGxdIiwic2VhcmNoW2V2ZW50PUZPT1RCQUxMX0NMVUJfTUVNQkVSU0hJUCxhY2Nlc3M9YWxsXSIsInJlY29yZC5jcmVhdGVbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iLCJyZWNvcmQuZGVjbGFyZVtldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5ub3RpZnlbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iXSwidXNlclR5cGUiOiJ1c2VyIiwicm9sZSI6IkZJRUxEX0FHRU5UIiwiaWF0IjoxNDg3MDc2NzA4LCJhdWQiOiJvcGVuY3J2czpnYXRld2F5LXVzZXIiLCJpc3MiOiJvcGVuY3J2czphdXRoLXNlcnZpY2UiLCJzdWIiOiI2N2VmN2Y4M2Q2YTljYjkyZTllZGFhOTkifQ.QedgwX3YnOHXYAQSXSbtea4vXsrQv7AmO1MbxGG_ci-dG8FVLgOgDZkcDRhByRv_VRfGG80KoAyUl3KAAj8MG2O9BFDoauk4d3au2JMa-RmkmfSQkncx8N6DbHRqD-nSuQ_hCRWIUNqy23H_ZuTII5uB70kvemDsh_PxX1JWrlNYLCKfiNAsuthbqg2j_gsvB5ZPHIamZCvr9SQ0bSB_BmNtI5n78zIYJnqYrZ-H2LEbQzjz9hCqX_SRRBCVKBST0m0E16GLZk2GKui3qMjxyCIWGD14s22Uyt8yOvrAelzp5a_873UQ7Ci-ZSI12qmmStA4_Rw9PJh5ABAb0RTumop4O7SOE1O0wBZAF0sf07xabR2zFf4OgK6je89sAnjvaqJzZZUqgeYqV2pmuAylMpVYEKZS18ImRPWvmE-dr0TXpLZiNGHdiNVmby8HBn0ZeOFbQ0zkvdoOIVYOj3VEfM0x8Ldk1haCmzEEXsklTXDxicDnzjLSkkV1poVL_XI9kEB19YhnLsV6iugTGtgYXNARj6uLiMS_YC3-wD2Cm6w3XiA0BNlHHH6N6ZLya0UfyG0qu7na5yOur-MMFggmltMNsq7Xu7MZm5ugIKJnJqfiVgbJ3f_w6armuaes-0sT3JOyt1hRvKWTmW8QaF2XiIsp2YE8_tOUbxUpOa3hADY"`;
 
-exports[`Generates tokens > localRegistrar token 1`] = `"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6WyJyZWNvcmQuZGVjbGFyYXRpb24tZWRpdCIsInJlY29yZC5yZXZpZXctZHVwbGljYXRlcyIsInJlY29yZC5kZWNsYXJhdGlvbi1yZWluc3RhdGUiLCJyZWNvcmQuY29uZmlybS1yZWdpc3RyYXRpb24iLCJyZWNvcmQucmVqZWN0LXJlZ2lzdHJhdGlvbiIsInBlcmZvcm1hbmNlLnJlYWQiLCJwZXJmb3JtYW5jZS5yZWFkLWRhc2hib2FyZHMiLCJwcm9maWxlLmVsZWN0cm9uaWMtc2lnbmF0dXJlIiwib3JnYW5pc2F0aW9uLnJlYWQtbG9jYXRpb25zOm15LW9mZmljZSIsInNlYXJjaC5iaXJ0aCIsInNlYXJjaC5kZWF0aCIsInNlYXJjaC5tYXJyaWFnZSIsIndvcmtxdWV1ZVtpZD1hbGwtZXZlbnRzfGFzc2lnbmVkLXRvLXlvdXxyZWNlbnR8cmVxdWlyZXMtY29tcGxldGlvbnxyZXF1aXJlcy11cGRhdGVzfGluLXJldmlldy1hbGx8aW4tZXh0ZXJuYWwtdmFsaWRhdGlvbnxyZWFkeS10by1wcmludHxyZWFkeS10by1pc3N1ZV0iLCJzZWFyY2hbZXZlbnQ9YmlydGgsYWNjZXNzPWFsbF0iLCJzZWFyY2hbZXZlbnQ9ZGVhdGgsYWNjZXNzPWFsbF0iLCJzZWFyY2hbZXZlbnQ9dGVubmlzLWNsdWItbWVtYmVyc2hpcCxhY2Nlc3M9YWxsXSIsInNlYXJjaFtldmVudD1GT09UQkFMTF9DTFVCX01FTUJFUlNISVAsYWNjZXNzPWFsbF0iLCJ1c2VyLnJlYWQ6b25seS1teS1hdWRpdCIsInJlY29yZC5jcmVhdGVbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iLCJyZWNvcmQucmVhZFtldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5kZWNsYXJlW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLmRlY2xhcmVkLnJlamVjdFtldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5kZWNsYXJlZC5hcmNoaXZlW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLnJlZ2lzdGVyW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLnJlZ2lzdGVyZWQucHJpbnQtY2VydGlmaWVkLWNvcGllc1tldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5yZWdpc3RlcmVkLmNvcnJlY3RbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iLCJyZWNvcmQudW5hc3NpZ24tb3RoZXJzW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLmRlY2xhcmVkLnJldmlldy1kdXBsaWNhdGVzW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIl0sInVzZXJUeXBlIjoidXNlciIsInJvbGUiOiJMT0NBTF9SRUdJU1RSQVIiLCJpYXQiOjE0ODcwNzY3MDgsImF1ZCI6Im9wZW5jcnZzOmdhdGV3YXktdXNlciIsImlzcyI6Im9wZW5jcnZzOmF1dGgtc2VydmljZSIsInN1YiI6IjY4MjFjMTc1ZGNlNGQ3ODg2ZDRlODIxMCJ9.U97Mqi2BRMYExtYx51CX5hEP2XHyoo9rfV0MaCFBQkrGkQflzioL_IdDJe660hBE-hai4yY_9bpA8P60uAJOnY5ZxG6vJSUGrJJNiXJBhwTMFAJD8pf58VNoSHriMymfx_OXFLRtFTrOV7IMc4TniwPcupydz2S3TTdupVUJgCVoTU5Yk362XyVIZ7iPgCRf0IW3I7fWzv5wnJfBWYU6xh0YdIvgAgjVbtaZ3iLrLFa-rq1MPSVd72bkg3jwHTK_GMK0QKtxmHmK84PWlQWvwi09WkG3dFaft-iCjHPGTOfOUANiLbatG9Sh_4tAaGEQimMdkivLRubU8O3REpMOmKIhzB6WD5CBVMr9AGklWQI7OOTFo5_KGoEOw5M5aAxCmaRZPvrM6tthZv88MWC3h_RAsI4lPyQi-6HQ8WZIoXgHXo4RmMutStWn07tCibugbRcvXAEpCrtigTIMiLXX4JjwYUzEU3PFCrfj52GEDT04FAKr2mfTizdTwmR1vP65Jfoz9HFm6HFp2Xf8MgFyO7XaBy5QYDwTfofWwrmBKrjI-K8B_zZfjeoRB2jgdgPuzwi76f6_GZa1JhZuOAhFjObtKMYtmca7LA_OU3LH9vI1dwyl5Q2XHMfiqA3Y7Ef18BpipDOC2vv88S1p-wNPNpVl8r-JY-tCo8XA4tKOo0A"`;
+exports[`Generates tokens > localRegistrar token 1`] = `"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6WyJyZWNvcmQuZGVjbGFyYXRpb24tZWRpdCIsInJlY29yZC5yZXZpZXctZHVwbGljYXRlcyIsInJlY29yZC5kZWNsYXJhdGlvbi1yZWluc3RhdGUiLCJyZWNvcmQuY29uZmlybS1yZWdpc3RyYXRpb24iLCJyZWNvcmQucmVqZWN0LXJlZ2lzdHJhdGlvbiIsInBlcmZvcm1hbmNlLnJlYWQiLCJwZXJmb3JtYW5jZS5yZWFkLWRhc2hib2FyZHMiLCJwcm9maWxlLmVsZWN0cm9uaWMtc2lnbmF0dXJlIiwib3JnYW5pc2F0aW9uLnJlYWQtbG9jYXRpb25zOm15LW9mZmljZSIsInNlYXJjaC5iaXJ0aCIsInNlYXJjaC5kZWF0aCIsInNlYXJjaC5tYXJyaWFnZSIsIndvcmtxdWV1ZVtpZD1hbGwtZXZlbnRzfGFzc2lnbmVkLXRvLXlvdXxyZWNlbnR8cmVxdWlyZXMtY29tcGxldGlvbnxyZXF1aXJlcy11cGRhdGVzfGluLXJldmlldy1hbGx8aW4tZXh0ZXJuYWwtdmFsaWRhdGlvbnxyZWFkeS10by1wcmludHxyZWFkeS10by1pc3N1ZV0iLCJzZWFyY2hbZXZlbnQ9YmlydGgsYWNjZXNzPWFsbF0iLCJzZWFyY2hbZXZlbnQ9ZGVhdGgsYWNjZXNzPWFsbF0iLCJzZWFyY2hbZXZlbnQ9dGVubmlzLWNsdWItbWVtYmVyc2hpcCxhY2Nlc3M9YWxsXSIsInNlYXJjaFtldmVudD1GT09UQkFMTF9DTFVCX01FTUJFUlNISVAsYWNjZXNzPWFsbF0iLCJ1c2VyLnJlYWQ6b25seS1teS1hdWRpdCIsInJlY29yZC5jcmVhdGVbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iLCJyZWNvcmQucmVhZFtldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5kZWNsYXJlW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLmRlY2xhcmVkLnJlamVjdFtldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5kZWNsYXJlZC5hcmNoaXZlW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLnJlZ2lzdGVyW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLnJlZ2lzdGVyZWQucHJpbnQtY2VydGlmaWVkLWNvcGllc1tldmVudD1iaXJ0aHxkZWF0aHx0ZW5uaXMtY2x1Yi1tZW1iZXJzaGlwXSIsInJlY29yZC5yZWdpc3RlcmVkLmNvcnJlY3RbZXZlbnQ9YmlydGh8ZGVhdGh8dGVubmlzLWNsdWItbWVtYmVyc2hpcF0iLCJyZWNvcmQudW5hc3NpZ24tb3RoZXJzW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLmRlY2xhcmVkLnJldmlldy1kdXBsaWNhdGVzW2V2ZW50PWJpcnRofGRlYXRofHRlbm5pcy1jbHViLW1lbWJlcnNoaXBdIiwicmVjb3JkLmN1c3RvbS1hY3Rpb25bZXZlbnQ9dGVubmlzLWNsdWItbWVtYmVyc2hpcCxjdXN0b21BY3Rpb25UeXBlPUFwcHJvdmVdIl0sInVzZXJUeXBlIjoidXNlciIsInJvbGUiOiJMT0NBTF9SRUdJU1RSQVIiLCJpYXQiOjE0ODcwNzY3MDgsImF1ZCI6Im9wZW5jcnZzOmdhdGV3YXktdXNlciIsImlzcyI6Im9wZW5jcnZzOmF1dGgtc2VydmljZSIsInN1YiI6IjY4MjFjMTc1ZGNlNGQ3ODg2ZDRlODIxMCJ9.m6PNiLzAgAdoNnEwDRCSnFCYveFOaD9sxgHTKu_6SOIQ_9AWEG72AQ2SczUQJFnQoEd4znqvhVEohcip_Wn7-TaFcZMsULgWUF1d7yltsJkyG5vtKy8FnhmLMfxEH0wzJC-7nG2TBiYdD99zh19vCY1NVSXvbHuWUpVbBcwPhjcto56gD91T9ZL0Zbea2DaeoEZ_vbXNtSBGhS8vEFUIDp3kgsn60CurHlg4y5kF8AaNMJJVjgEXHI6Ke_IWeV1YR_ZPSvjHuybJjKCpuu699Vj3B7vujxGdQah1tQhSgbbm-YD3Toaeojxd-v0aSGbGb6P-RVzsyOES5SsDh4IvKyrotDCMKKpP4AxjRE6ZlNzPYfvn5reI0g_sEXhrcL7zFvnsJbEfycsj7RrLDl2fs20_vbFcjI0ORBgtO3Z69KMspV2ZyT252rB6TDDLxf8Y2oFQenmIxhfdz6ab7ae2NnJVHUxDYiOYRb2lBvMoumCFsTKCHM5t2IQ0vphwYFMcOztpBvjdOWXxWyzV_EVa9WBLmxSu6I2Q9-gkVE8_zKF9gMgWJ4Qncwh8_BWRsWrNltv2Vg4WeuHQ3q-peW0yAngTuehuT2EqNr2k4CZ3aytZ04B0SP-GbQE8xD2kaKmLVDpgFDkaS3lKdE3r0kkBpqHqnl0tCGMmwKsOoPr4Csk"`;
 
 exports[`Generates tokens > localSystemAdmin token 1`] = `"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJzY29wZSI6WyJ1c2VyLnJlYWQ6bXktb2ZmaWNlIiwidXNlci5yZWFkOm15LWp1cmlzZGljdGlvbiIsInVzZXIudXBkYXRlOm15LWp1cmlzZGljdGlvbiIsIm9yZ2FuaXNhdGlvbi5yZWFkLWxvY2F0aW9uczpteS1qdXJpc2RpY3Rpb24iLCJwZXJmb3JtYW5jZS5yZWFkIiwicGVyZm9ybWFuY2UucmVhZC1kYXNoYm9hcmRzIiwicGVyZm9ybWFuY2Uudml0YWwtc3RhdGlzdGljcy1leHBvcnQiLCJvcmdhbmlzYXRpb24ucmVhZC1sb2NhdGlvbnM6bXktb2ZmaWNlIiwidXNlci5jcmVhdGVbcm9sZT1GSUVMRF9BR0VOVHxQT0xJQ0VfT0ZGSUNFUnxTT0NJQUxfV09SS0VSfEhFQUxUSENBUkVfV09SS0VSfExPQ0FMX0xFQURFUnxSRUdJU1RSQVRJT05fQUdFTlR8TE9DQUxfUkVHSVNUUkFSXSIsInVzZXIuZWRpdFtyb2xlPUZJRUxEX0FHRU5UfFBPTElDRV9PRkZJQ0VSfFNPQ0lBTF9XT1JLRVJ8SEVBTFRIQ0FSRV9XT1JLRVJ8TE9DQUxfTEVBREVSfFJFR0lTVFJBVElPTl9BR0VOVHxMT0NBTF9SRUdJU1RSQVJdIl0sInVzZXJUeXBlIjoidXNlciIsInJvbGUiOiJMT0NBTF9TWVNURU1fQURNSU4iLCJpYXQiOjE0ODcwNzY3MDgsImF1ZCI6Im9wZW5jcnZzOmdhdGV3YXktdXNlciIsImlzcyI6Im9wZW5jcnZzOmF1dGgtc2VydmljZSIsInN1YiI6IjY4Y2JkMjZmYzY0NzYxNTY1NDY5NTkxZCJ9.O-wogl0fSIAJJ1wd1o8fqo-NfucnEKr1dKbYgSdhnCljZk-0K0bYIQOpz6TqKOinAxFhRcy2hRpf2MS7Q-mBlW43pF_Rzcm7piz3Q14V8ZKgeY7XEdvtcbPvf004PnSd7gGqLLwmYM7WX4X9ok1_d5AS2p70z7oYb0XsrrJ1cE_hv5teNWZyjnUn3JIN2o4BBZYSCQ0IlNwC5uCL1givHiHGq3j6rmses-4QAhCPHXPLjWSoa272OEzQdIqEgZj4sZcNeAxMgFfU0BxUR5huviaXP-e7iPk_zbogCKFHG6wmr__FUTGL0QR4sOBXy52Rf1bExdu44CNXmagSofwsvkUYD5QPfxTtp6nJ3VXNUrhz_Ga66fV_m8EMcd_Hpqytfb1lo_5kkhuQRwgfiBRXcXXCEDkeYWPLnZtsrnSHmIl-LHHKpNEiIGP4phAo9uwM6cGEGAt9ewFTyHWvJ22PETyBocIXiGh0kCjZKI9tpV8QcGDKt7y4b_CQHI0Zd-A7ST3xZUsztavF_zH77DnU-vweEBp-EhEQ1zRwtEr3neWXeKbZBQz0gqbeq6zGl87S1ZflPTMOdbkYd7NlR0NiGy4CCysBlLxeo9Dgv_4uXXJcFgJOvGD5RDhKo-CA4Fcq64D_YXjhWmuC-5-pmxf5TpAb323upY4NqWlZ3cxh_6Y"`;