From 7a8d8682726e42c834b4ffccf9dbb057fa0ce27e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 20 May 2019 14:33:06 +0200
Subject: [PATCH] Render KV Array with non-overlapping keys (#1154)

---
 packages/ui-app/src/Dropdown.tsx              |  4 +-
 packages/ui-app/src/Input.tsx                 |  6 +-
 packages/ui-app/src/InputAddress/index.tsx    |  4 +-
 packages/ui-app/src/InputBalance.tsx          |  4 +-
 packages/ui-app/src/InputFile.tsx             |  4 +-
 packages/ui-app/src/InputNumber.tsx           |  3 +-
 packages/ui-app/src/Labelled.tsx              | 67 +++++++++++--------
 packages/ui-params/src/Param/Account.tsx      |  1 +
 packages/ui-params/src/Param/Amount.tsx       |  1 +
 packages/ui-params/src/Param/Balance.tsx      |  1 +
 packages/ui-params/src/Param/Base.tsx         |  1 +
 packages/ui-params/src/Param/BaseBytes.tsx    |  1 +
 packages/ui-params/src/Param/Bool.tsx         |  1 +
 packages/ui-params/src/Param/File.tsx         |  1 +
 .../ui-params/src/Param/KeyValueArray.tsx     | 45 +++++++------
 15 files changed, 90 insertions(+), 54 deletions(-)

diff --git a/packages/ui-app/src/Dropdown.tsx b/packages/ui-app/src/Dropdown.tsx
index 7c895de585..dfb4bfc9b3 100644
--- a/packages/ui-app/src/Dropdown.tsx
+++ b/packages/ui-app/src/Dropdown.tsx
@@ -30,6 +30,7 @@ type Props<Option> = BareProps & {
   renderLabel?: (item: any) => any,
   transform?: (value: any) => any,
   value?: any,
+  withEllipsis?: boolean,
   withLabel?: boolean
 };
 
@@ -60,7 +61,7 @@ export default class Dropdown<Option> extends React.PureComponent<Props<Option>>
   }
 
   render () {
-    const { allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isMultiple, label, onSearch, options, placeholder, renderLabel, style, withLabel, value } = this.props;
+    const { allowAdd = false, className, defaultValue, dropdownClassName, help, isButton, isDisabled, isError, isMultiple, label, onSearch, options, placeholder, renderLabel, style, withEllipsis, withLabel, value } = this.props;
     const dropdown = (
       <SUIDropdown
         allowAdditions={allowAdd}
@@ -98,6 +99,7 @@ export default class Dropdown<Option> extends React.PureComponent<Props<Option>>
           help={help}
           label={label}
           style={style}
+          withEllipsis={withEllipsis}
           withLabel={withLabel}
         >
           {dropdown}
diff --git a/packages/ui-app/src/Input.tsx b/packages/ui-app/src/Input.tsx
index f34be2da68..66907cf9d6 100644
--- a/packages/ui-app/src/Input.tsx
+++ b/packages/ui-app/src/Input.tsx
@@ -39,7 +39,8 @@ type Props = BareProps & {
   tabIndex?: number,
   type?: Input$Type,
   value?: any,
-  withLabel?: boolean
+  withLabel?: boolean,
+  withEllipsis?: boolean
 };
 
 type State = {
@@ -93,7 +94,7 @@ export default class Input extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, maxLength, min, name, placeholder, style, tabIndex, type = 'text', value, withLabel } = this.props;
+    const { autoFocus = false, children, className, defaultValue, help, icon, isEditable = false, isAction = false, isDisabled = false, isError = false, isHidden = false, label, max, maxLength, min, name, placeholder, style, tabIndex, type = 'text', value, withEllipsis, withLabel } = this.props;
 
     return (
       <Labelled
@@ -101,6 +102,7 @@ export default class Input extends React.PureComponent<Props, State> {
         help={help}
         label={label}
         style={style}
+        withEllipsis={withEllipsis}
         withLabel={withLabel}
       >
         <SUIInput
diff --git a/packages/ui-app/src/InputAddress/index.tsx b/packages/ui-app/src/InputAddress/index.tsx
index 19f59d5fde..480359eb12 100644
--- a/packages/ui-app/src/InputAddress/index.tsx
+++ b/packages/ui-app/src/InputAddress/index.tsx
@@ -34,6 +34,7 @@ type Props = BareProps & {
   placeholder?: string,
   type?: KeyringOption$Type,
   value?: string | Uint8Array | Array<string>,
+  withEllipsis?: boolean,
   withLabel?: boolean
 };
 
@@ -121,7 +122,7 @@ class InputAddress extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withLabel } = this.props;
+    const { className, defaultValue, help, hideAddress = false, isDisabled = false, isError, isMultiple, label, options, optionsAll, placeholder, type = DEFAULT_TYPE, style, withEllipsis, withLabel } = this.props;
     const { value } = this.state;
     const hasOptions = (options && options.length !== 0) || (optionsAll && Object.keys(optionsAll[type]).length !== 0);
 
@@ -180,6 +181,7 @@ class InputAddress extends React.PureComponent<Props, State> {
             ? undefined
             : value
         }
+        withEllipsis={withEllipsis}
         withLabel={withLabel}
       />
     );
diff --git a/packages/ui-app/src/InputBalance.tsx b/packages/ui-app/src/InputBalance.tsx
index b93132296c..53ed1bd262 100644
--- a/packages/ui-app/src/InputBalance.tsx
+++ b/packages/ui-app/src/InputBalance.tsx
@@ -20,6 +20,7 @@ type Props = BareProps & {
   onChange?: (value?: BN) => void,
   placeholder?: string,
   value?: BN | string,
+  withEllipsis?: boolean,
   withLabel?: boolean,
   withMax?: boolean
 };
@@ -28,7 +29,7 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
 
 export default class InputBalance extends React.PureComponent<Props> {
   render () {
-    const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withLabel, withMax } = this.props;
+    const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
 
     return (
       <InputNumber
@@ -46,6 +47,7 @@ export default class InputBalance extends React.PureComponent<Props> {
         placeholder={placeholder}
         style={style}
         value={value}
+        withEllipsis={withEllipsis}
         withLabel={withLabel}
         withMax={withMax}
       />
diff --git a/packages/ui-app/src/InputFile.tsx b/packages/ui-app/src/InputFile.tsx
index b0e7572fd3..901cf3b332 100644
--- a/packages/ui-app/src/InputFile.tsx
+++ b/packages/ui-app/src/InputFile.tsx
@@ -23,6 +23,7 @@ type Props = BareProps & WithTranslation & {
   label: React.ReactNode,
   onChange?: (contents: Uint8Array, name: string) => void,
   placeholder?: React.ReactNode | null,
+  withEllipsis?: boolean,
   withLabel?: boolean
 };
 
@@ -43,13 +44,14 @@ class InputFile extends React.PureComponent<Props, State> {
   state: State = {};
 
   render () {
-    const { accept, className, clearContent, help, isDisabled, isError = false, label, placeholder, t, withLabel } = this.props;
+    const { accept, className, clearContent, help, isDisabled, isError = false, label, placeholder, t, withEllipsis, withLabel } = this.props;
     const { file } = this.state;
 
     return (
       <Labelled
         help={help}
         label={label}
+        withEllipsis={withEllipsis}
         withLabel={withLabel}
       >
         <Dropzone
diff --git a/packages/ui-app/src/InputNumber.tsx b/packages/ui-app/src/InputNumber.tsx
index a7a972d2e4..5a796d375a 100644
--- a/packages/ui-app/src/InputNumber.tsx
+++ b/packages/ui-app/src/InputNumber.tsx
@@ -30,6 +30,7 @@ type Props = BareProps & I18nProps & {
   onChange?: (value?: BN) => void,
   placeholder?: string,
   value?: BN | string,
+  withEllipsis?: boolean,
   withLabel?: boolean,
   withMax?: boolean
 };
@@ -108,8 +109,8 @@ class InputNumber extends React.PureComponent<Props, State> {
         onPaste={this.onPaste}
         placeholder={t('Positive number')}
         style={style}
-        value={value}
         type='text'
+        value={value}
       >
         {(withMax && !!maxValue) && this.renderMaxButton()}
         {isSi && this.renderSiDropdown()}
diff --git a/packages/ui-app/src/Labelled.tsx b/packages/ui-app/src/Labelled.tsx
index 8050f2dc3c..324a9117a2 100644
--- a/packages/ui-app/src/Labelled.tsx
+++ b/packages/ui-app/src/Labelled.tsx
@@ -18,7 +18,8 @@ type Props = BareProps & {
   isSmall?: boolean,
   label?: React.ReactNode,
   children: React.ReactNode,
-  withLabel?: boolean
+  withLabel?: boolean,
+  withEllipsis?: boolean
 };
 
 type State = {
@@ -32,6 +33,12 @@ const defaultLabel: any = (// node?
 const Wrapper = styled.div`
   display: block;
 
+  .withEllipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   > label {
     margin: 0.25rem 0 0 0;
     padding-right: 0.5rem;
@@ -88,32 +95,6 @@ export default class Labelled extends React.PureComponent<Props, State> {
     };
   }
 
-  toggleTooltip () {
-    const { tooltipOpen } = this.state;
-    this.setState({ tooltipOpen: !tooltipOpen });
-  }
-
-  renderLabel () {
-    const { help, label = defaultLabel } = this.props;
-    const { tooltipOpen } = this.state;
-
-    return help
-      ? <label className='with-help' >
-          {label}
-          <Icon
-            name='help circle'
-            data-tip
-            data-for='controlled-trigger'
-            onMouseOver={() => this.toggleTooltip()}
-            onMouseOut={() => this.toggleTooltip()}
-          />
-          {tooltipOpen && (
-            <Tooltip trigger={'controlled-trigger'}>
-              {help}
-            </Tooltip>)}
-        </label>
-      : <label>{label}</label>;
-  }
   render () {
     const { className, children, isSmall, isHidden, style, withLabel = true } = this.props;
 
@@ -137,4 +118,36 @@ export default class Labelled extends React.PureComponent<Props, State> {
       </Wrapper>
     );
   }
+
+  private renderLabel () {
+    const { help, label = defaultLabel, withEllipsis } = this.props;
+    const { tooltipOpen } = this.state;
+    const displayLabel = withEllipsis
+      ? <div className='withEllipsis'>{label}</div>
+      : label;
+
+    return help
+      ? <label className='with-help' >
+          {displayLabel}
+          <Icon
+            name='help circle'
+            data-tip
+            data-for='controlled-trigger'
+            onMouseOver={this.toggleTooltip}
+            onMouseOut={this.toggleTooltip}
+          />
+          {tooltipOpen && (
+            <Tooltip trigger='controlled-trigger'>
+              {help}
+            </Tooltip>
+          )}
+        </label>
+      : <label>{displayLabel}</label>;
+  }
+
+  private toggleTooltip = () => {
+    this.setState(({ tooltipOpen }: State) => ({
+      tooltipOpen: !tooltipOpen
+    }));
+  }
 }
diff --git a/packages/ui-params/src/Param/Account.tsx b/packages/ui-params/src/Param/Account.tsx
index 021b116c90..03ad9702e7 100644
--- a/packages/ui-params/src/Param/Account.tsx
+++ b/packages/ui-params/src/Param/Account.tsx
@@ -29,6 +29,7 @@ export default class Account extends React.PureComponent<Props> {
           label={label}
           onChange={this.onChange}
           placeholder='5...'
+          withEllipsis
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/Amount.tsx b/packages/ui-params/src/Param/Amount.tsx
index 7347134a5a..c22a1e6266 100644
--- a/packages/ui-params/src/Param/Amount.tsx
+++ b/packages/ui-params/src/Param/Amount.tsx
@@ -41,6 +41,7 @@ export default class Amount extends React.PureComponent<Props> {
               ? 'text'
               : 'number'
           }
+          withEllipsis
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/Balance.tsx b/packages/ui-params/src/Param/Balance.tsx
index e85c9dc85d..fc7db3981a 100644
--- a/packages/ui-params/src/Param/Balance.tsx
+++ b/packages/ui-params/src/Param/Balance.tsx
@@ -29,6 +29,7 @@ class Balance extends React.PureComponent<Props> {
           isError={isError}
           label={label}
           onChange={this.onChange}
+          withEllipsis
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/Base.tsx b/packages/ui-params/src/Param/Base.tsx
index e5a49f3504..b468a3266b 100644
--- a/packages/ui-params/src/Param/Base.tsx
+++ b/packages/ui-params/src/Param/Base.tsx
@@ -30,6 +30,7 @@ export default class Base extends React.PureComponent<Props> {
         <Labelled
           className={isDisabled ? 'full' : size}
           label={label}
+          withEllipsis
           withLabel={withLabel}
         >
           {children}
diff --git a/packages/ui-params/src/Param/BaseBytes.tsx b/packages/ui-params/src/Param/BaseBytes.tsx
index 60edc00a0c..5b39b0713f 100644
--- a/packages/ui-params/src/Param/BaseBytes.tsx
+++ b/packages/ui-params/src/Param/BaseBytes.tsx
@@ -48,6 +48,7 @@ export default class BaseBytes extends React.PureComponent<Props> {
           onChange={this.onChange}
           placeholder='0x...'
           type='text'
+          withEllipsis
           withLabel={withLabel}
         >
           {children}
diff --git a/packages/ui-params/src/Param/Bool.tsx b/packages/ui-params/src/Param/Bool.tsx
index f18ee4b32c..5bb6a04086 100644
--- a/packages/ui-params/src/Param/Bool.tsx
+++ b/packages/ui-params/src/Param/Bool.tsx
@@ -34,6 +34,7 @@ export default class BoolParam extends React.PureComponent<Props> {
           label={label}
           options={options}
           onChange={this.onChange}
+          withEllipsis
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/File.tsx b/packages/ui-params/src/Param/File.tsx
index 8bee048e1d..fcbef86328 100644
--- a/packages/ui-params/src/Param/File.tsx
+++ b/packages/ui-params/src/Param/File.tsx
@@ -34,6 +34,7 @@ export default class File extends React.PureComponent<Props> {
           label={label}
           onChange={onChange}
           placeholder={placeholder}
+          withEllipsis
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/KeyValueArray.tsx b/packages/ui-params/src/Param/KeyValueArray.tsx
index ced3a2b467..ebfd700d5d 100644
--- a/packages/ui-params/src/Param/KeyValueArray.tsx
+++ b/packages/ui-params/src/Param/KeyValueArray.tsx
@@ -73,27 +73,32 @@ class KeyValueArray extends React.PureComponent<Props, State> {
     const pairs = value as Vector<Pair>;
 
     return (
-      <Base
-        className={className}
-        label={label}
-        size='full'
-        style={style}
-      >
-        {pairs.map(({ key, value }) => {
-          const keyHex = u8aToHex(key.toU8a(true));
+      <>
+        <Base
+          className={className}
+          label={label}
+          size='full'
+          style={style}
+        >
+          <div />
+        </Base>
+        <div className='ui--Params'>
+          {pairs.map(({ key, value }) => {
+            const keyHex = u8aToHex(key.toU8a(true));
 
-          return (
-            <Bytes
-              defaultValue={{ value } as RawParam}
-              isDisabled
-              key={keyHex}
-              label={keyHex}
-              name={keyHex}
-              type={BYTES_TYPE}
-            />
-          );
-        })}
-      </Base>
+            return (
+              <Bytes
+                defaultValue={{ value } as RawParam}
+                isDisabled
+                key={keyHex}
+                label={keyHex}
+                name={keyHex}
+                type={BYTES_TYPE}
+              />
+            );
+          })}
+        </div>
+      </>
     );
   }