1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-06 01:15:28 +02:00

Move disabled strategy handling into the separator itself.

This commit is contained in:
Thomas Heartman 2025-03-21 09:58:45 +01:00
parent 92a13c4c55
commit 37f6f7c43b
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
3 changed files with 13 additions and 19 deletions

View File

@ -1,4 +1,5 @@
import { styled } from '@mui/material';
import { disabledStrategyClassName } from '../StrategyItemContainer/disabled-strategy-utils';
const Chip = styled('div')(({ theme }) => ({
padding: theme.spacing(0.75, 1),
@ -11,12 +12,14 @@ const Chip = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.secondary.border,
left: theme.spacing(4),
// if the strategy it's applying to is disabled
[`&:has(+ * .${disabledStrategyClassName}, + .${disabledStrategyClassName})`]:
{
filter: 'grayscale(1)',
},
}));
export const StrategySeparator = ({ className }: { className?: string }) => {
return (
<Chip role='separator' className={className}>
OR
</Chip>
);
export const StrategySeparator = () => {
return <Chip role='separator'>OR</Chip>;
};

View File

@ -22,7 +22,6 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla
import { ReleasePlan } from '../../../ReleasePlan/ReleasePlan';
import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
import { ProjectEnvironmentStrategyDraggableItem } from './StrategyDraggableItem/ProjectEnvironmentStrategyDraggableItem';
import { disabledStrategyClassName } from 'component/common/StrategyItemContainer/disabled-strategy-utils';
interface IEnvironmentAccordionBodyProps {
isDisabled: boolean;
@ -74,14 +73,6 @@ const AlertContainer = styled('div')(({ theme }) => ({
},
}));
// todo: consider exporting this into a shared thing or move it into the separator itself (either as a disabled prop or using the css here)
export const StyledStrategySeparator = styled(StrategySeparator)({
[`&:has(+ * .${disabledStrategyClassName}, + .${disabledStrategyClassName})`]:
{
filter: 'grayscale(1)',
},
});
export const EnvironmentAccordionBody = ({
featureEnvironment,
isDisabled,
@ -271,7 +262,7 @@ export const EnvironmentAccordionBody = ({
{page.map((strategy, index) => (
<StyledListItem key={strategy.id}>
{index > 0 || releasePlans.length > 0 ? (
<StyledStrategySeparator />
<StrategySeparator />
) : null}
<ProjectEnvironmentStrategyDraggableItem
@ -288,7 +279,7 @@ export const EnvironmentAccordionBody = ({
{strategies.map((strategy, index) => (
<StyledListItem key={strategy.id}>
{index > 0 || releasePlans.length > 0 ? (
<StyledStrategySeparator />
<StrategySeparator />
) : null}
<ProjectEnvironmentStrategyDraggableItem

View File

@ -6,9 +6,9 @@ import type {
import {
StyledContentList,
StyledListItem,
StyledStrategySeparator,
} from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/EnvironmentAccordionBody';
import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem';
import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
interface PlaygroundResultStrategyListProps {
strategies: PlaygroundStrategySchema[];
@ -66,7 +66,7 @@ export const PlaygroundResultStrategyLists = ({
<RestyledContentList>
{strategies?.map((strategy, index) => (
<StyledListItem key={strategy.id}>
{index > 0 ? <StyledStrategySeparator /> : ''}
{index > 0 ? <StrategySeparator /> : ''}
<FeatureStrategyItem
strategy={strategy}
input={input}