fix: dashboard table element overflow (#930)

This commit is contained in:
Pranshu Chittora 2022-03-29 12:24:03 +05:30 committed by GitHub
parent d34e08fa3d
commit 7939902f03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 12 deletions

View File

@ -23,6 +23,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@ant-design/colors": "^6.0.0",
"@ant-design/icons": "^4.6.2", "@ant-design/icons": "^4.6.2",
"@grafana/data": "^8.4.3", "@grafana/data": "^8.4.3",
"@monaco-editor/react": "^4.3.1", "@monaco-editor/react": "^4.3.1",

View File

@ -1,4 +1,3 @@
import { Button } from 'antd';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux'; import { bindActionCreators, Dispatch } from 'redux';
@ -7,6 +6,7 @@ import { DeleteDashboard, DeleteDashboardProps } from 'store/actions';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
import { Data } from '../index'; import { Data } from '../index';
import { TableLinkText } from './styles';
function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element { function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
const onClickHandler = useCallback(() => { const onClickHandler = useCallback(() => {
@ -15,11 +15,7 @@ function DeleteButton({ deleteDashboard, id }: DeleteButtonProps): JSX.Element {
}); });
}, [id, deleteDashboard]); }, [id, deleteDashboard]);
return ( return <TableLinkText onClick={onClickHandler}>Delete</TableLinkText>;
<Button onClick={onClickHandler} type="link">
Delete
</Button>
);
} }
interface DispatchProps { interface DispatchProps {

View File

@ -1,10 +1,10 @@
import { Button } from 'antd';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import history from 'lib/history'; import history from 'lib/history';
import React from 'react'; import React from 'react';
import { generatePath } from 'react-router-dom'; import { generatePath } from 'react-router-dom';
import { Data } from '..'; import { Data } from '..';
import { TableLinkText } from './styles';
function Name(name: Data['name'], data: Data): JSX.Element { function Name(name: Data['name'], data: Data): JSX.Element {
const onClickHandler = (): void => { const onClickHandler = (): void => {
@ -17,11 +17,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
); );
}; };
return ( return <TableLinkText onClick={onClickHandler}>{name}</TableLinkText>;
<Button onClick={onClickHandler} type="link">
{name}
</Button>
);
} }
export default Name; export default Name;

View File

@ -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;
`;