1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

revert changes to existing component

This commit is contained in:
Thomas Heartman 2025-06-19 14:01:23 +02:00
parent 58b12250fd
commit 78594f4e7a

View File

@ -1,7 +1,7 @@
import type React from 'react'; import type React from 'react';
import type { FC } from 'react'; import type { FC } from 'react';
import { Link as RouterLink } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom';
import { Box, Card, Typography, Link, styled } from '@mui/material'; import { Box, Card, Typography, Link } from '@mui/material';
import { ConflictWarning } from './Change/ConflictWarning.tsx'; import { ConflictWarning } from './Change/ConflictWarning.tsx';
interface IFeatureToggleChanges { interface IFeatureToggleChanges {
@ -12,15 +12,6 @@ interface IFeatureToggleChanges {
children?: React.ReactNode; children?: React.ReactNode;
} }
const HeaderGroup = styled('hgroup', {
shouldForwardProp: (prop) => prop !== 'conflict',
})<{ conflict?: string }>(({ theme, conflict }) => ({
display: 'flex',
paddingTop: theme.spacing(conflict ? 0 : 2),
paddingBottom: theme.spacing(2),
paddingInline: theme.spacing(3),
}));
export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
featureName, featureName,
projectId, projectId,
@ -37,7 +28,9 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
> >
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
backgroundColor: theme.palette.neutral.light, backgroundColor: conflict
? theme.palette.neutral.light
: theme.palette.neutral.light,
borderRadius: (theme) => borderRadius: (theme) =>
`${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`, `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
border: '1px solid', border: '1px solid',
@ -50,26 +43,32 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
})} })}
> >
<ConflictWarning conflict={conflict} /> <ConflictWarning conflict={conflict} />
<HeaderGroup conflict={conflict}> <Box
<Typography>Feature flag:</Typography> sx={{
<Typography component='h3'> display: 'flex',
<Link pt: conflict ? 0 : 2,
component={RouterLink} pb: 2,
to={`/projects/${projectId}/features/${featureName}`} px: 3,
color='primary' }}
underline='hover' >
sx={{ <Typography>Feature flag name: </Typography>
marginLeft: 1,
'& :hover': { <Link
textDecoration: 'underline', component={RouterLink}
}, to={`/projects/${projectId}/features/${featureName}`}
}} color='primary'
onClick={onNavigate} underline='hover'
> sx={{
<strong>{featureName}</strong> marginLeft: 1,
</Link> '& :hover': {
</Typography> textDecoration: 'underline',
</HeaderGroup> },
}}
onClick={onNavigate}
>
<strong>{featureName}</strong>
</Link>
</Box>
</Box> </Box>
<Box>{children}</Box> <Box>{children}</Box>
</Card> </Card>