From 8e83516e2be6e38a78d99dae9bb4bd4627b22792 Mon Sep 17 00:00:00 2001
From: Ayush Bhardwaj <96904351+ay-bh@users.noreply.github.com>
Date: Thu, 7 Nov 2024 21:44:54 +0530
Subject: [PATCH] [issue_tracker] Convert batch/normal mode toggle to tabs and
 implement permission control (#9434)

- Replaced the view toggle button with a tabbed interface using `Tabs`
component
- Added permission check to show Batch Edit tab only for users with
`issue_tracker_developer` permission
- Implemented data refresh when switching back to Browse Issues tab


#### Link(s) to related issue(s)
* Resolves #9422, #9423
* Part of #9418
---
 .../issue_tracker/jsx/issueTrackerIndex.js    | 71 +++++++++++++------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/modules/issue_tracker/jsx/issueTrackerIndex.js b/modules/issue_tracker/jsx/issueTrackerIndex.js
index 80baf03d9c1..7557e658d63 100644
--- a/modules/issue_tracker/jsx/issueTrackerIndex.js
+++ b/modules/issue_tracker/jsx/issueTrackerIndex.js
@@ -1,6 +1,7 @@
 import {createRoot} from 'react-dom/client';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {Tabs, TabPane} from 'Tabs';
 
 import Loader from 'Loader';
 import FilterableDataTable from 'FilterableDataTable';
@@ -21,12 +22,12 @@ class IssueTrackerIndex extends Component {
       data: {},
       error: false,
       isLoaded: false,
-      view: 'normal', // 'normal' for FilterableDataTable, 'batch' for IssueTrackerBatchMode
+      activeTab: 'browse',
     };
 
     this.fetchData = this.fetchData.bind(this);
     this.formatColumn = this.formatColumn.bind(this);
-    this.toggleView = this.toggleView.bind(this);
+    this.handleTabChange = this.handleTabChange.bind(this);
   }
 
   /**
@@ -37,6 +38,21 @@ class IssueTrackerIndex extends Component {
       .then(() => this.setState({isLoaded: true}));
   }
 
+  /**
+   * Called by React when the component updates.
+   * @param {object} prevProps - Previous props
+   * @param {object} prevState - Previous state
+   */
+  componentDidUpdate(prevProps, prevState) {
+    // If the activeTab has changed to 'browse', refetch data
+    if (prevState.activeTab !== 'browse' && this.state.activeTab === 'browse') {
+      this.setState({isLoaded: false}, () => {
+        this.fetchData()
+          .then(() => this.setState({isLoaded: true}));
+      });
+    }
+  }
+
   /**
    * Retrieve data from the provided URL and save it in state
    * Additionally add hiddenHeaders to global loris variable
@@ -55,13 +71,12 @@ class IssueTrackerIndex extends Component {
   }
 
   /**
-   * Toggle between normal and batch mode
+   * Handle tab changes
+   *
+   * @param {string} newTab - The ID of the newly selected tab
    */
-  toggleView() {
-    this.setState((prevState) => ({
-      view: prevState.view === 'normal' ? 'batch' : 'normal',
-    }));
-    this.fetchData(); // Fetch fresh data when toggling views
+  handleTabChange(newTab) {
+    this.setState({activeTab: newTab});
   }
 
   /**
@@ -275,18 +290,29 @@ class IssueTrackerIndex extends Component {
       {label: 'New Issue', action: addIssue},
     ];
 
+    const tabList = [
+      {
+        id: 'browse',
+        label: 'Browse Issues',
+      },
+    ];
+
+    // Only display the Batch mode tab if user has the required permission
+    if (this.props.hasPermission('issue_tracker_developer')) {
+      tabList.push({
+        id: 'batch',
+        label: 'Batch Edit',
+      });
+    }
+
     return (
-      <div>
-        <div className="view-toggle">
-          <button onClick={this.toggleView}>
-            {`Switch to ${
-              this.state.view === 'normal'
-                ? 'Batch'
-                : 'Normal'
-            } Mode`}
-          </button>
-        </div>
-        {this.state.view === 'normal' ? (
+      <Tabs
+        tabs={tabList}
+        defaultTab={this.state.activeTab}
+        updateURL={true}
+        onTabChange={this.handleTabChange}
+      >
+        <TabPane TabId="browse">
           <FilterableDataTable
             name="issuesTracker"
             data={this.state.data.data}
@@ -295,7 +321,8 @@ class IssueTrackerIndex extends Component {
             actions={actions}
             getFormattedCell={this.formatColumn}
           />
-        ) : (
+        </TabPane>
+        <TabPane TabId="batch">
           <IssueTrackerBatchMode
             issues={this.state.data.data}
             options={{
@@ -305,8 +332,8 @@ class IssueTrackerIndex extends Component {
               sites: this.state.data.fieldOptions.sites,
             }}
           />
-        )}
-      </div>
+        </TabPane>
+      </Tabs>
     );
   }
 }