@devtron-labs/devtron-fe-common-lib 0.0.63-beta-6 → 0.0.63

package/src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react'
+import { getUserRole } from '../../Common.service'
+import { useSuperAdminType } from './types'
+import { showError } from '../../Helper'
+
+/**
+ * @description It will return isSuperAdmin and would be set to false by default, might need few optimizations like dep, etc
+ * @returns {useSuperAdminType} isSuperAdmin
+ */
+export const useSuperAdmin = (): useSuperAdminType => {
+    const [isSuperAdmin, setSuperAdmin] = useState<boolean>(false)
+
+    useEffect(() => {
+        getUserRole()
+            .then((response) => {
+                setSuperAdmin(response.result.superAdmin ?? false)
+            })
+            .catch((error) => {
+                showError(error)
+            })
+    }, [])
+
+    return { isSuperAdmin }
+}

package/src/Common/Hooks/UseSuperAdmin/types.ts

@@ -0,0 +1,3 @@
+export interface useSuperAdminType {
+    isSuperAdmin: boolean
+}

package/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react'
+
+let timeout
+
+const getSize = () => {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }
+}
+
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(getSize)
+
+    function handleResize(e) {
+        if (timeout) {
+            window.cancelAnimationFrame(timeout)
+        }
+
+        timeout = window.requestAnimationFrame(function () {
+            setWindowSize(getSize())
+        })
+    }
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize, false)
+        return () => window.removeEventListener('resize', handleResize, false)
+    }, [])
+
+    return windowSize
+}

package/src/Common/Hooks/index.ts

@@ -0,0 +1,4 @@
+export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
+export { useClickOutside } from './UseClickOutside/UseClickOutside'
+export { useWindowSize } from './UseWindowSize/UseWindowSize'
+export * from './useUrlFilters'

package/src/Common/Hooks/useUrlFilters/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_PAGE_NUMBER = 1
+
+export const URL_FILTER_KEYS = {
+    PAGE_SIZE: 'pageSize',
+    PAGE_NUMBER: 'pageNumber',
+    SEARCH_KEY: 'searchKey',
+    SORT_BY: 'sortBy',
+    SORT_ORDER: 'sortOrder',
+} as const

package/src/Common/Hooks/useUrlFilters/index.ts

@@ -0,0 +1,2 @@
+export { default as useUrlFilters } from './useUrlFilters'
+export type { UseUrlFiltersProps } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

@@ -0,0 +1,6 @@
+export interface UseUrlFiltersProps<T> {
+    /**
+     * The key on which the sorting should be applied
+     */
+    initialSortKey?: T
+}

package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -0,0 +1,121 @@
+import { useMemo } from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
+import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
+import { UseUrlFiltersProps } from './types'
+
+const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
+
+/**
+ * Generic hook for implementing URL based filters.
+ * eg: pagination, search, sort.
+ *
+ * The exposed handlers can be consumed directly without the need for explicit state management
+ *
+ * @example Default Usage:
+ * ```tsx
+ * const { pageSize, changePage, ...rest } = useUrlFilters()
+ * ```
+ *
+ * @example Usage with custom type for sort keys and initial sort key:
+ * ```tsx
+ * const  { sortBy, sortOrder } = useUrlFilters<'email' | 'name'>({ initialSortKey: 'email' })
+ * ```
+ *
+ */
+const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}) => {
+    const location = useLocation()
+    const history = useHistory()
+    const searchParams = new URLSearchParams(location.search)
+
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
+        const _pageSize = searchParams.get(PAGE_SIZE)
+        const _pageNumber = searchParams.get(PAGE_NUMBER)
+        const _searchKey = searchParams.get(SEARCH_KEY)
+        const _sortOrder = searchParams.get(SORT_ORDER) as SortingOrder
+        const _sortBy = searchParams.get(SORT_BY)
+
+        const sortByKey = (_sortBy || initialSortKey || '') as T
+        // Fallback to ascending order
+        const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
+
+        return {
+            pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
+            pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
+            searchKey: _searchKey || '',
+            sortBy: sortByKey,
+            // sort order should only be applied if the key is available
+            sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
+        }
+    }, [searchParams])
+
+    /**
+     * Used for getting the required result from the API
+     */
+    const offset = pageSize * (pageNumber - 1)
+
+    /**
+     * Update and replace the search params in the URL.
+     *
+     * Note: Currently only primitive data types are supported
+     */
+    const _updateSearchParam = (key: string, value) => {
+        searchParams.set(key, String(value))
+        history.replace({ search: searchParams.toString() })
+    }
+
+    const _resetPageNumber = () => {
+        _updateSearchParam(PAGE_NUMBER, DEFAULT_PAGE_NUMBER)
+    }
+
+    const changePage = (page: number) => {
+        _updateSearchParam(PAGE_NUMBER, page)
+    }
+
+    const changePageSize = (_pageSize: number) => {
+        _updateSearchParam(PAGE_SIZE, _pageSize)
+        _resetPageNumber()
+    }
+
+    const handleSearch = (searchTerm: string) => {
+        _updateSearchParam(SEARCH_KEY, searchTerm)
+        _resetPageNumber()
+    }
+
+    const handleSorting = (_sortBy: T) => {
+        let order: SortingOrder
+        if (_sortBy === sortBy && sortOrder === SortingOrder.ASC) {
+            order = SortingOrder.DESC
+        } else {
+            order = SortingOrder.ASC
+        }
+
+        _updateSearchParam(SORT_BY, _sortBy)
+        _updateSearchParam(SORT_ORDER, order)
+
+        // Reset page number on sorting change
+        _resetPageNumber()
+    }
+
+    const clearFilters = () => {
+        Object.values(URL_FILTER_KEYS).forEach((key) => {
+            searchParams.delete(key)
+        })
+        history.replace({ search: searchParams.toString() })
+    }
+
+    return {
+        pageSize,
+        changePage,
+        changePageSize,
+        searchKey,
+        handleSearch,
+        offset,
+        sortBy,
+        sortOrder,
+        handleSorting,
+        clearFilters,
+    }
+}
+
+export default useUrlFilters

package/src/Common/ImageTags.Types.ts

@@ -0,0 +1,44 @@
+export interface ReleaseTag {
+    id: number
+    tagName: string
+    appId: number
+    deleted: boolean
+    artifactId: number
+    duplicateTag: boolean
+}
+
+export interface ImageComment {
+    id: number
+    comment: string
+    artifactId: number
+}
+
+
+export interface ImageTaggingContainerType {
+    ciPipelineId?: number
+    artifactId?: number
+    imageComment?: ImageComment
+    imageReleaseTags?: ReleaseTag[]
+    updateCurrentAppMaterial? : (matId:number, releaseTags?:ReleaseTag[], imageComment?:ImageComment) => void
+    appReleaseTagNames?: string[]
+    tagsEditable?: boolean
+    forceReInit?: boolean
+    setAppReleaseTagNames?: (appReleaseTags: string[]) => void
+    setTagsEditable?: (tagsEditable: boolean) => void
+    toggleCardMode?: (id: number) => void
+    hideHardDelete?: boolean
+    isSuperAdmin?: boolean
+}
+
+export interface ImageButtonType {
+    text: string
+    isSoftDeleted: boolean
+    isEditing: boolean
+    onSoftDeleteClick?: any
+    onHardDeleteClick?: any
+    tagId: number
+    softDeleteTags: any
+    isSuperAdmin: any
+    duplicateTag?: boolean
+    hideHardDelete?: boolean
+}