fix : Foreign key dropdown width oversize issue in create and edit row (

#9799) * fix : foreign key dropdown width oversize issue in create and edit row * fix : unable to read the menu text in fkr dropdown * css classaname prefix changes * fix : added tooltips for create and edit row in large fk values * fix : Added max-width property for tooltip on create and edit row for foreign key fields * fix :added tooltips for fkr dropdown in create and edit column * fix : added tooltips for fkr dropdowns in create and edit table
ToolJet · Jun 4, 2024 · 6ea2a47 · 6ea2a47
1 parent 35efc02
commit 6ea2a47
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 13 deletions.
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
@@ -46,6 +46,12 @@ const DropDownSelect = ({
   fetchTables,
   onTableClick,
   referencedForeignKeyDetails = [],
+  isCreateRow = false,
+  isEditRow = false,
+  isCreateColumn = false,
+  isEditColumn = false,
+  isEditTable = false,
+  isCreateTable = false,
   customChildren,
   isForeignKeyInEditCell = false,
   shouldCloseFkMenu,
@@ -208,6 +214,12 @@ const DropDownSelect = ({
             actions={actions}
             actionName={actionName}
             referencedForeignKeyDetails={referencedForeignKeyDetails}
+            isCreateRow={isCreateRow}
+            isEditRow={isEditRow}
+            isEditColumn={isEditColumn}
+            isCreateColumn={isCreateColumn}
+            isEditTable={isEditTable}
+            isCreateTable={isCreateTable}
             customChildren={customChildren}
             isForeignKeyInEditCell={isForeignKeyInEditCell}
             closeFKMenu={closeFKMenu}
@@ -225,9 +237,7 @@ const DropDownSelect = ({
             setShowMenu(true);
           }}
         >
-          <span style={{ display: 'inline-block', width: '100%', color: darkMode ? '#fff' : '' }}>
-            {selected.label}
-          </span>
+          <span style={{ display: 'inline-block', color: darkMode ? '#fff' : '' }}>{selected.label}</span>
         </div>
       ) : (
         <div className={`col-auto ${buttonClasses}`} id={popoverBtnId.current}>

diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx
@@ -51,6 +51,12 @@ function DataSourceSelect({
   actions,
   actionName,
   referencedForeignKeyDetails,
+  isCreateRow,
+  isEditRow,
+  isEditColumn,
+  isCreateColumn,
+  isEditTable,
+  isCreateTable,
   customChildren,
   isForeignKeyInEditCell,
   closeFKMenu,
@@ -314,14 +320,36 @@ function DataSourceSelect({
                         />
                       ))}
 
-                    <span
-                      className={cx({
-                        'ms-1 ': props?.data?.icon,
-                        'flex-grow-1': !showDescription,
-                      })}
+                    <ToolTip
+                      message={children}
+                      placement="top"
+                      tooltipClassName="tjdb-cell-tooltip"
+                      show={
+                        (isCellEdit ||
+                          isCreateRow ||
+                          isEditRow ||
+                          isCreateColumn ||
+                          isEditColumn ||
+                          isEditTable ||
+                          isCreateTable) &&
+                        children?.length > 30
+                      }
                     >
-                      {children}
-                    </span>
+                      <span
+                        className={cx({
+                          'ms-1 ': props?.data?.icon,
+                          'flex-grow-1': !showDescription,
+                        })}
+                        style={{
+                          width: '80%',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {children}
+                      </span>
+                    </ToolTip>
 
                     {foreignKeyAccess && showRedirection && props.isFocused && (
                       <Maximize

diff --git a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
@@ -324,6 +324,7 @@ const ColumnForm = ({
                   setReferencedColumnDetails={setReferencedColumnDetails}
                   scrollEventForColumnValus={true}
                   cellColumnName={columnName}
+                  isCreateColumn={true}
                 />
               )}
             </div>

diff --git a/frontend/src/TooljetDatabase/Forms/EditColumnForm.jsx b/frontend/src/TooljetDatabase/Forms/EditColumnForm.jsx
@@ -575,6 +575,7 @@ const ColumnForm = ({
                     setReferencedColumnDetails={setReferencedColumnDetails}
                     scrollEventForColumnValus={true}
                     cellColumnName={selectedColumn?.Header}
+                    isEditColumn={true}
                   />
                 )}
               </div>

diff --git a/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx b/frontend/src/TooljetDatabase/Forms/EditRowForm.jsx
@@ -315,6 +315,7 @@ const EditRowForm = ({
                 setReferencedColumnDetails={setReferencedColumnDetails}
                 scrollEventForColumnValus={true}
                 cellColumnName={columnName}
+                isEditRow={true}
               />
             ) : (
               <input
@@ -330,7 +331,6 @@ const EditRowForm = ({
                 }`}
                 data-cy={`${String(columnName).toLocaleLowerCase().replace(/\s+/g, '-')}-input-field`}
                 autoComplete="off"
-                ref={(el) => (inputRefs.current[columnName] = el)}
                 // onFocus={onFocused}
               />
             )}

diff --git a/frontend/src/TooljetDatabase/Forms/RowForm.jsx b/frontend/src/TooljetDatabase/Forms/RowForm.jsx
@@ -329,6 +329,7 @@ const RowForm = ({
                 setReferencedColumnDetails={setReferencedColumnDetails}
                 scrollEventForColumnValus={true}
                 cellColumnName={columnName}
+                isCreateRow={true}
               />
             ) : (
               <input

diff --git a/frontend/src/TooljetDatabase/Forms/TableSchema.jsx b/frontend/src/TooljetDatabase/Forms/TableSchema.jsx
@@ -344,6 +344,8 @@ function TableSchema({
                 setReferencedColumnDetails={setReferencedColumnDetails}
                 scrollEventForColumnValus={true}
                 cellColumnName={columnDetails[index].column_name}
+                isEditTable={isEditMode}
+                isCreateTable={!isEditMode}
               />
             ) : (
               <ToolTip

diff --git a/frontend/src/TooljetDatabase/Forms/styles.scss b/frontend/src/TooljetDatabase/Forms/styles.scss
@@ -680,6 +680,7 @@
 .foreignKeyAcces-container-drawer {
   border-radius: 5px;
   height: 100% !important;
+  max-width: 494px;
 
   button {
     height: 35px !important;
@@ -700,6 +701,8 @@
 
     .text-truncate {
       font-size: 14px !important;
+      width: 85%;
+      text-align: left;
     }
 
     .dd-select-control-chevron {

diff --git a/frontend/src/TooljetDatabase/Menu/CellEditMenu/index.jsx b/frontend/src/TooljetDatabase/Menu/CellEditMenu/index.jsx
@@ -240,7 +240,7 @@ export const CellEditMenu = ({
             onClick={isForeignKeyInEditCell ? closeFKMenu : closePopover}
             variant="tertiary"
             size="sm"
-            className="fs-12"
+            className="fs-12 p-2"
           >
             Cancel
           </ButtonSolid>
@@ -249,7 +249,7 @@ export const CellEditMenu = ({
             disabled={cellValue == previousCellValue ? true : false}
             variant="primary"
             size="sm"
-            className="fs-12"
+            className="fs-12 p-2"
           >
             Save
           </ButtonSolid>

diff --git a/frontend/src/TooljetDatabase/Menu/CellEditMenu/styles.scss b/frontend/src/TooljetDatabase/Menu/CellEditMenu/styles.scss
@@ -51,4 +51,20 @@
             text-align: center;
         }
     }
+}
+
+.tjdb-foreignKeyAccess-container {
+    border-radius: 4px;
+
+    button {
+        border-radius: 4px !important;
+
+        .text-truncate {
+            width: 90% !important;
+            text-align: left !important;
+        }
+
+    }
+
+
 }
diff --git a/frontend/src/TooljetDatabase/Table/index.jsx b/frontend/src/TooljetDatabase/Table/index.jsx
@@ -1259,6 +1259,7 @@ const Table = ({ collapseSidebar }) => {
                                 cell.column.dataType !== 'boolean' &&
                                 cell.value !== ''
                               }
+                              tooltipClassName="tooltip-table-dashboard"
                             >
                               <div
                                 className={`${

diff --git a/frontend/src/TooljetDatabase/Table/styles.scss b/frontend/src/TooljetDatabase/Table/styles.scss
@@ -175,6 +175,19 @@
 
   .tjdb-selected-cell {
     border: 1.5px solid var(--Indigo-09, #3E63DD) !important;
+
+    .tjdb-td-wrapper {
+      div {
+        padding-bottom: 0px !important;
+
+        span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          width: 85%;
+        }
+      }
+    }
   }
 
   .card-table tr td:last-child {
@@ -468,4 +481,12 @@
     }
 
   }
+}
+
+.tooltip-table-dashboard {
+  max-width: 500px !important;
+
+  .tooltip-inner {
+    max-width: 100% !important;
+  }
 }
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
@@ -13128,6 +13128,14 @@ tbody {
   }
 }
 
+.tjdb-cell-tooltip {
+  max-width: 420px !important;
+
+  .tooltip-inner {
+    max-width: 100% !important;
+  }
+}
+
 div.ds-svg-container svg {
   padding: 2px;
 }