Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/action-menu

Author: eshankvaish

package-lock.json

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

package.json

@@ -16,6 +16,7 @@
 
 import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 
+// NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/
 export const KEYBOARD_KEYS_MAP = {
     Control: 'Ctrl',
     Shift: '⇧',
@@ -25,8 +26,22 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
+    X: 'X',
+    A: 'A',
     Escape: 'Esc',
     Enter: '↩',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    PageUp: 'PgUp',
+    PageDown: 'PgDn',
+    Home: 'Home',
+    End: 'End',
+    Backspace: '⌫',
+    Delete: '⌦',
+    '.': '.',
+    Space: 'Space',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -31,6 +31,7 @@ export interface UseStateFiltersReturnType<T>
         | 'pageSize'
         | 'searchKey'
         | 'handleSearch'
+        | 'isFilterApplied'
     > {}
 
 export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {

src/Common/Hooks/useStateFilters/types.ts

@@ -116,6 +116,7 @@ const useStateFilters = <T = string,>({
         changePage,
         changePageSize,
         offset,
+        isFilterApplied: !!searchKey,
     }
 }
 

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -16,7 +16,7 @@
 
 import { SortingOrder } from '../../Constants'
 
-export interface UseUrlFiltersProps<T, K> {
+export interface UseUrlFiltersProps<T, K extends {}> {
     /**
      * The key on which the sorting should be applied
      */
@@ -37,9 +37,9 @@ export interface UseUrlFiltersProps<T, K> {
     redirectionMethod?: 'replace' | 'push'
 }
 
-export type UpdateSearchParamsOptionsType<T, K = unknown> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
+export type UpdateSearchParamsOptionsType<T, K = {}> = Partial<Pick<UseUrlFiltersProps<T, K>, 'redirectionMethod'>>
 
-export type UseUrlFiltersReturnType<T, K = unknown> = K & {
+export type UseUrlFiltersReturnType<T, K = {}> = K & {
     /**
      * Currently applied page size
      */
@@ -86,4 +86,5 @@ export type UseUrlFiltersReturnType<T, K = unknown> = K & {
      * Update the search params with the passed object
      */
     updateSearchParams: (paramsToSerialize: Partial<K>, options?: UpdateSearchParamsOptionsType<T, K>) => void
+    isFilterApplied: boolean
 }

src/Common/Hooks/useUrlFilters/types.ts

@@ -20,7 +20,7 @@ import { getUrlWithSearchParams } from '@Common/Helper'
 import { DEFAULT_BASE_PAGE_SIZE, EXCLUDED_FALSY_VALUES, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
 import { UpdateSearchParamsOptionsType, UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
-import { setItemInLocalStorageIfKeyExists } from './utils'
+import { areAnyAdditionalFiltersApplied, setItemInLocalStorageIfKeyExists } from './utils'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -41,7 +41,8 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
  * ```
  *
  */
-const useUrlFilters = <T = string, K = unknown>({
+
+const useUrlFilters = <T = string, K = {}>({
     initialSortKey,
     parseSearchParams,
     localStorageKey,
@@ -220,6 +221,7 @@ const useUrlFilters = <T = string, K = unknown>({
         clearFilters,
         ...parsedParams,
         updateSearchParams,
+        isFilterApplied: !!searchKey || areAnyAdditionalFiltersApplied(parsedParams),
     }
 }
 

src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -14,8 +14,28 @@
  * limitations under the License.
  */
 
+import { isNullOrUndefined } from '@Shared/Helpers'
+
 export const setItemInLocalStorageIfKeyExists = (localStorageKey: string, value: string) => {
     if (localStorageKey) {
         localStorage.setItem(localStorageKey, value)
     }
 }
+
+export const areAnyAdditionalFiltersApplied = (parsedParams: Record<string | number, any>) => {
+    if (!parsedParams || !Object.keys(parsedParams).length) {
+        return false
+    }
+
+    return Object.keys(parsedParams).some((key) => {
+        if (isNullOrUndefined(parsedParams[key])) {
+            return false
+        }
+
+        if (Array.isArray(parsedParams[key]) || typeof parsedParams[key] === 'string') {
+            return parsedParams[key].length > 0
+        }
+
+        return true
+    })
+}

src/Common/Hooks/useUrlFilters/utils.tsx

@@ -297,7 +297,7 @@ export const ImageTagsContainer = ({
 
     if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
         return tagsEditable ? (
-            <div className="bg__primary mt-8 add-image-button">
+            <div className="bg__primary mt-8 flexbox">
                 <AddImageButton handleEditClick={handleEditClick} />
             </div>
         ) : (
@@ -568,11 +568,13 @@ const AddImageButton = ({ handleEditClick }) => {
     }
 
     return (
-        <div className="add-tag-button flex pt-12 pr-12" data-testid="add-tags-button" onClick={handleClick}>
-            <div className="lh-16 flex">
-                <Add className="icon-dim-16 cn-6" />
-                <span className="cn-7">Add labels/comment</span>
-            </div>
-        </div>
+        <button
+            className="dc__transparent px-8 py-4 flexbox dc__align-items-center dc__gap-4 dc__border-dashed--n3 br-4"
+            data-testid="add-tags-button"
+            onClick={handleClick}
+        >
+            <Add className="icon-dim-16 cn-6 dc__no-shrink" />
+            <span className="cn-7 lh-16">Add labels/comment</span>
+        </button>
     )
 }

src/Common/ImageTags.tsx

@@ -23,9 +23,10 @@ const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutK
         {!!combo?.length && (
             <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
                 {combo.map((key) => (
-                    <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                    // TODO: check styling for this since span was replaced by kbd
+                    <kbd key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
                         {KEYBOARD_KEYS_MAP[key]}
-                    </span>
+                    </kbd>
                 ))}
             </div>
         )}