Link to patch detail (#2741)

* Add link to patch details

* Add button with type link

* Use button type link

* Add links to advisory detail in available patches view

* Fix unit test declaring button as disabled

assets/js/common/Button/Button.jsx

@@ -28,6 +28,8 @@ const getButtonClasses = (type) => {
       return 'bg-white hover:opacity-75 focus:outline-none text-red-500 border border-red-500 transition ease-in duration-200 text-center font-semibold rounded shadow';
     case 'danger-bold':
       return 'bg-red-500 hover:opacity-75 focus:outline-none text-white border border-red-500 transition ease-in duration-200 text-center font-semibold rounded shadow';
+    case 'link':
+      return 'cursor-pointer text-jungle-green-500 hover:text-jungle-green-300';
     default:
       return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-full transition ease-in duration-200 text-center font-semibold rounded shadow disabled:bg-gray-400 disabled:text-gray-200';
   }

assets/js/common/Button/Button.stories.jsx

@@ -50,6 +50,10 @@ export function Fit() {
   return <Button size="fit">Hello world!</Button>;
 }
 
+export function Link() {
+  return <Button type="link">Go to another page</Button>;
+}
+
 export function SmallSecondary() {
   return (
     <Button size="small" type="secondary">

assets/js/common/Button/Button.test.jsx

@@ -5,16 +5,62 @@ import '@testing-library/jest-dom';
 
 import Button from '.';
 
+const types = [
+  'primary-white',
+  'transparent',
+  'secondary',
+  'default-fit',
+  'danger',
+  'danger-bold',
+  'link',
+  'primary-white-fit',
+];
+
+const sizes = ['small', 'fit'];
+
 describe('Button', () => {
-  it('should display a button with its text', () => {
+  it('should display a default button with its text', () => {
     const content = faker.vehicle.vehicle();
     render(<Button>{content}</Button>);
     expect(screen.getByRole('button')).toHaveTextContent(content);
   });
 
-  it('should display a disabled button with its text', () => {
+  it('should display a default disabled button with its text', () => {
     const content = faker.vehicle.vehicle();
     render(<Button disabled>{content}</Button>);
     expect(screen.getByRole('button')).toHaveTextContent(content);
   });
+
+  it.each(types)(
+    'should display a button with type %s with its text',
+    (buttonType) => {
+      const content = faker.vehicle.vehicle();
+      render(<Button type={buttonType}>{content}</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent(content);
+    }
+  );
+
+  it.each(types)(
+    'should display a disabled button with type %s with its text',
+    (buttonType) => {
+      const content = faker.vehicle.vehicle();
+      render(
+        <Button type={buttonType} disabled>
+          {content}
+        </Button>
+      );
+      expect(screen.getByRole('button')).toHaveTextContent(content);
+    }
+  );
+
+  it.each(sizes)(
+    'should display a button with size %s with its text',
+    (buttonSize) => {
+      const content = faker.vehicle.vehicle();
+
+      render(<Button size={buttonSize}>{content}</Button>);
+
+      expect(screen.getByRole('button')).toHaveTextContent(content);
+    }
+  );
 });

assets/js/common/PatchList/PatchList.jsx

@@ -8,6 +8,7 @@ import { format as formatDate } from 'date-fns';
 import classNames from 'classnames';
 import { noop } from 'lodash';
 
+import Button from '@common/Button';
 import Table, {
   createStringSortingPredicate,
   createDateSortingPredicate,
@@ -120,14 +121,10 @@ export default function PatchList({ patches, onNavigate = noop }) {
         sortable: true,
         sortDirection: sortingColumn === 'advisory_name' ? sortDirection : null,
         handleClick: handleNameColClick,
-        render: (content, item) => (
-          <button
-            type="button"
-            className="text-jungle-green-500 hover:opacity-75"
-            onClick={() => onNavigate(item)}
-          >
+        render: (content) => (
+          <Button type="link" size="fit" onClick={() => onNavigate(content)}>
             {content}
-          </button>
+          </Button>
         ),
       },
       {

assets/js/common/UpgradablePackagesList/UpgradablePackagesList.jsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
+import { noop } from 'lodash';
+
+import Button from '@common/Button';
 import Table, { createStringSortingPredicate } from '@common/Table';
 
 const upgradablePackagesDefault = [];
 
 function UpgradablePackagesList({
   upgradablePackages = upgradablePackagesDefault,
+  onPatchClick = noop,
 }) {
   const [sortDirection, setSortDirection] = useState('asc');
 
@@ -45,7 +49,15 @@ function UpgradablePackagesList({
           <div>
             {content &&
               content.map(({ advisory }) => (
-                <div key={`${to_package_id}-${advisory}`}>{advisory}</div>
+                <div key={`${to_package_id}-${advisory}`}>
+                  <Button
+                    type="link"
+                    size="fit"
+                    onClick={() => onPatchClick(advisory)}
+                  >
+                    {advisory}
+                  </Button>
+                </div>
               ))}
           </div>
         ),

assets/js/pages/HostRelevantPatches/Page.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import BackButton from '@common/BackButton';
@@ -12,6 +12,7 @@ import HostRelevantPatchesPage from './HostRelevantPatchesPage';
 
 export default function Page() {
   const { hostID } = useParams();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -31,11 +32,16 @@ export default function Page() {
 
   const { hostname: hostName } = host;
 
-  // TODO(janvhs): Handle navigation
   return (
     <>
       <BackButton url={`/hosts/${hostID}`}>Back to Host Details</BackButton>
-      <HostRelevantPatchesPage patches={patches} hostName={hostName} />
+      <HostRelevantPatchesPage
+        patches={patches}
+        hostName={hostName}
+        onNavigate={(advisoryID) =>
+          navigate(`hosts/${hostID}/patches/${advisoryID}`)
+        }
+      />
     </>
   );
 }

assets/js/pages/UpgradablePackagesPage/UpgradablePackages.jsx

@@ -1,12 +1,17 @@
 import React, { useState } from 'react';
 import { EOS_SEARCH } from 'eos-icons-react';
+import { noop } from 'lodash';
 
 import UpgradablePackagesList from '@common/UpgradablePackagesList';
 import PageHeader from '@common/PageHeader';
 import Input from '@common/Input';
 import { containsSubstring } from '@lib/filter';
 
-export default function UpgradablePackages({ hostName, upgradablePackages }) {
+export default function UpgradablePackages({
+  hostName,
+  upgradablePackages,
+  onPatchClick = noop,
+}) {
   const [search, setSearch] = useState('');
 
   const displayedPackages = upgradablePackages.filter(
@@ -34,7 +39,10 @@ export default function UpgradablePackages({ hostName, upgradablePackages }) {
           />
         </div>
       </div>
-      <UpgradablePackagesList upgradablePackages={displayedPackages} />
+      <UpgradablePackagesList
+        upgradablePackages={displayedPackages}
+        onPatchClick={onPatchClick}
+      />
     </>
   );
 }

assets/js/pages/UpgradablePackagesPage/UpgradablePackagesPage.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { get } from 'lodash';
 
@@ -16,6 +16,7 @@ import UpgradablePackages from './UpgradablePackages';
 
 function UpgradablePackagesPage() {
   const { hostID } = useParams();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -45,6 +46,9 @@ function UpgradablePackagesPage() {
       <UpgradablePackages
         hostName={hostname}
         upgradablePackages={upgradablePackages}
+        onPatchClick={(advisoryID) =>
+          navigate(`hosts/${hostID}/patches/${advisoryID}`)
+        }
       />
     </>
   );