Skip to content

Commit b923a3f

Browse files
eshankvaisheshankvaish
authored
Merge branch 'develop' into feat/notifications
2 parents 1180677 + 0ddafb3 commit b923a3f

File tree

32 files changed

+980
-956
lines changed

32 files changed

+980
-956
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "0.2.26",
7+
"@devtron-labs/devtron-fe-common-lib": "0.2.28",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@
1616

1717
/* eslint-disable no-param-reassign */
1818
import { useEffect, useRef, useState } from 'react'
19-
import { NavLink, Switch, Route, Redirect, useLocation, useRouteMatch } from 'react-router-dom'
19+
import { Switch, Route, Redirect, useLocation, useRouteMatch } from 'react-router-dom'
2020
import {
2121
GenericSectionErrorState,
2222
OptionType,
2323
ReactSelectInputAction,
2424
showError,
25+
TabGroup,
2526
useAsync,
2627
useMainContext,
2728
} from '@devtron-labs/devtron-fe-common-lib'
@@ -890,23 +891,24 @@ const AppPermissions = () => {
890891

891892
return (
892893
<div className="flexbox-col dc__gap-12">
893-
<ul className="tab-list dc__border-bottom-n1">
894-
{navLinksConfig.map(
895-
({ isHidden, label, tabName }) =>
896-
!isHidden && (
897-
<li className="tab-list__tab" key={tabName}>
898-
<NavLink
899-
to={_getNavLinkUrl(tabName)}
900-
data-testid={tabName}
901-
className="tab-list__tab-link pt-8 pb-6 pl-0 pr-0 fs-13 lh-20 cn-9 dc__capitalize"
902-
activeClassName="active"
903-
>
904-
{label}
905-
</NavLink>
906-
</li>
907-
),
908-
)}
909-
</ul>
894+
<div className="dc__border-bottom-n1">
895+
<TabGroup
896+
tabs={navLinksConfig.flatMap(({ isHidden, label, tabName }) =>
897+
!isHidden
898+
? {
899+
id: tabName,
900+
label,
901+
tabType: 'navLink',
902+
props: {
903+
to: _getNavLinkUrl(tabName),
904+
'data-testid': tabName,
905+
},
906+
}
907+
: [],
908+
)}
909+
alignActiveBorderWithContainer
910+
/>
911+
</div>
910912
<div>
911913
<Switch>
912914
{appPermissionDetailConfig.map(

‎src/components/ApplicationGroup/AppGroupAppFilter.components.tsx

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import React from 'react'
1818
import { components } from 'react-select'
19-
import { ConditionalWrap } from '@devtron-labs/devtron-fe-common-lib'
19+
import { ComponentSizeType, ConditionalWrap, TabGroup } from '@devtron-labs/devtron-fe-common-lib'
2020
import Tippy from '@tippyjs/react'
2121
import { useAppGroupAppFilterContext } from './AppGroupDetailsRoute'
2222
import { getOptionBGClass } from './AppGroup.utils'
@@ -188,39 +188,32 @@ export const MenuList = (props: any): JSX.Element => {
188188
return (
189189
<components.MenuList {...props}>
190190
<div className="dc__position-sticky dc__top-0 bcn-0">
191-
<div className="pt-6 pr-8 pl-8 env-header-tab">
192-
<ul role="tablist" className="tab-list">
193-
<li
194-
className="tab-list__tab pointer"
195-
data-selected-tab={AppFilterTabs.GROUP_FILTER}
196-
onClick={onTabChange}
197-
>
198-
<div
199-
className={`mb-6 fs-12 tab-hover ${
200-
selectedFilterTab === AppFilterTabs.GROUP_FILTER ? 'fw-6 active' : 'fw-4'
201-
}`}
202-
>
203-
<span>Saved filters</span>
204-
</div>
205-
{selectedFilterTab === AppFilterTabs.GROUP_FILTER && (
206-
<div className="apps-tab__active-tab" />
207-
)}
208-
</li>
209-
<li
210-
className="tab-list__tab pointer"
211-
data-selected-tab={AppFilterTabs.APP_FILTER}
212-
onClick={onTabChange}
213-
>
214-
<div
215-
className={`mb-6 fs-12 tab-hover ${
216-
selectedFilterTab === AppFilterTabs.APP_FILTER ? 'fw-6 active' : 'fw-4'
217-
}`}
218-
>
219-
<span>All {selectedType} </span>
220-
</div>
221-
{selectedFilterTab === AppFilterTabs.APP_FILTER && <div className="apps-tab__active-tab" />}
222-
</li>
223-
</ul>
191+
<div className="px-8 env-header-tab">
192+
<TabGroup
193+
tabs={[
194+
{
195+
id: 'saved-filters-tab',
196+
label: 'Saved filters',
197+
tabType: 'button',
198+
active: selectedFilterTab === AppFilterTabs.GROUP_FILTER,
199+
props: {
200+
onClick: onTabChange,
201+
'data-selected-tab': AppFilterTabs.GROUP_FILTER,
202+
},
203+
},
204+
{
205+
id: 'all-selected-tab',
206+
label: `All ${selectedType}`,
207+
tabType: 'button',
208+
active: selectedFilterTab === AppFilterTabs.APP_FILTER,
209+
props: {
210+
onClick: onTabChange,
211+
'data-selected-tab': AppFilterTabs.APP_FILTER,
212+
},
213+
},
214+
]}
215+
size={ComponentSizeType.medium}
216+
/>
224217
</div>
225218
<div className="flex flex-justify dc__window-bg w-100 pt-6 pr-8 pb-6 pl-8">
226219
<span className="fs-12 fw-6 cn-9">

‎src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

Lines changed: 57 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
Switch,
2020
Route,
2121
Redirect,
22-
NavLink,
2322
useParams,
2423
useRouteMatch,
2524
useHistory,
@@ -37,6 +36,8 @@ import {
3736
ToastBody,
3837
useAsync,
3938
PageHeader,
39+
TabGroup,
40+
TabProps,
4041
} from '@devtron-labs/devtron-fe-common-lib'
4142
import ReactGA from 'react-ga4'
4243
import { MultiValue } from 'react-select'
@@ -592,70 +593,61 @@ export const EnvHeader = ({
592593
}
593594

594595
const renderEnvDetailsTabs = () => {
595-
return (
596-
<ul role="tablist" className="tab-list">
597-
<li className="tab-list__tab dc__ellipsis-right">
598-
<NavLink
599-
activeClassName="active"
600-
to={`${match.url}/${URLS.APP_OVERVIEW}`}
601-
className="tab-list__tab-link"
602-
onClick={(event) =>
603-
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.OverviewClicked.action)
604-
}
605-
>
606-
Overview
607-
</NavLink>
608-
</li>
609-
<li className="tab-list__tab">
610-
<NavLink
611-
activeClassName="active"
612-
to={`${match.url}/${URLS.APP_TRIGGER}`}
613-
className="tab-list__tab-link"
614-
data-testid="group-build-deploy"
615-
onClick={(event) =>
616-
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.BuildDeployClicked.action)
617-
}
618-
>
619-
Build & Deploy
620-
</NavLink>
621-
</li>
622-
<li className="tab-list__tab">
623-
<NavLink
624-
activeClassName="active"
625-
to={`${match.url}/${URLS.APP_CI_DETAILS}`}
626-
className="tab-list__tab-link"
627-
data-testid="app-group-build-history"
628-
onClick={handleEventRegistration}
629-
>
630-
Build history
631-
</NavLink>
632-
</li>
633-
<li className="tab-list__tab">
634-
<NavLink
635-
activeClassName="active"
636-
to={`${match.url}/${URLS.APP_CD_DETAILS}`}
637-
className="tab-list__tab-link"
638-
onClick={handleEventRegistration}
639-
>
640-
Deployment history
641-
</NavLink>
642-
</li>
643-
<li className="tab-list__tab">
644-
<NavLink
645-
activeClassName="active"
646-
to={`${match.url}/${URLS.APP_CONFIG}`}
647-
className="tab-list__tab-link flex"
648-
data-testid="group-configuration"
649-
onClick={(event) =>
650-
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.ConfigurationClicked.action)
651-
}
652-
>
653-
<Settings className="tab-list__icon icon-dim-16 fcn-9 mr-4" />
654-
Configurations
655-
</NavLink>
656-
</li>
657-
</ul>
658-
)
596+
const tabs: TabProps[] = [
597+
{
598+
id: 'overview-tab',
599+
label: 'Overview',
600+
tabType: 'navLink',
601+
props: {
602+
to: `${match.url}/${URLS.APP_OVERVIEW}`,
603+
onClick: (event) => handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.OverviewClicked.action),
604+
},
605+
},
606+
{
607+
id: 'build-&-deploy-tab',
608+
label: 'Build & Deploy',
609+
tabType: 'navLink',
610+
props: {
611+
to: `${match.url}/${URLS.APP_TRIGGER}`,
612+
onClick: (event) =>
613+
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.BuildDeployClicked.action),
614+
'data-testid': 'group-build-deploy',
615+
},
616+
},
617+
{
618+
id: 'build-history-tab',
619+
label: 'Build history',
620+
tabType: 'navLink',
621+
props: {
622+
to: `${match.url}/${URLS.APP_CI_DETAILS}`,
623+
onClick: handleEventRegistration,
624+
'data-testid': 'app-group-build-history',
625+
},
626+
},
627+
{
628+
id: 'deployment-history-tab',
629+
label: 'Deployment history',
630+
tabType: 'navLink',
631+
props: {
632+
to: `${match.url}/${URLS.APP_CD_DETAILS}`,
633+
onClick: handleEventRegistration,
634+
},
635+
},
636+
{
637+
id: 'group-configurations-tab',
638+
label: 'Configurations',
639+
tabType: 'navLink',
640+
icon: Settings,
641+
props: {
642+
to: `${match.url}/${URLS.APP_CONFIG}`,
643+
onClick: (event) =>
644+
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.ConfigurationClicked.action),
645+
'data-testid': 'group-configuration',
646+
},
647+
},
648+
]
649+
650+
return <TabGroup tabs={tabs} hideTopPadding alignActiveBorderWithContainer />
659651
}
660652

661653
const renderBreadcrumbs = () => {

0 commit comments

Comments
 (0)