Merge pull request #172 from devtron-labs/feat/deployment-window-gc-2

Feat/deployment window gc 2

Author: shivani170

package-lock.json

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

package.json

@@ -19,4 +19,18 @@ import { UseUrlFiltersProps, UseUrlFiltersReturnType } from '../useUrlFilters'
 export interface UseStateFiltersProps<T> extends Pick<UseUrlFiltersProps<T, never>, 'initialSortKey'> {}
 
 export interface UseStateFiltersReturnType<T>
-    extends Pick<UseUrlFiltersReturnType<T>, 'sortBy' | 'sortOrder' | 'handleSorting' | 'clearFilters'> {}
+    extends Pick<
+        UseUrlFiltersReturnType<T>,
+        | 'sortBy'
+        | 'sortOrder'
+        | 'handleSorting'
+        | 'clearFilters'
+        | 'changePage'
+        | 'changePageSize'
+        | 'offset'
+        | 'pageSize'
+    > {}
+
+export interface PaginationType<T> extends Pick<UseUrlFiltersReturnType<T>, 'pageSize'> {
+    pageNumber: number
+}

src/Common/Hooks/useStateFilters/types.ts

@@ -15,8 +15,9 @@
  */
 
 import { useState } from 'react'
-import { SortingOrder } from '../../Constants'
-import { UseStateFiltersProps, UseStateFiltersReturnType } from './types'
+import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
+import { PaginationType, UseStateFiltersProps, UseStateFiltersReturnType } from './types'
+import { DEFAULT_PAGE_NUMBER } from '../useUrlFilters/constants'
 
 /**
  * Generic hook for implementing state based pagination, search, sorting.
@@ -38,9 +39,29 @@ const useStateFilters = <T = string,>({
         sortOrder: SortingOrder.ASC,
         sortBy: initialSortKey,
     })
-
     const { sortBy, sortOrder } = sortingConfig
 
+    const [pagination, setPagination] = useState<PaginationType<T>>({
+        pageSize: DEFAULT_BASE_PAGE_SIZE,
+        pageNumber: DEFAULT_PAGE_NUMBER,
+    })
+    const offset = pagination.pageSize * (pagination.pageNumber - 1)
+
+    const changePage = (pageNo: number): void => {
+        setPagination({
+            ...pagination,
+            pageNumber: pageNo,
+        })
+    }
+
+    const changePageSize = (_pageSize: number): void => {
+        setPagination({
+            ...pagination,
+            pageSize: _pageSize,
+            pageNumber: DEFAULT_PAGE_NUMBER,
+        })
+    }
+
     const handleSorting = (_sortBy: T) => {
         let order: SortingOrder
 
@@ -55,6 +76,10 @@ const useStateFilters = <T = string,>({
             sortBy: _sortBy,
             sortOrder: order,
         }))
+        setPagination({
+            ...pagination,
+            pageNumber: DEFAULT_PAGE_NUMBER,
+        })
     }
 
     const clearFilters = () => {
@@ -68,6 +93,10 @@ const useStateFilters = <T = string,>({
         ...sortingConfig,
         handleSorting,
         clearFilters,
+        ...pagination,
+        changePage,
+        changePageSize,
+        offset,
     }
 }
 

src/Common/Hooks/useStateFilters/useStateFilters.tsx

@@ -61,6 +61,10 @@ export const SingleSelectOption = (props) => {
     )
 }
 
+/**
+ *  Multi value container 
+*/
+
 export const MultiValueContainer = (props) => {
     const { children, data, innerProps, selectProps } = props
     const { label, value } = data
@@ -71,6 +75,28 @@ export const MultiValueContainer = (props) => {
         </components.MultiValueContainer>
     )
 }
+/**
+ * 
+ * Multi value container with count
+ */
+export const MultiValueContainerWithCount = (props: any) => {
+    const { children, data, innerProps, selectProps } = props
+    const selectedLen = selectProps.value?.length ?? 0
+
+    return (
+        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
+            {(!selectProps.menuIsOpen || !selectProps.inputValue) && (
+                <span className="cn-9 fs-13 lh-20">
+                    {selectProps.placeholder}
+                    {selectedLen > 0 && (
+                        <span className="bcb-5 cn-0 fw-6 fs-12 br-8 ml-4 pr-8 pl-8">{selectedLen}</span>
+                    )}
+                </span>
+            )}
+            {children[1]}
+        </components.MultiValueContainer>
+    )
+}
 
 export const ClearIndicator = (props) => {
     const {

src/Common/MultiSelectCustomization.tsx

@@ -46,7 +46,7 @@ const FeatureTitleWithInfo = ({
             >
                 <div className="flexbox dc__align-items-center dc__gap-4">
                     <BreadCrumb breadcrumbs={breadCrumbs} />
-                    <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor`} onClick={onClickInfoIcon} />
+                    <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
                 </div>
 
                 {children}

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -17,6 +17,7 @@
 import Tippy from '@tippyjs/react'
 import { components } from 'react-select'
 import { Progressing, stopPropagation } from '../../../Common'
+import { ReactComponent as ICCaretDown } from '../../../Assets/Icon/ic-chevron-down.svg'
 
 export const getCommonSelectStyle = (styleOverrides = {}) => ({
     container: (base, state) => ({
@@ -165,4 +166,10 @@ export const GroupHeading = (props: any) => {
     )
 }
 
+export const DropdownIndicator = (props) => (
+    <components.DropdownIndicator {...props}>
+        <ICCaretDown className="icon-dim-20 icon-n6" data-testId />
+    </components.DropdownIndicator>
+)
+
 export const commonSelectStyles = getCommonSelectStyle()