fix: grey out text and icons for disabled strategies in playground (#…

…5113) What it says on the tin Closes # [1-1512](https://linear.app/unleash/issue/1-1512/grey-out-everything-icons-labels-etc-when-strategy-is-disabled) <img width="689" alt="Screenshot 2023-10-20 at 12 25 51" src="https://github.com/Unleash/unleash/assets/104830839/3192a125-0e2a-46f2-a266-e4d6c171bdad"> <img width="711" alt="Screenshot 2023-10-20 at 14 52 30" src="https://github.com/Unleash/unleash/assets/104830839/15040439-c059-4725-9518-82e363fd7230"> --------- Signed-off-by: andreas-unleash <andreas@getunleash.ai>
Unleash · Oct 23, 2023 · 69d050a · 69d050a
1 parent 03faffa
commit 69d050a
Show file tree

Hide file tree

Showing 16 changed files with 213 additions and 36 deletions.
diff --git a/.../component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/.../component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -23,6 +23,7 @@ interface IConstraintAccordionViewProps {
     onEdit?: () => void;
     sx?: SxProps<Theme>;
     compact?: boolean;
+    disabled?: boolean;
     renderAfter?: JSX.Element;
 }
 
@@ -68,6 +69,7 @@ export const ConstraintAccordionView = ({
     onDelete,
     sx = undefined,
     compact = false,
+    disabled = false,
     renderAfter,
 }: IConstraintAccordionViewProps) => {
     const [expandable, setExpandable] = useState(true);
@@ -102,6 +104,7 @@ export const ConstraintAccordionView = ({
                         onDelete={onDelete}
                         singleValue={singleValue}
                         allowExpand={setExpandable}
+                        disabled={disabled}
                         expanded={expanded}
                         compact={compact}
                     />

diff --git a/...n/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/...n/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -13,6 +13,7 @@ interface IConstraintAccordionViewHeaderProps {
     expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
     compact?: boolean;
+    disabled?: boolean;
 }
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -34,6 +35,7 @@ export const ConstraintAccordionViewHeader = ({
     allowExpand,
     expanded,
     compact,
+    disabled,
 }: IConstraintAccordionViewHeaderProps) => {
     const { context } = useUnleashContext();
     const { contextName } = constraint;
@@ -44,12 +46,13 @@ export const ConstraintAccordionViewHeader = ({
 
     return (
         <StyledContainer>
-            <ConstraintIcon compact={compact} />
+            <ConstraintIcon compact={compact} disabled={disabled} />
             <ConstraintAccordionViewHeaderInfo
                 constraint={constraint}
                 singleValue={singleValue}
                 allowExpand={allowExpand}
                 expanded={expanded}
+                disabled={disabled}
             />
             <ConstraintAccordionHeaderActions
                 onEdit={onEdit}

diff --git a/...nstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx b/...nstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx
@@ -50,6 +50,7 @@ interface ConstraintAccordionViewHeaderMetaInfoProps {
     singleValue: boolean;
     expanded: boolean;
     allowExpand: (shouldExpand: boolean) => void;
+    disabled?: boolean;
     maxLength?: number;
 }
 
@@ -58,23 +59,34 @@ export const ConstraintAccordionViewHeaderInfo = ({
     singleValue,
     allowExpand,
     expanded,
+    disabled = false,
     maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
 }: ConstraintAccordionViewHeaderMetaInfoProps) => {
     return (
         <StyledHeaderWrapper>
             <StyledHeaderMetaInfo>
                 <Tooltip title={constraint.contextName} arrow>
-                    <StyledHeaderText>
+                    <StyledHeaderText
+                        sx={(theme) => ({
+                            color: disabled
+                                ? theme.palette.text.secondary
+                                : 'inherit',
+                        })}
+                    >
                         {constraint.contextName}
                     </StyledHeaderText>
                 </Tooltip>
-                <ConstraintViewHeaderOperator constraint={constraint} />
+                <ConstraintViewHeaderOperator
+                    constraint={constraint}
+                    disabled={disabled}
+                />
                 <ConditionallyRender
                     condition={singleValue}
                     show={
                         <ConstraintAccordionViewHeaderSingleValue
                             constraint={constraint}
                             allowExpand={allowExpand}
+                            disabled={disabled}
                         />
                     }
                     elseShow={
@@ -83,6 +95,7 @@ export const ConstraintAccordionViewHeaderInfo = ({
                             expanded={expanded}
                             allowExpand={allowExpand}
                             maxLength={maxLength}
+                            disabled={disabled}
                         />
                     }
                 />

diff --git a/...cordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx b/...cordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderMultipleValues.tsx
@@ -22,6 +22,7 @@ interface ConstraintSingleValueProps {
     expanded: boolean;
     maxLength: number;
     allowExpand: (shouldExpand: boolean) => void;
+    disabled?: boolean;
 }
 
 const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
@@ -55,6 +56,7 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
     expanded,
     allowExpand,
     maxLength,
+    disabled = false,
 }: ConstraintSingleValueProps) => {
     const [expandable, setExpandable] = useState(false);
 
@@ -72,7 +74,15 @@ export const ConstraintAccordionViewHeaderMultipleValues = ({
     return (
         <StyledHeaderValuesContainerWrapper>
             <StyledHeaderValuesContainer>
-                <StyledValuesSpan>{text}</StyledValuesSpan>
+                <StyledValuesSpan
+                    sx={(theme) => ({
+                        color: disabled
+                            ? theme.palette.text.secondary
+                            : 'inherit',
+                    })}
+                >
+                    {text}
+                </StyledValuesSpan>
                 <ConditionallyRender
                     condition={expandable}
                     show={

diff --git a/...tAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx b/...tAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderSingleValue.tsx
@@ -15,6 +15,7 @@ const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
 interface ConstraintSingleValueProps {
     constraint: IConstraint;
     allowExpand: (shouldExpand: boolean) => void;
+    disabled?: boolean;
 }
 
 const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
@@ -26,6 +27,7 @@ const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
 export const ConstraintAccordionViewHeaderSingleValue = ({
     constraint,
     allowExpand,
+    disabled = false,
 }: ConstraintSingleValueProps) => {
     const { locationSettings } = useLocationSettings();
 
@@ -36,6 +38,9 @@ export const ConstraintAccordionViewHeaderSingleValue = ({
     return (
         <StyledHeaderValuesContainerWrapper>
             <StyledSingleValueChip
+                sx={(theme) => ({
+                    color: disabled ? theme.palette.text.secondary : 'inherit',
+                })}
                 label={formatConstraintValue(constraint, locationSettings)}
             />
         </StyledHeaderValuesContainerWrapper>

diff --git a/...on/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx b/...on/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator.tsx
@@ -10,6 +10,7 @@ import { oneOf } from 'utils/oneOf';
 
 interface ConstraintViewHeaderOperatorProps {
     constraint: IConstraint;
+    disabled?: boolean;
 }
 
 const StyledHeaderValuesContainerWrapper = styled('div')(({ theme }) => ({
@@ -28,6 +29,7 @@ const StyledHeaderConstraintContainer = styled('div')(({ theme }) => ({
 
 export const ConstraintViewHeaderOperator = ({
     constraint,
+    disabled = false,
 }: ConstraintViewHeaderOperatorProps) => {
     return (
         <StyledHeaderValuesContainerWrapper>
@@ -47,6 +49,7 @@ export const ConstraintViewHeaderOperator = ({
                 <ConstraintOperator
                     constraint={constraint}
                     hasPrefix={Boolean(constraint.inverted)}
+                    disabled={disabled}
                 />
             </StyledHeaderConstraintContainer>
             <ConditionallyRender

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
@@ -4,18 +4,24 @@ import { TrackChanges } from '@mui/icons-material';
 
 interface IConstraintIconProps {
     compact?: boolean;
+    disabled?: boolean;
 }
 
-export const ConstraintIcon: VFC<IConstraintIconProps> = ({ compact }) => (
+export const ConstraintIcon: VFC<IConstraintIconProps> = ({
+    compact,
+    disabled,
+}) => (
     <Box
-        sx={{
-            backgroundColor: 'primary.light',
+        sx={(theme) => ({
+            backgroundColor: disabled
+                ? theme.palette.neutral.border
+                : 'primary.light',
             p: compact ? '1px' : '2px',
             borderRadius: '50%',
             width: compact ? '18px' : '24px',
             height: compact ? '18px' : '24px',
             marginRight: '13px',
-        }}
+        })}
     >
         <TrackChanges
             sx={(theme) => ({

diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@@ -6,6 +6,7 @@ import { styled } from '@mui/material';
 interface IConstraintOperatorProps {
     constraint: IConstraint;
     hasPrefix?: boolean;
+    disabled?: boolean;
 }
 
 const StyledContainer = styled('div')(({ theme }) => ({
@@ -15,19 +16,25 @@ const StyledContainer = styled('div')(({ theme }) => ({
     lineHeight: 1.25,
 }));
 
-const StyledName = styled('div')(({ theme }) => ({
+const StyledName = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled: boolean }>(({ theme, disabled }) => ({
     fontSize: theme.fontSizes.smallBody,
     lineHeight: 17 / 14,
+    color: disabled ? theme.palette.text.secondary : theme.palette.text.primary,
 }));
 
-const StyledText = styled('div')(({ theme }) => ({
+const StyledText = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled: boolean }>(({ theme, disabled }) => ({
     fontSize: theme.fontSizes.smallerBody,
-    color: theme.palette.neutral.main,
+    color: disabled ? theme.palette.text.secondary : theme.palette.neutral.main,
 }));
 
 export const ConstraintOperator = ({
     constraint,
     hasPrefix,
+    disabled = false,
 }: IConstraintOperatorProps) => {
     const operatorName = constraint.operator;
     const operatorText = formatOperatorDescription(constraint.operator);
@@ -40,8 +47,8 @@ export const ConstraintOperator = ({
                 paddingLeft: hasPrefix ? 0 : undefined,
             }}
         >
-            <StyledName>{operatorName}</StyledName>
-            <StyledText>{operatorText}</StyledText>
+            <StyledName disabled={disabled}>{operatorName}</StyledName>
+            <StyledText disabled={disabled}>{operatorText}</StyledText>
         </StyledContainer>
     );
 };
diff --git a/frontend/src/component/common/PercentageCircle/DisabledPercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/DisabledPercentageCircle.tsx
@@ -0,0 +1,46 @@
+import { useTheme } from '@mui/material';
+import { CSSProperties } from 'react';
+
+interface IPercentageCircleProps {
+    percentage: number;
+    size?: `${number}rem`;
+}
+
+const PercentageCircle = ({
+    percentage,
+    size = '4rem',
+}: IPercentageCircleProps) => {
+    const theme = useTheme();
+
+    const style: CSSProperties = {
+        display: 'block',
+        borderRadius: '100%',
+        transform: 'rotate(-90deg)',
+        height: size,
+        width: size,
+        background: theme.palette.background.elevation2,
+    };
+
+    // The percentage circle used to be drawn by CSS with a conic-gradient,
+    // but the result was either jagged or blurry. SVG seems to look better.
+    // See https://stackoverflow.com/a/70659532.
+    const radius = 100 / (2 * Math.PI);
+    const diameter = 2 * radius;
+
+    return (
+        <svg viewBox={`0 0 ${diameter} ${diameter}`} style={style} aria-hidden>
+            <title>A circle progress bar with {percentage}% completion.</title>
+            <circle
+                r={radius}
+                cx={radius}
+                cy={radius}
+                fill='none'
+                stroke={theme.palette.neutral.border}
+                strokeWidth={diameter}
+                strokeDasharray={`${percentage} 100`}
+            />
+        </svg>
+    );
+};
+
+export default PercentageCircle;
diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.tsx b/frontend/src/component/common/SegmentItem/SegmentItem.tsx
@@ -16,6 +16,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 interface ISegmentItemProps {
     segment: Partial<ISegment>;
     isExpanded?: boolean;
+    disabled?: boolean;
     constraintList?: JSX.Element;
     headerContent?: JSX.Element;
 }
@@ -49,20 +50,33 @@ const StyledLink = styled(Link)(({ theme }) => ({
         textDecoration: 'underline',
     },
 }));
+const StyledText = styled('span', {
+    shouldForwardProp: (prop) => prop !== 'disabled',
+})<{ disabled: boolean }>(({ theme, disabled }) => ({
+    color: disabled ? theme.palette.text.secondary : 'inherit',
+}));
 
 export const SegmentItem: VFC<ISegmentItemProps> = ({
     segment,
     isExpanded,
     headerContent,
     constraintList,
+    disabled = false,
 }) => {
     const [isOpen, setIsOpen] = useState(isExpanded || false);
 
     return (
         <StyledAccordion expanded={isOpen}>
             <StyledAccordionSummary id={`segment-accordion-${segment.id}`}>
-                <DonutLarge color='secondary' sx={{ mr: 1 }} />
-                <span>Segment:</span>
+                <DonutLarge
+                    sx={(theme) => ({
+                        mr: 1,
+                        color: disabled
+                            ? theme.palette.neutral.border
+                            : theme.palette.secondary.main,
+                    })}
+                />
+                <StyledText disabled={disabled}>Segment:</StyledText>
                 <StyledLink to={`/segments/edit/${segment.id}`}>
                     {segment.name}
                 </StyledLink>

diff --git a/.../StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx b/.../StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx
@@ -9,8 +9,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { styled } from '@mui/material';
 import { ConstraintAccordionView } from 'component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
-import { ConstraintError } from './ConstraintError/ConstraintError';
-import { ConstraintOk } from './ConstraintOk/ConstraintOk';
 
 interface IConstraintExecutionWithoutResultsProps {
     constraints?: PlaygroundConstraintSchema[];
@@ -35,7 +33,11 @@ export const ConstraintExecutionWithoutResults: VFC<
                         condition={index > 0}
                         show={<StrategySeparator text='AND' />}
                     />
-                    <ConstraintAccordionView constraint={constraint} compact />
+                    <ConstraintAccordionView
+                        constraint={constraint}
+                        compact
+                        disabled
+                    />
                 </Fragment>
             ))}
         </ConstraintExecutionWrapper>