Merge pull request #377 from devtron-labs/feat/resizable-columns

feat: add support for resizable columns in resource browser

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.3",
+    "version": "0.6.4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -15,11 +15,13 @@
  */
 
 import { Tooltip } from '@Common/Tooltip'
-import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
-import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
+import Draggable, { DraggableProps } from 'react-draggable'
+import { ReactComponent as SortIcon } from '@Icons/ic-arrow-up-down.svg'
+import { ReactComponent as SortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
 import { SortingOrder } from '../Constants'
 import { noop } from '../Helper'
 import { SortableTableHeaderCellProps } from './types'
+import './sortableTableHeaderCell.scss'
 
 /**
  * Reusable component for the table header cell with support for sorting icons
@@ -34,6 +36,23 @@ import { SortableTableHeaderCellProps } from './types'
  *   disabled={isDisabled}
  * />
  * ```
+ *
+ * @example Non-sortable cell
+ * ```tsx
+ * <SortableTableHeaderCell
+ *   isSortable={false}
+ *   title="Header Cell"
+ * />
+ * ```
+ *
+ * * @example Resizable cell (Layout to be controlled externally using useResizableTableConfig)
+ * ```tsx
+ * <SortableTableHeaderCell
+ *   isSortable={false}
+ *   isResizable
+ *   title="Header Cell"
+ * />
+ * ```
  */
 const SortableTableHeaderCell = ({
     isSorted,
@@ -43,7 +62,12 @@ const SortableTableHeaderCell = ({
     disabled,
     isSortable = true,
     showTippyOnTruncate = false,
+    id,
+    handleResize,
+    isResizable,
 }: SortableTableHeaderCellProps) => {
+    const isCellResizable = !!(isResizable && id && handleResize)
+
     const renderSortIcon = () => {
         if (!isSortable) {
             return null
@@ -60,18 +84,46 @@ const SortableTableHeaderCell = ({
         return <SortIcon className="icon-dim-12 mw-12 scn-7 dc__no-shrink" />
     }
 
+    const handleDrag: DraggableProps['onDrag'] = (_, data) => {
+        if (isCellResizable) {
+            handleResize(id, data.deltaX)
+        }
+    }
+
     return (
-        <button
-            type="button"
-            className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''}`}
-            onClick={isSortable ? triggerSorting : noop}
-            disabled={disabled}
-        >
-            <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
-                <span className="dc__uppercase dc__ellipsis-right">{title}</span>
-            </Tooltip>
-            {renderSortIcon()}
-        </button>
+        <div className="flex dc__content-space dc__gap-6 dc__position-rel">
+            <button
+                type="button"
+                className={`dc__transparent p-0 cn-7 flex dc__content-start dc__gap-4 dc__select-text ${!isSortable ? 'cursor-default' : ''} dc__position-rel`}
+                onClick={isSortable ? triggerSorting : noop}
+                disabled={disabled}
+            >
+                <Tooltip showOnTruncate={showTippyOnTruncate} content={title}>
+                    <span className="dc__uppercase dc__truncate">{title}</span>
+                </Tooltip>
+                {renderSortIcon()}
+            </button>
+            {isCellResizable && (
+                <Draggable
+                    handle=".sortable-table-header__resize-btn"
+                    defaultClassNameDragging="sortable-table-header__resize-btn--dragging"
+                    position={{
+                        x: 0,
+                        y: 0,
+                    }}
+                    axis="none"
+                    onDrag={handleDrag}
+                    bounds={{
+                        top: 0,
+                        bottom: 0,
+                    }}
+                >
+                    <div className="sortable-table-header__resize-btn flex h-100 dc__no-shrink px-2 dc__position-abs dc__cursor-col-resize dc__right-3--neg">
+                        <div className="dc__divider h-16" />
+                    </div>
+                </Draggable>
+            )}
+        </div>
     )
 }
 

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -0,0 +1,3 @@
+export const DEFAULT_MINIMUM_HEADER_WIDTH = 70
+
+export const DEFAULT_MAXIMUM_HEADER_WIDTH = 600

src/Common/SortableTableHeaderCell/constants.ts

@@ -15,4 +15,5 @@
  */
 
 export { default as SortableTableHeaderCell } from './SortableTableHeaderCell'
+export { default as useResizableTableConfig } from './useResizableTableConfig'
 export type { SortableTableHeaderCellProps } from './types'

src/Common/SortableTableHeaderCell/index.ts

@@ -0,0 +1,14 @@
+.sortable-table-header {
+    &__resize-btn {
+        > div {
+            transition: all 0.1s ease-out;
+        }
+
+        &:hover, &--dragging {
+            > div {
+                height: 100% !important;
+                background-color: var(--B500);
+            }
+        }
+    }
+}

src/Common/SortableTableHeaderCell/sortableTableHeaderCell.scss

@@ -16,37 +16,78 @@
 
 import { SortingOrder } from '../Constants'
 
-export interface SortableTableHeaderCellProps {
-    /**
-     * If true, the cell is sorted
-     */
-    isSorted: boolean
-    /**
-     * Callback for handling the sorting of the cell
-     */
-    triggerSorting: () => void
-    /**
-     * Current sort order
-     *
-     * Note: On click, the sort order should be updated as required
-     */
-    sortOrder: SortingOrder
+export type SortableTableHeaderCellProps = {
     /**
      * Label for the cell
      */
     title: string
-    /**
-     * If true, the cell is disabled
-     */
-    disabled: boolean
-    /**
-     * If false, the cell acts like normal table header cell
-     * @default true
-     */
-    isSortable?: boolean
     /**
      * If true, the tippy is shown on Sortable header if text is truncated
      * @default false
      */
     showTippyOnTruncate?: boolean
+} & (
+    | {
+          /**
+           * Unique identifier for the column
+           */
+          id: string | number
+          /**
+           * If true, the cell is resizable
+           *
+           * @default false
+           */
+          isResizable: true | boolean
+          /**
+           * Resize handler for the table
+           */
+          handleResize: (id: string | number, deltaChange: number) => void
+      }
+    | {
+          id?: never
+          isResizable?: false | undefined
+          handleResize?: never
+      }
+) &
+    (
+        | {
+              /**
+               * If false, the cell acts like normal table header cell
+               * @default true
+               */
+              isSortable?: boolean | undefined
+              /**
+               * If true, the cell is disabled
+               */
+              disabled: boolean
+              /**
+               * If true, the cell is sorted
+               */
+              isSorted: boolean
+              /**
+               * Callback for handling the sorting of the cell
+               */
+              triggerSorting: () => void
+              /**
+               * Current sort order
+               *
+               * Note: On click, the sort order should be updated as required
+               */
+              sortOrder: SortingOrder
+          }
+        | {
+              isSortable: false
+              disabled?: never
+              isSorted?: never
+              triggerSorting?: never
+              sortOrder?: never
+          }
+    )
+
+export interface UseResizableTableConfigProps {
+    headersConfig: (Pick<SortableTableHeaderCellProps, 'id'> & {
+        width: number | string
+        maxWidth?: number
+        minWidth?: number
+    })[]
 }

src/Common/SortableTableHeaderCell/types.ts

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { UseResizableTableConfigProps } from './types'
+import { DEFAULT_MAXIMUM_HEADER_WIDTH, DEFAULT_MINIMUM_HEADER_WIDTH } from './constants'
+
+const useResizableTableConfig = ({ headersConfig }: UseResizableTableConfigProps) => {
+    const [headerDimensionsConfig, setHeaderDimensionsConfig] = useState<
+        UseResizableTableConfigProps['headersConfig'][number]['width'][]
+    >([])
+
+    useEffect(() => {
+        setHeaderDimensionsConfig(headersConfig.map((config) => config.width))
+    }, [JSON.stringify(headersConfig)])
+
+    const handleResize = (
+        headerCellId: UseResizableTableConfigProps['headersConfig'][number]['id'],
+        deltaChange: number,
+    ) => {
+        const headerCellIndexInConfig = headersConfig.findIndex((config) => config.id === headerCellId)
+
+        if (headerCellIndexInConfig < 0) {
+            return
+        }
+
+        setHeaderDimensionsConfig((prev) => {
+            const updatedHeaderDimensionsConfig = structuredClone(prev)
+            // Only numbers are supported for v1
+            if (typeof updatedHeaderDimensionsConfig[headerCellIndexInConfig] !== 'number') {
+                return prev
+            }
+
+            const updatedCellDimension = updatedHeaderDimensionsConfig[headerCellIndexInConfig] + deltaChange
+            const currentHeaderCellConfig = headersConfig[headerCellIndexInConfig]
+
+            if (
+                updatedCellDimension < (currentHeaderCellConfig.minWidth ?? DEFAULT_MINIMUM_HEADER_WIDTH) ||
+                updatedCellDimension > (currentHeaderCellConfig.maxWidth ?? DEFAULT_MAXIMUM_HEADER_WIDTH)
+            ) {
+                return prev
+            }
+
+            updatedHeaderDimensionsConfig[headerCellIndexInConfig] = updatedCellDimension
+            return updatedHeaderDimensionsConfig
+        })
+    }
+
+    return {
+        gridTemplateColumns: headerDimensionsConfig
+            .map((config) => (typeof config === 'number' ? `${config}px` : config))
+            .join(' '),
+        handleResize,
+    }
+}
+
+export default useResizableTableConfig