fix: add empty table text

new-lamassu-admin/src/components/tables/DataTable.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -17,6 +17,7 @@ import {
   Td,
   Th
 } from 'src/components/fake-table/Table'
+import { H4 } from 'src/components/typography'
 import { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'
 import { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'
 
@@ -94,6 +95,8 @@ const DataTable = ({
   expandable,
   shouldStartExpanded,
   onClick,
+  loading,
+  emptyText,
   ...props
 }) => {
   const [expanded, setExpanded] = useState(null)
@@ -143,38 +146,42 @@ const DataTable = ({
   }
 
   return (
-    <Table className={classes.table}>
-      <THead>
-        {elements.map(({ width, className, textAlign, header }, idx) => (
-          <Th
-            key={idx}
-            width={width}
-            className={className}
-            textAlign={textAlign}>
-            {header}
-          </Th>
-        ))}
-        {expandable && <Th width={expWidth}></Th>}
-      </THead>
-      <TBody className={classes.body}>
-        <AutoSizer disableWidth>
-          {({ height }) => (
-            <List
-              // this has to be in a style because of how the component works
-              style={{ overflow: 'inherit', outline: 'none' }}
-              {...props}
-              height={height}
+    <Box display="flex" flex="1" flexDirection="column">
+      <Table className={classes.table}>
+        <THead>
+          {elements.map(({ width, className, textAlign, header }, idx) => (
+            <Th
+              key={idx}
               width={width}
-              rowCount={data.length}
-              rowHeight={cache.rowHeight}
-              rowRenderer={rowRenderer}
-              overscanRowCount={50}
-              deferredMeasurementCache={cache}
-            />
-          )}
-        </AutoSizer>
-      </TBody>
-    </Table>
+              className={className}
+              textAlign={textAlign}>
+              {header}
+            </Th>
+          ))}
+          {expandable && <Th width={expWidth}></Th>}
+        </THead>
+        <TBody className={classes.body}>
+          {loading && <H4>Loading...</H4>}
+          {!loading && R.isEmpty(data) && <H4>{emptyText}</H4>}
+          <AutoSizer disableWidth>
+            {({ height }) => (
+              <List
+                // this has to be in a style because of how the component works
+                style={{ overflow: 'inherit', outline: 'none' }}
+                {...props}
+                height={height}
+                width={width}
+                rowCount={data.length}
+                rowHeight={cache.rowHeight}
+                rowRenderer={rowRenderer}
+                overscanRowCount={50}
+                deferredMeasurementCache={cache}
+              />
+            )}
+          </AutoSizer>
+        </TBody>
+      </Table>
+    </Box>
   )
 }
 

new-lamassu-admin/src/pages/Customers/CustomerProfile.js

@@ -92,7 +92,7 @@ const CustomerProfile = memo(() => {
   const history = useHistory()
   const { id: customerId } = useParams()
 
-  const { data: customerResponse, refetch: getCustomer } = useQuery(
+  const { data: customerResponse, refetch: getCustomer, loading } = useQuery(
     GET_CUSTOMER,
     {
       variables: { customerId }
@@ -171,7 +171,7 @@ const CustomerProfile = memo(() => {
           />
         </Box>
       </div>
-      <TransactionsList data={sortedTransactions} />
+      <TransactionsList data={sortedTransactions} loading={loading} />
     </>
   )
 })

new-lamassu-admin/src/pages/Customers/Customers.js

@@ -24,7 +24,7 @@ const GET_CUSTOMERS = gql`
 
 const Customers = () => {
   const history = useHistory()
-  const { data: customersResponse } = useQuery(GET_CUSTOMERS)
+  const { data: customersResponse, loading } = useQuery(GET_CUSTOMERS)
 
   const handleCustomerClicked = customer =>
     history.push(`/compliance/customer/${customer.id}`)
@@ -33,7 +33,13 @@ const Customers = () => {
     R.path(['customers'])(customersResponse) ?? []
   )
 
-  return <CustomersList data={customersData} onClick={handleCustomerClicked} />
+  return (
+    <CustomersList
+      data={customersData}
+      onClick={handleCustomerClicked}
+      loading={loading}
+    />
+  )
 }
 
 export default Customers

new-lamassu-admin/src/pages/Customers/CustomersList.js

@@ -14,7 +14,7 @@ import styles from './CustomersList.styles'
 
 const useStyles = makeStyles(styles)
 
-const CustomersList = ({ data, onClick }) => {
+const CustomersList = ({ data, onClick, loading }) => {
   const classes = useStyles()
 
   const elements = [
@@ -75,7 +75,13 @@ const CustomersList = ({ data, onClick }) => {
           { label: 'Cash-out', icon: <TxOutIcon /> }
         ]}
       />
-      <DataTable elements={elements} data={data} onClick={onClick} />
+      <DataTable
+        loading={loading}
+        emptyText="No customers so far"
+        elements={elements}
+        data={data}
+        onClick={onClick}
+      />
     </>
   )
 }

new-lamassu-admin/src/pages/Customers/components/TransactionsList.js

@@ -15,7 +15,7 @@ import mainStyles from '../CustomersList.styles'
 
 const useStyles = makeStyles(mainStyles)
 
-const TransactionsList = ({ data }) => {
+const TransactionsList = ({ data, loading }) => {
   const classes = useStyles()
   const hasData = !(R.isEmpty(data) || R.isNil(data))
 
@@ -82,7 +82,9 @@ const TransactionsList = ({ data }) => {
       <div className={classes.titleWrapper}>
         <div className={classes.titleAndButtonsContainer}>
           <H4>
-            {hasData
+            {loading
+              ? 'Loading'
+              : hasData
               ? 'All transactions from this customer'
               : 'No transactions so far'}
           </H4>

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -1,5 +1,5 @@
 import { useQuery } from '@apollo/react-hooks'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import gql from 'graphql-tag'
 import moment from 'moment'
@@ -54,7 +54,7 @@ const GET_TRANSACTIONS = gql`
 const Transactions = () => {
   const classes = useStyles()
 
-  const { data: txResponse } = useQuery(GET_TRANSACTIONS, {
+  const { data: txResponse, loading } = useQuery(GET_TRANSACTIONS, {
     variables: {
       limit: NUM_LOG_RESULTS
     }
@@ -160,6 +160,8 @@ const Transactions = () => {
         </div>
       </div>
       <DataTable
+        loading={loading}
+        emptyText="No transactions so far"
         elements={elements}
         data={R.path(['transactions'])(txResponse)}
         Details={DetailsRow}

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -6,11 +6,11 @@ import React, { useState } from 'react'
 import { v4 } from 'uuid'
 
 import Tooltip from 'src/components/Tooltip'
-import { Link } from 'src/components/buttons'
+import { Link, Button } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
-import { P, Label2 } from 'src/components/typography'
+import { P, Label2, H2 } from 'src/components/typography'
 import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
 
 import styles from './Triggers.styles'
@@ -36,7 +36,7 @@ const Triggers = () => {
   const [wizard, setWizard] = useState(false)
   const [error, setError] = useState(false)
 
-  const { data } = useQuery(GET_INFO)
+  const { data, loading } = useQuery(GET_INFO)
   const triggers = fromServer(data?.config?.triggers ?? [])
 
   const complianceConfig =
@@ -108,9 +108,11 @@ const Triggers = () => {
         className={classes.tableWidth}
         display="flex"
         justifyContent="end">
-        <Link color="primary" onClick={() => setWizard(true)}>
-          + Add new trigger
-        </Link>
+        {!loading && !R.isEmpty(triggers) && (
+          <Link color="primary" onClick={() => setWizard(true)}>
+            + Add new trigger
+          </Link>
+        )}
       </Box>
       <EditableTable
         data={triggers}
@@ -131,6 +133,14 @@ const Triggers = () => {
           onClose={() => setWizard(null)}
         />
       )}
+      {!loading && R.isEmpty(triggers) && (
+        <Box display="flex" alignItems="center" flexDirection="column" mt={15}>
+          <H2>
+            It seems there are no active compliance triggers on your network
+          </H2>
+          <Button onClick={() => setWizard(true)}>Add first trigger</Button>
+        </Box>
+      )}
     </>
   )
 }