From dc6514348e43c3f5989283d79b8f3d2034bb4756 Mon Sep 17 00:00:00 2001
From: hamed-musallam <35760236+hamed-musallam@users.noreply.github.com>
Date: Fri, 5 Apr 2024 13:29:44 +0200
Subject: [PATCH] refactor: replace general settings tabs component with
 blueprintjs tabs (#3007)

---
 .../modal/setting/GeneralSettings.tsx         | 140 +++++++++---------
 test-e2e/core/setting.test.ts                 |   2 +-
 test-e2e/panels/filters.test.ts               |   2 +-
 3 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/src/component/modal/setting/GeneralSettings.tsx b/src/component/modal/setting/GeneralSettings.tsx
index e58fc615d..6e2060cb8 100644
--- a/src/component/modal/setting/GeneralSettings.tsx
+++ b/src/component/modal/setting/GeneralSettings.tsx
@@ -1,5 +1,12 @@
 /** @jsxImportSource @emotion/react */
-import { Dialog, DialogBody, DialogFooter, Classes } from '@blueprintjs/core';
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Classes,
+  Tabs,
+  Tab,
+} from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { Formik, FormikProps } from 'formik';
 import { Workspace } from 'nmr-load-save';
@@ -17,8 +24,6 @@ import { useToaster } from '../../context/ToasterContext';
 import ActionButtons from '../../elements/ActionButtons';
 import Button from '../../elements/Button';
 import Label from '../../elements/Label';
-import Tab from '../../elements/Tab/Tab';
-import Tabs, { PositionsEnum } from '../../elements/Tab/Tabs';
 import DropDownButton, {
   DropDownListItem,
 } from '../../elements/dropDownButton/DropDownButton';
@@ -39,10 +44,6 @@ import ToolsTabContent from './settings-tabs/ToolsTabContent';
 import { validation } from './settingsValidation';
 
 const styles = css`
-  .tab-content {
-    width: 100%;
-  }
-
   .section-header {
     font-size: 13px;
     color: #2ca8ff;
@@ -72,12 +73,6 @@ const styles = css`
       width: 260px;
     }
   }
-
-  .inner-content {
-    padding: 15px 30px;
-    width: 100%;
-    overflow: auto;
-  }
 `;
 
 function isRestButtonDisable(
@@ -103,7 +98,6 @@ interface GeneralSettingsModalProps {
 
 function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
-  const [activeTab, setActiveTab] = useState('general');
   const {
     dispatch,
     current: currentWorkspace,
@@ -141,11 +135,6 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
     saveSettings(values);
     closeDialog?.();
   }
-
-  const tabChangeHandler = useCallback((tab) => {
-    setActiveTab(tab.tabid);
-  }, []);
-
   function addWorkSpaceHandler(name) {
     dispatch({
       type: 'ADD_WORKSPACE',
@@ -353,62 +342,73 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
               validate={handleDisabledRestButton}
             >
               <Tabs
-                position={PositionsEnum.LEFT}
-                activeTab={activeTab}
-                onClick={tabChangeHandler}
+                vertical
+                css={css`
+                  height: 100%;
+
+                  div[role='tabpanel'] {
+                    width: 100%;
+                    padding: 0.8rem;
+                    overflow: auto;
+                    max-height: 100%;
+                  }
+                `}
+                fill
               >
-                <Tab title="General" tabid="general">
-                  <div className="inner-content">
-                    <GeneralTabContent />
-                  </div>
-                </Tab>
-
-                <Tab title="Formatting" tabid="formatting">
-                  <div className="inner-content">
-                    <FormattingTabContent />
-                  </div>
-                </Tab>
-
-                <Tab title="Panels" tabid="display">
-                  <div className="inner-content">
-                    <DisplayTabContent />
-                  </div>
-                </Tab>
-
-                <Tab title="Tools" tabid="tools">
-                  <div className="inner-content">
-                    <ToolsTabContent />
-                  </div>
-                </Tab>
-
-                <Tab title="Databases" tabid="databases">
-                  <div className="inner-content">
+                <Tab
+                  title="General"
+                  id="general"
+                  panel={<GeneralTabContent />}
+                />
+
+                <Tab
+                  title="Formatting"
+                  id="formatting"
+                  panel={<FormattingTabContent />}
+                />
+
+                <Tab
+                  title="Panels"
+                  id="display"
+                  panel={<DisplayTabContent />}
+                />
+
+                <Tab title="Tools" id="tools" panel={<ToolsTabContent />} />
+
+                <Tab
+                  title="Databases"
+                  id="databases"
+                  panel={
                     <DatabasesTabContent
                       currentWorkspace={workspaceName}
                       originalWorkspaces={originalWorkspaces}
                     />
-                  </div>
-                </Tab>
-                <Tab title="Import filters" tabid="importation-filters">
-                  <div className="inner-content">
-                    <ImportationFiltersTabContent />
-                  </div>
-                </Tab>
-                <Tab title="Title block" tabid="title-block">
-                  <div className="inner-content">
-                    <InfoBlockTabContent />
-                  </div>
-                </Tab>
-                <Tab title="Auto processing" tabid="on-load-processing">
-                  <div className="inner-content">
-                    <OnLoadProcessingTabContent />
-                  </div>
-                </Tab>
-                <Tab title="Spectra colors" tabid="spectra-colors">
-                  <div className="inner-content">
-                    <SpectraColorsTabContent />
-                  </div>
-                </Tab>
+                  }
+                />
+
+                <Tab
+                  title="Import filters"
+                  id="importation-filters"
+                  panel={<ImportationFiltersTabContent />}
+                />
+
+                <Tab
+                  title="Title block"
+                  id="title-block"
+                  panel={<InfoBlockTabContent />}
+                />
+
+                <Tab
+                  title="Auto processing"
+                  id="on-load-processing"
+                  panel={<OnLoadProcessingTabContent />}
+                />
+
+                <Tab
+                  title="Spectra colors"
+                  id="spectra-colors"
+                  panel={<SpectraColorsTabContent />}
+                />
               </Tabs>
             </Formik>
           </div>
diff --git a/test-e2e/core/setting.test.ts b/test-e2e/core/setting.test.ts
index b003bcff1..e66dd0852 100644
--- a/test-e2e/core/setting.test.ts
+++ b/test-e2e/core/setting.test.ts
@@ -19,7 +19,7 @@ test('should Change the visibility of the panels', async ({ page }) => {
     await nmrium.clickTool('general-settings');
 
     //click on the display tab
-    await nmrium.page.click('_react=Tab[tabid="display"]');
+    await nmrium.page.getByRole('tablist').locator('text=Panels').click();
 
     //change  the checkbox value to tru
     await nmrium.page
diff --git a/test-e2e/panels/filters.test.ts b/test-e2e/panels/filters.test.ts
index 7b033f47d..c47e3bea7 100644
--- a/test-e2e/panels/filters.test.ts
+++ b/test-e2e/panels/filters.test.ts
@@ -217,7 +217,7 @@ test('Exclusion zones', async ({ page }) => {
     await nmrium.clickTool('general-settings');
 
     //click on the display tab
-    await nmrium.page.click('_react=Tab[tabid="tools"]');
+    await nmrium.page.getByRole('tablist').locator('text=tools').click();
 
     //enable exclusion zone tool
     await nmrium.page