feat(my-joy-beta): create instance cns

fixes #987

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/cns.js.snap

@@ -0,0 +1,904 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <AddServiceForm /> without throwing 1`] = `
+.c4 {
+  margin-left: 0.5rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7 + button {
+  margin-left: 0.375rem;
+}
+
+.c6 {
+  display: inline-block;
+}
+
+.c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c5:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c3 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c3::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:invalid {
+  box-shadow: none;
+}
+
+.c3:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c3:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+      name="name"
+      role="group"
+      style={undefined}
+    >
+      <label
+        className="c2"
+        htmlFor="Y"
+      >
+        Attach to new CNS service name
+      </label>
+      <input
+        className="c3"
+        disabled={false}
+        id="Y"
+        placeholder="Example: mySQLdb"
+      />
+    </div>
+    <div
+      className="c4"
+    >
+      <button
+        className="c5 c6 c7"
+        disabled={undefined}
+        href=""
+        type="submit"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
+.c4 {
+  margin-left: 0.5rem;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-end;
+  -webkit-box-align: flex-end;
+  -ms-flex-align: flex-end;
+  align-items: flex-end;
+}
+
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+}
+
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c7 + button {
+  margin-left: 0.375rem;
+}
+
+.c6 {
+  display: inline-block;
+}
+
+.c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 3rem;
+  height: 3rem;
+  min-width: 7.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  color: rgb(255,255,255);
+  -webkit-text-fill-color: currentcolor;
+  background-image: none;
+  background-color: rgb(59,70,204);
+  border-radius: 0.25rem;
+  border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: rgb(59,70,204);
+  border-color: rgb(45,56,132);
+}
+
+.c5:hover {
+  background-color: rgb(72,83,217);
+  border: solid 0.0625rem rgb(45,56,132);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: rgb(45,56,132);
+  border-color: rgb(45,56,132);
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c5:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c1 {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c3 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgba(73,73,73,1);
+  max-width: 18.75rem;
+  text-overflow: ellipsis;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c3::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:invalid {
+  box-shadow: none;
+}
+
+.c3:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c3:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c3:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  margin-right: 0.75rem;
+  font-weight: bold;
+  white-space: pre;
+  font-size: 0.8125rem;
+}
+
+<form
+  onSubmit={undefined}
+>
+  <div
+    className="c0"
+  >
+    <div
+      className="c1"
+      name="name"
+      role="group"
+      style={undefined}
+    >
+      <label
+        className="c2"
+        htmlFor="Z"
+      >
+        Attach to new CNS service name
+      </label>
+      <input
+        className="c3"
+        disabled={false}
+        id="Z"
+        placeholder="Example: mySQLdb"
+      />
+    </div>
+    <div
+      className="c4"
+    >
+      <button
+        className="c5 c6 c7"
+        disabled={true}
+        href=""
+        type="submit"
+      >
+        Add
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders <Header/> without throwing 1`] = `
+Array [
+  .c0 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c0 + p,
+.c0 + small,
+.c0 + h1,
+.c0 + h2,
+.c0 + label,
+.c0 + h3,
+.c0 + h4,
+.c0 + h5,
+.c0 + div,
+.c0 + span {
+  margin-top: 1.5rem;
+}
+
+<h3
+    className="c0"
+>
+    Hostnames
+</h3>,
+  .c0 {
+  padding-bottom: 0.5rem;
+}
+
+.c1 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  padding-bottom: 2.25rem;
+}
+
+<div
+    className="c0"
+>
+    <p
+        className="c1"
+    >
+        Default hostnames are automatically generated from both the instance name and any attached networks.
+    </p>
+</div>,
+]
+`;
+
+exports[`renders <Hostname /> without throwing 1`] = `null`;
+
+exports[`renders <Hostname values /> without throwing 1`] = `
+.c0 {
+  margin-bottom: 2rem;
+}
+
+.c5 {
+  margin-right: 0.25rem;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+}
+
+.c4 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+}
+
+.c3 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.c6 {
+  font-size: 80%;
+  color: rgba(73,73,73,1);
+  line-height: 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.c7 {
+  box-sizing: border-box;
+  width: 18.75rem;
+  height: 3rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: rgb(255,255,255);
+  border: 0.0625rem solid rgb(216,216,216);
+  color: rgb(250,250,250);
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  font-family: "Roboto Mono";
+  width: 100%;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:invalid {
+  box-shadow: none;
+}
+
+.c7::-webkit-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7::-moz-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7:-ms-input-placeholder {
+  color: rgb(216,216,216);
+}
+
+.c7:disabled {
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,0.5);
+}
+
+.c7:disabled {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled::-webkit-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled::-moz-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:disabled:-ms-input-placeholder {
+  color: rgba(73,73,73,1);
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
+.c2 {
+  padding-right: 0.75rem;
+  margin-right: 0.75rem;
+  border-right: 0.0625rem solid rgb(216,216,216);
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <small
+      className="c2 c3"
+    >
+      Instance name
+       
+      hostname
+    </small>
+    <div
+      className="c4"
+    >
+      <div
+        className="c5"
+      >
+        <svg
+          className=""
+          height="16"
+          style={
+            Object {
+              "transform": "rotate(0deg)",
+            }
+          }
+          viewBox="0 0 12 16"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
+            fill="rgba(73, 73, 73, 1)"
+          />
+        </svg>
+      </div>
+    </div>
+    <div
+      className="c4"
+    >
+      <small
+        className="c6"
+      >
+        Private
+      </small>
+    </div>
+  </div>
+  <input
+    className="c7"
+    disabled={true}
+    id=""
+    value="111"
+  />
+  <input
+    className="c7"
+    disabled={true}
+    id=""
+    value="111"
+  />
+</div>
+`;
+
+exports[`renders <HostnamesHeader /> without throwing 1`] = `
+.c0 {
+  margin-top: 2rem;
+}
+
+.c2 {
+  padding-bottom: 1rem;
+}
+
+.c3 {
+  color: rgba(73,73,73,1);
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.c3 + p,
+.c3 + small,
+.c3 + h1,
+.c3 + h2,
+.c3 + label,
+.c3 + h3,
+.c3 + h4,
+.c3 + h5,
+.c3 + div,
+.c3 + span {
+  padding-bottom: 2.25rem;
+}
+
+.c1 {
+  color: rgba(73,73,73,1);
+  font-weight: normal;
+  line-height: 1.625rem;
+  font-size: 1.3125rem;
+  margin: 0;
+}
+
+.c1 + p,
+.c1 + small,
+.c1 + h1,
+.c1 + h2,
+.c1 + label,
+.c1 + h3,
+.c1 + h4,
+.c1 + h5,
+.c1 + div,
+.c1 + span {
+  margin-top: 1.5rem;
+}
+
+<div
+  className="c0"
+>
+  <h3
+    className="c1"
+  >
+    CNS service hostnames
+  </h3>
+  <div
+    className="c2"
+  >
+    <p
+      className="c3"
+    >
+      CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.
+    </p>
+  </div>
+</div>
+`;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap

@@ -1,174 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Name /> without throwing 1`] = `
-.c0 {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.c4 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-}
-
-.c4::-moz-focus-inner,
-.c4[type='button']::-moz-focus-inner,
-.c4[type='reset']::-moz-focus-inner,
-.c4[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c4:-moz-focusring,
-.c4[type='button']:-moz-focusring,
-.c4[type='reset']:-moz-focusring,
-.c4[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c4 + button {
-  margin-left: 0.375rem;
-}
-
-.c3 {
-  display: inline-block;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c2:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c2[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c1 {
-  color: rgba(73,73,73,1);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-  margin: 0;
-}
-
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 1.5rem;
-}
-
 <form
   onSubmit={undefined}
->
-  <div
-    className="c0"
-  >
-    <h3
-      className="c1"
 />
-  </div>
-  <button
-    className="c2 c3 c4"
-    href=""
-    onClick={undefined}
-    type="button"
-  >
-    Edit
-  </button>
-</form>
 `;
 
 exports[`renders <Name expanded /> without throwing 1`] = `
@@ -620,172 +455,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
 `;
 
 exports[`renders <Name pristine={false} /> without throwing 1`] = `
-.c0 {
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.c4 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-}
-
-.c4::-moz-focus-inner,
-.c4[type='button']::-moz-focus-inner,
-.c4[type='reset']::-moz-focus-inner,
-.c4[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c4:-moz-focusring,
-.c4[type='button']:-moz-focusring,
-.c4[type='reset']:-moz-focusring,
-.c4[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c4 + button {
-  margin-left: 0.375rem;
-}
-
-.c3 {
-  display: inline-block;
-}
-
-.c2 {
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 3rem;
-  height: 3rem;
-  min-width: 7.5rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  color: rgb(255,255,255);
-  -webkit-text-fill-color: currentcolor;
-  background-image: none;
-  background-color: rgb(59,70,204);
-  border-radius: 0.25rem;
-  border: solid 0.0625rem rgb(45,56,132);
-  color: rgb(70,70,70);
-  -webkit-text-fill-color: currentcolor;
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:focus {
-  outline: 0;
-  text-decoration: none;
-  background-color: rgb(59,70,204);
-  border-color: rgb(45,56,132);
-}
-
-.c2:hover {
-  background-color: rgb(72,83,217);
-  border: solid 0.0625rem rgb(45,56,132);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-image: none;
-  outline: 0;
-  background-color: rgb(45,56,132);
-  border-color: rgb(45,56,132);
-}
-
-.c2[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c2:focus {
-  background-color: rgb(255,255,255);
-  border-color: rgb(216,216,216);
-}
-
-.c2:hover {
-  background-color: rgb(247,247,247);
-  border-color: rgb(216,216,216);
-}
-
-.c2:active,
-.c2:active:hover,
-.c2:active:focus {
-  background-color: rgb(230,230,230);
-  border-color: rgb(216,216,216);
-}
-
-.c1 {
-  color: rgba(73,73,73,1);
-  font-weight: normal;
-  line-height: 1.625rem;
-  font-size: 1.3125rem;
-  margin: 0;
-}
-
-.c1 + p,
-.c1 + small,
-.c1 + h1,
-.c1 + h2,
-.c1 + label,
-.c1 + h3,
-.c1 + h4,
-.c1 + h5,
-.c1 + div,
-.c1 + span {
-  margin-top: 1.5rem;
-}
-
 <form
   onSubmit={undefined}
->
-  <div
-    className="c0"
-  >
-    <h3
-      className="c1"
 />
-  </div>
-  <button
-    className="c2 c3 c4"
-    href=""
-    onClick={undefined}
-    type="button"
-  >
-    Edit
-  </button>
-</form>
 `;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`renders <Title /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -42,6 +42,35 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -51,10 +80,14 @@ Array [
 >
     <div
         className="c1"
-    />
+    >
-    <p
+        <div
             className="c2"
         />
+    </div>
+    <p
+        className="c3"
+    />
 </div>,
   .c2 {
   box-sizing: border-box;
@@ -99,23 +132,23 @@ Array [
 
 exports[`renders <Title icon="NameIcon"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -139,6 +172,35 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -148,6 +210,9 @@ Array [
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -169,8 +234,9 @@ Array [
                 />
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
@@ -216,23 +282,23 @@ Array [
 
 exports[`renders <Title icon="Test" label="Instance name"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -256,6 +322,35 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -265,6 +360,9 @@ Array [
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -286,8 +384,9 @@ Array [
                 />
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     />
 </div>,
   .c2 {
@@ -333,23 +432,23 @@ Array [
 
 exports[`renders <Title label="Test"/> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -373,6 +472,35 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 .c1 {
   margin-right: 0.25rem;
 }
@@ -382,10 +510,14 @@ Array [
 >
     <div
         className="c1"
-    />
+    >
-    <p
+        <div
             className="c2"
         />
+    </div>
+    <p
+        className="c3"
+    />
 </div>,
   .c2 {
   box-sizing: border-box;

packages/my-joy-beta/src/components/create-instance/__tests__/cns.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Header, HostnamesHeader, AddServiceForm, Hostname } from '../cns';
+import Theme from '@mocks/theme';
+
+it('renders <Header/> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Header />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <HostnamesHeader /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <HostnamesHeader />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <AddServiceForm /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <AddServiceForm />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <AddServiceForm pristine /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <AddServiceForm pristine />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Hostname /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Hostname values={[]} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});
+
+it('renders <Hostname values /> without throwing', () => {
+  expect(
+    renderer
+      .create(
+        <Theme>
+          <Hostname values={['111', '111']} />
+        </Theme>
+      )
+      .toJSON()
+  ).toMatchSnapshot();
+});

packages/my-joy-beta/src/components/create-instance/cns.js

@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex, { FlexItem } from 'styled-flex-component';
+import { Field } from 'redux-form';
+
+import {
+  P,
+  H3,
+  Input,
+  Small,
+  Button,
+  FormGroup,
+  FormLabel,
+  PublicIcon,
+  PrivateIcon
+} from 'joyent-ui-toolkit';
+
+const SmallBordered = styled(Small)`
+  padding-right: ${remcalc(12)};
+  margin-right: ${remcalc(12)};
+  border-right: ${remcalc(1)} solid ${props => props.theme.grey};
+`;
+
+export const Header = () => (
+  <Fragment>
+    <H3>Hostnames</H3>
+    <Padding bottom={2}>
+      <P>
+        Default hostnames are automatically generated from both the instance
+        name and any attached networks.
+      </P>
+    </Padding>
+  </Fragment>
+);
+
+export const HostnamesHeader = () => (
+  <Margin top={4}>
+    <H3>CNS service hostnames</H3>
+    <Padding bottom={3}>
+      <P>
+        CNS service hostnames are created by attaching a CNS service name to one
+        or more instances. You can serve multiple instances under the same
+        hostname by assigning them to a matching CNS service name.
+      </P>
+    </Padding>
+  </Margin>
+);
+
+export const AddServiceForm = ({ handleSubmit, pristine }) => (
+  <form onSubmit={handleSubmit}>
+    <Flex alignEnd>
+      <FormGroup name="name" field={Field}>
+        <FormLabel>Attach to new CNS service name</FormLabel>
+        <Input type="text" placeholder="Example: mySQLdb" />
+      </FormGroup>
+      <Margin left={2}>
+        <Button type="submit" disabled={pristine}>
+          Add
+        </Button>
+      </Margin>
+    </Flex>
+  </form>
+);
+
+export const Hostname = ({ values, network, service, ...hostname }) => (
+  <Fragment>
+    {values.length ? (
+      <Margin bottom={4}>
+        <Flex>
+          <SmallBordered bold noMargin>
+            {network && service
+              ? 'Network CNS service'
+              : network
+                ? 'Network'
+                : service ? 'CNS service' : 'Instance name'}{' '}
+            hostname
+          </SmallBordered>
+          <FlexItem>
+            <Margin right={1}>
+              {hostname.public ? <PublicIcon /> : <PrivateIcon />}
+            </Margin>
+          </FlexItem>
+          <FlexItem>
+            <Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
+          </FlexItem>
+        </Flex>
+        {values.map(value => <Input disabled monospace fluid value={value} />)}
+      </Margin>
+    ) : null}
+  </Fragment>
+);

packages/my-joy-beta/src/components/create-instance/name.js

@@ -31,6 +31,8 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
         </Button>
       </Fragment>
     ) : (
+      <Fragment>
+        {name ? (
           <Fragment>
             <Margin bottom={2} top={3}>
               <H3>{name}</H3>
@@ -39,6 +41,8 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
               Edit
             </Button>
           </Fragment>
+        ) : null}
+      </Fragment>
     )}
   </form>
 );

packages/my-joy-beta/src/components/create-instance/title.js

@@ -8,7 +8,11 @@ import { Divider, P } from 'joyent-ui-toolkit';
 export default ({ icon, children }) => (
   <Fragment>
     <Flex>
-      <Margin right={1}>{icon}</Margin>
+      <Margin right={1}>
+        <Flex alignCenter full>
+          {icon}
+        </Flex>
+      </Margin>
       <P>{children}</P>
     </Flex>
     <Margin top={1} bottom={3}>

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap

@@ -2768,7 +2768,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -693,7 +693,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -1692,7 +1692,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -835,7 +835,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -897,7 +897,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3000,7 +3000,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -5334,7 +5334,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -7554,7 +7554,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -7616,7 +7616,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -9611,7 +9611,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -9673,7 +9673,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -11776,7 +11776,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -11838,7 +11838,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -13775,7 +13775,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -13837,7 +13837,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -2014,9 +2014,7 @@ exports[`renders <Tag /> without throwing 1`] = `
     <li
       className="c2"
       onClick={undefined}
-    >
+    />
-      : 
-    </li>
   </div>
 </div>
 `;
@@ -2073,9 +2071,7 @@ exports[`renders <Tag name value/> without throwing 1`] = `
       className="c2"
       onClick={undefined}
     >
-      name
+      name: value
-      : 
-      value
     </li>
   </div>
 </div>

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap

@@ -205,7 +205,7 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -568,7 +568,7 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -953,7 +953,7 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1316,7 +1316,7 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1679,7 +1679,7 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2042,7 +2042,7 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2429,7 +2429,7 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;

packages/my-joy-beta/src/components/instances/tags.js

@@ -12,10 +12,10 @@ export const EditForm = props => (
   <KeyValue {...props} method="edit" input="input" type="tag" expanded />
 );
 
-export default ({ name, value, onClick, onRemoveClick }) => (
+export default ({ name, value, onClick, onRemoveClick, active }) => (
   <Margin right={1} bottom={1} key={`${name}-${value}`}>
-    <TagItem onClick={onClick} onRemoveClick={onRemoveClick}>
+    <TagItem onClick={onClick} active={active} onRemoveClick={onRemoveClick}>
-      {name}: {value}
+      {name ? `${name}: ${value}` : value}
     </TagItem>
   </Margin>
 );

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`renders <Metadata /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,11 +46,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -113,8 +145,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -163,23 +196,23 @@ Array [
 
 exports[`renders <Metadata addOpen expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -207,11 +240,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -274,8 +339,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -1041,7 +1107,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -1576,23 +1642,23 @@ Array [
 
 exports[`renders <Metadata expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1620,11 +1686,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -1687,8 +1785,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -1983,23 +2082,23 @@ Array [
 
 exports[`renders <Metadata metadata=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2027,11 +2126,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -2094,8 +2225,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -2811,7 +2943,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -3835,7 +3967,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -4192,23 +4324,23 @@ Array [
 
 exports[`renders <Metadata metadata=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -4236,11 +4368,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -4303,8 +4467,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Metadata
     </p>
@@ -5060,7 +5225,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -6084,7 +6249,7 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`renders <Networks /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,11 +46,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -85,8 +117,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -136,23 +169,23 @@ Array [
 
 exports[`renders <Networks loading /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -180,11 +213,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -219,8 +284,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -269,23 +335,23 @@ Array [
 
 exports[`renders <Networks loading expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -313,11 +379,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -352,8 +450,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -670,23 +769,23 @@ Array [
 
 exports[`renders <Networks networks=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -714,11 +813,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -753,8 +884,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -1100,23 +1232,23 @@ Array [
 
 exports[`renders <Networks networks=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1144,11 +1276,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -1183,8 +1347,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>
@@ -2588,23 +2753,23 @@ Array [
 
 exports[`renders <Networks networks=[] proceeded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2632,11 +2797,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -2671,8 +2868,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Networks
     </p>

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -2,23 +2,23 @@
 
 exports[`renders <Tags /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -46,11 +46,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -100,8 +132,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -150,23 +183,23 @@ Array [
 
 exports[`renders <Tags addOpen expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -194,11 +227,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -248,8 +313,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -1540,23 +1606,23 @@ Array [
 
 exports[`renders <Tags expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1584,11 +1650,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -1638,8 +1736,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -1950,23 +2049,23 @@ Array [
 
 exports[`renders <Tags metadata=[] /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -1994,11 +2093,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -2048,8 +2179,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>
@@ -2098,23 +2230,23 @@ Array [
 
 exports[`renders <Tags metadata=[] expanded /> without throwing 1`] = `
 Array [
-  .c2 {
+  .c3 {
   color: rgba(73,73,73,1);
   line-height: 1.5rem;
   font-size: 0.9375rem;
   margin: 0;
 }
 
-.c2 + p,
+.c3 + p,
-.c2 + small,
+.c3 + small,
-.c2 + h1,
+.c3 + h1,
-.c2 + h2,
+.c3 + h2,
-.c2 + label,
+.c3 + label,
-.c2 + h3,
+.c3 + h3,
-.c2 + h4,
+.c3 + h4,
-.c2 + h5,
+.c3 + h5,
-.c2 + div,
+.c3 + div,
-.c2 + span {
+.c3 + span {
   padding-bottom: 2.25rem;
 }
 
@@ -2142,11 +2274,43 @@ Array [
   align-content: stretch;
 }
 
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
 <div
     className="c0"
 >
     <div
         className="c1"
+    >
+        <div
+            className="c2"
         >
             <svg
                 className=""
@@ -2196,8 +2360,9 @@ Array [
                 </defs>
             </svg>
         </div>
+    </div>
     <p
-        className="c2"
+        className="c3"
     >
         Tags
     </p>

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -0,0 +1,241 @@
+import React, { Fragment } from 'react';
+import { compose } from 'react-apollo';
+import ReduxForm from 'declarative-redux-form';
+import { destroy } from 'redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import { Margin, Padding } from 'styled-components-spacing';
+import Flex from 'styled-flex-component';
+import { set } from 'react-redux-values';
+import remcalc from 'remcalc';
+
+import {
+  CnsIcon,
+  P,
+  Card,
+  H3,
+  Button,
+  FormGroup,
+  FormLabel,
+  Toggle,
+  Divider,
+  TagList
+} from 'joyent-ui-toolkit';
+
+import {
+  Hostname,
+  Header,
+  AddServiceForm,
+  HostnamesHeader
+} from '@components/create-instance/cns';
+import Title from '@components/create-instance/title';
+import Tag from '@components/instances/tags';
+
+const CNS_FORM = 'create-instance-cns';
+
+const CNSContainer = ({
+  submitted,
+  expanded,
+  proceeded,
+  serviceNames,
+  instanceName,
+  cnsEnabled = true,
+  hostnames = [],
+  handleNext,
+  handleEdit,
+  handleToggleCnsEnabled,
+  handleAddService,
+  handleRemoveService
+}) => (
+  <Fragment>
+    <Title icon={<CnsIcon />}>Container Name Service</Title>
+    {expanded ? (
+      <Margin bottom={3}>
+        <P>
+          Triton CNS is used to automatically update hostnames for your
+          instances*. You can serve multiple instances (with multiple IP
+          addresses) under the same hostname by matching the CNS service names.{' '}
+          <a
+            href="https://docs.joyent.com/private-cloud/install/cns"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read the docs
+          </a>
+        </P>
+      </Margin>
+    ) : null}
+    {expanded && cnsEnabled ? (
+      <Card>
+        <Padding all={4} bottom={0}>
+          <Header />
+          <Flex column>
+            {hostnames
+              .filter(({ service }) => !service)
+              .map(({ value, ...hostname }) => (
+                <Hostname key={value} value={value} {...hostname} />
+              ))}
+          </Flex>
+          <Divider height={remcalc(1)} />
+          <Margin top={4}>
+            {serviceNames.length ? (
+              <Margin>
+                <FormLabel>Existing CNS service name(s)</FormLabel>
+                <Margin top={0.5}>
+                  <TagList>
+                    {serviceNames.map((value, index) => (
+                      <Tag
+                        active
+                        key={index}
+                        value={value}
+                        onRemoveClick={() => handleRemoveService(index)}
+                      />
+                    ))}
+                  </TagList>
+                </Margin>
+              </Margin>
+            ) : null}
+            <HostnamesHeader />
+            <ReduxForm
+              form={`${CNS_FORM}-new-service`}
+              destroyOnUnmount={false}
+              forceUnregisterOnUnmount={true}
+              onSubmit={handleAddService}
+            >
+              {props => <AddServiceForm {...props} />}
+            </ReduxForm>
+            <Margin top={4}>
+              <Flex column>
+                {hostnames
+                  .filter(({ service }) => service)
+                  .map(({ value, ...hostname }) => (
+                    <Hostname key={value} value={value} {...hostname} />
+                  ))}
+              </Flex>
+            </Margin>
+          </Margin>
+        </Padding>
+      </Card>
+    ) : null}
+    {expanded ? (
+      <Fragment>
+        <Margin bottom={4} top={4}>
+          <FormGroup name="cns-enabled">
+            <Flex alignCenter>
+              <FormLabel>Disabled CNS</FormLabel>
+              <Toggle checked={cnsEnabled} onChange={handleToggleCnsEnabled}>
+                Enabled CNS
+              </Toggle>
+            </Flex>
+          </FormGroup>
+        </Margin>
+        <Margin bottom={4}>
+          <P>
+            *All hostnames are indicative and will be confirmed after
+            deployment.
+          </P>
+        </Margin>
+        <Button type="button" onClick={handleNext}>
+          Next
+        </Button>
+      </Fragment>
+    ) : null}
+    {proceeded && !expanded ? (
+      <Fragment>
+        <Margin bottom={4}>
+          <H3>{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}</H3>
+        </Margin>
+        <FormLabel>Existing CNS service name(s)</FormLabel>
+        <Margin top={0.5}>
+          <TagList>
+            {serviceNames.map((value, index) => (
+              <Tag key={index} value={value} />
+            ))}
+          </TagList>
+        </Margin>
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
+      </Fragment>
+    ) : null}
+  </Fragment>
+);
+
+export default compose(
+  connect(({ form, values }, ownProps) => {
+    const instanceName = get(
+      form,
+      'create-instance-name.values.name',
+      '<instance-name>'
+    );
+    const serviceNames = get(values, `${CNS_FORM}-services`, []);
+
+    // REPLACE WITH USER ID AND DATA CENTER
+    const userID = '10703e3c-ada6-478d-c757-e5bcad0ea74c';
+    const dataCenter = 'us-east-1';
+
+    const hostnames = [
+      {
+        values: [`${instanceName}.inst.${userID}.${dataCenter}.triton.zone`],
+        public: true
+      },
+      {
+        values: [`${instanceName}.inst.${userID}.${dataCenter}.cns.joyent.com`]
+      },
+      {
+        values: [],
+        public: true,
+        service: true
+      },
+      {
+        values: [],
+        service: true
+      }
+    ];
+
+    hostnames.map(hostname => {
+      if (!hostname.service) {
+        return hostname;
+      }
+
+      return serviceNames.map(name => {
+        const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com';
+        const value = `${name}.svc.${userID}.${dataCenter}${postfix}`;
+        hostname.values.push(value);
+      });
+    });
+
+    return {
+      cnsEnabled: get(values, `${CNS_FORM}-enabled`, true),
+      instanceName,
+      proceeded: get(values, `${CNS_FORM}-proceeded`, false),
+      hostnames,
+      serviceNames
+    };
+  }),
+  connect(null, (dispatch, { history, cnsEnabled, serviceNames = [] }) => ({
+    handleNext: () => {
+      dispatch(set({ name: `${CNS_FORM}-proceeded`, value: true }));
+      return history.push(`/instances/~create/affinity`);
+    },
+    handleEdit: () => history.push(`/instances/~create/cns`),
+    handleToggleCnsEnabled: ({ target }) =>
+      dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),
+    handleAddService: ({ name }) => {
+      dispatch([
+        destroy(`${CNS_FORM}-new-service`),
+        set({
+          name: `${CNS_FORM}-services`,
+          value: serviceNames.concat(name.toLowerCase())
+        })
+      ]);
+    },
+    handleRemoveService: index => {
+      serviceNames.splice(index, 1);
+
+      return dispatch(
+        set({ name: `${CNS_FORM}-services`, value: serviceNames.slice() })
+      );
+    }
+  }))
+)(CNSContainer);

packages/my-joy-beta/src/containers/create-instance/index.js

@@ -9,6 +9,7 @@ import Metadata from '@containers/create-instance/metadata';
 import Tags from '@containers/create-instance/tags';
 import Package from '@containers/create-instance/package';
 import Networks from '@containers/create-instance/networks';
+import CNS from '@containers/create-instance/cns';
 
 export default ({ step, ...props }) => (
   <ViewContainer>
@@ -33,5 +34,8 @@ export default ({ step, ...props }) => (
     <Margin bottom={4}>
       <Networks {...props} expanded={step === 'networks'} />
     </Margin>
+    <Margin bottom={4}>
+      <CNS {...props} expanded={step === 'cns'} />
+    </Margin>
   </ViewContainer>
 );

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@@ -389,7 +389,7 @@ exports[`renders <List /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1395,7 +1395,7 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2456,7 +2456,7 @@ exports[`renders <List instances /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4534,7 +4534,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -7155,7 +7155,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -9985,7 +9985,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -11891,7 +11891,7 @@ exports[`renders <List loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -278,7 +278,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1318,7 +1318,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1442,7 +1442,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -2226,7 +2226,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2857,7 +2857,7 @@ exports[`renders <Metadata loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4115,7 +4115,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4239,7 +4239,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1558,7 +1558,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3930,7 +3930,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -278,7 +278,7 @@ exports[`renders <Tags /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -1327,7 +1327,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -2191,7 +2191,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -3242,7 +3242,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -4742,7 +4742,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -5618,7 +5618,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6194,7 +6194,7 @@ exports[`renders <Tags loading /> without throwing 1`] = `
   color: rgb(250,250,250);
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6719,7 +6719,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 100%;
+  width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6992,9 +6992,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name1
+          name1: value1
-          : 
-          value1
         </li>
       </div>
     </div>
@@ -7008,9 +7006,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name2
+          name2: value2
-          : 
-          value2
         </li>
       </div>
     </div>
@@ -7024,9 +7020,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
           className="c20"
           onClick={undefined}
         >
-          name3
+          name3: value3
-          : 
-          value3
         </li>
       </div>
     </div>

packages/ui-toolkit/src/base/global.js

@@ -3,6 +3,7 @@ import remcalc from 'remcalc';
 
 export default ({ theme }) => css`
   @import url('${theme.font.href()}');
+  @import url('${theme.monoSpaceFont.href()}');
 
   [hidden] {
     display: none;
@@ -10,9 +11,8 @@ export default ({ theme }) => css`
 
   html, body {
     font-display: optional;
-    font-family: ${
+    font-family: ${theme.font
-      theme.font.family
+      .family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 

packages/ui-toolkit/src/form/base/input.js

@@ -92,8 +92,28 @@ const style = css`
     width: ${remcalc(120)}
   `};
 
+  ${is('monospace')`
+    font-family: ${props => props.theme.monoSpaceFont.family};
+
+      &:disabled {
+        color: ${props => props.theme.text};
+
+        ::-webkit-input-placeholder {
+          color: ${props => props.theme.text};
+        }
+
+        ::-moz-placeholder {
+          color: ${props => props.theme.text};
+        }
+
+        :-ms-input-placeholder {
+          color: ${props => props.theme.text};
+        }
+      }
+  `};
+
   ${is('fluid')`
-    max-width: 100%;
+    width: 100%;
   `};
 
   ${is('xSmall')`

packages/ui-toolkit/src/tags/item.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import remcalc from 'remcalc';
 import is from 'styled-is';
 
@@ -30,16 +30,29 @@ const Tag = styled.li`
   align-items: center;
   flex-grow: 1;
 
+  ${is('active')`
+      border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
+      background: rgba(59, 70, 204, .1)
+  `};
+
   ${is('onClick')`
     cursor: pointer;
   `};
 `;
 
-export default ({ children, onRemoveClick, ...rest }) => (
+export default withTheme(
+  ({ theme, children, active, onRemoveClick, ...rest }) => (
     <Container>
-    <Tag {...rest}>
+      <Tag active={active} {...rest}>
         {children}
-      {onRemoveClick ? <CloseIcon disabled onClick={onRemoveClick} /> : null}
+        {onRemoveClick ? (
+          <CloseIcon
+            fill={active ? theme.primaryActive : theme.text}
+            disabled
+            onClick={onRemoveClick}
+          />
+        ) : null}
       </Tag>
     </Container>
+  )
 );

packages/ui-toolkit/src/text/small.js

@@ -1,10 +1,18 @@
 import { Small } from 'normalized-styled-components';
 import remcalc from 'remcalc';
+import is, { isNot } from 'styled-is';
 
 export default Small.extend`
   color: ${props => props.theme.text};
 
   line-height: ${remcalc(18)};
   font-size: ${remcalc(13)};
+
+  ${isNot('noMargin')`
     padding-bottom: ${remcalc(12)};
+  `};
+
+  ${is('bold')`
+    font-weight: ${props => props.theme.font.weight.semibold};
+  `};
 `;

packages/ui-toolkit/src/theme/index.js

@@ -87,9 +87,8 @@ export const font = {
   textMuted: base.secondary,
   family: '"Libre Franklin"',
   href: () =>
-    `${document.location.protocol}//${
+    `${document.location.protocol}//${document.location
-      document.location.host
+      .host}/fonts/css?family=Libre+Franklin:400,500,600`,
-    }/fonts/css?family=Libre+Franklin:400,500,600`,
   weight: {
     semibold: 600,
     medium: 500,
@@ -97,6 +96,19 @@ export const font = {
   }
 };
 
+export const monoSpaceFont = {
+  semibold: base.secondary,
+  regular: base.text,
+  abbrBorderColor: base.secondary,
+  textMuted: base.secondary,
+  family: '"Roboto Mono"',
+  href: () => 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,700',
+  weight: {
+    bold: 700,
+    normal: 400
+  }
+};
+
 /** ******************************** INACTIVE ********************************* */
 
 export const inactive = {
@@ -139,6 +151,7 @@ export const shadows = {
 export default {
   ...base,
   font,
+  monoSpaceFont,
   inactive,
   notifications,
   inputError,