test(cp-frontend): add more tests

packages/cp-frontend/src/components/manifest/manifest.js

@@ -3,6 +3,7 @@ import { FormMeta, Button, Label } from 'joyent-ui-toolkit';
 import { Row } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
+import { MEditor } from './editors';
 
 const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
 

packages/cp-frontend/src/components/services/list-item.js

@@ -179,7 +179,7 @@ const ServiceListItem = ({
   }
 
   const graphs =
-    !children.length && Object.keys(service.metrics).length
+    !children.length && service.metrics && Object.keys(service.metrics).length
       ? Object.keys(service.metrics).map(key => (
           <GraphContainer xs={4}>
             <GraphLeftShaddow />

packages/cp-frontend/src/state/selectors.js

@@ -177,7 +177,7 @@ const processServicesForTopology = services => {
 // metricsData should prob be an array rather than an object
 const processInstancesMetrics = instances =>
   forceArray(instances).reduce((metrics, instance) => {
-    instance.metrics.forEach(instanceMetrics => {
+    instance.metrics && instance.metrics.forEach(instanceMetrics => {
       metrics[instanceMetrics.name] = forceArray(
         metrics[instanceMetrics.name]
       ).concat([instanceMetrics]);

packages/cp-frontend/test/unit/components/deployment-group/__snapshots__/delete.js.snap

@@ -52,17 +52,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
 }
 
 .c4::-moz-focus-inner,
-.c4[type="button"]::-moz-focus-inner,
+.c4[type='button']::-moz-focus-inner,
-.c4[type="reset"]::-moz-focus-inner,
+.c4[type='reset']::-moz-focus-inner,
-.c4[type="submit"]::-moz-focus-inner {
+.c4[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 .c4:-moz-focusring,
-.c4[type="button"]:-moz-focusring,
+.c4[type='button']:-moz-focusring,
-.c4[type="reset"]:-moz-focusring,
+.c4[type='reset']:-moz-focusring,
-.c4[type="submit"]:-moz-focusring {
+.c4[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -161,17 +161,17 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
 }
 
 .c5::-moz-focus-inner,
-.c5[type="button"]::-moz-focus-inner,
+.c5[type='button']::-moz-focus-inner,
-.c5[type="reset"]::-moz-focus-inner,
+.c5[type='reset']::-moz-focus-inner,
-.c5[type="submit"]::-moz-focus-inner {
+.c5[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 .c5:-moz-focusring,
-.c5[type="button"]:-moz-focusring,
+.c5[type='button']:-moz-focusring,
-.c5[type="reset"]:-moz-focusring,
+.c5[type='reset']:-moz-focusring,
-.c5[type="submit"]:-moz-focusring {
+.c5[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -230,7 +230,19 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
 }
 
 <div>
-  <h2
+  .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c0 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+<h2
     className="c0 c1"
   >
     Deleting a deployment group: 
@@ -238,19 +250,235 @@ exports[`renders <DeploymentGroupDelete /> without throwing 1`] = `
      
     Wordpress Blog Example
   </h2>
-  <p
+  .c1 {
-    className="c2 c3"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<p
+    className="c0 c1"
   >
     Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?
   </p>
-  <button
+  .c0 {
-    className="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;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c0::-moz-focus-inner,
+.c0[type='button']::-moz-focus-inner,
+.c0[type='reset']::-moz-focus-inner,
+.c0[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:-moz-focusring,
+.c0[type='button']:-moz-focusring,
+.c0[type='reset']:-moz-focusring,
+.c0[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0 + button {
+  margin-left: 1.25rem;
+}
+
+<button
+    className="c0"
     onClick={[Function]}
   >
     Cancel
   </button>
-  <button
+  .c0 {
-    className="c5"
+  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;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c0::-moz-focus-inner,
+.c0[type='button']::-moz-focus-inner,
+.c0[type='reset']::-moz-focus-inner,
+.c0[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:-moz-focusring,
+.c0[type='button']:-moz-focusring,
+.c0[type='reset']:-moz-focusring,
+.c0[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 + button {
+  margin-left: 1.25rem;
+}
+
+<button
+    className="c0"
     onClick={[Function]}
   >
     Delete deployment group

packages/cp-frontend/test/unit/components/instances/__snapshots__/empty.js.snap

@@ -49,11 +49,44 @@ exports[`renders <EmtpyInstances /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <div
+  .c0 {
-    className="c1"
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+@media only screen and (min-width:0em) {
+  .c0 {
+    -webkit-flex-basis: 100%;
+    -ms-flex-basis: 100%;
+    flex-basis: 100%;
+    max-width: 100%;
+    display: block;
+  }
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c0 {
-      className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+<p
+      className="c0"
     >
       You don't have any instances
     </p>

packages/cp-frontend/test/unit/components/instances/__snapshots__/list-item.js.snap

@@ -1,16 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <InstanceCard /> without throwing 1`] = `
-.c10 {
+.c12 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
 }
 
-.c8 {
+.c9 {
+  -webkit-fill: ;
   fill: ;
 }
 
@@ -80,6 +83,8 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  height: 100%;
+  position: relative;
 }
 
 .c1 {
@@ -146,26 +151,50 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c9 {
+.c10 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   display: inline-block;
   margin-left: 1.5rem;
 }
 
-.c9::first-letter {
+.c10::first-letter {
   text-transform: capitalize;
 }
 
-.c7 {
+.c8 {
   position: absolute;
 }
 
-.c11 {
+.c7 {
+  height: 100%;
+  float: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c13 {
   margin-right: 0.375rem;
   width: 0.375rem;
   height: 0.375rem;
@@ -187,42 +216,538 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
   border-bottom-width: 0;
 }
 
+.c11 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
 <div
   className="c0 c1"
   name="card"
 >
-  <div
+  .c10 {
-    className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+}
+
+.c7 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c2 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c4 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  height: 100%;
+  position: relative;
+}
+
+.c0 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0;
+  height: auto;
+  padding-top: 0;
+  min-width: auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c8::first-letter {
+  text-transform: capitalize;
+}
+
+.c6 {
+  position: absolute;
+}
+
+.c5 {
+  height: 100%;
+  float: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+.c11 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+.c9 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+    className="c0"
     name="card-view"
   >
-    <div
+    .c0 {
-      className="c3"
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c1 {
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<div
+      className="c0"
       name="container"
     >
-      <span
+      .c0 {
-        className="c4"
+  display: inline-block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<span
+        className="c0"
       >
         wordpress_01
       </span>
     </div>
-    <div
+    .c5 {
-      className="c5 c3"
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c2 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  height: 100%;
+  position: relative;
+}
+
+.c6 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c6::first-letter {
+  text-transform: capitalize;
+}
+
+.c4 {
+  position: absolute;
+}
+
+.c3 {
+  height: 100%;
+  float: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+      className="c0 c1"
       name="container"
     >
-      <div
+      .c3 {
-        className="c6"
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c0 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  height: 100%;
+  position: relative;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c4::first-letter {
+  text-transform: capitalize;
+}
+
+.c2 {
+  position: absolute;
+}
+
+.c1 {
+  height: 100%;
+  float: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+        className="c0"
       >
-        <div
+        .c2 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c3::first-letter {
+  text-transform: capitalize;
+}
+
+.c1 {
+  position: absolute;
+}
+
+.c0 {
+  height: 100%;
+  float: right;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+          className="c0"
           onMouseOut={[Function]}
           onMouseOver={[Function]}
         >
-          <div>
+          .c1 {
-            <div
+  -webkit-fill: ;
-              className="c7"
+  fill: ;
+}
+
+.c0 {
+  position: absolute;
+}
+
+<div
+            className="c0"
             color="dark"
           >
-              <svg
+            .c0 {
-                className="c8"
+  -webkit-fill: ;
+  fill: ;
+}
+
+<svg
+              className="c0"
               healthy="HEALTHY"
               height="18"
               viewBox="0 0 18 18"
@@ -247,8 +772,25 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
               </g>
             </svg>
           </div>
-            <label
+          .c0 {
-              className="c9"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+  display: inline-block;
+  margin-left: 1.5rem;
+}
+
+.c0::first-letter {
+  text-transform: capitalize;
+}
+
+<label
+            className="c0"
             color="dark"
           >
             healthy
@@ -256,23 +798,243 @@ exports[`renders <InstanceCard /> without throwing 1`] = `
         </div>
       </div>
     </div>
-    </div>
+    .c4 {
-    <div
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-      className="c5 c3"
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+}
+
+.c1 {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-grow: 2;
+  -ms-flex-grow: 2;
+  flex-grow: 2;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+  width: 100%;
+  padding: 0.75rem 1.125rem 0 1.125rem;
+  -webkit-flex-grow: 6;
+  -ms-flex-grow: 6;
+  flex-grow: 6;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 1.125rem;
+}
+
+.c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-basis: 5.625rem;
+  -ms-flex-basis: 5.625rem;
+  flex-basis: 5.625rem;
+}
+
+.c2 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  height: 100%;
+  position: relative;
+}
+
+.c5 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+.c3 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+      className="c0 c1"
       name="container"
     >
-      <div
+      .c2 {
-        className="c6"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+}
+
+.c0 {
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  height: 100%;
+  position: relative;
+}
+
+.c3 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+.c1 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+        className="c0"
       >
-        <div
+        .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+}
+
+.c2 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+.c0 {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+}
+
+<div
+          className="c0"
           onMouseOut={[Function]}
           onMouseOver={[Function]}
         >
-          <label
+          .c0 {
-            className="c10"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  font-style: normal;
+  font-stretch: normal;
+  font-weight: bold;
+  display: block;
+  color: ;
+}
+
+.c1 {
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+<label
+            className="c0"
           >
-            <span
+            .c0 {
-              className="c11"
+  margin-right: 0.375rem;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  background-color: ;
+}
+
+<span
+              className="c0"
             />
             Running
           </label>

packages/cp-frontend/test/unit/components/manifest/__snapshots__/editors.js.snap

@@ -0,0 +1,729 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <EEditor /> without throwing 1`] = `
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
+>
+  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
+    height="10"
+    width="28"
+  >
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+    className="c0"
+  >
+    Loading...
+  </p>
+</div>
+`;
+
+exports[`renders <EEditor /> without throwing 2`] = `
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
+>
+  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
+    height="10"
+    width="28"
+  >
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+    className="c0"
+  >
+    Loading...
+  </p>
+</div>
+`;
+
+exports[`renders <MEditor /> without throwing 1`] = `
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
+>
+  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
+    height="10"
+    width="28"
+  >
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+    className="c0"
+  >
+    Loading...
+  </p>
+</div>
+`;
+
+exports[`renders <MEditor /> without throwing 2`] = `
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+  className="c0"
+>
+  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
+    height="10"
+    width="28"
+  >
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="2"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="11"
+      y="2"
+    />
+    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+      className="c0"
+      height="6"
+      width="6"
+      x="20"
+      y="2"
+    />
+  </svg>
+  .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+    className="c0"
+  >
+    Loading...
+  </p>
+</div>
+`;

packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap

@@ -0,0 +1,835 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Files /> without throwing 1`] = `
+.c7 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c8 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c9 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c2 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  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;
+}
+
+.c5 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c5:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.c3 {
+  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: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c4 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+.c0 {
+  padding: 1.5rem 1.1875rem;
+}
+
+<div>
+  .c7 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c8 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c9 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c2 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  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;
+}
+
+.c5 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c5:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  position: relative;
+  height: auto;
+  min-height: 7.875rem;
+  margin-bottom: 0.625rem;
+  border: 0.0625rem solid;
+  background-color: ;
+  box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-right: 0rem;
+  margin-left: 0rem;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.c3 {
+  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: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c4 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+.c0 {
+  padding: 1.5rem 1.1875rem;
+}
+
+<div
+    className="c0 c1"
+    name="card"
+  >
+    .c0 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  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: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c3:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.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: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c2 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+<fieldset
+      className="c0"
+      style={undefined}
+    >
+      .c2 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c2:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.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: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c1 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+<div>
+        .c2 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c2:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.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: space-between;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: space-between;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.c1 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+<span
+          className="c0"
+        >
+          .c1 {
+  box-sizing: border-box;
+  width: 100%;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding: 0.8125rem 1.125rem;
+  border-radius: 0.25rem;
+  background-color: ;
+  border: 0.0625rem solid;
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  color: ;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.c1:focus {
+  border-color: ;
+  outline: 0;
+}
+
+.c0 {
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin: 0 0 0.8125rem 0;
+}
+
+<input
+            className="c0 c1"
+            id="ceBOoS"
+            placeholder="Filename including extension…"
+            type="text"
+            value={undefined}
+          />
+        </span>
+      </div>
+    </fieldset>
+    .c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<div
+      className="c0"
+    >
+      .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
+        height="10"
+        width="28"
+      >
+        .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+          className="c0"
+          height="6"
+          width="6"
+          x="2"
+          y="2"
+        />
+        .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+          className="c0"
+          height="6"
+          width="6"
+          x="11"
+          y="2"
+        />
+        .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+          className="c0"
+          height="6"
+          width="6"
+          x="20"
+          y="2"
+        />
+      </svg>
+      .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+        className="c0"
+      >
+        Loading...
+      </p>
+    </div>
+  </div>
+</div>
+`;

packages/cp-frontend/test/unit/components/manifest/__snapshots__/manifest.js.snap

@@ -0,0 +1,334 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <Manifest /> without throwing 1`] = `
+<ApolloProvider
+  client={
+    ApolloClient {
+      "addTypename": true,
+      "dataId": [Function],
+      "dataIdFromObject": [Function],
+      "disableNetworkFetches": false,
+      "fieldWithArgs": [Function],
+      "fragmentMatcher": HeuristicFragmentMatcher {},
+      "initialState": Object {},
+      "middleware": [Function],
+      "mutate": [Function],
+      "networkInterface": HTTPFetchNetworkInterface {
+        "_afterwares": Array [],
+        "_middlewares": Array [],
+        "_opts": Object {},
+        "_uri": "https://localhost:443/api/graphql",
+      },
+      "query": [Function],
+      "queryDeduplication": true,
+      "queryManager": QueryManager {
+        "addTypename": true,
+        "deduplicator": Deduplicator {
+          "inFlightRequestPromises": Object {},
+          "networkInterface": HTTPFetchNetworkInterface {
+            "_afterwares": Array [],
+            "_middlewares": Array [],
+            "_opts": Object {},
+            "_uri": "https://localhost:443/api/graphql",
+          },
+        },
+        "disableBroadcasting": false,
+        "fetchQueryPromises": Object {},
+        "fragmentMatcher": HeuristicFragmentMatcher {},
+        "idCounter": 1,
+        "lastRequestId": Object {},
+        "mutationStore": MutationStore {
+          "store": Object {},
+        },
+        "networkInterface": HTTPFetchNetworkInterface {
+          "_afterwares": Array [],
+          "_middlewares": Array [],
+          "_opts": Object {},
+          "_uri": "https://localhost:443/api/graphql",
+        },
+        "observableQueries": Object {},
+        "pollingTimers": Object {},
+        "queryDeduplication": true,
+        "queryDocuments": Object {},
+        "queryIdsByName": Object {},
+        "queryListeners": Object {},
+        "queryStore": QueryStore {
+          "store": Object {},
+        },
+        "reducerConfig": Object {
+          "addTypename": true,
+          "customResolvers": undefined,
+          "dataIdFromObject": [Function],
+          "fragmentMatcher": [Function],
+        },
+        "reduxRootSelector": [Function],
+        "scheduler": QueryScheduler {
+          "inFlightQueries": Object {},
+          "intervalQueries": Object {},
+          "pollingTimers": Object {},
+          "queryManager": [Circular],
+          "registeredQueries": Object {},
+        },
+        "ssrMode": false,
+        "store": Object {
+          "dispatch": [Function],
+          "getState": [Function],
+        },
+      },
+      "reducerConfig": Object {
+        "addTypename": true,
+        "customResolvers": undefined,
+        "dataIdFromObject": [Function],
+        "fragmentMatcher": [Function],
+      },
+      "resetStore": [Function],
+      "setStore": [Function],
+      "ssrMode": false,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+      },
+      "version": "1.9.2",
+      "watchQuery": [Function],
+    }
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(observable): [Function],
+    }
+  }
+>
+  <ReduxForm
+    defaultValue="test"
+    dirty={true}
+    handleSubmit={[Function]}
+    loading={true}
+    onCancel={[Function]}
+  />
+</ApolloProvider>
+`;
+
+exports[`renders <Manifest /> without throwing 2`] = `
+<ApolloProvider
+  client={
+    ApolloClient {
+      "addTypename": true,
+      "dataId": [Function],
+      "dataIdFromObject": [Function],
+      "disableNetworkFetches": false,
+      "fieldWithArgs": [Function],
+      "fragmentMatcher": HeuristicFragmentMatcher {},
+      "initialState": Object {},
+      "middleware": [Function],
+      "mutate": [Function],
+      "networkInterface": HTTPFetchNetworkInterface {
+        "_afterwares": Array [],
+        "_middlewares": Array [],
+        "_opts": Object {},
+        "_uri": "https://localhost:443/api/graphql",
+      },
+      "query": [Function],
+      "queryDeduplication": true,
+      "queryManager": QueryManager {
+        "addTypename": true,
+        "deduplicator": Deduplicator {
+          "inFlightRequestPromises": Object {},
+          "networkInterface": HTTPFetchNetworkInterface {
+            "_afterwares": Array [],
+            "_middlewares": Array [],
+            "_opts": Object {},
+            "_uri": "https://localhost:443/api/graphql",
+          },
+        },
+        "disableBroadcasting": false,
+        "fetchQueryPromises": Object {},
+        "fragmentMatcher": HeuristicFragmentMatcher {},
+        "idCounter": 1,
+        "lastRequestId": Object {},
+        "mutationStore": MutationStore {
+          "store": Object {},
+        },
+        "networkInterface": HTTPFetchNetworkInterface {
+          "_afterwares": Array [],
+          "_middlewares": Array [],
+          "_opts": Object {},
+          "_uri": "https://localhost:443/api/graphql",
+        },
+        "observableQueries": Object {},
+        "pollingTimers": Object {},
+        "queryDeduplication": true,
+        "queryDocuments": Object {},
+        "queryIdsByName": Object {},
+        "queryListeners": Object {},
+        "queryStore": QueryStore {
+          "store": Object {},
+        },
+        "reducerConfig": Object {
+          "addTypename": true,
+          "customResolvers": undefined,
+          "dataIdFromObject": [Function],
+          "fragmentMatcher": [Function],
+        },
+        "reduxRootSelector": [Function],
+        "scheduler": QueryScheduler {
+          "inFlightQueries": Object {},
+          "intervalQueries": Object {},
+          "pollingTimers": Object {},
+          "queryManager": [Circular],
+          "registeredQueries": Object {},
+        },
+        "ssrMode": false,
+        "store": Object {
+          "dispatch": [Function],
+          "getState": [Function],
+        },
+      },
+      "reducerConfig": Object {
+        "addTypename": true,
+        "customResolvers": undefined,
+        "dataIdFromObject": [Function],
+        "fragmentMatcher": [Function],
+      },
+      "resetStore": [Function],
+      "setStore": [Function],
+      "ssrMode": false,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+      },
+      "version": "1.9.2",
+      "watchQuery": [Function],
+    }
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(observable): [Function],
+    }
+  }
+>
+  <ReduxForm
+    defaultValue="test"
+    handleSubmit={[Function]}
+    loading={true}
+    onCancel={[Function]}
+  />
+</ApolloProvider>
+`;
+
+exports[`renders <Manifest /> without throwing 3`] = `
+<ApolloProvider
+  client={
+    ApolloClient {
+      "addTypename": true,
+      "dataId": [Function],
+      "dataIdFromObject": [Function],
+      "disableNetworkFetches": false,
+      "fieldWithArgs": [Function],
+      "fragmentMatcher": HeuristicFragmentMatcher {},
+      "initialState": Object {},
+      "middleware": [Function],
+      "mutate": [Function],
+      "networkInterface": HTTPFetchNetworkInterface {
+        "_afterwares": Array [],
+        "_middlewares": Array [],
+        "_opts": Object {},
+        "_uri": "https://localhost:443/api/graphql",
+      },
+      "query": [Function],
+      "queryDeduplication": true,
+      "queryManager": QueryManager {
+        "addTypename": true,
+        "deduplicator": Deduplicator {
+          "inFlightRequestPromises": Object {},
+          "networkInterface": HTTPFetchNetworkInterface {
+            "_afterwares": Array [],
+            "_middlewares": Array [],
+            "_opts": Object {},
+            "_uri": "https://localhost:443/api/graphql",
+          },
+        },
+        "disableBroadcasting": false,
+        "fetchQueryPromises": Object {},
+        "fragmentMatcher": HeuristicFragmentMatcher {},
+        "idCounter": 1,
+        "lastRequestId": Object {},
+        "mutationStore": MutationStore {
+          "store": Object {},
+        },
+        "networkInterface": HTTPFetchNetworkInterface {
+          "_afterwares": Array [],
+          "_middlewares": Array [],
+          "_opts": Object {},
+          "_uri": "https://localhost:443/api/graphql",
+        },
+        "observableQueries": Object {},
+        "pollingTimers": Object {},
+        "queryDeduplication": true,
+        "queryDocuments": Object {},
+        "queryIdsByName": Object {},
+        "queryListeners": Object {},
+        "queryStore": QueryStore {
+          "store": Object {},
+        },
+        "reducerConfig": Object {
+          "addTypename": true,
+          "customResolvers": undefined,
+          "dataIdFromObject": [Function],
+          "fragmentMatcher": [Function],
+        },
+        "reduxRootSelector": [Function],
+        "scheduler": QueryScheduler {
+          "inFlightQueries": Object {},
+          "intervalQueries": Object {},
+          "pollingTimers": Object {},
+          "queryManager": [Circular],
+          "registeredQueries": Object {},
+        },
+        "ssrMode": false,
+        "store": Object {
+          "dispatch": [Function],
+          "getState": [Function],
+        },
+      },
+      "reducerConfig": Object {
+        "addTypename": true,
+        "customResolvers": undefined,
+        "dataIdFromObject": [Function],
+        "fragmentMatcher": [Function],
+      },
+      "resetStore": [Function],
+      "setStore": [Function],
+      "ssrMode": false,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+      },
+      "version": "1.9.2",
+      "watchQuery": [Function],
+    }
+  }
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(observable): [Function],
+    }
+  }
+>
+  <ReduxForm
+    defaultValue="test"
+    handleSubmit={[Function]}
+    onCancel={[Function]}
+  />
+</ApolloProvider>
+`;

packages/cp-frontend/test/unit/components/manifest/editors.js

@@ -0,0 +1,54 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store } from '../../mocks';
+
+import { MEditor, EEditor } from '@components/manifest/editors';
+
+it('renders <MEditor /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <MEditor input="" defaultValue="" readOnly />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <MEditor /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <MEditor input="" defaultValue="" />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <EEditor /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <EEditor input="" defaultValue="" readOnly />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <EEditor /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <EEditor input="" defaultValue="" />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/environment.js

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store, files } from '../../mocks';
+import { reduxForm } from 'redux-form';
+
+import { Environment } from '@components/manifest';
+const TestEnvironmentForm = reduxForm({ form: 'testNameForm' })(Environment);
+
+it('renders <TestEnvironmentForm /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <TestEnvironmentForm
+          handleSubmit={() => {}}
+          onCancel={() => {}}
+          onAddFile={() => {}}
+          onRemoveFile={() => {}}
+          dirty
+          defaultValue=""
+          files={files}
+          loading
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <TestEnvironmentForm /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <TestEnvironmentForm
+          handleSubmit={() => {}}
+          onCancel={() => {}}
+          onAddFile={() => {}}
+          onRemoveFile={() => {}}
+          dirty
+          files={[]}
+          readOnly
+          loading
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/files.js

@@ -0,0 +1,29 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store, files } from '../../mocks';
+
+import { Files } from '@components/manifest';
+
+
+it('renders <Files /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Files
+          files={files}
+          id="test"
+          name="test"
+          value="test"
+          onRemoveFile={() => {}}
+          readOnly
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/manifest.js

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import 'jest-styled-components';
+import { Store } from '../../mocks';
+import { reduxForm } from 'redux-form';
+
+import { Manifest } from '@components/manifest';
+
+const ManifestTestForm = reduxForm({ form: 'ManifestTestForm' })(Manifest);
+
+it('renders <Manifest /> without throwing', () => {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+    <Store>
+      <ManifestTestForm
+        defaultValue="test"
+        handleSubmit={() => {}}
+        onCancel={() => {}}
+        dirty
+        loading
+      />
+    </Store>
+  );
+  const tree = renderer.getRenderOutput();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Manifest /> without throwing', () => {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+      <Store>
+        <ManifestTestForm
+          defaultValue="test"
+          handleSubmit={() => {}}
+          onCancel={() => {}}
+          loading
+        />
+      </Store>
+    )
+  const tree = renderer.getRenderOutput();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Manifest /> without throwing', () => {
+  const renderer = new ShallowRenderer();
+  renderer.render(
+      <Store>
+        <ManifestTestForm
+          defaultValue="test"
+          handleSubmit={() => {}}
+          onCancel={() => {}}
+        />
+      </Store>
+    )
+  const tree = renderer.getRenderOutput();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/name.js

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store } from '../../mocks';
+import { reduxForm } from 'redux-form';
+
+import { Name } from '@components/manifest';
+
+const TestNameForm = reduxForm({ form: 'testNameForm' })(Name);
+
+it('renders <Name /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <TestNameForm handleSubmit={() => {}} onCancel={() => {}} dirty />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Name /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <TestNameForm handleSubmit={() => {}} onCancel={() => {}} />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/progress.js

@@ -0,0 +1,98 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store } from '../../mocks';
+
+import { Progress } from '@components/manifest';
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="name" create />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="name" edit />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="manifest" create />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="environment" create />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="review" create />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="manifest" edit />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="environment" edit />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Progress /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Progress stage="review" edit />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/manifest/review.js

@@ -0,0 +1,64 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+import { Store, services } from '../../mocks';
+
+import { Review } from '@components/manifest';
+
+it('renders <Review /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Review
+          handleSubmit={() => {}}
+          onEnvironmentToggle={() => {}}
+          onCancel={() => {}}
+          dirty
+          loading
+          environmentToggles={{ name: test }}
+          state={{ services }}
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Review /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Review
+          handleSubmit={() => {}}
+          onEnvironmentToggle={() => {}}
+          onCancel={() => {}}
+          dirty
+          environmentToggles={{ name: test }}
+          state={{ services }}
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders <Review /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Review
+          handleSubmit={() => {}}
+          onEnvironmentToggle={() => {}}
+          onCancel={() => {}}
+          environmentToggles={{ name: test }}
+          state={{ services }}
+        />
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

packages/cp-frontend/test/unit/components/messaging/__snapshots__/error.js.snap

@@ -36,15 +36,50 @@ exports[`renders <Error /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <div
+  .c0 {
-    className="c1"
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+<div
+    className="c0"
     type="ERROR"
   />
-  <div
+  .c2 {
-    className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c1 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c1 {
-      className="c3 c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<p
+      className="c0 c1"
     >
       Ooops, there's been an error
     </p>

packages/cp-frontend/test/unit/components/messaging/__snapshots__/loader.js.snap

@@ -2,6 +2,7 @@
 
 exports[`renders <Loader /> without throwing 1`] = `
 .c1 {
+  -webkit-fill: ;
   fill: ;
   stroke: ;
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -9,6 +10,7 @@ exports[`renders <Loader /> without throwing 1`] = `
 }
 
 .c2 {
+  -webkit-fill: ;
   fill: ;
   stroke: ;
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -18,6 +20,7 @@ exports[`renders <Loader /> without throwing 1`] = `
 }
 
 .c3 {
+  -webkit-fill: ;
   fill: ;
   stroke: ;
   -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
@@ -74,34 +77,105 @@ exports[`renders <Loader /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <svg
+  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<svg
     height="10"
     width="28"
   >
-    <rect
+    .c0 {
-      className="c1"
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+}
+
+<rect
+      className="c0"
       height="6"
       width="6"
       x="2"
       y="2"
     />
-    <rect
+    .c0 {
-      className="c2"
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
+}
+
+<rect
+      className="c0"
       height="6"
       width="6"
       x="11"
       y="2"
     />
-    <rect
+    .c0 {
-      className="c3"
+  -webkit-fill: ;
+  fill: ;
+  stroke: ;
+  -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
+  animation: iCqDak 1.5s ease-out 0s infinite;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+<rect
+      className="c0"
       height="6"
       width="6"
       x="20"
       y="2"
     />
   </svg>
-  <p
+  .c0 {
-    className="c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+<p
+    className="c0"
   >
     Loading...
   </p>

packages/cp-frontend/test/unit/components/messaging/__snapshots__/modal-error.js.snap

@@ -52,17 +52,17 @@ exports[`renders <ModalError /> without throwing 1`] = `
 }
 
 .c5::-moz-focus-inner,
-.c5[type="button"]::-moz-focus-inner,
+.c5[type='button']::-moz-focus-inner,
-.c5[type="reset"]::-moz-focus-inner,
+.c5[type='reset']::-moz-focus-inner,
-.c5[type="submit"]::-moz-focus-inner {
+.c5[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 .c5:-moz-focusring,
-.c5[type="button"]:-moz-focusring,
+.c5[type='button']:-moz-focusring,
-.c5[type="reset"]:-moz-focusring,
+.c5[type='reset']:-moz-focusring,
-.c5[type="submit"]:-moz-focusring {
+.c5[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -142,19 +142,160 @@ exports[`renders <ModalError /> without throwing 1`] = `
 }
 
 <div>
-  <h2
+  .c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c1 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+.c0 {
+  color: ;
+}
+
+<h2
     className="c0 c1 c2"
   />
-  <p
+  .c1 {
-    className="c3 c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<p
+    className="c0 c1"
   >
     Modal error message
   </p>
-  <button
+  .c0 {
-    className="c5"
+  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;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c0::-moz-focus-inner,
+.c0[type='button']::-moz-focus-inner,
+.c0[type='reset']::-moz-focus-inner,
+.c0[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:-moz-focusring,
+.c0[type='button']:-moz-focusring,
+.c0[type='reset']:-moz-focusring,
+.c0[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0 + button {
+  margin-left: 1.25rem;
+}
+
+<button
+    className="c0"
     onClick={[Function]}
   >
     Close
+     
   </button>
 </div>
 `;

packages/cp-frontend/test/unit/components/messaging/__snapshots__/warning.js.snap

@@ -36,15 +36,50 @@ exports[`renders <Warning /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <div
+  .c0 {
-    className="c1"
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 100%;
+  background-color: ;
+}
+
+<div
+    className="c0"
     type="WARNING"
   />
-  <div
+  .c2 {
-    className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  padding: 0.75rem 0 0.84375rem 0;
+}
+
+.c1 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c1 {
-      className="c3 c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin: 0.09375rem 3.375rem 0 3.375rem;
+}
+
+<p
+      className="c0 c1"
     >
       Warning message
     </p>

packages/cp-frontend/test/unit/components/navigation/__snapshots__/header.js.snap

@@ -85,39 +85,275 @@ exports[`renders <Header /> without throwing 1`] = `
   height: 1.5625rem;
 }
 
+.c6 {
+  padding-left: 5px;
+}
+
 <div
   className="c0"
 >
-  <div
+  .c1 {
-    className="c1"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: ;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+}
+
+.c2 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<div
+    className="c0"
   >
-    <h2
+    .c0 {
-      className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: ;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c1 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<h2
+      className="c0"
     >
-      <a
+      .c0 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<a
         href="/"
         onClick={[Function]}
       >
-        <img
+        .c0 {
-          className="c3"
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<img
+          className="c0"
           src="test-file-mock"
         />
       </a>
     </h2>
   </div>
-  <div
+  .c1 {
-    className="c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+  width: 6.25rem;
+  max-width: 6.25rem;
+}
+
+.c2 {
+  padding-left: 5px;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c0 {
-      className="c5"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c1 {
+  padding-left: 5px;
+}
+
+<p
+      className="c0"
+    >
+      <svg
+        className=""
+        height="13"
+        viewBox="0 0 9 13"
+        width="9"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          icon: data center
+        </title>
+        <defs>
+          <linearGradient
+            id="a"
+            x1="49.967%"
+            x2="49.967%"
+            y1="100%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#E6E6E6"
             />
+            <stop
+              offset="100%"
+              stopColor="#FFF"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          d="M1174 34h9V21h-9v13zm2-2h5v-9h-5v9zm1-7h3.001v-1H1177v1zm0 2h3.001v-1H1177v1zm0 2h3.001v-1H1177v1z"
+          fill="url(#a)"
+          fillRule="evenodd"
+          transform="translate(-1174 -21)"
+        />
+      </svg>
+      .c0 {
+  padding-left: 5px;
+}
+
+<span
+        className="c0"
+      />
+    </p>
   </div>
-  <div
+  .c1 {
-    className="c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+  width: 6.25rem;
+  max-width: 6.25rem;
+}
+
+.c2 {
+  padding-left: 5px;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c0 {
-      className="c5"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c1 {
+  padding-left: 5px;
+}
+
+<p
+      className="c0"
+    >
+      <svg
+        className=""
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          Shape
+        </title>
+        <defs>
+          <linearGradient
+            id="a"
+            x1="49.967%"
+            x2="49.967%"
+            y1="100%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#E6E6E6"
             />
+            <stop
+              offset="100%"
+              stopColor="#FFF"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4C8.83 1.433 7.392 0 5.62 0z"
+          fill="url(#a)"
+          fillRule="nonzero"
+        />
+      </svg>
+      .c0 {
+  padding-left: 5px;
+}
+
+<span
+        className="c0"
+      />
+    </p>
   </div>
 </div>
 `;

packages/cp-frontend/test/unit/components/navigation/__snapshots__/menu.js.snap

@@ -34,8 +34,14 @@ exports[`renders <Menu /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <ul
+  .c0 {
-    className="c1"
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+<ul
+    className="c0"
   />
 </div>
 `;

packages/cp-frontend/test/unit/components/navigation/__snapshots__/not-found.js.snap

@@ -131,21 +131,209 @@ exports[`renders <NotFound /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <div
+  .c5 {
-    className="c1"
+  display: inline-block;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c5:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c2 {
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 2.25rem;
+  font-style: normal;
+  font-stretch: normal;
+  margin: 0;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin-top: 3.75rem;
+}
+
+.c1 {
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+.c3 {
+  margin-bottom: 1.875rem;
+  max-width: 30.625rem;
+}
+
+<div
+    className="c0"
   >
-    <h1
+    .c1 {
-      className="c2 c3"
+  font-size: 2rem;
+  margin: 0.625rem 0;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 2.25rem;
+  font-style: normal;
+  font-stretch: normal;
+  margin: 0;
+}
+
+.c0 {
+  font-weight: normal;
+  font-size: 2rem;
+}
+
+<h1
+      className="c0 c1"
     >
       I have no memory of this place
     </h1>
-    <p
+    .c1 {
-      className="c4 c5"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin-bottom: 1.875rem;
+  max-width: 30.625rem;
+}
+
+<p
+      className="c0 c1"
     >
       HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
     </p>
-    <a
+    .c0 {
-      className="c6"
+  display: inline-block;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+<a
+      className="c0"
       href="/deployment-groups"
       onClick={[Function]}
       primary={true}

packages/cp-frontend/test/unit/components/service/__snapshots__/delete.js.snap

@@ -52,17 +52,17 @@ exports[`renders <Delete /> without throwing 1`] = `
 }
 
 .c4::-moz-focus-inner,
-.c4[type="button"]::-moz-focus-inner,
+.c4[type='button']::-moz-focus-inner,
-.c4[type="reset"]::-moz-focus-inner,
+.c4[type='reset']::-moz-focus-inner,
-.c4[type="submit"]::-moz-focus-inner {
+.c4[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 .c4:-moz-focusring,
-.c4[type="button"]:-moz-focusring,
+.c4[type='button']:-moz-focusring,
-.c4[type="reset"]:-moz-focusring,
+.c4[type='reset']:-moz-focusring,
-.c4[type="submit"]:-moz-focusring {
+.c4[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -161,17 +161,17 @@ exports[`renders <Delete /> without throwing 1`] = `
 }
 
 .c5::-moz-focus-inner,
-.c5[type="button"]::-moz-focus-inner,
+.c5[type='button']::-moz-focus-inner,
-.c5[type="reset"]::-moz-focus-inner,
+.c5[type='reset']::-moz-focus-inner,
-.c5[type="submit"]::-moz-focus-inner {
+.c5[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 .c5:-moz-focusring,
-.c5[type="button"]:-moz-focusring,
+.c5[type='button']:-moz-focusring,
-.c5[type="reset"]:-moz-focusring,
+.c5[type='reset']:-moz-focusring,
-.c5[type="submit"]:-moz-focusring {
+.c5[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
@@ -230,7 +230,19 @@ exports[`renders <Delete /> without throwing 1`] = `
 }
 
 <div>
-  <h2
+  .c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.c0 {
+  line-height: 1.25;
+  color: ;
+  margin: 0 0 0.75rem 0;
+}
+
+<h2
     className="c0 c1"
   >
     Deleting a service: 
@@ -238,19 +250,235 @@ exports[`renders <Delete /> without throwing 1`] = `
      
     Nginx
   </h2>
-  <p
+  .c1 {
-    className="c2 c3"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  color: ;
+  margin: 0.75rem 0 1.875rem 0;
+}
+
+<p
+    className="c0 c1"
   >
     Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?
   </p>
-  <button
+  .c0 {
-    className="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;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  color: ;
+  background-color: ;
+  border-color: ;
+}
+
+.c0::-moz-focus-inner,
+.c0[type='button']::-moz-focus-inner,
+.c0[type='reset']::-moz-focus-inner,
+.c0[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:-moz-focusring,
+.c0[type='button']:-moz-focusring,
+.c0[type='reset']:-moz-focusring,
+.c0[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border-color: ;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-color: ;
+  border-color: ;
+}
+
+.c0 + button {
+  margin-left: 1.25rem;
+}
+
+<button
+    className="c0"
     onClick={[Function]}
   >
     Cancel
   </button>
-  <button
+  .c0 {
-    className="c5"
+  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;
+  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;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  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: ;
+  background-image: none;
+  background-color: ;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+}
+
+.c0::-moz-focus-inner,
+.c0[type='button']::-moz-focus-inner,
+.c0[type='reset']::-moz-focus-inner,
+.c0[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:-moz-focusring,
+.c0[type='button']:-moz-focusring,
+.c0[type='reset']:-moz-focusring,
+.c0[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c0:focus {
+  outline: 0;
+  text-decoration: none;
+  background-color: ;
+  border-color: ;
+}
+
+.c0:hover {
+  background-color: ;
+  border: solid 0.0625rem;
+}
+
+.c0:active,
+.c0:active:hover,
+.c0:active:focus {
+  background-image: none;
+  outline: 0;
+  background-color: ;
+  border-color: ;
+}
+
+.c0[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 + button {
+  margin-left: 1.25rem;
+}
+
+<button
+    className="c0"
     onClick={[Function]}
   >
     Delete service

packages/cp-frontend/test/unit/components/services/list-item.js

@@ -9,9 +9,6 @@ import 'jest-styled-components';
 import ServiceListItem from '@components/services/list-item';
 import { Router, service } from '../../mocks';
 
-
-console.log(service);
-
 it('renders <ServiceListItem /> without throwing', () => {
   const tree = renderer
     .create(

packages/cp-frontend/test/unit/containers/instances/__snapshots__/tooltip.js.snap

@@ -36,7 +36,7 @@ exports[`renders <InstancesTooltip /> without throwing 1`] = `
 
 .c2:after,
 .c2:before {
-  content: "";
+  content: '';
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -72,14 +72,139 @@ exports[`renders <InstancesTooltip /> without throwing 1`] = `
 <div
   className="c0"
 >
-  <div
+  .c3 {
-    className="c1"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  position: absolute;
+  top: auto;
+  left: auto;
+  bottom: ;
+  right: auto;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c1 {
+  position: relative;
+  display: inline-block;
+  top: 0.3125rem;
+  left: -50%;
+  margin: 0;
+  padding: 0.75rem 0;
+  background-color: ;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  z-index: 1000;
+}
+
+.c1:after,
+.c1:before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+}
+
+.c1:after {
+  border-bottom-color: ;
+  border-width: 0.1875rem;
+  margin-left: -0.1875rem;
+}
+
+.c1:before {
+  border-bottom-color: ;
+  border-width: 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.c2 {
+  margin: 0 1.125rem;
+  color: ;
+  white-space: nowrap;
+}
+
+<div
+    className="c0"
   >
-    <div
+    .c2 {
-      className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  position: relative;
+  display: inline-block;
+  top: 0.3125rem;
+  left: -50%;
+  margin: 0;
+  padding: 0.75rem 0;
+  background-color: ;
+  border: 0.0625rem solid;
+  box-shadow: 0 0.125rem 0.375rem 0.0625rem rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  z-index: 1000;
+}
+
+.c0:after,
+.c0:before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  height: 0;
+  width: 0;
+  border: solid transparent;
+}
+
+.c0:after {
+  border-bottom-color: ;
+  border-width: 0.1875rem;
+  margin-left: -0.1875rem;
+}
+
+.c0:before {
+  border-bottom-color: ;
+  border-width: 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.c1 {
+  margin: 0 1.125rem;
+  color: ;
+  white-space: nowrap;
+}
+
+<div
+      className="c0"
     >
-      <p
+      .c1 {
-        className="c3 c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+}
+
+.c0 {
+  margin: 0 1.125rem;
+  color: ;
+  white-space: nowrap;
+}
+
+<p
+        className="c0 c1"
       >
         Your instance is operating as expected
       </p>

packages/cp-frontend/test/unit/containers/manifest/__snapshots__/edit-or-create.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders <DeploymentGroupEditOrCreate /> without throwing 1`] = `null`;

packages/cp-frontend/test/unit/containers/navigation/__snapshots__/header.js.snap

@@ -85,39 +85,275 @@ exports[`renders <Header /> without throwing 1`] = `
   height: 1.5625rem;
 }
 
+.c6 {
+  padding-left: 5px;
+}
+
 <div
   className="c0"
 >
-  <div
+  .c1 {
-    className="c1"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: ;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+}
+
+.c2 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<div
+    className="c0"
   >
-    <h2
+    .c0 {
-      className="c2"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+  color: ;
+  font-size: 1.8125rem;
+  margin: 0;
+}
+
+.c1 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<h2
+      className="c0"
     >
-      <a
+      .c0 {
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<a
         href="/"
         onClick={[Function]}
       >
-        <img
+        .c0 {
-          className="c3"
+  border-style: none;
+  width: 5.4375rem;
+  height: 1.5625rem;
+}
+
+<img
+          className="c0"
           src="test-file-mock"
         />
       </a>
     </h2>
   </div>
-  <div
+  .c1 {
-    className="c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+  width: 6.25rem;
+  max-width: 6.25rem;
+}
+
+.c2 {
+  padding-left: 5px;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c0 {
-      className="c5"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c1 {
+  padding-left: 5px;
+}
+
+<p
+      className="c0"
+    >
+      <svg
+        className=""
+        height="13"
+        viewBox="0 0 9 13"
+        width="9"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          icon: data center
+        </title>
+        <defs>
+          <linearGradient
+            id="a"
+            x1="49.967%"
+            x2="49.967%"
+            y1="100%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#E6E6E6"
             />
+            <stop
+              offset="100%"
+              stopColor="#FFF"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          d="M1174 34h9V21h-9v13zm2-2h5v-9h-5v9zm1-7h3.001v-1H1177v1zm0 2h3.001v-1H1177v1zm0 2h3.001v-1H1177v1z"
+          fill="url(#a)"
+          fillRule="evenodd"
+          transform="translate(-1174 -21)"
+        />
+      </svg>
+      .c0 {
+  padding-left: 5px;
+}
+
+<span
+        className="c0"
+      />
+    </p>
   </div>
-  <div
+  .c1 {
-    className="c4"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c0 {
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+  -webkit-order: 0;
+  -ms-flex-order: 0;
+  order: 0;
+  padding: 0.9375rem 0;
+  width: 6.25rem;
+  max-width: 6.25rem;
+}
+
+.c2 {
+  padding-left: 5px;
+}
+
+<div
+    className="c0"
   >
-    <p
+    .c0 {
-      className="c5"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  line-height: 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  color: ;
+  margin: 0;
+}
+
+.c1 {
+  padding-left: 5px;
+}
+
+<p
+      className="c0"
+    >
+      <svg
+        className=""
+        height="12"
+        viewBox="0 0 12 12"
+        width="12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>
+          Shape
+        </title>
+        <defs>
+          <linearGradient
+            id="a"
+            x1="49.967%"
+            x2="49.967%"
+            y1="100%"
+            y2="0%"
+          >
+            <stop
+              offset="0%"
+              stopColor="#E6E6E6"
             />
+            <stop
+              offset="100%"
+              stopColor="#FFF"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4C8.83 1.433 7.392 0 5.62 0z"
+          fill="url(#a)"
+          fillRule="nonzero"
+        />
+      </svg>
+      .c0 {
+  padding-left: 5px;
+}
+
+<span
+        className="c0"
+      />
+    </p>
   </div>
 </div>
 `;

packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap

@@ -559,6 +559,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
@@ -600,12 +602,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   vertical-align: middle;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c10 {
-    text-align: right;
-  }
-}
-
 <div
   className="c0"
 >
@@ -1157,6 +1153,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
@@ -1198,12 +1196,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   vertical-align: middle;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c9 {
-    text-align: right;
-  }
-}
-
 <div
     className="c0"
     width={460}
@@ -1765,6 +1757,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
@@ -1806,12 +1800,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   vertical-align: middle;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c5 {
-    text-align: right;
-  }
-}
-
 <form
       onSubmit={[Function]}
     >
@@ -2002,6 +1990,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
@@ -2043,12 +2033,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   vertical-align: middle;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c1 {
-    text-align: right;
-  }
-}
-
 <fieldset
         className="c0"
         style={undefined}
@@ -2187,6 +2171,8 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
@@ -2228,12 +2214,6 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   vertical-align: middle;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c0 {
-    text-align: right;
-  }
-}
-
 <div>
           .c0 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -2241,16 +2221,12 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
+  font-weight: bold;
+  display: block;
   color: ;
   float: right;
 }
 
-@media only screen and (min-width:48.0625rem) {
-  .c0 {
-    text-align: right;
-  }
-}
-
 <label
             className="c0"
             form="scale-service"
@@ -2458,7 +2434,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
 
 <input
               className="c0 c1"
-              id="bCQKRx"
+              id="YOGS"
               name="replicas"
               onBlur={[Function]}
               onChange={[Function]}

packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap

@@ -1085,7 +1085,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 
 <li
               className="c0"
-              id="bvFZym"
+              id="ckYfBi"
             >
               .c1 {
   font-family: sans-serif;
@@ -1236,7 +1236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 <input
                   checked={false}
                   className="c0"
-                  id="cjPeBX"
+                  id="cjJOWd"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
@@ -1262,7 +1262,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 
 <label
                   className="c0"
-                  htmlFor="cjPeBX"
+                  htmlFor="cjJOWd"
                 >
                   List
                 </label>
@@ -1372,7 +1372,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 
 <li
               className="c0"
-              id="bvFZym"
+              id="ckYfBi"
             >
               .c1 {
   font-family: sans-serif;
@@ -1523,7 +1523,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 <input
                   checked={false}
                   className="c0"
-                  id="coLjmH"
+                  id="bVLDyd"
                   name="service-view"
                   onChange={[Function]}
                   type="radio"
@@ -1549,7 +1549,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
 
 <label
                   className="c0"
-                  htmlFor="coLjmH"
+                  htmlFor="bVLDyd"
                 >
                   Topology
                 </label>

packages/cp-frontend/test/unit/containers/services/__snapshots__/topology.js.snap

@@ -9,30 +9,36 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
 
 .c3 {
   stroke: ;
+  -webkit-fill: ;
   fill: ;
   stroke-width: 1.5;
   rx: 4;
   ry: 4;
   stroke: ;
+  -webkit-fill: ;
   fill: ;
 }
 
 .c4 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
+  -webkit-fill: ;
   fill: ;
   font-size: 16px;
   font-weight: 600;
+  -webkit-fill: ;
   fill: ;
   cursor: pointer;
 }
 
-.c9 {
+.c10 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
+  -webkit-fill: ;
   fill: ;
   font-size: 12px;
   opacity: 0.8;
+  -webkit-fill: ;
   fill: ;
 }
 
@@ -46,12 +52,21 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
 }
 
 .c6 {
+  -webkit-fill: ;
   fill: ;
+  -webkit-fill: ;
   fill: ;
 }
 
 .c8 {
+  -webkit-fill: ;
   fill: ;
+}
+
+.c9 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
   fill: ;
 }
 
@@ -74,15 +89,340 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
 }
 
 <div>
-  <div
+  .c5 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c3 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c4 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c10 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c7 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c7:focus {
+  outline: none;
+}
+
+.c6 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c8 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c9 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c2 {
+  width: 100%;
+  height: 1000px;
+}
+
+.c2:not(:root) {
+  overflow: hidden;
+}
+
+.c0 {
+  padding: 1.5rem;
+  background-color: ;
+}
+
+.c1 {
+  position: relative;
+}
+
+<div
     className="c0"
   >
-    <div
+    .c4 {
-      className="c1"
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c2 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c9 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c6 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c6:focus {
+  outline: none;
+}
+
+.c5 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c7 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c8 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  width: 100%;
+  height: 1000px;
+}
+
+.c1:not(:root) {
+  overflow: hidden;
+}
+
+.c0 {
+  position: relative;
+}
+
+<div
+      className="c0"
     >
-      <div>
+      .c3 {
-        <svg
+  stroke: ;
-          className="c2"
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c1 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c5 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c5:focus {
+  outline: none;
+}
+
+.c4 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c6 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c7 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c0 {
+  width: 100%;
+  height: 1000px;
+}
+
+.c0:not(:root) {
+  overflow: hidden;
+}
+
+<div>
+        .c3 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c1 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c8 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c5 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c5:focus {
+  outline: none;
+}
+
+.c4 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c6 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c7 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c0 {
+  width: 100%;
+  height: 1000px;
+}
+
+.c0:not(:root) {
+  overflow: hidden;
+}
+
+<svg
+          className="c0"
           id="topology-svg"
           onMouseMove={[Function]}
           onMouseUp={[Function]}
@@ -90,20 +430,194 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
         >
-          <g>
+          .c2 {
-            <g
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c0 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c7 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c4 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c5 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c6 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g>
+            .c2 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c0 {
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+.c7 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c4 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c3 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c5 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c6 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
               transform="translate(0, 0)"
             >
-              <rect
+              .c0 {
-                className="c3"
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+  stroke-width: 1.5;
+  rx: 4;
+  ry: 4;
+  stroke: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<rect
+                className="c0"
                 height={114}
                 width={180}
                 x={0}
                 y={0}
               />
-              <g>
+              .c0 {
-                <text
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-                  className="c4"
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+<g>
+                .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-fill: ;
+  fill: ;
+  cursor: pointer;
+}
+
+<text
+                  className="c0"
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   x={12}
@@ -112,36 +626,94 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
                   Nginx
                 </text>
               </g>
-              <g
+              .c0 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c2 {
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c2:focus {
+  outline: none;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                 transform="translate(140, 0)"
               >
-                <line
+                .c0 {
-                  className="c5"
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+<line
+                  className="c0"
                   x1={0}
                   x2={0}
                   y1={0}
                   y2={48}
                 />
-                <circle
+                .c0 {
-                  className="c6"
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<circle
+                  className="c0"
                   cx={20}
                   cy={18}
                   r={2}
                 />
-                <circle
+                .c0 {
-                  className="c6"
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<circle
+                  className="c0"
                   cx={20}
                   cy={24}
                   r={2}
                 />
-                <circle
+                .c0 {
-                  className="c6"
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<circle
+                  className="c0"
                   cx={20}
                   cy={30}
                   r={2}
                 />
-                <rect
+                .c0 {
-                  className="c7"
+  opacity: 0;
+  cursor: pointer;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+<rect
+                  className="c0"
                   height={48}
                   onClick={[Function]}
                   onKeyDown={[Function]}
@@ -150,61 +722,136 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
                   width={40}
                 />
               </g>
-              <g
+              .c0 {
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+.c3 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c2 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                 transform="translate(0, 48)"
               >
-                <line
+                .c0 {
-                  className="c5"
+  stroke: ;
+  stroke-width: 1.5;
+  stroke: ;
+}
+
+<line
+                  className="c0"
                   x1={0}
                   x2={180}
                   y1={0}
                   y2={0}
                 />
-                <g
+                .c2 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c0 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+.c1 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                   transform="translate(12, 11)"
                 >
-                  <g
+                  .c0 {
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                     transform="translate(0, 0)"
                   >
-                    <svg
+                    .c0 {
-                      className=""
+  -webkit-fill: ;
+  fill: ;
+}
+
+<svg
+                      className="c0"
+                      healthy="UNHEALTHY"
                       height="18"
                       viewBox="0 0 18 18"
                       width="18"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <title>
-                        icon: error
+                        icon: state
                       </title>
                       <g
-                        fill="none"
                         fillRule="evenodd"
                       >
                         <circle
                           cx="9"
                           cy="9"
-                          fill="#DA4B42"
                           r="9"
                         />
-                        <g
+                        <path
+                          d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
                           fill="#FFF"
-                        >
-                          <path
-                            d="M11.121 5.464l1.415 1.415-5.657 5.657-1.415-1.415z"
                         />
-                          <path
-                            d="M12.536 11.121l-1.415 1.415-5.657-5.657L6.88 5.464z"
-                          />
-                        </g>
                       </g>
                     </svg>
                   </g>
-                  <g
+                  .c0 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                     transform="translate(30, 4.5)"
                   >
-                    <svg
+                    .c0 {
+  -webkit-fill: ;
+  fill: ;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<svg
                       active={undefined}
-                      className="c8"
+                      className="c0"
                       consul={undefined}
                       height="9"
                       viewBox="0 0 18 9"
@@ -220,18 +867,51 @@ exports[`renders <ServicesTopology /> without throwing 1`] = `
                       />
                     </svg>
                   </g>
-                  <text
+                  .c0 {
-                    className="c9"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<text
+                    className="c0"
                     x={54}
                     y={14}
                   >
                     1 inst.
                   </text>
-                  <g
+                  .c0 {
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<g
                     transform="translate(54, 36)"
                   >
-                    <text
+                    .c0 {
-                      className="c9"
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  -webkit-fill: ;
+  fill: ;
+  font-size: 12px;
+  opacity: 0.8;
+  -webkit-fill: ;
+  fill: ;
+}
+
+<text
+                      className="c0"
                     >
                       1
             running

packages/cp-frontend/test/unit/containers/services/topology.js

@@ -9,6 +9,7 @@ import 'jest-styled-components';
 import { ServicesTopology } from '@containers/services/topology.js';
 import { Router, Store, services } from '../../mocks';
 
+
 it('renders <ServicesTopology /> without throwing', () => {
   const tree = renderer
     .create(

packages/cp-frontend/test/unit/mocks/data.js

@@ -24,8 +24,15 @@ export const deploymentGroup = {
   name: 'Wordpress Blog Example'
 };
 
+export const file = {
+  id: 'test',
+  onRemoveFile: () => {},
+  readOnly: true
+};
+
 export const services = [service];
 
 export const instances = [instance];
+export const files = [file];
 
 export const deploymentGroups = [deploymentGroup];

packages/cp-frontend/test/unit/state/selectors.js

@@ -1,6 +1,4 @@
 import {
-  deploymentGroupBySlugSelector,
-  serviceBySlugSelector,
   getInstanceStatuses,
   getInstancesActive,
   getInstancesHealthy,

packages/ui-toolkit/src/topology/node/info.js

@@ -61,7 +61,7 @@ const GraphNodeInfo = ({ data, pos }) => {
   const healthy = (
     <HealthyIcon
       healthy={
-        instancesHealthy.total === instancesHealthy.healthy ? (
+        instancesHealthy && instancesHealthy.total === instancesHealthy.healthy ? (
           'HEALTHY'
         ) : (
           'UNHEALTHY'