fix: constraint-related UI fixes (#1069)

* fix: constraint-related UI fixes * test spans on values list * fix: values truncation, misc UI fixes * fix: no longer assign const variable (debug)
2025-01-25 00:07:47 +01:00 · 2022-06-08 08:33:39 +01:00 · 2022-06-08 08:33:39 +01:00 · 81c25c7774
commit 81c25c7774
parent ee52f224bc
7 changed files with 104 additions and 61 deletions
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@ -3,13 +3,11 @@ import { makeStyles } from 'tss-react/mui';
 export const useStyles = makeStyles()(theme => ({
    constraintIconContainer: {
        backgroundColor: theme.palette.primary.main,
-        height: '28px',
-        width: '28px',
        borderRadius: '50%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
-        marginRight: '2rem',
+        marginRight: theme.spacing(2),
        [theme.breakpoints.down(650)]: {
            marginBottom: '1rem',
            marginRight: 0,
@ -17,8 +15,6 @@ export const useStyles = makeStyles()(theme => ({
    },
    constraintIcon: {
        fill: '#fff',
-        width: '26px',
-        height: '26px',
    },
    accordion: {
        border: `1px solid ${theme.palette.grey[300]}`,
@ -44,7 +40,7 @@ export const useStyles = makeStyles()(theme => ({
        display: 'flex',
        alignItems: 'center',
        width: '100%',
-        [theme.breakpoints.down(650)]: {
+        [theme.breakpoints.down(710)]: {
            flexDirection: 'column',
            alignItems: 'center',
            position: 'relative',
@ -56,10 +52,13 @@ export const useStyles = makeStyles()(theme => ({
    },
    headerValues: {
        fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.primary.main,
    },
    headerValuesExpand: {
        fontSize: theme.fontSizes.smallBody,
+        color: theme.palette.primary.dark,
+        [theme.breakpoints.down(710)]: {
+            textAlign: 'center',
+        },
    },
    headerConstraintContainer: {
        minWidth: '220px',
@ -69,11 +68,6 @@ export const useStyles = makeStyles()(theme => ({
            paddingRight: 0,
        },
    },
-    headerViewValuesContainer: {
-        [theme.breakpoints.down(990)]: {
-            display: 'none',
-        },
-    },
    editingBadge: {
        borderRadius: theme.shape.borderRadiusExtraLarge,
        padding: '0.25rem 0.5rem',
@ -122,9 +116,8 @@ export const useStyles = makeStyles()(theme => ({
    headerActions: {
        marginLeft: 'auto',
        whiteSpace: 'nowrap',
-        [theme.breakpoints.down(660)]: {
-            marginLeft: '0',
-            marginTop: '0.5rem',
+        [theme.breakpoints.down(710)]: {
+            display: 'none',
        },
    },
    accordionDetails: {
@ -140,9 +133,8 @@ export const useStyles = makeStyles()(theme => ({
    summary: {
        border: 'none',
        padding: '0.25rem 1rem',
-        height: '85px',
-        [theme.breakpoints.down(770)]: {
-            height: '200px',
+        '&:hover .valuesExpandLabel': {
+            textDecoration: 'underline',
        },
    },
    settingsParagraph: {
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';

 export const useStyles = makeStyles()(theme => ({
    container: {
+        width: '100%',
        display: 'grid',
        gap: '1rem',
    },
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
@ -72,9 +72,9 @@ const SingleValue = ({ value, operator }: ISingleValueProps) => {
            <Chip
                label={
                    <StringTruncator
-                        maxWidth="200"
+                        maxWidth="400"
                        text={value}
-                        maxLength={25}
+                        maxLength={50}
                    />
                }
                className={styles.chip}
@ -95,7 +95,15 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => {

    return (
        <>
-            <ConstraintValueSearch filter={filter} setFilter={setFilter} />
+            <ConditionallyRender
+                condition={values.length > 20}
+                show={
+                    <ConstraintValueSearch
+                        filter={filter}
+                        setFilter={setFilter}
+                    />
+                }
+            />
            {values
                .filter(value => value.includes(filter))
                .map((value, index) => (
@ -103,9 +111,9 @@ const MultipleValues = ({ values }: IMultipleValuesProps) => {
                        key={`${value}-${index}`}
                        label={
                            <StringTruncator
-                                maxWidth="200"
+                                maxWidth="400"
                                text={value}
-                                maxLength={25}
+                                maxLength={50}
                                className={styles.chipValue}
                            />
                        }
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@ -1,5 +1,4 @@
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { Chip, useMediaQuery, IconButton, Tooltip } from '@mui/material';
+import { Chip, IconButton, Tooltip, styled } from '@mui/material';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
 import { Delete, Edit } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
@ -10,6 +9,44 @@ import React from 'react';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
+import classnames from 'classnames';
+
+const StyledHeaderText = styled('span')(({ theme }) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    maxWidth: '100px',
+    minWidth: '100px',
+    marginRight: '10px',
+    wordBreak: 'break-word',
+    fontSize: theme.fontSizes.smallBody,
+    [theme.breakpoints.down(710)]: {
+        textAlign: 'center',
+        padding: theme.spacing(1, 0),
+        marginRight: 'inherit',
+        maxWidth: 'inherit',
+    },
+}));
+
+const StyledValuesSpan = styled('span')(({ theme }) => ({
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    wordBreak: 'break-word',
+    fontSize: theme.fontSizes.smallBody,
+    [theme.breakpoints.down(710)]: {
+        margin: theme.spacing(1, 0),
+        textAlign: 'center',
+    },
+}));
+
+const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
+    [theme.breakpoints.down(710)]: {
+        margin: theme.spacing(1, 0),
+    },
+}));

 interface IConstraintAccordionViewHeaderProps {
    compact: boolean;
@ -28,9 +65,6 @@ export const ConstraintAccordionViewHeader = ({
 }: IConstraintAccordionViewHeaderProps) => {
    const { classes: styles } = useStyles();
    const { locationSettings } = useLocationSettings();
-    const smallScreen = useMediaQuery(`(max-width:${790}px)`);
-
-    const minWidthHeader = compact || smallScreen ? '100px' : '175px';

    const onEditClick =
        onEdit &&
@ -50,42 +84,43 @@ export const ConstraintAccordionViewHeader = ({
        <div className={styles.headerContainer}>
            <ConstraintIcon />
            <div className={styles.headerMetaInfo}>
-                <div style={{ minWidth: minWidthHeader }}>
-                    <StringTruncator
-                        text={constraint.contextName}
-                        maxWidth="175px"
-                        maxLength={25}
-                    />
-                </div>
+                <Tooltip title={constraint.contextName} arrow>
+                    <StyledHeaderText>
+                        {constraint.contextName}
+                    </StyledHeaderText>
+                </Tooltip>
                <div className={styles.headerConstraintContainer}>
                    <ConstraintOperator constraint={constraint} />
                </div>
-                <div className={styles.headerViewValuesContainer}>
-                    <ConditionallyRender
-                        condition={singleValue}
-                        show={
-                            <Chip
-                                label={formatConstraintValue(
-                                    constraint,
-                                    locationSettings
+                <ConditionallyRender
+                    condition={singleValue}
+                    show={
+                        <StyledSingleValueChip
+                            label={formatConstraintValue(
+                                constraint,
+                                locationSettings
+                            )}
+                        />
+                    }
+                    elseShow={
+                        <div className={styles.headerValuesContainer}>
+                            <StyledValuesSpan>
+                                {constraint?.values
+                                    ?.map(value => value)
+                                    .join(', ')}
+                            </StyledValuesSpan>
+                            <p
+                                className={classnames(
+                                    styles.headerValuesExpand,
+                                    'valuesExpandLabel'
                                )}
-                            />
-                        }
-                        elseShow={
-                            <div className={styles.headerValuesContainer}>
-                                <p className={styles.headerValues}>
-                                    {constraint?.values?.length}{' '}
-                                    {constraint?.values?.length === 1
-                                        ? 'value'
-                                        : 'values'}
-                                </p>
-                                <p className={styles.headerValuesExpand}>
-                                    Expand to view
-                                </p>
-                            </div>
-                        }
-                    />
-                </div>
+                            >
+                                Expand to view all ({constraint?.values?.length}
+                                )
+                            </p>
+                        </div>
+                    }
+                />
            </div>
            <div className={styles.headerActions}>
                <ConditionallyRender
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts
@ -6,6 +6,7 @@ export const useStyles = makeStyles()(theme => ({
        margin: '0.25rem',
    },
    paragraph: {
+        display: 'inline',
        margin: '0.25rem 0',
        maxWidth: '95%',
        textAlign: 'center',
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
@ -13,6 +13,8 @@ export const useStyles = makeStyles()(theme => ({
    link: {
        textDecoration: 'none',
        fontWeight: theme.fontWeight.bold,
-        color: theme.palette.primary.main,
+        '&:hover': {
+            textDecoration: 'underline',
+        },
    },
 }));
--- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
@ -14,6 +14,10 @@ export const useStyles = makeStyles()(theme => ({
        [theme.breakpoints.down('sm')]: {
            justifyContent: 'center',
        },
+        '&:hover': {
+            transition: 'background-color 0.2s ease-in-out',
+            backgroundColor: theme.palette.grey[100],
+        },
    },
    header: {
        display: 'flex',