feat: info page redesign (#207)

* feat: info page redesign

* style: headers and nesting for expandable lists

* style: body typography

* chore: bee version check

* feat: key list item component

* style: hover state for the key displaying component

* style: left border on expanded items

* fix: word break and splitting for hexstrings divisible by 6

* chore: moved the styles to classes

* style: tooltips now have arrow

* feat: indicate value has been copied

* feat: removed the connectivity table in favor of info page

* feat: added health tooltips for connectivity

* refactor: simplified the topology into single component

* fix: spacing between the bee version and the update button/chip

* fix: spacing on devices not supporting rowGap

src/pages/info/StatusCard.tsx

@@ -1,113 +0,0 @@
-import { ReactElement, useState } from 'react'
-import { Link } from 'react-router-dom'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
-import { ArrowRight, ArrowDropUp } from '@material-ui/icons/'
-import { NodeAddresses, Topology } from '@ethersphere/bee-js'
-import { ROUTES } from '../../routes'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flex: '1 1 auto',
-      flexDirection: 'column',
-    },
-    status: {
-      color: '#2145a0',
-      backgroundColor: '#e1effe',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  nodeTopology: Topology | null
-  userBeeVersion?: string
-  isLatestBeeVersion: boolean
-  isOk: boolean
-  latestUrl: string
-}
-
-function StatusCard({
-  userBeeVersion,
-  nodeAddresses,
-  nodeTopology,
-  isLatestBeeVersion,
-  latestUrl,
-}: Props): ReactElement | null {
-  const classes = useStyles()
-
-  const [underlayAddressesVisible, setUnderlayAddresessVisible] = useState<boolean>(false)
-
-  return (
-    <Card>
-      <CardContent className={classes.root}>
-        <>
-          <div style={{ marginBottom: '20px' }}>
-            <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
-            <span style={{ marginRight: '20px' }}>
-              <span>Connected Peers: </span>
-              <Link to={ROUTES.PEERS}>{nodeTopology?.connected}</Link>
-            </span>
-          </div>
-          <div>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>AGENT: </span>
-              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
-                Bee
-              </a>{' '}
-              <span>{userBeeVersion || '-'}</span>
-              {isLatestBeeVersion ? (
-                <Chip
-                  style={{ marginLeft: '7px', color: '#2145a0' }}
-                  size="small"
-                  label="latest"
-                  className={classes.status}
-                />
-              ) : (
-                <Button size="small" variant="outlined" href={latestUrl}>
-                  update
-                </Button>
-              )}
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>PUBLIC KEY: </span>
-              <span>{nodeAddresses?.publicKey ? nodeAddresses.publicKey : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>PSS PUBLIC KEY: </span>
-              <span>{nodeAddresses?.pssPublicKey ? nodeAddresses.pssPublicKey : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <span>OVERLAY ADDRESS (PEER ID): </span>
-              <span>{nodeAddresses?.overlay ? nodeAddresses.overlay : '-'}</span>
-            </Typography>
-            <Typography component="div" variant="subtitle2" gutterBottom>
-              <Typography component="div" onClick={() => setUnderlayAddresessVisible(!underlayAddressesVisible)}>
-                <Button color="primary" style={{ padding: 0, marginTop: '6px' }}>
-                  {underlayAddressesVisible ? (
-                    <ArrowDropUp style={{ fontSize: '12px' }} />
-                  ) : (
-                    <ArrowRight style={{ fontSize: '12px' }} />
-                  )}
-                  <span>Underlay Addresses</span>
-                </Button>
-              </Typography>
-              {underlayAddressesVisible && (
-                <div>
-                  {nodeAddresses?.underlay.map(item => (
-                    <li key={item}>{item}</li>
-                  ))}
-                </div>
-              )}
-            </Typography>
-          </div>
-        </>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default StatusCard

src/pages/info/index.tsx

@@ -1,24 +1,14 @@
 import { ReactElement, useContext } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Chip, Button } from '@material-ui/core'
 
-import StatusCard from './StatusCard'
-import EthereumAddressCard from '../../components/EthereumAddressCard'
 import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import { Context as BeeContext } from '../../providers/Bee'
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'grid',
-      rowGap: theme.spacing(3),
-    },
-  }),
-)
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
+import TopologyStats from '../../components/TopologyStats'
 
 export default function Status(): ReactElement {
-  const classes = useStyles()
-
   const {
     status,
     latestUserVersion,
@@ -32,18 +22,41 @@ export default function Status(): ReactElement {
   if (!status.all) return <TroubleshootConnectionCard />
 
   return (
-    <div className={classes.root}>
-      <StatusCard
-        userBeeVersion={latestUserVersion}
-        isLatestBeeVersion={isLatestBeeVersion}
-        isOk={status.all}
-        nodeTopology={topology}
-        latestUrl={latestBeeVersionUrl}
-        nodeAddresses={nodeAddresses}
-      />
-      {nodeAddresses && chequebookAddress && (
-        <EthereumAddressCard nodeAddresses={nodeAddresses} chequebookAddress={chequebookAddress} />
-      )}
+    <div>
+      <ExpandableList label="Bee Node" defaultOpen>
+        <ExpandableListItem
+          label="Agent"
+          value={
+            <div>
+              <a href="https://github.com/ethersphere/bee" rel="noreferrer" target="_blank">
+                Bee
+              </a>{' '}
+              <span>{latestUserVersion || '-'}</span>{' '}
+              {isLatestBeeVersion ? (
+                <Chip style={{ marginLeft: '7px', color: '#2145a0' }} size="small" label="latest" />
+              ) : (
+                <Button size="small" variant="outlined" href={latestBeeVersionUrl}>
+                  update
+                </Button>
+              )}
+            </div>
+          }
+        />
+        <ExpandableListItemKey label="Public key" value={nodeAddresses?.publicKey || ''} />
+        <ExpandableListItemKey label="PSS public key" value={nodeAddresses?.pssPublicKey || ''} />
+        <ExpandableListItemKey label="Overlay address (Peer ID)" value={nodeAddresses?.overlay || ''} />
+
+        <ExpandableList level={1} label="Underlay addresses">
+          {nodeAddresses?.underlay.map(addr => (
+            <ExpandableListItem key={addr} value={addr} />
+          ))}
+        </ExpandableList>
+      </ExpandableList>
+      <ExpandableList label="Blockchain" defaultOpen>
+        <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
+        <ExpandableListItemKey label="Chequebook contract address" value={chequebookAddress?.chequebookAddress || ''} />
+      </ExpandableList>
+      <TopologyStats topology={topology} />
     </div>
   )
 }