feat: add link to iso volumes from image list

Signed-off-by: David Edler <[email protected]>

src/pages/images/ImageList.tsx

@@ -27,6 +27,7 @@ import NotificationRow from "components/NotificationRow";
 import { useDocs } from "context/useDocs";
 import CustomLayout from "components/CustomLayout";
 import PageHeader from "components/PageHeader";
+import CustomIsoBtn from "pages/storage/actions/CustomIsoBtn";
 
 const ImageList: FC = () => {
   const docBaseLink = useDocs();
@@ -225,6 +226,9 @@ const ImageList: FC = () => {
               />
             )}
           </PageHeader.Left>
+          <PageHeader.BaseActions>
+            <CustomIsoBtn project={project} />
+          </PageHeader.BaseActions>
         </PageHeader>
       }
     >

src/pages/storage/actions/CustomIsoBtn.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import { Button, Icon } from "@canonical/react-components";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+  project: string;
+}
+
+const CustomIsoBtn: FC<Props> = ({ project }) => {
+  const navigate = useNavigate();
+  const href = `/ui/project/${project}/storage/custom-isos`;
+
+  const handleClick = () => (e: MouseEvent) => {
+    e.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <Button
+      className="u-no-margin--bottom u-float-right"
+      hasIcon
+      href={href}
+      onClick={handleClick}
+      element="a"
+    >
+      <span>Custom ISOs</span>
+      <Icon name="external-link" />
+    </Button>
+  );
+};
+
+export default CustomIsoBtn;