From 0bccbc198853d6a2968fae578c0044014050a852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 4 Jan 2018 10:56:10 +0000
Subject: [PATCH] fix(my-joy-beta): don't update header when editing keyValue

---
 .../src/components/instances/key-value.js     | 25 ++++++++++---------
 .../src/containers/instances/tags.js          | 16 ++++++++----
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/my-joy-beta/src/components/instances/key-value.js b/packages/my-joy-beta/src/components/instances/key-value.js
index 80e489bb..bb0166de 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -114,6 +114,7 @@ export const KeyValue = ({
   input = 'input',
   type = 'metadata',
   method = 'add',
+  initialValues = {},
   error = null,
   expanded = true,
   submitting = false,
@@ -142,18 +143,14 @@ export const KeyValue = ({
             <H4>{`${titleCase(method)} ${type}`}</H4>
           ) : (
             <CollapsedKeyValue>
-              <Field
-                name="name"
-                type="text"
-                component={({ input = {} }) =>
-                  !expanded ? `${input.value}: ` : <b>{`${input.value}: `}</b>
-                }
-              />,
-              <Field
-                name="value"
-                type="text"
-                component={({ input = {} }) => <span>{input.value}</span>}
-              />
+              <span>
+                {!expanded ? (
+                  `${initialValues.name}: `
+                ) : (
+                  <b>{`${initialValues.name}: `}</b>
+                )}
+              </span>
+              <span>{initialValues.value}</span>
             </CollapsedKeyValue>
           )}
         </CardHeaderMeta>
@@ -233,6 +230,10 @@ KeyValue.propTypes = {
   input: PropTypes.oneOf(['input', 'textarea']).isRequired,
   type: PropTypes.string.isRequired,
   method: PropTypes.oneOf(['add', 'edit']).isRequired,
+  initialValues: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  }).isRequired,
   removing: PropTypes.bool.isRequired,
   expanded: PropTypes.bool.isRequired,
   onToggleExpanded: PropTypes.func,
diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js
index dae06ddd..ee0a0334 100644
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@@ -92,12 +92,18 @@ export const Tags = ({
       form={editing.form}
       initialValues={{ name: editing.name, value: editing.value }}
       onSubmit={handleEdit}
-      onCancel={() => handleToggleEditing(false)}
-      onToggleExpanded={() => handleToggleEditing(false)}
-      onRemove={() => handleRemove(editing.form, editing)}
-      removing={editing.removing}
     >
-      {TagsEditForm}
+      {props => (
+        <TagsEditForm
+          {...props}
+          /* yeah, we need this here too */
+          initialValues={{ name: editing.name, value: editing.value }}
+          onCancel={() => handleToggleEditing(false)}
+          onToggleExpanded={() => handleToggleEditing(false)}
+          onRemove={() => handleRemove(editing.form, editing)}
+          removing={editing.removing}
+        />
+      )}
     </ReduxForm>
   ) : null;