0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix topic names fitting in a table cell (#1812)

Browse source 
* Fixed tags width and added scroll to the table

* Dropdown position fixed

* Prop up=true moved directly to the table

* Scroll removed, table resized

* Unused divider removed

* Removed extra Divider import

Co-authored-by: k.morozov <k.morozov@ffin.ru>
This commit is contained in:
Kirill Morozov 2022-04-22 16:33:00 +03:00 • committed by GitHub
parent 8eedd17283
commit db217e1605
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
kafka-ui-react-app/src/components/Connect/Details/Overview/__tests__/__snapshots__/Overview.spec.tsx.snap
View file

@ -13,6 +13,9 @@ exports[`Overview view matches snapshot 1`] = `
padding-left: 0.75em; padding-left: 0.75em;
padding-right: 0.75em; padding-right: 0.75em;
text-align: center; text-align: center;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
} }
.c0 { .c0 {

6
kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap
View file

@ -12,6 +12,8 @@ exports[`Tasks view matches snapshot 1`] = `
padding: 8px 8px 8px 24px; padding: 8px 8px 8px 24px;
color: #171A1C; color: #171A1C;
vertical-align: middle; vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
} }
.c0 tbody > tr:hover { .c0 tbody > tr:hover {
@ -182,6 +184,8 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
padding: 8px 8px 8px 24px; padding: 8px 8px 8px 24px;
color: #171A1C; color: #171A1C;
vertical-align: middle; vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
} }
.c0 tbody > tr:hover { .c0 tbody > tr:hover {
@ -279,4 +283,4 @@ exports[`Tasks view matches snapshot when no tasks 1`] = `
</tr> </tr>
</tbody> </tbody>
</table> </table>
`; `;

4
kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
View file

@ -6,7 +6,6 @@ import { Link, NavLink } from 'react-router-dom';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { deleteConnector } from 'redux/actions'; import { deleteConnector } from 'redux/actions';
import Dropdown from 'components/common/Dropdown/Dropdown'; import Dropdown from 'components/common/Dropdown/Dropdown';
import DropdownDivider from 'components/common/Dropdown/DropdownDivider';
import DropdownItem from 'components/common/Dropdown/DropdownItem'; import DropdownItem from 'components/common/Dropdown/DropdownItem';
import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal'; import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
import { Tag } from 'components/common/Tag/Tag.styled'; import { Tag } from 'components/common/Tag/Tag.styled';
@ -84,8 +83,7 @@ const ListItem: React.FC<ListItemProps> = ({
</td> </td>
<td> <td>
<div> <div>
<Dropdown label={<VerticalElipsisIcon />} right> <Dropdown label={<VerticalElipsisIcon />} right up>
<DropdownDivider />
<DropdownItem <DropdownItem
onClick={() => setDeleteConnectorConfirmationVisible(true)} onClick={() => setDeleteConnectorConfirmationVisible(true)}
danger danger

1
kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
View file

@ -16,4 +16,5 @@ export const Tag = styled.p<Props>`
padding-left: 0.75em; padding-left: 0.75em;
padding-right: 0.75em; padding-right: 0.75em;
text-align: center; text-align: center;
width: max-content;
`; `;

2
kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts
View file

@ -14,6 +14,8 @@ export const Table = styled.table<Props>`
padding: 8px 8px 8px 24px; padding: 8px 8px 8px 24px;
color: ${({ theme }) => theme.table.td.color.normal}; color: ${({ theme }) => theme.table.td.color.normal};
vertical-align: middle; vertical-align: middle;
max-width: 350px;
word-wrap: break-word;
} }
& tbody > tr { & tbody > tr {