From 81aff263940d126519c50a1b124492185c7189f8 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Thu, 28 Mar 2024 14:15:14 +0200
Subject: [PATCH] Chore: constraint context field legal values improvement
 (#6729)

Improves how we show context field legal values in the new strategy
configuration.

Refactored makeStyles to styled components

Closes #
[1-2235](https://linear.app/unleash/issue/1-2235/context-field-ui-in-strategy-configuration)

Before:

![Screenshot 2024-03-28 at 12 19
12](https://github.com/Unleash/unleash/assets/104830839/43c62cf4-f344-476f-9ef6-75e388fab000)

After:

![Screenshot 2024-03-28 at 13 03
46](https://github.com/Unleash/unleash/assets/104830839/16dd03e0-bc67-402b-ba54-56fa1af136a5)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../LegalValueLabel/LegalValueLabel.styles.ts | 35 +++++++------
 .../LegalValueLabel/LegalValueLabel.tsx       | 18 ++++---
 .../RestrictiveLegalValues.tsx                | 50 ++++++++++++-------
 3 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
index 7586394e18a3..41a457ead5ea 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -1,17 +1,24 @@
-import { makeStyles } from 'tss-react/mui';
+import { styled } from '@mui/material';
 
-export const useStyles = makeStyles()((theme) => ({
-    container: {
-        display: 'inline-block',
-        wordBreak: 'break-word',
-    },
-    value: {
-        lineHeight: 1.33,
-        fontSize: theme.fontSizes.smallBody,
-    },
-    description: {
-        lineHeight: 1.33,
-        fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.action.active,
+export const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    padding: theme.spacing(0.5, 1),
+    background: theme.palette.common.white,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+
+    '&:hover': {
+        border: `2px solid ${theme.palette.primary.main}`,
     },
 }));
+
+export const StyledValue = styled('div')(({ theme }) => ({
+    lineHeight: 1.33,
+    fontSize: theme.fontSizes.smallBody,
+}));
+export const StyledDescription = styled('div')(({ theme }) => ({
+    lineHeight: 1.33,
+    fontSize: theme.fontSizes.smallerBody,
+    color: theme.palette.action.active,
+}));
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
index 7ab936137060..b02bdca2797c 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
@@ -1,5 +1,9 @@
 import type { ILegalValue } from 'interfaces/context';
-import { useStyles } from './LegalValueLabel.styles';
+import {
+    StyledContainer,
+    StyledValue,
+    StyledDescription,
+} from './LegalValueLabel.styles';
 import type React from 'react';
 import { FormControlLabel } from '@mui/material';
 
@@ -9,23 +13,21 @@ interface ILegalValueTextProps {
 }
 
 export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => {
-    const { classes: styles } = useStyles();
-
     return (
-        <div className={styles.container}>
+        <StyledContainer>
             <FormControlLabel
                 value={legal.value}
                 control={control}
                 label={
                     <>
-                        <div className={styles.value}>{legal.value}</div>
-                        <div className={styles.description}>
+                        <StyledValue>{legal.value}</StyledValue>
+                        <StyledDescription>
                             {legal.description}
-                        </div>
+                        </StyledDescription>
                     </>
                 }
             />
-        </div>
+        </StyledContainer>
     );
 };
 
diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index 6d4fed722b07..0751febb7776 100644
--- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, Checkbox } from '@mui/material';
+import { Alert, Checkbox, styled } from '@mui/material';
 import { useThemeStyles } from 'themes/themeStyles';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
@@ -50,6 +50,17 @@ export const getIllegalValues = (
     return constraintValues.filter((value) => deletedValuesSet.has(value));
 };
 
+const StyledValuesContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(1),
+    padding: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusMedium,
+    maxHeight: '378px',
+    overflow: 'auto',
+}));
+
 export const RestrictiveLegalValues = ({
     data,
     values,
@@ -136,24 +147,25 @@ export const RestrictiveLegalValues = ({
                     />
                 }
             />
-            {filteredValues.map((match) => (
-                <LegalValueLabel
-                    key={match.value}
-                    legal={match}
-                    control={
-                        <Checkbox
-                            checked={Boolean(valuesMap[match.value])}
-                            onChange={() => onChange(match.value)}
-                            name={match.value}
-                            color='primary'
-                            disabled={deletedLegalValues
-                                .map(({ value }) => value)
-                                .includes(match.value)}
-                        />
-                    }
-                />
-            ))}
-
+            <StyledValuesContainer>
+                {filteredValues.map((match) => (
+                    <LegalValueLabel
+                        key={match.value}
+                        legal={match}
+                        control={
+                            <Checkbox
+                                checked={Boolean(valuesMap[match.value])}
+                                onChange={() => onChange(match.value)}
+                                name={match.value}
+                                color='primary'
+                                disabled={deletedLegalValues
+                                    .map(({ value }) => value)
+                                    .includes(match.value)}
+                            />
+                        }
+                    />
+                ))}
+            </StyledValuesContainer>
             <ConditionallyRender
                 condition={Boolean(error)}
                 show={<p className={styles.error}>{error}</p>}