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

Adjust warning alert

Browse Source
This commit is contained in:
Thomas Heartman 2025-03-20 10:30:24 +01:00
parent 4d8f8c343a
commit 7d4195d145
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody.tsx
View File

@ -4,7 +4,7 @@ import {
useEffect, useEffect,
useState, useState,
} from 'react'; } from 'react';
import { Alert, Pagination, styled } from '@mui/material'; import { Alert, Pagination, type Theme, styled } from '@mui/material';
import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi'; import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
import { formatUnknownError } from 'utils/formatUnknownError'; import { formatUnknownError } from 'utils/formatUnknownError';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
@ -57,25 +57,27 @@ export const StyledContentList = styled('ol')(({ theme }) => ({
}, },
})); }));
export const StyledListItem = styled('li', { const releasePlanBackground = (theme: Theme) =>
shouldForwardProp: (prop) => prop !== 'type', theme.palette.background.elevation2;
})<{ type?: 'release plan' | 'strategy' }>(({ theme, type }) => ({ const strategyBackground = (theme: Theme) =>
theme.palette.background.elevation1;
export const StyledListItem = styled('li')<{
'data-type'?: 'release-plan' | 'strategy';
}>(({ theme, ...props }) => ({
background: background:
type === 'release plan' props['data-type'] === 'release-plan'
? theme.palette.background.elevation2 ? releasePlanBackground(theme)
: theme.palette.background.elevation1, : strategyBackground(theme),
})); }));
const PaginatedStrategyContainer = styled('div')(({ theme }) => ({ const AlertContainer = styled('div')(({ theme }) => ({
paddingTop: theme.spacing(2.5), padding: theme.spacing(2),
position: 'relative', paddingBottom: theme.spacing(0),
display: 'flex', backgroundColor: strategyBackground(theme),
flexFlow: 'column nowrap', ':has(+ ol>li[data-type="release-plan"])': {
gap: theme.spacing(2), backgroundColor: releasePlanBackground(theme),
})); },
const StyledAlert = styled(Alert)(({ theme }) => ({
marginInline: theme.spacing(2), // should consider finding a variable here
})); }));
const StyledStrategySeparator = styled(StrategySeparator)(({ theme }) => ({ const StyledStrategySeparator = styled(StrategySeparator)(({ theme }) => ({
@ -288,15 +290,17 @@ export const EnvironmentAccordionBody = ({
return ( return (
<StyledAccordionBodyInnerContainer> <StyledAccordionBodyInnerContainer>
{paginateStrategies ? ( {paginateStrategies ? (
<StyledAlert severity='warning'> <AlertContainer>
<Alert severity='warning'>
We noticed you're using a high number of activation We noticed you're using a high number of activation
strategies. To ensure a more targeted approach, consider strategies. To ensure a more targeted approach, consider
leveraging constraints or segments. leveraging constraints or segments.
</StyledAlert> </Alert>
</AlertContainer>
) : null} ) : null}
<StyledContentList> <StyledContentList>
{releasePlans.map((plan) => ( {releasePlans.map((plan) => (
<StyledListItem type='release plan' key={plan.id}> <StyledListItem data-type='release-plan' key={plan.id}>
<ReleasePlan <ReleasePlan
plan={plan} plan={plan}
environmentIsDisabled={isDisabled} environmentIsDisabled={isDisabled}