fix: [GH-4075]: block action on the view section if the dashboard is locked (#4089)

* fix: [GH-4075]: block action on the view section if the dashboard is locked

frontend/src/container/GridCardLayout/GridCard/FullView/GraphManager.tsx

@@ -4,6 +4,7 @@ import { Button, Input } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useCallback, useState } from 'react';
 
 import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
@@ -29,6 +30,7 @@ function GraphManager({
 	);
 
 	const { notifications } = useNotifications();
+	const { isDashboardLocked } = useDashboard();
 
 	const checkBoxOnChangeHandler = useCallback(
 		(e: CheckboxChangeEvent, index: number): void => {
@@ -66,6 +68,7 @@ function GraphManager({
 		graphVisibilityState: graphsVisibilityStates,
 		labelClickedHandler,
 		yAxisUnit,
+		isGraphDisabled: isDashboardLocked,
 	});
 
 	const filterHandler = useCallback(

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox.tsx

@@ -9,6 +9,7 @@ function CustomCheckBox({
 	index,
 	graphVisibilityState = [],
 	checkBoxOnChangeHandler,
+	disabled = false,
 }: CheckBoxProps): JSX.Element {
 	const onChangeHandler = (e: CheckboxChangeEvent): void => {
 		checkBoxOnChangeHandler(e, index);
@@ -28,7 +29,11 @@ function CustomCheckBox({
 				},
 			}}
 		>
-			<Checkbox onChange={onChangeHandler} checked={isChecked} />
+			<Checkbox
+				onChange={onChangeHandler}
+				checked={isChecked}
+				disabled={disabled}
+			/>
 		</ConfigProvider>
 	);
 }

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx

@@ -5,12 +5,14 @@ import Label from './Label';
 
 export const getLabel = (
 	labelClickedHandler: (labelIndex: number) => void,
+	disabled?: boolean,
 ): ColumnType<DataSetProps> => ({
 	render: (label: string, record): JSX.Element => (
 		<Label
 			label={label}
 			labelIndex={record.index}
 			labelClickedHandler={labelClickedHandler}
+			disabled={disabled}
 		/>
 	),
 });

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx

@@ -13,6 +13,7 @@ export const getGraphManagerTableColumns = ({
 	graphVisibilityState,
 	labelClickedHandler,
 	yAxisUnit,
+	isGraphDisabled,
 }: GetGraphManagerTableColumnsProps): ColumnType<DataSetProps>[] => [
 	{
 		title: '',
@@ -25,6 +26,7 @@ export const getGraphManagerTableColumns = ({
 				index={record.index}
 				checkBoxOnChangeHandler={checkBoxOnChangeHandler}
 				graphVisibilityState={graphVisibilityState}
+				disabled={isGraphDisabled}
 			/>
 		),
 	},
@@ -33,7 +35,7 @@ export const getGraphManagerTableColumns = ({
 		width: 300,
 		dataIndex: ColumnsKeyAndDataIndex.Label,
 		key: ColumnsKeyAndDataIndex.Label,
-		...getLabel(labelClickedHandler),
+		...getLabel(labelClickedHandler, isGraphDisabled),
 	},
 	{
 		title: getGraphManagerTableHeaderTitle(
@@ -79,4 +81,5 @@ interface GetGraphManagerTableColumnsProps {
 	labelClickedHandler: (labelIndex: number) => void;
 	graphVisibilityState: boolean[];
 	yAxisUnit?: string;
+	isGraphDisabled?: boolean;
 }

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/Label.tsx

@@ -8,6 +8,7 @@ function Label({
 	labelClickedHandler,
 	labelIndex,
 	label,
+	disabled = false,
 }: LabelProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -19,6 +20,7 @@ function Label({
 		<LabelContainer
 			isDarkMode={isDarkMode}
 			type="button"
+			disabled={disabled}
 			onClick={onClickHandler}
 		>
 			{getAbbreviatedLabel(label)}

frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss

@@ -18,6 +18,10 @@
 		border-radius: 3px;
 	}
 
+	.disabled {
+		height: calc(100% - 65px);
+	}
+
 	.graph-manager-container {
 		height: calc(40% - 40px);
 

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -52,7 +52,7 @@ function FullView({
 
 	const [chartOptions, setChartOptions] = useState<uPlot.Options>();
 
-	const { selectedDashboard } = useDashboard();
+	const { selectedDashboard, isDashboardLocked } = useDashboard();
 
 	const getSelectedTime = useCallback(
 		() =>
@@ -155,7 +155,12 @@ function FullView({
 				)}
 			</div>
 
-			<div className="graph-container" ref={fullViewRef}>
+			<div
+				className={
+					isDashboardLocked ? 'graph-container disabled' : 'graph-container'
+				}
+				ref={fullViewRef}
+			>
 				{chartOptions && (
 					<GraphContainer
 						style={{ height: '90%' }}
@@ -178,7 +183,7 @@ function FullView({
 				)}
 			</div>
 
-			{canModifyChart && chartOptions && (
+			{canModifyChart && chartOptions && !isDashboardLocked && (
 				<GraphManager
 					data={chartData}
 					name={name}

frontend/src/container/GridCardLayout/GridCard/FullView/styles.ts

@@ -31,9 +31,12 @@ export const GraphContainer = styled.div<GraphContainerProps>`
 		isGraphLegendToggleAvailable ? '50%' : '100%'};
 `;
 
-export const LabelContainer = styled.button<{ isDarkMode?: boolean }>`
+export const LabelContainer = styled.button<{
+	isDarkMode?: boolean;
+	disabled?: boolean;
+}>`
 	max-width: 18.75rem;
-	cursor: pointer;
+	cursor: ${(props): string => (props.disabled ? 'no-drop' : 'pointer')};
 	border: none;
 	background-color: transparent;
 	color: ${(props): string =>

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -42,6 +42,7 @@ export interface LabelProps {
 	labelClickedHandler: (labelIndex: number) => void;
 	labelIndex: number;
 	label: string;
+	disabled?: boolean;
 }
 
 export interface FullViewProps {
@@ -74,6 +75,7 @@ export interface CheckBoxProps {
 	index: number;
 	graphVisibilityState: boolean[];
 	checkBoxOnChangeHandler: (e: CheckboxChangeEvent, index: number) => void;
+	disabled?: boolean;
 }
 
 export interface SaveLegendEntriesToLocalStoreProps {