Make accordion expand dependent on text width

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -12,6 +12,7 @@ import {
 } from 'constants/operators';
 
 import { useStyles } from '../ConstraintAccordion.styles';
+import {useState} from "react";
 interface IConstraintAccordionViewProps {
     constraint: IConstraint;
     onDelete?: () => void;
@@ -26,27 +27,34 @@ export const ConstraintAccordionView = ({
     onDelete,
 }: IConstraintAccordionViewProps) => {
     const { classes: styles } = useStyles();
+    const [expandable, setExpandable] = useState(true)
+    const [expanded, setExpanded] = useState(false);
 
     const singleValue = oneOf(
         [...semVerOperators, ...numOperators, ...dateOperators],
         constraint.operator
     );
 
+    const handleChange =
+        () => (event: React.SyntheticEvent, isExpanded: boolean) => {
+            setExpanded((!isExpanded && expandable));
+        };
+
     return (
         <Accordion
             className={styles.accordion}
             classes={{ root: styles.accordionRoot }}
+            expanded={expanded}
+            onChange={handleChange}
         >
-            <AccordionSummary
+            <AccordionSummary className={styles.summary} expandIcon={null}>
-                className={styles.summary}
-                expandIcon={<ExpandMore titleAccess="Toggle" />}
-            >
                 <ConstraintAccordionViewHeader
                     compact={compact}
                     constraint={constraint}
                     onEdit={onEdit}
                     onDelete={onDelete}
                     singleValue={singleValue}
+                    allowExpand={(shouldExpand) => setExpandable(shouldExpand)}
                 />
             </AccordionSummary>
 

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx

@@ -5,11 +5,12 @@ import { IConstraint } from 'interfaces/strategy';
 
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator';
 import classnames from 'classnames';
+import ReactDOM from 'react-dom';
 
 const StyledHeaderText = styled('span')(({ theme }) => ({
     display: '-webkit-box',
@@ -54,6 +55,7 @@ interface IConstraintAccordionViewHeaderProps {
     onDelete?: () => void;
     onEdit?: () => void;
     singleValue: boolean;
+    allowExpand: (shouldExpand: boolean) => void;
 }
 
 export const ConstraintAccordionViewHeader = ({
@@ -62,9 +64,14 @@ export const ConstraintAccordionViewHeader = ({
     onEdit,
     onDelete,
     singleValue,
+    allowExpand
 }: IConstraintAccordionViewHeaderProps) => {
     const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
+    const [height, setHeight] = useState(0);
+    const [width, setWidth] = useState(0);
+    const [textWidth, setTextWidth] = useState(0);
+    const elementRef = useRef<HTMLElement>(null);
 
     const onEditClick =
         onEdit &&
@@ -80,6 +87,35 @@ export const ConstraintAccordionViewHeader = ({
             onDelete();
         });
 
+    useEffect(() => {
+        if (elementRef && elementRef.current != null) {
+            console.log(elementRef.current.clientHeight);
+            console.log(elementRef.current.clientWidth);
+            setTextWidth(
+                Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines
+            );
+            setHeight(elementRef.current.clientHeight);
+            setWidth(elementRef.current.clientWidth);
+            allowExpand(textWidth > width)
+        }
+    }, []);
+
+    function getTextWidth(text: string | null) {
+        if (text != null) {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+
+            if (context != null) {
+                context.font = getComputedStyle(document.body).font;
+
+                return context.measureText(text).width;
+            }
+        }
+        return 0;
+    }
+
+    const shouldBeExpandable = textWidth > width;
+
     return (
         <div className={styles.headerContainer}>
             <ConstraintIcon />
@@ -104,20 +140,25 @@ export const ConstraintAccordionViewHeader = ({
                     }
                     elseShow={
                         <div className={styles.headerValuesContainer}>
-                            <StyledValuesSpan>
+                            <StyledValuesSpan ref={elementRef}>
                                 {constraint?.values
                                     ?.map(value => value)
                                     .join(', ')}
                             </StyledValuesSpan>
-                            <p
+                            <ConditionallyRender
-                                className={classnames(
+                                condition={shouldBeExpandable}
-                                    styles.headerValuesExpand,
+                                show={
-                                    'valuesExpandLabel'
+                                    <p
-                                )}
+                                        className={classnames(
-                            >
+                                            styles.headerValuesExpand,
-                                Expand to view all ({constraint?.values?.length}
+                                            'valuesExpandLabel'
-                                )
+                                        )}
-                            </p>
+                                    >
+                                        Expand to view all (
+                                        {constraint?.values?.length})
+                                    </p>
+                                }
+                            />
                         </div>
                     }
                 />