diff --git a/kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx b/kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx index e7796f727f..aec534ce3e 100644 --- a/kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx @@ -80,7 +80,7 @@ describe('New', () => { it('validates form', async () => { await act(() => renderComponent(clusterTopicNewPath(clusterName))); - userEvent.click(screen.getByText(/submit/i)); + userEvent.click(screen.getByText('Create topic')); await waitFor(() => { expect(screen.getByText('name is a required field')).toBeInTheDocument(); }); @@ -97,7 +97,7 @@ describe('New', () => { await act(() => renderComponent(clusterTopicNewPath(clusterName))); userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName); - userEvent.click(screen.getByText(/submit/i)); + userEvent.click(screen.getByText('Create topic')); await waitFor(() => expect(mockNavigate).toBeCalledTimes(1)); expect(mockNavigate).toHaveBeenLastCalledWith(`../${topicName}`); @@ -115,7 +115,7 @@ describe('New', () => { await act(() => userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName) ); - await act(() => userEvent.click(screen.getByText(/submit/i))); + await act(() => userEvent.click(screen.getByText('Create topic'))); expect(mockNavigate).not.toHaveBeenCalled(); }); @@ -127,7 +127,7 @@ describe('New', () => { await act(() => renderComponent(clusterTopicNewPath(clusterName))); await act(() => { userEvent.type(screen.getByPlaceholderText('Topic Name'), topicName); - userEvent.click(screen.getByText(/submit/i)); + userEvent.click(screen.getByText('Create topic')); }); expect(useDispatchMock).toHaveBeenCalledTimes(1); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx index b658ac8019..83214b376c 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx @@ -116,7 +116,7 @@ describe('Edit Component', () => { renderComponent({ updateTopic: updateTopicMock }, undefined); - const btn = screen.getAllByText(/submit/i)[0]; + const btn = screen.getAllByText(/Save/i)[0]; expect(btn).toBeEnabled(); await act(() => { @@ -138,7 +138,7 @@ describe('Edit Component', () => { undefined ); - const btn = screen.getAllByText(/submit/i)[0]; + const btn = screen.getAllByText(/Save/i)[0]; await act(() => { userEvent.type( diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx index 53376876e4..80d421b4a4 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx @@ -18,23 +18,27 @@ const TimeToRetainBtnsWrapper = styled.div` const TimeToRetainBtns: React.FC = ({ name }) => ( - + diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts index fc46d8d939..24c2d4d9bd 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts @@ -29,15 +29,23 @@ export const Label = styled.div` export const Button = styled.button<{ isActive: boolean }>` background-color: ${({ theme, ...props }) => props.isActive - ? theme.button.primary.backgroundColor.active - : theme.button.primary.backgroundColor.normal}; - height: 32px; - width: 46px; - border: 1px solid - ${({ theme, ...props }) => - props.isActive ? theme.button.border.active : theme.button.primary.color}; + ? theme.button.secondary.invertedColors.normal + : theme.button.secondary.backgroundColor.normal}; + color: ${({ theme, ...props }) => + props.isActive + ? theme.button.secondary.isActiveColor + : theme.button.primary.color}; + height: 24px; + padding: 0 5px; + min-width: 51px; + border: none; border-radius: 6px; &:hover { cursor: pointer; } `; + +export const ButtonWrapper = styled.div` + display: flex; + gap: 10px; +`; diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx index bd0fb16beb..d9d6427a25 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx @@ -208,10 +208,14 @@ const TopicForm: React.FC = ({ Custom parameters - - + + + + ); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx index 756fc081c0..bf93b72d4e 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx @@ -42,21 +42,17 @@ describe('TimeToRetainBtn', () => { it('should test the non active state of the button and its styling', () => { const buttonElement = screen.getByRole('button'); expect(buttonElement).toHaveStyle( - `background-color:${theme.button.primary.backgroundColor.normal}` - ); - expect(buttonElement).toHaveStyle( - `border:1px solid ${theme.button.primary.color}` + `background-color:${theme.button.secondary.backgroundColor.normal}` ); + expect(buttonElement).toHaveStyle(`border:none`); }); it('should test the non active state with click becoming active', () => { const buttonElement = screen.getByRole('button'); userEvent.click(buttonElement); expect(buttonElement).toHaveStyle( - `background-color:${theme.button.primary.backgroundColor.active}` - ); - expect(buttonElement).toHaveStyle( - `border:1px solid ${theme.button.border.active}` + `background-color:${theme.button.secondary.invertedColors.normal}` ); + expect(buttonElement).toHaveStyle(`border:none`); }); }); @@ -65,11 +61,9 @@ describe('TimeToRetainBtn', () => { SetUpComponent({ value: 604800000 }); const buttonElement = screen.getByRole('button'); expect(buttonElement).toHaveStyle( - `background-color:${theme.button.primary.backgroundColor.active}` - ); - expect(buttonElement).toHaveStyle( - `border:1px solid ${theme.button.border.active}` + `background-color:${theme.button.secondary.invertedColors.normal}` ); + expect(buttonElement).toHaveStyle(`border:none`); }); }); }); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx index 3c54c28b0c..b224c8cd8e 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.spec.tsx @@ -44,10 +44,10 @@ describe('TopicForm', () => { 'spinbutton', 'Time to retain data (in ms)' ); - expectByRoleAndNameToBeInDocument('button', '12h'); - expectByRoleAndNameToBeInDocument('button', '2d'); - expectByRoleAndNameToBeInDocument('button', '7d'); - expectByRoleAndNameToBeInDocument('button', '4w'); + expectByRoleAndNameToBeInDocument('button', '12 hours'); + expectByRoleAndNameToBeInDocument('button', '2 days'); + expectByRoleAndNameToBeInDocument('button', '7 days'); + expectByRoleAndNameToBeInDocument('button', '4 weeks'); expectByRoleAndNameToBeInDocument('listbox', 'Max size on disk in GB'); expectByRoleAndNameToBeInDocument( @@ -57,7 +57,7 @@ describe('TopicForm', () => { expectByRoleAndNameToBeInDocument('heading', 'Custom parameters'); - expectByRoleAndNameToBeInDocument('button', 'Submit'); + expectByRoleAndNameToBeInDocument('button', 'Create topic'); }); it('submits', () => { @@ -66,7 +66,7 @@ describe('TopicForm', () => { onSubmit: onSubmit.mockImplementation((e) => e.preventDefault()), }); - userEvent.click(screen.getByRole('button', { name: 'Submit' })); + userEvent.click(screen.getByRole('button', { name: 'Create topic' })); expect(onSubmit).toBeCalledTimes(1); }); }); diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx index c0ff8e50d0..f67f955796 100644 --- a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx @@ -10,8 +10,8 @@ describe('TopicForm styled components', () => { render(); const button = screen.getByRole('button'); expect(button).toHaveStyle({ - border: `1px solid ${theme.button.border.active}`, - backgroundColor: theme.button.primary.backgroundColor.active, + border: `none`, + backgroundColor: theme.button.secondary.invertedColors.normal, }); }); @@ -19,8 +19,8 @@ describe('TopicForm styled components', () => { render(); const button = screen.getByRole('button'); expect(button).toHaveStyle({ - border: `1px solid ${theme.button.primary.color}`, - backgroundColor: theme.button.primary.backgroundColor.normal, + border: `none`, + backgroundColor: theme.button.secondary.backgroundColor.normal, }); }); }); diff --git a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx index 426f20cc17..d2cd7f6041 100644 --- a/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx +++ b/kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx @@ -29,12 +29,12 @@ describe('Breadcrumb component', () => { it('renders the list of links', async () => { const { getByText } = setupComponent(createTopicPath, createTopicRoutePath); - expect(getByText('Topics')).toBeInTheDocument(); - expect(getByText('Create New')).toBeInTheDocument(); + expect(getByText('All Topics')).toBeInTheDocument(); + expect(getByText('Create New Topic')).toBeInTheDocument(); }); it('renders the topic overview', async () => { const { getByText } = setupComponent(topicPath, topicRoutePath); - expect(getByText('Topics')).toBeInTheDocument(); + expect(getByText('All Topics')).toBeInTheDocument(); expect(getByText(topicName)).toBeInTheDocument(); }); }); diff --git a/kafka-ui-react-app/src/components/common/Form/Form.styled.ts b/kafka-ui-react-app/src/components/common/Form/Form.styled.ts index 6316b7b0f7..8803840683 100644 --- a/kafka-ui-react-app/src/components/common/Form/Form.styled.ts +++ b/kafka-ui-react-app/src/components/common/Form/Form.styled.ts @@ -3,4 +3,5 @@ import styled from 'styled-components'; export const StyledForm = styled.form` padding: 0 16px; max-width: 800px; + margin: 0 auto; `; diff --git a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts index c94973a314..45a1ca87e5 100644 --- a/kafka-ui-react-app/src/lib/__test__/paths.spec.ts +++ b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts @@ -120,7 +120,7 @@ describe('Paths', () => { it('clusterTopicsPath', () => { expect(paths.clusterTopicsPath(clusterName)).toEqual( - `${paths.clusterPath(clusterName)}/topics` + `${paths.clusterPath(clusterName)}/all-topics` ); expect(paths.clusterTopicsPath()).toEqual( paths.clusterTopicsPath(RouteParams.clusterName) @@ -128,7 +128,7 @@ describe('Paths', () => { }); it('clusterTopicNewPath', () => { expect(paths.clusterTopicNewPath(clusterName)).toEqual( - `${paths.clusterTopicsPath(clusterName)}/create-new` + `${paths.clusterTopicsPath(clusterName)}/create-new-topic` ); expect(paths.clusterTopicNewPath()).toEqual( paths.clusterTopicNewPath(RouteParams.clusterName) diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts index 77f2c650b2..e9a6326a57 100644 --- a/kafka-ui-react-app/src/lib/paths.ts +++ b/kafka-ui-react-app/src/lib/paths.ts @@ -111,8 +111,8 @@ export type ClusterSubjectParam = { }; // Topics -export const clusterTopicsRelativePath = 'topics'; -export const clusterTopicNewRelativePath = 'create-new'; +export const clusterTopicsRelativePath = 'all-topics'; +export const clusterTopicNewRelativePath = 'create-new-topic'; export const clusterTopicCopyRelativePath = 'copy'; export const clusterTopicsPath = ( clusterName: ClusterName = RouteParams.clusterName diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts index 15af77fe52..c5d54a8b59 100644 --- a/kafka-ui-react-app/src/theme/theme.ts +++ b/kafka-ui-react-app/src/theme/theme.ts @@ -181,6 +181,7 @@ const theme = { active: Colors.neutral[15], }, color: Colors.neutral[90], + isActiveColor: Colors.neutral[0], invertedColors: { normal: Colors.neutral[50], hover: Colors.neutral[70],