Merge pull request FNNDSC#1117 from PintoGideon/Improve-Iconography

Improve Iconography in the Feed Table and the Feed Details Page
PintoGideon · Mar 15, 2024 · 11b7e49 · 11b7e49
2 parents bb306c7 + 228cc89
commit 11b7e49
Show file tree

Hide file tree

Showing 12 changed files with 359 additions and 135 deletions.
diff --git a/src/components/AddNode/AddNode.tsx b/src/components/AddNode/AddNode.tsx
@@ -1,31 +1,29 @@
-import React, { useContext, useEffect } from "react";
-import { Dispatch } from "redux";
-import { connect } from "react-redux";
-
+import type { Plugin, PluginInstance } from "@fnndsc/chrisapi";
 import {
-  Wizard,
   Button,
-  ModalVariant,
   Modal,
+  ModalVariant,
+  Wizard,
   WizardHeader,
   WizardStep,
   useWizardContext,
 } from "@patternfly/react-core";
-import { PlusButtonIcon } from "../../icons";
-import GuidedConfig from "./GuidedConfig";
-import BasicConfiguration from "./BasicConfiguration";
-import { addNodeRequest } from "../../store/pluginInstance/actions";
+import React, { useContext, useEffect } from "react";
+import { connect, useDispatch } from "react-redux";
+import { Dispatch } from "redux";
+import { catchError } from "../../api/common";
+import { useTypedSelector } from "../../store/hooks";
 import { getNodeOperations, getParams } from "../../store/plugin/actions";
+import { addNodeRequest } from "../../store/pluginInstance/actions";
+import type { ApplicationState } from "../../store/root/applicationState";
 import { getRequiredObject } from "../CreateFeed/createFeedHelper";
-import { useTypedSelector } from "../../store/hooks";
-import { useDispatch } from "react-redux";
+import { AddIcon } from "../Icons";
+import BasicConfiguration from "./BasicConfiguration";
+import GuidedConfig from "./GuidedConfig";
+import "./add-node.css";
 import { AddNodeContext } from "./context";
-import { Types } from "./types";
 import type { AddNodeProps } from "./types";
-import type { Plugin, PluginInstance } from "@fnndsc/chrisapi";
-import type { ApplicationState } from "../../store/root/applicationState";
-import { catchError } from "../../api/common";
-import "./add-node.css";
+import { Types } from "./types";
 
 const AddNode = ({
   selectedPlugin,
@@ -152,7 +150,7 @@ const AddNode = ({
 
   return (
     <>
-      <Button icon={<PlusButtonIcon />} type="button" onClick={toggleOpen}>
+      <Button icon={<AddIcon />} type="button" onClick={toggleOpen}>
         Add a Child Node <span style={{ padding: "2px" }}>( C )</span>
       </Button>
       <Modal

diff --git a/src/components/AddPipeline/AddPipeline.tsx b/src/components/AddPipeline/AddPipeline.tsx
@@ -4,7 +4,6 @@ import { Alert } from "antd";
 import React, { useContext } from "react";
 import { useDispatch } from "react-redux";
 import ChrisAPIClient from "../../api/chrisapiclient";
-import { PlusButtonIcon } from "../../icons";
 import { useTypedSelector } from "../../store/hooks";
 import { getNodeOperations } from "../../store/plugin/actions";
 import {
@@ -13,6 +12,7 @@ import {
 } from "../../store/pluginInstance/actions";
 import { getPluginInstanceStatusRequest } from "../../store/resources/actions";
 import { SpinContainer } from "../Common";
+import { AddIcon } from "../Icons";
 import Pipelines from "../PipelinesCopy";
 import { PipelineContext, Types } from "../PipelinesCopy/context";
 
@@ -123,7 +123,7 @@ const AddPipeline = () => {
 
   return (
     <React.Fragment>
-      <Button icon={<PlusButtonIcon />} onClick={handleToggle} type="button">
+      <Button icon={<AddIcon />} onClick={handleToggle} type="button">
         Add a Pipeline <span style={{ padding: "2px" }}>( P )</span>
       </Button>
       <Modal

diff --git a/src/components/AddTsNode/index.tsx b/src/components/AddTsNode/index.tsx
@@ -1,14 +1,14 @@
-import React from "react";
+import type { Plugin } from "@fnndsc/chrisapi";
 import { Button } from "@patternfly/react-core";
-import { useDispatch } from "react-redux";
 import { Popover } from "antd";
-import FaCodeBranch from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
+import React from "react";
+import { useDispatch } from "react-redux";
+import ChrisAPIClient from "../../api/chrisapiclient";
 import { useTypedSelector } from "../../store/hooks";
+import { getNodeOperations } from "../../store/plugin/actions";
 import { switchTreeMode } from "../../store/tsplugins/actions";
+import { CodeBranchIcon } from "../Icons";
 import GraphNode from "./ParentContainer";
-import type { Plugin } from "@fnndsc/chrisapi";
-import ChrisAPIClient from "../../api/chrisapiclient";
-import { getNodeOperations } from "../../store/plugin/actions";
 import "./graph-node.css";
 
 const GraphNodeContainer = () => {
@@ -60,7 +60,7 @@ const GraphNodeContainer = () => {
       onOpenChange={handleVisibleChange}
       trigger="click"
     >
-      <Button type="button" icon={<FaCodeBranch />}>
+      <Button type="button" icon={<CodeBranchIcon />}>
         Add a Graph Node{" "}
         <span style={{ padding: "2px", fontSize: "11px" }}>( G )</span>
       </Button>

diff --git a/src/components/CreateFeed/CreateFeed.tsx b/src/components/CreateFeed/CreateFeed.tsx
@@ -15,6 +15,7 @@ import { catchError } from "../../api/common";
 import { MainRouterContext } from "../../routes";
 import { useTypedSelector } from "../../store/hooks";
 import { AddNodeContext } from "../AddNode/context";
+import { CodeBranchIcon } from "../Icons";
 import PipelinesCopy from "../PipelinesCopy";
 import { PipelineContext } from "../PipelinesCopy/context";
 import BasicInformation from "./BasicInformation";
@@ -210,7 +211,11 @@ export default function CreateFeed() {
 
   return (
     <div>
-      <Button variant="primary" onClick={() => closeWizard()}>
+      <Button
+        icon={<CodeBranchIcon />}
+        variant="primary"
+        onClick={() => closeWizard()}
+      >
         Create Feed
       </Button>
       <Modal

diff --git a/src/components/DeleteNode/index.tsx b/src/components/DeleteNode/index.tsx
@@ -1,6 +1,5 @@
 import { PluginInstance } from "@fnndsc/chrisapi";
 import { Button, Modal, ModalVariant } from "@patternfly/react-core";
-import TrashIcon from "@patternfly/react-icons/dist/esm/icons/trash-icon";
 import { useMutation } from "@tanstack/react-query";
 import { Alert } from "antd";
 import { useEffect } from "react";
@@ -14,6 +13,7 @@ import {
 } from "../../store/pluginInstance/actions";
 import { getPluginInstanceStatusRequest } from "../../store/resources/actions";
 import { SpinContainer } from "../Common";
+import { DeleteIcon } from "../Icons";
 
 const DeleteNode = () => {
   const dispatch = useDispatch();
@@ -93,7 +93,7 @@ const DeleteNode = () => {
           selectedPlugin?.data.plugin_name === "pl-dircopy"
         }
         onClick={handleModalToggle}
-        icon={<TrashIcon />}
+        icon={<DeleteIcon />}
         variant="primary"
         type="button"
       >

diff --git a/src/components/DownloadNode/index.tsx b/src/components/DownloadNode/index.tsx
@@ -1,5 +1,4 @@
 import { Button } from "@patternfly/react-core";
-import FaDownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
 import { useMutation } from "@tanstack/react-query";
 import { Alert } from "antd";
 import { useEffect } from "react";
@@ -12,6 +11,7 @@ import {
 } from "../../store/pluginInstance/actions";
 import { getPluginInstanceStatusRequest } from "../../store/resources/actions";
 import { SpinContainer } from "../Common";
+import { ArchiveIcon } from "../Icons";
 
 function DownloadNode() {
   const { pluginInstances, selectedPlugin } = useTypedSelector(
@@ -95,7 +95,7 @@ function DownloadNode() {
         onClick={() => {
           mutation.mutate();
         }}
-        icon={<FaDownloadIcon />}
+        icon={<ArchiveIcon />}
       >
         Zip
       </Button>

diff --git a/src/components/FeedDetails/index.tsx b/src/components/FeedDetails/index.tsx
@@ -1,23 +1,23 @@
-import React, { ReactNode, useState } from "react";
 import { ToolbarItem } from "@patternfly/react-core";
 import { Badge } from "antd";
+import React, { ReactNode, useState } from "react";
+import { useDispatch } from "react-redux";
+import { fetchNote } from "../../api/common";
+import { setDrawerCurrentlyActive } from "../../store/drawer/actions";
+import { IDrawerState } from "../../store/drawer/types";
 import { useTypedSelector } from "../../store/hooks";
 import { ButtonWithTooltip } from "../Feeds/DrawerUtils";
 import { handleToggle } from "../Feeds/utilties";
-import { useDispatch } from "react-redux";
-import { IDrawerState } from "../../store/drawer/types";
-import FaFileIcon from "@patternfly/react-icons/dist/esm/icons/file-icon";
-import FaCodeBranch from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
-import FaBrainIcon from "@patternfly/react-icons/dist/esm/icons/brain-icon";
-import CommandLineIcon from "@patternfly/react-icons/dist/esm/icons/terminal-icon";
 import {
-  FolderOpenIcon,
-  PencilSquareIcon,
-  PhotoIcon,
-  EllipsisHorizontalCircleIcon,
-} from "@heroicons/react/24/solid";
-import { setDrawerCurrentlyActive } from "../../store/drawer/actions";
-import { fetchNote } from "../../api/common";
+  BrainIcon,
+  CodeBranchIcon,
+  FeedBrowserIcon,
+  DuplicateIcon as FolderTreeIcon,
+  NodeDetailsPanelIcon,
+  NoteEditIcon,
+  PreviewIcon,
+  TerminalIcon,
+} from "../Icons";
 import "./feed-details.css";
 
 const FeedDetails = () => {
@@ -48,8 +48,8 @@ const FeedDetails = () => {
       <DrawerActionsToolbar
         button={
           <ButtonContainer
-            title="Graph"
-            Icon={<FaCodeBranch />}
+            title="Feed Tree Panel"
+            Icon={<CodeBranchIcon />}
             action="graph"
             dispatch={dispatch}
             drawerState={drawerState}
@@ -61,16 +61,18 @@ const FeedDetails = () => {
       <DrawerActionsToolbar
         button={
           <ButtonContainer
-            title="Node"
+            title={
+              node ? "Configuration Panel" : note ? "Feed Note" : "Terminal"
+            }
             Icon={
               node ? (
-                <EllipsisHorizontalCircleIcon className="pf-v5-svg" />
+                <NodeDetailsPanelIcon />
               ) : note ? (
                 <>
-                  <PencilSquareIcon className="pf-v5-svg" />
+                  <NoteEditIcon />
                 </>
               ) : (
-                <CommandLineIcon className="pf-v5-svg" />
+                <TerminalIcon />
               )
             }
             action="node"
@@ -84,8 +86,8 @@ const FeedDetails = () => {
       <DrawerActionsToolbar
         button={
           <ButtonContainer
-            title="Directory"
-            Icon={<FolderOpenIcon className="pf-v5-svg" />}
+            title="Folder Directory Panel"
+            Icon={<FolderTreeIcon />}
             action="directory"
             dispatch={dispatch}
             drawerState={drawerState}
@@ -97,8 +99,8 @@ const FeedDetails = () => {
       <DrawerActionsToolbar
         button={
           <ButtonContainer
-            title="Files"
-            Icon={<FaFileIcon />}
+            title="Files Table Panel"
+            Icon={<FeedBrowserIcon />}
             action="files"
             dispatch={dispatch}
             drawerState={drawerState}
@@ -110,10 +112,8 @@ const FeedDetails = () => {
       <DrawerActionsToolbar
         button={
           <ButtonContainer
-            title="Preview"
-            Icon={
-              preview ? <PhotoIcon className="pf-v5-svg" /> : <FaBrainIcon />
-            }
+            title="Preview Panel"
+            Icon={preview ? <PreviewIcon /> : <BrainIcon />}
             action="preview"
             dispatch={dispatch}
             drawerState={drawerState}
@@ -127,7 +127,7 @@ const FeedDetails = () => {
           <ButtonWithTooltip
             className="button-style large-button"
             position="bottom"
-            content={!node && terminal ? "Node Details" : "Terminal"}
+            content={!node && terminal ? "Configuration Panel" : "Terminal"}
             onClick={() => {
               if (terminal) {
                 dispatch(setDrawerCurrentlyActive("node", "node"));
@@ -136,11 +136,7 @@ const FeedDetails = () => {
               }
             }}
             Icon={
-              !node && terminal ? (
-                <EllipsisHorizontalCircleIcon className="pf-v5-svg" />
-              ) : (
-                <CommandLineIcon className="pf-v5-svg" />
-              )
+              !node && terminal ? <NodeDetailsPanelIcon /> : <TerminalIcon />
             }
             isDisabled={false}
           />
@@ -153,7 +149,7 @@ const FeedDetails = () => {
             <ButtonWithTooltip
               className="button-style large-button"
               position="bottom"
-              content={!note ? "Feed Note" : "Node Details"}
+              content={!note ? "Feed Note" : "Configuration Panel"}
               onClick={() => {
                 if (note) {
                   dispatch(setDrawerCurrentlyActive("node", "node"));
@@ -163,10 +159,10 @@ const FeedDetails = () => {
               }}
               Icon={
                 !node && note ? (
-                  <EllipsisHorizontalCircleIcon className="pf-v5-svg" />
+                  <NodeDetailsPanelIcon />
                 ) : (
                   <>
-                    <PencilSquareIcon className="pf-v5-svg" />
+                    <NoteEditIcon />
                   </>
                 )
               }
@@ -181,17 +177,15 @@ const FeedDetails = () => {
           <ButtonWithTooltip
             className="button-style large-button"
             position="bottom"
-            content={preview ? "Xtk Viewer" : "Preview"}
+            content={preview ? "Visualization Panel" : "Preview Panel"}
             onClick={() => {
               if (preview) {
                 dispatch(setDrawerCurrentlyActive("preview", "xtk"));
               } else {
                 dispatch(setDrawerCurrentlyActive("preview", "preview"));
               }
             }}
-            Icon={
-              preview ? <FaBrainIcon /> : <PhotoIcon className="pf-v5-svg" />
-            }
+            Icon={preview ? <BrainIcon /> : <PreviewIcon />}
             isDisabled={false}
           />
         }