F #3951: Add role form & infinite list components (#218)

* Add process screens in role form * Add infinite list component * Add top scroll when rerender
OpenNebula · Sep 16, 2020 · a680a4c · a680a4c
1 parent 12d87e7
commit a680a4c
Show file tree

Hide file tree

Showing 30 changed files with 793 additions and 171 deletions.
diff --git a/src/fireedge/package.json b/src/fireedge/package.json
@@ -43,9 +43,11 @@
     "express": "^4.17.1",
     "fireedge-genpotfile": "^1.0.0",
     "fs-extra": "^9.0.1",
+    "fuse.js": "^6.4.1",
     "helmet": "^3.23.3",
     "http": "0.0.1-security",
     "immutable": "^4.0.0-rc.12",
+    "intersection-observer": "^0.11.0",
     "jsonschema": "^1.2.6",
     "jsonwebtoken": "^8.5.1",
     "jwt-simple": "^0.5.6",

diff --git a/src/fireedge/src/public/components/Cards/SelectCard.js b/src/fireedge/src/public/components/Cards/SelectCard.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+import { Card, CardActionArea, Fade, makeStyles } from '@material-ui/core';
+import { Skeleton } from '@material-ui/lab';
+
+import useNearScreen from 'client/hooks/useNearScreen';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%'
+  },
+  selected: {
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main
+  },
+  actionArea: {
+    height: '100%',
+    minHeight: 140,
+    padding: theme.spacing(1)
+  }
+}));
+
+const SelectCard = React.memo(
+  ({ isSelected, handleSelect, handleUnselect, ID, NAME }) => {
+    const classes = useStyles();
+    const { isNearScreen, fromRef } = useNearScreen({
+      distance: '100px'
+    });
+
+    return (
+      <div ref={fromRef}>
+        {isNearScreen ? (
+          <Fade in={isNearScreen}>
+            <Card
+              className={clsx(classes.root, { [classes.selected]: isSelected })}
+            >
+              <CardActionArea
+                className={classes.actionArea}
+                onClick={() =>
+                  isSelected ? handleUnselect(ID) : handleSelect(ID)
+                }
+              >
+                <span>{`📦 ${NAME}`}</span>
+              </CardActionArea>
+            </Card>
+          </Fade>
+        ) : (
+          <Skeleton variant="rect" width="100%" height={140} />
+        )}
+      </div>
+    );
+  }
+);
+
+SelectCard.propTypes = {
+  isSelected: PropTypes.bool,
+  handleSelect: PropTypes.func,
+  handleUnselect: PropTypes.func,
+  ID: PropTypes.string,
+  NAME: PropTypes.string
+};
+
+SelectCard.defaultProps = {
+  isSelected: false,
+  handleSelect: () => undefined,
+  handleUnselect: () => undefined,
+  ID: undefined,
+  NAME: undefined
+};
+
+export default SelectCard;
diff --git a/src/fireedge/src/public/components/Cards/index.js b/src/fireedge/src/public/components/Cards/index.js
@@ -1,5 +1,6 @@
 import ClusterCard from 'client/components/Cards/ClusterCard';
 import NetworkCard from 'client/components/Cards/NetworkCard';
 import RoleCard from 'client/components/Cards/RoleCard';
+import SelectCard from 'client/components/Cards/SelectCard';
 
-export { ClusterCard, NetworkCard, RoleCard };
+export { ClusterCard, NetworkCard, RoleCard, SelectCard };
diff --git a/src/fireedge/src/public/components/Dialogs/DialogForm.js b/src/fireedge/src/public/components/Dialogs/DialogForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 
 import {
@@ -14,7 +14,7 @@ import { yupResolver } from '@hookform/resolvers';
 
 import { Tr } from 'client/components/HOC';
 
-const DialogForm = React.memo(
+const DialogForm = memo(
   ({ open, title, values, resolver, onSubmit, onCancel, children }) => {
     const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'));
 
@@ -30,25 +30,33 @@ const DialogForm = React.memo(
         open={open}
         maxWidth="lg"
         scroll="paper"
-        PaperProps={{ style: { height: '80%', minWidth: '80%' } }}
+        PaperProps={{
+          style: { height: '100%', minHeight: '80%', minWidth: '80%' }
+        }}
       >
         <DialogTitle>{title}</DialogTitle>
         <DialogContent dividers>
           <FormProvider {...methods}>{children}</FormProvider>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={onCancel} color="primary">
-            {Tr('Cancel')}
-          </Button>
-          <Button
-            type="submit"
-            variant="contained"
-            color="primary"
-            onClick={handleSubmit(onSubmit)}
-          >
-            {Tr('Save')}
-          </Button>
-        </DialogActions>
+        {(onCancel || onSubmit) && (
+          <DialogActions>
+            {onCancel && (
+              <Button onClick={onCancel} color="primary">
+                {Tr('Cancel')}
+              </Button>
+            )}
+            {onSubmit && (
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                onClick={handleSubmit(onSubmit)}
+              >
+                {Tr('Save')}
+              </Button>
+            )}
+          </DialogActions>
+        )}
       </Dialog>
     );
   }
@@ -75,8 +83,8 @@ DialogForm.defaultProps = {
   title: 'Title dialog form',
   values: {},
   resolver: {},
-  onSubmit: () => undefined,
-  onCancel: () => undefined,
+  onSubmit: undefined,
+  onCancel: undefined,
   children: null
 };
 

diff --git a/src/fireedge/src/public/components/Footer/styles.js b/src/fireedge/src/public/components/Footer/styles.js
@@ -18,6 +18,7 @@ export default makeStyles(theme => ({
     color: theme.palette.error.dark
   },
   link: {
-    color: theme.palette.primary.light
+    color: theme.palette.primary.light,
+    marginLeft: theme.spacing(1)
   }
 }));
diff --git a/src/fireedge/src/public/components/FormStepper/FormList.js b/src/fireedge/src/public/components/FormStepper/FormList.js
@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { Box } from '@material-ui/core';
 import { useFormContext } from 'react-hook-form';
 
 import ErrorHelper from 'client/components/FormControl/ErrorHelper';
@@ -14,7 +13,7 @@ function FormList({ step, data, setFormData }) {
   const { id, preRender, ListComponent, DialogComponent, DEFAULT_DATA } = step;
 
   useEffect(() => {
-    preRender && preRender();
+    if (preRender) preRender();
   }, []);
 
   const handleSubmit = values => {
@@ -55,19 +54,24 @@ function FormList({ step, data, setFormData }) {
   const handleClose = () => setShowDialog(false);
 
   return (
-    <Box component="form">
+    <>
       {typeof errors[id]?.message === 'string' && (
         <ErrorHelper label={errors[id]?.message} />
       )}
-      <ListComponent
-        list={data}
-        addCardClick={() => handleOpen()}
-        itemsProps={({ index }) => ({
-          handleEdit: () => handleOpen(index),
-          handleClone: () => handleClone(index),
-          handleRemove: () => handleRemove(index)
-        })}
-      />
+      {useMemo(
+        () => (
+          <ListComponent
+            list={data}
+            handleCreate={() => handleOpen()}
+            itemsProps={({ index }) => ({
+              handleEdit: () => handleOpen(index),
+              handleClone: () => handleClone(index),
+              handleRemove: () => handleRemove(index)
+            })}
+          />
+        ),
+        [data, handleOpen, handleClone, handleRemove]
+      )}
       {showDialog && DialogComponent && (
         <DialogComponent
           open={showDialog}
@@ -76,7 +80,7 @@ function FormList({ step, data, setFormData }) {
           onCancel={handleClose}
         />
       )}
-    </Box>
+    </>
   );
 }
 

diff --git a/src/fireedge/src/public/components/FormStepper/FormListSelect.js b/src/fireedge/src/public/components/FormStepper/FormListSelect.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { Box, Grid } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { useFormContext } from 'react-hook-form';
 
 import ErrorHelper from '../FormControl/ErrorHelper';
@@ -11,7 +11,7 @@ function FormListSelect({ step, data, setFormData }) {
   const { id, onlyOneSelect, preRender, list, ItemComponent } = step;
 
   useEffect(() => {
-    preRender && preRender();
+    if (preRender) preRender();
   }, []);
 
   const handleSelect = index =>
@@ -27,26 +27,24 @@ function FormListSelect({ step, data, setFormData }) {
     }));
 
   return (
-    <Box component="form">
-      <Grid container spacing={3}>
-        {typeof errors[id]?.message === 'string' && (
-          <Grid item xs={12}>
-            <ErrorHelper label={errors[id]?.message} />
+    <Grid container spacing={3}>
+      {typeof errors[id]?.message === 'string' && (
+        <Grid item xs={12}>
+          <ErrorHelper label={errors[id]?.message} />
+        </Grid>
+      )}
+      {Array.isArray(list) &&
+        list?.map((info, index) => (
+          <Grid key={`${id}-${index}`} item xs={6} sm={4} md={3} lg={1}>
+            <ItemComponent
+              value={info}
+              isSelected={data?.some(selected => selected === info?.ID)}
+              handleSelect={handleSelect}
+              handleUnselect={handleUnselect}
+            />
           </Grid>
-        )}
-        {Array.isArray(list) &&
-          list?.map((info, index) => (
-            <Grid key={`${id}-${index}`} item xs={6} sm={4} md={3} lg={1}>
-              <ItemComponent
-                info={info}
-                isSelected={data?.some(selected => selected === info?.ID)}
-                handleSelect={handleSelect}
-                handleUnselect={handleUnselect}
-              />
-            </Grid>
-          ))}
-      </Grid>
-    </Box>
+        ))}
+    </Grid>
   );
 }
 

diff --git a/src/fireedge/src/public/components/FormStepper/FormStep.js b/src/fireedge/src/public/components/FormStepper/FormStep.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { useFormContext } from 'react-hook-form';
@@ -11,29 +11,32 @@ function FormStep({ step, data, setFormData }) {
   const { id, preRender, FormComponent, DialogComponent } = step;
 
   useEffect(() => {
-    preRender && preRender();
+    if (preRender) preRender();
   }, []);
 
   const handleOpen = () => setShowDialog(true);
   const handleClose = () => setShowDialog(false);
-  const handleSubmit = d => console.log(d);
 
   return (
     <>
       {typeof errors[id]?.message === 'string' && (
         <ErrorHelper label={errors[id]?.message} />
       )}
-      {React.useMemo(
+      {useMemo(
         () => (
-          <FormComponent id={id} handleClick={handleOpen} />
+          <FormComponent
+            id={id}
+            values={data}
+            setFormData={setFormData}
+            handleClick={handleOpen}
+          />
         ),
-        [id, handleOpen]
+        [id, handleOpen, setFormData, data]
       )}
       {showDialog && DialogComponent && (
         <DialogComponent
           open={showDialog}
           values={data}
-          onSubmit={handleSubmit}
           onCancel={handleClose}
         />
       )}
@@ -43,7 +46,11 @@ function FormStep({ step, data, setFormData }) {
 
 FormStep.propTypes = {
   step: PropTypes.objectOf(PropTypes.any).isRequired,
-  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
+  data: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.string
+  ]).isRequired,
   setFormData: PropTypes.func.isRequired
 };