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 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 70x 70x 2x 70x 70x 70x 2x 70x 2x 70x 70x 2x 72x 72x 72x 1x 72x 4x 1x 2x | /*
* 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 from 'react'
import { Layout, TagsPopover, Text, Container } from '@harness/uicore'
import { Color } from '@harness/design-system'
import { defaultTo, isEmpty } from 'lodash-es'
import { useConfirmAction } from '@common/hooks/useConfirmAction'
import { useStrings } from 'framework/strings'
import type { EnvironmentResponseDTO } from 'services/cd-ng'
import RbacOptionsMenuButton from '@rbac/components/RbacOptionsMenuButton/RbacOptionsMenuButton'
import { ResourceType } from '@rbac/interfaces/ResourceType'
import { PermissionIdentifier } from '@rbac/interfaces/PermissionIdentifier'
import { EnvironmentType } from '@common/constants/EnvironmentType'
import { withTableData } from '@cd/utils/tableUtils'
import css from './EnvironmentsListColumns.module.scss'
interface EnvironmentRow {
row: { original: any }
}
export enum DeploymentStatus {
SUCCESS = 'success',
FAILED = 'failed'
}
const EnvironmentName = ({ row }: EnvironmentRow): React.ReactElement => {
const environment = row.original
return (
<div className={css.name}>
<Layout.Vertical>
<Text color={Color.BLACK}>{environment?.name}</Text>
<Layout.Horizontal flex>
<Text
margin={{ top: 'xsmall', right: 'medium' }}
color={Color.GREY_500}
style={{
fontSize: '12px',
lineHeight: '24px',
wordBreak: 'break-word'
}}
>
Id: {environment?.identifier}
</Text>
{!isEmpty(environment?.tags) && (
<div className={css.tags}>
<TagsPopover
className={css.tagsPopover}
iconProps={{ size: 14, color: Color.GREY_600 }}
tags={defaultTo(environment?.tags, {})}
/>
</div>
)}
</Layout.Horizontal>
</Layout.Vertical>
</div>
)
}
const EnvironmentDescription = ({ row }: EnvironmentRow): React.ReactElement => {
const environment = row.original
return (
<Layout.Vertical className={css.sourceDestinationWrapper}>
<div className={css.destination}>
<Text lineClamp={1} className={css.content}>
{environment?.description}
</Text>
</div>
</Layout.Vertical>
)
}
type EnvData = { environment: EnvironmentResponseDTO }
const withEnvironment = withTableData<EnvironmentResponseDTO, EnvData>(({ row }) => ({ environment: row.original }))
const withActions = withTableData<
EnvironmentResponseDTO,
EnvData & { actions: { [P in 'onEdit' | 'onDelete']?: (id: string) => void } }
>(({ row, column }) => ({
environment: row.original,
actions: (column as any).actions as { [P in 'onEdit' | 'onDelete']?: (id: string) => void }
}))
export const EnvironmentTypes = withEnvironment(({ environment }) => {
const { getString } = useStrings()
return (
<Text>{getString(environment.type === EnvironmentType.PRODUCTION ? 'production' : 'cd.preProductionType')}</Text>
)
})
export const EnvironmentMenu = withActions(({ environment, actions }) => {
const { getString } = useStrings()
const identifier = environment.identifier as string
const deleteEnvironment = useConfirmAction({
title: getString('cd.environmentDelete'),
message: (
<span
dangerouslySetInnerHTML={{ __html: getString('cd.environmentDeleteMessage', { name: environment.name }) }}
/>
),
action: () => {
actions.onDelete?.(identifier)
}
})
return (
<Layout.Horizontal style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
<Container
onClick={(e: React.MouseEvent) => {
e.stopPropagation()
}}
>
<RbacOptionsMenuButton
items={[
{
icon: 'edit',
text: getString('edit'),
onClick: () => actions.onEdit?.(identifier),
permission: {
resource: { resourceType: ResourceType.ENVIRONMENT },
permission: PermissionIdentifier.EDIT_ENVIRONMENT
}
},
{
icon: 'trash',
text: getString('delete'),
onClick: deleteEnvironment,
permission: {
resource: { resourceType: ResourceType.ENVIRONMENT },
permission: PermissionIdentifier.DELETE_ENVIRONMENT
}
}
]}
/>
</Container>
</Layout.Horizontal>
)
})
export { EnvironmentName, EnvironmentDescription }
|