Merge pull request #344 from siemens/refactor/tabs

refactor(tabs): Clicking on edit button on a certain tab will open the corresponding edit tab

Author: hoangnt2

src/app/[locale]/projects/detail/[id]/components/ProjectDetailTab.tsx

@@ -13,7 +13,7 @@ import { AdministrationDataType, HttpStatus, SummaryDataType, ActionType } from
 import { ApiUtils } from '@/utils'
 import { signOut, useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
-import { notFound, useRouter } from 'next/navigation'
+import { notFound, useRouter, useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { Button, Col, Dropdown, ListGroup, Row, Spinner, Tab } from 'react-bootstrap'
 import LinkProjects from '../../../components/LinkProjects'
@@ -36,6 +36,19 @@ export default function ViewProjects({ projectId }: { projectId: string }) {
     const [administrationData, setAdministrationData] = useState<AdministrationDataType | undefined>(undefined)
     const [show, setShow] = useState(false)
     const router = useRouter()
+    const searchParams = useSearchParams()
+    const DEFAULT_ACTIVE_TAB = 'summary'
+    const [activeKey, setActiveKey] = useState(DEFAULT_ACTIVE_TAB)
+
+    useEffect(() => {
+        const fragment = searchParams.get('tab') || DEFAULT_ACTIVE_TAB 
+        setActiveKey(fragment)
+    }, [searchParams])
+
+    const handleSelect = (key: string | null) => {
+        setActiveKey(key ?? DEFAULT_ACTIVE_TAB)
+        router.push(`?tab=${key}`)
+    }
 
     useEffect(() => {
         if (status !== 'authenticated') return
@@ -71,19 +84,19 @@ export default function ViewProjects({ projectId }: { projectId: string }) {
     const handleEditProject = (projectId: string) => {
         if (session.user.email === summaryData['_embedded']['createdBy']['email']){
             MessageService.success(t('You are editing the original document'))
-            router.push(`/projects/edit/${projectId}`)
+            router.push(`/projects/edit/${projectId}?tab=${activeKey}`)
         }
         else {
             MessageService.success(t('You will create a moderation request if you update'))
-            router.push(`/projects/edit/${projectId}`)
+            router.push(`/projects/edit/${projectId}?tab=${activeKey}`)
         }
     }
 
     return (
         <>
             <LinkProjects show={show} setShow={setShow} projectId={projectId} />
             <div className='container page-content'>
-                <Tab.Container defaultActiveKey='summary' mountOnEnter={true} unmountOnExit={true}>
+                <Tab.Container activeKey={activeKey} onSelect={(k) => handleSelect(k)} mountOnEnter={true} unmountOnExit={true}>
                     <Row>
                         <Col sm='auto' className='me-3'>
                             <ListGroup>

src/app/[locale]/projects/edit/[id]/components/EditProject.tsx

@@ -18,7 +18,7 @@ import { ApiUtils, CommonUtils } from '@/utils'
 import { ENABLE_FLEXIBLE_PROJECT_RELEASE_RELATIONSHIP } from '@/utils/env'
 import { signOut, getSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
-import { notFound, useRouter } from 'next/navigation'
+import { notFound, useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Col, ListGroup, Row, Tab } from 'react-bootstrap'
 import Obligations from '../../../components/Obligations/Obligations'
@@ -38,6 +38,24 @@ function EditProject({ projectId }: { projectId: string }) {
         fullName: '',
     })
 
+    const searchParams = useSearchParams()
+    const TABS = ['summary', 'administration', 'linkedProjectsAndReleases', 'attachments', 'obligations']
+    const DEFAULT_ACTIVE_TAB = 'summary'
+    const [activeKey, setActiveKey] = useState(DEFAULT_ACTIVE_TAB)
+
+    useEffect(() => {
+        let tab = searchParams.get('tab') 
+        if (!tab || TABS.indexOf(tab) === -1) {
+            tab = DEFAULT_ACTIVE_TAB
+        }
+        setActiveKey(tab as string)
+    }, [searchParams])
+
+    const handleSelect = (key: string | null) => {
+        setActiveKey(key ?? DEFAULT_ACTIVE_TAB)
+        router.push(`?tab=${key}`)
+    }
+
     const [externalUrls, setExternalUrls] = useState<InputKeyValue[]>([])
 
     const [externalIds, setExternalIds] = useState<InputKeyValue[]>([])
@@ -319,7 +337,7 @@ function EditProject({ projectId }: { projectId: string }) {
                 }}
             >
                 <div>
-                    <Tab.Container defaultActiveKey='summary' mountOnEnter={true} unmountOnExit={true}>
+                    <Tab.Container activeKey={activeKey} onSelect={(k) => handleSelect(k)} mountOnEnter={true} unmountOnExit={true}>
                         <Row>
                             <Col sm='auto' className='me-3'>
                                 <ListGroup>