@devtron-labs/devtron-fe-common-lib 0.0.55-beta-2 → 0.0.55-beta-4

package/src/Common/Pagination/pagination.scss

@@ -0,0 +1,123 @@
+.pagination-wrapper {
+    display: flex;
+    align-items: center;
+    padding: 0px 24px;
+    justify-content: space-between;
+    margin: 0px;
+    background-color: var(--white);
+}
+
+.pagination {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding: 0px;
+}
+
+.select {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.select__placeholder {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+    margin-right: 8px;
+}
+
+.pagination__select-menu {
+    padding: 0px;
+    list-style: none;
+    overflow: hidden;
+    border: solid 1px var(--N200);
+    border-radius: 4px;
+    width: 64px;
+    position: absolute;
+    bottom: 31px;
+    background-color: var(--white);;
+}
+
+.select__button {
+    width: 64px;
+    background-color: transparent;
+    border-radius: 4px;
+    border: solid 1px var(--N200);
+    padding: 5px 10px;
+    text-align: left;
+}
+
+.select__item {
+    padding: 5px 10px;
+    cursor: pointer;
+}
+
+.select__icon {
+    margin-left: 18px;
+}
+
+.page {
+    margin: 0px 8px;
+    display: inline-block;
+}
+
+.page-number {
+    font-size: 12px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    color: var(--N700);
+}
+
+.page__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    color: var(--B500);
+    background-color: var(--white);
+    padding: 0px;
+    user-select: none;
+}
+
+.page__button--icon {
+    background-color: var(--white);
+    color: var(--B500);
+}
+
+/* MODIFIERS */
+
+.page__button--selected {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+/* States and Selectorys */
+
+.page__button:disabled {
+    opacity: 0.5;
+}
+
+.select__item:hover {
+    background-color: var(--N50);
+}
+
+.page__button:hover ~ :disabled {
+    background-color: var(--B100);
+}
+
+.page__button--selected:hover {
+    color: var(--white);
+    background-color: var(--B500);
+}
+
+@media (min-width: 1024px) {
+    .pagination {
+        margin: 16px auto;
+    }
+}

package/src/Common/Pagination/types.ts

@@ -0,0 +1,55 @@
+export interface PageSizeOption {
+    value: number
+    selected: boolean
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number
+    /**
+     * pageSize
+     */
+    pageSize: number
+    offset: number
+    changePage: (pageNo: number) => void
+    changePageSize?: (pageSize: number) => void
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[]
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string
+}
+
+export interface Page {
+    value: number
+    selected: boolean
+    isVisible: boolean
+}
+
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number
+}
+
+export interface PageSizeSelectorProps
+    extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {}
+
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value']
+    options: PageSizeOption[]
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>
+    handleCloseDropdown: () => void
+}
+
+export interface PageValueItemProps {
+    value: PageSizeOption['value']
+    isSelected: PageSizeOption['selected']
+    selectPage: (selectedPageNo: number) => void
+}

package/src/Common/Pagination/utils.tsx

@@ -0,0 +1,24 @@
+import { CreatePageArrType, Page, PageSizeOption } from './types'
+import { FALLBACK_PAGE_SIZE_OPTIONS, VISIBLE_PAGES_LIMIT } from './constants'
+
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+export const createPageArr = ({ size, pageSize, selectedPageNo }: CreatePageArrType): Page[] => {
+    const arr = []
+    const numberOfPages = Math.ceil(size / pageSize)
+    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
+    const lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2
+    const upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2
+    for (let i = 1; i <= numberOfPages; i++) {
+        arr.push({
+            value: i,
+            selected: i === selectedPageNo,
+            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
+        })
+    }
+    return arr
+}
+
+export const getDefaultPageValueOptions = (pageSizeOptions: PageSizeOption[]): PageSizeOption[] =>
+    pageSizeOptions?.length ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -0,0 +1,120 @@
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
+import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
+import { SearchBarProps } from './types'
+import './searchBar.scss'
+import { debounce } from '../Helper'
+
+/**
+ * Generic search input component with support for enter based and debounced search
+ * Note: The component is uncontrolled
+ *
+ * @example Usage with default debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
+ * ```
+ *
+ * @example Initial search text
+ * ```tsx
+ * <SearchBar initialSearchText="Keyword" />
+ * ```
+ *
+ * @example Custom width
+ * ```tsx
+ * <SearchBar containerClassName="w-300" />
+ * ```
+ *
+ * @example Trigger search on enter key press
+ * ```tsx
+ * <SearchBar handleEnter={triggerSearchApi} />
+ * ```
+ *
+ * @example Custom timeout for debounced search
+ * ```tsx
+ * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
+ * ```
+ *
+ * @example Placeholder for the search
+ * ```tsx
+ * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
+ * ```
+ */
+const SearchBar = ({
+    initialSearchText = '',
+    handleSearchChange = () => {},
+    handleEnter = () => {},
+    inputProps = {},
+    containerClassName,
+    shouldDebounce = false,
+    debounceTimeout = 300,
+}: SearchBarProps) => {
+    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
+    const inputRef = useRef<HTMLInputElement>()
+    const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
+        handleSearchChange,
+        debounceTimeout,
+    ])
+
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target
+        setShowClearButton(!!value)
+        if (shouldDebounce) {
+            debouncedSearchChange(value)
+        } else {
+            handleSearchChange(value)
+        }
+    }
+
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        const { key } = e
+
+        if (key === 'Enter') {
+            const inputTarget = e.target as HTMLInputElement
+            const value = inputTarget.value.trim()
+            _applySearch(value)
+        }
+    }
+
+    const clearSearch = () => {
+        inputRef.current.value = ''
+        _applySearch('')
+    }
+
+    return (
+        <div className={containerClassName}>
+            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
+                <input
+                    placeholder="Search"
+                    data-testid="search-bar"
+                    type="text"
+                    {...inputProps}
+                    defaultValue={initialSearchText}
+                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                        showClearButton ? 'pr-30' : 'pr-10'
+                    }`}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    ref={inputRef}
+                />
+                {showClearButton && (
+                    <button
+                        className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
+                        type="button"
+                        onClick={clearSearch}
+                        aria-label="Clear search"
+                    >
+                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
+                    </button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default SearchBar

package/src/Common/SearchBar/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component'
+export type { SearchBarProps } from './types'

package/src/Common/SearchBar/searchBar.scss

@@ -0,0 +1,31 @@
+.search-bar {
+
+    &:focus,
+    &:focus-within {
+        outline: none;
+        border: solid 1px var(--B500);
+    }
+
+    &__input {
+
+        &:focus,
+        &:focus-visible {
+            border: none;
+            outline: none;
+        }
+    }
+
+    &__icon {
+        z-index: 1;
+        top: 50%;
+        left: 8px;
+        transform: translateY(-50%);
+    }
+
+    &__clear-button {
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+}

package/src/Common/SearchBar/types.ts

@@ -0,0 +1,36 @@
+import { InputHTMLAttributes } from 'react'
+
+export interface SearchBarProps {
+    /**
+     * Initial search text
+     *
+     * @default ''
+     */
+    initialSearchText?: string
+    /**
+     * Search handler for the search input
+     */
+    handleSearchChange?: (searchText: string) => void
+    /**
+     * Enter event handler for the search input
+     */
+    handleEnter?: (searchText: string) => void
+    /**
+     * Input props for the search input
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>
+    /**
+     * Class name for the container; can be used for handling width
+     */
+    containerClassName?: string
+    /**
+     * If true, the change handler would be triggered with debounce
+     *
+     * @default false
+     */
+    shouldDebounce?: boolean
+    /**
+     * Timeout for the debounce handler to be triggered
+     */
+    debounceTimeout?: number
+}

package/src/Common/Types.ts

@@ -3,10 +3,23 @@ import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
-export interface ResponseType {
+/**
+ * Generic response type object with support for overriding the result type
+ *
+ * @example Default usage:
+ * ```ts
+ * interface UserResponse extends ResponseType {}
+ * ```
+ *
+ * @example Override the response type:
+ * ```ts
+ * interface UserResponse extends ResponseType<Record<string, string>> {}
+ * ```
+ */
+export interface ResponseType<T = any> {
     code: number
     status: string
-    result?: any
+    result?: T
     errors?: any
 }
 
@@ -359,6 +372,7 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
+    isGitOpsRepoNotConfigured?: boolean
     deploymentAppCreated?: boolean
     isLast?: boolean
     downstreamEnvironments?: DownstreamNodesEnvironmentsType[]

package/src/Common/index.ts

@@ -26,6 +26,7 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
+export * from './SearchBar'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
@@ -45,3 +46,5 @@ export * from './DevtronProgressing'
 export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
 export * from './AddCDButton'
 export * from './CustomInput'
+export * from './DraggableWrapper'
+export * from './Pagination'