Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): Adds better element ids

Browse Source
This commit is contained in:
johnytiago 2018-05-15 14:21:01 +01:00 committed by Sérgio Ramos
parent 04cb9c32f8
commit 5d46689869
26 changed files with 428 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -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"
>

42
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -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

80
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -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

52
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -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"
>

39
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -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"
>

45
packages/instance-steps/src/affinity/components.js
View File

@ -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}

8
packages/instance-steps/src/affinity/index.js
View File

@ -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>

7
packages/instance-steps/src/cns/index.js
View File

@ -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>

7
packages/instance-steps/src/firewall/index.js
View File

@ -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>

12
packages/instance-steps/src/image/components.js
View File

@ -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>

7
packages/instance-steps/src/image/index.js
View File

@ -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>

9
packages/instance-steps/src/metadata/index.js
View File

@ -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>

10
packages/instance-steps/src/name/index.js
View File

@ -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>

7
packages/instance-steps/src/networks/index.js
View File

@ -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>

7
packages/instance-steps/src/package/index.js
View File

@ -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>

10
packages/instance-steps/src/tags/index.js
View File

@ -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>

2
packages/instance-steps/src/user-script/components.js
View File

@ -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>

7
packages/instance-steps/src/user-script/index.js
View File

@ -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>

12
packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -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

15
packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -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

18
packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
View File

@ -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"
>

6
packages/resource-widgets/src/cns/index.js
View File

@ -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>

14
packages/resource-widgets/src/firewall/index.js
View File

@ -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}>

7
packages/resource-widgets/src/network/index.js
View File

@ -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>

104
packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
View File

@ -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"
>

36
packages/ui-toolkit/src/key-value/index.js
View File

@ -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