From 0511ea1f5691f94de5570ed877d3916e533cbff5 Mon Sep 17 00:00:00 2001
From: Ilango <ilango.rajagopal@flowiseai.com>
Date: Tue, 9 Apr 2024 20:04:59 +0530
Subject: [PATCH] Fix: UI issues in credentials dialog and card descriptions
 (#2137)

* Update styles for dashboard page

* Fix grid in chatflows and marketplaces pages

* Update styles for main routes

* Create ViewHeader component and use it in chatflows and marketplace

* Use viewheader in all main routes views and make the styles consistent

* Update table styles for chatflow and marketplace views

* Update table and grid styles in all main routes views

* Make backgrounds, borders, and colors everywhere

* Apply text ellipsis for titles in cards and tables

* Update credentials list dialog styles

* Update tools dialog styles

* Update styles for inputs and dialogs

* Show skeleton loaders for main routes

* Apply text ellipsis to chatflow title in canvas page

* Update icons for load and export buttons in tools and assistants

* Fix issue where table header is shown when number of elements is zero

* Add error boundary component to main routes

* Capture errors from all requests in main routes

* Fix id for add api key and add variable buttons

* Fix missing th tag in variables table body

* Fix credentials search background color

* Apply multiline text ellipsis to description in ItemCard

* Fix unused import
---
 packages/ui/src/ui-component/cards/ItemCard.jsx    | 14 +++++++++++++-
 .../src/views/credentials/CredentialListDialog.jsx |  5 ++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/ui-component/cards/ItemCard.jsx b/packages/ui/src/ui-component/cards/ItemCard.jsx
index f2774e1b..527e7037 100644
--- a/packages/ui/src/ui-component/cards/ItemCard.jsx
+++ b/packages/ui/src/ui-component/cards/ItemCard.jsx
@@ -91,7 +91,19 @@ const ItemCard = ({ data, images, onClick }) => {
                             </Typography>
                         </div>
                         {data.description && (
-                            <span style={{ marginTop: 10, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}>{data.description}</span>
+                            <span
+                                style={{
+                                    display: '-webkit-box',
+                                    marginTop: 10,
+                                    overflowWrap: 'break-word',
+                                    WebkitLineClamp: 3,
+                                    WebkitBoxOrient: 'vertical',
+                                    textOverflow: 'ellipsis',
+                                    overflow: 'hidden'
+                                }}
+                            >
+                                {data.description}
+                            </span>
                         )}
                     </Box>
                     {images && (
diff --git a/packages/ui/src/views/credentials/CredentialListDialog.jsx b/packages/ui/src/views/credentials/CredentialListDialog.jsx
index b7001b7a..34c09b54 100644
--- a/packages/ui/src/views/credentials/CredentialListDialog.jsx
+++ b/packages/ui/src/views/credentials/CredentialListDialog.jsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { List, ListItemButton, Dialog, DialogContent, DialogTitle, Box, OutlinedInput, InputAdornment, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
@@ -12,7 +12,6 @@ import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 const CredentialListDialog = ({ show, dialogProps, onCancel, onCredentialSelected }) => {
     const portalElement = document.getElementById('portal')
-    const customization = useSelector((state) => state.customization)
     const dispatch = useDispatch()
     const theme = useTheme()
     const [searchValue, setSearchValue] = useState('')
@@ -58,7 +57,7 @@ const CredentialListDialog = ({ show, dialogProps, onCancel, onCredentialSelecte
             <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxHeight: '75vh', position: 'relative', px: 3, pb: 3 }}>
                 <Box
                     sx={{
-                        backgroundColor: customization.isDarkMode ? theme.palette.background.darkPaper : theme.palette.background.paper,
+                        backgroundColor: theme.palette.background.paper,
                         pt: 2,
                         position: 'sticky',
                         top: 0,