Skip to content

Commit 3059d23

Browse files
kwasniewkwasniew
authored
feat: always show features table (#9446)
1 parent 6d02e33 commit 3059d23

File tree

1 file changed

+104
-124
lines changed

1 file changed

+104
-124
lines changed

‎frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

+104-124
Original file line numberDiff line numberDiff line change
@@ -148,14 +148,9 @@ export const ProjectFeatureToggles = ({
148148
'hide-setup' | 'show-setup'
149149
>(`onboarding-state:v1-${projectId}`, 'hide-setup');
150150

151-
const notOnboarding =
152-
project.onboardingStatus.status === 'onboarded' ||
153-
onboardingFlow === 'closed';
154151
const isOnboarding =
155152
project.onboardingStatus.status !== 'onboarded' &&
156153
onboardingFlow === 'visible';
157-
const noFeaturesExistInProject = project.featureTypeCounts?.length === 0;
158-
const showFeaturesTable = !noFeaturesExistInProject || notOnboarding;
159154

160155
const trackOnboardingFinish = (sdkName: string) => {
161156
if (!isOnboarding) {
@@ -495,128 +490,113 @@ export const ProjectFeatureToggles = ({
495490
/>
496491
}
497492
/>
498-
<ConditionallyRender
499-
condition={showFeaturesTable}
500-
show={
501-
<PageContent
502-
disableLoading
503-
disablePadding
504-
header={
505-
<ProjectFeatureTogglesHeader
506-
isLoading={initialLoad}
507-
totalItems={total}
508-
searchQuery={tableState.query || ''}
509-
onChangeSearchQuery={(query) => {
510-
setTableState({ query });
511-
}}
512-
dataToExport={data}
513-
environmentsToExport={environments}
514-
actions={
515-
<ColumnsMenu
516-
columns={[
517-
{
518-
header: 'Name',
519-
id: 'name',
520-
isVisible:
521-
columnVisibility.name,
522-
isStatic: true,
523-
},
524-
{
525-
header: 'Created',
526-
id: 'createdAt',
527-
isVisible:
528-
columnVisibility.createdAt,
529-
},
530-
{
531-
header: 'By',
532-
id: 'createdBy',
533-
isVisible:
534-
columnVisibility.createdBy,
535-
},
536-
{
537-
header: 'Last seen',
538-
id: 'lastSeenAt',
539-
isVisible:
540-
columnVisibility.lastSeenAt,
541-
},
542-
{
543-
header: 'Lifecycle',
544-
id: 'lifecycle',
545-
isVisible:
546-
columnVisibility.lifecycle,
547-
},
548-
{
549-
id: 'divider',
550-
},
551-
...environments.map(
552-
(environment) => ({
553-
header: environment,
554-
id: formatEnvironmentColumnId(
555-
environment,
556-
),
557-
isVisible:
558-
columnVisibility[
559-
formatEnvironmentColumnId(
560-
environment,
561-
)
562-
],
563-
}),
564-
),
565-
]}
566-
onToggle={onToggleColumnVisibility}
567-
/>
568-
}
493+
<PageContent
494+
disableLoading
495+
disablePadding
496+
header={
497+
<ProjectFeatureTogglesHeader
498+
isLoading={initialLoad}
499+
totalItems={total}
500+
searchQuery={tableState.query || ''}
501+
onChangeSearchQuery={(query) => {
502+
setTableState({ query });
503+
}}
504+
dataToExport={data}
505+
environmentsToExport={environments}
506+
actions={
507+
<ColumnsMenu
508+
columns={[
509+
{
510+
header: 'Name',
511+
id: 'name',
512+
isVisible: columnVisibility.name,
513+
isStatic: true,
514+
},
515+
{
516+
header: 'Created',
517+
id: 'createdAt',
518+
isVisible: columnVisibility.createdAt,
519+
},
520+
{
521+
header: 'By',
522+
id: 'createdBy',
523+
isVisible: columnVisibility.createdBy,
524+
},
525+
{
526+
header: 'Last seen',
527+
id: 'lastSeenAt',
528+
isVisible: columnVisibility.lastSeenAt,
529+
},
530+
{
531+
header: 'Lifecycle',
532+
id: 'lifecycle',
533+
isVisible: columnVisibility.lifecycle,
534+
},
535+
{
536+
id: 'divider',
537+
},
538+
...environments.map((environment) => ({
539+
header: environment,
540+
id: formatEnvironmentColumnId(
541+
environment,
542+
),
543+
isVisible:
544+
columnVisibility[
545+
formatEnvironmentColumnId(
546+
environment,
547+
)
548+
],
549+
})),
550+
]}
551+
onToggle={onToggleColumnVisibility}
569552
/>
570553
}
571-
bodyClass='noop'
572-
style={{ cursor: 'inherit' }}
573-
>
574-
<div
575-
ref={bodyLoadingRef}
576-
aria-busy={isPlaceholder}
577-
aria-live='polite'
578-
>
579-
<FilterRow>
580-
<ProjectOverviewFilters
581-
project={projectId}
582-
onChange={setTableState}
583-
state={filterState}
584-
/>
585-
<ButtonGroup>
586-
<PermissionIconButton
587-
permission={UPDATE_FEATURE}
588-
projectId={projectId}
589-
onClick={() => setModalOpen(true)}
590-
tooltipProps={{ title: 'Import' }}
591-
data-testid={IMPORT_BUTTON}
592-
data-loading-project
593-
>
594-
<ImportSvg />
595-
</PermissionIconButton>
596-
</ButtonGroup>
597-
</FilterRow>
598-
<SearchHighlightProvider
599-
value={tableState.query || ''}
600-
>
601-
<PaginatedTable
602-
tableInstance={table}
603-
totalItems={total}
604-
/>
605-
</SearchHighlightProvider>
606-
<ConditionallyRender
607-
condition={!data.length && !isPlaceholder}
608-
show={
609-
<TableEmptyState
610-
query={tableState.query || ''}
611-
/>
612-
}
613-
/>
614-
{rowActionsDialogs}
615-
{featureToggleModals}
616-
</div>
617-
</PageContent>
554+
/>
618555
}
619-
/>
556+
bodyClass='noop'
557+
style={{ cursor: 'inherit' }}
558+
>
559+
<div
560+
ref={bodyLoadingRef}
561+
aria-busy={isPlaceholder}
562+
aria-live='polite'
563+
>
564+
<FilterRow>
565+
<ProjectOverviewFilters
566+
project={projectId}
567+
onChange={setTableState}
568+
state={filterState}
569+
/>
570+
<ButtonGroup>
571+
<PermissionIconButton
572+
permission={UPDATE_FEATURE}
573+
projectId={projectId}
574+
onClick={() => setModalOpen(true)}
575+
tooltipProps={{ title: 'Import' }}
576+
data-testid={IMPORT_BUTTON}
577+
data-loading-project
578+
>
579+
<ImportSvg />
580+
</PermissionIconButton>
581+
</ButtonGroup>
582+
</FilterRow>
583+
<SearchHighlightProvider value={tableState.query || ''}>
584+
<PaginatedTable
585+
tableInstance={table}
586+
totalItems={total}
587+
/>
588+
</SearchHighlightProvider>
589+
<ConditionallyRender
590+
condition={!data.length && !isPlaceholder}
591+
show={
592+
<TableEmptyState query={tableState.query || ''} />
593+
}
594+
/>
595+
{rowActionsDialogs}
596+
{featureToggleModals}
597+
</div>
598+
</PageContent>
599+
620600
<ConnectSdkDialog
621601
open={connectSdkOpen}
622602
onClose={() => {

0 commit comments

Comments
 (0)