FE: SR: Add a back button @ compare view (#3698)

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

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

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>

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