feat: status page redesign (#214)

* feat: initial rewrite without status indicators

* feat: status icon as a component and add to the node setup

* feat: added input list item component

* feat: improved the topology status info

* fix: disabled state of the buttons

* chore: removed unused components

* chore: remove debug console log

* fix: deposit modal helper text

src/components/ConnectToHost.tsx

@@ -1,50 +0,0 @@
-import React, { ReactElement, useState } from 'react'
-import { TextField, Button } from '@material-ui/core'
-
-interface Props {
-  defaultHost?: string
-  setHost: (host: string) => void
-}
-
-export default function ConnectToHost(props: Props): ReactElement {
-  const [hostInputVisible, toggleHostInputVisibility] = useState(false)
-  const [host, setHost] = useState('')
-
-  const handleNewHostConnection = () => {
-    if (host) {
-      props.setHost(host)
-      toggleHostInputVisibility(!hostInputVisible)
-    }
-  }
-
-  return (
-    <div>
-      {hostInputVisible ? (
-        <div style={{ display: 'flex' }}>
-          <TextField
-            defaultValue={props.defaultHost}
-            label="Enter host"
-            variant="outlined"
-            size="small"
-            onChange={e => setHost(e.target.value)}
-            style={{ marginRight: '15px', minWidth: '300px' }}
-          />
-          <Button onClick={() => handleNewHostConnection()} size="small" variant="outlined">
-            Connect
-          </Button>
-          <Button
-            style={{ marginLeft: '7px' }}
-            onClick={() => toggleHostInputVisibility(!hostInputVisible)}
-            size="small"
-          >
-            Cancel
-          </Button>
-        </div>
-      ) : (
-        <Button onClick={() => toggleHostInputVisibility(!hostInputVisible)} size="small" variant="outlined">
-          Change host
-        </Button>
-      )}
-    </div>
-  )
-}

src/components/EthereumAddressCard.tsx

@@ -1,59 +0,0 @@
-import { ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Card, CardContent, Typography } from '@material-ui/core/'
-
-import EthereumAddress from '../components/EthereumAddress'
-
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-around',
-      flexWrap: 'wrap',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-  }),
-)
-
-interface Props {
-  nodeAddresses: NodeAddresses | null
-  chequebookAddress: ChequebookAddressResponse | null
-}
-
-function EthereumAddressCard(props: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Ethereum Address
-          </Typography>
-          <EthereumAddress address={props.nodeAddresses?.ethereum} />
-        </CardContent>
-      </div>
-
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
-          <Typography variant="subtitle1" gutterBottom>
-            Chequebook Contract Address
-          </Typography>
-          <EthereumAddress address={props.chequebookAddress?.chequebookAddress} />
-        </CardContent>
-      </div>
-    </Card>
-  )
-}
-
-export default EthereumAddressCard

src/components/ExpandableListItem.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 interface Props {
-  label?: string
+  label?: ReactNode
   value?: ReactNode
   tooltip?: string
 }

src/components/ExpandableListItemInput.tsx

@@ -0,0 +1,103 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+
+import ExpandableListItemActions from './ExpandableListItemActions'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+  onConfirm: (value: string) => void
+}
+
+export default function ExpandableListItemKey({ label, value, onConfirm }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(value)
+  const toggleOpen = () => setOpen(!open)
+
+  return (
+    <>
+      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            {label && <Typography variant="body1">{label}</Typography>}
+            <Typography variant="body2">
+              <div>
+                {!open && value}
+                <IconButton size="small" className={classes.copyValue}>
+                  {open ? (
+                    <Minus onClick={toggleOpen} strokeWidth={1} />
+                  ) : (
+                    <Edit onClick={toggleOpen} strokeWidth={1} />
+                  )}
+                </IconButton>
+              </div>
+            </Typography>
+          </Grid>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <InputBase
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
+              fullWidth
+              className={classes.content}
+              autoFocus
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <ExpandableListItemActions>
+          <Button
+            variant="contained"
+            disabled={inputValue === value}
+            startIcon={<Check size="1rem" />}
+            onClick={() => onConfirm(inputValue)}
+          >
+            Save
+          </Button>
+          <Button
+            variant="contained"
+            disabled={inputValue === value}
+            startIcon={<RotateCcw size="1rem" />}
+            onClick={() => setInputValue(value)}
+          >
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}

src/components/ExpandableListItemNote.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+import ListItem from '@material-ui/core/ListItem'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: '#F7F7F7',
+      marginBottom: theme.spacing(0.25),
+    },
+    typography: {
+      color: '#242424',
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode | ReactNode[]
+}
+
+export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
+  const classes = useStyles()
+
+  return (
+    <ListItem className={classes.header}>
+      <Typography variant="body1" className={classes.typography}>
+        {children}
+      </Typography>
+    </ListItem>
+  )
+}

src/components/SideBarStatus.tsx

@@ -5,6 +5,7 @@ import { ArrowRight } from 'react-feather'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Typography } from '@material-ui/core'
 import { Context } from '../providers/Bee'
+import StatusIcon from './StatusIcon'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -50,7 +51,7 @@ interface Props {
 }
 
 export default function SideBarItem({ path }: Props): ReactElement {
-  const { status } = useContext(Context)
+  const { status, isLoading } = useContext(Context)
   const classes = useStyles()
   const location = useLocation()
   const isSelected = Boolean(matchPath(location.pathname, { path, exact: true }))
@@ -62,17 +63,8 @@ export default function SideBarItem({ path }: Props): ReactElement {
       selected={isSelected}
       disableRipple
     >
-      <ListItemIcon>
-        <span
-          style={{
-            backgroundColor: status.all ? '#1de600' : '#ff3a52',
-            height: '14px',
-            width: '14px',
-            borderRadius: '50%',
-            display: 'inline-block',
-            marginLeft: 30,
-          }}
-        />
+      <ListItemIcon style={{ marginLeft: '30px' }}>
+        <StatusIcon isOk={status.all} isLoading={isLoading} />
       </ListItemIcon>
       <ListItemText
         primary={<Typography className={classes.smallerText}>{`Node ${status.all ? 'OK' : 'Error'}`}</Typography>}

src/components/StatCard.tsx

@@ -1,43 +0,0 @@
-import { Card, CardContent, Typography } from '@material-ui/core/'
-import { makeStyles } from '@material-ui/core/styles'
-import { Skeleton } from '@material-ui/lab'
-import type { ReactElement } from 'react'
-import { Title } from './Title'
-
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-})
-
-interface Props {
-  label: string
-  statistic?: string
-  loading?: boolean
-  tooltip?: string
-}
-
-export default function StatCard({ loading, label, statistic, tooltip }: Props): ReactElement {
-  const classes = useStyles()
-
-  return (
-    <Card className={classes.root}>
-      <CardContent>
-        {loading && (
-          <>
-            <Skeleton width={180} height={25} animation="wave" />
-            <Skeleton width={180} height={35} animation="wave" />
-          </>
-        )}
-        {!loading && (
-          <>
-            <Title label={label} tooltip={tooltip} />
-            <Typography variant="h5" component="h2">
-              {statistic}
-            </Typography>
-          </>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

src/components/StatusIcon.tsx

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react'
+import { CircularProgress } from '@material-ui/core'
+
+interface Props {
+  isOk: boolean
+  isLoading?: boolean
+  size?: number | string
+  className?: string
+}
+
+export default function StatusIcon({ isOk, size, className, isLoading }: Props): ReactElement {
+  const s = size || '1rem'
+
+  if (isLoading) return <CircularProgress size={s} className={className} />
+
+  return (
+    <span
+      className={className}
+      style={{
+        backgroundColor: isOk ? '#1de600' : '#ff3a52',
+        height: s,
+        width: s,
+        borderRadius: '50%',
+        display: 'inline-block',
+      }}
+    />
+  )
+}

src/components/Title.tsx

@@ -1,41 +0,0 @@
-import { Grid, Tooltip, Typography } from '@material-ui/core/'
-import { makeStyles } from '@material-ui/core/styles'
-import { Info } from '@material-ui/icons'
-import type { ReactElement } from 'react'
-
-interface TitleProps {
-  label: string
-  tooltip?: string
-}
-
-const useStyles = makeStyles({
-  title: {
-    fontSize: 16,
-  },
-})
-
-export function Title({ label, tooltip }: TitleProps): ReactElement {
-  const classes = useStyles()
-
-  if (!tooltip) {
-    return (
-      <Typography className={classes.title} color="textSecondary" gutterBottom>
-        {label}
-      </Typography>
-    )
-  }
-
-  // span is needed as Tooltip expects a non-functional element!
-  return (
-    <Tooltip title={tooltip}>
-      <span>
-        <Grid container direction="row" justify="space-between">
-          <Typography className={classes.title} color="textSecondary" gutterBottom>
-            {label}
-          </Typography>
-          <Info />
-        </Grid>
-      </span>
-    </Tooltip>
-  )
-}

src/components/TopologyStats.tsx

@@ -1,7 +1,6 @@
 import type { Topology } from '@ethersphere/bee-js'
 import type { ReactElement } from 'react'
 import { pickThreshold, ThresholdValues } from '../utils/threshold'
-import ExpandableList from './ExpandableList'
 import ExpandableListItem from './ExpandableListItem'
 
 interface Props {
@@ -20,7 +19,7 @@ const TopologyStats = (props: Props): ReactElement => {
   const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
 
   return (
-    <ExpandableList label="Connectivity" defaultOpen>
+    <>
       <ExpandableListItem label="Overall Health Indicator" value={percentageText} />
       <ExpandableListItem
         label="Connected Peers"
@@ -37,7 +36,7 @@ const TopologyStats = (props: Props): ReactElement => {
         value={props.topology?.depth.toString()}
         tooltip={thresholds.depth.explanation}
       />
-    </ExpandableList>
+    </>
   )
 }