mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-17 13:46:47 +02:00
752 lines
30 KiB
TypeScript
752 lines
30 KiB
TypeScript
import React, {
|
|
type CSSProperties,
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from 'react';
|
|
import {
|
|
Checkbox,
|
|
IconButton,
|
|
styled,
|
|
Tooltip,
|
|
useMediaQuery,
|
|
Box,
|
|
useTheme,
|
|
} from '@mui/material';
|
|
import { Add } from '@mui/icons-material';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
useFlexLayout,
|
|
usePagination,
|
|
useRowSelect,
|
|
useSortBy,
|
|
useTable,
|
|
} from 'react-table';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { PageHeader } from 'component/common/PageHeader/PageHeader';
|
|
import { PageContent } from 'component/common/PageContent/PageContent';
|
|
import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
|
|
import { getCreateTogglePath } from 'utils/routePathHelpers';
|
|
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
|
|
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
|
|
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
|
|
import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
|
|
import { FeatureSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureSeenCell';
|
|
import { FeatureTypeCell } from 'component/common/Table/cells/FeatureTypeCell/FeatureTypeCell';
|
|
import { IProject } from 'interfaces/project';
|
|
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
|
|
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
|
|
import { FeatureStaleDialog } from 'component/common/FeatureStaleDialog/FeatureStaleDialog';
|
|
import { FeatureArchiveDialog } from 'component/common/FeatureArchiveDialog/FeatureArchiveDialog';
|
|
import { getColumnValues, includesFilter, useSearch } from 'hooks/useSearch';
|
|
import { Search } from 'component/common/Search/Search';
|
|
import { IFeatureToggleListItem } from 'interfaces/featureToggle';
|
|
import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
|
|
import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/FavoriteIconCell';
|
|
import { ProjectEnvironmentType } from './hooks/useEnvironmentsRef';
|
|
import { ActionsCell } from './ActionsCell/ActionsCell';
|
|
import { ColumnsMenu } from './ColumnsMenu/ColumnsMenu';
|
|
import { useStyles } from './ProjectFeatureToggles.styles';
|
|
import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi';
|
|
import { FeatureTagCell } from 'component/common/Table/cells/FeatureTagCell/FeatureTagCell';
|
|
import FileDownload from '@mui/icons-material/FileDownload';
|
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
|
import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
|
|
import { MemoizedRowSelectCell } from './RowSelectCell/RowSelectCell';
|
|
import { BatchSelectionActionsBar } from 'component/common/BatchSelectionActionsBar/BatchSelectionActionsBar';
|
|
import { ProjectFeaturesBatchActions } from './ProjectFeaturesBatchActions/ProjectFeaturesBatchActions';
|
|
import { MemoizedFeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
|
|
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
|
import { ListItemType } from './ProjectFeatureToggles.types';
|
|
import { createFeatureToggleCell } from './FeatureToggleSwitch/createFeatureToggleCell';
|
|
import { useFeatureToggleSwitch } from './FeatureToggleSwitch/useFeatureToggleSwitch';
|
|
import useLoading from 'hooks/useLoading';
|
|
import { StickyPaginationBar } from '../../../common/Table/StickyPaginationBar/StickyPaginationBar';
|
|
import {
|
|
DEFAULT_PAGE_LIMIT,
|
|
useFeatureSearch,
|
|
} from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
|
|
import mapValues from 'lodash.mapvalues';
|
|
import { usePersistentTableState } from 'hooks/usePersistentTableState';
|
|
import { BooleansStringParam } from 'utils/serializeQueryParams';
|
|
import {
|
|
NumberParam,
|
|
StringParam,
|
|
ArrayParam,
|
|
withDefault,
|
|
} from 'use-query-params';
|
|
|
|
const StyledResponsiveButton = styled(ResponsiveButton)(() => ({
|
|
whiteSpace: 'nowrap',
|
|
}));
|
|
|
|
interface IPaginatedProjectFeatureTogglesProps {
|
|
environments: IProject['environments'];
|
|
style?: CSSProperties;
|
|
refreshInterval?: number;
|
|
storageKey?: string;
|
|
}
|
|
|
|
const staticColumns = ['Select', 'Actions', 'name', 'favorite'];
|
|
|
|
export const PaginatedProjectFeatureToggles = ({
|
|
environments,
|
|
style,
|
|
refreshInterval = 15 * 1000,
|
|
storageKey = 'project-feature-toggles',
|
|
}: IPaginatedProjectFeatureTogglesProps) => {
|
|
const projectId = useRequiredPathParam('projectId');
|
|
const [tableState, setTableState] = usePersistentTableState(
|
|
`${storageKey}-${projectId}`,
|
|
{
|
|
offset: withDefault(NumberParam, 0),
|
|
limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT),
|
|
query: StringParam,
|
|
favoritesFirst: withDefault(BooleansStringParam, true),
|
|
sortBy: withDefault(StringParam, 'createdAt'),
|
|
sortOrder: withDefault(StringParam, 'desc'),
|
|
columns: ArrayParam,
|
|
},
|
|
);
|
|
|
|
const { features, total, refetch, loading, initialLoad } = useFeatureSearch(
|
|
mapValues({ ...tableState, project: `IS:${projectId}` }, (value) =>
|
|
value ? `${value}` : undefined,
|
|
),
|
|
{
|
|
refreshInterval,
|
|
},
|
|
);
|
|
const onChange = refetch;
|
|
|
|
const { classes: styles } = useStyles();
|
|
const bodyLoadingRef = useLoading(loading);
|
|
const headerLoadingRef = useLoading(initialLoad);
|
|
const theme = useTheme();
|
|
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
|
|
const [featureStaleDialogState, setFeatureStaleDialogState] = useState<{
|
|
featureId?: string;
|
|
stale?: boolean;
|
|
}>({});
|
|
const [featureArchiveState, setFeatureArchiveState] = useState<
|
|
string | undefined
|
|
>();
|
|
const [isCustomColumns, setIsCustomColumns] = useState(
|
|
Boolean(tableState.columns),
|
|
);
|
|
const { onToggle: onFeatureToggle, modals: featureToggleModals } =
|
|
useFeatureToggleSwitch(projectId);
|
|
|
|
const navigate = useNavigate();
|
|
const { favorite, unfavorite } = useFavoriteFeaturesApi();
|
|
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
|
|
const [showExportDialog, setShowExportDialog] = useState(false);
|
|
const { uiConfig } = useUiConfig();
|
|
|
|
const onFavorite = useCallback(
|
|
async (feature: IFeatureToggleListItem) => {
|
|
if (feature?.favorite) {
|
|
await unfavorite(projectId, feature.name);
|
|
} else {
|
|
await favorite(projectId, feature.name);
|
|
}
|
|
onChange();
|
|
},
|
|
[projectId, onChange],
|
|
);
|
|
|
|
const showTagsColumn = useMemo(
|
|
() => features.some((feature) => feature?.tags?.length),
|
|
[features],
|
|
);
|
|
|
|
const columns = useMemo(
|
|
() => [
|
|
{
|
|
id: 'Select',
|
|
Header: ({ getToggleAllRowsSelectedProps }: any) => (
|
|
<Checkbox {...getToggleAllRowsSelectedProps()} />
|
|
),
|
|
Cell: ({ row }: any) => (
|
|
<MemoizedRowSelectCell
|
|
{...row?.getToggleRowSelectedProps?.()}
|
|
/>
|
|
),
|
|
maxWidth: 50,
|
|
disableSortBy: true,
|
|
hideInMenu: true,
|
|
styles: {
|
|
borderRadius: 0,
|
|
},
|
|
},
|
|
{
|
|
id: 'favorite',
|
|
Header: (
|
|
<FavoriteIconHeader
|
|
isActive={tableState.favoritesFirst}
|
|
onClick={() =>
|
|
setTableState({
|
|
favoritesFirst: !tableState.favoritesFirst,
|
|
})
|
|
}
|
|
/>
|
|
),
|
|
accessor: 'favorite',
|
|
Cell: ({ row: { original: feature } }: any) => (
|
|
<FavoriteIconCell
|
|
value={feature?.favorite}
|
|
onClick={() => onFavorite(feature)}
|
|
/>
|
|
),
|
|
maxWidth: 50,
|
|
disableSortBy: true,
|
|
hideInMenu: true,
|
|
},
|
|
{
|
|
Header: 'Seen',
|
|
accessor: 'lastSeenAt',
|
|
Cell: ({ value, row: { original: feature } }: any) => {
|
|
return (
|
|
<MemoizedFeatureEnvironmentSeenCell
|
|
feature={feature}
|
|
data-loading
|
|
/>
|
|
);
|
|
},
|
|
align: 'center',
|
|
maxWidth: 80,
|
|
},
|
|
{
|
|
Header: 'Type',
|
|
accessor: 'type',
|
|
Cell: FeatureTypeCell,
|
|
align: 'center',
|
|
filterName: 'type',
|
|
maxWidth: 80,
|
|
},
|
|
{
|
|
Header: 'Name',
|
|
accessor: 'name',
|
|
Cell: ({
|
|
value,
|
|
}: {
|
|
value: string;
|
|
}) => (
|
|
<Tooltip title={value} arrow describeChild>
|
|
<span>
|
|
<LinkCell
|
|
title={value}
|
|
to={`/projects/${projectId}/features/${value}`}
|
|
/>
|
|
</span>
|
|
</Tooltip>
|
|
),
|
|
minWidth: 100,
|
|
sortType: 'alphanumeric',
|
|
searchable: true,
|
|
},
|
|
...(showTagsColumn
|
|
? [
|
|
{
|
|
id: 'tags',
|
|
Header: 'Tags',
|
|
accessor: (row: IFeatureToggleListItem) =>
|
|
row.tags
|
|
?.map(({ type, value }) => `${type}:${value}`)
|
|
.join('\n') || '',
|
|
Cell: FeatureTagCell,
|
|
width: 80,
|
|
searchable: true,
|
|
filterName: 'tags',
|
|
filterBy(
|
|
row: IFeatureToggleListItem,
|
|
values: string[],
|
|
) {
|
|
return includesFilter(
|
|
getColumnValues(this, row),
|
|
values,
|
|
);
|
|
},
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
Header: 'Created',
|
|
accessor: 'createdAt',
|
|
Cell: DateCell,
|
|
minWidth: 120,
|
|
},
|
|
...environments.map(
|
|
(projectEnvironment: ProjectEnvironmentType | string) => {
|
|
const name =
|
|
typeof projectEnvironment === 'string'
|
|
? projectEnvironment
|
|
: (projectEnvironment as ProjectEnvironmentType)
|
|
.environment;
|
|
const isChangeRequestEnabled =
|
|
isChangeRequestConfigured(name);
|
|
const FeatureToggleCell = createFeatureToggleCell(
|
|
projectId,
|
|
name,
|
|
isChangeRequestEnabled,
|
|
onChange,
|
|
onFeatureToggle,
|
|
);
|
|
|
|
return {
|
|
Header: loading ? () => '' : name,
|
|
maxWidth: 90,
|
|
id: `environment:${name}`,
|
|
accessor: (row: ListItemType) => {
|
|
return row.environments?.[name]?.enabled;
|
|
},
|
|
align: 'center',
|
|
Cell: FeatureToggleCell,
|
|
sortType: 'boolean',
|
|
sortDescFirst: true,
|
|
filterName: name,
|
|
filterParsing: (value: boolean) =>
|
|
value ? 'enabled' : 'disabled',
|
|
};
|
|
},
|
|
),
|
|
{
|
|
id: 'Actions',
|
|
maxWidth: 56,
|
|
width: 56,
|
|
Cell: (props: {
|
|
row: {
|
|
original: ListItemType;
|
|
};
|
|
}) => (
|
|
<ActionsCell
|
|
projectId={projectId}
|
|
onOpenArchiveDialog={setFeatureArchiveState}
|
|
onOpenStaleDialog={setFeatureStaleDialogState}
|
|
{...props}
|
|
/>
|
|
),
|
|
disableSortBy: true,
|
|
hideInMenu: true,
|
|
styles: {
|
|
borderRadius: 0,
|
|
},
|
|
},
|
|
],
|
|
[projectId, environments, loading, tableState.favoritesFirst, onChange],
|
|
);
|
|
|
|
const [showTitle, setShowTitle] = useState(true);
|
|
|
|
const featuresData = useMemo(
|
|
() =>
|
|
features.map((feature) => ({
|
|
...feature,
|
|
environments: Object.fromEntries(
|
|
environments.map((env) => {
|
|
const thisEnv = feature?.environments?.find(
|
|
(featureEnvironment) =>
|
|
featureEnvironment?.name === env.environment,
|
|
);
|
|
return [
|
|
env.environment,
|
|
{
|
|
name: env.environment,
|
|
enabled: thisEnv?.enabled || false,
|
|
variantCount: thisEnv?.variantCount || 0,
|
|
lastSeenAt: thisEnv?.lastSeenAt,
|
|
type: thisEnv?.type,
|
|
hasStrategies: thisEnv?.hasStrategies,
|
|
hasEnabledStrategies:
|
|
thisEnv?.hasEnabledStrategies,
|
|
},
|
|
];
|
|
}),
|
|
),
|
|
someEnabledEnvironmentHasVariants:
|
|
feature.environments?.some(
|
|
(featureEnvironment) =>
|
|
featureEnvironment.variantCount &&
|
|
featureEnvironment.variantCount > 0 &&
|
|
featureEnvironment.enabled,
|
|
) || false,
|
|
})),
|
|
[features, environments],
|
|
);
|
|
|
|
const { getSearchText, getSearchContext } = useSearch(
|
|
columns,
|
|
tableState.query || '',
|
|
featuresData,
|
|
);
|
|
|
|
const allColumnIds = columns
|
|
.map(
|
|
(column: any) =>
|
|
(column?.id as string) ||
|
|
(typeof column?.accessor === 'string'
|
|
? (column?.accessor as string)
|
|
: ''),
|
|
)
|
|
.filter(Boolean);
|
|
|
|
const initialState = useMemo(
|
|
() => ({
|
|
sortBy: [
|
|
{
|
|
id: tableState.sortBy || 'createdAt',
|
|
desc: tableState.sortOrder === 'desc',
|
|
},
|
|
],
|
|
...(tableState.columns
|
|
? {
|
|
hiddenColumns: allColumnIds.filter(
|
|
(id) =>
|
|
!tableState.columns?.includes(id) &&
|
|
!staticColumns.includes(id),
|
|
),
|
|
}
|
|
: {}),
|
|
pageSize: tableState.limit,
|
|
pageIndex: tableState.offset * tableState.limit,
|
|
selectedRowIds: {},
|
|
}),
|
|
[initialLoad],
|
|
);
|
|
|
|
const data = useMemo(() => {
|
|
if (initialLoad || loading) {
|
|
const loadingData = Array(tableState.limit)
|
|
.fill(null)
|
|
.map((_, index) => ({
|
|
id: index, // Assuming `id` is a required property
|
|
type: '-',
|
|
name: `Feature name ${index}`,
|
|
createdAt: new Date().toISOString(),
|
|
environments: [
|
|
{
|
|
name: 'production',
|
|
enabled: false,
|
|
},
|
|
],
|
|
}));
|
|
// Coerce loading data to FeatureSchema[]
|
|
return loadingData as unknown as typeof featuresData;
|
|
}
|
|
return featuresData;
|
|
}, [loading, featuresData]);
|
|
|
|
const pageCount = useMemo(
|
|
() => Math.ceil((total || 0) / tableState.limit),
|
|
[total, tableState.limit],
|
|
);
|
|
const getRowId = useCallback((row: any) => row.name, []);
|
|
|
|
const {
|
|
allColumns,
|
|
headerGroups,
|
|
rows,
|
|
state: { pageIndex, pageSize, hiddenColumns, selectedRowIds, sortBy },
|
|
canNextPage,
|
|
canPreviousPage,
|
|
previousPage,
|
|
nextPage,
|
|
setPageSize,
|
|
prepareRow,
|
|
setHiddenColumns,
|
|
toggleAllRowsSelected,
|
|
} = useTable(
|
|
{
|
|
columns: columns as any[], // TODO: fix after `react-table` v8 update
|
|
data,
|
|
initialState,
|
|
autoResetHiddenColumns: false,
|
|
autoResetSelectedRows: false,
|
|
disableSortRemove: true,
|
|
autoResetSortBy: false,
|
|
manualSortBy: true,
|
|
manualPagination: true,
|
|
pageCount,
|
|
getRowId,
|
|
},
|
|
useFlexLayout,
|
|
useSortBy,
|
|
usePagination,
|
|
useRowSelect,
|
|
);
|
|
|
|
// Refetching - https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/faq.md#how-can-i-use-the-table-state-to-fetch-new-data
|
|
useEffect(() => {
|
|
setTableState({
|
|
offset: pageIndex * pageSize,
|
|
limit: pageSize,
|
|
sortBy: sortBy[0]?.id || 'createdAt',
|
|
sortOrder: sortBy[0]?.desc ? 'desc' : 'asc',
|
|
});
|
|
}, [pageIndex, pageSize, sortBy]);
|
|
|
|
useEffect(() => {
|
|
// FIXME: refactor column visibility logic when switching to react-table v8
|
|
if (!loading && isCustomColumns) {
|
|
setTableState({
|
|
columns:
|
|
hiddenColumns !== undefined
|
|
? allColumnIds.filter(
|
|
(id) =>
|
|
!hiddenColumns.includes(id) &&
|
|
!staticColumns.includes(id),
|
|
)
|
|
: undefined,
|
|
});
|
|
}
|
|
}, [loading, isCustomColumns, hiddenColumns]);
|
|
|
|
const showPaginationBar = Boolean(total && total > pageSize);
|
|
const paginatedStyles = showPaginationBar
|
|
? {
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
}
|
|
: {};
|
|
|
|
return (
|
|
<>
|
|
<PageContent
|
|
disableLoading
|
|
disablePadding
|
|
className={styles.container}
|
|
style={{ ...paginatedStyles, ...style }}
|
|
header={
|
|
<Box
|
|
ref={headerLoadingRef}
|
|
aria-busy={initialLoad}
|
|
aria-live='polite'
|
|
sx={(theme) => ({
|
|
padding: `${theme.spacing(2.5)} ${theme.spacing(
|
|
3.125,
|
|
)}`,
|
|
})}
|
|
>
|
|
<PageHeader
|
|
titleElement={
|
|
showTitle
|
|
? `Feature toggles (${
|
|
total || rows.length
|
|
})`
|
|
: null
|
|
}
|
|
actions={
|
|
<>
|
|
<ConditionallyRender
|
|
condition={!isSmallScreen}
|
|
show={
|
|
<Search
|
|
data-loading
|
|
placeholder='Search and Filter'
|
|
expandable
|
|
initialValue={
|
|
tableState.query || ''
|
|
}
|
|
onChange={(value) => {
|
|
setTableState({
|
|
query: value,
|
|
});
|
|
}}
|
|
onFocus={() =>
|
|
setShowTitle(false)
|
|
}
|
|
onBlur={() =>
|
|
setShowTitle(true)
|
|
}
|
|
hasFilters
|
|
getSearchContext={
|
|
getSearchContext
|
|
}
|
|
id='projectFeatureToggles'
|
|
/>
|
|
}
|
|
/>
|
|
<ColumnsMenu
|
|
allColumns={allColumns}
|
|
staticColumns={staticColumns}
|
|
dividerAfter={['createdAt']}
|
|
dividerBefore={['Actions']}
|
|
isCustomized={isCustomColumns}
|
|
setHiddenColumns={setHiddenColumns}
|
|
onCustomize={() =>
|
|
setIsCustomColumns(true)
|
|
}
|
|
/>
|
|
<PageHeader.Divider
|
|
sx={{ marginLeft: 0 }}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={Boolean(
|
|
uiConfig?.flags
|
|
?.featuresExportImport,
|
|
)}
|
|
show={
|
|
<Tooltip
|
|
title='Export toggles visible in the table below'
|
|
arrow
|
|
>
|
|
<IconButton
|
|
data-loading
|
|
onClick={() =>
|
|
setShowExportDialog(
|
|
true,
|
|
)
|
|
}
|
|
sx={(theme) => ({
|
|
marginRight:
|
|
theme.spacing(2),
|
|
})}
|
|
>
|
|
<FileDownload />
|
|
</IconButton>
|
|
</Tooltip>
|
|
}
|
|
/>
|
|
<StyledResponsiveButton
|
|
onClick={() =>
|
|
navigate(
|
|
getCreateTogglePath(projectId),
|
|
)
|
|
}
|
|
maxWidth='960px'
|
|
Icon={Add}
|
|
projectId={projectId}
|
|
permission={CREATE_FEATURE}
|
|
data-testid='NAVIGATE_TO_CREATE_FEATURE'
|
|
>
|
|
New feature toggle
|
|
</StyledResponsiveButton>
|
|
</>
|
|
}
|
|
>
|
|
<ConditionallyRender
|
|
condition={isSmallScreen}
|
|
show={
|
|
<Search
|
|
initialValue={tableState.query || ''}
|
|
onChange={(value) => {
|
|
setTableState({ query: value });
|
|
}}
|
|
hasFilters
|
|
getSearchContext={getSearchContext}
|
|
id='projectFeatureToggles'
|
|
/>
|
|
}
|
|
/>
|
|
</PageHeader>
|
|
</Box>
|
|
}
|
|
>
|
|
<div
|
|
ref={bodyLoadingRef}
|
|
aria-busy={loading}
|
|
aria-live='polite'
|
|
>
|
|
<SearchHighlightProvider
|
|
value={getSearchText(tableState.query || '')}
|
|
>
|
|
<VirtualizedTable
|
|
rows={rows}
|
|
headerGroups={headerGroups}
|
|
prepareRow={prepareRow}
|
|
/>
|
|
</SearchHighlightProvider>
|
|
|
|
<ConditionallyRender
|
|
condition={rows.length === 0}
|
|
show={
|
|
<ConditionallyRender
|
|
condition={(tableState.query || '')?.length > 0}
|
|
show={
|
|
<Box sx={{ padding: theme.spacing(3) }}>
|
|
<TablePlaceholder>
|
|
No feature toggles found matching
|
|
“
|
|
{tableState.query}
|
|
”
|
|
</TablePlaceholder>
|
|
</Box>
|
|
}
|
|
elseShow={
|
|
<Box sx={{ padding: theme.spacing(3) }}>
|
|
<TablePlaceholder>
|
|
No feature toggles available. Get
|
|
started by adding a new feature
|
|
toggle.
|
|
</TablePlaceholder>
|
|
</Box>
|
|
}
|
|
/>
|
|
}
|
|
/>
|
|
<FeatureStaleDialog
|
|
isStale={featureStaleDialogState.stale === true}
|
|
isOpen={Boolean(featureStaleDialogState.featureId)}
|
|
onClose={() => {
|
|
setFeatureStaleDialogState({});
|
|
onChange();
|
|
}}
|
|
featureId={featureStaleDialogState.featureId || ''}
|
|
projectId={projectId}
|
|
/>
|
|
<FeatureArchiveDialog
|
|
isOpen={Boolean(featureArchiveState)}
|
|
onConfirm={onChange}
|
|
onClose={() => {
|
|
setFeatureArchiveState(undefined);
|
|
}}
|
|
featureIds={[featureArchiveState || '']}
|
|
projectId={projectId}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={
|
|
Boolean(uiConfig?.flags?.featuresExportImport) &&
|
|
!loading
|
|
}
|
|
show={
|
|
<ExportDialog
|
|
showExportDialog={showExportDialog}
|
|
data={data}
|
|
onClose={() => setShowExportDialog(false)}
|
|
environments={environments.map(
|
|
({ environment }) => environment,
|
|
)}
|
|
/>
|
|
}
|
|
/>
|
|
{featureToggleModals}
|
|
</div>
|
|
</PageContent>
|
|
<ConditionallyRender
|
|
condition={showPaginationBar}
|
|
show={
|
|
<StickyPaginationBar
|
|
totalItems={total || 0}
|
|
pageIndex={pageIndex}
|
|
fetchNextPage={nextPage}
|
|
fetchPrevPage={previousPage}
|
|
pageSize={pageSize}
|
|
setPageLimit={setPageSize}
|
|
/>
|
|
}
|
|
/>
|
|
<BatchSelectionActionsBar
|
|
count={Object.keys(selectedRowIds).length}
|
|
>
|
|
<ProjectFeaturesBatchActions
|
|
selectedIds={Object.keys(selectedRowIds)}
|
|
data={features}
|
|
projectId={projectId}
|
|
onResetSelection={() => toggleAllRowsSelected(false)}
|
|
/>
|
|
</BatchSelectionActionsBar>
|
|
</>
|
|
);
|
|
};
|