From 1dc21b9a21d3f70587cf9539ab83198a55e7d394 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 5 Sep 2023 11:06:33 -0600 Subject: [PATCH] Removed TableWrapper (#3032) Signed-off-by: Benjamin Perez --- .../Objects/ListObjects/ListObjectsTable.tsx | 7 +- .../FormComponents/common/styleLibrary.ts | 37 - .../Common/TableWrapper/TableActionButton.tsx | 161 ---- .../TableActionIcons/CloudIcon.tsx | 20 - .../TableActionIcons/ConsoleIcon.tsx | 20 - .../TableActionIcons/DisableIcon.tsx | 20 - .../TableActionIcons/FormatDriveIcon.tsx | 15 - .../TableWrapper/TableActionIcons/common.ts | 6 - .../Common/TableWrapper/TableWrapper.tsx | 821 ------------------ portal-ui/src/screens/Console/KMS/AddKey.tsx | 6 +- .../src/screens/Console/KMS/AddKeyForm.tsx | 50 +- .../screens/Console/KMS/DeleteKMSModal.tsx | 10 +- .../src/screens/Console/KMS/ImportKey.tsx | 49 +- .../src/screens/Console/KMS/ListKeys.tsx | 45 +- 14 files changed, 65 insertions(+), 1202 deletions(-) delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts delete mode 100644 portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsTable.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsTable.tsx index d0186e6b4..923a80f7d 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsTable.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjectsTable.tsx @@ -14,9 +14,8 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { listModeColumns, rewindModeColumns } from "./ListObjectsHelpers"; -import { ItemActions } from "../../../../Common/TableWrapper/TableWrapper"; import React, { useState } from "react"; +import { listModeColumns, rewindModeColumns } from "./ListObjectsHelpers"; import makeStyles from "@mui/styles/makeStyles"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -42,7 +41,7 @@ import { } from "../../../../../../common/SecureComponent/permissions"; import { hasPermission } from "../../../../../../common/SecureComponent"; import { downloadObject } from "../../../../ObjectBrowser/utils"; -import { DataTable } from "mds"; +import { DataTable, ItemActions } from "mds"; import { BucketObject } from "api/consoleApi"; const useStyles = makeStyles((theme: Theme) => @@ -186,7 +185,7 @@ const ListObjectsTable = ({ internalPaths }: IListObjectTable) => { const tableActions: ItemActions[] = [ { type: "view", - label: "View", + tooltip: "View", onClick: openPath, sendOnlyId: false, }, diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 019a53b54..5c1b4c97a 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -140,25 +140,6 @@ export const checkboxIcons = { }, }; -const radioBasic = { - width: 16, - height: 16, - borderRadius: "100%", - "input:disabled ~ &": { - border: "1px solid #E5E5E5", - }, - padding: 1, -}; - -export const radioIcons = { - radioUnselectedIcon: { ...radioBasic, border: "2px solid #E5E5E5" }, - radioSelectedIcon: { - ...radioBasic, - border: "2px solid #E5E5E5", - backgroundColor: "#072C4F", - }, -}; - export const containerForHeader = { container: { position: "relative" as const, @@ -665,13 +646,6 @@ export const inputFieldStyles = { }, }; -export const inlineCheckboxes = { - inlineCheckboxes: { - display: "flex", - justifyContent: "flex-start", - }, -}; - const commonStateIcon = { marginRight: 10, lineHeight: 1, @@ -933,14 +907,3 @@ export const twoColCssGridLayoutConfig = { gridAutoFlow: "dense", }, }; - -// These classes are meant to be used as React.CSSProperties for TableWrapper -export const TableRowPredefStyles: any = { - deleted: { - color: "#707070", - backgroundColor: "#f1f0f0", - "&.selected": { - color: "#b2b2b2", - }, - }, -}; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx deleted file mode 100644 index e2ca180e3..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionButton.tsx +++ /dev/null @@ -1,161 +0,0 @@ -// This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . -import React from "react"; -import isString from "lodash/isString"; -import { Link } from "react-router-dom"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { IconButton, Tooltip } from "@mui/material"; -import CloudIcon from "./TableActionIcons/CloudIcon"; -import ConsoleIcon from "./TableActionIcons/ConsoleIcon"; -import DisableIcon from "./TableActionIcons/DisableIcon"; -import FormatDriveIcon from "./TableActionIcons/FormatDriveIcon"; -import { - DownloadIcon, - EditIcon, - IAMPoliciesIcon, - PreviewIcon, - ShareIcon, - TrashIcon, -} from "mds"; - -const styles = () => - createStyles({ - spacing: { - margin: "0 8px", - }, - buttonDisabled: { - "&.MuiButtonBase-root.Mui-disabled": { - cursor: "not-allowed", - filter: "grayscale(100%)", - opacity: "30%", - }, - }, - }); - -interface IActionButton { - label?: string; - type: string | React.ReactNode; - onClick?: (id: string) => any; - to?: string; - valueToSend: any; - selected: boolean; - sendOnlyId?: boolean; - idField: string; - disabled: boolean; - classes: any; -} - -const defineIcon = (type: string, selected: boolean) => { - switch (type) { - case "view": - return ; - case "edit": - return ; - case "delete": - return ; - case "description": - return ; - case "share": - return ; - case "cloud": - return ; - case "console": - return ; - case "download": - return ; - case "disable": - return ; - case "format": - return ; - case "preview": - return ; - } - - return null; -}; - -const TableActionButton = ({ - type, - onClick, - valueToSend, - idField, - selected, - to, - sendOnlyId = false, - disabled = false, - classes, - label, -}: IActionButton) => { - const valueClick = sendOnlyId ? valueToSend[idField] : valueToSend; - - const icon = typeof type === "string" ? defineIcon(type, selected) : type; - let buttonElement = ( - { - e.stopPropagation(); - if (!disabled) { - onClick(valueClick); - } else { - e.preventDefault(); - } - } - : () => null - } - sx={{ - width: "30px", - height: "30px", - }} - > - {icon} - - ); - - if (label && label !== "") { - buttonElement = {buttonElement}; - } - - if (onClick) { - return buttonElement; - } - - if (isString(to)) { - if (!disabled) { - return ( - { - e.stopPropagation(); - }} - > - {buttonElement} - - ); - } - - return buttonElement; - } - - return null; -}; - -export default withStyles(styles)(TableActionButton); diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx deleted file mode 100644 index 167ee39b9..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/CloudIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const CloudIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default CloudIcon; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx deleted file mode 100644 index 22e3872d2..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/ConsoleIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const ConsoleIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default ConsoleIcon; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx deleted file mode 100644 index 40d8ba4e4..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/DisableIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { IIcon, selected, unSelected } from "./common"; - -const DescriptionIcon = ({ active = false }: IIcon) => { - return ( - - - - ); -}; - -export default DescriptionIcon; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx deleted file mode 100644 index d5b038223..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/FormatDriveIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { SVGProps } from "react"; - -const FormatDriveIcon = (props: SVGProps) => ( - - - -); - -export default FormatDriveIcon; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts deleted file mode 100644 index a21aba530..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface IIcon { - active: boolean; -} - -export const unSelected = "#081C42"; -export const selected = "#081C42"; diff --git a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx deleted file mode 100644 index 8cc553558..000000000 --- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx +++ /dev/null @@ -1,821 +0,0 @@ -// This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . -import React, { Fragment, useState } from "react"; -import { - Checkbox, - Grid, - IconButton, - Paper, - Popover, - Typography, -} from "@mui/material"; -import { useNavigate } from "react-router-dom"; -import { AutoSizer, Column, InfiniteLoader, Table } from "react-virtualized"; -import get from "lodash/get"; -import isString from "lodash/isString"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import ViewColumnIcon from "@mui/icons-material/ViewColumn"; -import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; -import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; -import TableActionButton from "./TableActionButton"; -import CheckboxWrapper from "../FormComponents/CheckboxWrapper/CheckboxWrapper"; -import { - checkboxIcons, - radioIcons, - TableRowPredefStyles, -} from "../FormComponents/common/styleLibrary"; -import { Loader, ProgressBar } from "mds"; -import TooltipWrapper from "../TooltipWrapper/TooltipWrapper"; - -//Interfaces for table Items - -export interface ItemActions { - label?: string; - type: string | any; - to?: string; - sendOnlyId?: boolean; - disableButtonFunction?: (itemValue: any) => boolean; - showLoaderFunction?: (itemValue: any) => boolean; - - onClick?(valueToSend: any): any; -} - -interface IColumns { - label: string; - elementKey?: string; - renderFunction?: (input: any) => any; - renderFullObject?: boolean; - globalClass?: any; - rowClass?: any; - width?: number; - headerTextAlign?: string; - contentTextAlign?: string; - enableSort?: boolean; -} - -interface IInfiniteScrollConfig { - loadMoreRecords: (indexElements: { - startIndex: number; - stopIndex: number; - }) => Promise; - recordsCount: number; -} - -interface ISortConfig { - triggerSort: (val: any) => any; - currentSort: string; - currentDirection: "ASC" | "DESC" | undefined; -} - -interface TableWrapperProps { - itemActions?: ItemActions[] | null; - columns: IColumns[]; - onSelect?: (e: React.ChangeEvent) => any; - idField: string; - isLoading: boolean; - loadingMessage?: React.ReactNode; - records: any[]; - classes: any; - entityName: string; - selectedItems?: string[]; - radioSelection?: boolean; - customEmptyMessage?: string; - customPaperHeight?: string; - noBackground?: boolean; - columnsSelector?: boolean; - textSelectable?: boolean; - columnsShown?: string[]; - onColumnChange?: (column: string, state: boolean) => any; - autoScrollToBottom?: boolean; - infiniteScrollConfig?: IInfiniteScrollConfig; - sortConfig?: ISortConfig; - disabled?: boolean; - onSelectAll?: () => void; - rowStyle?: ({ - index, - }: { - index: number; - }) => "deleted" | "" | React.CSSProperties; - parentClassName?: string; - tooltip?: any; -} - -const borderColor = "#9c9c9c80"; - -const styles = () => - createStyles({ - paper: { - display: "flex", - overflow: "auto", - flexDirection: "column", - padding: "0 16px 8px", - boxShadow: "none", - border: "#EAEDEE 1px solid", - borderRadius: 3, - minHeight: 200, - overflowY: "scroll", - position: "relative", - "&::-webkit-scrollbar": { - width: 0, - height: 3, - }, - }, - noBackground: { - backgroundColor: "transparent", - border: 0, - }, - disabled: { - backgroundColor: "#fbfafa", - color: "#cccccc", - }, - defaultPaperHeight: { - height: "calc(100vh - 205px)", - }, - loadingBox: { - paddingTop: "100px", - paddingBottom: "100px", - }, - overlayColumnSelection: { - position: "absolute", - right: 0, - top: 0, - }, - popoverContent: { - maxHeight: 250, - overflowY: "auto", - padding: "0 10px 10px", - }, - shownColumnsLabel: { - color: "#9c9c9c", - fontSize: 12, - padding: 10, - borderBottom: "#eaeaea 1px solid", - width: "100%", - }, - checkAllWrapper: { - marginTop: -16, - }, - "@global": { - ".rowLine": { - borderBottom: `1px solid ${borderColor}`, - height: 40, - fontSize: 14, - transitionDuration: 0.3, - "&:focus": { - outline: "initial", - }, - "&:hover:not(.ReactVirtualized__Table__headerRow)": { - userSelect: "none", - backgroundColor: "#ececec", - fontWeight: 600, - "&.canClick": { - cursor: "pointer", - }, - "&.canSelectText": { - userSelect: "text", - }, - }, - "& .selected": { - fontWeight: 600, - }, - "&:not(.deleted) .selected": { - color: "#081C42", - }, - "&.deleted .selected": { - color: "#C51B3F", - }, - }, - ".headerItem": { - userSelect: "none", - fontWeight: 700, - fontSize: 14, - fontStyle: "initial", - display: "flex", - alignItems: "center", - outline: "none", - }, - ".ReactVirtualized__Table__row": { - width: "100% !important", - }, - ".ReactVirtualized__Table__headerRow": { - fontWeight: 700, - fontSize: 14, - borderColor: "#39393980", - textTransform: "initial", - }, - ".optionsAlignment": { - textAlign: "center", - "& .min-icon": { - width: 16, - height: 16, - }, - }, - ".text-center": { - textAlign: "center", - }, - ".text-right": { - textAlign: "right", - }, - ".progress-enabled": { - paddingTop: 3, - display: "inline-block", - margin: "0 10px", - position: "relative", - width: 18, - height: 18, - }, - ".progress-enabled > .MuiCircularProgress-root": { - position: "absolute", - left: 0, - top: 3, - }, - }, - ...checkboxIcons, - ...radioIcons, - }); - -const selectWidth = 45; - -// Function to render elements in table -const subRenderFunction = ( - rowData: any, - column: IColumns, - isSelected: boolean, -) => { - const itemElement = isString(rowData) - ? rowData - : get(rowData, column.elementKey!, null); // If the element is just a string, we render it as it is - const renderConst = column.renderFullObject ? rowData : itemElement; - - const renderElement = column.renderFunction - ? column.renderFunction(renderConst) - : renderConst; // If render function is set, we send the value to the function. - - return ( - - {renderElement} - - ); -}; - -// Function to calculate common column width for elements with no with size -const calculateColumnRest = ( - columns: IColumns[], - containerWidth: number, - actionsWidth: number, - hasSelect: boolean, - hasActions: boolean, - columnsSelector: boolean, - columnsShown: string[], -) => { - let colsItems = [...columns]; - - if (columnsSelector) { - colsItems = columns.filter((column) => - columnsShown.includes(column.elementKey!), - ); - } - - let initialValue = containerWidth; - - if (hasSelect) { - initialValue -= selectWidth; - } - - if (hasActions) { - initialValue -= actionsWidth; - } - - let freeSpacing = colsItems.reduce((total, currValue) => { - return currValue.width ? total - currValue.width : total; - }, initialValue); - - return freeSpacing / colsItems.filter((el) => !el.width).length; -}; - -// Function that renders Columns in table -const generateColumnsMap = ( - columns: IColumns[], - containerWidth: number, - actionsWidth: number, - hasSelect: boolean, - hasActions: boolean, - selectedItems: string[], - idField: string, - columnsSelector: boolean, - columnsShown: string[], - sortColumn: string, - sortDirection: "ASC" | "DESC" | undefined, -) => { - const commonRestWidth = calculateColumnRest( - columns, - containerWidth, - actionsWidth, - hasSelect, - hasActions, - columnsSelector, - columnsShown, - ); - return columns.map((column: IColumns, index: number) => { - if (columnsSelector && !columnsShown.includes(column.elementKey!)) { - return null; - } - - const disableSort = column.enableSort ? !column.enableSort : true; - - return ( - // @ts-ignore - ( - - {sortColumn === column.elementKey && ( - - {sortDirection === "ASC" ? ( - - ) : ( - - )} - - )} - {column.label} - - )} - className={ - column.contentTextAlign ? `text-${column.contentTextAlign}` : "" - } - cellRenderer={({ rowData }) => { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) ? rowData : rowData[idField], - ) - : false; - return subRenderFunction(rowData, column, isSelected); - }} - width={column.width || commonRestWidth} - disableSort={disableSort} - defaultSortDirection={"ASC"} - /> - ); - }); -}; - -// Function to render the action buttons -const elementActions = ( - actions: ItemActions[], - valueToSend: any, - selected: boolean, - idField: string, -) => { - return actions.map((action: ItemActions, index: number) => { - if (action.type === "view") { - return null; - } - - const vlSend = - typeof valueToSend === "string" ? valueToSend : valueToSend[idField]; - - let disabled = false; - - if (action.disableButtonFunction) { - if (action.disableButtonFunction(vlSend)) { - disabled = true; - } - } - - if (action.showLoaderFunction) { - if (action.showLoaderFunction(vlSend)) { - return ( -
- -
- ); - } - } - - return ( - - ); - }); -}; - -// Function to calculate the options column width according elements inside -const calculateOptionsSize = (containerWidth: number, totalOptions: number) => { - const minContainerSize = 80; - const sizeOptions = totalOptions * 45 + 15; - - if (sizeOptions < minContainerSize) { - return minContainerSize; - } - - if (sizeOptions > containerWidth) { - return containerWidth; - } - - return sizeOptions; -}; - -// Main function to render the Table Wrapper -const TableWrapper = ({ - itemActions, - columns, - onSelect, - records, - isLoading, - loadingMessage = Loading..., - entityName, - selectedItems, - idField, - classes, - radioSelection = false, - customEmptyMessage = "", - customPaperHeight = "", - noBackground = false, - columnsSelector = false, - textSelectable = false, - columnsShown = [], - onColumnChange = (column: string, state: boolean) => {}, - infiniteScrollConfig, - sortConfig, - autoScrollToBottom = false, - disabled = false, - onSelectAll, - rowStyle, - parentClassName = "", - tooltip, -}: TableWrapperProps) => { - const navigate = useNavigate(); - - const [columnSelectorOpen, setColumnSelectorOpen] = useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const findView = itemActions - ? itemActions.find((el) => el.type === "view") - : null; - - const clickAction = (rowItem: any) => { - if (findView) { - const valueClick = findView.sendOnlyId ? rowItem[idField] : rowItem; - - let disabled = false; - - if (findView.disableButtonFunction) { - if (findView.disableButtonFunction(valueClick)) { - disabled = true; - } - } - - if (findView.to && !disabled) { - navigate(`${findView.to}/${valueClick}`); - return; - } - - if (findView.onClick && !disabled) { - findView.onClick(valueClick); - } - } - }; - - const openColumnsSelector = (event: { currentTarget: any }) => { - setColumnSelectorOpen(!columnSelectorOpen); - setAnchorEl(event.currentTarget); - }; - - const closeColumnSelector = () => { - setColumnSelectorOpen(false); - setAnchorEl(null); - }; - - const columnsSelection = (columns: IColumns[]) => { - return ( - - - - - -
Shown Columns
-
- {columns.map((column: IColumns) => { - return ( - { - onColumnChange(column.elementKey!, e.target.checked); - }} - id={`chbox-${column.label}`} - name={`chbox-${column.label}`} - value={column.label} - /> - ); - })} -
- - - ); - }; - - return ( - - - - {isLoading && ( - - - {loadingMessage} - - - - - - )} - {columnsSelector && !isLoading && records.length > 0 && ( -
- {columnsSelection(columns)} -
- )} - {records && !isLoading && records.length > 0 ? ( - // @ts-ignore - !!records[index]} - loadMoreRows={ - infiniteScrollConfig - ? infiniteScrollConfig.loadMoreRecords - : () => new Promise(() => true) - } - rowCount={ - infiniteScrollConfig - ? infiniteScrollConfig.recordsCount - : records.length - } - > - {({ onRowsRendered, registerChild }) => ( - // @ts-ignore - - {({ width, height }: any) => { - const optionsWidth = calculateOptionsSize( - width, - itemActions - ? itemActions.filter((el) => el.type !== "view").length - : 0, - ); - const hasSelect: boolean = !!(onSelect && selectedItems); - const hasOptions: boolean = !!( - (itemActions && itemActions.length > 1) || - (itemActions && - itemActions.length === 1 && - itemActions[0].type !== "view") - ); - return ( - // @ts-ignore - ( - - {customEmptyMessage !== "" - ? customEmptyMessage - : `There are no ${entityName} yet.`} - - )} - overscanRowCount={10} - rowHeight={40} - width={width} - rowCount={records.length} - rowGetter={({ index }) => records[index]} - onRowClick={({ rowData }) => { - clickAction(rowData); - }} - rowClassName={(r) => - `rowLine ${findView ? "canClick" : ""} ${ - !findView && textSelectable ? "canSelectText" : "" - } ${rowStyle ? rowStyle(r) : ""}` - } - onRowsRendered={onRowsRendered} - sort={sortConfig ? sortConfig.triggerSort : undefined} - sortBy={sortConfig ? sortConfig.currentSort : undefined} - sortDirection={ - sortConfig ? sortConfig.currentDirection : undefined - } - scrollToIndex={ - autoScrollToBottom ? records.length - 1 : -1 - } - rowStyle={(r) => { - if (rowStyle) { - const returnElement = rowStyle(r); - - if (typeof returnElement === "string") { - return get( - TableRowPredefStyles, - returnElement, - {}, - ); - } - - return returnElement; - } - - return {}; - }} - > - {hasSelect && ( - // @ts-ignore - ( - - {onSelectAll ? ( -
- -
- ) : ( - Select - )} - - )} - dataKey={`select-${idField}`} - width={selectWidth} - disableSort - cellRenderer={({ rowData }) => { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) - ? rowData - : rowData[idField], - ) - : false; - - return ( - { - e.stopPropagation(); - }} - checkedIcon={ - - } - icon={ - - } - /> - ); - }} - /> - )} - {generateColumnsMap( - columns, - width, - optionsWidth, - hasSelect, - hasOptions, - selectedItems || [], - idField, - columnsSelector, - columnsShown, - sortConfig ? sortConfig.currentSort : "", - sortConfig ? sortConfig.currentDirection : undefined, - )} - {hasOptions && ( - // @ts-ignore - { - const isSelected = selectedItems - ? selectedItems.includes( - isString(rowData) - ? rowData - : rowData[idField], - ) - : false; - return elementActions( - itemActions || [], - rowData, - isSelected, - idField, - ); - }} - /> - )} -
- ); - }} - - )} - - ) : ( - - {!isLoading && ( -
- {customEmptyMessage !== "" - ? customEmptyMessage - : `There are no ${entityName} yet.`} -
- )} - - )} - - - - ); -}; - -export default withStyles(styles)(TableWrapper); diff --git a/portal-ui/src/screens/Console/KMS/AddKey.tsx b/portal-ui/src/screens/Console/KMS/AddKey.tsx index 70954447e..6a8b5e700 100644 --- a/portal-ui/src/screens/Console/KMS/AddKey.tsx +++ b/portal-ui/src/screens/Console/KMS/AddKey.tsx @@ -15,16 +15,14 @@ // along with this program. If not, see . import React, { Fragment, useEffect } from "react"; - -import Grid from "@mui/material/Grid"; +import { BackLink, Grid } from "mds"; +import { useNavigate } from "react-router-dom"; import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; import { ErrorResponseHandler } from "../../../common/types"; import { setErrorSnackMessage, setHelpName } from "../../../systemSlice"; -import { useNavigate } from "react-router-dom"; import { useAppDispatch } from "../../../store"; import AddKeyForm from "./AddKeyForm"; import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; -import { BackLink } from "mds"; import HelpMenu from "../HelpMenu"; const AddKey = () => { diff --git a/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx b/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx index 9a023a31a..e529f04e9 100644 --- a/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx +++ b/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx @@ -15,14 +15,12 @@ // along with this program. If not, see . import React, { useState } from "react"; -import { Box } from "@mui/material"; - -import Grid from "@mui/material/Grid"; -import { AddAccessRuleIcon, Button, FormLayout, PageLayout } from "mds"; +import { AddAccessRuleIcon, Button, FormLayout, PageLayout, Grid } from "mds"; import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import { ErrorResponseHandler } from "../../../common/types"; import useApi from "../Common/Hooks/useApi"; import KMSHelpBox from "./KMSHelpbox"; +import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary"; interface IAddKeyFormProps { onSuccess: () => void; @@ -71,7 +69,7 @@ const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => { addRecord(e); }} > - + { }} /> - - -