added group actions on region section

Author: sumn2u

client/src/RegionSelectorSidebarBox/RegionSelectorSidebarBox.test.js

@@ -8,7 +8,7 @@ describe("RegionSelectorSidebarBox", () => {
     {
       id: "1",
       color: "#ff0000",
-      locked: false,
+      locked: true,
       visible: true,
       minimized: false,
       name: "Region 1",
@@ -19,7 +19,7 @@ describe("RegionSelectorSidebarBox", () => {
       id: "2",
       color: "#00ff00",
       locked: true,
-      visible: false,
+      visible: true,
       minimized: true,
       name: "Region 2",
       highlighted: true,
@@ -96,4 +96,44 @@ describe("RegionSelectorSidebarBox", () => {
     });
   });
 
+  it("calls onChangeRegion when the visibility icon in the header is clicked", () => {
+    const visibleIconHeader = screen.getByTestId(
+      "VisibleIcon-header"
+    );
+
+    fireEvent.click(visibleIconHeader);
+
+    expect(mockOnChangeRegion).toHaveBeenCalledTimes(mockRegions.length);
+
+    mockRegions.forEach((region) => {
+      expect(mockOnChangeRegion).toHaveBeenCalledWith({
+        ...region,
+        visible: !region.visible,
+      });
+    });
+  });
+
+  it("calls onChangeRegion when the lock icon in the header is clicked", () => {
+    const lockIconHeader = screen.getByTestId(
+      "LockIcon-header"
+    );
+    fireEvent.click(lockIconHeader);
+    
+    expect(mockOnChangeRegion).toHaveBeenCalledTimes(4);
+    mockRegions.forEach((region) => {
+      expect(mockOnChangeRegion).toHaveBeenCalledWith({
+        ...region,
+        locked: !region.locked,
+      });
+    });
+  });
+
+  it("calls onDeleteRegion when the delete icon in the header is clicked", () => {
+    const deleteIconHeader = screen.getByTestId(
+      "DeleteIcon-header"
+    );
+    fireEvent.click(deleteIconHeader);
+    expect(mockOnDeleteRegion).toHaveBeenCalledTimes(4);
+  });
+
 });

client/src/RegionSelectorSidebarBox/index.jsx

@@ -81,7 +81,10 @@ const RowLayout = ({
   )
 }
 
-const RowHeader = () => {
+const RowHeader = ({ regions, onChangeRegion, onDeleteRegion }) => {
+  const visible = regions.find(r => r.visible === false) == null;
+  const locked = regions.find(r => r.locked === false) == null;
+  console.log(visible, locked)
   const {t} = useTranslation();
   return (
     <RowLayout
@@ -90,9 +93,61 @@ const RowHeader = () => {
       order={<ReorderIcon className="icon" />}
       name={<div style={{paddingLeft: 10}}>{t("desc.class")}</div>}
       area={<PieChartIcon className="icon" />}
-      trash={<TrashIcon className="icon" />}
-      lock={<LockIcon className="icon" />}
-      visible={<VisibleIcon className="icon" />}
+      trash={
+        <TrashIcon className="icon"  
+          onClick={() => {
+              regions.forEach(r => {
+                onDeleteRegion(r);
+              });
+          }} 
+          data-testid="DeleteIcon-header"
+        />}
+      lock={
+        locked === true ? (
+          <LockIcon
+            onClick={() => {
+              regions.forEach(r => {
+                onChangeRegion({ ...r, locked: false });
+              });
+            }}
+            className="icon"
+            data-testid="LockIcon-header"
+          />
+        ) : (
+          <UnlockIcon
+            onClick={() => {
+              regions.forEach(r => {
+                onChangeRegion({ ...r, locked: true });
+              });
+            }}
+            className="icon"
+            data-testid="UnlockIcon-header"
+          />
+        )    
+      }
+      visible={
+          visible ? (
+            <VisibleIcon
+              onClick={() => {
+                regions.forEach(r => {
+                  onChangeRegion({ ...r, visible: false });
+                });
+              }}
+              className="icon"
+              data-testid="VisibleIcon-header"
+            />
+          ) : (
+            <VisibleOffIcon
+              onClick={() => {
+                regions.forEach(r => {
+                  onChangeRegion({ ...r, visible: true });
+                });
+              }}
+              className="icon"
+              data-testid="InvisibleIcon-header"
+            />
+          )
+      }
     />
   )
 }
@@ -205,7 +260,11 @@ export const RegionSelectorSidebarBox = ({
         noScroll={true}
       >
         <ContainerDiv>
-          <MemoRowHeader />
+        <MemoRowHeader 
+            regions={regions}
+            onChangeRegion={onChangeRegion}
+            onDeleteRegion={onDeleteRegion}
+          />
           <HeaderSep />
           {regions.map((r, i) => (
             <MemoRow