From 81c44ab227998e61410eda21396d2ef3cba0142c Mon Sep 17 00:00:00 2001
From: tplevko <tplevko@redhat.com>
Date: Mon, 2 Sep 2024 09:43:32 +0200
Subject: [PATCH] Add sidebar width preserve in local storage

---
 .../ui/src/components/Visualization/Canvas/Canvas.tsx     | 8 ++++++++
 .../components/Visualization/Canvas/canvas.defaults.ts    | 1 +
 packages/ui/src/models/local-storage-keys.ts              | 1 +
 3 files changed, 10 insertions(+)

diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
index cc162208b..289e998f3 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -48,6 +48,10 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
   const [selectedNode, setSelectedNode] = useState<CanvasNode | undefined>(undefined);
   const [nodes, setNodes] = useState<CanvasNode[]>([]);
   const [activeLayout, setActiveLayout] = useLocalStorage(LocalStorageKeys.CanvasLayout, CanvasDefaults.DEFAULT_LAYOUT);
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage(
+    LocalStorageKeys.CanvasSidebarWidth,
+    CanvasDefaults.DEFAULT_SIDEBAR_WIDTH,
+  );
 
   /** Context to interact with the Canvas catalog */
   const catalogModalContext = useContext(CatalogModalContext);
@@ -206,6 +210,10 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
   return (
     <TopologyView
+      defaultSideBarSize={sidebarWidth + 'px'}
+      onSideBarResize={(width) => {
+        setSidebarWidth(width);
+      }}
       sideBarResizable
       sideBarOpen={isSidebarOpen}
       sideBar={<CanvasSideBar selectedNode={selectedNode} onClose={handleCloseSideBar} />}
diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
index b4f26feeb..ca6795c8d 100644
--- a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
+++ b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
@@ -6,4 +6,5 @@ export class CanvasDefaults {
   static readonly DEFAULT_NODE_SHAPE = NodeShape.rect;
   static readonly DEFAULT_NODE_DIAMETER = 75;
   static readonly DEFAULT_GROUP_PADDING = 50;
+  static readonly DEFAULT_SIDEBAR_WIDTH = 500;
 }
diff --git a/packages/ui/src/models/local-storage-keys.ts b/packages/ui/src/models/local-storage-keys.ts
index 33f025cc9..cc83648f8 100644
--- a/packages/ui/src/models/local-storage-keys.ts
+++ b/packages/ui/src/models/local-storage-keys.ts
@@ -2,6 +2,7 @@ export const enum LocalStorageKeys {
   SourceCode = 'sourceCode',
   CatalogLayout = 'catalogLayout',
   CanvasLayout = 'canvasLayout',
+  CanvasSidebarWidth = 'canvasSidebarWidth',
   NavigationExpanded = 'navigationExpanded',
   SelectedCatalog = 'selectedCatalog',
   Settings = 'settings',