[TILES-V2-12] : small improvements (#1118)

# Small tiles improvments

- Add Table icon in breadcrumb to differentiate v2 from v1 tiles
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/130bce7b-5cb8-4fbe-b33c-5165559a2cc7.png)
- Improve cell editing functionality:
  - Allow adding line breaks with Alt+Enter
  - Change Shift+Enter to navigate upward
  - Prevent cell editing when data is being fetched
- Fix cell selection behaviour to allow selecting substrings in cel

Author: pregnantboy

packages/frontend/src/pages/Tile/components/TableBanner/BreadCrumb.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { BiTable } from 'react-icons/bi'
 import { FaChevronRight } from 'react-icons/fa'
 import { Link } from 'react-router-dom'
 import {
@@ -10,12 +11,17 @@ import {
 
 import EditableInput from '@/components/EditableInput'
 import * as URLS from '@/config/urls'
+import { DatabaseType } from '@/graphql/__generated__/graphql'
 
 import { useTableContext } from '../../contexts/TableContext'
 import { useUpdateTable } from '../../hooks/useUpdateTable'
 
 function BreadCrumb() {
-  const { tableName: initialTableName, hasEditPermission } = useTableContext()
+  const {
+    tableName: initialTableName,
+    hasEditPermission,
+    databaseType,
+  } = useTableContext()
   const { updateTableName } = useUpdateTable()
 
   const onSave = useCallback(
@@ -31,8 +37,14 @@ function BreadCrumb() {
       separator={<Icon as={FaChevronRight} color="secondary.300" h={3} />}
     >
       <BreadcrumbItem>
-        <BreadcrumbLink as={Link} to={URLS.TILES}>
-          Tiles
+        <BreadcrumbLink
+          as={Link}
+          to={URLS.TILES}
+          display="flex"
+          alignItems="center"
+          gap={2}
+        >
+          {databaseType === DatabaseType.Pg && <Icon as={BiTable} />} Tiles
         </BreadcrumbLink>
       </BreadcrumbItem>
       <EditableInput

packages/frontend/src/pages/Tile/components/TableRow/TableCell.tsx

@@ -23,6 +23,7 @@ import { useContextMenuContext } from '../../contexts/ContextMenuContext'
 import { useRowContext } from '../../contexts/RowContext'
 import { useTableContext } from '../../contexts/TableContext'
 import { moveCell } from '../../helpers/cell-navigation'
+import { addLineBreak } from '../../helpers/line-break'
 import { shallowCompare } from '../../helpers/shallow-compare'
 import { CellType, GenericRowData } from '../../types'
 
@@ -35,7 +36,7 @@ function TableCell({
   table,
   cell,
 }: CellContext<GenericRowData, string>) {
-  const { mode } = useTableContext()
+  const { mode, isFetching } = useTableContext()
   const { onRightClick } = useContextMenuContext()
   const { sortedIndex: rowIndex, className, isEditingRow } = useRowContext()
   const textAreaRef = useRef<HTMLTextAreaElement>(null)
@@ -88,11 +89,13 @@ function TableCell({
        */
       switch (e.key) {
         case 'Enter': {
-          if (e.shiftKey) {
-            return
-          }
           e.preventDefault()
           if (!isViewMode) {
+            // Allow Alt+Enter to add new line
+            if (e.altKey) {
+              addLineBreak(e.currentTarget as HTMLTextAreaElement)
+              return
+            }
             if (row.id === NEW_ROW_ID || rowIndex === -1) {
               if (
                 !shallowCompare(tableMeta?.tempRowData.current, {
@@ -110,7 +113,7 @@ function TableCell({
             row,
             rowIndex,
             columnIndex,
-            direction: 'down',
+            direction: e.shiftKey ? 'up' : 'down',
             allowCrossBoundaries: true,
           })
           break
@@ -260,7 +263,6 @@ function TableCell({
       }}
       ref={cellContainerRef}
       className={styles.cell}
-      onClick={startEditing}
       onContextMenu={!isViewMode ? onContextMenu : undefined}
     >
       {/* if editing new row, show text area for all cells in the row */}
@@ -286,7 +288,7 @@ function TableCell({
           _readOnly={{
             boxShadow: CELL_BOX_SHADOW.DEFAULT,
           }}
-          isReadOnly={isViewMode}
+          isReadOnly={isViewMode || isFetching}
           defaultValue={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
@@ -297,6 +299,7 @@ function TableCell({
         />
       ) : (
         <div
+          onClick={startEditing}
           style={{
             display: 'flex',
             height: '100%',
@@ -307,6 +310,7 @@ function TableCell({
             wordBreak: 'break-word',
             fontSize: '0.875rem',
             cursor: 'cell',
+
             backgroundColor: isHighlightingCell
               ? 'var(--chakra-colors-orange-200)'
               : hasMatchingSearch

packages/frontend/src/pages/Tile/helpers/line-break.ts

@@ -0,0 +1,8 @@
+export function addLineBreak(element: HTMLTextAreaElement) {
+  const start = element.selectionStart
+  const end = element.selectionEnd
+  const value = element.value
+
+  element.value = value.substring(0, start) + '\n' + value.substring(end)
+  element.selectionStart = element.selectionEnd = start + 1
+}