feat: use tab group in trigger output

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.13.0-pre-2",
+    "version": "1.13.0-pre-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -65,7 +65,6 @@ export const URLS = {
     CREATE_JOB: 'create-job',
     GETTING_STARTED: 'getting-started',
     STACK_MANAGER_ABOUT: '/stack-manager/about',
-    APP_LIST_HELM: 'h',
     APP_CI_DETAILS: 'ci-details',
     LOGS: 'Logs',
     CREATE: '/create',

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useMemo } from 'react'
-import { NavLink, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom'
+import { Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom'
 
 import { sanitizeTargetPlatforms } from '@Shared/Helpers'
 
@@ -31,6 +31,7 @@ import {
     useInterval,
 } from '../../../Common'
 import { DEPLOYMENT_STAGE_TO_NODE_MAP, EMPTY_STATE_STATUS } from '../../constants'
+import { TabGroup, TabGroupProps } from '../TabGroup'
 import Artifacts from './Artifacts'
 import DeploymentDetailSteps from './DeploymentDetailSteps'
 import { DeploymentHistoryConfigDiff } from './DeploymentHistoryConfigDiff'
@@ -47,6 +48,7 @@ import {
     terminalStatus,
     TriggerOutputProps,
 } from './types'
+import { getTriggerOutputTabs } from './utils'
 
 import './cicdHistory.scss'
 
@@ -316,6 +318,11 @@ const TriggerOutput = ({
             (!!triggerDetailsResult?.result?.artifactId || !!triggerDetails?.artifactId),
     )
 
+    const tabs: TabGroupProps['tabs'] = useMemo(
+        () => getTriggerOutputTabs(triggerDetails, deploymentAppType),
+        [triggerDetails, deploymentAppType],
+    )
+
     useEffect(() => {
         if (triggerDetailsLoading) {
             return
@@ -409,66 +416,9 @@ const TriggerOutput = ({
                         workflowExecutionStages={triggerDetails.workflowExecutionStages}
                         namespace={triggerDetails.namespace}
                     />
-                    <ul className="pl-50 pr-20 pt-8 tab-list tab-list--nodes dc__border-bottom dc__position-sticky dc__top-0 bg__primary dc__zi-3">
-                        {triggerDetails.stage === 'DEPLOY' && deploymentAppType !== DeploymentAppTypes.HELM && (
-                            <li className="tab-list__tab" data-testid="deployment-history-steps-link">
-                                <NavLink
-                                    replace
-                                    className="tab-list__tab-link fs-13-imp pb-8 pt-0-imp"
-                                    activeClassName="active"
-                                    to="deployment-steps"
-                                >
-                                    Steps
-                                </NavLink>
-                            </li>
-                        )}
-                        {!(triggerDetails.stage === 'DEPLOY' || triggerDetails.IsVirtualEnvironment) && (
-                            <li className="tab-list__tab" data-testid="deployment-history-logs-link">
-                                <NavLink
-                                    replace
-                                    className="tab-list__tab-link fs-13-imp pb-8 pt-0-imp"
-                                    activeClassName="active"
-                                    to="logs"
-                                >
-                                    Logs
-                                </NavLink>
-                            </li>
-                        )}
-                        <li className="tab-list__tab" data-testid="deployment-history-source-code-link">
-                            <NavLink
-                                replace
-                                className="tab-list__tab-link fs-13-imp pb-8 pt-0-imp"
-                                activeClassName="active"
-                                to="source-code"
-                            >
-                                Source
-                            </NavLink>
-                        </li>
-                        {triggerDetails.stage === 'DEPLOY' && (
-                            <li className="tab-list__tab" data-testid="deployment-history-configuration-link">
-                                <NavLink
-                                    replace
-                                    className="tab-list__tab-link fs-13-imp pb-8 pt-0-imp"
-                                    activeClassName="active"
-                                    to="configuration"
-                                >
-                                    Configuration
-                                </NavLink>
-                            </li>
-                        )}
-                        {(triggerDetails.stage !== 'DEPLOY' || triggerDetails.IsVirtualEnvironment) && (
-                            <li className="tab-list__tab" data-testid="deployment-history-artifacts-link">
-                                <NavLink
-                                    replace
-                                    className="tab-list__tab-link fs-13-imp pb-8 pt-0-imp"
-                                    activeClassName="active"
-                                    to="artifacts"
-                                >
-                                    Artifacts
-                                </NavLink>
-                            </li>
-                        )}
-                    </ul>
+                    <div className="pl-50 pr-20 pt-8 dc__border-bottom dc__position-sticky dc__top-0 bg__primary dc__zi-3">
+                        <TabGroup tabs={tabs} />
+                    </div>
                 </>
             )}
             <HistoryLogs

src/Shared/Components/CICDHistory/utils.tsx

@@ -26,12 +26,14 @@ import { ReactComponent as ICInProgress } from '@Icons/ic-in-progress.svg'
 import { ReactComponent as TimeOut } from '@Icons/ic-timeout-red.svg'
 import { ReactComponent as Timer } from '@Icons/ic-timer.svg'
 import { DATE_TIME_FORMATS } from '@Common/Constants'
+import { DeploymentAppTypes } from '@Common/Types'
 import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
 import { isTimeStringAvailable } from '@Shared/Helpers'
 
 import { Node, ResourceKindType, WorkflowStatusEnum } from '../../types'
 import { Icon } from '../Icon'
 import { AppStatus, DeploymentStatus, StatusType } from '../StatusComponent'
+import { TabGroupProps } from '../TabGroup'
 import {
     DEFAULT_CLUSTER_ID,
     DEFAULT_NAMESPACE,
@@ -42,6 +44,7 @@ import {
     DeploymentHistory,
     DeploymentHistoryResultObject,
     ExecutionInfoType,
+    History,
     NodeFilters,
     NodeStatus,
     PodExecutionStageDTO,
@@ -375,3 +378,70 @@ export const getTriggerStatusIcon = (status: string) => {
             return status
     }
 }
+
+export const getTriggerOutputTabs = (
+    triggerDetails: History,
+    deploymentAppType: DeploymentAppTypes,
+): TabGroupProps['tabs'] => [
+    ...(triggerDetails.stage === 'DEPLOY' && deploymentAppType !== DeploymentAppTypes.HELM
+        ? [
+              {
+                  id: 'deployment-history-steps-link',
+                  label: 'Steps',
+                  tabType: 'navLink' as const,
+                  props: {
+                      to: 'deployment-steps',
+                      'data-testid': 'deployment-history-steps-link',
+                  },
+              },
+          ]
+        : []),
+    ...(!(triggerDetails.stage === 'DEPLOY' || triggerDetails.IsVirtualEnvironment)
+        ? [
+              {
+                  id: 'deployment-history-logs-link',
+                  label: 'Logs',
+                  tabType: 'navLink' as const,
+                  props: {
+                      to: 'logs',
+                      'data-testid': 'deployment-history-logs-link',
+                  },
+              },
+          ]
+        : []),
+    {
+        id: 'deployment-history-source-code-link',
+        label: 'Source',
+        tabType: 'navLink',
+        props: {
+            to: 'source-code',
+            'data-testid': 'deployment-history-source-code-link',
+        },
+    },
+    ...(triggerDetails.stage === 'DEPLOY'
+        ? [
+              {
+                  id: 'deployment-history-configuration-link',
+                  label: 'Configuration',
+                  tabType: 'navLink' as const,
+                  props: {
+                      to: 'configuration',
+                      'data-testid': 'deployment-history-configuration-link',
+                  },
+              },
+          ]
+        : []),
+    ...(triggerDetails.stage !== 'DEPLOY' || triggerDetails.IsVirtualEnvironment
+        ? [
+              {
+                  id: 'deployment-history-artifacts-link',
+                  label: 'Artifacts',
+                  tabType: 'navLink' as const,
+                  props: {
+                      to: 'artifacts',
+                      'data-testid': 'deployment-history-artifacts-link',
+                  },
+              },
+          ]
+        : []),
+]