Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 18x 18x 18x 18x 18x 18x 18x 18x 18x 18x 11x 7x 18x 3x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { FC, ReactNode, useMemo } from 'react'
import { useParams } from 'react-router-dom'
import type { Breadcrumb } from '@harness/uicore'
import { useStrings } from 'framework/strings'
import type { Segment, Target } from 'services/cf'
import routes from '@common/RouteDefinitions'
import { ResourceType } from '@rbac/interfaces/ResourceType'
import { PermissionIdentifier } from '@rbac/interfaces/PermissionIdentifier'
import { formatDate, formatTime } from '@cf/utils/CFUtils'
import { useGitSync } from '@cf/hooks/useGitSync'
import useActiveEnvironment from '@cf/hooks/useActiveEnvironment'
import { useDocumentTitle } from '@common/hooks/useDocumentTitle'
import { DetailPageTemplate, DetailPageTemplateProps } from '../DetailPageTemplate/DetailPageTemplate'
import TargetManagementToolbar from '../TargetManagementToolbar/TargetManagementToolbar'
import css from './TargetManagementDetailPageTemplate.module.scss'
export interface TargetManagementDetailPageTemplateProps
extends Omit<DetailPageTemplateProps, 'title' | 'subTitle' | 'identifier' | 'breadcrumbs'> {
item: Segment | Target
openDeleteDialog: () => void
leftBar: ReactNode
}
const TargetManagementDetailPageTemplate: FC<TargetManagementDetailPageTemplateProps> = ({
item,
openDeleteDialog,
leftBar,
children,
...detailPageTemplateProps
}) => {
const { getString } = useStrings()
const gitSync = useGitSync()
const { withActiveEnvironment, activeEnvironment: environmentIdentifier } = useActiveEnvironment()
const { accountId: accountIdentifier, orgIdentifier, projectIdentifier } = useParams<Record<string, string>>()
const isTarget: boolean = 'segments' in item
useDocumentTitle(
`${getString('cf.shared.targetManagement')}: ${getString(isTarget ? 'cf.shared.targets' : 'cf.shared.segments')}`
)
const createdOn = useMemo<string>(
() =>
getString('cf.targetDetail.createdOnDate', {
date: formatDate(item.createdAt as number),
time: formatTime(item.createdAt as number)
}),
[item.createdAt]
)
const breadcrumbs = useMemo<Breadcrumb[]>(() => {
if (isTarget) {
return [
{
label: `${getString('cf.shared.targetManagement')}: ${getString('cf.shared.targets')}`,
url: withActiveEnvironment(
routes.toCFTargets({
accountId: accountIdentifier,
orgIdentifier,
projectIdentifier
})
)
}
]
}
return [
{
label: `${getString('cf.shared.targetManagement')}: ${getString('cf.shared.segments')}`,
url: withActiveEnvironment(
routes.toCFSegments({
accountId: accountIdentifier,
orgIdentifier,
projectIdentifier
})
)
}
]
}, [accountIdentifier, isTarget, orgIdentifier, projectIdentifier])
return (
<DetailPageTemplate
title={item.name}
subTitle={createdOn}
identifier={item.identifier}
breadcrumbs={breadcrumbs}
menuItems={[
{
icon: 'cross',
text: getString('delete'),
onClick: openDeleteDialog,
permission: {
resource: { resourceType: ResourceType.ENVIRONMENT, resourceIdentifier: environmentIdentifier },
permission: PermissionIdentifier.DELETE_FF_TARGETGROUP
}
}
]}
{...detailPageTemplateProps}
>
<div className={css.layout}>
{gitSync.isGitSyncActionsEnabled ? <TargetManagementToolbar gitSync={gitSync} /> : <div />}
<div className={css.contentLayout}>
<div className={css.leftBar}>{leftBar}</div>
<div className={css.mainContent}>{children}</div>
</div>
</div>
</DetailPageTemplate>
)
}
export default TargetManagementDetailPageTemplate
|