From 523657e534c4e7b46bfb97ae6201e7a1a54722f2 Mon Sep 17 00:00:00 2001
From: Mantvydas Deltuva <mantvydasdeltuva@gmail.com>
Date: Sun, 8 Sep 2024 00:45:07 +0300
Subject: [PATCH] MDE/PKFE-31 updated toolbar view

---
 .../components/toolbarView/toolbarGroup.tsx   | 38 ++++++++++++-------
 .../components/toolbarView/toolbarView.tsx    | 36 ++++++++++++------
 2 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx
index 031a267..1d62db3 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx
+++ b/app/front-end/src/features/editor/components/toolbarView/toolbarGroup.tsx
@@ -1,7 +1,8 @@
-import { List, useTheme } from '@mui/material';
+import { Box, List, useTheme } from '@mui/material';
 
 export interface ToolbarGroupProps {
-  children: React.ReactNode;
+  params: React.ReactNode;
+  buttons: React.ReactNode;
 }
 
 /**
@@ -25,24 +26,33 @@ export interface ToolbarGroupProps {
  * @param {React.ReactNode} children - The child elements to be displayed inside the list.
  * @returns {JSX.Element} The rendered List component.
  */
-export const ToolbarGroup: React.FC<ToolbarGroupProps> = ({ children }) => {
+export const ToolbarGroup: React.FC<ToolbarGroupProps> = ({ params, buttons }) => {
   const Theme = useTheme();
 
   return (
-    <List
+    <Box
       sx={{
-        height: '75%',
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateColumns: '30% 70%',
         bgcolor: Theme.palette.background.paper,
-        px: '1rem',
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: '1rem',
-        overflow: 'auto',
-        alignContent: 'flex-start',
       }}
     >
-      {children}
-    </List>
+      <Box sx={{ borderRight: `solid 2px ${Theme.palette.action.selected}` }}>{params}</Box>
+      <List
+        sx={{
+          pl: '1rem',
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: '1rem',
+          overflow: 'auto',
+          alignContent: 'flex-start',
+        }}
+      >
+        {buttons}
+      </List>
+    </Box>
   );
 };
diff --git a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx b/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
index 835a492..6768e78 100644
--- a/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
+++ b/app/front-end/src/features/editor/components/toolbarView/toolbarView.tsx
@@ -1,7 +1,5 @@
 import {
   ToolbarGroup,
-  ToolbarGroupItem,
-  ToolbarGroupItemProps,
   ToolbarGroupsSelector,
   ToolbarGroupsSelectorItem,
   ToolbarGroupsSelectorItemProps,
@@ -11,7 +9,13 @@ import {
   DownloadGroupButtons,
   MergeGroupButtons,
 } from '@/features/editor/components/toolbarView/toolbarGroupButtons';
-import { useMemo, useState } from 'react';
+import {
+  ApplyGroupParams,
+  DownloadGroupParams,
+  MergeGroupParams,
+} from '@/features/editor/components/toolbarView/toolbarGroupParams';
+import { ToolbarContextProvider } from '@/features/editor/stores';
+import React, { useMemo, useState } from 'react';
 
 /**
  * ToolbarView component manages and displays a set of toolbar groups and items.
@@ -54,26 +58,34 @@ export const ToolbarView: React.FC = () => {
     },
   ];
 
+  // Combine the params groups into a dictionary for easy access
+  const ToolbarGroupsParams: Record<string, React.ReactNode> = useMemo(
+    () => ({
+      download: <DownloadGroupParams />,
+      merge: <MergeGroupParams />,
+      apply: <ApplyGroupParams />,
+    }),
+    []
+  );
+
   // Combine the button groups into a dictionary for easy access
-  const ToolbarGroupsButtons: Record<string, ToolbarGroupItemProps[]> = useMemo(
+  const ToolbarGroupsButtons: Record<string, React.ReactNode> = useMemo(
     () => ({
-      download: DownloadGroupButtons,
-      merge: MergeGroupButtons,
-      apply: ApplyGroupButtons,
+      download: <DownloadGroupButtons />,
+      merge: <MergeGroupButtons />,
+      apply: <ApplyGroupButtons />,
     }),
     [DownloadGroupButtons, MergeGroupButtons, ApplyGroupButtons]
   );
 
   return (
-    <>
+    <ToolbarContextProvider>
       <ToolbarGroupsSelector>
         {ToolbarGroups.map((group, index) => (
           <ToolbarGroupsSelectorItem key={index} {...group} groupRef={selectedGroup} />
         ))}
       </ToolbarGroupsSelector>
-      <ToolbarGroup>
-        {ToolbarGroupsButtons[selectedGroup]?.map((button, index) => <ToolbarGroupItem key={index} {...button} />)}
-      </ToolbarGroup>
-    </>
+      <ToolbarGroup params={ToolbarGroupsParams[selectedGroup]} buttons={ToolbarGroupsButtons[selectedGroup]} />
+    </ToolbarContextProvider>
   );
 };