Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-14 01:16:17 +02:00
Code Issues Projects Releases Wiki Activity

refactor: new table styling for project overview (#5334)

Browse Source 
This PR alters the table styling for the Project Overview table so that
we utilise more of the surrounding space:
This commit is contained in:
Fredrik Strand Oseberg 2023-11-14 13:57:06 +01:00 committed by GitHub
parent a001fc1b57
commit 357af740c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 155 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/component/project/Project/ProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx
View File

@ -646,28 +646,31 @@ export const PaginatedProjectFeatureToggles = ({
/> />
</SearchHighlightProvider> </SearchHighlightProvider>
<ConditionallyRender <Box sx={{ padding: theme.spacing(3) }}>
condition={rows.length === 0} <ConditionallyRender
show={ condition={rows.length === 0}
<ConditionallyRender show={
condition={searchValue?.length > 0} <ConditionallyRender
show={ condition={searchValue?.length > 0}
<TablePlaceholder> show={
No feature toggles found matching <TablePlaceholder>
&ldquo; No feature toggles found matching
{searchValue} &ldquo;
&rdquo; {searchValue}
</TablePlaceholder> &rdquo;
} </TablePlaceholder>
elseShow={ }
<TablePlaceholder> elseShow={
No feature toggles available. Get <TablePlaceholder>
started by adding a new feature toggle. No feature toggles available. Get
</TablePlaceholder> started by adding a new feature
} toggle.
/> </TablePlaceholder>
} }
/> />
}
/>
</Box>
<FeatureStaleDialog <FeatureStaleDialog
isStale={featureStaleDialogState.stale === true} isStale={featureStaleDialogState.stale === true}
isOpen={Boolean(featureStaleDialogState.featureId)} isOpen={Boolean(featureStaleDialogState.featureId)}

220
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -6,6 +6,7 @@ import {
Tooltip, Tooltip,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
Box,
} from '@mui/material'; } from '@mui/material';
import { Add } from '@mui/icons-material'; import { Add } from '@mui/icons-material';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
@ -172,6 +173,9 @@ export const ProjectFeatureToggles = ({
maxWidth: 50, maxWidth: 50,
disableSortBy: true, disableSortBy: true,
hideInMenu: true, hideInMenu: true,
styles: {
borderRadius: 0,
},
}, },
{ {
id: 'favorite', id: 'favorite',
@ -304,6 +308,9 @@ export const ProjectFeatureToggles = ({
), ),
disableSortBy: true, disableSortBy: true,
hideInMenu: true, hideInMenu: true,
styles: {
borderRadius: 0,
},
}, },
], ],
[projectId, environments, loading], [projectId, environments, loading],
@ -497,92 +504,118 @@ export const ProjectFeatureToggles = ({
<> <>
<PageContent <PageContent
isLoading={loading} isLoading={loading}
disablePadding
className={styles.container} className={styles.container}
header={ header={
<PageHeader <Box
titleElement={ sx={(theme) => ({
showTitle padding: `${theme.spacing(2.5)} ${theme.spacing(
? `Feature toggles (${total || rows.length})` 3.125,
: 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)
}
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 <PageHeader
condition={isSmallScreen} titleElement={
show={ showTitle
<Search ? `Feature toggles (${
initialValue={searchValue} total || rows.length
onChange={setSearchValue} })`
hasFilters : null
getSearchContext={getSearchContext}
id='projectFeatureToggles'
/>
} }
/> actions={
</PageHeader> <>
<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,
)
}
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={searchValue}
onChange={setSearchValue}
hasFilters
getSearchContext={getSearchContext}
id='projectFeatureToggles'
/>
}
/>
</PageHeader>
</Box>
} }
> >
<SearchHighlightProvider value={getSearchText(searchValue)}> <SearchHighlightProvider value={getSearchText(searchValue)}>
@ -598,17 +631,22 @@ export const ProjectFeatureToggles = ({
<ConditionallyRender <ConditionallyRender
condition={searchValue?.length > 0} condition={searchValue?.length > 0}
show={ show={
<TablePlaceholder> <Box sx={{ padding: theme.spacing(3) }}>
No feature toggles found matching &ldquo; <TablePlaceholder>
{searchValue} No feature toggles found matching
&rdquo; &ldquo;
</TablePlaceholder> {searchValue}
&rdquo;
</TablePlaceholder>
</Box>
} }
elseShow={ elseShow={
<TablePlaceholder> <Box sx={{ padding: theme.spacing(3) }}>
No feature toggles available. Get started by <TablePlaceholder>
adding a new feature toggle. No feature toggles available. Get
</TablePlaceholder> started by adding a new feature toggle.
</TablePlaceholder>
</Box>
} }
/> />
} }

2
src/server-dev.ts
View File

@ -47,7 +47,7 @@ process.nextTick(async () => {
disableEnvsOnRevive: true, disableEnvsOnRevive: true,
playgroundImprovements: true, playgroundImprovements: true,
featureSearchAPI: true, featureSearchAPI: true,
featureSearchFrontend: true, featureSearchFrontend: false,
}, },
}, },
authentication: { authentication: {