Merge pull request #1400 from chhsiao1981/refactor-drawer

replace drawerSlice with reducers.drawer

Author: chhsiao1981

src/components/AddPipeline/AddPipeline.tsx

@@ -11,11 +11,12 @@ import { SpinContainer } from "../Common";
 import Pipelines from "../PipelinesCopy";
 import { PipelineContext, Types } from "../PipelinesCopy/context";
 
-const AddPipeline = ({
-  addNodeLocally,
-}: {
+type Props = {
   addNodeLocally: (instance: PluginInstance | PluginInstance[]) => void;
-}) => {
+  isStaff: boolean;
+};
+export default (props: Props) => {
+  const { addNodeLocally, isStaff } = props;
   const { state, dispatch } = useContext(PipelineContext);
   const { pipelineToAdd, selectedPipeline, computeInfo, titleInfo } = state;
   const reactDispatch = useAppDispatch();
@@ -155,7 +156,7 @@ const AddPipeline = ({
         </Fragment>,
       ]}
     >
-      <Pipelines />
+      <Pipelines isStaff={isStaff} />
       {mutation.isError || mutation.isSuccess || mutation.isPending ? (
         <div id="indicators">
           {mutation.isError && (
@@ -170,5 +171,3 @@ const AddPipeline = ({
     </Modal>
   );
 };
-
-export default AddPipeline;

src/components/ComputePage/index.tsx

@@ -1,6 +1,7 @@
 import type { ThunkModuleToFunc, UseThunk } from "@chhsiao1981/use-thunk";
 import { PageSection } from "@patternfly/react-core";
 import { useEffect } from "react";
+import type * as DoDrawer from "../../reducers/drawer";
 import type * as DoUI from "../../reducers/ui";
 import type * as DoUser from "../../reducers/user";
 import Wrapper from "../Wrapper";
@@ -9,21 +10,28 @@ import Title from "./Title";
 
 type TDoUI = ThunkModuleToFunc<typeof DoUI>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
+type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
 
 type Props = {
   useUI: UseThunk<DoUI.State, TDoUI>;
   useUser: UseThunk<DoUser.State, TDoUser>;
+  useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
 };
 
 export default (props: Props) => {
-  const { useUI, useUser } = props;
+  const { useUI, useUser, useDrawer } = props;
 
   useEffect(() => {
     document.title = "Compute Catalog";
   }, []);
 
   return (
-    <Wrapper useUI={useUI} useUser={useUser} titleComponent={Title}>
+    <Wrapper
+      useUI={useUI}
+      useUser={useUser}
+      useDrawer={useDrawer}
+      title={Title}
+    >
       <PageSection>
         <ComputeCatalog />
       </PageSection>

src/components/CreateFeed/utils.ts

@@ -1,23 +1,17 @@
-import type {
-  Pipeline,
-  PluginInstance,
-  PluginMeta,
-  Tag,
-} from "@fnndsc/chrisapi";
+import type { Pipeline, PluginMeta, Tag } from "@fnndsc/chrisapi";
 import type { EventDataNode } from "rc-tree/lib/interface";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { fetchResource, fetchResources } from "../../api/common";
-import { fetchFolders } from "../NewLibrary";
-import type { ChRISFeed, DataBreadcrumb } from "./types/feed";
-
-import constants from "../../datasets/constants";
-
 import type {
   NodeInfo,
   PipelineDefaultParameters,
   Piping,
 } from "../../api/types";
 
+import constants from "../../datasets/constants";
+import fetchFolders from "../NewLibrary/utils/fetchFolders";
+import type { ChRISFeed, DataBreadcrumb } from "./types/feed";
+
 export const computeWorkflowNodesInfo = (
   pipings: Piping[],
   params: PipelineDefaultParameters[],

src/components/DarkTheme/useTheme.tsx

@@ -6,10 +6,10 @@ import {
   useReducer,
 } from "react";
 
-interface ThemeContextType {
+type ThemeContextType = {
   isDarkTheme: boolean;
   toggleTheme: () => void;
-}
+};
 
 const THEME_STORAGE_KEY = "themePreference";
 
@@ -40,10 +40,10 @@ const themeReducer = (
   }
 };
 
-type ThemeContextProviderProps = {
+type Props = {
   children: ReactNode;
 };
-const ThemeContextProvider = (props: ThemeContextProviderProps) => {
+const ThemeContextProvider = (props: Props) => {
   const { children } = props;
   const [themeState, dispatch] = useReducer(themeReducer, {
     isDarkTheme: localStorage.getItem(THEME_STORAGE_KEY) !== "light",

src/components/Dashboard/index.tsx

@@ -11,8 +11,6 @@ import {
   PageSection,
 } from "@patternfly/react-core";
 import { useEffect } from "react";
-import BUILD_VERSION from "../../getBuildVersion";
-import { InfoSection } from "../Common";
 import Wrapper from "../Wrapper";
 import FeedGraph from "./FeedGraph";
 import "./dashboard.css";
@@ -22,6 +20,7 @@ import {
   type UseThunk,
 } from "@chhsiao1981/use-thunk";
 import { useNavigate } from "react-router";
+import type * as DoDrawer from "../../reducers/drawer";
 import type * as DoUI from "../../reducers/ui";
 import * as DoUser from "../../reducers/user";
 import Title from "./Title";
@@ -33,14 +32,16 @@ import {
 
 type TDoUI = ThunkModuleToFunc<typeof DoUI>;
 type TDoUser = ThunkModuleToFunc<typeof DoUser>;
+type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
 
 type Props = {
   useUI: UseThunk<DoUI.State, TDoUI>;
   useUser: UseThunk<DoUser.State, TDoUser>;
+  useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
 };
 
 export default (props: Props) => {
-  const { useUI, useUser } = props;
+  const { useUI, useUser, useDrawer } = props;
   const [classStateUser, _] = useUser;
   const user = getState(classStateUser) || DoUser.defaultState;
   const { isLoggedIn } = user;
@@ -57,7 +58,12 @@ export default (props: Props) => {
   }, [isLoggedIn]);
 
   return (
-    <Wrapper titleComponent={Title} useUI={useUI} useUser={useUser}>
+    <Wrapper
+      title={Title}
+      useUI={useUI}
+      useUser={useUser}
+      useDrawer={useDrawer}
+    >
       <PageSection>
         <Grid hasGutter>
           <GridItem span={12}>

src/components/FeedDetails/ButtonContainer.tsx

@@ -0,0 +1,39 @@
+import {
+  getRootID,
+  type ThunkModuleToFunc,
+  type UseThunk,
+} from "@chhsiao1981/use-thunk";
+import type { ReactNode } from "react";
+import type * as DoDrawer from "../../reducers/drawer";
+import type { ActionType } from "../../reducers/drawer";
+import { ButtonWithTooltip } from "../Feeds/DrawerUtils";
+
+type TDoDrawer = ThunkModuleToFunc<typeof DoDrawer>;
+
+type Props = {
+  actionType: ActionType;
+  icon: ReactNode;
+  title: string;
+  isDisabled: boolean;
+
+  useDrawer: UseThunk<DoDrawer.State, TDoDrawer>;
+};
+
+export default (props: Props) => {
+  const { actionType, icon, title, isDisabled, useDrawer } = props;
+  const [classStateDrawer, doDrawer] = useDrawer;
+  const drawerID = getRootID(classStateDrawer);
+  return (
+    <ButtonWithTooltip
+      position="bottom"
+      className="button-style large-button"
+      content={<span>{title}</span>}
+      Icon={icon}
+      variant="primary"
+      onClick={() => {
+        doDrawer.toggle(drawerID, actionType);
+      }}
+      isDisabled={isDisabled}
+    />
+  );
+};