Correctly space machine name form.

bethcollins92 · Nov 9, 2020 · 10c784e · 10c784e
1 parent 415f2b3
commit 10c784e
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 13 deletions.
diff --git a/ui/src/app/base/components/FormikFormButtons/FormikFormButtons.js b/ui/src/app/base/components/FormikFormButtons/FormikFormButtons.js
@@ -15,6 +15,7 @@ export const FormikFormButtons = ({
       {onCancel ? (
         <Button
           appearance="base"
+          className="u-no-margin--bottom"
           disabled={cancelDisabled}
           onClick={onCancel}
           type="button"

diff --git a/ui/src/app/machines/views/MachineDetails/MachineHeader/MachineName/MachineName.test.tsx b/ui/src/app/machines/views/MachineDetails/MachineHeader/MachineName/MachineName.test.tsx
@@ -6,6 +6,8 @@ import configureStore from "redux-mock-store";
 import React from "react";
 
 import {
+  domain as domainFactory,
+  domainState as domainStateFactory,
   generalState as generalStateFactory,
   machineDetails as machineDetailsFactory,
   machineState as machineStateFactory,
@@ -21,8 +23,12 @@ const mockStore = configureStore();
 
 describe("MachineName", () => {
   let state: RootState;
+  const domain = domainFactory({ id: 99 });
   beforeEach(() => {
     state = rootStateFactory({
+      domain: domainStateFactory({
+        items: [domain],
+      }),
       general: generalStateFactory({
         powerTypes: powerTypesStateFactory({
           data: [powerTypeFactory()],
@@ -32,6 +38,7 @@ describe("MachineName", () => {
         loaded: true,
         items: [
           machineDetailsFactory({
+            domain,
             locked: false,
             permissions: ["edit"],
             system_id: "abc123",

diff --git a/...es/views/MachineDetails/MachineHeader/MachineName/__snapshots__/MachineName.test.tsx.snap b/...es/views/MachineDetails/MachineHeader/MachineName/__snapshots__/MachineName.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`MachineName can display the form 1`] = `
 <FormikForm
   initialValues={
     Object {
-      "domain": 106,
+      "domain": 99,
       "hostname": "test-machine-() => Math.floor(Math.random() * MAX_RANDOM_VALUE) + MIN_RANDOM_VALUE",
     }
   }
@@ -117,7 +117,7 @@ exports[`MachineName can display the form 1`] = `
   <Formik
     initialValues={
       Object {
-        "domain": 106,
+        "domain": 99,
         "hostname": "test-machine-() => Math.floor(Math.random() * MAX_RANDOM_VALUE) + MIN_RANDOM_VALUE",
       }
     }
@@ -220,7 +220,7 @@ exports[`MachineName can display the form 1`] = `
       buttonsBordered={true}
       initialValues={
         Object {
-          "domain": 106,
+          "domain": 99,
           "hostname": "test-machine-() => Math.floor(Math.random() * MAX_RANDOM_VALUE) + MIN_RANDOM_VALUE",
         }
       }
@@ -247,7 +247,7 @@ exports[`MachineName can display the form 1`] = `
               required={true}
               style={
                 Object {
-                  "width": "69.7ch",
+                  "width": "82ch",
                 }
               }
               takeFocus={true}
@@ -265,7 +265,7 @@ exports[`MachineName can display the form 1`] = `
                 required={true}
                 style={
                   Object {
-                    "width": "69.7ch",
+                    "width": "82ch",
                   }
                 }
                 takeFocus={true}
@@ -295,7 +295,7 @@ exports[`MachineName can display the form 1`] = `
                         onChange={[Function]}
                         style={
                           Object {
-                            "width": "69.7ch",
+                            "width": "82ch",
                           }
                         }
                         type="text"
@@ -306,7 +306,9 @@ exports[`MachineName can display the form 1`] = `
                 </Field>
               </Input>
             </FormikField>
-            .
+            <span>
+              .
+            </span>
             <Spinner
               className="u-width--auto"
               inline={true}
@@ -332,12 +334,13 @@ exports[`MachineName can display the form 1`] = `
             <div>
               <Button
                 appearance="base"
+                className="u-no-margin--bottom"
                 disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <button
-                  className="p-button--base"
+                  className="p-button--base u-no-margin--bottom"
                   disabled={false}
                   onClick={[Function]}
                   type="button"

diff --git a/ui/src/app/machines/views/MachineDetails/MachineHeader/MachineName/_index.scss b/ui/src/app/machines/views/MachineDetails/MachineHeader/MachineName/_index.scss
@@ -16,7 +16,10 @@
   [type="text"].machine-name__hostname {
     @extend %vf-heading-4;
     box-sizing: content-box;
+    margin-bottom: -1px;
     min-width: 3rem;
-    padding: calc(#{$sp-xx-small} - 1px) $spv-inner--large;
+    // Remove 2px to account for the top and bottom borders.
+    padding: calc(#{$sp-xx-small} - 2px) $spv-inner--large
+      calc(#{$sp-xx-small} + 1px);
   }
 }
diff --git a/...c/app/machines/views/MachineDetails/MachineHeader/MachineNameFields/MachineNameFields.tsx b/...c/app/machines/views/MachineDetails/MachineHeader/MachineNameFields/MachineNameFields.tsx
@@ -24,13 +24,14 @@ export const MachineNameFields = ({ saving }: Props): JSX.Element => {
         disabled={saving}
         name="hostname"
         required={true}
-        style={{ width: `${values.hostname.length * 0.85}ch` }}
+        style={{ width: `${values.hostname.length}ch` }}
         takeFocus
         wrapperClassName="u-nudge-left--small"
       />
-      .
+      <span>.</span>
       {domainsLoaded ? (
         <FormikField
+          className="u-no-margin--bottom"
           component={Select}
           disabled={saving}
           name="domain"

diff --git a/...hineDetails/MachineHeader/MachineNameFields/__snapshots__/MachineNameFields.test.tsx.snap b/...hineDetails/MachineHeader/MachineNameFields/__snapshots__/MachineNameFields.test.tsx.snap
@@ -65,15 +65,19 @@ exports[`MachineNameFields displays the fields 1`] = `
       </Field>
     </Input>
   </FormikField>
-  .
+  <span>
+    .
+  </span>
   <FormikField
+    className="u-no-margin--bottom"
     component={[Function]}
     name="domain"
     options={Array []}
     required={true}
     wrapperClassName="u-no-margin--left u-nudge-right--small u-nudge-left--small"
   >
     <Select
+      className="u-no-margin--bottom"
       error={null}
       id="Uakgb_J5m9g-0JDMbcJqLJ"
       name="domain"
@@ -101,7 +105,7 @@ exports[`MachineNameFields displays the fields 1`] = `
               className="p-form-validation__select-wrapper"
             >
               <select
-                className="p-form-validation__input"
+                className="p-form-validation__input u-no-margin--bottom"
                 id="Uakgb_J5m9g-0JDMbcJqLJ"
                 name="domain"
                 onBlur={[Function]}