From 5d4668986994e1dcf6326d41f0cdc1255e574f14 Mon Sep 17 00:00:00 2001
From: johnytiago <joaosao10@gmail.com>
Date: Tue, 15 May 2018 14:21:01 +0100
Subject: [PATCH] feat(instances): Adds better element ids

---
 .../__snapshots__/metadata.spec.js.snap       |  26 +++--
 .../__tests__/__snapshots__/cns.spec.js.snap  |  42 +++++--
 .../__snapshots__/firewall.spec.js.snap       |  80 ++++++++------
 .../__snapshots__/metadata.spec.js.snap       |  52 ++++++---
 .../__tests__/__snapshots__/tags.spec.js.snap |  39 +++++--
 .../instance-steps/src/affinity/components.js |  45 ++++++--
 packages/instance-steps/src/affinity/index.js |   8 +-
 packages/instance-steps/src/cns/index.js      |   7 +-
 packages/instance-steps/src/firewall/index.js |   7 +-
 .../instance-steps/src/image/components.js    |  12 +-
 packages/instance-steps/src/image/index.js    |   7 +-
 packages/instance-steps/src/metadata/index.js |   9 +-
 packages/instance-steps/src/name/index.js     |  10 +-
 packages/instance-steps/src/networks/index.js |   7 +-
 packages/instance-steps/src/package/index.js  |   7 +-
 packages/instance-steps/src/tags/index.js     |  10 +-
 .../src/user-script/components.js             |   2 +-
 .../instance-steps/src/user-script/index.js   |   7 +-
 .../__tests__/__snapshots__/cns.spec.js.snap  |  12 +-
 .../__snapshots__/firewall.spec.js.snap       |  15 ++-
 .../__snapshots__/network.spec.js.snap        |  18 ++-
 packages/resource-widgets/src/cns/index.js    |   6 +-
 .../resource-widgets/src/firewall/index.js    |  14 ++-
 .../resource-widgets/src/network/index.js     |   7 +-
 .../__snapshots__/key-value.spec.js.snap      | 104 ++++++++++++------
 packages/ui-toolkit/src/key-value/index.js    |  36 +++++-
 26 files changed, 428 insertions(+), 161 deletions(-)

diff --git a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
index 041180aa..1143c5db 100644
--- a/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -900,13 +900,14 @@ exports[`renders <AddForm /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="k"
+                htmlFor={null}
               >
                 Metadata
                  key
@@ -917,7 +918,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="k"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -943,13 +944,14 @@ exports[`renders <AddForm /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="l"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -960,7 +962,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 <textarea
                   className="c23 c24"
                   disabled={false}
-                  id="l"
+                  id={null}
                   name="name"
                   onBlur={undefined}
                 />
@@ -993,6 +995,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -1005,6 +1008,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -1021,6 +1025,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -1978,13 +1983,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="m"
+                htmlFor={null}
               >
                 Metadata
                  key
@@ -1995,7 +2001,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="m"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -2021,13 +2027,14 @@ exports[`renders <EditForm /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="n"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -2038,7 +2045,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 <textarea
                   className="c23 c24"
                   disabled={false}
-                  id="n"
+                  id={null}
                   name="name"
                   onBlur={undefined}
                 />
@@ -2071,6 +2078,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -2083,6 +2091,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -2099,6 +2108,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
index a7db3a7f..d57745f9 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
@@ -748,13 +748,14 @@ exports[`renders <Cns /> without throwing 1`] = `
                     >
                       <div
                         className="c24"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c25 c26"
-                          htmlFor="k"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -764,7 +765,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                           <input
                             className="c28"
                             disabled={false}
-                            id="k"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -783,6 +784,7 @@ exports[`renders <Cns /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
@@ -2470,13 +2472,14 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                     >
                       <div
                         className="c35"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c36 c37"
-                          htmlFor="u"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -2486,7 +2489,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                           <input
                             className="c38"
                             disabled={false}
-                            id="u"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -2505,6 +2508,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
@@ -4038,13 +4042,14 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                     >
                       <div
                         className="c29"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c30 c31"
-                          htmlFor="m"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -4054,7 +4059,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                           <input
                             className="c33"
                             disabled={false}
-                            id="m"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -4073,6 +4078,7 @@ exports[`renders <Cns loadingError /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
@@ -5350,6 +5356,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       <li
                         className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-0"
                       >
                         serbice
                       </li>
@@ -5360,6 +5367,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       <li
                         className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-1"
                       >
                         dssasda
                       </li>
@@ -5370,6 +5378,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                       <li
                         className="c40"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-2"
                       >
                         dsasd
                       </li>
@@ -5392,13 +5401,14 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                     >
                       <div
                         className="c42"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c34 c35"
-                          htmlFor="p"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -5408,7 +5418,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                           <input
                             className="c43"
                             disabled={true}
-                            id="p"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -5427,6 +5437,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
@@ -6765,13 +6776,14 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                     >
                       <div
                         className="c29"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c30 c31"
-                          htmlFor="n"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -6781,7 +6793,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                           <input
                             className="c33"
                             disabled={false}
-                            id="n"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -6800,6 +6812,7 @@ exports[`renders <Cns mutationError /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
@@ -7689,6 +7702,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       <li
                         className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-0"
                       >
                         serbice
                         <svg
@@ -7718,6 +7732,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       <li
                         className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-1"
                       >
                         dssasda
                         <svg
@@ -7747,6 +7762,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                       <li
                         className="c27"
                         fill="rgba(66, 134, 244, 0.1)"
+                        id="cns-tag-2"
                       >
                         dsasd
                         <svg
@@ -7788,13 +7804,14 @@ exports[`renders <Cns services /> without throwing 1`] = `
                     >
                       <div
                         className="c32"
+                        id="cns-service-name-input"
                         name="name"
                         role="group"
                         style={undefined}
                       >
                         <label
                           className="c21 c22"
-                          htmlFor="s"
+                          htmlFor="cns-service-name-input"
                         >
                           Attach to new CNS service name
                         </label>
@@ -7804,7 +7821,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                           <input
                             className="c34"
                             disabled={false}
-                            id="s"
+                            id="cns-service-name-input"
                             onBlur={null}
                             placeholder="Example: mySQLdb"
                           />
@@ -7823,6 +7840,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
                         data-ui-button="true"
                         disabled={undefined}
                         href=""
+                        id="cns-service-name-add-button"
                         type="submit"
                       >
                         Add
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
index 1666bf3f..f3d01ba1 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
@@ -424,6 +424,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -436,7 +437,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="k"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -457,7 +458,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="k"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -1218,6 +1219,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -1230,7 +1232,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="m"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -1251,7 +1253,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="m"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -1281,6 +1283,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-inactive"
                 name="inactive"
                 role="group"
                 style={undefined}
@@ -1293,7 +1296,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="o"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -1314,7 +1317,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="o"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                     >
                         <label
@@ -2072,6 +2075,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -2084,7 +2088,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="q"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -2105,7 +2109,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="q"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -2866,6 +2870,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -2878,7 +2883,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="s"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -2899,7 +2904,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="s"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -2929,6 +2934,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-inactive"
                 name="inactive"
                 role="group"
                 style={undefined}
@@ -2941,7 +2947,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="u"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -2962,7 +2968,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="u"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                     >
                         <label
@@ -4222,6 +4228,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
     >
       <div
         className="c14"
+        id="fw-toggle-firewall"
         name="enabled"
         role="group"
         style={undefined}
@@ -4234,7 +4241,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             checked={false}
             className="c16"
             disabled={false}
-            id="w"
+            id="fw-toggle-firewall"
             onBlur={undefined}
             type="checkbox"
           >
@@ -4255,7 +4262,7 @@ exports[`renders <Firewall loadingError /> without throwing 1`] = `
             checked={false}
             className="c20"
             disabled={false}
-            id="w"
+            id="fw-toggle-firewall"
             onBlur={undefined}
           >
             <label
@@ -5077,6 +5084,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
     >
       <div
         className="c14"
+        id="fw-toggle-firewall"
         name="enabled"
         role="group"
         style={undefined}
@@ -5089,7 +5097,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             checked={false}
             className="c16"
             disabled={false}
-            id="y"
+            id="fw-toggle-firewall"
             onBlur={undefined}
             type="checkbox"
           >
@@ -5110,7 +5118,7 @@ exports[`renders <Firewall mutationError /> without throwing 1`] = `
             checked={false}
             className="c20"
             disabled={false}
-            id="y"
+            id="fw-toggle-firewall"
             onBlur={undefined}
           >
             <label
@@ -5789,6 +5797,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -5801,7 +5810,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="A"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -5822,7 +5831,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="A"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -6185,6 +6194,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -6197,7 +6207,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="C"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -6218,7 +6228,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="C"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -6802,6 +6812,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -6814,7 +6825,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="E"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -6835,7 +6846,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="E"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -6865,6 +6876,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-inactive"
                 name="inactive"
                 role="group"
                 style={undefined}
@@ -6877,7 +6889,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="G"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -6898,7 +6910,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="G"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                     >
                         <label
@@ -7502,6 +7514,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -7514,7 +7527,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="I"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -7535,7 +7548,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="I"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -7898,6 +7911,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -7910,7 +7924,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="K"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -7931,7 +7945,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="K"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -8515,6 +8529,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-firewall"
                 name="enabled"
                 role="group"
                 style={undefined}
@@ -8527,7 +8542,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="M"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -8548,7 +8563,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="M"
+                        id="fw-toggle-firewall"
                         onBlur={undefined}
                     >
                         <label
@@ -8578,6 +8593,7 @@ Array [
         >
             <div
                 className="c9"
+                id="fw-toggle-inactive"
                 name="inactive"
                 role="group"
                 style={undefined}
@@ -8590,7 +8606,7 @@ Array [
                         checked={false}
                         className="c11"
                         disabled={false}
-                        id="O"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                         type="checkbox"
                     >
@@ -8611,7 +8627,7 @@ Array [
                         checked={false}
                         className="c15"
                         disabled={false}
-                        id="O"
+                        id="fw-toggle-inactive"
                         onBlur={undefined}
                     >
                         <label
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
index a1e1105b..a3f7903f 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
@@ -1588,13 +1588,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="name"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="w"
+                    htmlFor={null}
                   >
                     Metadata
                      key
@@ -1605,7 +1606,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     <input
                       className="c8"
                       disabled={false}
-                      id="w"
+                      id={null}
                       onBlur={null}
                     />
                     <div
@@ -1631,13 +1632,14 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="value"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="x"
+                    htmlFor={null}
                   >
                     Metadata
                      value
@@ -1648,7 +1650,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     <textarea
                       className="c37 c38"
                       disabled={false}
-                      id="x"
+                      id={null}
                       name="name"
                       onBlur={undefined}
                     />
@@ -1681,6 +1683,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={false}
                     href=""
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -1693,6 +1696,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={true}
                     href=""
+                    id={null}
                     type="submit"
                   >
                     <span>
@@ -1709,6 +1713,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
                     disabled={false}
                     href=""
                     icon={true}
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4140,13 +4145,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="name"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="B"
+                    htmlFor={null}
                   >
                     Metadata
                      key
@@ -4157,7 +4163,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <input
                       className="c8"
                       disabled={false}
-                      id="B"
+                      id={null}
                       onBlur={null}
                     />
                     <div
@@ -4183,13 +4189,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="value"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="C"
+                    htmlFor={null}
                   >
                     Metadata
                      value
@@ -4200,7 +4207,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <textarea
                       className="c37 c38"
                       disabled={false}
-                      id="C"
+                      id={null}
                       name="name"
                       onBlur={undefined}
                     />
@@ -4233,6 +4240,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={false}
                     href=""
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4245,6 +4253,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={true}
                     href=""
+                    id={null}
                     type="submit"
                   >
                     <span>
@@ -4261,6 +4270,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     disabled={false}
                     href=""
                     icon={true}
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4365,13 +4375,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="name"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="D"
+                    htmlFor={null}
                   >
                     Metadata
                      key
@@ -4382,7 +4393,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <input
                       className="c8"
                       disabled={false}
-                      id="D"
+                      id={null}
                       onBlur={null}
                     />
                     <div
@@ -4408,13 +4419,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="value"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="E"
+                    htmlFor={null}
                   >
                     Metadata
                      value
@@ -4425,7 +4437,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <textarea
                       className="c37 c38"
                       disabled={false}
-                      id="E"
+                      id={null}
                       name="name"
                       onBlur={undefined}
                     />
@@ -4458,6 +4470,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={false}
                     href=""
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4470,6 +4483,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={true}
                     href=""
+                    id={null}
                     type="submit"
                   >
                     <span>
@@ -4486,6 +4500,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     disabled={false}
                     href=""
                     icon={true}
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4590,13 +4605,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="name"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="F"
+                    htmlFor={null}
                   >
                     Metadata
                      key
@@ -4607,7 +4623,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <input
                       className="c8"
                       disabled={false}
-                      id="F"
+                      id={null}
                       onBlur={null}
                     />
                     <div
@@ -4633,13 +4649,14 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
               >
                 <div
                   className="c35"
+                  id={null}
                   name="value"
                   role="group"
                   style={undefined}
                 >
                   <label
                     className="c5 c6"
-                    htmlFor="G"
+                    htmlFor={null}
                   >
                     Metadata
                      value
@@ -4650,7 +4667,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     <textarea
                       className="c37 c38"
                       disabled={false}
-                      id="G"
+                      id={null}
                       name="name"
                       onBlur={undefined}
                     />
@@ -4683,6 +4700,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={false}
                     href=""
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
@@ -4695,6 +4713,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     data-ui-button="true"
                     disabled={true}
                     href=""
+                    id={null}
                     type="submit"
                   >
                     <span>
@@ -4711,6 +4730,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
                     disabled={false}
                     href=""
                     icon={true}
+                    id={null}
                     onClick={[Function]}
                     type="button"
                   >
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index b9230356..83f7196d 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -1549,13 +1549,14 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
             >
               <div
                 className="c32"
+                id={null}
                 name="name"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="w"
+                  htmlFor={null}
                 >
                   Tag
                    
@@ -1567,7 +1568,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="w"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -1585,13 +1586,14 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
             >
               <div
                 className="c32"
+                id={null}
                 name="value"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="x"
+                  htmlFor={null}
                 >
                   Tag
                    value
@@ -1602,7 +1604,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="x"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -1630,6 +1632,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={false}
                   href=""
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
@@ -1642,6 +1645,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={true}
                   href=""
+                  id={null}
                   type="submit"
                 >
                   <span>
@@ -1658,6 +1662,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
                   disabled={false}
                   href=""
                   icon={true}
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
@@ -3321,13 +3326,14 @@ exports[`renders <Tags editing /> without throwing 1`] = `
             >
               <div
                 className="c33"
+                id={null}
                 name="name"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="B"
+                  htmlFor={null}
                 >
                   Tag
                    
@@ -3339,7 +3345,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="B"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -3357,13 +3363,14 @@ exports[`renders <Tags editing /> without throwing 1`] = `
             >
               <div
                 className="c33"
+                id={null}
                 name="value"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="C"
+                  htmlFor={null}
                 >
                   Tag
                    value
@@ -3374,7 +3381,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="C"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -3402,6 +3409,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={false}
                   href=""
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
@@ -3414,6 +3422,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={true}
                   href=""
+                  id={null}
                   type="submit"
                 >
                   <span>
@@ -3430,6 +3439,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                   disabled={false}
                   href=""
                   icon={true}
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
@@ -4727,13 +4737,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
             >
               <div
                 className="c33"
+                id={null}
                 name="name"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="J"
+                  htmlFor={null}
                 >
                   Tag
                    
@@ -4745,7 +4756,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="J"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -4763,13 +4774,14 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
             >
               <div
                 className="c33"
+                id={null}
                 name="value"
                 role="group"
                 style={undefined}
               >
                 <label
                   className="c5 c6"
-                  htmlFor="K"
+                  htmlFor={null}
                 >
                   Tag
                    value
@@ -4780,7 +4792,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   <input
                     className="c8"
                     disabled={false}
-                    id="K"
+                    id={null}
                     onBlur={null}
                   />
                   <div
@@ -4808,6 +4820,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={false}
                   href=""
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
@@ -4820,6 +4833,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   data-ui-button="true"
                   disabled={true}
                   href=""
+                  id={null}
                   type="submit"
                 >
                   <span>
@@ -4836,6 +4850,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                   disabled={false}
                   href=""
                   icon={true}
+                  id={null}
                   onClick={[Function]}
                   type="button"
                 >
diff --git a/packages/instance-steps/src/affinity/components.js b/packages/instance-steps/src/affinity/components.js
index 981b1c9b..75aec815 100644
--- a/packages/instance-steps/src/affinity/components.js
+++ b/packages/instance-steps/src/affinity/components.js
@@ -34,9 +34,19 @@ const Input = styled(BaseInput)`
 
 const Values = touched => (
   <Margin right={1}>
-    <Select style={style} touched={touched} width={remcalc(130)} embedded>
-      <option value="equalling">equalling</option>
-      <option value="starting">starting with</option>
+    <Select
+      id={'affinity-rule-3-select'}
+      style={style}
+      touched={touched}
+      width={remcalc(130)}
+      embedded
+    >
+      <option id={'affinity-rule-3-equalling'} value="equalling">
+        equalling
+      </option>
+      <option id={'affinity-rule-3-starting'} value="starting">
+        starting with
+      </option>
     </Select>
   </Margin>
 );
@@ -54,9 +64,14 @@ export const Rule = ({ valid, ...rule }) => (
             touched={rule.conditional}
             width={remcalc(86)}
             embedded
+            id={'affinity-rule-0-select'}
           >
-            <option value="should">should</option>
-            <option value="must">must</option>
+            <option id={'affinity-rule-0-should'} value="should">
+              should
+            </option>
+            <option id={'affinity-rule-0-must'} value="must">
+              must
+            </option>
           </Select>
         </FormGroup>
       </Margin>
@@ -70,9 +85,14 @@ export const Rule = ({ valid, ...rule }) => (
             touched={rule.placement}
             width={remcalc(100)}
             embedded
+            id={'affinity-rule-1-select'}
           >
-            <option value="same">the same</option>
-            <option value="different">a different</option>
+            <option id={'affinity-rule-1-same'} value="same">
+              the same
+            </option>
+            <option id={'affinity-rule-1-different'} value="different">
+              a different
+            </option>
           </Select>
         </FormGroup>
       </Margin>
@@ -82,21 +102,26 @@ export const Rule = ({ valid, ...rule }) => (
       <Margin horizontal={1}>
         <FormGroup name="type" field={Field}>
           <Select
+            id={'affinity-rule-2-select'}
             style={style}
             touched={rule.type}
             width={remcalc(135)}
             embedded
             left
           >
-            <option value="name">instance name</option>
-            <option value="tag">tag</option>
+            <option id={'affinity-rule-2-name'} value="name">
+              instance name
+            </option>
+            <option id={'affinity-rule-2-tag'} value="tag">
+              tag
+            </option>
           </Select>
         </FormGroup>
       </Margin>
       <FormGroup name="pattern" field={Field}>
         {Values(rule.pattern)}
       </FormGroup>
-      <FormGroup name="value" field={Field}>
+      <FormGroup id={'affinity-rule-input'} name="value" field={Field}>
         <Input
           onBlur={null}
           style={style}
diff --git a/packages/instance-steps/src/affinity/index.js b/packages/instance-steps/src/affinity/index.js
index dcec00a2..1ecaa327 100644
--- a/packages/instance-steps/src/affinity/index.js
+++ b/packages/instance-steps/src/affinity/index.js
@@ -150,6 +150,7 @@ const Affinity = ({
                     noRemove
                     borderless
                     headless
+                    id="affinity"
                     onCancel={() => handleChangeAddOpen(false)}
                   />
                 </Margin>
@@ -169,7 +170,12 @@ const Affinity = ({
           ) : null}
           {!addOpen && exitingRule ? (
             <Margin top={5}>
-              <Button type="button" component={Link} to={next}>
+              <Button
+                id={'next-button-affinity'}
+                type="button"
+                component={Link}
+                to={next}
+              >
                 Next
               </Button>
             </Margin>
diff --git a/packages/instance-steps/src/cns/index.js b/packages/instance-steps/src/cns/index.js
index 3e204890..757e4fd7 100644
--- a/packages/instance-steps/src/cns/index.js
+++ b/packages/instance-steps/src/cns/index.js
@@ -83,7 +83,12 @@ const CnsContainer = ({
             </ReduxForm>
           </Cns>
           <Margin top={5}>
-            <Button type="button" component={Link} to={next}>
+            <Button
+              id={'next-button-cns'}
+              type="button"
+              component={Link}
+              to={next}
+            >
               Next
             </Button>
           </Margin>
diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 661da6d5..330c53d9 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@@ -141,7 +141,12 @@ const Firewall = ({
             </Margin>
           ) : null}
           <Margin top={5}>
-            <Button type="button" component={Link} to={next}>
+            <Button
+              id={'next-button-firewall'}
+              type="button"
+              component={Link}
+              to={next}
+            >
               Next
             </Button>
           </Margin>
diff --git a/packages/instance-steps/src/image/components.js b/packages/instance-steps/src/image/components.js
index 3daca705..8d3d1881 100644
--- a/packages/instance-steps/src/image/components.js
+++ b/packages/instance-steps/src/image/components.js
@@ -111,12 +111,20 @@ export const ImageType = ({ setImageType, vms }) => (
   <Margin bottom={3}>
     <SectionList>
       <SectionListItem>
-        <SectionListAnchor active={vms} onClick={() => setImageType(true)}>
+        <SectionListAnchor
+          id={'image-type-hwvm'}
+          active={vms}
+          onClick={() => setImageType(true)}
+        >
           Hardware virtual machine
         </SectionListAnchor>
       </SectionListItem>
       <SectionListItem>
-        <SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
+        <SectionListAnchor
+          id={'image-type-ic'}
+          active={!vms}
+          onClick={() => setImageType(false)}
+        >
           Infrastructure container
         </SectionListAnchor>
       </SectionListItem>
diff --git a/packages/instance-steps/src/image/index.js b/packages/instance-steps/src/image/index.js
index 8ca449ad..d8bbd2c9 100644
--- a/packages/instance-steps/src/image/index.js
+++ b/packages/instance-steps/src/image/index.js
@@ -79,7 +79,12 @@ const Image = ({
                       onSelectLatest={handleSelectLatest}
                     />
                     <Margin top="2">
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-image'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </Margin>
diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js
index a870944b..2f1f5613 100644
--- a/packages/instance-steps/src/metadata/index.js
+++ b/packages/instance-steps/src/metadata/index.js
@@ -89,6 +89,7 @@ const Metadata = ({
                     method="add"
                     input="textarea"
                     type="metadata"
+                    id="metadata"
                     onCancel={() => handleChangeAddOpen(false)}
                     editor={Editor}
                     expanded
@@ -101,6 +102,7 @@ const Metadata = ({
                     <FlexItem>
                       <Margin right={1}>
                         <Button
+                          id={'button-add-metadata'}
                           type="button"
                           onClick={() => handleChangeAddOpen(true)}
                           secondary
@@ -110,7 +112,12 @@ const Metadata = ({
                       </Margin>
                     </FlexItem>
                     <FlexItem>
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-metadata'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </FlexItem>
diff --git a/packages/instance-steps/src/name/index.js b/packages/instance-steps/src/name/index.js
index f787dd6d..bcb576c8 100644
--- a/packages/instance-steps/src/name/index.js
+++ b/packages/instance-steps/src/name/index.js
@@ -84,7 +84,7 @@ const Name = ({
           >
             {props => (
               <Form onSubmit={null}>
-                <FormGroup name="name" fluid field={Field}>
+                <FormGroup id={'input-name'} name="name" fluid field={Field}>
                   <FormLabel>Instance name</FormLabel>
                   <Margin top="0.5">
                     <Flex>
@@ -94,6 +94,7 @@ const Name = ({
                       <FlexItem>
                         <Margin left="1" inline>
                           <Button
+                            id={'randomize-button-name'}
                             type="button"
                             loading={randomizing}
                             onClick={handleRandomize}
@@ -113,7 +114,12 @@ const Name = ({
                   <FormMeta />
                 </FormGroup>
                 <Margin top="5">
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-name'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </Margin>
diff --git a/packages/instance-steps/src/networks/index.js b/packages/instance-steps/src/networks/index.js
index 9003b6ca..6fee14a0 100644
--- a/packages/instance-steps/src/networks/index.js
+++ b/packages/instance-steps/src/networks/index.js
@@ -113,7 +113,12 @@ const Networks = ({
                     )}
                   </Form>
                   <Margin top="5">
-                    <Button type="button" component={Link} to={next}>
+                    <Button
+                      id={'next-button-networks'}
+                      type="button"
+                      component={Link}
+                      to={next}
+                    >
                       Next
                     </Button>
                   </Margin>
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index e4f84481..52b17b2d 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -105,7 +105,12 @@ const PackageComponent = ({
                       ))}
                     </Packages>
                     <Margin top="4">
-                      <Button type="button" component={Link} to={next}>
+                      <Button
+                        id={'next-button-packages'}
+                        type="button"
+                        component={Link}
+                        to={next}
+                      >
                         Next
                       </Button>
                     </Margin>
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index db4527c8..6476ab5c 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -96,6 +96,7 @@ const TagsContainer = ({
                     name={name}
                     value={value}
                     onRemoveClick={() => handleRemoveTag(index)}
+                    id={'tag-' + index}
                   />
                 ))}
               </TagList>
@@ -119,6 +120,7 @@ const TagsContainer = ({
                         method="add"
                         input="input"
                         type="tag"
+                        id="tag"
                         expanded
                         borderless
                         onCancel={() => handleChangeAddOpen(false)}
@@ -134,6 +136,7 @@ const TagsContainer = ({
                 <FlexItem>
                   <Margin right={1}>
                     <Button
+                      id={'add-tag-button'}
                       type="button"
                       onClick={() => handleChangeAddOpen(true)}
                       secondary
@@ -143,7 +146,12 @@ const TagsContainer = ({
                   </Margin>
                 </FlexItem>
                 <FlexItem>
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-tags'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </FlexItem>
diff --git a/packages/instance-steps/src/user-script/components.js b/packages/instance-steps/src/user-script/components.js
index c4536c79..1fd1bdd4 100644
--- a/packages/instance-steps/src/user-script/components.js
+++ b/packages/instance-steps/src/user-script/components.js
@@ -17,7 +17,7 @@ class EditorField extends PureComponent {
 
 export default () => (
   <form name="user-script">
-    <FormGroup name="value" field={Field} fluid>
+    <FormGroup id="userscript-editor" name="value" field={Field} fluid>
       <Field name="value" component={EditorField} />
     </FormGroup>
   </form>
diff --git a/packages/instance-steps/src/user-script/index.js b/packages/instance-steps/src/user-script/index.js
index 627c42fb..7cd7abda 100644
--- a/packages/instance-steps/src/user-script/index.js
+++ b/packages/instance-steps/src/user-script/index.js
@@ -54,7 +54,12 @@ const UserScript = ({
               <Fragment>
                 <UserScriptForm {...props} />
                 <Margin top={5}>
-                  <Button type="button" component={Link} to={next}>
+                  <Button
+                    id={'next-button-userscript'}
+                    type="button"
+                    component={Link}
+                    to={next}
+                  >
                     Next
                   </Button>
                 </Margin>
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
index b7da6300..aed08500 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
@@ -278,13 +278,14 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       >
         <div
           className="c3"
+          id="cns-service-name-input"
           name="name"
           role="group"
           style={undefined}
         >
           <label
             className="c4 c5"
-            htmlFor="k"
+            htmlFor="cns-service-name-input"
           >
             Attach to new CNS service name
           </label>
@@ -294,7 +295,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
             <input
               className="c7"
               disabled={false}
-              id="k"
+              id="cns-service-name-input"
               onBlur={null}
               placeholder="Example: mySQLdb"
             />
@@ -313,6 +314,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
           data-ui-button="true"
           disabled={undefined}
           href=""
+          id="cns-service-name-add-button"
           type="submit"
         >
           Add
@@ -601,13 +603,14 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       >
         <div
           className="c3"
+          id="cns-service-name-input"
           name="name"
           role="group"
           style={undefined}
         >
           <label
             className="c4 c5"
-            htmlFor="l"
+            htmlFor="cns-service-name-input"
           >
             Attach to new CNS service name
           </label>
@@ -617,7 +620,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
             <input
               className="c7"
               disabled={false}
-              id="l"
+              id="cns-service-name-input"
               onBlur={null}
               placeholder="Example: mySQLdb"
             />
@@ -636,6 +639,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
           data-ui-button="true"
           disabled={undefined}
           href=""
+          id="cns-service-name-add-button"
           type="submit"
         >
           Add
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index 73381ff7..d24beb7f 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -5089,6 +5089,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-firewall"
     name="enabled"
     role="group"
     style={undefined}
@@ -5101,7 +5102,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={false}
-        id="k"
+        id="fw-toggle-firewall"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5122,7 +5123,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={false}
-        id="k"
+        id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
@@ -5343,6 +5344,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-firewall"
     name="enabled"
     role="group"
     style={undefined}
@@ -5355,7 +5357,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={true}
-        id="m"
+        id="fw-toggle-firewall"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5376,7 +5378,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={true}
-        id="m"
+        id="fw-toggle-firewall"
         onBlur={undefined}
       >
         <label
@@ -5596,6 +5598,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
 >
   <div
     className="c1"
+    id="fw-toggle-inactive"
     name="inactive"
     role="group"
     style={undefined}
@@ -5608,7 +5611,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
         checked={false}
         className="c3"
         disabled={false}
-        id="o"
+        id="fw-toggle-inactive"
         onBlur={undefined}
         type="checkbox"
       >
@@ -5629,7 +5632,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
         checked={false}
         className="c7"
         disabled={false}
-        id="o"
+        id="fw-toggle-inactive"
         onBlur={undefined}
       >
         <label
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index 0fae32ec..18dbf850 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -479,6 +479,7 @@ exports[`renders <Network /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-"
               name={undefined}
               role="group"
               style={undefined}
@@ -490,7 +491,7 @@ exports[`renders <Network /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="l"
+                  id="network-checkbox-"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -1389,6 +1390,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -1400,7 +1402,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="n"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -2312,6 +2314,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -2323,7 +2326,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="p"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -3285,6 +3288,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -3296,7 +3300,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="t"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -4533,6 +4537,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -4544,7 +4549,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="v"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
@@ -5744,6 +5749,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
           >
             <div
               className="c8"
+              id="network-checkbox-name"
               name="1"
               role="group"
               style={undefined}
@@ -5755,7 +5761,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
                   checked={false}
                   className="c10"
                   disabled={false}
-                  id="r"
+                  id="network-checkbox-name"
                   onBlur={undefined}
                   type="checkbox"
                 >
diff --git a/packages/resource-widgets/src/cns/index.js b/packages/resource-widgets/src/cns/index.js
index d48950bd..9cd29b8f 100644
--- a/packages/resource-widgets/src/cns/index.js
+++ b/packages/resource-widgets/src/cns/index.js
@@ -103,7 +103,7 @@ export const AddServiceForm = ({
     <Flex wrap alignCenter={invalid} alignEnd={!invalid}>
       <FlexItem>
         <Flex collumn>
-          <FormGroup name="name" field={Field}>
+          <FormGroup id="cns-service-name-input" name="name" field={Field}>
             <FormLabel>Attach to new CNS service name</FormLabel>
             <Margin top={0.5}>
               <Input
@@ -120,6 +120,7 @@ export const AddServiceForm = ({
       <FlexItem>
         <Margin left={2}>
           <Button
+            id="cns-service-name-add-button"
             type="submit"
             disabled={submitting}
             loading={submitting}
@@ -204,7 +205,7 @@ const CnsHostnames = ({
         <FormLabel>Existing CNS service name(s)</FormLabel>
         <Margin top={1}>
           <TagList>
-            {services.map(value => (
+            {services.map((value, index) => (
               <Margin right={1} bottom={1}>
                 <TagItem
                   active
@@ -213,6 +214,7 @@ const CnsHostnames = ({
                   onRemoveClick={
                     onRemoveService && (() => onRemoveService(value))
                   }
+                  id={'cns-tag-' + index}
                 >
                   {value}
                 </TagItem>
diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js
index fc573d8f..a58d4819 100644
--- a/packages/resource-widgets/src/firewall/index.js
+++ b/packages/resource-widgets/src/firewall/index.js
@@ -177,7 +177,12 @@ export const ToggleFirewallForm = ({
 
   return (
     <Form onChange={onChange}>
-      <FormGroup type="checkbox" name="enabled" field={Field}>
+      <FormGroup
+        id={'fw-toggle-firewall'}
+        type="checkbox"
+        name="enabled"
+        field={Field}
+      >
         <Checkbox disabled={submitting}>
           <FormLabel noMargin actionable>
             <Margin left={2} right={2}>
@@ -192,7 +197,12 @@ export const ToggleFirewallForm = ({
 
 export const ToggleInactiveForm = () => (
   <Form>
-    <FormGroup type="checkbox" name="inactive" field={Field}>
+    <FormGroup
+      id={'fw-toggle-inactive'}
+      type="checkbox"
+      name="inactive"
+      field={Field}
+    >
       <Checkbox>
         <FormLabel noMargin actionable>
           <Margin left={2} right={2}>
diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js
index 984befb9..4405035a 100644
--- a/packages/resource-widgets/src/network/index.js
+++ b/packages/resource-widgets/src/network/index.js
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
 import { isNot } from 'styled-is';
+import paramCase from 'param-case';
 
 import {
   H4,
@@ -121,7 +122,11 @@ export const Expanded = ({
           <CardHeader secondary={selected}>
             {readOnly ? null : (
               <CardHeaderBox>
-                <FormGroup name={id} field={Field}>
+                <FormGroup
+                  id={'network-checkbox-' + paramCase(name)}
+                  name={id}
+                  field={Field}
+                >
                   <Checkbox noMargin checked={selected} />
                 </FormGroup>
               </CardHeaderBox>
diff --git a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index 6d420b5c..c487e1c4 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -857,13 +857,14 @@ exports[`renders <KeyValue /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="k"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -875,7 +876,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="k"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -893,13 +894,14 @@ exports[`renders <KeyValue /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="l"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -910,7 +912,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="l"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -938,6 +940,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -950,6 +953,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -966,6 +970,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -2064,13 +2069,14 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="m"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -2082,7 +2088,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="m"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -2100,13 +2106,14 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="n"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -2117,7 +2124,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="n"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -2145,6 +2152,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -2157,6 +2165,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -2173,6 +2182,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -3109,13 +3119,14 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="o"
+                htmlFor={null}
               >
                 Metadata
                  key
@@ -3126,7 +3137,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="o"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -3152,13 +3163,14 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="p"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -3169,7 +3181,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 <textarea
                   className="c23 c24"
                   disabled={false}
-                  id="p"
+                  id={null}
                   name="name"
                   onBlur={undefined}
                 />
@@ -3202,6 +3214,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -3214,6 +3227,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -3230,6 +3244,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -4123,13 +4138,14 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="s"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -4141,7 +4157,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="s"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -4159,13 +4175,14 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="t"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -4176,7 +4193,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="t"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -4204,6 +4221,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -4216,6 +4234,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -4232,6 +4251,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -5127,13 +5147,14 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="u"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -5145,7 +5166,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="u"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -5163,13 +5184,14 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="v"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -5180,7 +5202,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="v"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -5208,6 +5230,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -5220,6 +5243,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -5236,6 +5260,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -6192,13 +6217,14 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="w"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -6210,7 +6236,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="w"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -6228,13 +6254,14 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="x"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -6245,7 +6272,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="x"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -6273,6 +6300,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -6285,6 +6313,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -6301,6 +6330,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -7305,13 +7335,14 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="y"
+                htmlFor={null}
               >
                 Metadata
                  
@@ -7323,7 +7354,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={true}
-                  id="y"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -7341,13 +7372,14 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="z"
+                htmlFor={null}
               >
                 Metadata
                  value
@@ -7358,7 +7390,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={true}
-                  id="z"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -7386,6 +7418,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -7398,6 +7431,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <div
@@ -7441,6 +7475,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
                 disabled={true}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -8334,13 +8369,14 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="name"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="q"
+                htmlFor={null}
               >
                 Tag
                  
@@ -8352,7 +8388,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="q"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -8370,13 +8406,14 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
           >
             <div
               className="c16"
+              id={null}
               name="value"
               role="group"
               style={undefined}
             >
               <label
                 className="c17 c18"
-                htmlFor="r"
+                htmlFor={null}
               >
                 Tag
                  value
@@ -8387,7 +8424,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 <input
                   className="c20"
                   disabled={false}
-                  id="r"
+                  id={null}
                   onBlur={null}
                 />
                 <div
@@ -8415,6 +8452,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={false}
                 href=""
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
@@ -8427,6 +8465,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 data-ui-button="true"
                 disabled={true}
                 href=""
+                id={null}
                 type="submit"
               >
                 <span>
@@ -8443,6 +8482,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
                 disabled={false}
                 href=""
                 icon={true}
+                id={null}
                 onClick={[Function]}
                 type="button"
               >
diff --git a/packages/ui-toolkit/src/key-value/index.js b/packages/ui-toolkit/src/key-value/index.js
index 4b541bd6..f6f6371f 100644
--- a/packages/ui-toolkit/src/key-value/index.js
+++ b/packages/ui-toolkit/src/key-value/index.js
@@ -74,6 +74,7 @@ const Bold = styled.span`
 `;
 
 const TextareaKeyValue = ({
+  id = null,
   type,
   submitting,
   onlyName,
@@ -84,7 +85,12 @@ const TextareaKeyValue = ({
     {!onlyValue ? (
       <Row>
         <Col xs={12}>
-          <FormGroup name="name" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-key-' + id : null}
+            name="name"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} key</FormLabel>
             <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
@@ -102,7 +108,12 @@ const TextareaKeyValue = ({
     {!onlyName ? (
       <Row>
         <Col xs={12}>
-          <FormGroup name="value" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-value-' + id : null}
+            name="value"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} value</FormLabel>
             <Margin top={0.5}>
               <Textarea
@@ -127,6 +138,7 @@ const TextareaKeyValue = ({
 );
 
 const InputKeyValue = ({
+  id = null,
   type,
   submitting,
   typeLabel,
@@ -136,7 +148,12 @@ const InputKeyValue = ({
   <Flex wrap justifyStart contentStretch>
     {!onlyValue ? (
       <FlexItem basis="auto">
-        <FormGroup name="name" field={Field} fluid>
+        <FormGroup
+          id={id ? 'kv-input-name-' + id : null}
+          name="name"
+          field={Field}
+          fluid
+        >
           <FormLabel>
             {titleCase(type)} {typeLabel}
           </FormLabel>
@@ -154,7 +171,12 @@ const InputKeyValue = ({
     {!onlyName ? (
       <Fragment>
         <FlexItem basis="auto">
-          <FormGroup name="value" field={Field} fluid>
+          <FormGroup
+            id={id ? 'kv-input-value-' + id : null}
+            name="value"
+            field={Field}
+            fluid
+          >
             <FormLabel>{titleCase(type)} value</FormLabel>
             <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
@@ -172,6 +194,7 @@ const InputKeyValue = ({
 );
 
 export const KeyValue = ({
+  id = null,
   disabled = false,
   input = 'input',
   type = 'metadata',
@@ -266,6 +289,7 @@ export const KeyValue = ({
             ) : null}
             {input === 'input' ? (
               <InputKeyValue
+                id={id}
                 onBlur={null}
                 type={type}
                 typeLabel={typeLabel}
@@ -276,6 +300,7 @@ export const KeyValue = ({
             ) : null}
             {input === 'textarea' ? (
               <TextareaKeyValue
+                id={id}
                 type={type}
                 submitting={disabled || submitting}
                 onlyName={onlyName}
@@ -290,6 +315,7 @@ export const KeyValue = ({
               <Row between="xs" middle="xs">
                 <Col xs={method === 'add' ? 12 : 7}>
                   <MarginalButton
+                    id={id ? 'kv-cancel-button-' + id : null}
                     type="button"
                     onClick={onCancel}
                     disabled={disabled || submitting}
@@ -298,6 +324,7 @@ export const KeyValue = ({
                     <span>Cancel</span>
                   </MarginalButton>
                   <Button
+                    id={id ? 'kv-submit-button-' + id : null}
                     type="submit"
                     disabled={pristine || invalid}
                     loading={submitting && !removing}
@@ -316,6 +343,7 @@ export const KeyValue = ({
                       right
                       icon
                       error
+                      id={id ? 'kv-remove-button-' + id : null}
                     >
                       <Margin right={2}>
                         <DeleteIcon