F #6075: Simplify table instantiate view (#3110)

src/fireedge/src/client/components/MultipleTags/index.js

@@ -13,14 +13,20 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { Stack, Tooltip, Typography } from '@mui/material'
+import { Stack, Tooltip, Typography, styled } from '@mui/material'
 import PropTypes from 'prop-types'
 import { ReactElement, isValidElement, useMemo } from 'react'
 
 import { Translate } from 'client/components/HOC'
 import { StatusChip } from 'client/components/Status'
 import { T } from 'client/constants'
 
+const StyledText = styled(Typography)(({ theme }) => ({
+  '&': {
+    fontSize: theme.typography.button.fontSize,
+  },
+}))
+
 /**
  * @typedef TagType
  * @property {string} text - The text to display in the chip
@@ -75,10 +81,10 @@ const MultipleTags = ({ tags, limitTags = 1, clipboard = false }) => {
       {tagsToDisplay}
       {more > 0 && (
         <Tooltip arrow title={<Stack>{tagsToHide}</Stack>}>
-          <Typography component="span" variant="string" sx={{ ml: 1 }}>
+          <StyledText component="span" variant="string" sx={{ ml: 1 }}>
             {`+${more} `}
             <Translate word={T.More} />
-          </Typography>
+          </StyledText>
         </Tooltip>
       )}
     </>

src/fireedge/src/client/components/Tables/Vms/VmTemplateTable.js

@@ -0,0 +1,62 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2023, 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 { Box, styled } from '@mui/material'
+import { SubmitButton } from 'client/components/FormControl'
+import { Tr } from 'client/components/HOC'
+import VmTemplatesTable from 'client/components/Tables/VmTemplates'
+import { T } from 'client/constants'
+import { Table as TableIcon, TableRows } from 'iconoir-react'
+import PropTypes from 'prop-types'
+import { memo, useState } from 'react'
+
+const StyledBoxStyles = styled(Box)(() => ({
+  '&': {
+    textAlign: 'right',
+  },
+}))
+
+const Table = memo((props) => {
+  const [enableStyles, setEnableStyles] = useState(true)
+
+  const { classes, ...restProps } = props
+  const propsClass = restProps
+
+  enableStyles && (propsClass.classes = classes)
+
+  const handleClasses = () => setEnableStyles(!enableStyles)
+
+  return (
+    <>
+      <StyledBoxStyles>
+        <SubmitButton
+          data-cy="clear-styles-table"
+          tooltip={Tr(enableStyles ? T.ItemsRow : T.ItemsTables)}
+          icon={enableStyles ? <TableRows /> : <TableIcon />}
+          onClick={handleClasses}
+        />
+      </StyledBoxStyles>
+      <VmTemplatesTable {...propsClass} />
+    </>
+  )
+})
+
+Table.propTypes = {
+  classes: PropTypes.object,
+}
+
+Table.displayName = 'TableStyled'
+
+export default Table

src/fireedge/src/client/components/Tables/Vms/actions.js

@@ -56,7 +56,7 @@ import {
   GlobalAction,
   createActions,
 } from 'client/components/Tables/Enhanced/Utils'
-import VmTemplatesTable from 'client/components/Tables/VmTemplates'
+import VmTemplatesTable from 'client/components/Tables/Vms/VmTemplateTable'
 
 import { PATH } from 'client/apps/sunstone/routesOne'
 import { Translate } from 'client/components/HOC'

src/fireedge/src/client/constants/translates.js

@@ -43,6 +43,8 @@ module.exports = {
   ResetFilters: 'Clear current search query, filters, and sorts',
   VmsClearErrors:
     'Clear error messages and warnings from selects Virtual Machines',
+  ItemsTables: 'Displays the items as a Table',
+  ItemsRow: 'Displays the items as a list',
 
   /* actions */
   Accept: 'Accept',