From 88aa9d2c1f46843154a564febf9a3be55091c8f2 Mon Sep 17 00:00:00 2001
From: iberdinsky-skilld <iberdinsky@slilld.cloud>
Date: Fri, 1 Nov 2024 06:36:45 +0100
Subject: [PATCH] Fix for long action name/description

---
 client/src/components/ActionsFlow.tsx         | 26 +++++++++++++++++--
 client/src/utils/react-flow-builder.tsx       | 18 ++++++++++++-
 .../very-long-name-action-copy/action.yaml    | 16 ++++++++++++
 .../actions/very-long-name-action/action.yaml | 16 ++++++++++++
 4 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action-copy/action.yaml
 create mode 100644 very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action/action.yaml

diff --git a/client/src/components/ActionsFlow.tsx b/client/src/components/ActionsFlow.tsx
index d0c1550..a4db576 100644
--- a/client/src/components/ActionsFlow.tsx
+++ b/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'}
diff --git a/client/src/utils/react-flow-builder.tsx b/client/src/utils/react-flow-builder.tsx
index 449e994..f85e291 100644
--- a/client/src/utils/react-flow-builder.tsx
+++ b/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
@@ -22,6 +22,22 @@ 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],
+  [214.79, 87.25, 50.78],
+  [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],
+  [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 = ({
diff --git a/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action-copy/action.yaml b/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action-copy/action.yaml
new file mode 100644
index 0000000..0f07354
--- /dev/null
+++ b/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
diff --git a/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action/action.yaml b/very-long-name-action-group/very-long-action-childgroup/actions/very-long-name-action/action.yaml
new file mode 100644
index 0000000..0f07354
--- /dev/null
+++ b/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