F #3951: Add empty list component (#367)

src/fireedge/src/client/components/Cards/EmptyCard.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import { Card, CardHeader, Fade, makeStyles } from '@material-ui/core'
@@ -15,14 +15,14 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const EmptyCard = React.memo(({ name }) => {
+const EmptyCard = memo(({ name }) => {
   const classes = useStyles()
 
   return (
     <Fade in unmountOnExit>
       <Card className={classes.root} variant="outlined">
         <CardHeader
-          subheader={`Your ${name} list is empty`}
+          subheader={`Your ${name ?? ''} list is empty`}
           className={classes.content}
         />
       </Card>

src/fireedge/src/client/components/List/ListCards.js

@@ -9,6 +9,7 @@ import {
   Grid
 } from '@material-ui/core'
 import AddIcon from '@material-ui/icons/Add'
+import { EmptyCard } from 'client/components/Cards'
 
 const gridValues = [false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
 
@@ -27,7 +28,9 @@ const ListCards = memo(({
   handleCreate,
   ButtonCreateComponent,
   CardComponent,
-  cardsProps
+  cardsProps,
+  EmptyComponent,
+  displayEmpty
 }) => {
   const classes = useStyles()
 
@@ -53,11 +56,19 @@ const ListCards = memo(({
           [handleCreate, classes]
         )}
       {Array.isArray(list) &&
-        list?.map((value, index) => (
-          <Grid key={`card-${index}`} item {...breakpoints}>
-            <CardComponent value={value} {...cardsProps({ index, value })} />
-          </Grid>
-        ))}
+        list.length > 0 ? (
+          list?.map((value, index) => (
+            <Grid key={`card-${index}`} item {...breakpoints}>
+              <CardComponent value={value} {...cardsProps({ index, value })} />
+            </Grid>
+          ))
+        ) : (
+          (displayEmpty || EmptyComponent) && (
+            <Grid item {...breakpoints}>
+              {EmptyComponent ?? <EmptyCard />}
+            </Grid>
+          )
+        )}
     </Grid>
   )
 })
@@ -84,7 +95,11 @@ ListCards.propTypes = {
     PropTypes.object,
     PropTypes.element
   ]),
-  cardsProps: PropTypes.func
+  cardsProps: PropTypes.func,
+  EmptyComponent: PropTypes.oneOfType([
+    PropTypes.element
+  ]),
+  displayEmpty: PropTypes.bool
 }
 
 ListCards.defaultProps = {
@@ -93,7 +108,9 @@ ListCards.defaultProps = {
   handleCreate: undefined,
   ButtonCreateComponent: undefined,
   CardComponent: null,
-  cardsProps: () => undefined
+  cardsProps: () => undefined,
+  EmptyComponent: undefined,
+  displayEmpty: false
 }
 
 ListCards.displayName = 'ListCards'

src/fireedge/src/client/containers/ApplicationsInstances/index.js

@@ -9,7 +9,7 @@ import useFetch from 'client/hooks/useFetch'
 import ListCards from 'client/components/List/ListCards'
 import DialogInfo from 'client/containers/ApplicationsInstances/DialogInfo'
 
-import { ApplicationCard } from 'client/components/Cards'
+import { ApplicationCard, EmptyCard } from 'client/components/Cards'
 import { Tr } from 'client/components/HOC'
 
 function ApplicationsInstances () {
@@ -39,6 +39,7 @@ function ApplicationsInstances () {
     <Box p={3}>
       <ListCards
         list={applications}
+        EmptyComponent={<EmptyCard name={'applications instances'} />}
         CardComponent={ApplicationCard}
         cardsProps={({ value }) => ({
           handleShow: () => setShowDialog(value)

src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Clusters/index.js

@@ -4,7 +4,7 @@ import useOpennebula from 'client/hooks/useOpennebula'
 
 import useListForm from 'client/hooks/useListForm'
 import ListCards from 'client/components/List/ListCards'
-import { ClusterCard } from 'client/components/Cards'
+import { ClusterCard, EmptyCard } from 'client/components/Cards'
 
 import { STEP_FORM_SCHEMA } from './schema'
 
@@ -28,16 +28,13 @@ const Clusters = () => ({
     return (
       <ListCards
         list={clusters}
+        EmptyComponent={<EmptyCard name={'clusters'} />}
         CardComponent={ClusterCard}
-        cardsProps={({ value }) => {
-          const { ID } = value
-
-          return {
-            isSelected: data?.some(selected => selected === ID),
-            handleSelect: () => handleSelect(ID),
-            handleUnselect: () => handleUnselect(ID)
-          }
-        }}
+        cardsProps={({ value: { ID } }) => ({
+          isSelected: data?.some(selected => selected === ID),
+          handleSelect: () => handleSelect(ID),
+          handleUnselect: () => handleUnselect(ID)
+        })}
       />
     )
   }, [])