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 123 124 | 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x 1x 3x 3x 1x 1x | /*
* Copyright 2021 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 from 'react'
import { useParams, NavLink } from 'react-router-dom'
import { Container, Text, FlexExpander } from '@wings-software/uicore'
import { FontVariation } from '@harness/design-system'
import { delegateTypeToIcon } from '@common/utils/delegateUtils'
import { TagsViewer } from '@common/components/TagsViewer/TagsViewer'
import routes from '@common/RouteDefinitions'
import type {
DelegateConfigProps,
ProjectPathProps,
ModulePathParams,
AccountPathProps
} from '@common/interfaces/RouteInterfaces'
import type { DelegateGroupDetails, DelegateProfileDetails } from 'services/portal'
import { useStrings } from 'framework/strings'
import {
SectionContainer,
SectionContainerTitle,
SectionLabelValuePair
} from '@delegates/components/SectionContainer/SectionContainer'
import css from './DelegateDetails.module.scss'
interface DelegateOverviewProps {
delegate: DelegateGroupDetails
delegateProfile?: DelegateProfileDetails
}
export const DelegateOverview: React.FC<DelegateOverviewProps> = ({ delegate, delegateProfile }) => {
const { getString } = useStrings()
const { accountId, orgIdentifier, projectIdentifier, module } = useParams<
Partial<DelegateConfigProps & ProjectPathProps & ModulePathParams> & AccountPathProps
>()
let tags = Object.entries(delegate?.groupImplicitSelectors || {})
.filter(([, tag]) => tag !== 'PROFILE_SELECTORS')
.map(([tag]) => tag)
tags = tags.concat(delegate?.groupCustomSelectors || [])
return (
<SectionContainer>
<SectionContainerTitle>{getString('overview')}</SectionContainerTitle>
<Container className={css.delegateDetailsContainer}>
<Container flex style={{ borderBottom: '0.5px solid #dce0e7' }}>
<SectionLabelValuePair label={getString('delegate.delegateName')} value={delegate.groupName} />
<FlexExpander />
<SectionLabelValuePair
label={getString('delegate.delegateType')}
value={
<Text
style={{ color: 'var(--black)' }}
icon={delegateTypeToIcon(delegate.delegateType as string)}
iconProps={{ size: 21 }}
>
{delegate.delegateType}
</Text>
}
style={{ borderBottom: 'none' }}
ignoreLastElementStyling
/>
</Container>
<SectionLabelValuePair
label={getString('delegates.delegateIdentifier')}
value={delegate.delegateGroupIdentifier}
/>
{delegateProfile && (
<SectionLabelValuePair
label={getString('delegate.delegateConfiguration')}
value={
<NavLink
to={routes.toDelegateConfigsDetails({
accountId,
delegateConfigIdentifier: delegateProfile.identifier as string,
orgIdentifier,
projectIdentifier,
module
})}
>
<Text font={{ variation: FontVariation.BODY }}>{delegateProfile.name}</Text>
</NavLink>
}
/>
)}
{delegate.delegateDescription && (
<SectionLabelValuePair label={getString('description')} value={delegate.delegateDescription} />
)}
</Container>
<Container className={css.tagsContainer}>
<Text className={css.tagTitle} font={{ variation: FontVariation.BODY }}>
{getString('delegate.delegateTags')}
</Text>
<Container flex>
<TagsViewer tags={tags} />
</Container>
</Container>
{!!delegateProfile?.selectors?.length && (
<Container className={css.tagsContainer}>
{!!delegateProfile?.selectors?.length && (
<Text className={css.tagTitle} font={{ variation: FontVariation.BODY }}>
{getString('delegate.tagsFromDelegateConfig')}
</Text>
)}
<TagsViewer tags={delegateProfile?.selectors} />
</Container>
)}
</SectionContainer>
)
}
|