Skip to content

Commit

Permalink
refactor: new table styling for project overview (#5334)
Browse files Browse the repository at this point in the history 
This PR alters the table styling for the Project Overview table so that
we utilise more of the surrounding space:
  • Loading branch information
@FredrikOseberg
FredrikOseberg committed Nov 14, 2023
1 parent a001fc1 commit 357af74
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 113 deletions.
47 changes: 25 additions & 22 deletions ...nd/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
View file
Expand Up @@ -646,28 +646,31 @@ export const PaginatedProjectFeatureToggles = ({
/>
</SearchHighlightProvider>

<ConditionallyRender
condition={rows.length === 0}
show={
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<TablePlaceholder>
No feature toggles found matching
&ldquo;
{searchValue}
&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
No feature toggles available. Get
started by adding a new feature toggle.
</TablePlaceholder>
}
/>
}
/>
<Box sx={{ padding: theme.spacing(3) }}>
<ConditionallyRender
condition={rows.length === 0}
show={
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<TablePlaceholder>
No feature toggles found matching
&ldquo;
{searchValue}
&rdquo;
</TablePlaceholder>
}
elseShow={
<TablePlaceholder>
No feature toggles available. Get
started by adding a new feature
toggle.
</TablePlaceholder>
}
/>
}
/>
</Box>
<FeatureStaleDialog
isStale={featureStaleDialogState.stale === true}
isOpen={Boolean(featureStaleDialogState.featureId)}
Expand Down
218 changes: 128 additions & 90 deletions frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View file
Expand Up @@ -6,6 +6,7 @@ import {
Tooltip,
useMediaQuery,
useTheme,
Box,
} from '@mui/material';
import { Add } from '@mui/icons-material';
import { useNavigate, useSearchParams } from 'react-router-dom';
Expand Down Expand Up @@ -172,6 +173,9 @@ export const ProjectFeatureToggles = ({
maxWidth: 50,
disableSortBy: true,
hideInMenu: true,
styles: {
borderRadius: 0,
},
},
{
id: 'favorite',
Expand Down Expand Up @@ -304,6 +308,9 @@ export const ProjectFeatureToggles = ({
),
disableSortBy: true,
hideInMenu: true,
styles: {
borderRadius: 0,
},
},
],
[projectId, environments, loading],
Expand Down Expand Up @@ -497,92 +504,118 @@ export const ProjectFeatureToggles = ({
<>
<PageContent
isLoading={loading}
disablePadding
className={styles.container}
header={
<PageHeader
titleElement={
showTitle
? `Feature toggles (${total || rows.length})`
: null
}
actions={
<>
<ConditionallyRender
condition={!isSmallScreen}
show={
<Search
placeholder='Search and Filter'
expandable
initialValue={searchValue}
onChange={setSearchValue}
onFocus={() => setShowTitle(false)}
onBlur={() => setShowTitle(true)}
hasFilters
getSearchContext={getSearchContext}
id='projectFeatureToggles'
/>
}
/>
<ColumnsMenu
allColumns={allColumns}
staticColumns={staticColumns}
dividerAfter={['createdAt']}
dividerBefore={['Actions']}
isCustomized={Boolean(storedParams.columns)}
setHiddenColumns={setHiddenColumns}
/>
<PageHeader.Divider sx={{ marginLeft: 0 }} />
<ConditionallyRender
condition={Boolean(
uiConfig?.flags?.featuresExportImport,
)}
show={
<Tooltip
title='Export toggles visible in the table below'
arrow
>
<IconButton
onClick={() =>
setShowExportDialog(true)
<Box
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
placeholder='Search and Filter'
expandable
initialValue={searchValue}
onChange={setSearchValue}
onFocus={() =>
setShowTitle(false)
}
onBlur={() =>
setShowTitle(true)
}
hasFilters
getSearchContext={
getSearchContext
}
sx={(theme) => ({
marginRight:
theme.spacing(2),
})}
id='projectFeatureToggles'
/>
}
/>
<ColumnsMenu
allColumns={allColumns}
staticColumns={staticColumns}
dividerAfter={['createdAt']}
dividerBefore={['Actions']}
isCustomized={Boolean(
storedParams.columns,
)}
setHiddenColumns={setHiddenColumns}
/>
<PageHeader.Divider
sx={{ marginLeft: 0 }}
/>
<ConditionallyRender
condition={Boolean(
uiConfig?.flags
?.featuresExportImport,
)}
show={
<Tooltip
title='Export toggles visible in the table below'
arrow
>
<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={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
id='projectFeatureToggles'
/>
<IconButton
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>
</>
}
/>
</PageHeader>
>
<ConditionallyRender
condition={isSmallScreen}
show={
<Search
initialValue={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
id='projectFeatureToggles'
/>
}
/>
</PageHeader>
</Box>
}
>
<SearchHighlightProvider value={getSearchText(searchValue)}>
Expand All @@ -598,17 +631,22 @@ export const ProjectFeatureToggles = ({
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<TablePlaceholder>
No feature toggles found matching &ldquo;
{searchValue}
&rdquo;
</TablePlaceholder>
<Box sx={{ padding: theme.spacing(3) }}>
<TablePlaceholder>
No feature toggles found matching
&ldquo;
{searchValue}
&rdquo;
</TablePlaceholder>
</Box>
}
elseShow={
<TablePlaceholder>
No feature toggles available. Get started by
adding a new feature toggle.
</TablePlaceholder>
<Box sx={{ padding: theme.spacing(3) }}>
<TablePlaceholder>
No feature toggles available. Get
started by adding a new feature toggle.
</TablePlaceholder>
</Box>
}
/>
}
Expand Down
2 changes: 1 addition & 1 deletion src/server-dev.ts
View file
Expand Up @@ -47,7 +47,7 @@ process.nextTick(async () => {
disableEnvsOnRevive: true,
playgroundImprovements: true,
featureSearchAPI: true,
featureSearchFrontend: true,
featureSearchFrontend: false,
},
},
authentication: {
Expand Down

0 comments on commit 357af74

Please sign in to comment.