Merge pull request #1239 from edenia/fix/accounts-endpoints-ui-bugs-1233

Fix/accounts and endpoints UI bugs 1233
edenia · Jul 14, 2023 · 2766f42 · 2766f42
2 parents aad41ed + b6bf49a
commit 2766f42
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 82 deletions.
diff --git a/webapp/src/components/ContractActionForm/index.js b/webapp/src/components/ContractActionForm/index.js
@@ -227,7 +227,7 @@ const ContractActionForm = ({ accountName, action, abi, onSubmitAction }) => {
             InputProps={{
               endAdornment: (
                 <InputAdornment position="end">
-                  <Chip label={t(field.type)} />
+                  <Chip label={field.type} />
                 </InputAdornment>
               ),
             }}

diff --git a/webapp/src/components/ContractTables/index.js b/webapp/src/components/ContractTables/index.js
@@ -2,11 +2,10 @@ import React, { useState, useEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { makeStyles } from '@mui/styles'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
-import FormControl from '@mui/material/FormControl'
+import Autocomplete from '@mui/material/Autocomplete'
+import Checkbox from '@mui/material/Checkbox'
+import FormControlLabel from '@mui/material/FormControlLabel'
 import TextField from '@mui/material/TextField'
-import InputLabel from '@mui/material/InputLabel'
 import Button from '@mui/material/Button'
 import RefreshIcon from '@mui/icons-material/Refresh'
 
@@ -24,26 +23,42 @@ const ContractTables = ({
   onGetTableRows,
   tableName,
 }) => {
+  const keysTypes = [
+    'i64',
+    'i128',
+    'i256',
+    'float64',
+    'float128',
+    'sha256',
+    'ripemd160',
+    'name',
+  ]
   const initData = {
     table: '',
     scope: '',
+    index: '',
+    keyType: keysTypes[0],
     lowerBound: null,
     upperBound: null,
     limit: 10,
+    reverse: false,
   }
   const formFields = [
     { name: 'scope', type: 'text' },
-    { name: 'lowerBound', type: 'number' },
-    { name: 'upperBound', type: 'number' },
+    { name: 'index', type: 'text' },
+    { name: 'keyType', type: 'text', component: 'select', options: keysTypes },
+    { name: 'lowerBound', type: 'text' },
+    { name: 'upperBound', type: 'text' },
     { name: 'limit', type: 'number' },
   ]
-  const DELAY = 300
+  const DELAY = 500
 
   const { t } = useTranslation('contractTablesComponent')
   const classes = useStyles()
   const [tables, setTables] = useState([])
   const [fields, setFields] = useState([])
   const [filters, setFilters] = useState(initData)
+  const [selectedTable, setSelectedTable] = useState(tableName)
   const debouncedFilter = useDebounceState(filters, DELAY)
 
   const getValidValue = (value, type) => {
@@ -78,6 +93,9 @@ const ContractTables = ({
         table: filters.table,
         code: accountName,
         json: true,
+        key_type: filters.keyType,
+        index_position: filters.index,
+        reverse: filters.reverse,
         lower_bound: nextKey || filters.lowerBound,
         upper_bound: filters.upperBound,
         loadMore: !!nextKey,
@@ -86,6 +104,19 @@ const ContractTables = ({
     [accountName, onGetTableRows, filters],
   )
 
+  const handleTableSelect = (_event, value) => {
+    setSelectedTable(value || '')
+    if (tables.includes(value)) {
+      handleTableChange(value)
+    }
+  }
+
+  const handleFilterSelect = (newValue, name, type) => {
+    handleOnChange({
+      target: { name, type, value: newValue || '' },
+    })
+  }
+
   useEffect(() => {
     if (!abi) {
       setTables([])
@@ -103,10 +134,12 @@ const ContractTables = ({
       return
     }
 
+    setSelectedTable(filters.table)
+
     const tableType = abi.tables.find(
-      (item) => item.name === filters.table,
+      item => item.name === filters.table,
     )?.type
-    const struct = abi.structs.find((struct) => struct.name === tableType)
+    const struct = abi.structs.find(struct => struct.name === tableType)
     setFields(struct?.fields || [])
   }, [filters.table, abi])
 
@@ -127,60 +160,94 @@ const ContractTables = ({
   }, [debouncedFilter])
 
   return (
-    <div>
+    <>
       <div className={classes.form}>
-        <FormControl
-          variant="outlined"
-          className={`${classes.formControl} ${classes.tableEmpty}`}
-        >
-          <InputLabel id="tableLabel">{t('table')}</InputLabel>
-          <Select
-            labelId="tableLabel"
-            id="table"
-            value={filters.table}
-            onChange={(event) => handleTableChange(event.target.value)}
-            label={t('table')}
-          >
-            {tables.map((item) => (
-              <MenuItem key={`table-menu-item-${item}`} value={item}>
-                {item}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        {formFields.map(({ name, type }, index) => (
-          <TextField
-            key={`field-${name}-${index}`}
-            label={t(name)}
-            name={name}
-            type={type}
-            variant="outlined"
-            className={classes.formControl}
-            value={filters[name] ?? ''}
-            onChange={(event) => handleOnChange(event)}
+        <div className={classes.fieldsContainer}>
+          <Autocomplete
+            className={classes.textField}
+            options={tables}
+            value={selectedTable}
+            inputValue={selectedTable}
+            onChange={handleTableSelect}
+            onInputChange={handleTableSelect}
+            renderInput={params => (
+              <TextField {...params} label={t('table')} />
+            )}
+            noOptionsText={t('noOptions')}
           />
-        ))}
-
-        {filters.table && (
-          <Button
-            variant="contained"
-            color="primary"
-            className={classes.refreshButton}
-            onClick={() => handleSubmit()}
-          >
-            <RefreshIcon />
-            {t('refreshData')}
-          </Button>
-        )}
+
+          {formFields.map(({ name, type, component, options }, index) =>
+            component === 'select' ? (
+              <Autocomplete
+                className={classes.textField}
+                key={`field-${name}-${index}`}
+                options={options}
+                value={filters[name] ?? ''}
+                inputValue={filters[name] ?? ''}
+                onChange={(_e, value) => {
+                  handleFilterSelect(value, name, type)
+                }}
+                onInputChange={(_e, value) => {
+                  handleFilterSelect(value, name, type)
+                }}
+                renderInput={params => (
+                  <TextField {...params} label={t(name)} />
+                )}
+                noOptionsText={t('noOptions')}
+              />
+            ) : (
+              <TextField
+                className={classes.textField}
+                key={`field-${name}-${index}`}
+                label={t(name)}
+                name={name}
+                type={type}
+                variant="outlined"
+                value={filters[name] ?? ''}
+                onChange={event => handleOnChange(event)}
+              />
+            ),
+          )}
+
+          <FormControlLabel
+            className={classes.checkBox}
+            control={
+              <Checkbox
+                checked={filters.reverse}
+                onChange={event => {
+                  setFilters(prev => ({
+                    ...prev,
+                    reverse: event.target.checked,
+                  }))
+                }}
+              />
+            }
+            label={t('reverse')}
+            labelPlacement="top"
+          />
+        </div>
+
+        <div>
+          {filters.table && (
+            <Button
+              variant="contained"
+              color="primary"
+              className={classes.refreshButton}
+              onClick={() => handleSubmit()}
+            >
+              <RefreshIcon />
+              {t('refreshData')}
+            </Button>
+          )}
+        </div>
       </div>
 
       <TableData
         tableData={tableData}
         fields={fields}
         handleSubmit={handleSubmit}
       />
-    </div>
+    </>
   )
 }
 

diff --git a/webapp/src/components/ContractTables/styles.js b/webapp/src/components/ContractTables/styles.js
@@ -4,15 +4,22 @@ export default (theme) => ({
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    [theme.breakpoints.down('md')]: {
+      flexDirection: 'column'
+    }
   },
   formControl: {
     display: 'block',
-    width: '100%',
-    minWidth: '180px',
-    [theme.breakpoints.up('md')]: {
-      width: '15%',
-      marginRight: theme.spacing(2),
+    width: '12%',
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.down('lg')]: {
+      width: '10%',
     },
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+      minWidth: '180px',
+    }
   },
   refreshButton: {
     [theme.breakpoints.up('md')]: {
@@ -28,9 +35,30 @@ export default (theme) => ({
     padding: theme.spacing(4),
   },
   tableEmpty: {
-    [theme.breakpoints.up('md')]: {
-      width: '150px !important',
+    [theme.breakpoints.down('lg')]: {
+      width: '100px !important',
     },
+    [theme.breakpoints.down('md')]: {
+      width: '100% !important',
+    },
+    width: '120px !important',
     display: 'inline-block',
   },
+  fieldsContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '80%',
+    gap: '8px',
+  },
+  textField: {
+    width: '200px',
+    [theme.breakpoints.down('md')]: {
+      width: '100%'
+    }
+  },
+  checkBox: {
+    '& .MuiCheckbox-root': {
+      padding: `${theme.spacing(1)} !important`,
+    }
+  }
 })
diff --git a/webapp/src/components/EndpointsTable/styles.js b/webapp/src/components/EndpointsTable/styles.js
@@ -3,6 +3,14 @@ export default (theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     maxWidth: '250px',
+    wordBreak: 'break-all',
+    [theme.breakpoints.down('lg')]: {
+      maxWidth: '300px',
+      wordBreak: 'normal',
+    },
+    [theme.breakpoints.up('xl')]: {
+      maxWidth: '350px',
+    }
   },
   titleCell: {
     display: 'flex',

diff --git a/webapp/src/components/TransactionsHistory/index.js b/webapp/src/components/TransactionsHistory/index.js
@@ -17,17 +17,17 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const BodyGraphValue = ({ loading, value, classes, href }) => {
+const BodyGraphValue = ({ loading, value, classes, links }) => {
   if (loading) return <LinearProgress />
 
   return (
     <Typography component="p" variant="h6">
       {value}
-      {href && (
-        <a href={href} target="_blank" rel="noopener noreferrer">
+      {links && links.map((href, index) => (
+        <a key={`link-body-graph-${index}`} href={href} target="_blank" rel="noopener noreferrer">
           <LaunchIcon className={classes.svgLink} color="primary" />
         </a>
-      )}
+      ))}
     </Typography>
   )
 }
@@ -60,19 +60,15 @@ const TransactionsHistory = ({ t, nodesChildren }) => {
               value={data?.stats[0]?.tps_all_time_high?.transactions_count}
               loading={loading}
               classes={classes}
-              href={getBlockNumUrl(
-                data?.stats?.[0]?.tps_all_time_high?.blocks[0],
-              )}
+              links={data?.stats?.[0]?.tps_all_time_high?.blocks.map(block => getBlockNumUrl(block))}
             />
           </SimpleDataCard>
           <SimpleDataCard>
             <Typography>{t('cpuUtilizationAllTimeHigh')}</Typography>
             <BodyGraphValue
               value={`${data?.stats[0]?.tps_all_time_high?.cpu_usage || 0} %`}
               classes={classes}
-              href={getBlockNumUrl(
-                data?.stats?.[0]?.tps_all_time_high?.blocks[0],
-              )}
+              links={data?.stats?.[0]?.tps_all_time_high?.blocks.map(block => getBlockNumUrl(block))}
               loading={loading}
             />
           </SimpleDataCard>
@@ -81,9 +77,7 @@ const TransactionsHistory = ({ t, nodesChildren }) => {
             <BodyGraphValue
               value={`${data?.stats[0]?.tps_all_time_high?.net_usage || 0} %`}
               classes={classes}
-              href={getBlockNumUrl(
-                data?.stats?.[0]?.tps_all_time_high?.blocks[0],
-              )}
+              links={data?.stats?.[0]?.tps_all_time_high?.blocks.map(block => getBlockNumUrl(block))}
               loading={loading}
             />
           </SimpleDataCard>