diff --git a/app/javascript/components/workflow-credential-mapping-form/workflow-credential-mapping-form.schema.js b/app/javascript/components/workflow-credential-mapping-form/workflow-credential-mapping-form.schema.js
index 9855d5fa885..08e4bd9a995 100644
--- a/app/javascript/components/workflow-credential-mapping-form/workflow-credential-mapping-form.schema.js
+++ b/app/javascript/components/workflow-credential-mapping-form/workflow-credential-mapping-form.schema.js
@@ -73,14 +73,15 @@ const createSchema = (credentials, credentialReferences, payloadCredentials, wor
     fields: [
       {
         component: 'credential-mapper',
-        name: 'test',
-        label: __('test'),
+        name: 'credential-mapping-table',
+        id: 'credential-mapping-table',
         rows: createRows(credentials, payloadCredentials, workflowAuthentications),
         onCellClick: deleteMapping,
       },
       {
         component: componentTypes.SELECT,
         name: 'credential_references',
+        id: 'credential_references',
         label: __('Credential Reference'),
         placeholder: __('<Choose>'),
         includeEmpty: true,
@@ -134,6 +135,7 @@ const createSchema = (credentials, credentialReferences, payloadCredentials, wor
           {
             component: componentTypes.SELECT,
             name: 'workflow_credentials',
+            id: 'workflow_credentials',
             label: __('Workflow Credential'),
             placeholder: __('<Choose>'),
             includeEmpty: true,
@@ -146,6 +148,7 @@ const createSchema = (credentials, credentialReferences, payloadCredentials, wor
           {
             component: componentTypes.SELECT,
             name: 'credential_field',
+            id: 'credential_field',
             label: __('Credential Field'),
             placeholder: __('<Choose>'),
             includeEmpty: true,
diff --git a/app/javascript/spec/workflow-credential-mapping-form/__snapshots__/workflow-credential-mapping-form.spec.js.snap b/app/javascript/spec/workflow-credential-mapping-form/__snapshots__/workflow-credential-mapping-form.spec.js.snap
index 3a97bb3b21d..02f38c6908f 100644
--- a/app/javascript/spec/workflow-credential-mapping-form/__snapshots__/workflow-credential-mapping-form.spec.js.snap
+++ b/app/javascript/spec/workflow-credential-mapping-form/__snapshots__/workflow-credential-mapping-form.spec.js.snap
@@ -103,8 +103,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
           "fields": Array [
             Object {
               "component": "credential-mapper",
-              "label": "test",
-              "name": "test",
+              "id": "credential-mapping-table",
+              "name": "credential-mapping-table",
               "onCellClick": [Function],
               "rows": Array [
                 Object {
@@ -149,6 +149,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
             },
             Object {
               "component": "select",
+              "id": "credential_references",
               "includeEmpty": true,
               "label": "Credential Reference",
               "name": "credential_references",
@@ -175,6 +176,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
               "fields": Array [
                 Object {
                   "component": "select",
+                  "id": "workflow_credentials",
                   "includeEmpty": true,
                   "label": "Workflow Credential",
                   "name": "workflow_credentials",
@@ -193,6 +195,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                 },
                 Object {
                   "component": "select",
+                  "id": "credential_field",
                   "includeEmpty": true,
                   "label": "Credential Field",
                   "name": "credential_field",
@@ -293,8 +296,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
             "fields": Array [
               Object {
                 "component": "credential-mapper",
-                "label": "test",
-                "name": "test",
+                "id": "credential-mapping-table",
+                "name": "credential-mapping-table",
                 "onCellClick": [Function],
                 "rows": Array [
                   Object {
@@ -339,6 +342,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
               },
               Object {
                 "component": "select",
+                "id": "credential_references",
                 "includeEmpty": true,
                 "label": "Credential Reference",
                 "name": "credential_references",
@@ -365,6 +369,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                 "fields": Array [
                   Object {
                     "component": "select",
+                    "id": "workflow_credentials",
                     "includeEmpty": true,
                     "label": "Workflow Credential",
                     "name": "workflow_credentials",
@@ -383,6 +388,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                   },
                   Object {
                     "component": "select",
+                    "id": "credential_field",
                     "includeEmpty": true,
                     "label": "Credential Field",
                     "name": "credential_field",
@@ -474,8 +480,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
               "fields": Array [
                 Object {
                   "component": "credential-mapper",
-                  "label": "test",
-                  "name": "test",
+                  "id": "credential-mapping-table",
+                  "name": "credential-mapping-table",
                   "onCellClick": [Function],
                   "rows": Array [
                     Object {
@@ -520,6 +526,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                 },
                 Object {
                   "component": "select",
+                  "id": "credential_references",
                   "includeEmpty": true,
                   "label": "Credential Reference",
                   "name": "credential_references",
@@ -546,6 +553,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                   "fields": Array [
                     Object {
                       "component": "select",
+                      "id": "workflow_credentials",
                       "includeEmpty": true,
                       "label": "Workflow Credential",
                       "name": "workflow_credentials",
@@ -564,6 +572,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                     },
                     Object {
                       "component": "select",
+                      "id": "credential_field",
                       "includeEmpty": true,
                       "label": "Credential Field",
                       "name": "credential_field",
@@ -653,8 +662,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                 Array [
                   <SingleField
                     component="credential-mapper"
-                    label="test"
-                    name="test"
+                    id="credential-mapping-table"
+                    name="credential-mapping-table"
                     onCellClick={[Function]}
                     rows={
                       Array [
@@ -701,6 +710,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                   />,
                   <SingleField
                     component="select"
+                    id="credential_references"
                     includeEmpty={true}
                     label="Credential Reference"
                     name="credential_references"
@@ -732,6 +742,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                       Array [
                         Object {
                           "component": "select",
+                          "id": "workflow_credentials",
                           "includeEmpty": true,
                           "label": "Workflow Credential",
                           "name": "workflow_credentials",
@@ -750,6 +761,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         },
                         Object {
                           "component": "select",
+                          "id": "credential_field",
                           "includeEmpty": true,
                           "label": "Credential Field",
                           "name": "credential_field",
@@ -790,8 +802,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                   "fields": Array [
                     Object {
                       "component": "credential-mapper",
-                      "label": "test",
-                      "name": "test",
+                      "id": "credential-mapping-table",
+                      "name": "credential-mapping-table",
                       "onCellClick": [Function],
                       "rows": Array [
                         Object {
@@ -836,6 +848,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                     },
                     Object {
                       "component": "select",
+                      "id": "credential_references",
                       "includeEmpty": true,
                       "label": "Credential Reference",
                       "name": "credential_references",
@@ -862,6 +875,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                       "fields": Array [
                         Object {
                           "component": "select",
+                          "id": "workflow_credentials",
                           "includeEmpty": true,
                           "label": "Workflow Credential",
                           "name": "workflow_credentials",
@@ -880,6 +894,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         },
                         Object {
                           "component": "select",
+                          "id": "credential_field",
                           "includeEmpty": true,
                           "label": "Credential Field",
                           "name": "credential_field",
@@ -930,8 +945,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                   Array [
                     <SingleField
                       component="credential-mapper"
-                      label="test"
-                      name="test"
+                      id="credential-mapping-table"
+                      name="credential-mapping-table"
                       onCellClick={[Function]}
                       rows={
                         Array [
@@ -978,6 +993,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                     />,
                     <SingleField
                       component="select"
+                      id="credential_references"
                       includeEmpty={true}
                       label="Credential Reference"
                       name="credential_references"
@@ -1009,6 +1025,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         Array [
                           Object {
                             "component": "select",
+                            "id": "workflow_credentials",
                             "includeEmpty": true,
                             "label": "Workflow Credential",
                             "name": "workflow_credentials",
@@ -1027,6 +1044,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                           },
                           Object {
                             "component": "select",
+                            "id": "credential_field",
                             "includeEmpty": true,
                             "label": "Credential Field",
                             "name": "credential_field",
@@ -1073,8 +1091,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                     "fields": Array [
                       Object {
                         "component": "credential-mapper",
-                        "label": "test",
-                        "name": "test",
+                        "id": "credential-mapping-table",
+                        "name": "credential-mapping-table",
                         "onCellClick": [Function],
                         "rows": Array [
                           Object {
@@ -1119,6 +1137,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                       },
                       Object {
                         "component": "select",
+                        "id": "credential_references",
                         "includeEmpty": true,
                         "label": "Credential Reference",
                         "name": "credential_references",
@@ -1145,6 +1164,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         "fields": Array [
                           Object {
                             "component": "select",
+                            "id": "workflow_credentials",
                             "includeEmpty": true,
                             "label": "Workflow Credential",
                             "name": "workflow_credentials",
@@ -1163,6 +1183,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                           },
                           Object {
                             "component": "select",
+                            "id": "credential_field",
                             "includeEmpty": true,
                             "label": "Credential Field",
                             "name": "credential_field",
@@ -1228,8 +1249,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                     Array [
                       <SingleField
                         component="credential-mapper"
-                        label="test"
-                        name="test"
+                        id="credential-mapping-table"
+                        name="credential-mapping-table"
                         onCellClick={[Function]}
                         rows={
                           Array [
@@ -1276,6 +1297,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                       />,
                       <SingleField
                         component="select"
+                        id="credential_references"
                         includeEmpty={true}
                         label="Credential Reference"
                         name="credential_references"
@@ -1307,6 +1329,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                           Array [
                             Object {
                               "component": "select",
+                              "id": "workflow_credentials",
                               "includeEmpty": true,
                               "label": "Workflow Credential",
                               "name": "workflow_credentials",
@@ -1325,6 +1348,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             },
                             Object {
                               "component": "select",
+                              "id": "credential_field",
                               "includeEmpty": true,
                               "label": "Credential Field",
                               "name": "credential_field",
@@ -1371,8 +1395,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                       "fields": Array [
                         Object {
                           "component": "credential-mapper",
-                          "label": "test",
-                          "name": "test",
+                          "id": "credential-mapping-table",
+                          "name": "credential-mapping-table",
                           "onCellClick": [Function],
                           "rows": Array [
                             Object {
@@ -1417,6 +1441,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         },
                         Object {
                           "component": "select",
+                          "id": "credential_references",
                           "includeEmpty": true,
                           "label": "Credential Reference",
                           "name": "credential_references",
@@ -1443,6 +1468,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                           "fields": Array [
                             Object {
                               "component": "select",
+                              "id": "workflow_credentials",
                               "includeEmpty": true,
                               "label": "Workflow Credential",
                               "name": "workflow_credentials",
@@ -1461,6 +1487,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             },
                             Object {
                               "component": "select",
+                              "id": "credential_field",
                               "includeEmpty": true,
                               "label": "Credential Field",
                               "name": "credential_field",
@@ -1517,9 +1544,9 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                          
                         <SingleField
                           component="credential-mapper"
-                          key="test"
-                          label="test"
-                          name="test"
+                          id="credential-mapping-table"
+                          key="credential-mapping-table"
+                          name="credential-mapping-table"
                           onCellClick={[Function]}
                           rows={
                             Array [
@@ -1568,8 +1595,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             field={
                               Object {
                                 "component": "credential-mapper",
-                                "label": "test",
-                                "name": "test",
+                                "id": "credential-mapping-table",
+                                "name": "credential-mapping-table",
                                 "onCellClick": [Function],
                                 "rows": Array [
                                   Object {
@@ -1619,8 +1646,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             >
                               <CredentialMapperComponent
                                 component="credential-mapper"
-                                label="test"
-                                name="test"
+                                id="credential-mapping-table"
+                                name="credential-mapping-table"
                                 onCellClick={[Function]}
                                 rows={
                                   Array [
@@ -2993,6 +3020,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                         </SingleField>
                         <SingleField
                           component="select"
+                          id="credential_references"
                           includeEmpty={true}
                           key="credential_references"
                           label="Credential Reference"
@@ -3017,6 +3045,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             field={
                               Object {
                                 "component": "select",
+                                "id": "credential_references",
                                 "includeEmpty": true,
                                 "label": "Credential Reference",
                                 "name": "credential_references",
@@ -3041,6 +3070,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             >
                               <SelectWithOnChange
                                 component="select"
+                                id="credential_references"
                                 includeEmpty={true}
                                 label="Credential Reference"
                                 name="credential_references"
@@ -3062,6 +3092,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                               >
                                 <Select
                                   component="select"
+                                  id="credential_references"
                                   label="Credential Reference"
                                   loadingMessage="Loading..."
                                   name="credential_references"
@@ -3086,6 +3117,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                 >
                                   <Select
                                     SelectComponent={[Function]}
+                                    id="credential_references"
                                     invalid={false}
                                     invalidText=""
                                     isClearable={false}
@@ -3122,6 +3154,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                       className=""
                                       closeMenuOnSelect={true}
                                       hideSelectedOptions={false}
+                                      id="credential_references"
                                       invalidText=""
                                       isClearable={false}
                                       isFetching={false}
@@ -3300,6 +3333,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                             Array [
                               Object {
                                 "component": "select",
+                                "id": "workflow_credentials",
                                 "includeEmpty": true,
                                 "label": "Workflow Credential",
                                 "name": "workflow_credentials",
@@ -3318,6 +3352,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                               },
                               Object {
                                 "component": "select",
+                                "id": "credential_field",
                                 "includeEmpty": true,
                                 "label": "Credential Field",
                                 "name": "credential_field",
@@ -3361,6 +3396,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                 "fields": Array [
                                   Object {
                                     "component": "select",
+                                    "id": "workflow_credentials",
                                     "includeEmpty": true,
                                     "label": "Workflow Credential",
                                     "name": "workflow_credentials",
@@ -3379,6 +3415,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                   },
                                   Object {
                                     "component": "select",
+                                    "id": "credential_field",
                                     "includeEmpty": true,
                                     "label": "Credential Field",
                                     "name": "credential_field",
@@ -3422,6 +3459,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                   "fields": Array [
                                     Object {
                                       "component": "select",
+                                      "id": "workflow_credentials",
                                       "includeEmpty": true,
                                       "label": "Workflow Credential",
                                       "name": "workflow_credentials",
@@ -3440,6 +3478,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                     },
                                     Object {
                                       "component": "select",
+                                      "id": "credential_field",
                                       "includeEmpty": true,
                                       "label": "Credential Field",
                                       "name": "credential_field",
@@ -3496,6 +3535,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                       "fields": Array [
                                         Object {
                                           "component": "select",
+                                          "id": "workflow_credentials",
                                           "includeEmpty": true,
                                           "label": "Workflow Credential",
                                           "name": "workflow_credentials",
@@ -3514,6 +3554,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                         },
                                         Object {
                                           "component": "select",
+                                          "id": "credential_field",
                                           "includeEmpty": true,
                                           "label": "Credential Field",
                                           "name": "credential_field",
@@ -3563,6 +3604,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                         "fields": Array [
                                           Object {
                                             "component": "select",
+                                            "id": "workflow_credentials",
                                             "includeEmpty": true,
                                             "label": "Workflow Credential",
                                             "name": "workflow_credentials",
@@ -3581,6 +3623,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                           },
                                           Object {
                                             "component": "select",
+                                            "id": "credential_field",
                                             "includeEmpty": true,
                                             "label": "Credential Field",
                                             "name": "credential_field",
@@ -3629,6 +3672,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                           "fields": Array [
                                             Object {
                                               "component": "select",
+                                              "id": "workflow_credentials",
                                               "includeEmpty": true,
                                               "label": "Workflow Credential",
                                               "name": "workflow_credentials",
@@ -3647,6 +3691,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                             },
                                             Object {
                                               "component": "select",
+                                              "id": "credential_field",
                                               "includeEmpty": true,
                                               "label": "Credential Field",
                                               "name": "credential_field",
@@ -3743,8 +3788,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                               Array [
                                 <SingleField
                                   component="credential-mapper"
-                                  label="test"
-                                  name="test"
+                                  id="credential-mapping-table"
+                                  name="credential-mapping-table"
                                   onCellClick={[Function]}
                                   rows={
                                     Array [
@@ -3791,6 +3836,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                 />,
                                 <SingleField
                                   component="select"
+                                  id="credential_references"
                                   includeEmpty={true}
                                   label="Credential Reference"
                                   name="credential_references"
@@ -3822,6 +3868,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                     Array [
                                       Object {
                                         "component": "select",
+                                        "id": "workflow_credentials",
                                         "includeEmpty": true,
                                         "label": "Workflow Credential",
                                         "name": "workflow_credentials",
@@ -3840,6 +3887,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                       },
                                       Object {
                                         "component": "select",
+                                        "id": "credential_field",
                                         "includeEmpty": true,
                                         "label": "Credential Field",
                                         "name": "credential_field",
@@ -3969,8 +4017,8 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                 "fields": Array [
                                   Object {
                                     "component": "credential-mapper",
-                                    "label": "test",
-                                    "name": "test",
+                                    "id": "credential-mapping-table",
+                                    "name": "credential-mapping-table",
                                     "onCellClick": [Function],
                                     "rows": Array [
                                       Object {
@@ -4015,6 +4063,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                   },
                                   Object {
                                     "component": "select",
+                                    "id": "credential_references",
                                     "includeEmpty": true,
                                     "label": "Credential Reference",
                                     "name": "credential_references",
@@ -4041,6 +4090,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                     "fields": Array [
                                       Object {
                                         "component": "select",
+                                        "id": "workflow_credentials",
                                         "includeEmpty": true,
                                         "label": "Workflow Credential",
                                         "name": "workflow_credentials",
@@ -4059,6 +4109,7 @@ exports[`Workflow Credential Form Component should render mapping credentials to
                                       },
                                       Object {
                                         "component": "select",
+                                        "id": "credential_field",
                                         "includeEmpty": true,
                                         "label": "Credential Field",
                                         "name": "credential_field",