Skip to content

Commit 4d7ec40

Browse files
ritvikmahajan17ritvikmahajan17
committed
feat: popup modal onClick
1 parent 1c979e0 commit 4d7ec40

File tree

7 files changed

+155
-53
lines changed

7 files changed

+155
-53
lines changed

‎src/components/ApplicationGroup/AppGroup.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,7 @@ export interface CreateGroupType {
311311
selectedAppGroup: GroupOptionType
312312
unAuthorizedApps?: Map<string, boolean>
313313
closePopup: (e, groupId?: number) => void
314+
isEnv: boolean
314315
}
315316

316317
export interface ApplistEnvType {

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,21 @@ import { ConditionalWrap } from '@devtron-labs/devtron-fe-common-lib'
1616
import Tippy from '@tippyjs/react'
1717

1818
export const ValueContainer = (props): JSX.Element => {
19-
const { appListOptions, selectedAppList, selectedFilterTab, selectedGroupFilter, filterParentType }: AppGroupAppFilterContextType =
20-
useAppGroupAppFilterContext()
19+
const {
20+
appListOptions,
21+
selectedAppList,
22+
selectedFilterTab,
23+
selectedGroupFilter,
24+
filterParentType,
25+
}: AppGroupAppFilterContextType = useAppGroupAppFilterContext()
2126
let selectorText,
2227
selectedAppsLength = props.getValue().length
2328
if (selectedFilterTab === AppFilterTabs.GROUP_FILTER && selectedGroupFilter[0]) {
2429
selectorText = selectedGroupFilter[0]?.label
2530
} else {
2631
selectorText = `${selectedAppList.length > 0 ? selectedAppList.length : appListOptions.length}/${
2732
appListOptions.length
28-
} ${filterParentType===FilterParentType.env? 'Applications': 'Environments'}`
33+
} ${filterParentType === FilterParentType.env ? 'Applications' : 'Environments'}`
2934
}
3035
return (
3136
<components.ValueContainer {...props}>
@@ -144,7 +149,7 @@ export const MenuList = (props: any): JSX.Element => {
144149
openCreateGroup,
145150
selectedGroupFilter,
146151
setSelectedGroupFilter,
147-
filterParentType
152+
filterParentType,
148153
}: AppGroupAppFilterContextType = useAppGroupAppFilterContext()
149154
const clearSelection = (): void => {
150155
setSelectedAppList([])
@@ -153,7 +158,7 @@ export const MenuList = (props: any): JSX.Element => {
153158
const onTabChange = (e): void => {
154159
setSelectedFilterTab(e.currentTarget.dataset.selectedTab)
155160
}
156-
const selectedType = filterParentType===FilterParentType.env? 'applications': 'environments'
161+
const selectedType = filterParentType === FilterParentType.env ? 'applications' : 'environments'
157162
return (
158163
<components.MenuList {...props}>
159164
<div className="dc__position-sticky dc__top-0 bcn-0">
@@ -208,8 +213,8 @@ export const MenuList = (props: any): JSX.Element => {
208213
<InfoIcon className="icon-dim-20 mr-4 mw-18 cursor fcn-6 mb-4" />
209214
<div className="fs-13 fw-6 cn-9 mb-4">No saved filters</div>
210215
<div className="fs-12 fw-4 cn-7 dc__align-center ">
211-
To save a filter, select some {selectedType} from All {selectedType} and click on ‘Save selection as
212-
filter’
216+
To save a filter, select some {selectedType} from All {selectedType} and click on ‘Save
217+
selection as filter’
213218
</div>
214219
</div>
215220
)}

‎src/components/ApplicationGroup/AppGroupDetailsRoute.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
393393
appList={allAppsList}
394394
selectedAppGroup={clickedGroup}
395395
closePopup={closeCreateGroup}
396+
isEnv={false}
396397
/>
397398
)}
398399
{showDeleteGroup && isPopupBox && (
@@ -446,7 +447,7 @@ export function EnvHeader({
446447
openCreateGroup,
447448
openDeleteGroup,
448449
isSuperAdmin,
449-
filterParentType: FilterParentType.env
450+
filterParentType: FilterParentType.env,
450451
}),
451452
[
452453
appListOptions,
@@ -521,7 +522,6 @@ export function EnvHeader({
521522
onClickTabPreventDefault(event, 'active')
522523
}
523524

524-
525525
const renderEnvDetailsTabs = () => {
526526
return (
527527
<ul role="tablist" className="tab-list">
@@ -530,7 +530,9 @@ export function EnvHeader({
530530
activeClassName="active"
531531
to={`${match.url}/${URLS.APP_OVERVIEW}`}
532532
className="tab-list__tab-link"
533-
onClick={(event) => handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.OverviewClicked.action)}
533+
onClick={(event) =>
534+
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.OverviewClicked.action)
535+
}
534536
>
535537
Overview
536538
</NavLink>
@@ -541,7 +543,9 @@ export function EnvHeader({
541543
to={`${match.url}/${URLS.APP_TRIGGER}`}
542544
className="tab-list__tab-link"
543545
data-testid="group-build-deploy"
544-
onClick={(event) => handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.BuildDeployClicked.action)}
546+
onClick={(event) =>
547+
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.BuildDeployClicked.action)
548+
}
545549
>
546550
Build & Deploy
547551
</NavLink>
@@ -573,7 +577,9 @@ export function EnvHeader({
573577
to={`${match.url}/${URLS.APP_CONFIG}`}
574578
className="tab-list__tab-link flex"
575579
data-testid="group-configuration"
576-
onClick={(event) => handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.ConfigurationClicked.action)}
580+
onClick={(event) =>
581+
handleEventRegistration(event, ENV_APP_GROUP_GA_EVENTS.ConfigurationClicked.action)
582+
}
577583
>
578584
<Settings className="tab-list__icon icon-dim-16 fcn-9 mr-4" />
579585
Configurations

‎src/components/ApplicationGroup/Constants.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,14 @@ export enum AppFilterTabs {
160160

161161
export enum CreateGroupTabs {
162162
'SELECTED_APPS' = 'selectedApps',
163+
'SELECTED_ENV' = 'selectedEnv',
163164
'ALL_APPS' = 'allApps',
165+
'ALL_ENV' = 'allEnv',
164166
}
165167

166168
export const CREATE_GROUP_TABS = {
167169
selectedApps: 'Selected applications',
168170
allApps: 'Add/Remove applications',
171+
selectedEnv: 'Selected environments',
172+
allEnv: 'Add/Remove environments',
169173
}

‎src/components/ApplicationGroup/CreateAppGroup.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ import { createEnvGroup } from './AppGroup.service'
2020
import { useParams } from 'react-router-dom'
2121
import Tippy from '@tippyjs/react'
2222

23-
export default function CreateAppGroup({ appList, selectedAppGroup, closePopup, unAuthorizedApps }: CreateGroupType) {
23+
export default function CreateAppGroup({
24+
appList,
25+
selectedAppGroup,
26+
closePopup,
27+
unAuthorizedApps,
28+
isEnv,
29+
}: CreateGroupType) {
2430
const { envId } = useParams<{ envId: string }>()
2531
const CreateGroupRef = useRef<HTMLDivElement>(null)
2632
const [isLoading, setLoading] = useState(false)
@@ -109,8 +115,8 @@ export default function CreateAppGroup({ appList, selectedAppGroup, closePopup,
109115
const appFilterAuthorizedList = () => {
110116
let _authorizedApp = []
111117
appList.forEach((app) => {
112-
if(!unAuthorizedApps.get(app.appName)) {
113-
_authorizedApp.push({id: app.id, appName: app.appName})
118+
if (!unAuthorizedApps.get(app.appName)) {
119+
_authorizedApp.push({ id: app.id, appName: app.appName })
114120
}
115121
})
116122
setAuthorizedAppList(_authorizedApp)
@@ -134,11 +140,11 @@ export default function CreateAppGroup({ appList, selectedAppGroup, closePopup,
134140
const appFilterList = () => {
135141
let _authorizedAppList = []
136142
let _unauthorizedAppList = []
137-
appList.forEach((app) =>{
138-
unAuthorizedApps.get(app.appName) ?
139-
_unauthorizedAppList.push({id: app.id, appName: app.appName})
140-
: _authorizedAppList.push({id: app.id, appName: app.appName})
141-
})
143+
appList.forEach((app) => {
144+
unAuthorizedApps.get(app.appName)
145+
? _unauthorizedAppList.push({ id: app.id, appName: app.appName })
146+
: _authorizedAppList.push({ id: app.id, appName: app.appName })
147+
})
142148
setUnauthorizedAppList(_unauthorizedAppList)
143149
setAuthorizedAppList(_authorizedAppList)
144150
}
@@ -232,7 +238,7 @@ export default function CreateAppGroup({ appList, selectedAppGroup, closePopup,
232238
arrow={false}
233239
placement="bottom-start"
234240
content="You don't have admin/manager pemission for this app."
235-
>
241+
>
236242
<div>{children}</div>
237243
</Tippy>
238244
)}
@@ -328,16 +334,19 @@ export default function CreateAppGroup({ appList, selectedAppGroup, closePopup,
328334
</div>
329335
<div>
330336
<ul role="tablist" className="tab-list dc__border-bottom mb-8">
331-
{renderTabItem(CreateGroupTabs.SELECTED_APPS, selectedAppsCount)}
332-
{renderTabItem(CreateGroupTabs.ALL_APPS, appList.length)}
337+
{renderTabItem(
338+
isEnv ? CreateGroupTabs.SELECTED_ENV : CreateGroupTabs.SELECTED_APPS,
339+
selectedAppsCount,
340+
)}
341+
{renderTabItem(isEnv ? CreateGroupTabs.ALL_ENV : CreateGroupTabs.ALL_APPS, appList.length)}
333342
</ul>
334343
{selectedTab === CreateGroupTabs.SELECTED_APPS ? renderSelectedApps() : renderAllApps()}
335344
</div>
336345
</div>
337346
)
338347
}
339348

340-
const handleSave = async (e): Promise<void> => {
349+
const handleSave = async (e): Promise<void> => {
341350
e.preventDefault()
342351
if (!appGroupName || appGroupDescription?.length > 50) {
343352
return
@@ -351,7 +360,7 @@ export default function CreateAppGroup({ appList, selectedAppGroup, closePopup,
351360
for (const _appId in selectedAppsMap) {
352361
_selectedAppIds.push(+_appId)
353362
}
354-
363+
355364
let appListIds = []
356365
appList.forEach((element) => {
357366
if (!unAuthorizedApps.get(element.appName)) {

‎src/components/app/details/AppHeader.tsx‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import AppGroupAppFilter from '../../ApplicationGroup/AppGroupAppFilter'
1313
import './appDetails/appDetails.scss'
1414
import './app.scss'
1515
import { AppGroupAppFilterContext } from '../../ApplicationGroup/AppGroupDetailsRoute'
16-
import { FilterParentType } from '../../ApplicationGroup/AppGroup.types'
16+
import { CreateGroupAppListType, FilterParentType, GroupOptionType } from '../../ApplicationGroup/AppGroup.types'
17+
import CreateAppGroup from '../../ApplicationGroup/CreateAppGroup'
1718

1819
const MandatoryTagWarning = importComponentFromFELibrary('MandatoryTagWarning')
1920

@@ -32,13 +33,18 @@ export function AppHeader({
3233
openCreateGroup,
3334
openDeleteGroup,
3435
isSuperAdmin,
36+
//@ts-ignore
37+
showCreateGroup,
3538
}: AppHeaderType) {
3639
const { appId } = useParams<{ appId }>()
3740
const match = useRouteMatch()
3841
const history = useHistory()
3942
const location = useLocation()
4043
const currentPathname = useRef('')
4144
const [isMenuOpen, setMenuOpen] = useState(false)
45+
const [mapUnauthorizedApp, setMapUnauthorizedApp] = useState<Map<string, boolean>>(new Map())
46+
const [allAppsList, setAllAppsList] = useState<CreateGroupAppListType[]>([])
47+
const [clickedGroup, setClickedGroup] = useState<GroupOptionType>(null)
4248

4349
const contextValue = useMemo(
4450
() => ({
@@ -55,7 +61,7 @@ export function AppHeader({
5561
openCreateGroup,
5662
openDeleteGroup,
5763
isSuperAdmin,
58-
filterParentType: FilterParentType.app
64+
filterParentType: FilterParentType.app,
5965
}),
6066
[
6167
appListOptions,
@@ -228,12 +234,29 @@ export function AppHeader({
228234
)
229235
}
230236

237+
const closeCreateGroup = () => {
238+
// FIXME
239+
setClickedGroup(null)
240+
openCreateGroup(false)
241+
}
242+
231243
return (
232-
<PageHeader
233-
breadCrumbs={renderBreadcrumbs}
234-
isBreadcrumbs={true}
235-
showTabs={true}
236-
renderHeaderTabs={renderAppDetailsTabs}
237-
/>
244+
<>
245+
<PageHeader
246+
breadCrumbs={renderBreadcrumbs}
247+
isBreadcrumbs={true}
248+
showTabs={true}
249+
renderHeaderTabs={renderAppDetailsTabs}
250+
/>
251+
{showCreateGroup && (
252+
<CreateAppGroup
253+
unAuthorizedApps={mapUnauthorizedApp}
254+
appList={allAppsList}
255+
selectedAppGroup={clickedGroup}
256+
closePopup={closeCreateGroup}
257+
isEnv={true}
258+
/>
259+
)}
260+
</>
238261
)
239262
}

0 commit comments

Comments
 (0)