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:
parent
92a13c4c55
commit
37f6f7c43b
@ -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>;
|
||||
};
|
||||
|
@ -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
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user