[Refactor]: Dynamic Columns PR (#3852)

* fix: remove the space and fix the classname

* refactor: made the dynamicColumnsTable-items responsive

* fix: setcolumndata to a separate function

* fix: handle invalid CreatedOrUpdateTime

* fix: hyphenate classname and bme

* refactor: move the implementation to separate component

* refactor: removed the bydefault render

* refactor: remove render

* refactor: removed unwanted imports

* fix: remove the space and fix the classname

* refactor: made the dynamicColumnsTable-items responsive

* fix: setcolumndata to a separate function

* fix: handle invalid CreatedOrUpdateTime

* fix: hyphenate classname and bme

* refactor: move the implementation to separate component

* refactor: removed the bydefault render

* refactor: remove render

* fix: the classname

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,11 +1,11 @@
-.Dropdown-button {
+.dropdown-button {
     color: #fff;
 }
 
-.Dropdown-button--dark {
+.dropdown-button--dark {
     color: #000;
 }
 
-.Dropdown-icon {
+.dropdown-icon {
     font-size: 1.2rem;
 }

frontend/src/components/DropDown/DropDown.tsx

@@ -1,7 +1,7 @@
 import './DropDown.styles.scss';
 
 import { EllipsisOutlined } from '@ant-design/icons';
-import { Button, Dropdown, MenuProps, Space } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 
 function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
@@ -15,15 +15,13 @@ function DropDown({ element }: { element: JSX.Element[] }): JSX.Element {
 	);
 
 	return (
-		<Dropdown menu={{ items }} className="Dropdown-container">
+		<Dropdown menu={{ items }}>
 			<Button
 				type="link"
-				className={!isDarkMode ? 'Dropdown-button--dark' : 'Dropdown-button'}
+				className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
 				onClick={(e): void => e.preventDefault()}
 			>
-				<Space>
-					<EllipsisOutlined className="Dropdown-icon" />
-				</Space>
+				<EllipsisOutlined className="dropdown-icon" />
 			</Button>
 		</Dropdown>
 	);

frontend/src/components/ResizeTable/DynamicColumnTable.syles.scss

@@ -15,3 +15,11 @@
     justify-content: space-between;
     align-items: center;
 }
+
+@media (max-width: 768px) {
+    .dynamicColumnsTable-items {
+        flex-direction: column;
+        width: auto;
+        text-align: center;
+    }
+}

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -9,7 +9,11 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
-import { getVisibleColumns, setVisibleColumns } from './unit';
+import {
+	getNewColumnData,
+	getVisibleColumns,
+	setVisibleColumns,
+} from './utils';
 
 function DynamicColumnTable({
 	tablesource,
@@ -51,22 +55,14 @@ function DynamicColumnTable({
 			index,
 			checked,
 		});
-		setColumnsData((prevColumns) => {
-			if (checked && dynamicColumns) {
-				return prevColumns
-					? [
-							...prevColumns.slice(0, prevColumns.length - 1),
-							dynamicColumns[index],
-							prevColumns[prevColumns.length - 1],
-					  ]
-					: undefined;
-			}
-			return prevColumns && dynamicColumns
-				? prevColumns.filter(
-						(column) => dynamicColumns[index].title !== column.title,
-				  )
-				: undefined;
-		});
+		setColumnsData((prevColumns) =>
+			getNewColumnData({
+				checked,
+				index,
+				prevColumns,
+				dynamicColumns,
+			}),
+		);
 	};
 
 	const items: MenuProps['items'] =

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -0,0 +1,15 @@
+import { Typography } from 'antd';
+
+import Time from './Time';
+
+function DateComponent(
+	CreatedOrUpdateTime: string | number | Date,
+): JSX.Element {
+	if (CreatedOrUpdateTime === null) {
+		return <Typography> - </Typography>;
+	}
+
+	return <Time CreatedOrUpdateTime={CreatedOrUpdateTime} />;
+}
+
+export default DateComponent;

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -2,22 +2,15 @@ import { Typography } from 'antd';
 import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
 import getFormattedDate from 'lib/getFormatedDate';
 
-function DateComponent(
-	CreatedOrUpdateTime: string | number | Date,
-): JSX.Element {
+function Time({ CreatedOrUpdateTime }: DateProps): JSX.Element {
 	const time = new Date(CreatedOrUpdateTime);
-
 	const date = getFormattedDate(time);
-
 	const timeString = `${date} ${convertDateToAmAndPm(time)}`;
-
-	if (CreatedOrUpdateTime === null) {
-		return <Typography> - </Typography>;
-	}
-
-	return (
-		<Typography className="DateComponent-container">{timeString}</Typography>
-	);
+	return <Typography>{timeString}</Typography>;
 }
 
-export default DateComponent;
+type DateProps = {
+	CreatedOrUpdateTime: string | number | Date;
+};
+
+export default Time;

frontend/src/components/ResizeTable/types.ts

@@ -30,3 +30,14 @@ export type SetVisibleColumnsProps = {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
 	dynamicColumns?: ColumnsType<any>;
 };
+
+type GetNewColumnDataProps = {
+	prevColumns?: ColumnsType;
+	checked: boolean;
+	dynamicColumns?: ColumnsType<any>;
+	index: number;
+};
+
+export type GetNewColumnDataFunction = (
+	props: GetNewColumnDataProps,
+) => ColumnsType | undefined;

frontend/src/components/ResizeTable/utils.ts

@@ -1,6 +1,6 @@
 import { DynamicColumnsKey } from './contants';
 import {
-	GetVisibleColumnProps,
+	GetNewColumnDataFunction,
 	GetVisibleColumnsFunction,
 	SetVisibleColumnsProps,
 } from './types';
@@ -9,7 +9,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 	tablesource,
 	dynamicColumns,
 	columnsData,
-}: GetVisibleColumnProps) => {
+}) => {
 	let columnVisibilityData: { [key: string]: boolean };
 	try {
 		const storedData = localStorage.getItem(tablesource);
@@ -55,3 +55,23 @@ export const setVisibleColumns = ({
 		console.error(error);
 	}
 };
+
+export const getNewColumnData: GetNewColumnDataFunction = ({
+	prevColumns,
+	checked,
+	dynamicColumns,
+	index,
+}) => {
+	if (checked && dynamicColumns) {
+		return prevColumns
+			? [
+					...prevColumns.slice(0, prevColumns.length - 1),
+					dynamicColumns[index],
+					prevColumns[prevColumns.length - 1],
+			  ]
+			: undefined;
+	}
+	return prevColumns && dynamicColumns
+		? prevColumns.filter((column) => dynamicColumns[index].title !== column.title)
+		: undefined;
+};

frontend/src/components/TableRenderer/LabelColumn.styles.scss

@@ -1,9 +1,10 @@
-.LabelColumn {
-    .LabelColumn-label-tag {
-        white-space: normal;
-    }
+.label-column {
 
-}
-.labelColumn-popover {
-    margin: 0.5rem 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    .label-column--tag {
+        white-space: normal;
+        margin: 0.2rem 0.2rem;
+    }
 }

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,29 +1,21 @@
 import './LabelColumn.styles.scss';
 
-import { Popover, Tag, Tooltip } from 'antd';
+import { Popover, Tag } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { LabelColumnProps } from './TableRenderer.types';
-import { getLabelRenderingValue } from './utils';
+import TagWithToolTip from './TagWithToolTip';
 
 function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
 	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
 
 	return (
-		<div className="LabelColumn">
+		<div className="label-column">
 			{newLabels.map(
-				(label: string): JSX.Element => {
-					const tooltipTitle =
-						value && value[label] ? `${label}: ${value[label]}` : label;
-					return (
-						<Tooltip title={tooltipTitle} key={label}>
-							<Tag className="LabelColumn-label-tag" color={color}>
-								{getLabelRenderingValue(label, value && value[label])}
-							</Tag>
-						</Tooltip>
-					);
-				},
+				(label: string): JSX.Element => (
+					<TagWithToolTip key={label} label={label} color={color} value={value} />
+				),
 			)}
 			{remainingLabels.length > 0 && (
 				<Popover
@@ -33,25 +25,20 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 					content={
 						<div>
 							{labels.map(
-								(label: string): JSX.Element => {
-									const tooltipTitle =
-										value && value[label] ? `${label}: ${value[label]}` : label;
-									return (
-										<div className="labelColumn-popover" key={label}>
-											<Tooltip title={tooltipTitle}>
-												<Tag className="LabelColumn-label-tag" color={color}>
-													{getLabelRenderingValue(label, value && value[label])}
-												</Tag>
-											</Tooltip>
-										</div>
-									);
-								},
+								(label: string): JSX.Element => (
+									<TagWithToolTip
+										key={label}
+										label={label}
+										color={color}
+										value={value}
+									/>
+								),
 							)}
 						</div>
 					}
 					trigger="hover"
 				>
-					<Tag className="LabelColumn-label-tag" color={color}>
+					<Tag className="label-column--tag" color={color}>
 						+{remainingLabels.length}
 					</Tag>
 				</Popover>

frontend/src/components/TableRenderer/TagWithToolTip.tsx

@@ -0,0 +1,36 @@
+import { Tag, Tooltip } from 'antd';
+
+import { getLabelRenderingValue } from './utils';
+
+function TagWithToolTip({
+	label,
+	value,
+	color,
+}: TagWithToolTipProps): JSX.Element {
+	const tooltipTitle =
+		value && value[label] ? `${label}: ${value[label]}` : label;
+	return (
+		<div key={label}>
+			<Tooltip title={tooltipTitle}>
+				<Tag className="label-column--tag" color={color}>
+					{getLabelRenderingValue(label, value && value[label])}
+				</Tag>
+			</Tooltip>
+		</div>
+	);
+}
+
+type TagWithToolTipProps = {
+	label: string;
+	color?: string;
+	value?: {
+		[key: string]: string;
+	};
+};
+
+TagWithToolTip.defaultProps = {
+	value: undefined,
+	color: undefined,
+};
+
+export default TagWithToolTip;

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -9,7 +9,7 @@ import {
 	TableDataSource,
 } from 'components/ResizeTable/contants';
 import DynamicColumnTable from 'components/ResizeTable/DynamicColumnTable';
-import DateComponent from 'components/ResizeTable/TableComponent/Date';
+import DateComponent from 'components/ResizeTable/TableComponent/DateComponent';
 import LabelColumn from 'components/TableRenderer/LabelColumn';
 import TextToolTip from 'components/TextToolTip';
 import { QueryParams } from 'constants/query';
@@ -149,7 +149,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			width: 80,
 			key: DynamicColumnsKey.CreatedBy,
 			align: 'center',
-			render: (value): JSX.Element => <div>{value}</div>,
 		},
 		{
 			title: 'Updated At',
@@ -171,7 +170,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			width: 80,
 			key: DynamicColumnsKey.UpdatedBy,
 			align: 'center',
-			render: (value): JSX.Element => <div>{value}</div>,
 		},
 	];
 

frontend/src/container/ListOfDashboard/index.tsx

@@ -31,7 +31,7 @@ import { Dashboard } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import DateComponent from '../../components/ResizeTable/TableComponent/Date';
+import DateComponent from '../../components/ResizeTable/TableComponent/DateComponent';
 import ImportJSON from './ImportJSON';
 import { ButtonContainer, NewDashboardButton, TableContainer } from './styles';
 import DeleteButton from './TableComponents/DeleteButton';
@@ -94,7 +94,6 @@ function ListOfAllDashboard(): JSX.Element {
 			dataIndex: 'createdBy',
 			width: 30,
 			key: DynamicColumnsKey.CreatedBy,
-			render: (value): JSX.Element => <div>{value}</div>,
 		},
 		{
 			title: 'Last Updated Time',
@@ -114,7 +113,6 @@ function ListOfAllDashboard(): JSX.Element {
 			dataIndex: 'lastUpdatedBy',
 			width: 30,
 			key: DynamicColumnsKey.UpdatedBy,
-			render: (value): JSX.Element => <div>{value}</div>,
 		},
 	];