Abstract out SidebarCloseButton (#762)

aws · Jan 23, 2025 · 281ffa7 · 281ffa7
1 parent ca5680e
commit 281ffa7
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 86 deletions.
diff --git a/packages/graph-explorer/src/core/StateProvider/userPreferences.ts b/packages/graph-explorer/src/core/StateProvider/userPreferences.ts
@@ -1,5 +1,6 @@
-import { atom, DefaultValue, selectorFamily } from "recoil";
+import { atom, DefaultValue, selectorFamily, useSetRecoilState } from "recoil";
 import localForageEffect from "./localForageEffect";
+import { useCallback } from "react";
 
 export type ShapeStyle =
   | "rectangle"
@@ -212,3 +213,13 @@ export const userLayoutAtom = atom<UserPreferences["layout"]>({
   },
   effects: [localForageEffect()],
 });
+
+export function useCloseSidebar() {
+  const setUserLayout = useSetRecoilState(userLayoutAtom);
+  return useCallback(() => {
+    setUserLayout(prev => ({
+      ...prev,
+      activeSidebarItem: null,
+    }));
+  }, [setUserLayout]);
+}
diff --git a/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.tsx b/packages/graph-explorer/src/modules/EdgesStyling/EdgesStyling.tsx
@@ -5,24 +5,22 @@ import {
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
-  PanelHeaderCloseButtonProps,
   PanelTitle,
 } from "@/components";
 import { useDisplayEdgeTypeConfigs } from "@/core";
 import useTranslations from "@/hooks/useTranslations";
 import SingleEdgeStyling from "./SingleEdgeStyling";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type EdgesStylingProps = Pick<PanelHeaderCloseButtonProps, "onClose"> & {
+export type EdgesStylingProps = {
   onEdgeCustomize(edgeType?: string): void;
   customizeEdgeType?: string;
 };
 
-const EdgesStyling = ({
+function EdgesStyling({
   customizeEdgeType,
   onEdgeCustomize,
-  onClose,
-}: EdgesStylingProps) => {
+}: EdgesStylingProps) {
   const etConfigs = useDisplayEdgeTypeConfigs().values().toArray();
   const t = useTranslations();
 
@@ -31,7 +29,7 @@ const EdgesStyling = ({
       <PanelHeader>
         <PanelTitle>{t("edges-styling.title")}</PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent className="flex flex-col gap-2">
@@ -53,6 +51,6 @@ const EdgesStyling = ({
       </PanelContent>
     </Panel>
   );
-};
+}
 
 export default EdgesStyling;
diff --git a/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.tsx b/packages/graph-explorer/src/modules/EntitiesFilter/EntitiesFilter.tsx
@@ -1,21 +1,18 @@
-import type { PanelHeaderCloseButtonProps } from "@/components";
 import {
   CheckboxList,
   Divider,
   Panel,
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
   PanelTitle,
 } from "@/components";
 import useTranslations from "@/hooks/useTranslations";
 import useFiltersConfig from "./useFiltersConfig";
 import { PropsWithChildren } from "react";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type EntitiesFilterProps = Pick<PanelHeaderCloseButtonProps, "onClose">;
-
-const EntitiesFilter = ({ onClose }: EntitiesFilterProps) => {
+function EntitiesFilter() {
   const t = useTranslations();
 
   const {
@@ -34,7 +31,7 @@ const EntitiesFilter = ({ onClose }: EntitiesFilterProps) => {
       <PanelHeader>
         <PanelTitle>Entities Filter</PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent>
@@ -64,7 +61,7 @@ const EntitiesFilter = ({ onClose }: EntitiesFilterProps) => {
       </PanelContent>
     </Panel>
   );
-};
+}
 
 function CheckboxListContainer(props: PropsWithChildren) {
   return <div className="w-full px-3 py-2">{props.children}</div>;

diff --git a/packages/graph-explorer/src/modules/EntitiesFilter/index.ts b/packages/graph-explorer/src/modules/EntitiesFilter/index.ts
@@ -1,2 +1 @@
 export { default } from "./EntitiesFilter";
-export type { EntitiesFilterProps } from "./EntitiesFilter";
diff --git a/packages/graph-explorer/src/modules/EntityDetails/EntityDetails.tsx b/packages/graph-explorer/src/modules/EntityDetails/EntityDetails.tsx
@@ -1,13 +1,11 @@
 import { useRecoilState } from "recoil";
-import type { PanelHeaderCloseButtonProps } from "@/components";
 import {
   AutoFitLeftIcon,
   Panel,
   PanelContent,
   PanelHeader,
   PanelHeaderActionButton,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
   PanelHeaderDivider,
   PanelTitle,
 } from "@/components";
@@ -17,10 +15,9 @@ import { userLayoutAtom } from "@/core/StateProvider/userPreferences";
 import EdgeDetail from "./EdgeDetail";
 import NodeDetail from "./NodeDetail";
 import { useSelectedDisplayEdges, useSelectedDisplayVertices } from "@/core";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type EntityDetailsProps = Pick<PanelHeaderCloseButtonProps, "onClose">;
-
-const EntityDetails = ({ onClose }: EntityDetailsProps) => {
+function EntityDetails() {
   const [userLayout, setUserLayout] = useRecoilState(userLayoutAtom);
   const selectedNodes = useSelectedDisplayVertices();
   const selectedNode = selectedNodes[0];
@@ -47,7 +44,7 @@ const EntityDetails = ({ onClose }: EntityDetailsProps) => {
             }
           />
           <PanelHeaderDivider />
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent>
@@ -74,6 +71,6 @@ const EntityDetails = ({ onClose }: EntityDetailsProps) => {
       </PanelContent>
     </Panel>
   );
-};
+}
 
 export default EntityDetails;
diff --git a/packages/graph-explorer/src/modules/EntityDetails/index.ts b/packages/graph-explorer/src/modules/EntityDetails/index.ts
@@ -1,2 +1 @@
 export { default } from "./EntityDetails";
-export type { EntityDetailsProps } from "./EntityDetails";
diff --git a/packages/graph-explorer/src/modules/Namespaces/Namespaces.tsx b/packages/graph-explorer/src/modules/Namespaces/Namespaces.tsx
@@ -4,8 +4,6 @@ import {
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
-  PanelHeaderCloseButtonProps,
   PanelHeaderDivider,
   PanelTitle,
   Select,
@@ -14,10 +12,9 @@ import { useConfiguration } from "@/core";
 import CommonPrefixes from "./CommonPrefixes";
 import GeneratedPrefixes from "./GeneratedPrefixes";
 import UserPrefixes from "./UserPrefixes";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type EdgesStylingProps = Pick<PanelHeaderCloseButtonProps, "onClose">;
-
-const Namespaces = ({ onClose }: EdgesStylingProps) => {
+function Namespaces() {
   const config = useConfiguration();
   const [nsType, setNsType] = useState("auto");
 
@@ -54,12 +51,8 @@ const Namespaces = ({ onClose }: EdgesStylingProps) => {
             noMargin={true}
             size="sm"
           />
-          {onClose ? (
-            <>
-              <PanelHeaderDivider />
-              <PanelHeaderCloseButton onClose={onClose} />
-            </>
-          ) : null}
+          <PanelHeaderDivider />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
 
@@ -70,6 +63,6 @@ const Namespaces = ({ onClose }: EdgesStylingProps) => {
       </PanelContent>
     </Panel>
   );
-};
+}
 
 export default Namespaces;
diff --git a/packages/graph-explorer/src/modules/NodeExpand/NodeExpand.tsx b/packages/graph-explorer/src/modules/NodeExpand/NodeExpand.tsx
@@ -1,11 +1,9 @@
 import { useRecoilValue } from "recoil";
-import type { PanelHeaderCloseButtonProps } from "@/components";
 import {
   Panel,
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
   PanelTitle,
 } from "@/components";
 import GraphIcon from "@/components/icons/GraphIcon";
@@ -14,10 +12,9 @@ import { edgesSelectedIdsAtom } from "@/core/StateProvider/edges";
 import useTranslations from "@/hooks/useTranslations";
 import NodeExpandContent from "./NodeExpandContent";
 import { useSelectedDisplayVertices } from "@/core";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type NodeExpandProps = Pick<PanelHeaderCloseButtonProps, "onClose">;
-
-const NodeExpand = ({ onClose }: NodeExpandProps) => {
+function NodeExpand() {
   const t = useTranslations();
   const edgesSelectedIds = useRecoilValue(edgesSelectedIdsAtom);
   const selectedNodes = useSelectedDisplayVertices();
@@ -28,7 +25,7 @@ const NodeExpand = ({ onClose }: NodeExpandProps) => {
       <PanelHeader>
         <PanelTitle>Expand</PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent>
@@ -59,6 +56,6 @@ const NodeExpand = ({ onClose }: NodeExpandProps) => {
       </PanelContent>
     </Panel>
   );
-};
+}
 
 export default NodeExpand;
diff --git a/packages/graph-explorer/src/modules/NodeExpand/index.ts b/packages/graph-explorer/src/modules/NodeExpand/index.ts
@@ -1,2 +1 @@
 export { default } from "./NodeExpand";
-export type { NodeExpandProps } from "./NodeExpand";
diff --git a/packages/graph-explorer/src/modules/NodesStyling/NodesStyling.tsx b/packages/graph-explorer/src/modules/NodesStyling/NodesStyling.tsx
@@ -4,25 +4,23 @@ import {
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
-  PanelHeaderCloseButtonProps,
   PanelTitle,
 } from "@/components";
 import { useDisplayVertexTypeConfigs } from "@/core";
 import useTranslations from "@/hooks/useTranslations";
 import SingleNodeStyling from "./SingleNodeStyling";
 import { Fragment } from "react/jsx-runtime";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type NodesStylingProps = Pick<PanelHeaderCloseButtonProps, "onClose"> & {
+export type NodesStylingProps = {
   onNodeCustomize(nodeType?: string): void;
   customizeNodeType?: string;
 };
 
-const NodesStyling = ({
+function NodesStyling({
   customizeNodeType,
   onNodeCustomize,
-  onClose,
-}: NodesStylingProps) => {
+}: NodesStylingProps) {
   const vtConfigs = useDisplayVertexTypeConfigs().values().toArray();
   const t = useTranslations();
 
@@ -31,7 +29,7 @@ const NodesStyling = ({
       <PanelHeader>
         <PanelTitle>{t("nodes-styling.title")}</PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent className="gap-2">
@@ -53,6 +51,6 @@ const NodesStyling = ({
       </PanelContent>
     </Panel>
   );
-};
+}
 
 export default NodesStyling;
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/SearchSidebar.tsx b/packages/graph-explorer/src/modules/SearchSidebar/SearchSidebar.tsx
@@ -3,24 +3,18 @@ import {
   PanelContent,
   PanelHeader,
   PanelHeaderActions,
-  PanelHeaderCloseButton,
-  PanelHeaderCloseButtonProps,
   PanelTitle,
 } from "@/components";
 import { FilterSearchTabContent } from "./FilterSearchTabContent";
+import { SidebarCloseButton } from "../SidebarCloseButton";
 
-export type SearchSidebarPanelProps = Pick<
-  PanelHeaderCloseButtonProps,
-  "onClose"
->;
-
-export function SearchSidebarPanel({ onClose }: SearchSidebarPanelProps) {
+export function SearchSidebarPanel() {
   return (
     <Panel variant="sidebar">
       <PanelHeader>
         <PanelTitle>Search</PanelTitle>
         <PanelHeaderActions>
-          <PanelHeaderCloseButton onClose={onClose} />
+          <SidebarCloseButton />
         </PanelHeaderActions>
       </PanelHeader>
       <PanelContent>

diff --git a/packages/graph-explorer/src/modules/SidebarCloseButton.tsx b/packages/graph-explorer/src/modules/SidebarCloseButton.tsx
@@ -0,0 +1,8 @@
+import { PanelHeaderCloseButton } from "@/components";
+import { useCloseSidebar } from "@/core";
+
+export function SidebarCloseButton() {
+  const closeSidebar = useCloseSidebar();
+
+  return <PanelHeaderCloseButton onClose={closeSidebar} />;
+}
diff --git a/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx b/packages/graph-explorer/src/workspaces/GraphExplorer/GraphExplorer.tsx
@@ -60,13 +60,6 @@ const GraphExplorer = () => {
 
   const filteredEntitiesCount = useRecoilValue(totalFilteredCount);
 
-  const closeSidebar = useCallback(() => {
-    setUserLayout(prev => ({
-      ...prev,
-      activeSidebarItem: null,
-    }));
-  }, [setUserLayout]);
-
   const toggleSidebar = useCallback(
     (item: SidebarItems) => () => {
       setUserLayout(prev => {
@@ -266,35 +259,23 @@ const GraphExplorer = () => {
               : userLayout.activeSidebarItem !== null
           }
         >
-          {userLayout.activeSidebarItem === "search" && (
-            <SearchSidebarPanel onClose={closeSidebar} />
-          )}
-          {userLayout.activeSidebarItem === "details" && (
-            <EntityDetails onClose={closeSidebar} />
-          )}
-          {userLayout.activeSidebarItem === "expand" && (
-            <NodeExpand onClose={closeSidebar} />
-          )}
-          {userLayout.activeSidebarItem === "filters" && (
-            <EntitiesFilter onClose={closeSidebar} />
-          )}
+          {userLayout.activeSidebarItem === "search" && <SearchSidebarPanel />}
+          {userLayout.activeSidebarItem === "details" && <EntityDetails />}
+          {userLayout.activeSidebarItem === "expand" && <NodeExpand />}
+          {userLayout.activeSidebarItem === "filters" && <EntitiesFilter />}
           {userLayout.activeSidebarItem === "nodes-styling" && (
             <NodesStyling
-              onClose={closeSidebar}
               customizeNodeType={customizeNodeType}
               onNodeCustomize={setCustomizeNodeType}
             />
           )}
           {userLayout.activeSidebarItem === "edges-styling" && (
             <EdgesStyling
-              onClose={closeSidebar}
               customizeEdgeType={customizeEdgeType}
               onEdgeCustomize={setCustomizeEdgeType}
             />
           )}
-          {userLayout.activeSidebarItem === "namespaces" && (
-            <Namespaces onClose={closeSidebar} />
-          )}
+          {userLayout.activeSidebarItem === "namespaces" && <Namespaces />}
         </Workspace.SideBar.Content>
       </Workspace.SideBar>
     </Workspace>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default } from "./EntitiesFilter";
		export type { EntitiesFilterProps } from "./EntitiesFilter";
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default } from "./EntityDetails";
		export type { EntityDetailsProps } from "./EntityDetails";
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default } from "./NodeExpand";
		export type { NodeExpandProps } from "./NodeExpand";