Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-12 01:17:04 +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 }) => ({
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block',
marginBottom: theme.spacing(0.5),
}));
@ -71,7 +72,7 @@ export const FeatureReleasePlanCard = ({
title={description}
arrow
sx={{
fontSize: (theme) => theme.typography.body2.fontSize,
fontSize: (theme) => theme.typography.caption.fontSize,
fontWeight: (theme) =>
theme.typography.fontWeightRegular,
width: '100%',

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

@ -222,14 +222,11 @@ export const FeatureStrategyMenu = ({
vertical: 'bottom',
horizontal: 'left',
}}
PaperProps={{
sx: (theme) => ({
paddingBottom: theme.spacing(1),
width: 'auto',
maxWidth: '95vw',
overflow: 'hidden',
}),
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
disableScrollLock={true}
>
{newStrategyDropdownEnabled ? (
<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 }) => ({
fontWeight: theme.typography.fontWeightBold,
fontSize: theme.typography.caption.fontSize,
display: 'block',
marginBottom: theme.spacing(0.5),
}));
@ -107,7 +108,7 @@ export const FeatureStrategyMenuCard = ({
title={strategy.description}
arrow
sx={{
fontSize: (theme) => theme.typography.body2.fontSize,
fontSize: (theme) => theme.typography.caption.fontSize,
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 { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@ -7,6 +14,7 @@ import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureRelease
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { useNavigate } from 'react-router-dom';
import CloseIcon from '@mui/icons-material/Close';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
interface IFeatureStrategyMenuCardsProps {
projectId: string;
@ -30,6 +38,15 @@ const StyledLink = styled(Link)(({ theme }) => ({
const GridContainer = styled(Box)(() => ({
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 }) => ({
@ -37,6 +54,7 @@ const GridSection = styled(Box)(({ theme }) => ({
gridTemplateColumns: 'repeat(2, 1fr)',
gap: theme.spacing(1.5),
padding: theme.spacing(0, 2),
marginBottom: theme.spacing(3),
width: '100%',
}));
@ -58,6 +76,19 @@ const TitleText = styled(Typography)(({ theme }) => ({
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 = ({
projectId,
featureId,
@ -102,113 +133,140 @@ export const FeatureStrategyMenuCards = ({
</IconButton>
)}
</TitleRow>
{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={
<ScrollableContent>
{allStrategies ? (
<>
<StyledTypography color='textSecondary'>
Release templates
</StyledTypography>
<SectionTitle>
<Typography color='inherit' variant='body2'>
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>
{templates.map((template) => (
<CardWrapper key={template.id}>
<FeatureReleasePlanCard
template={template}
onClick={() =>
onAddReleasePlan(template)
}
<CardWrapper key={defaultStrategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
/>
</CardWrapper>
{preDefinedStrategies.map((strategy) => (
<CardWrapper key={strategy.name}>
<FeatureStrategyMenuCard
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
/>
</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')
}
) : null}
<ConditionallyRender
condition={templates.length > 0}
show={
<>
<SectionTitle>
<Typography color='inherit' variant='body2'>
Apply a release template
</Typography>
<Tooltip
title='Use one of the pre-defined templates defined in your company for rolling out features to users'
arrow
>
Release templates
</StyledLink>
&nbsp;to get started
</p>
</StyledTypography>
<StyledInfoIcon />
</Tooltip>
</SectionTitle>
<GridSection>
{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>
</>
}
/>
</>
}
/>
{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}
) : null}
</ScrollableContent>
</GridContainer>
);
};