From 1bda1e37afc790f50f648a60536a9ff244154a3c Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Wed, 18 May 2022 14:55:28 +0200 Subject: [PATCH] F #5422: Add button to goto row page on table (#2056) --- .../Enhanced/Utils/GlobalSelectedRows.js | 19 ++++++--- .../components/Tables/Enhanced/index.js | 30 +++++++++----- .../src/client/constants/translates.js | 1 + .../src/client/containers/Clusters/index.js | 39 ++++++++++++++----- .../src/client/containers/Datastores/index.js | 39 ++++++++++++++----- .../src/client/containers/Groups/index.js | 39 ++++++++++++++----- .../src/client/containers/Hosts/index.js | 39 ++++++++++++++----- .../src/client/containers/Images/index.js | 39 ++++++++++++++----- .../containers/MarketplaceApps/index.js | 39 ++++++++++++++----- .../client/containers/Marketplaces/index.js | 39 ++++++++++++++----- .../src/client/containers/Users/index.js | 39 ++++++++++++++----- .../containers/VNetworkTemplates/index.js | 39 ++++++++++++++----- .../containers/VirtualMachines/index.js | 39 ++++++++++++++----- .../containers/VirtualNetworks/index.js | 39 ++++++++++++++----- .../client/containers/VmTemplates/index.js | 39 ++++++++++++++----- .../src/client/containers/Zones/index.js | 39 ++++++++++++++----- 16 files changed, 412 insertions(+), 145 deletions(-) diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js index 09945db81b..6d8e062c12 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js @@ -16,7 +16,7 @@ import { JSXElementConstructor } from 'react' import PropTypes from 'prop-types' -import { TableProps } from 'react-table' +import { TableProps, Row } from 'react-table' import { styled, Chip, Alert, Button, alertClasses } from '@mui/material' import { Translate } from 'client/components/HOC' @@ -39,10 +39,15 @@ const MessageStyled = styled(Alert)({ * * @param {object} props - Props * @param {boolean} props.withAlert - If `true`, the list of selected rows will be an alert + * @param {function(Row)} [props.gotoRowPage] - Function to navigate to a page of the row * @param {TableProps} props.useTableProps - Table props * @returns {JSXElementConstructor} Component JSX */ -const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => { +const GlobalSelectedRows = ({ + withAlert = false, + useTableProps, + gotoRowPage, +}) => { const { preFilteredRows, toggleAllRowsSelected, @@ -78,11 +83,12 @@ const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => { ) : (
- {selectedRows?.map(({ original, id, toggleRowSelected }) => ( + {selectedRows?.map((row) => ( toggleRowSelected(false)} + key={row.id} + label={row.original?.NAME ?? row.id} + onDelete={() => row.toggleRowSelected(false)} + {...(gotoRowPage && { onClick: () => gotoRowPage(row) })} /> ))}
@@ -92,6 +98,7 @@ const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => { GlobalSelectedRows.propTypes = { withAlert: PropTypes.bool, useTableProps: PropTypes.object.isRequired, + gotoRowPage: PropTypes.func, } GlobalSelectedRows.displayName = ' GlobalSelectedRows' diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js index 4a81c34176..b1eeb9874b 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js @@ -104,11 +104,9 @@ const EnhancedTable = ({ autoResetSelectedRow: false, autoResetSelectedRows: false, autoResetSortBy: false, + autoResetPage: false, // ------------------------------------- - initialState: { - pageSize, - ...initialState, - }, + initialState: { pageSize, ...initialState }, }, useGlobalFilter, useFilters, @@ -126,13 +124,24 @@ const EnhancedTable = ({ page, gotoPage, pageCount, - state: { pageIndex, selectedRowIds }, + state: { pageIndex, selectedRowIds, ...state }, } = useTableProps + const gotoRowPage = async (row) => { + const pageIdx = Math.floor(row.index / state.pageSize) + + await gotoPage(pageIdx) + + // scroll to the row in the table view (if it's visible) + document + ?.querySelector(`.selected[role='row'][data-cy$='-${row.id}']`) + ?.scrollIntoView({ behavior: 'smooth', block: 'center' }) + } + useMountedLayoutEffect(() => { - const selectedRows = preFilteredRows.filter( - (row) => !!selectedRowIds[row.id] - ) + const selectedRows = preFilteredRows + .filter((row) => !!selectedRowIds[row.id]) + .map((row) => ({ ...row, gotoPage: () => gotoRowPage(row) })) onSelectedRowsChange?.(selectedRows) }, [selectedRowIds]) @@ -189,7 +198,10 @@ const EnhancedTable = ({ {/* SELECTED ROWS */} {displaySelectedRows && (
- +
)} diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js index 186d8a750e..325771999c 100644 --- a/src/fireedge/src/client/constants/translates.js +++ b/src/fireedge/src/client/constants/translates.js @@ -85,6 +85,7 @@ module.exports = { Info: 'Info', Instantiate: 'Instantiate', InstantiateVmTemplate: 'Instantiate VM Template', + LocateOnTable: 'Locate on table', Lock: 'Lock', Migrate: 'Migrate', MigrateLive: 'Migrate live', diff --git a/src/fireedge/src/client/containers/Clusters/index.js b/src/fireedge/src/client/containers/Clusters/index.js index 72efb9467f..eb0ba91d0f 100644 --- a/src/fireedge/src/client/containers/Clusters/index.js +++ b/src/fireedge/src/client/containers/Clusters/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { ClustersTable } from 'client/components/Tables' import ClusterTabs from 'client/components/Tabs/Cluster' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Cluster } from 'client/constants' /** * Displays a list of Clusters with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Clusters() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Clusters() { /** * Displays details of a Cluster. * - * @param {object} cluster - Cluster to display + * @param {Cluster} cluster - Cluster to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Cluster * @returns {ReactElement} Cluster details */ -const InfoTabs = memo(({ cluster }) => ( +const InfoTabs = memo(({ cluster, gotoPage }) => ( - - {`#${cluster.ID} | ${cluster.NAME}`} - + + + {`#${cluster.ID} | ${cluster.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { cluster: PropTypes.object.isRequired } +InfoTabs.propTypes = { + cluster: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Datastores/index.js b/src/fireedge/src/client/containers/Datastores/index.js index 8001b64aba..1a6968f30b 100644 --- a/src/fireedge/src/client/containers/Datastores/index.js +++ b/src/fireedge/src/client/containers/Datastores/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { DatastoresTable } from 'client/components/Tables' import DatastoreTabs from 'client/components/Tabs/Datastore' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Datastore } from 'client/constants' /** * Displays a list of Datastores with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Datastores() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Datastores() { /** * Displays details of a Datastore. * - * @param {object} datastore - Datastore to display + * @param {Datastore} datastore - Datastore to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Datastore * @returns {ReactElement} Datastore details */ -const InfoTabs = memo(({ datastore }) => ( +const InfoTabs = memo(({ datastore, gotoPage }) => ( - - {`#${datastore.ID} | ${datastore.NAME}`} - + + + {`#${datastore.ID} | ${datastore.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { datastore: PropTypes.object.isRequired } +InfoTabs.propTypes = { + datastore: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Groups/index.js b/src/fireedge/src/client/containers/Groups/index.js index d5348f0577..f86f190bf7 100644 --- a/src/fireedge/src/client/containers/Groups/index.js +++ b/src/fireedge/src/client/containers/Groups/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { GroupsTable } from 'client/components/Tables' import GroupTabs from 'client/components/Tabs/Group' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Group } from 'client/constants' /** * Displays a list of Groups with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Groups() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Groups() { /** * Displays details of a Group. * - * @param {object} group - Group to display + * @param {Group} group - Group to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Group * @returns {ReactElement} Group details */ -const InfoTabs = memo(({ group }) => ( +const InfoTabs = memo(({ group, gotoPage }) => ( - - {`#${group.ID} | ${group.NAME}`} - + + + {`#${group.ID} | ${group.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { group: PropTypes.object.isRequired } +InfoTabs.propTypes = { + group: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js index d356e4eccc..87651c4315 100644 --- a/src/fireedge/src/client/containers/Hosts/index.js +++ b/src/fireedge/src/client/containers/Hosts/index.js @@ -15,7 +15,8 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { HostsTable } from 'client/components/Tables' @@ -23,6 +24,8 @@ import HostTabs from 'client/components/Tabs/Host' import HostActions from 'client/components/Tables/Hosts/actions' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Host } from 'client/constants' /** * Displays a list of Hosts with a split pane between the list and selected row(s). @@ -52,7 +55,10 @@ function Hosts() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -65,19 +71,31 @@ function Hosts() { /** * Displays details of a Host. * - * @param {object} host - Host to display + * @param {Host} host - Host to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Host * @returns {ReactElement} Host details */ -const InfoTabs = memo(({ host }) => ( +const InfoTabs = memo(({ host, gotoPage }) => ( - - {`#${host.ID} | ${host.NAME}`} - + + + {`#${host.ID} | ${host.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { host: PropTypes.object.isRequired } +InfoTabs.propTypes = { + host: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Images/index.js b/src/fireedge/src/client/containers/Images/index.js index 543d3c70c8..1f7628849f 100644 --- a/src/fireedge/src/client/containers/Images/index.js +++ b/src/fireedge/src/client/containers/Images/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { ImagesTable } from 'client/components/Tables' import ImageTabs from 'client/components/Tabs/Image' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Image } from 'client/constants' /** * Displays a list of Images with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Images() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Images() { /** * Displays details of an Image. * - * @param {object} image - Image to display + * @param {Image} image - Image to display + * @param {Function} [gotoPage] - Function to navigate to a page of an Image * @returns {ReactElement} Image details */ -const InfoTabs = memo(({ image }) => ( +const InfoTabs = memo(({ image, gotoPage }) => ( - - {`#${image.ID} | ${image.NAME}`} - + + + {`#${image.ID} | ${image.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { image: PropTypes.object.isRequired } +InfoTabs.propTypes = { + image: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/MarketplaceApps/index.js b/src/fireedge/src/client/containers/MarketplaceApps/index.js index 8e23c2eb11..d7c66336b0 100644 --- a/src/fireedge/src/client/containers/MarketplaceApps/index.js +++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js @@ -15,7 +15,8 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { MarketplaceAppsTable } from 'client/components/Tables' @@ -23,6 +24,8 @@ import MarketplaceAppActions from 'client/components/Tables/MarketplaceApps/acti import MarketplaceAppsTabs from 'client/components/Tabs/MarketplaceApp' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, MarketplaceApp } from 'client/constants' /** * Displays a list of Marketplace Apps with a split pane between the list and selected row(s). @@ -52,7 +55,10 @@ function MarketplaceApps() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -65,19 +71,31 @@ function MarketplaceApps() { /** * Displays details of a Marketplace App. * - * @param {object} app - Marketplace App to display + * @param {MarketplaceApp} app - Marketplace App to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace App * @returns {ReactElement} Marketplace App details */ -const InfoTabs = memo(({ app }) => ( +const InfoTabs = memo(({ app, gotoPage }) => ( - - {`#${app.ID} | ${app.NAME}`} - + + + {`#${app.ID} | ${app.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { app: PropTypes.object.isRequired } +InfoTabs.propTypes = { + app: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Marketplaces/index.js b/src/fireedge/src/client/containers/Marketplaces/index.js index b7d2f65c45..6e5a38577c 100644 --- a/src/fireedge/src/client/containers/Marketplaces/index.js +++ b/src/fireedge/src/client/containers/Marketplaces/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { MarketplacesTable } from 'client/components/Tables' import MarketplaceTabs from 'client/components/Tabs/Marketplace' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Marketplace } from 'client/constants' /** * Displays a list of Marketplaces with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Marketplaces() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Marketplaces() { /** * Displays details of a Marketplace. * - * @param {object} market - Marketplace to display + * @param {Marketplace} market - Marketplace to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace * @returns {ReactElement} Marketplace details */ -const InfoTabs = memo(({ market }) => ( +const InfoTabs = memo(({ market, gotoPage }) => ( - - {`#${market.ID} | ${market.NAME}`} - + + + {`#${market.ID} | ${market.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { market: PropTypes.object.isRequired } +InfoTabs.propTypes = { + market: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Users/index.js b/src/fireedge/src/client/containers/Users/index.js index 78cd6c3e4b..2aee3ad613 100644 --- a/src/fireedge/src/client/containers/Users/index.js +++ b/src/fireedge/src/client/containers/Users/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { UsersTable } from 'client/components/Tables' import UserTabs from 'client/components/Tabs/User' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, User } from 'client/constants' /** * Displays a list of Users with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Users() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Users() { /** * Displays details of an User. * - * @param {object} user - User to display + * @param {User} user - User to display + * @param {Function} [gotoPage] - Function to navigate to a page of an User * @returns {ReactElement} User details */ -const InfoTabs = memo(({ user }) => ( +const InfoTabs = memo(({ user, gotoPage }) => ( - - {`#${user.ID} | ${user.NAME}`} - + + + {`#${user.ID} | ${user.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { user: PropTypes.object.isRequired } +InfoTabs.propTypes = { + user: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/VNetworkTemplates/index.js b/src/fireedge/src/client/containers/VNetworkTemplates/index.js index e210dab5c1..061eb850c5 100644 --- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js +++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { VNetworkTemplatesTable } from 'client/components/Tables' import VNetworkTemplateTabs from 'client/components/Tabs/VNetworkTemplate' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, VNetworkTemplate } from 'client/constants' /** * Displays a list of VNet Templates with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function VNetworkTemplates() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function VNetworkTemplates() { /** * Displays details of a VNet Template. * - * @param {object} vnTemplate - VNet Template to display + * @param {VNetworkTemplate} vnTemplate - VNet Template to display + * @param {Function} [gotoPage] - Function to navigate to a page of a VNet Template * @returns {ReactElement} VNet Template details */ -const InfoTabs = memo(({ vnTemplate }) => ( +const InfoTabs = memo(({ vnTemplate, gotoPage }) => ( - - {`#${vnTemplate.ID} | ${vnTemplate.NAME}`} - + + + {`#${vnTemplate.ID} | ${vnTemplate.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { vnTemplate: PropTypes.object.isRequired } +InfoTabs.propTypes = { + vnTemplate: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/VirtualMachines/index.js b/src/fireedge/src/client/containers/VirtualMachines/index.js index 8ce078f1bf..ae0e0fb905 100644 --- a/src/fireedge/src/client/containers/VirtualMachines/index.js +++ b/src/fireedge/src/client/containers/VirtualMachines/index.js @@ -15,7 +15,8 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { VmsTable } from 'client/components/Tables' @@ -23,6 +24,8 @@ import VmActions from 'client/components/Tables/Vms/actions' import VmTabs from 'client/components/Tabs/Vm' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, VM } from 'client/constants' /** * Displays a list of VMs with a split pane between the list and selected row(s). @@ -52,7 +55,10 @@ function VirtualMachines() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -65,19 +71,31 @@ function VirtualMachines() { /** * Displays details of a VM. * - * @param {object} vm - VM to display + * @param {VM} vm - VM to display + * @param {Function} [gotoPage] - Function to navigate to a page of a VM * @returns {ReactElement} VM details */ -const InfoTabs = memo(({ vm }) => ( +const InfoTabs = memo(({ vm, gotoPage }) => ( - - {`#${vm.ID} | ${vm.NAME}`} - + + + {`#${vm.ID} | ${vm.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { vm: PropTypes.object.isRequired } +InfoTabs.propTypes = { + vm: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/VirtualNetworks/index.js b/src/fireedge/src/client/containers/VirtualNetworks/index.js index 8db0e9448c..4b9bdab6d9 100644 --- a/src/fireedge/src/client/containers/VirtualNetworks/index.js +++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { VNetworksTable } from 'client/components/Tables' import VNetworkTabs from 'client/components/Tabs/VNetwork' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, VirtualNetwork } from 'client/constants' /** * Displays a list of Virtual Networks with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function VirtualNetworks() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function VirtualNetworks() { /** * Displays details of a Virtual Network. * - * @param {object} vnet - Virtual Network to display + * @param {VirtualNetwork} vnet - Virtual Network to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Virtual Network * @returns {ReactElement} Virtual Network details */ -const InfoTabs = memo(({ vnet }) => ( +const InfoTabs = memo(({ vnet, gotoPage }) => ( - - {`#${vnet.ID} | ${vnet.NAME}`} - + + + {`#${vnet.ID} | ${vnet.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { vnet: PropTypes.object.isRequired } +InfoTabs.propTypes = { + vnet: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js index 9918fdfe34..a32d383619 100644 --- a/src/fireedge/src/client/containers/VmTemplates/index.js +++ b/src/fireedge/src/client/containers/VmTemplates/index.js @@ -15,7 +15,8 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { VmTemplatesTable } from 'client/components/Tables' @@ -23,6 +24,8 @@ import VmTemplateActions from 'client/components/Tables/VmTemplates/actions' import VmTemplateTabs from 'client/components/Tabs/VmTemplate' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, VmTemplate } from 'client/constants' /** * Displays a list of VM Templates with a split pane between the list and selected row(s). @@ -52,7 +55,10 @@ function VmTemplates() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -65,19 +71,31 @@ function VmTemplates() { /** * Displays details of a VM Template. * - * @param {object} vmTemplate - VM Template to display + * @param {VmTemplate} vmTemplate - VM Template to display + * @param {Function} [gotoPage] - Function to navigate to a page of a VM Template * @returns {ReactElement} VM Template details */ -const InfoTabs = memo(({ vmTemplate }) => ( +const InfoTabs = memo(({ vmTemplate, gotoPage }) => ( - - {`#${vmTemplate.ID} | ${vmTemplate.NAME}`} - + + + {`#${vmTemplate.ID} | ${vmTemplate.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { vmTemplate: PropTypes.object.isRequired } +InfoTabs.propTypes = { + vmTemplate: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))} diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js index 9080c2af74..617f5a9ce4 100644 --- a/src/fireedge/src/client/containers/Zones/index.js +++ b/src/fireedge/src/client/containers/Zones/index.js @@ -15,13 +15,16 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useState, memo } from 'react' import PropTypes from 'prop-types' -import { Typography, Box, Stack, Chip } from '@mui/material' +import { BookmarkEmpty } from 'iconoir-react' +import { Typography, Box, Stack, Chip, IconButton } from '@mui/material' import { Row } from 'react-table' import { ZonesTable } from 'client/components/Tables' import ZoneTabs from 'client/components/Tabs/Zone' import SplitPane from 'client/components/SplitPane' import MultipleTags from 'client/components/MultipleTags' +import { Tr } from 'client/components/HOC' +import { T, Zone } from 'client/constants' /** * Displays a list of Zones with a split pane between the list and selected row(s). @@ -47,7 +50,10 @@ function Zones() { {moreThanOneSelected ? ( ) : ( - + )} )} @@ -60,19 +66,31 @@ function Zones() { /** * Displays details of a Zone. * - * @param {object} zone - Zone to display + * @param {Zone} zone - Zone to display + * @param {Function} [gotoPage] - Function to navigate to a page of a Zone * @returns {ReactElement} Zone details */ -const InfoTabs = memo(({ zone }) => ( +const InfoTabs = memo(({ zone, gotoPage }) => ( - - {`#${zone.ID} | ${zone.NAME}`} - + + + {`#${zone.ID} | ${zone.NAME}`} + + {gotoPage && ( + + + + )} + )) -InfoTabs.propTypes = { zone: PropTypes.object.isRequired } +InfoTabs.propTypes = { + zone: PropTypes.object.isRequired, + gotoPage: PropTypes.func, +} + InfoTabs.displayName = 'InfoTabs' /** @@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs' * @returns {ReactElement} List of tags */ const GroupedTags = memo(({ tags = [] }) => ( - + ( + tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => ( toggleRowSelected(false)} /> ))}