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

feat: new styling for strategy selector (#9683)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-02 14:55:36 +03:00 committed by GitHub
parent 645b005f29
commit 89724209cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 165 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View File

@ -24,6 +24,7 @@ const StyledContentContainer = styled('div')(() => ({
const StyledName = styled(StringTruncator)(({ theme }) => ({ const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold, fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block', display: 'block',
marginBottom: theme.spacing(0.5), marginBottom: theme.spacing(0.5),
})); }));
@ -71,7 +72,7 @@ export const FeatureReleasePlanCard = ({
title={description} title={description}
arrow arrow
sx={{ sx={{
fontSize: (theme) => theme.typography.body2.fontSize, fontSize: (theme) => theme.typography.caption.fontSize,
fontWeight: (theme) => fontWeight: (theme) =>
theme.typography.fontWeightRegular, theme.typography.fontWeightRegular,
width: '100%', width: '100%',

11
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

@ -222,14 +222,11 @@ export const FeatureStrategyMenu = ({
vertical: 'bottom', vertical: 'bottom',
horizontal: 'left', horizontal: 'left',
}} }}
PaperProps={{ transformOrigin={{
sx: (theme) => ({ vertical: 'top',
paddingBottom: theme.spacing(1), horizontal: 'left',
width: 'auto',
maxWidth: '95vw',
overflow: 'hidden',
}),
}} }}
disableScrollLock={true}
> >
{newStrategyDropdownEnabled ? ( {newStrategyDropdownEnabled ? (
<FeatureStrategyMenuCards <FeatureStrategyMenuCards

3
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

@ -41,6 +41,7 @@ const StyledContentContainer = styled('div')(() => ({
const StyledName = styled(StringTruncator)(({ theme }) => ({ const StyledName = styled(StringTruncator)(({ theme }) => ({
fontWeight: theme.typography.fontWeightBold, fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block', display: 'block',
marginBottom: theme.spacing(0.5), marginBottom: theme.spacing(0.5),
})); }));
@ -107,7 +108,7 @@ export const FeatureStrategyMenuCard = ({
title={strategy.description} title={strategy.description}
arrow arrow
sx={{ sx={{
fontSize: (theme) => theme.typography.body2.fontSize, fontSize: (theme) => theme.typography.caption.fontSize,
width: '100%', width: '100%',
}} }}
> >

256
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
View File

@ -1,4 +1,11 @@
import { Link, styled, Typography, Box, IconButton } from '@mui/material'; import {
Link,
styled,
Typography,
Box,
IconButton,
Tooltip,
} from '@mui/material';
import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard'; import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -7,6 +14,7 @@ import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureRelease
import type { IReleasePlanTemplate } from 'interfaces/releasePlans'; import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
interface IFeatureStrategyMenuCardsProps { interface IFeatureStrategyMenuCardsProps {
projectId: string; projectId: string;
@ -30,6 +38,15 @@ const StyledLink = styled(Link)(({ theme }) => ({
const GridContainer = styled(Box)(() => ({ const GridContainer = styled(Box)(() => ({
width: '100%', width: '100%',
display: 'flex',
flexDirection: 'column',
}));
const ScrollableContent = styled(Box)(({ theme }) => ({
width: '100%',
maxHeight: '70vh',
overflowY: 'auto',
padding: theme.spacing(0, 0, 1, 0),
})); }));
const GridSection = styled(Box)(({ theme }) => ({ const GridSection = styled(Box)(({ theme }) => ({
@ -37,6 +54,7 @@ const GridSection = styled(Box)(({ theme }) => ({
gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateColumns: 'repeat(2, 1fr)',
gap: theme.spacing(1.5), gap: theme.spacing(1.5),
padding: theme.spacing(0, 2), padding: theme.spacing(0, 2),
marginBottom: theme.spacing(3),
width: '100%', width: '100%',
})); }));
@ -58,6 +76,19 @@ const TitleText = styled(Typography)(({ theme }) => ({
margin: 0, margin: 0,
})); }));
const SectionTitle = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(0.5),
padding: theme.spacing(1, 2),
width: '100%',
}));
const StyledInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({
fontSize: theme.typography.body2.fontSize,
color: theme.palette.text.secondary,
}));
export const FeatureStrategyMenuCards = ({ export const FeatureStrategyMenuCards = ({
projectId, projectId,
featureId, featureId,
@ -102,113 +133,140 @@ export const FeatureStrategyMenuCards = ({
</IconButton> </IconButton>
)} )}
</TitleRow> </TitleRow>
{allStrategies ? ( <ScrollableContent>
<> {allStrategies ? (
<StyledTypography color='textSecondary'>
Default strategy for {environmentId} environment
</StyledTypography>
<GridSection>
<CardWrapper key={defaultStrategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
/>
</CardWrapper>
</GridSection>
</>
) : null}
<ConditionallyRender
condition={templates.length > 0}
show={
<> <>
<StyledTypography color='textSecondary'> <SectionTitle>
Release templates <Typography color='inherit' variant='body2'>
</StyledTypography> Pre-defined strategy types
</Typography>
<Tooltip
title='Select a starting setup, and customize the strategy to your need with targeting and variants'
arrow
>
<StyledInfoIcon />
</Tooltip>
</SectionTitle>
<GridSection> <GridSection>
{templates.map((template) => ( <CardWrapper key={defaultStrategy.name}>
<CardWrapper key={template.id}> <FeatureStrategyMenuCard
<FeatureReleasePlanCard projectId={projectId}
template={template} featureId={featureId}
onClick={() => environmentId={environmentId}
onAddReleasePlan(template) strategy={defaultStrategy}
} defaultStrategy={true}
/>
</CardWrapper>
{preDefinedStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/> />
</CardWrapper> </CardWrapper>
))} ))}
</GridSection> </GridSection>
</> </>
} ) : null}
/> <ConditionallyRender
<ConditionallyRender condition={templates.length > 0}
condition={templates.length === 0 && onlyReleasePlans} show={
show={ <>
<> <SectionTitle>
<StyledTypography <Typography color='inherit' variant='body2'>
color='textSecondary' Apply a release template
sx={{ </Typography>
padding: (theme) => theme.spacing(1, 2, 0, 2), <Tooltip
}} title='Use one of the pre-defined templates defined in your company for rolling out features to users'
> arrow
<p>No templates created.</p>
<p>
Go to&nbsp;
<StyledLink
onClick={() =>
navigate('/release-templates')
}
> >
Release templates <StyledInfoIcon />
</StyledLink> </Tooltip>
&nbsp;to get started </SectionTitle>
</p> <GridSection>
</StyledTypography> {templates.map((template) => (
<CardWrapper key={template.id}>
<FeatureReleasePlanCard
template={template}
onClick={() =>
onAddReleasePlan(template)
}
/>
</CardWrapper>
))}
</GridSection>
</>
}
/>
<ConditionallyRender
condition={templates.length === 0 && onlyReleasePlans}
show={
<>
<StyledTypography
color='textSecondary'
sx={{
padding: (theme) =>
theme.spacing(1, 2, 0, 2),
}}
>
<p>No templates created.</p>
<p>
Go to&nbsp;
<StyledLink
onClick={() =>
navigate('/release-templates')
}
>
Release templates
</StyledLink>
&nbsp;to get started
</p>
</StyledTypography>
</>
}
/>
{allStrategies ? (
<>
<ConditionallyRender
condition={customStrategies.length > 0}
show={
<>
<SectionTitle>
<Typography
color='inherit'
variant='body2'
>
Custom strategies
</Typography>
<Tooltip
title='Custom strategies you have defined in Unleash'
arrow
>
<StyledInfoIcon />
</Tooltip>
</SectionTitle>
<GridSection>
{customStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={
environmentId
}
strategy={strategy}
/>
</CardWrapper>
))}
</GridSection>
</>
}
/>
</> </>
} ) : null}
/> </ScrollableContent>
{allStrategies ? (
<>
<StyledTypography color='textSecondary'>
Predefined strategy types
</StyledTypography>
<GridSection>
{preDefinedStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</CardWrapper>
))}
</GridSection>
<ConditionallyRender
condition={customStrategies.length > 0}
show={
<>
<StyledTypography color='textSecondary'>
Custom strategies
</StyledTypography>
<GridSection>
{customStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</CardWrapper>
))}
</GridSection>
</>
}
/>
</>
) : null}
</GridContainer> </GridContainer>
); );
}; };