Repository: provectus/kafka-ui
Issue: SR: Compare versions view doesn't have a "back" button
Labels: type/enhancement
scope/frontend
status/accepted


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
index 8f178d320d1..520f9f6c8ad 100644
--- a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
+++ b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Button } from 'components/common/Button/Button';
 
 export const DiffWrapper = styled.div`
   align-items: stretch;
@@ -81,3 +82,6 @@ export const DiffTile = styled.div`
 export const DiffVersionsSelect = styled.div`
   width: 0.625em;
 `;
+export const BackButton = styled(Button)`
+  margin: 10px 9px;
+`;
diff --git a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.tsx b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.tsx
index d0016b46b44..05b1373ab60 100644
--- a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.tsx
@@ -20,6 +20,7 @@ import useAppParams from 'lib/hooks/useAppParams';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 
 import * as S from './Diff.styled';
+import { BackButton } from './Diff.styled';
 
 export interface DiffProps {
   versions: SchemaSubject[];
@@ -77,6 +78,13 @@ const Diff: React.FC<DiffProps> = ({ versions, areVersionsFetched }) => {
         backText="Schema Registry"
         backTo={clusterSchemasPath(clusterName)}
       />
+      <BackButton
+        buttonType="secondary"
+        buttonSize="S"
+        onClick={() => navigate(-1)}
+      >
+        Back
+      </BackButton>
       <S.Section>
         {areVersionsFetched ? (
           <S.DiffBox>
diff --git a/kafka-ui-react-app/src/components/Schemas/Diff/__test__/Diff.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Diff/__test__/Diff.spec.tsx
index 0c614cf6617..2a9429eef1c 100644
--- a/kafka-ui-react-app/src/components/Schemas/Diff/__test__/Diff.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Diff/__test__/Diff.spec.tsx
@@ -3,6 +3,7 @@ import Diff, { DiffProps } from 'components/Schemas/Diff/Diff';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen } from '@testing-library/react';
 import { clusterSchemaComparePath } from 'lib/paths';
+import userEvent from '@testing-library/user-event';
 
 import { versions } from './fixtures';
 
@@ -142,4 +143,24 @@ describe('Diff', () => {
       expect(select).toHaveTextContent(versions[0].version);
     });
   });
+
+  describe('Back button', () => {
+    beforeEach(() => {
+      setupComponent({
+        areVersionsFetched: true,
+        versions,
+      });
+    });
+
+    it('back button is appear', () => {
+      const backButton = screen.getAllByRole('button', { name: 'Back' });
+      expect(backButton[0]).toBeInTheDocument();
+    });
+
+    it('click on back button', () => {
+      const backButton = screen.getAllByRole('button', { name: 'Back' });
+      userEvent.click(backButton[0]);
+      expect(screen.queryByRole('Back')).not.toBeInTheDocument();
+    });
+  });
 });


Test patch: