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

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