Create BackToCluster button component (#837)

* Create BackToCluster button component

* Move back button code to its own component

* Make BackButton generic

* Add jest test to BackButton

assets/js/components/BackButton/BackButton.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Button from '@components/Button';
+import { useNavigate } from 'react-router-dom';
+import { EOS_ARROW_BACK } from 'eos-icons-react';
+
+export const BackButton = ({ children, url }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex mb-8">
+      <div className="flex w-2/5">
+        <Button
+          className="w-2/3 text-jungle-green-500 text-left py-0 px-0"
+          size="small"
+          type="transparent"
+          onClick={() => navigate(url)}
+        >
+          <EOS_ARROW_BACK className="inline-block fill-jungle-green-500" />
+          {children}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default BackButton;

assets/js/components/BackButton/BackButton.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import * as router from 'react-router';
+
+import BackButton from './';
+
+const navigate = jest.fn();
+
+describe('BackButton', () => {
+  it('should display a back button with correct text and url', () => {
+    jest.spyOn(router, 'useNavigate').mockImplementation(() => navigate);
+
+    render(<BackButton url="/back/hell">Back to hell!</BackButton>);
+    const backButton = screen.getByRole('button');
+    expect(backButton).toHaveTextContent('Back to hell!');
+
+    fireEvent.click(backButton);
+    expect(navigate).toHaveBeenCalledWith('/back/hell');
+  });
+});

assets/js/components/BackButton/index.js

@@ -0,0 +1,3 @@
+import BackButton from './BackButton';
+
+export default BackButton;

assets/js/components/ClusterDetails/ChecksResults.jsx

@@ -4,17 +4,14 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import Modal from '@components/Modal';
 
-import {
-  EOS_ERROR,
-  EOS_ARROW_BACK,
-  EOS_SETTINGS,
-  EOS_PLAY_CIRCLE,
-} from 'eos-icons-react';
+import { EOS_ERROR, EOS_SETTINGS, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 
 import NotificationBox from '../NotificationBox';
 import LoadingBox from '../LoadingBox';
 
 import Button from '@components/Button';
+import BackButton from '@components/BackButton';
+
 import { getCluster } from '@state/selectors';
 import TrentoLogo from '../../../static/trento-icon.png';
 import {
@@ -62,7 +59,6 @@ export const ChecksResults = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const [selectedCheck, setSelectedCheck] = useState('');
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const { clusterID } = useParams();
   const cluster = useSelector(getCluster(clusterID));
   const [hasAlreadyChecksResults, setHasAlreadyChecksResults] = useState(false);
@@ -241,19 +237,9 @@ export const ChecksResults = () => {
           {findCheckDataByID(selectedCheck)?.remediation}
         </ReactMarkdown>
       </Modal>
-      <div className="flex mb-8">
-        <div className="flex w-2/5">
-          <Button
-            className="w-2/3 text-jungle-green-500 text-left py-0 px-0"
-            size="small"
-            type="transparent"
-            onClick={() => navigate(`/clusters/${cluster.id}`)}
-          >
-            <EOS_ARROW_BACK className="inline-block fill-jungle-green-500" />{' '}
-            Back to Cluster Details
-          </Button>
-        </div>
-      </div>
+      <BackButton url={`/clusters/${clusterID}`}>
+        Back to Cluster Details
+      </BackButton>
       <div className="flex mb-4 justify-between">
         <h1 className="text-3xl w-3/5">
           <span className="font-medium">Checks Results for cluster</span>{' '}

assets/js/components/ClusterDetails/ClusterSettings.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
-import { EOS_ARROW_BACK, EOS_CANCEL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
-import Button from '@components/Button';
+import { EOS_CANCEL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 import classNames from 'classnames';
 
+import BackButton from '@components/BackButton';
 import { Tab } from '@headlessui/react';
-import { ChecksSelection } from './ChecksSelection';
-import { ConnectionSettings } from './ConnectionSettings';
+import { ChecksSelection } from '@components/ClusterDetails/ChecksSelection';
+import { ConnectionSettings } from '@components/ClusterDetails/ConnectionSettings';
 import { getCluster } from '@state/selectors';
 import {
   TriggerChecksExecutionRequest,
@@ -18,7 +18,6 @@ import { getClusterName } from '@components/ClusterLink';
 
 export const ClusterSettings = () => {
   const { clusterID } = useParams();
-  const navigate = useNavigate();
 
   const cluster = useSelector(getCluster(clusterID));
 
@@ -33,23 +32,16 @@ export const ClusterSettings = () => {
 
   return (
     <div className="w-full px-2 sm:px-0">
+      <BackButton url={`/clusters/${clusterID}`}>
+        Back to Cluster Details
+      </BackButton>
       <div className="flex mb-2">
         <h1 className="text-3xl w-1/2">
           <span className="font-medium">Cluster Settings for</span>{' '}
           <span className={`font-bold ${truncatedClusterNameClasses}`}>
             {getClusterName(cluster)}
           </span>
         </h1>
-        <div className="flex w-1/2 justify-end text-white">
-          <Button
-            className="w-1/3 bg-waterhole-blue text-white"
-            size="small"
-            onClick={() => navigate(`/clusters/${cluster.id}`)}
-          >
-            <EOS_ARROW_BACK className="inline-block fill-white" /> Back to
-            Cluster
-          </Button>
-        </div>
       </div>
       <Tab.Group manual>
         <Tab.List className="flex p-1 space-x-1 bg-zinc-300/20 rounded">