release: Release candidate v0.22.0

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.0-patch-1",
+    "version": "0.6.5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -84,7 +84,6 @@
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
-        "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",

src/Common/Constants.ts

@@ -66,6 +66,7 @@ export const URLS = {
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
+    CONFIG_DRIFT: 'config-drift',
 }
 
 export const ROUTES = {

src/Common/Hooks/useUrlFilters/types.ts

@@ -25,6 +25,7 @@ export interface UseUrlFiltersProps<T, K> {
      * Callback function for parsing the search params
      */
     parseSearchParams?: (searchParams: URLSearchParams) => K
+    localStorageKey?: `${string}__${string}`
 }
 
 export type UseUrlFiltersReturnType<T, K = unknown> = K & {

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
 import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+import { setItemInLocalStorageIfKeyExists } from './utils'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -42,11 +43,20 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
 const useUrlFilters = <T = string, K = unknown>({
     initialSortKey,
     parseSearchParams,
+    localStorageKey,
 }: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
     const searchParams = new URLSearchParams(location.search)
 
+    const getParsedSearchParams: UseUrlFiltersProps<T, K>['parseSearchParams'] = (searchParamsToParse) => {
+        if (parseSearchParams) {
+            return parseSearchParams(searchParamsToParse)
+        }
+
+        return {} as K
+    }
+
     const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => {
         const _pageSize = searchParams.get(PAGE_SIZE)
         const _pageNumber = searchParams.get(PAGE_NUMBER)
@@ -58,7 +68,7 @@ const useUrlFilters = <T = string, K = unknown>({
         // Fallback to ascending order
         const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
 
-        const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K)
+        const _parsedParams = getParsedSearchParams(searchParams)
 
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
@@ -126,6 +136,7 @@ const useUrlFilters = <T = string, K = unknown>({
 
     const clearFilters = () => {
         history.replace({ search: '' })
+        setItemInLocalStorageIfKeyExists(localStorageKey, '')
     }
 
     const updateSearchParams = (paramsToSerialize: Partial<K>) => {
@@ -143,10 +154,24 @@ const useUrlFilters = <T = string, K = unknown>({
                 searchParams.delete(key)
             }
         })
+        // Skipping primary params => pageSize, pageNumber, searchKey, sortBy, sortOrder
+        setItemInLocalStorageIfKeyExists(localStorageKey, JSON.stringify(getParsedSearchParams(searchParams)))
         // Not replacing the params as it is being done by _resetPageNumber
         _resetPageNumber()
     }
 
+    useEffect(() => {
+        // if we have search string, set secondary params in local storage accordingly
+        if (location.search) {
+            localStorage.setItem(localStorageKey, JSON.stringify(parsedParams))
+            return
+        }
+        const localStorageValue = localStorage.getItem(localStorageKey)
+        if (localStorageValue) {
+            updateSearchParams(JSON.parse(localStorageValue))
+        }
+    }, [])
+
     return {
         pageSize,
         changePage,

src/Common/Hooks/useUrlFilters/utils.tsx

@@ -0,0 +1,5 @@
+export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => {
+    if (localStorageKey) {
+        localStorage.setItem(localStorageKey, value)
+    }
+}

src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -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/constants.ts

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

src/Common/SortableTableHeaderCell/index.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/sortableTableHeaderCell.scss

@@ -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/types.ts

@@ -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
+    })[]
 }