Remove the Heroicons dependency (#1139)

* refactor: Remove the HeroIcons dependency

* feat: Improve Iconography

package.json

@@ -29,7 +29,6 @@
     "@cornerstonejs/streaming-image-volume-loader": "^1.61.1",
     "@cornerstonejs/tools": "^1.61.1",
     "@fnndsc/chrisapi": "^1.15.0",
-    "@heroicons/react": "^2.1.1",
     "@niivue/niivue": "^0.39.0",
     "@patternfly/react-catalog-view-extension": "^5.0.0",
     "@patternfly/react-charts": "^7.1.2",

src/components/AddNode/SimpleDropdown.tsx

@@ -6,7 +6,7 @@ import {
   DropdownList,
   TextInput,
 } from "@patternfly/react-core";
-import CloseIcon from "@patternfly/react-icons/dist/esm/icons/close-icon";
+import { CloseIcon } from "../Icons";
 import { SimpleDropdownProps, SimpleDropdownState } from "./types";
 import { unPackForKeyValue } from "./utils";
 import { PluginParameter } from "@fnndsc/chrisapi";

src/components/AddTsNode/ConfigureJoin.tsx

@@ -5,7 +5,7 @@ import type { Plugin, PluginParameter } from "@fnndsc/chrisapi";
 import { deleteTsNode } from "../../store/tsplugins/actions";
 import { useSafeDispatch } from "../../api/common";
 import { useTypedSelector } from "../../store/hooks";
-import CloseIcon from "@patternfly/react-icons/dist/esm/icons/close-icon";
+import { CloseIcon } from "../Icons";
 import { InputType } from "./ParentContainer";
 
 type ConfigureJoinProps = {

src/components/Common/index.tsx

@@ -1,4 +1,4 @@
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { InfoIcon as InfoIconComponent } from "../Icons";
 import {
   ClipboardCopyButton,
   Dropdown,
@@ -15,8 +15,7 @@ import {
   MenuToggle,
   TextInput,
 } from "@patternfly/react-core";
-import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
-import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
+import { CubesIcon, SearchIcon } from "../Icons";
 import { Alert, Popover, Spin, Typography } from "antd";
 import React, { ReactNode, useState } from "react";
 import Dots from "react-activity/dist/Dots";
@@ -153,18 +152,14 @@ export const InfoIcon = ({
   );
 
   return (
-    <Title level={4}>
-      {title}
-      <Popover placement="bottom" trigger="hover" content={content}>
-        <InformationCircleIcon
-          style={{
-            height: "1em",
-            width: "0.75em",
-            marginLeft: "0.25em",
-          }}
-        />
+    <div style={{ display: "flex" }}>
+      <Title level={4} style={{ marginBottom: 0 }}>
+        {title}
+      </Title>
+      <Popover placement="top" trigger="hover" content={content}>
+        <InfoIconComponent style={{ alignSelf: "flex-start" }} />
       </Popover>
-    </Title>
+    </div>
   );
 };
 

src/components/CreateFeed/ChooseConfig.tsx

@@ -18,9 +18,7 @@ import {
   Tooltip,
   useWizardContext,
 } from "@patternfly/react-core";
-import SettingsIcon from "@patternfly/react-icons/dist/esm/icons/cogs-icon";
-import TrashIcon from "@patternfly/react-icons/dist/esm/icons/trash-icon";
-import UploadIcon from "@patternfly/react-icons/dist/esm/icons/upload-icon";
+import { SettingsIcon, DeleteIcon as TrashIcon, UploadIcon } from "../Icons";
 import { Alert, Steps, notification } from "antd";
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import { useTypedSelector } from "../../store/hooks";

src/components/CreateFeed/DataPacks.tsx

@@ -10,8 +10,7 @@ import {
   TextInput,
   useWizardContext,
 } from "@patternfly/react-core";
-import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
-
+import { SearchIcon } from "../Icons";
 import { Types as AddNodeTypes } from "../AddNode/types";
 import { Types } from "./types/feed";
 import { notification } from "antd";

src/components/CreateFeed/HelperComponent.tsx

@@ -6,10 +6,7 @@ import {
   FlexItem,
 } from "@patternfly/react-core";
 import { notification } from "antd";
-import TrashIcon from "@patternfly/react-icons/dist/esm/icons/trash-icon";
-import FileIcon from "@patternfly/react-icons/dist/esm/icons/file-icon";
-import FolderIcon from "@patternfly/react-icons/dist/esm/icons/folder-icon";
-
+import { DeleteIcon as TrashIcon, FileIcon, FolderIcon } from "../Icons";
 import { CreateFeedContext } from "./context";
 import { Types } from "./types/feed";
 

src/components/DisplayPage/index.tsx

@@ -18,7 +18,7 @@ import {
 import { Link } from "react-router-dom";
 import { format } from "date-fns";
 import { EmptyStateComponent, SpinContainer } from "../Common";
-import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
+import { SearchIcon } from "../Icons";
 import "./display-page.css";
 
 export const ComputeQueryTypes = {

src/components/DragFileUpload/index.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from "@patternfly/react-core";
 import { useCallback, useContext, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
-import IconUpload from "@patternfly/react-icons/dist/esm/icons/upload-icon";
+import { UploadIcon as IconUpload } from "../Icons";
 import { CreateFeedContext } from "../CreateFeed/context";
 import { Types } from "../CreateFeed/types/feed";
 import "./DragFileUpload.css";

src/components/FeedTree/FeedTree.tsx

@@ -1,7 +1,6 @@
 import { PluginInstance } from "@fnndsc/chrisapi";
 import { Alert, Switch, TextInput } from "@patternfly/react-core";
-import RotateLeft from "@patternfly/react-icons/dist/esm/icons/angle-double-left-icon";
-import RotateRight from "@patternfly/react-icons/dist/esm/icons/angle-double-right-icon";
+import { RotateLeft, RotateRight } from "../Icons";
 import { HierarchyPointLink, hierarchy, tree } from "d3-hierarchy";
 import { event, select } from "d3-selection";
 import { zoom as d3Zoom, zoomIdentity } from "d3-zoom";

src/components/Feeds/DrawerUtils.tsx

@@ -6,11 +6,7 @@ import {
   DrawerHead,
   DrawerActions,
 } from "@patternfly/react-core";
-
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-} from "@heroicons/react/24/outline";
+import { CompressArrowsAltIcon, ExpandArrowsAltIcon } from "../Icons";
 
 interface ButtonProps {
   variant?: any;
@@ -85,15 +81,15 @@ export const DrawerActionButton = ({
               zIndex: "999",
             }}
             variant="link"
-            icon={<ArrowsPointingInIcon className="pf-v5-svg" />}
+            icon={<CompressArrowsAltIcon />}
             onClick={handleMinimize}
           />
         ) : (
           <Button
             style={{ paddingLeft: "0.5em", paddingRight: "0.5em" }}
             onClick={handleMaximize}
             variant="link"
-            icon={<ArrowsPointingOutIcon className="pf-v5-svg" />}
+            icon={<ExpandArrowsAltIcon />}
           />
         )}
       </DrawerActions>

src/components/Feeds/FeedListView.tsx

@@ -16,7 +16,7 @@ import {
   ToggleGroupItemProps,
   Tooltip,
 } from "@patternfly/react-core";
-import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
+import { SearchIcon } from "../Icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
 import { useQuery } from "@tanstack/react-query";
 import { Typography } from "antd";

src/components/Icons/index.tsx

@@ -15,6 +15,19 @@ import {
   DatabaseIcon,
   QuestionCircleIcon,
   ThLargeIcon,
+  CompressArrowsAltIcon,
+  ExpandArrowsAltIcon,
+  CloseIcon,
+  CubesIcon,
+  UploadIcon,
+  CogsIcon,
+  AngleDoubleLeftIcon,
+  AngleDoubleRightIcon,
+  HomeIcon,
+  ExternalLinkSquareAltIcon,
+  ExclamationCircleIcon,
+  EllipsisVIcon,
+  EditIcon,
 } from "@patternfly/react-icons";
 
 const MergeIcon = () => {
@@ -229,4 +242,17 @@ export {
   DatabaseIcon as LibraryIcon,
   QuestionCircleIcon,
   ThLargeIcon,
+  CompressArrowsAltIcon,
+  ExpandArrowsAltIcon,
+  CloseIcon,
+  CubesIcon,
+  UploadIcon,
+  CogsIcon as SettingsIcon,
+  AngleDoubleLeftIcon as RotateLeft,
+  AngleDoubleRightIcon as RotateRight,
+  HomeIcon,
+  ExternalLinkSquareAltIcon,
+  ExclamationCircleIcon,
+  EllipsisVIcon,
+  EditIcon,
 };

src/components/LibraryCopy/BreadcrumbContainer.tsx

@@ -1,5 +1,5 @@
 import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core";
-import HomeIcon from "@patternfly/react-icons/dist/esm/icons/home-icon";
+import { HomeIcon } from "../Icons";
 
 const BreadcrumbContainer = ({
   path,

src/components/LibraryCopy/FolderCard.tsx

@@ -7,9 +7,8 @@ import {
 } from "@patternfly/react-core";
 import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
-import FaFolder from "@patternfly/react-icons/dist/esm/icons/folder-icon";
-
-import ExternalLinkSquareIcon from "@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon";
+import { FolderIcon as FaFolder } from "../Icons";
+import { ExternalLinkSquareAltIcon } from "../Icons";
 import useLongPress, { elipses } from "./utils";
 import { fetchAuthenticatedFeed, fetchPublicFeed } from "../Feeds/utilties";
 
@@ -74,7 +73,7 @@ function FolderCard({
             <span>
               <Link to={`/feeds/${data?.feed?.data.id}?type=${data?.type}`}>
                 {" "}
-                <ExternalLinkSquareIcon />
+                <ExternalLinkSquareAltIcon />
               </Link>
             </span>
           ) : null,

src/components/LibraryCopy/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
-
 import ReactJson from "react-json-view";
 import {
   Button,
@@ -21,7 +20,6 @@ import {
 } from "@patternfly/react-core";
 import { Typography } from "antd";
 import { debounce } from "lodash";
-
 import { useLocation, useNavigate } from "react-router";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import WrapperConnect from "../Wrapper";
@@ -32,7 +30,7 @@ import { SpinContainer, EmptyStateComponent } from "../Common";
 import BreadcrumbContainer from "./BreadcrumbContainer";
 import { LibraryProvider } from "./context/";
 import { InfoIcon } from "../Common";
-import FaUpload from "@patternfly/react-icons/dist/esm/icons/upload-icon";
+import { UploadIcon as FaUpload } from "../Icons";
 import type { AxiosProgressEvent, AxiosResponse } from "axios";
 import { useCookieToken } from "../Common";
 import { useTypedSelector } from "../../store/hooks";

src/components/LibrarySearch/index.tsx

@@ -4,10 +4,8 @@ import { useNavigate } from "react-router";
 import { useQuery } from "@tanstack/react-query";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
-
 import WrapperConnect from "../Wrapper";
 import { LibraryProvider } from "../LibraryCopy/context";
-
 import Browser from "../LibraryCopy/Browser";
 import { InfoIcon } from "../Common";
 import {
@@ -19,7 +17,7 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
 } from "@patternfly/react-core";
-import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
+import { CubesIcon } from "../Icons";
 import { SpinContainer } from "../Common";
 import { find } from "../../api/filesystem";
 import Cart from "../LibraryCopy/Cart";

src/components/Login/index.tsx

@@ -9,7 +9,7 @@ import {
   LoginMainFooterBandItem,
   LoginPage,
 } from "@patternfly/react-core";
-import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
+import { ExclamationCircleIcon } from "../Icons";
 import queryString from "query-string";
 import React from "react";
 import { useCookies } from "react-cookie";

src/components/NiivueDatasetViewer/components/Drawer.tsx

@@ -12,7 +12,7 @@ import styles from "./Drawer.module.css";
 import BackgroundColor from "@patternfly/react-styles/css/utilities/BackgroundColor/BackgroundColor";
 import { css } from "@patternfly/react-styles";
 import Sizing from "@patternfly/react-styles/css/utilities/Sizing/sizing";
-import { EllipsisVIcon } from "@patternfly/react-icons";
+import { EllipsisVIcon } from "../../Icons";
 
 /**
  * A drawer which smushes the main content.

src/components/NiivueDatasetViewer/components/FeedButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Tooltip } from "@patternfly/react-core";
-import MdCallSplit from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+import { CodeBranchIcon as MdCallSplit } from "../../Icons";
 import React from "react";
 import { useNavigate } from "react-router";
 import { Feed } from "@fnndsc/chrisapi";

src/components/NodeDetails/NodeDetails.css

@@ -53,33 +53,6 @@
   margin: 0 0.5em 0 0;
 }
 
-.node-block .node-details__title {
-  display: flex;
-  margin: 0.5em auto;
-}
-
-.node-block .node-details__title--button {
-  margin-left: auto;
-}
-
-.node-block .node-details__title--button .pf-m-start {
-  margin-right: 0px;
-}
-
-.node-block .node-details__title--button .pf-m-start svg {
-  height: 16px;
-  width: 16px;
-}
-
-.node-block .node-details__title--formInput {
-  --pf-c-form-control--Width: 30%;
-  margin-right: 1em;
-}
-
-.node-block .node-details__title--formButton {
-  margin-right: 1em;
-}
-
 .node-block .node-details__grid {
   margin-bottom: 0.5em;
 }

src/components/NodeDetails/NodeDetails.tsx

@@ -145,10 +145,7 @@ const NodeDetails: React.FC = () => {
           <FeedNote />
         ) : (
           <>
-            <div className="node-details__title">
-              <PluginTitle />
-            </div>
-
+            <PluginTitle />
             <Grid className="node-details__grid">
               {renderGridItem("Status", <StatusTitle />)}
             </Grid>