fixing create topic (#2275)

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);

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(

kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx

@@ -18,23 +18,27 @@ const TimeToRetainBtnsWrapper = styled.div`
 const TimeToRetainBtns: React.FC<Props> = ({ name }) => (
   <TimeToRetainBtnsWrapper>
     <TimeToRetainBtn
-      text="12h"
+      text="12 hours"
       inputName={name}
       value={MILLISECONDS_IN_DAY / 2}
     />
-    <TimeToRetainBtn text="1d" inputName={name} value={MILLISECONDS_IN_DAY} />
     <TimeToRetainBtn
-      text="2d"
+      text="1 day"
+      inputName={name}
+      value={MILLISECONDS_IN_DAY}
+    />
+    <TimeToRetainBtn
+      text="2 days"
       inputName={name}
       value={MILLISECONDS_IN_DAY * 2}
     />
     <TimeToRetainBtn
-      text="7d"
+      text="7 days"
       inputName={name}
       value={MILLISECONDS_IN_DAY * 7}
     />
     <TimeToRetainBtn
-      text="4w"
+      text="4 weeks"
       inputName={name}
       value={MILLISECONDS_IN_DAY * 7 * 4}
     />

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

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -208,10 +208,14 @@ const TopicForm: React.FC<Props> = ({
 
         <S.CustomParamsHeading>Custom parameters</S.CustomParamsHeading>
         <CustomParams isSubmitting={isSubmitting} />
-
-        <Button type="submit" buttonType="primary" buttonSize="L">
-          Submit
-        </Button>
+        <S.ButtonWrapper>
+          <Button type="submit" buttonType="primary" buttonSize="L">
+            {isEditing ? 'Save' : 'Create topic'}
+          </Button>
+          <Button type="button" buttonType="primary" buttonSize="L">
+            Cancel
+          </Button>
+        </S.ButtonWrapper>
       </fieldset>
     </StyledForm>
   );

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`);
     });
   });
 });

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);
   });
 });

kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TopicForm.styled.spec.tsx

@@ -10,8 +10,8 @@ describe('TopicForm styled components', () => {
       render(<S.Button isActive />);
       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(<S.Button isActive={false} />);
       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,
       });
     });
   });

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();
   });
 });

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

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)

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

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],