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

Move disabled strategy handling into the separator itself.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
View File

@ -1,4 +1,5 @@
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { disabledStrategyClassName } from '../StrategyItemContainer/disabled-strategy-utils';
const Chip = styled('div')(({ theme }) => ({ const Chip = styled('div')(({ theme }) => ({
padding: theme.spacing(0.75, 1), padding: theme.spacing(0.75, 1),
@ -11,12 +12,14 @@ const Chip = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusLarge,
backgroundColor: theme.palette.secondary.border, backgroundColor: theme.palette.secondary.border,
left: theme.spacing(4), 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 }) => { export const StrategySeparator = () => {
return ( return <Chip role='separator'>OR</Chip>;
<Chip role='separator' className={className}>
OR
</Chip>
);
}; };

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

@ -22,7 +22,6 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla
import { ReleasePlan } from '../../../ReleasePlan/ReleasePlan'; import { ReleasePlan } from '../../../ReleasePlan/ReleasePlan';
import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator'; import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
import { ProjectEnvironmentStrategyDraggableItem } from './StrategyDraggableItem/ProjectEnvironmentStrategyDraggableItem'; import { ProjectEnvironmentStrategyDraggableItem } from './StrategyDraggableItem/ProjectEnvironmentStrategyDraggableItem';
import { disabledStrategyClassName } from 'component/common/StrategyItemContainer/disabled-strategy-utils';
interface IEnvironmentAccordionBodyProps { interface IEnvironmentAccordionBodyProps {
isDisabled: boolean; 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 = ({ export const EnvironmentAccordionBody = ({
featureEnvironment, featureEnvironment,
isDisabled, isDisabled,
@ -271,7 +262,7 @@ export const EnvironmentAccordionBody = ({
{page.map((strategy, index) => ( {page.map((strategy, index) => (
<StyledListItem key={strategy.id}> <StyledListItem key={strategy.id}>
{index > 0 || releasePlans.length > 0 ? ( {index > 0 || releasePlans.length > 0 ? (
<StyledStrategySeparator /> <StrategySeparator />
) : null} ) : null}
<ProjectEnvironmentStrategyDraggableItem <ProjectEnvironmentStrategyDraggableItem
@ -288,7 +279,7 @@ export const EnvironmentAccordionBody = ({
{strategies.map((strategy, index) => ( {strategies.map((strategy, index) => (
<StyledListItem key={strategy.id}> <StyledListItem key={strategy.id}>
{index > 0 || releasePlans.length > 0 ? ( {index > 0 || releasePlans.length > 0 ? (
<StyledStrategySeparator /> <StrategySeparator />
) : null} ) : null}
<ProjectEnvironmentStrategyDraggableItem <ProjectEnvironmentStrategyDraggableItem

4
frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/PlaygroundResultStrategyLists.tsx
View File

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