From 2f9d135319b67c389ff89abe9fef3d3681aba25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabio.moreira@yld.io>
Date: Wed, 30 May 2018 14:30:11 +0100
Subject: [PATCH] feat(instances): CI - Responsive behavior for tags #1121

---
 packages/instance-steps/src/tags/index.js     | 216 ++++++------
 .../resource-widgets/src/key-value/index.js   | 310 +++++++++---------
 2 files changed, 259 insertions(+), 267 deletions(-)

diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 499e6e86..24d2ccf8 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -10,7 +10,7 @@ import { reset } from 'redux-form';
 import { destroy } from 'redux-form';
 import get from 'lodash.get';
 import remcalc from 'remcalc';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 
 import Step, {
   Header as StepHeader,
@@ -55,114 +55,122 @@ const Tag = ({ name, value, onRemoveClick }) => (
   </Margin>
 );
 
-const TagsContainer = ({
-  handleValidate,
-  handleGetValue,
-  preview = [],
-  tags = [],
-  addOpen = true,
-  shouldAsyncValidate,
-  handleAddTag,
-  handleAsyncValidate,
-  handleChangeAddOpen,
-  handleRemoveTag,
-  handleCancelEdit,
-  ...props
-}) => (
-  <Step name="tags" getValue={handleGetValue} {...props}>
-    <StepHeader icon={<TagsIcon />}>Tags</StepHeader>
-    <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
-      Tags can be used to identify your instances, group multiple instances
-      together, define firewall and affinity rules, and more.
-    </StepDescription>
-    <StepPreview>
-      <Margin top="3">
-        <TagCount total={preview.length} />
-        <TagList>
-          {preview.map(({ name, value }, index) => (
-            <Tag name={name} value={value} />
-          ))}
-        </TagList>
-      </Margin>
-    </StepPreview>
-    <StepOutlet>
-      {({ next }) => (
-        <Fragment>
-          {tags.length ? (
-            <Margin top="5">
-              <TagCount total={tags.length} />
-              <TagList>
-                {tags.map(({ name, value }, index) => (
-                  <Tag
-                    name={name}
-                    value={value}
-                    onRemoveClick={() => handleRemoveTag(index)}
-                    id={`tag-${index}`}
-                  />
-                ))}
-              </TagList>
-            </Margin>
-          ) : null}
-          {addOpen ? (
+const TagsContainer = withTheme(
+  ({
+    handleValidate,
+    handleGetValue,
+    preview = [],
+    tags = [],
+    addOpen = true,
+    shouldAsyncValidate,
+    handleAddTag,
+    handleAsyncValidate,
+    handleChangeAddOpen,
+    handleRemoveTag,
+    handleCancelEdit,
+    theme = {},
+    ...props
+  }) => {
+    const mobile = theme.screen === 'mobile';
+    return (
+      <Step name="tags" getValue={handleGetValue} {...props}>
+        <StepHeader icon={<TagsIcon />}>Tags</StepHeader>
+        <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
+          Tags can be used to identify your instances, group multiple instances
+          together, define firewall and affinity rules, and more.
+        </StepDescription>
+        <StepPreview>
+          <Margin top="3">
+            <TagCount total={preview.length} />
+            <TagList>
+              {preview.map(({ name, value }, index) => (
+                <Tag name={name} value={value} />
+              ))}
+            </TagList>
+          </Margin>
+        </StepPreview>
+        <StepOutlet>
+          {({ next }) => (
             <Fragment>
-              <Margin top="2">
-                <ReduxForm
-                  form={IR_TAG_F_ADD}
-                  destroyOnUnmount={false}
-                  forceUnregisterOnUnmount={true}
-                  shouldAsyncValidate={shouldAsyncValidate}
-                  asyncValidate={handleValidate}
-                  onSubmit={handleAddTag}
-                >
-                  {props => (
-                    <Fragment>
-                      <KeyValue
-                        {...props}
-                        method="add"
-                        input="input"
-                        type="tag"
-                        id="tag"
-                        expanded
-                        borderless
-                        onCancel={() => handleChangeAddOpen(false)}
+              {tags.length ? (
+                <Margin top="5">
+                  <TagCount total={tags.length} />
+                  <TagList>
+                    {tags.map(({ name, value }, index) => (
+                      <Tag
+                        name={name}
+                        value={value}
+                        onRemoveClick={() => handleRemoveTag(index)}
+                        id={`tag-${index}`}
                       />
-                    </Fragment>
-                  )}
-                </ReduxForm>
-              </Margin>
-            </Fragment>
-          ) : (
-            <Margin top="5">
-              <Flex>
-                <FlexItem>
-                  <Margin right="1">
-                    <Button
-                      id="add-tag-button"
-                      type="button"
-                      onClick={() => handleChangeAddOpen(true)}
-                      secondary
+                    ))}
+                  </TagList>
+                </Margin>
+              ) : null}
+              {addOpen ? (
+                <Fragment>
+                  <Margin top="2">
+                    <ReduxForm
+                      form={IR_TAG_F_ADD}
+                      destroyOnUnmount={false}
+                      forceUnregisterOnUnmount={true}
+                      shouldAsyncValidate={shouldAsyncValidate}
+                      asyncValidate={handleValidate}
+                      onSubmit={handleAddTag}
                     >
-                      Add Tag
-                    </Button>
+                      {props => (
+                        <Fragment>
+                          <KeyValue
+                            {...props}
+                            method="add"
+                            input="input"
+                            type="tag"
+                            id="tag"
+                            expanded
+                            borderless
+                            onCancel={() => handleChangeAddOpen(false)}
+                          />
+                        </Fragment>
+                      )}
+                    </ReduxForm>
                   </Margin>
-                </FlexItem>
-                <FlexItem>
-                  <Button
-                    id="next-button-tags"
-                    type="button"
-                    component={Link}
-                    to={next}
-                  >
-                    Next
-                  </Button>
-                </FlexItem>
-              </Flex>
-            </Margin>
+                </Fragment>
+              ) : (
+                <Margin top="5">
+                  <Flex column={mobile}>
+                    <FlexItem>
+                      <Margin right={mobile ? '0' : '1'}>
+                        <Button
+                          id="add-tag-button"
+                          type="button"
+                          onClick={() => handleChangeAddOpen(true)}
+                          secondary
+                          fluid={mobile}
+                        >
+                          Add Tag
+                        </Button>
+                      </Margin>
+                    </FlexItem>
+                    <FlexItem>
+                      <Button
+                        id="next-button-tags"
+                        type="button"
+                        component={Link}
+                        to={next}
+                        fluid={mobile}
+                      >
+                        Next
+                      </Button>
+                    </FlexItem>
+                  </Flex>
+                </Margin>
+              )}
+            </Fragment>
           )}
-        </Fragment>
-      )}
-    </StepOutlet>
-  </Step>
+        </StepOutlet>
+      </Step>
+    );
+  }
 );
 
 export default compose(
diff --git a/packages/resource-widgets/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js
index 6b33b8d8..a8d44b92 100644
--- a/packages/resource-widgets/src/key-value/index.js
+++ b/packages/resource-widgets/src/key-value/index.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Margin, Padding } from 'styled-components-spacing';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
 import { Field } from 'redux-form';
 import remcalc from 'remcalc';
@@ -198,169 +198,152 @@ const InputKeyValue = ({
   </Flex>
 );
 
-export const KeyValue = ({
-  id = null,
-  disabled = false,
-  input = 'input',
-  type = 'metadata',
-  typeLabel = 'key',
-  method = 'add',
-  initialValues = {},
-  error = null,
-  expanded = true,
-  submitting = false,
-  pristine = true,
-  invalid = false,
-  removing = false,
-  onToggleExpanded,
-  onCancel = () => null,
-  onRemove = () => null,
-  editor = null,
-  onlyName = false,
-  onlyValue = false,
-  noRemove = false,
-  borderless = false,
-  shadow = true,
-  customHeader,
-  headless = false,
-  noActions = false
-}) => {
-  const handleHeaderClick = method === 'edit' && onToggleExpanded;
-  const mobile = theme.screen === 'mobile';
+export const KeyValue = withTheme(
+  ({
+    id = null,
+    disabled = false,
+    input = 'input',
+    type = 'metadata',
+    typeLabel = 'key',
+    method = 'add',
+    initialValues = {},
+    error = null,
+    expanded = true,
+    submitting = false,
+    pristine = true,
+    invalid = false,
+    removing = false,
+    onToggleExpanded,
+    onCancel = () => null,
+    onRemove = () => null,
+    editor = null,
+    onlyName = false,
+    onlyValue = false,
+    noRemove = false,
+    borderless = false,
+    shadow = true,
+    customHeader,
+    headless = false,
+    noActions = false,
+    theme = {}
+  }) => {
+    const handleHeaderClick = method === 'edit' && onToggleExpanded;
+    const mobile = theme.screen === 'mobile';
 
-  return (
-    <Card
-      collapsed={!expanded}
-      actionable={Boolean(handleHeaderClick)}
-      borderless={borderless}
-      headless={headless}
-      shadow={shadow}
-    >
-      {headless ? null : (
-        <Header
-          secondary={false}
-          transparent={false}
-          actionable={Boolean(handleHeaderClick)}
-          onClick={handleHeaderClick}
-        >
-          <PaddingMaxWidth
-            left={borderless ? '0' : '3'}
-            right={borderless ? '0' : '3'}
+    return (
+      <Card
+        collapsed={!expanded}
+        actionable={Boolean(handleHeaderClick)}
+        borderless={borderless}
+        headless={headless}
+        shadow={shadow}
+      >
+        {headless ? null : (
+          <Header
+            secondary={false}
+            transparent={false}
+            actionable={Boolean(handleHeaderClick)}
+            onClick={handleHeaderClick}
           >
-            <Flex alignCenter justifyBetween>
-              <Meta>
-                {method === 'add' || method === 'create' ? (
-                  <H4>{`${titleCase(method)} ${type}`}</H4>
-                ) : (
-                  <CollapsedKeyValue>
-                    {customHeader ? customHeader : null}
-                    {initialValues.name ? (
-                      <Fragment>
-                        {expanded ? (
-                          <span>{`${initialValues.name}${': '}`}</span>
-                        ) : (
-                          <Bold>{`${initialValues.name}${': '}`}</Bold>
-                        )}
-                        <span>{initialValues.value}</span>
-                      </Fragment>
-                    ) : null}
-                  </CollapsedKeyValue>
-                )}
-              </Meta>
-              {handleHeaderClick ? (
-                <ArrowIcon
-                  onClick={onToggleExpanded}
-                  direction={expanded ? 'up' : 'down'}
+            <PaddingMaxWidth
+              left={borderless ? '0' : '3'}
+              right={borderless ? '0' : '3'}
+            >
+              <Flex alignCenter justifyBetween>
+                <Meta>
+                  {method === 'add' || method === 'create' ? (
+                    <H4>{`${titleCase(method)} ${type}`}</H4>
+                  ) : (
+                    <CollapsedKeyValue>
+                      {customHeader ? customHeader : null}
+                      {initialValues.name ? (
+                        <Fragment>
+                          {expanded ? (
+                            <span>{`${initialValues.name}${': '}`}</span>
+                          ) : (
+                            <Bold>{`${initialValues.name}${': '}`}</Bold>
+                          )}
+                          <span>{initialValues.value}</span>
+                        </Fragment>
+                      ) : null}
+                    </CollapsedKeyValue>
+                  )}
+                </Meta>
+                {handleHeaderClick ? (
+                  <ArrowIcon
+                    onClick={onToggleExpanded}
+                    direction={expanded ? 'up' : 'down'}
+                  />
+                ) : null}
+              </Flex>
+            </PaddingMaxWidth>
+          </Header>
+        )}
+        {expanded ? (
+          <CardOutlet>
+            <Padding
+              top={headless ? '0' : '3'}
+              bottom={borderless ? '0' : '3'}
+              horizontal={borderless ? '0' : '3'}
+            >
+              {error && !submitting ? (
+                <Row>
+                  <Col xs="12">
+                    <Margin bottom="5">
+                      <Message error>
+                        <MessageTitle>Ooops!</MessageTitle>
+                        <MessageDescription>{error}</MessageDescription>
+                      </Message>
+                    </Margin>
+                  </Col>
+                </Row>
+              ) : null}
+              {input === 'input' ? (
+                <InputKeyValue
+                  id={id}
+                  onBlur={null}
+                  type={type}
+                  typeLabel={typeLabel}
+                  submitting={disabled || submitting}
+                  onlyName={onlyName}
+                  onlyValue={onlyValue}
+                  fluid={mobile}
                 />
               ) : null}
-            </Flex>
-          </PaddingMaxWidth>
-        </Header>
-      )}
-      {expanded ? (
-        <CardOutlet>
-          <Padding
-            top={headless ? '0' : '3'}
-            bottom={borderless ? '0' : '3'}
-            horizontal={borderless ? '0' : '3'}
-          >
-            {error && !submitting ? (
-              <Row>
-                <Col xs="12">
-                  <Margin bottom="5">
-                    <Message error>
-                      <MessageTitle>Ooops!</MessageTitle>
-                      <MessageDescription>{error}</MessageDescription>
-                    </Message>
-                  </Margin>
-                </Col>
-              </Row>
-            ) : null}
-            {input === 'input' ? (
-              <InputKeyValue
-                id={id}
-                onBlur={null}
-                type={type}
-                typeLabel={typeLabel}
-                submitting={disabled || submitting}
-                onlyName={onlyName}
-                onlyValue={onlyValue}
-                fluid={mobile}
-              />
-            ) : null}
-            {input === 'textarea' ? (
-              <TextareaKeyValue
-                id={id}
-                type={type}
-                submitting={disabled || submitting}
-                onlyName={onlyName}
-                onlyValue={onlyValue}
-                editor={editor}
-              />
-            ) : null}
-            {input !== 'textarea' && input !== 'input'
-              ? input(submitting)
-              : null}
-            <Margin top={mobile ? '3' : '2'}>
-              <Row between="xs" middle="xs">
-                <Col xs={method === 'add' ? '12' : '7'} mobile={mobile}>
-                  <Margin top={mobile ? '1' : '0'} inline>
-                    <MarginalButton
-                      id={id ? 'kv-cancel-button-' + id : null}
-                      type="button"
-                      onClick={onCancel}
-                      disabled={disabled || submitting}
-                      secondary
-                      fluid={mobile}
-                    >
-                      <span>Cancel</span>
-                    </MarginalButton>
-                  </Margin>
-                  <Button
-                    id={id ? 'kv-submit-button-' + id : null}
-                    type="submit"
-                    disabled={pristine || invalid}
-                    loading={submitting && !removing}
-                    fluid={mobile}
-                  >
-                    <span>{method === 'add' ? 'Create' : 'Save'}</span>
-                  </Button>
-                </Col>
-                {!noRemove && (
-                  <Col xs={method === 'add' ? false : '5'}>
-                    <Button
-                      type="button"
-                      onClick={onCancel}
-                      disabled={disabled || submitting}
-                      secondary
-                    >
-                      <span>Cancel</span>
-                    </MarginalButton>
+              {input === 'textarea' ? (
+                <TextareaKeyValue
+                  id={id}
+                  type={type}
+                  submitting={disabled || submitting}
+                  onlyName={onlyName}
+                  onlyValue={onlyValue}
+                  editor={editor}
+                />
+              ) : null}
+              {input !== 'textarea' && input !== 'input'
+                ? input(submitting)
+                : null}
+              <Margin top={mobile ? '3' : '2'}>
+                <Row between="xs" middle="xs">
+                  <Col xs={method === 'add' ? '12' : '7'} mobile={mobile}>
+                    <Margin top={mobile ? '1' : '0'} inline>
+                      <MarginalButton
+                        id={id ? 'kv-cancel-button-' + id : null}
+                        type="button"
+                        onClick={onCancel}
+                        disabled={disabled || submitting}
+                        secondary
+                        fluid={mobile}
+                      >
+                        <span>Cancel</span>
+                      </MarginalButton>
+                    </Margin>
                     <Button
                       id={id ? 'kv-submit-button-' + id : null}
                       type="submit"
                       disabled={pristine || invalid}
                       loading={submitting && !removing}
+                      fluid={mobile}
                     >
                       <span>{method === 'add' ? 'Create' : 'Save'}</span>
                     </Button>
@@ -378,7 +361,7 @@ export const KeyValue = ({
                         error
                         id={id ? 'kv-remove-button-' + id : null}
                       >
-                        <Margin right="2">
+                        <Margin right={2}>
                           <DeleteIcon
                             disabled={disabled || submitting}
                             fill={disabled || submitting ? undefined : 'red'}
@@ -390,13 +373,14 @@ export const KeyValue = ({
                   )}
                 </Row>
               </Margin>
-            )}
-          </Padding>
-        </CardOutlet>
-      ) : null}
-    </Card>
-  );
-};
+              )}
+            </Padding>
+          </CardOutlet>
+        ) : null}
+      </Card>
+    );
+  }
+);
 
 KeyValue.propTypes = {
   input: PropTypes.oneOf(['input', 'textarea']).isRequired,