Logs render Tuples as Params (#549)

* Logs render Tuples as Params

* Remove misplaed logs

packages/app-explorer/src/BlockByHash/Logs.tsx

@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { Struct, Vector, getTypeDef } from '@polkadot/types/codec';
+import { Struct, Tuple, Vector, getTypeDef } from '@polkadot/types/codec';
 import { DigestItem } from '@polkadot/types/Digest';
 import { Params } from '@polkadot/ui-app/index';
 
@@ -39,28 +39,11 @@ class Logs extends React.PureComponent<Props> {
     let content: React.ReactNode;
 
     if (item.value instanceof Struct) {
-      const types: { [index: string]: string } = item.value.Type;
-
-      const params = Object.keys(types).map((name) => ({
-        name,
-        type: getTypeDef(types[name])
-      }));
-      const values = item.value.toArray().map((value) => ({
-        isValid: true,
-        value
-      }));
-
-      content = (
-        <Params
-          isDisabled
-          params={params}
-          values={values}
-        />
-      );
+      content = this.formatStruct(item.value);
+    } else if (item.value instanceof Tuple) {
+      content = this.formatTuple(item.value);
     } else if (item.value instanceof Vector) {
-      content = item.value.map((entry, index) => (
-        <span key={index}>{entry.toString()}</span>
-      ));
+      content = this.formatVector(item.value);
     } else {
       content = item.value.toString().split(',').join(', ');
     }
@@ -84,6 +67,65 @@ class Logs extends React.PureComponent<Props> {
       </div>
     );
   }
+
+  private formatStruct (struct: Struct) {
+    const types: { [index: string]: string } = struct.Type;
+    const params = Object.keys(types).map((name) => ({
+      name,
+      type: getTypeDef(types[name])
+    }));
+    const values = struct.toArray().map((value) => ({
+      isValid: true,
+      value
+    }));
+
+    return (
+      <Params
+        isDisabled
+        params={params}
+        values={values}
+      />
+    );
+  }
+
+  private formatTuple (tuple: Tuple) {
+    const types = tuple.Types;
+    const params = types.map((type) => ({
+      type: getTypeDef(type)
+    }));
+    const values = tuple.toArray().map((value) => ({
+      isValid: true,
+      value
+    }));
+
+    return (
+      <Params
+        isDisabled
+        params={params}
+        values={values}
+      />
+    );
+  }
+
+  private formatVector (vector: Vector<any>) {
+    const type = getTypeDef(vector.Type);
+    const values = vector.toArray().map((value) => ({
+      isValid: true,
+      value
+    }));
+    const params = values.map((_, index) => ({
+      name: `${index}`,
+      type
+    }));
+
+    return (
+      <Params
+        isDisabled
+        params={params}
+        values={values}
+      />
+    );
+  }
 }
 
 export default translate(Logs);

packages/ui-app/src/Input.tsx

@@ -96,8 +96,8 @@ export default class Input extends React.PureComponent<Props, State> {
           autoFocus={autoFocus}
           className={
             isEditable
-              ? 'edit icon'
-              : ''
+              ? 'ui--Input edit icon'
+              : 'ui--Input'
           }
           defaultValue={
             isUndefined(value)

packages/ui-app/src/Params/Param/Unknown.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import Static from '../../Static';
 import translate from '../../translate';
+import Bare from './Bare';
 import BaseBytes from './BaseBytes';
 
 type Props = BareProps & WithNamespaces & {
@@ -24,12 +25,18 @@ class Unknown extends React.PureComponent<Props> {
       const value = defaultValue && defaultValue.value && defaultValue.value.toString();
 
       return (
-        <Static
-          label={label}
-          value={value || t('unknown.empty', {
-            defaultValue: 'empty'
-          })}
-        />
+        <Bare
+          className={className}
+          style={style}
+        >
+          <Static
+            className='full'
+            label={label}
+            value={value || t('unknown.empty', {
+              defaultValue: 'empty'
+            })}
+          />
+        </Bare>
       );
     }
 

packages/ui-app/src/styles/components.css

@@ -184,6 +184,18 @@ header .ui--Button-Group {
   margin-left: 0.25rem !important;
 }
 
+.ui--Input {
+  &.disabled {
+    overflow: hidden;
+
+    input {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
 .ui--InputFile {
   align-items: center;
   background: #fff;