Fix for long action name/description (#97)

Co-authored-by: iberdinsky-skilld <iberdinsky@slilld.cloud>

Author: iberdinsky-skilld

client/src/components/ActionsFlow.tsx

@@ -1,5 +1,6 @@
 import 'reactflow/dist/style.css'
 
+import { Typography } from '@mui/material'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 import Paper from '@mui/material/Paper'
@@ -118,6 +119,11 @@ const WhiteBand = ({ data }: { data: INodeData }) => {
             typography: 'subtitle2',
             fontSize: `${16 * elementsScaleCoef}px`,
             lineHeight: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: '1',
+            WebkitBoxOrient: 'vertical',
           }}
         >
           {data?.label}
@@ -128,7 +134,12 @@ const WhiteBand = ({ data }: { data: INodeData }) => {
               typography: 'subtitle2',
               fontSize: `${11 * elementsScaleCoef}px`,
               color: '#667085',
-              lineHeight: 1.2,
+              lineHeight: 1,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: '1',
+              WebkitBoxOrient: 'vertical',
             }}
           >
             {data?.description}
@@ -232,7 +243,18 @@ function NodeWrapper({ data }: { data: INodeData }) {
           color: '#fff',
         }}
       >
-        {data?.label}
+        <Typography
+          sx={{
+            lineHeight: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: '2',
+            WebkitBoxOrient: 'vertical',
+          }}
+        >
+          {data?.label}
+        </Typography>
         {data.actionsAmount && (
           <Box
             className={'actions-pill'}

client/src/utils/react-flow-builder.tsx

@@ -10,7 +10,7 @@ import { getCustomisation } from '../utils/page-customisation'
 // Coefficient less than 0.51 behaves unpredictably.
 // Use coefficient between 0.51 till endless
 export const elementsScaleCoef = 1
-export const actionWidth = 260 * elementsScaleCoef
+export const actionWidth = 300 * elementsScaleCoef
 export const actionHeight = 60 * elementsScaleCoef
 export const grandFolderGap = 80 * elementsScaleCoef
 export const folderLabelHeight = 50 * elementsScaleCoef
@@ -34,6 +34,10 @@ const layerColorSchemesHSL = [
   [346.93, 83.26, 57.84],
   [160.47, 68.42, 51.57],
   [252.15, 91.86, 66.27],
+  [214.79, 87.25, 50.78],
+  [346.93, 83.26, 57.84],
+  [160.47, 68.42, 51.57],
+  [252.15, 91.86, 66.27],
 ]
 
 export const buildNodeColor = ({

example/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action-copy/action.yaml

@@ -0,0 +1,16 @@
+action:
+  title: Lorem ipsum dolor sit amet, an nam copiosae principes pertinacia. Ea decore sanctus vel. Ut regione pertinacia vel. Dolorum facilis at vix
+  description: Lorem ipsum dolor sit amet, an nam copiosae principes pertinacia. Ea decore sanctus vel. Ut regione pertinacia vel. Dolorum facilis at vix
+  arguments:
+    - name: arg1
+      title: Argument 1
+      description: Some additional info for arg
+    - name: arg2
+      title: Argument 2
+      description: Some additional info for arg
+  options: # TODO Use json schema. By default string. Do not allow complex data.
+    - name: opt1
+      title: Option 1
+      description: Some additional info for option
+  image: python:3.7-slim
+  command: python3 %s

example/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action/action.yaml

@@ -0,0 +1,16 @@
+action:
+  title: Lorem ipsum dolor sit amet, an nam copiosae principes pertinacia. Ea decore sanctus vel. Ut regione pertinacia vel. Dolorum facilis at vix
+  description: Lorem ipsum dolor sit amet, an nam copiosae principes pertinacia. Ea decore sanctus vel. Ut regione pertinacia vel. Dolorum facilis at vix
+  arguments:
+    - name: arg1
+      title: Argument 1
+      description: Some additional info for arg
+    - name: arg2
+      title: Argument 2
+      description: Some additional info for arg
+  options: # TODO Use json schema. By default string. Do not allow complex data.
+    - name: opt1
+      title: Option 1
+      description: Some additional info for option
+  image: python:3.7-slim
+  command: python3 %s