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 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 64x 208x 64x 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, { FC, useCallback } from 'react'
import { Container, ExpandingSearchInput, Pagination } from '@harness/uicore'
import type { Feature, Features } from 'services/cf'
import { useStrings } from 'framework/strings'
import { ContainerSpinner } from '@common/components/ContainerSpinner/ContainerSpinner'
import { NoData } from '@cf/components/NoData/NoData'
import imageUrl from '@cf/images/Feature_Flags_Teepee.svg'
import { AddFlagsToTargetGroupDialogStatus as STATUS } from '@cf/pages/target-group-detail/TargetGroupDetailPage.types'
import FlagsListing from '../FlagsListing/FlagsListing'
import css from './ListingWithSearchAndPagination.module.scss'
export interface ListingWithSearchAndPaginationProps {
state: STATUS
onSearch: (searchTerm: string) => void
flags: Features
setPageNumber: (pageNumber: number) => void
isFlagAdded: (identifier: Feature['identifier']) => boolean
}
const ListingWithSearchAndPagination: FC<ListingWithSearchAndPaginationProps> = ({
state,
onSearch,
flags,
setPageNumber,
isFlagAdded
}) => {
const { getString } = useStrings()
const disableRowVariations = useCallback(({ identifier }) => !isFlagAdded(identifier), [isFlagAdded])
return (
<div className={css.layout}>
<ExpandingSearchInput width="60%" alwaysExpanded onChange={onSearch} />
<div className={css.body}>
{state === STATUS.loading && <ContainerSpinner flex={{ align: 'center-center' }} />}
{state === STATUS.noSearchResults && (
<Container height="100%" flex={{ align: 'center-center' }}>
<NoData imageURL={imageUrl} message={getString('cf.noResultMatch')} />
</Container>
)}
{(state === STATUS.ok || state === STATUS.submitting) && (
<FlagsListing
flags={flags.features || []}
includeAddFlagCheckbox
disableRowVariations={disableRowVariations}
/>
)}
</div>
{state !== STATUS.noSearchResults && (
<Pagination
pageSize={flags.pageSize}
pageCount={flags.pageCount}
itemCount={flags.itemCount}
pageIndex={flags.pageIndex}
gotoPage={setPageNumber}
hidePageNumbers={flags.pageCount > 4}
/>
)}
</div>
)
}
export default ListingWithSearchAndPagination
|