From 7939902f03c6674614594727e8caddda642139ab Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Tue, 29 Mar 2022 12:24:03 +0530
Subject: [PATCH] fix: dashboard table element overflow (#930)

---
 frontend/package.json                                     | 1 +
 .../ListOfDashboard/TableComponents/DeleteButton.tsx      | 8 ++------
 .../container/ListOfDashboard/TableComponents/Name.tsx    | 8 ++------
 .../container/ListOfDashboard/TableComponents/styles.ts   | 8 ++++++++
 4 files changed, 13 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/container/ListOfDashboard/TableComponents/styles.ts

diff --git a/frontend/package.json b/frontend/package.json
index 75453c759e..28666512fb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
+		"@ant-design/colors": "^6.0.0",
 		"@ant-design/icons": "^4.6.2",
 		"@grafana/data": "^8.4.3",
 		"@monaco-editor/react": "^4.3.1",
diff --git a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
index 4848fa37da..f0b2d183df 100644
--- a/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.tsx
@@ -1,4 +1,3 @@
-import { Button } from 'antd';
 import React, { useCallback } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -7,6 +6,7 @@ import { DeleteDashboard, DeleteDashboardProps } from 'store/actions';
 import AppActions from 'types/actions';
 
 import { Data } from '../index';
+import { TableLinkText } from './styles';
 
 function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
 	const onClickHandler = useCallback(() => {
@@ -15,11 +15,7 @@ function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
 		});
 	}, [id, deleteDashboard]);
 
-	return (
-		<Button onClick={onClickHandler} type="link">
-			Delete
-		</Button>
-	);
+	return <TableLinkText onClick={onClickHandler}>Delete</TableLinkText>;
 }
 
 interface DispatchProps {
diff --git a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
index fa2ff98991..e54431063f 100644
--- a/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
+++ b/frontend/src/container/ListOfDashboard/TableComponents/Name.tsx
@@ -1,10 +1,10 @@
-import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React from 'react';
 import { generatePath } from 'react-router-dom';
 
 import { Data } from '..';
+import { TableLinkText } from './styles';
 
 function Name(name: Data['name'], data: Data): JSX.Element {
 	const onClickHandler = (): void => {
@@ -17,11 +17,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 		);
 	};
 
-	return (
-		<Button onClick={onClickHandler} type="link">
-			{name}
-		</Button>
-	);
+	return <TableLinkText onClick={onClickHandler}>{name}</TableLinkText>;
 }
 
 export default Name;
diff --git a/frontend/src/container/ListOfDashboard/TableComponents/styles.ts b/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
new file mode 100644
index 0000000000..78c382700b
--- /dev/null
+++ b/frontend/src/container/ListOfDashboard/TableComponents/styles.ts
@@ -0,0 +1,8 @@
+import { blue } from '@ant-design/colors';
+import { Typography } from 'antd';
+import styled from 'styled-components';
+
+export const TableLinkText = styled(Typography.Text)`
+	color: ${blue.primary} !important;
+	cursor: pointer;
+`;