Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/plugin-policy-v2

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.6.4-beta-6",
+    "version": "0.7.3-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -66,7 +66,7 @@
         "react-mde": "^11.5.0",
         "react-toastify": "9.1.3",
         "typescript": "5.5.4",
-        "vite": "5.4.6",
+        "vite": "5.4.11",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-lib-inject-css": "2.1.1",
         "vite-plugin-svgr": "^2.4.0",
@@ -109,7 +109,7 @@
             "monaco-editor": "0.44.0"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.6"
+            "vite": "5.4.11"
         }
     }
 }

package.json

@@ -35,7 +35,7 @@ export const ResizableTagTextArea = ({
     disabled,
     disableOnBlurResizeToMinHeight,
 }: ResizableTagTextAreaProps) => {
-    const [text, setText] = useState('')
+    const [text, setText] = useState(value ?? '')
 
     useEffect(() => {
         setText(value)
@@ -47,7 +47,6 @@ export const ResizableTagTextArea = ({
     }
 
     const reInitHeight = () => {
-        if (document.activeElement !== refVar.current) return
         refVar.current.style.height = `${minHeight}px`
         if (dependentRef) {
             dependentRef.current.style.height = `${minHeight}px`
@@ -68,6 +67,10 @@ export const ResizableTagTextArea = ({
         }
     }
 
+    useEffect(() => {
+        reInitHeight()
+    }, [])
+
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import { stopPropagation } from '@Common/Helper'
 import { VisibleModal2 } from '../Modals/VisibleModal2'
 import {
     ConfirmationDialogBodyType,
@@ -23,9 +23,9 @@ import {
     ConfirmationDialogType,
 } from './Types'
 
-const ConfirmationDialog = ({ className = '', children }: ConfirmationDialogType) => (
-    <VisibleModal2 className="confirmation-dialog">
-        <div className={`confirmation-dialog__body ${className}`}>{children}</div>
+const ConfirmationDialog = ({ className = '', children, close }: ConfirmationDialogType) => (
+    <VisibleModal2 className="confirmation-dialog" close={close}>
+        <div onClick={stopPropagation} className={`confirmation-dialog__body ${className}`}>{children}</div>
     </VisibleModal2>
 )
 

src/Common/Dialogs/ConfirmationDialog.tsx

@@ -75,7 +75,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
     )
 
     return (
-        <ConfirmationDialog className="confirmation-dialog__body--w-400">
+        <ConfirmationDialog className="confirmation-dialog__body--w-400" close={props.closeDelete}>
             <ConfirmationDialog.Icon src={warn} />
             <ConfirmationDialog.Body title={props.title}>
                 <div className="fs-13 cn-7 lh-1-54 w-100">
@@ -88,7 +88,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                             onChange={handleConfirmationTextChange}
                             label={getLabel()}
                             inputWrapClassName="mt-12 w-100"
-                            placeholder={`Type ${deleteConfirmationText} to confirm`}
+                            placeholder="Type to confirm"
                             isRequiredField
                             onKeyDown={handleKeyDown}
                             autoFocus

src/Common/Dialogs/DeleteDialog.tsx

@@ -56,6 +56,7 @@ export interface ForceDeleteDialogType {
 export interface ConfirmationDialogType {
     className?: string
     children: any
+    close?: (e) => void
 }
 export interface ConfirmationDialogIconType {
     src: string

src/Common/Dialogs/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/types.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/useUrlFilters.ts

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

src/Common/Hooks/useUrlFilters/utils.tsx

@@ -34,7 +34,7 @@ import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscre
 import './cicdHistory.scss'
 
 export const LogResizeButton = ({
-    shortcutCombo = ['F'],
+    shortcutCombo = ['Shift', 'F'],
     showOnlyWhenPathIncludesLogs = true,
     fullScreenView,
     setFullScreenView,