collapse contracts by default

client/package-lock.json

@@ -12982,6 +12982,15 @@
         }
       }
     },
+    "react-collapsed": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-collapsed/-/react-collapsed-2.0.1.tgz",
+      "integrity": "sha512-ullymRST/C5iy0szhxpYmIaLUhi+IC8EpFySmUjttoc+ErotaKAx+z1ff0d2PCJF7ksW8crTiOrIwGtFqYw3Tg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "raf": "^3.4.0"
+      }
+    },
     "react-datepicker": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.6.0.tgz",

client/package.json

@@ -25,6 +25,7 @@
     "moment": "^2.24.0",
     "query-string": "^6.5.0",
     "react": "^16.8.6",
+    "react-collapsed": "^2.0.1",
     "react-datepicker": "^2.5.0",
     "react-dom": "^16.8.6",
     "react-dotdotdot": "^1.3.0",

client/src/@types/react-collapsed/index.d.ts

@@ -0,0 +1 @@
+declare module 'react-collapsed'

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -10,6 +10,10 @@
     display: table;
     border-top: 1px solid $brand-grey-lighter;
 
+    tr {
+        position: relative;
+    }
+
     table {
         display: table;
         margin-left: $spacer;
@@ -57,3 +61,16 @@
     composes: spinner, small from '../../atoms/Spinner.module.scss';
     margin-right: $spacer;
 }
+
+.handle {
+    display: inline-block;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+    margin-left: -1rem;
+    padding-right: .5rem;
+    cursor: pointer;
+    color: $brand-grey-light;
+}

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -1,8 +1,9 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { OceanPlatformTechStatus } from '@oceanprotocol/squid'
+import slugify from '@sindresorhus/slugify'
+import useCollapse from 'react-collapsed'
 import { VersionNumbersState } from '.'
 import styles from './VersionTable.module.scss'
-import slugify from '@sindresorhus/slugify'
 
 const VersionTableContracts = ({
     contracts,
@@ -71,48 +72,78 @@ const VersionNumber = ({
         <span>{status || 'Could not get version'}</span>
     )
 
-const VersionTable = ({ data }: { data: VersionNumbersState }) => (
+const VersionRow = ({ value }: { value: any }) => {
-    <div className={styles.tableWrap}>
+    const collapseStyles = {
-        <table className={styles.table}>
+        transitionDuration: '0.1s'
-            <tbody>
+    }
-                {Object.entries(data)
+
-                    .filter(([key, value]) => key !== 'status')
+    const expandStyles = {
-                    .map(([key, value]) => (
+        transitionDuration: '0.1s'
-                        <Fragment key={key}>
+    }
-                            <tr>
+
-                                <td>
+    const { getCollapseProps, getToggleProps, isOpen } = useCollapse({
-                                    <a
+        collapseStyles,
-                                        href={`https://github.com/oceanprotocol/${slugify(
+        expandStyles
-                                            value.name || value.software
+    })
-                                        )}`}
+
-                                    >
+    return (
-                                        <strong>{value.name}</strong>
+        <>
-                                    </a>
+            <tr>
-                                </td>
+                <td>
-                                <td>
+                    {value.contracts && (
-                                    <VersionNumber
+                        <button className={styles.handle} {...getToggleProps()}>
-                                        name={value.name || value.software}
+                            {isOpen ? (
-                                        version={value.version}
+                                <span>&#9660;</span>
-                                        status={value.status}
+                            ) : (
-                                        network={value.network}
+                                <span>&#9658;</span>
-                                    />
-                                </td>
-                            </tr>
-                            {value.contracts && (
-                                <tr>
-                                    <td colSpan={2}>
-                                        <VersionTableContracts
-                                            contracts={value.contracts}
-                                            network={value.network || ''}
-                                        />
-                                    </td>
-                                </tr>
                             )}
-                        </Fragment>
+                        </button>
-                    ))}
+                    )}
-            </tbody>
+                    <a
-        </table>
+                        href={`https://github.com/oceanprotocol/${slugify(
-    </div>
+                            value.name || value.software
-)
+                        )}`}
+                    >
+                        <strong>{value.name}</strong>
+                    </a>
+                </td>
+                <td>
+                    <VersionNumber
+                        name={value.name || value.software}
+                        version={value.version}
+                        status={value.status}
+                        network={value.network}
+                    />
+                </td>
+            </tr>
+            {value.contracts && (
+                <tr {...getCollapseProps()}>
+                    <td colSpan={2}>
+                        <VersionTableContracts
+                            contracts={value.contracts}
+                            network={value.network || ''}
+                        />
+                    </td>
+                </tr>
+            )}
+        </>
+    )
+}
+
+const VersionTable = ({ data }: { data: VersionNumbersState }) => {
+    return (
+        <div className={styles.tableWrap}>
+            <table className={styles.table}>
+                <tbody>
+                    {Object.entries(data)
+                        .filter(([key, value]) => key !== 'status')
+                        .map(([key, value]) => (
+                            <VersionRow key={key} value={value} />
+                        ))}
+                </tbody>
+            </table>
+        </div>
+    )
+}
 
 export default VersionTable

client/src/components/molecules/VersionNumbers/index.tsx

@@ -120,20 +120,28 @@ export default class VersionNumbers extends PureComponent<
         }
     }
 
-    public render() {
+    private MinimalOutput = () => {
-        const { minimal } = this.props
         const { commons, squid, brizo, aquarius } = this.state
 
-        const mimimalOutput = `${squid.name} v${squid.version}\n${
+        return (
-            brizo.name
-        } v${brizo.version}\n${aquarius.name} v${aquarius.version}`
-
-        return minimal ? (
             <p className={styles.versionsMinimal}>
-                <a title={mimimalOutput} href={'/about'}>
+                <a
-                    v{commons.version} {brizo.network && `(${brizo.network})`}
+                    title={`${squid.name} v${squid.version}\n${brizo.name} v${
+                        brizo.version
+                    }\n${aquarius.name} v${aquarius.version}`}
+                    href={'/about'}
+                >
+                    v{commons.version} {squid.network && `(${squid.network})`}
                 </a>
             </p>
+        )
+    }
+
+    public render() {
+        const { minimal } = this.props
+
+        return minimal ? (
+            <this.MinimalOutput />
         ) : (
             <div className={styles.versions} id="#oceanversions">
                 <h2 className={styles.versionsTitle}>