From 648710bf832029897fa912f2efd34c099239919c Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 16 Sep 2020 17:31:11 +0200
Subject: [PATCH] F #3951: Empty list & some fixes (#219)

---
 .../src/public/components/Cards/EmptyCard.js  | 41 ++++++++++
 .../src/public/components/Cards/index.js      |  3 +-
 .../components/FormStepper/FormListSelect.js  | 12 ++-
 .../src/public/components/router/endpoints.js | 74 -------------------
 4 files changed, 52 insertions(+), 78 deletions(-)
 create mode 100644 src/fireedge/src/public/components/Cards/EmptyCard.js
 delete mode 100644 src/fireedge/src/public/components/router/endpoints.js

diff --git a/src/fireedge/src/public/components/Cards/EmptyCard.js b/src/fireedge/src/public/components/Cards/EmptyCard.js
new file mode 100644
index 0000000000..40d6aeb408
--- /dev/null
+++ b/src/fireedge/src/public/components/Cards/EmptyCard.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Card, CardHeader, Fade, makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: '100%'
+  },
+  content: {
+    height: '100%',
+    minHeight: 140,
+    padding: theme.spacing(1),
+    textAlign: 'center'
+  }
+}));
+
+const EmptyCard = React.memo(({ name }) => {
+  const classes = useStyles();
+
+  return (
+    <Fade in unmountOnExit>
+      <Card className={classes.root} variant="outlined">
+        <CardHeader
+          subheader={`Your ${name} list is empty`}
+          className={classes.content}
+        />
+      </Card>
+    </Fade>
+  );
+});
+
+EmptyCard.propTypes = {
+  name: PropTypes.string
+};
+
+EmptyCard.defaultProps = {
+  name: undefined
+};
+
+export default EmptyCard;
diff --git a/src/fireedge/src/public/components/Cards/index.js b/src/fireedge/src/public/components/Cards/index.js
index 45d96cd233..0b168c2cd4 100644
--- a/src/fireedge/src/public/components/Cards/index.js
+++ b/src/fireedge/src/public/components/Cards/index.js
@@ -1,6 +1,7 @@
 import ClusterCard from 'client/components/Cards/ClusterCard';
 import NetworkCard from 'client/components/Cards/NetworkCard';
 import RoleCard from 'client/components/Cards/RoleCard';
+import EmptyCard from 'client/components/Cards/EmptyCard';
 import SelectCard from 'client/components/Cards/SelectCard';
 
-export { ClusterCard, NetworkCard, RoleCard, SelectCard };
+export { ClusterCard, NetworkCard, RoleCard, EmptyCard, SelectCard };
diff --git a/src/fireedge/src/public/components/FormStepper/FormListSelect.js b/src/fireedge/src/public/components/FormStepper/FormListSelect.js
index 214a9b0d4b..62e082ee08 100644
--- a/src/fireedge/src/public/components/FormStepper/FormListSelect.js
+++ b/src/fireedge/src/public/components/FormStepper/FormListSelect.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import { Grid } from '@material-ui/core';
 import { useFormContext } from 'react-hook-form';
 
-import ErrorHelper from '../FormControl/ErrorHelper';
+import ErrorHelper from 'client/components/FormControl/ErrorHelper';
+import { EmptyCard } from 'client/components/Cards';
 
 function FormListSelect({ step, data, setFormData }) {
   const { errors } = useFormContext();
@@ -33,7 +34,11 @@ function FormListSelect({ step, data, setFormData }) {
           <ErrorHelper label={errors[id]?.message} />
         </Grid>
       )}
-      {Array.isArray(list) &&
+      {list?.length === 0 ? (
+        <Grid item xs={6} sm={4} md={3} lg={1}>
+          <EmptyCard name={id} />
+        </Grid>
+      ) : (
         list?.map((info, index) => (
           <Grid key={`${id}-${index}`} item xs={6} sm={4} md={3} lg={1}>
             <ItemComponent
@@ -43,7 +48,8 @@ function FormListSelect({ step, data, setFormData }) {
               handleUnselect={handleUnselect}
             />
           </Grid>
-        ))}
+        ))
+      )}
     </Grid>
   );
 }
diff --git a/src/fireedge/src/public/components/router/endpoints.js b/src/fireedge/src/public/components/router/endpoints.js
deleted file mode 100644
index 1adaa0eab7..0000000000
--- a/src/fireedge/src/public/components/router/endpoints.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* Copyright 2002-2019, OpenNebula Project, OpenNebula Systems                */
-/*                                                                            */
-/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
-/* not use this file except in compliance with the License. You may obtain    */
-/* a copy of the License at                                                   */
-/*                                                                            */
-/* http://www.apache.org/licenses/LICENSE-2.0                                 */
-/*                                                                            */
-/* Unless required by applicable law or agreed to in writing, software        */
-/* distributed under the License is distributed on an "AS IS" BASIS,          */
-/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
-/* See the License for the specific language governing permissions and        */
-/* limitations under the License.                                             */
-/* -------------------------------------------------------------------------- */
-
-import React from 'react';
-import Login from './login';
-import Settings from '../containers/Settings';
-import TestApi from '../containers/TestApi';
-import Dashboard from '../containers/Dashboard';
-import { Clusters, Hosts, Zones } from '../containers/Infrastructure';
-
-const endpoints = {
-  login: {
-    path: '/',
-    authenticated: false,
-    menu: false,
-    component: Login
-  },
-  dashboard: {
-    path: '/dashboard',
-    component: () => <Dashboard />
-  },
-  settings: {
-    path: '/settings',
-    component: () => <Settings />
-  },
-  test_api: {
-    path: '/test-api',
-    component: () => <TestApi />
-  },
-  // infrastructure
-  infrastructure: {
-    clusters: {
-      path: '/clusters',
-      component: () => <Clusters />
-    },
-    hosts: {
-      path: '/hosts',
-      component: () => <Hosts />
-    },
-    zones: {
-      path: '/zones',
-      component: () => <Zones />
-    }
-  },
-  // networks
-  networks: {
-    vnets: {
-      path: '/vnets'
-    },
-    vnets_templates: {
-      path: '/vnets-templates'
-    },
-    vnets_topology: {
-      path: '/vnets-topology'
-    },
-    vnets_secgroup: {
-      path: '/secgroup'
-    }
-  }
-};
-
-export default endpoints;