Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01: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

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

@ -646,6 +646,7 @@ export const PaginatedProjectFeatureToggles = ({
/>
</SearchHighlightProvider>
<Box sx={{ padding: theme.spacing(3) }}>
<ConditionallyRender
condition={rows.length === 0}
show={
@ -662,12 +663,14 @@ export const PaginatedProjectFeatureToggles = ({
elseShow={
<TablePlaceholder>
No feature toggles available. Get
started by adding a new feature toggle.
started by adding a new feature
toggle.
</TablePlaceholder>
}
/>
}
/>
</Box>
<FeatureStaleDialog
isStale={featureStaleDialogState.stale === true}
isOpen={Boolean(featureStaleDialogState.featureId)}

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

@ -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';
@ -172,6 +173,9 @@ export const ProjectFeatureToggles = ({
maxWidth: 50,
disableSortBy: true,
hideInMenu: true,
styles: {
borderRadius: 0,
},
},
{
id: 'favorite',
@ -304,6 +308,9 @@ export const ProjectFeatureToggles = ({
),
disableSortBy: true,
hideInMenu: true,
styles: {
borderRadius: 0,
},
},
],
[projectId, environments, loading],
@ -497,12 +504,22 @@ export const ProjectFeatureToggles = ({
<>
<PageContent
isLoading={loading}
disablePadding
className={styles.container}
header={
<Box
sx={(theme) => ({
padding: `${theme.spacing(2.5)} ${theme.spacing(
3.125,
)}`,
})}
>
<PageHeader
titleElement={
showTitle
? `Feature toggles (${total || rows.length})`
? `Feature toggles (${
total || rows.length
})`
: null
}
actions={
@ -515,10 +532,16 @@ export const ProjectFeatureToggles = ({
expandable
initialValue={searchValue}
onChange={setSearchValue}
onFocus={() => setShowTitle(false)}
onBlur={() => setShowTitle(true)}
onFocus={() =>
setShowTitle(false)
}
onBlur={() =>
setShowTitle(true)
}
hasFilters
getSearchContext={getSearchContext}
getSearchContext={
getSearchContext
}
id='projectFeatureToggles'
/>
}
@ -528,13 +551,18 @@ export const ProjectFeatureToggles = ({
staticColumns={staticColumns}
dividerAfter={['createdAt']}
dividerBefore={['Actions']}
isCustomized={Boolean(storedParams.columns)}
isCustomized={Boolean(
storedParams.columns,
)}
setHiddenColumns={setHiddenColumns}
/>
<PageHeader.Divider sx={{ marginLeft: 0 }} />
<PageHeader.Divider
sx={{ marginLeft: 0 }}
/>
<ConditionallyRender
condition={Boolean(
uiConfig?.flags?.featuresExportImport,
uiConfig?.flags
?.featuresExportImport,
)}
show={
<Tooltip
@ -543,7 +571,9 @@ export const ProjectFeatureToggles = ({
>
<IconButton
onClick={() =>
setShowExportDialog(true)
setShowExportDialog(
true,
)
}
sx={(theme) => ({
marginRight:
@ -557,7 +587,9 @@ export const ProjectFeatureToggles = ({
/>
<StyledResponsiveButton
onClick={() =>
navigate(getCreateTogglePath(projectId))
navigate(
getCreateTogglePath(projectId),
)
}
maxWidth='960px'
Icon={Add}
@ -583,6 +615,7 @@ export const ProjectFeatureToggles = ({
}
/>
</PageHeader>
</Box>
}
>
<SearchHighlightProvider value={getSearchText(searchValue)}>
@ -598,17 +631,22 @@ export const ProjectFeatureToggles = ({
<ConditionallyRender
condition={searchValue?.length > 0}
show={
<Box sx={{ padding: theme.spacing(3) }}>
<TablePlaceholder>
No feature toggles found matching &ldquo;
No feature toggles found matching
&ldquo;
{searchValue}
&rdquo;
</TablePlaceholder>
</Box>
}
elseShow={
<Box sx={{ padding: theme.spacing(3) }}>
<TablePlaceholder>
No feature toggles available. Get started by
adding a new feature toggle.
No feature toggles available. Get
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,
playgroundImprovements: true,
featureSearchAPI: true,
featureSearchFrontend: true,
featureSearchFrontend: false,
},
},
authentication: {