diff --git a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap index 7f14f530d1..65abb230e3 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Connect/Details/Tasks/__tests__/__snapshots__/Tasks.spec.tsx.snap @@ -29,9 +29,21 @@ exports[`Tasks view matches snapshot 1`] = ` -ms-letter-spacing: 0em; letter-spacing: 0em; text-align: left; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; background: #FFFFFF; - color: #73848C; cursor: default; + color: #73848C; } .c1 { @@ -190,9 +202,21 @@ exports[`Tasks view matches snapshot when no tasks 1`] = ` -ms-letter-spacing: 0em; letter-spacing: 0em; text-align: left; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; background: #FFFFFF; - color: #73848C; cursor: default; + color: #73848C; } .c1 { diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap index e7217ba246..0f83bd3088 100644 --- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap @@ -176,6 +176,7 @@ exports[`Connectors ListItem matches snapshot 1`] = ` "messageToggleIconClosed": "#ABB5BA", "messageToggleIconOpened": "#171A1C", "verticalElipsisIcon": "#73848C", + "warningIcon": "#FFDD57", }, "input": Object { "backgroundColor": Object { diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.styled.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.styled.tsx new file mode 100644 index 0000000000..c4c32d5d46 --- /dev/null +++ b/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.styled.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + display: block; + padding: 1.25rem; + border-radius: 6px; +`; diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.tsx b/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.tsx index 4f0dc86bb6..d8c8e7cd06 100644 --- a/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.tsx +++ b/kafka-ui-react-app/src/components/KsqlDb/Query/ResultRenderer.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { KsqlCommandResponse, Table } from 'generated-sources'; +import * as S from './ResultRenderer.styled'; + const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({ result, }) => { @@ -8,7 +10,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({ const isMessage = !!result.message; - if (isMessage) return
{result.message}
; + if (isMessage) return {result.message}; const isTable = result.data !== undefined; @@ -33,7 +35,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({ ); return ( -
+ @@ -57,7 +59,7 @@ const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({ )}
-
+ ); }; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap index 98da34d84f..fb75a98ba7 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap @@ -183,6 +183,7 @@ exports[`Details when it has readonly flag does not render the Action button a T "messageToggleIconClosed": "#ABB5BA", "messageToggleIconOpened": "#171A1C", "verticalElipsisIcon": "#73848C", + "warningIcon": "#FFDD57", }, "input": Object { "backgroundColor": Object { diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx new file mode 100644 index 0000000000..c4c32d5d46 --- /dev/null +++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + display: block; + padding: 1.25rem; + border-radius: 6px; +`; diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx index 3c082a5b12..06de822caa 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx @@ -18,6 +18,7 @@ import { } from 'redux/reducers/topics/selectors'; import validateMessage from './validateMessage'; +import * as S from './SendMessage.styled'; interface RouterParams { clusterName: ClusterName; @@ -131,7 +132,7 @@ const SendMessage: React.FC = () => { return ; } return ( -
+
@@ -214,7 +215,7 @@ const SendMessage: React.FC = () => { Send -
+ ); }; diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx deleted file mode 100644 index 41f48a6dc5..0000000000 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import CustomParamButton from './CustomParamButton'; - -interface Props { - index: string; - onRemove: (index: string) => void; -} - -const CustomParamAction: React.FC = ({ index, onRemove }) => ( - <> - - onRemove(index)} - /> - -); - -export default CustomParamAction; diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamButton.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamButton.tsx deleted file mode 100644 index 9ef74cff53..0000000000 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamButton.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -interface Props { - onClick: (event: React.MouseEvent) => void; - className: string; - type: 'fa-plus' | 'fa-minus' | 'fa-chevron-right'; - btnText?: string; - disabled?: boolean; -} - -const CustomParamButton: React.FC = ({ - onClick, - className, - type, - btnText, -}) => ( - -); - -export default CustomParamButton; diff --git a/kafka-ui-react-app/src/components/Version/Version.tsx b/kafka-ui-react-app/src/components/Version/Version.tsx index 37acf18146..6de21e36ef 100644 --- a/kafka-ui-react-app/src/components/Version/Version.tsx +++ b/kafka-ui-react-app/src/components/Version/Version.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { gitCommitPath } from 'lib/paths'; import { GIT_REPO_LATEST_RELEASE_LINK } from 'lib/constants'; +import WarningIcon from 'components/common/Icons/WarningIcon'; import compareVersions from './compareVersions'; @@ -33,10 +34,9 @@ const Version: React.FC = ({ tag, commit }) => { {tag} {outdated && ( - + )} {commit && ( diff --git a/kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx new file mode 100644 index 0000000000..dec81b585f --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/WarningIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import styled, { useTheme } from 'styled-components'; + +const WarningIconContainer = styled.span` + align-items: center; + display: inline-flex; + justify-content: center; + height: 1.5rem; + width: 1.5rem; +`; + +const WarningIcon: React.FC = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + ); +}; + +export default WarningIcon; diff --git a/kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx b/kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx index 5fc7fca68c..1e58044c4b 100644 --- a/kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx +++ b/kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx @@ -20,9 +20,6 @@ const ListHeaderCell: React.FC = ({ onClick={() => setOrderBy(value)} > {title} - - - ); diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts index fd37fd3aef..2a13a41af7 100644 --- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts +++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts @@ -5,31 +5,74 @@ interface TitleProps { isOrdered?: boolean; } -const isOrderableStyles = css` - cursor: pointer; +export const Title = styled.span( + ({ isOrderable, isOrdered, theme: { table } }) => css` + font-family: Inter, sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; + letter-spacing: 0em; + text-align: left; + justify-content: start; + display: flex; + align-items: center; + background: ${table.th.backgroundColor.normal}; + cursor: default; + color: ${table.th.color.normal}; - &:hover { - color: ${(props) => props.theme.table.th.color.hover}; - } -`; + ${isOrderable && + css` + cursor: pointer; -export const Title = styled.span` - font-family: Inter, sans-serif; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 16px; - letter-spacing: 0em; - text-align: left; - background: ${(props) => props.theme.table.th.backgroundColor.normal}; - color: ${(props) => - props.isOrdered - ? props.theme.table.th.color.active - : props.theme.table.th.color.normal}; - cursor: default; + padding-right: 18px; + position: relative; - ${(props) => props.isOrderable && isOrderableStyles} -`; + &::before, + &::after { + border: 4px solid transparent; + content: ''; + display: block; + height: 0; + right: 5px; + top: 50%; + position: absolute; + } + + &::before { + border-bottom-color: ${table.th.color.normal}; + margin-top: -9px; + } + + &::after { + border-top-color: ${table.th.color.normal}; + margin-top: 1px; + } + + &:hover { + color: ${table.th.color.hover}; + &::before { + border-bottom-color: ${table.th.color.hover}; + } + &::after { + border-top-color: ${table.th.color.hover}; + } + } + `} + + ${isOrderable && + isOrdered && + css` + color: ${table.th.color.active}; + &::before { + border-bottom-color: ${table.th.color.active}; + } + &::after { + border-top-color: ${table.th.color.active}; + } + `} + ` +); export const Preview = styled.span` margin-left: 8px; diff --git a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx index bf90430e00..07a2c4e124 100644 --- a/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx +++ b/kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.tsx @@ -47,11 +47,6 @@ const TableHeaderCell: React.FC = (props) => { {title} - {isOrderable && ( - - - - )} {previewText && ( diff --git a/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx b/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx index 66ecd12a46..7797b900ff 100644 --- a/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx +++ b/kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx @@ -56,7 +56,6 @@ describe('TableHeaderCell', () => { const title = within(columnheader).getByRole('button'); expect(title).toBeInTheDocument(); expect(title).toHaveTextContent(testTitle); - expect(within(title).getByTitle(sortIconTitle)).toBeInTheDocument(); expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`); expect(title).toHaveStyle('cursor: pointer;'); }); @@ -130,6 +129,7 @@ describe('TableHeaderCell', () => { title: testTitle, orderBy: TopicColumnsToSort.NAME, orderValue: TopicColumnsToSort.NAME, + handleOrderBy: jest.fn(), }); const columnheader = screen.getByRole('columnheader'); const title = within(columnheader).getByText(testTitle); @@ -141,6 +141,7 @@ describe('TableHeaderCell', () => { title: testTitle, orderBy: TopicColumnsToSort.NAME, orderValue: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS, + handleOrderBy: jest.fn(), }); const columnheader = screen.getByRole('columnheader'); const title = within(columnheader).getByText(testTitle); diff --git a/kafka-ui-react-app/src/components/common/table/__tests__/__snapshots__/SortableColumnHeader.spec.tsx.snap b/kafka-ui-react-app/src/components/common/table/__tests__/__snapshots__/SortableColumnHeader.spec.tsx.snap index 48e0159cc0..4b4f5721be 100644 --- a/kafka-ui-react-app/src/components/common/table/__tests__/__snapshots__/SortableColumnHeader.spec.tsx.snap +++ b/kafka-ui-react-app/src/components/common/table/__tests__/__snapshots__/SortableColumnHeader.spec.tsx.snap @@ -15,13 +15,6 @@ exports[`ListHeader matches the snapshot 1`] = ` onClick={[Function]} > Name - - - @@ -44,13 +37,6 @@ exports[`ListHeader on column click matches the snapshot 1`] = ` onClick={[Function]} > Name - - - diff --git a/kafka-ui-react-app/src/theme/bulma_overrides.scss b/kafka-ui-react-app/src/theme/bulma_overrides.scss index 38981beb3d..f7e8a234e9 100644 --- a/kafka-ui-react-app/src/theme/bulma_overrides.scss +++ b/kafka-ui-react-app/src/theme/bulma_overrides.scss @@ -88,10 +88,6 @@ font-size: $size-8; } -.box { - box-shadow: none; -} - .tag:not(body) { font-size: 0.75rem; height: 1.75em; diff --git a/kafka-ui-react-app/src/theme/index.scss b/kafka-ui-react-app/src/theme/index.scss index 0b0c2044c9..04db81e19b 100644 --- a/kafka-ui-react-app/src/theme/index.scss +++ b/kafka-ui-react-app/src/theme/index.scss @@ -15,16 +15,6 @@ @import "bulma/sass/base/animations"; // Elements -@import "bulma/sass/elements/box"; -@import "bulma/sass/elements/container"; -@import "bulma/sass/elements/content"; -@import "bulma/sass/elements/icon"; -@import "bulma/sass/elements/image"; -@import "bulma/sass/elements/notification"; -@import "bulma/sass/elements/progress"; -@import "bulma/sass/elements/tag"; -@import "bulma/sass/elements/title"; -@import "bulma/sass/elements/other"; // Form @import "bulma/sass/form/shared"; diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts index 67e5b16537..b480a65776 100644 --- a/kafka-ui-react-app/src/theme/theme.ts +++ b/kafka-ui-react-app/src/theme/theme.ts @@ -39,6 +39,7 @@ export const Colors = { }, yellow: { '10': '#FFEECC', + '20': '#FFDD57', }, blue: { '10': '#e3f2fd', @@ -383,6 +384,7 @@ const theme = { }, icons: { closeIcon: Colors.neutral[30], + warningIcon: Colors.yellow[20], messageToggleIconOpened: Colors.neutral[90], messageToggleIconClosed: Colors.neutral[30], verticalElipsisIcon: Colors.neutral[50],