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 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 282x 123x 123x 114x 114x 53x 114x 56x 114x 498x 114x 53x 114x 56x 266x 5x 114x 960x 4x | /*
* 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.
*/
/* eslint-disable react/display-name */
import React, { FC, useMemo } from 'react'
import { TableV2 } from '@harness/uicore'
import type { Column } from 'react-table'
import type { Feature } from 'services/cf'
import { useStrings } from 'framework/strings'
import FlagDetailsCell from './FlagDetailsCell'
import VariationsCell from './VariationsCell'
import AddFlagCheckboxCell from './AddFlagCheckboxCell'
import DeleteFlagButtonCell from './DeleteFlagButtonCell'
import css from './FlagsListing.module.scss'
export interface FlagsListingProps {
flags: Feature[]
includeAddFlagCheckbox?: boolean
disableRowVariations?: (flag: Feature) => boolean
onRowDelete?: (flag: Feature) => void
}
const FlagsListing: FC<FlagsListingProps> = ({
flags,
includeAddFlagCheckbox = false,
onRowDelete,
disableRowVariations = () => false
}) => {
const { getString } = useStrings()
const columns = useMemo<Column<Feature>[]>(() => {
let flagColWidth = 100
if (includeAddFlagCheckbox) {
flagColWidth -= 5
}
if (onRowDelete) {
flagColWidth -= 5
}
const cols: Column<Feature>[] = [
{
Header: getString('cf.segmentDetail.headingFeatureFlag'),
width: `calc(${flagColWidth}% - 300px)`,
id: 'flag-info',
Cell: FlagDetailsCell
},
{
Header: getString('cf.segmentDetail.headingVariation'),
id: 'variation',
width: '300px',
accessor: (flag: Feature) => ({
disabled: disableRowVariations(flag)
}),
Cell: VariationsCell
}
]
if (includeAddFlagCheckbox) {
cols.unshift({
Header: '',
width: '5%',
id: 'checked',
Cell: AddFlagCheckboxCell
})
}
if (onRowDelete) {
cols.push({
Header: '',
width: '5%',
id: 'actions',
accessor: (flag: Feature) => ({
onRowDelete: () => onRowDelete(flag)
}),
Cell: DeleteFlagButtonCell
})
}
return cols
}, [disableRowVariations, includeAddFlagCheckbox, onRowDelete])
return <TableV2<Feature> getRowClassName={() => css.alignBaseline} columns={columns} data={flags} />
}
export default FlagsListing
|