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

fixing create topic (#2275)

Browse source
This commit is contained in:
Robert Azizbekyan 2022-07-18 14:57:28 +04:00 • committed by GitHub
parent 620d2955fb
commit 002e4db355
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 63 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
kafka-ui-react-app/src/components/Topics/New/__test__/New.spec.tsx
View file

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

4
kafka-ui-react-app/src/components/Topics/Topic/Edit/__test__/Edit.spec.tsx
View file

@ -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(

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

@ -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}
/>

22
kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts
View file

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

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

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

18
kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
View file

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

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

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

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

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

6
kafka-ui-react-app/src/components/common/Breadcrumb/__tests__/Breadcrumb.spec.tsx
View file

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

1
kafka-ui-react-app/src/components/common/Form/Form.styled.ts
View file

@ -3,4 +3,5 @@ import styled from 'styled-components';
export const StyledForm = styled.form`
padding: 0 16px;
max-width: 800px;
margin: 0 auto;
`;

4
kafka-ui-react-app/src/lib/__test__/paths.spec.ts
View file

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

4
kafka-ui-react-app/src/lib/paths.ts
View file

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

1
kafka-ui-react-app/src/theme/theme.ts
View file

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