@devtron-labs/devtron-fe-common-lib 0.0.26-beta-3 → 0.0.26-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.26-beta-3",
+    "version": "0.0.26-beta1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Helper.tsx

@@ -326,7 +326,7 @@ export function CustomInput({
                 tabIndex={tabIndex}
             />
             {handleError(error).map((err) => (
-                <div className="form__error">
+                <div className="form__error" key={err}>
                     <FormError className="form__icon form__icon--error" />
                     {err}
                 </div>

package/src/Common/ImageTags.Types.ts

@@ -27,6 +27,7 @@ export interface ImageTaggingContainerType {
     setTagsEditable?: (tagsEditable: boolean) => void
     toggleCardMode?: (id: number) => void
     hideHardDelete?: boolean
+    isSuperAdmin?: boolean
 }
 
 export interface ImageButtonType {

package/src/Common/ImageTags.tsx

@@ -32,6 +32,7 @@ export const ImageTagsContainer = ({
     toggleCardMode,
     hideHardDelete,
     forceReInit,
+    isSuperAdmin
 }: ImageTaggingContainerType) => {
     const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
     const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
@@ -44,13 +45,9 @@ export const ImageTagsContainer = ({
     const [createTags, setCreateTags] = useState<ReleaseTag[]>([])
     const [softDeleteTags, setSoftDeleteTags] = useState<ReleaseTag[]>([])
     const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
-    const [isSuperAdmin, setSuperAdmin] = useState<boolean>(false)
     const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
     const [textInput, setTextInput] = useState<string>('')
 
-    useEffect(() => {
-        initialise()
-    }, [])
 
     useEffect(() => {
         reInitState()
@@ -60,16 +57,6 @@ export const ImageTagsContainer = ({
         setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
     }, [appReleaseTagNames])
 
-    async function initialise() {
-        try {
-            const userRole = await getUserRole()
-
-            const superAdmin = userRole?.result?.roles?.includes('role:super-admin___')
-            setSuperAdmin(superAdmin)
-        } catch (err) {
-            showError(err)
-        }
-    }
 
     const reInitState = () => {
         if (forceReInit || !isEditing) {

package/src/Common/index.ts

@@ -34,6 +34,4 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
-export * from './ResizableTextarea'
-export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
-export { default as Grid } from './Grid/Grid'
+export * from './ResizableTextarea'

package/dist/Common/DebouncedSearch/DebouncedSearch.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { DebouncedSearchProps } from './Types';
-/**
- * @param onSearch - Callback function to be called on search
- * @param Icon - (Optional) Icon to be shown before the input
- * @param iconClass - (Optional) Class for the icon
- * @param children - (Optional) In case we want to add another button or any other element
- * @param placeholder - (Optional) Placeholder for the input
- * @param containerClass - (Optional) Class for the container
- * @param inputClass - (Optional) Class for the input field
- * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
- * @param clearSearch - (Optional) To clear the search text
- * @param showClearIcon - (Optional) To show the clear icon default value is true
- */
-export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, }: DebouncedSearchProps): JSX.Element;

package/dist/Common/DebouncedSearch/Types.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-export interface DebouncedSearchProps {
-    onSearch: (query: string) => void;
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-    placeholder?: string;
-    inputClass?: string;
-    containerClass?: string;
-    iconClass?: string;
-    children?: React.ReactNode;
-    debounceTimeout?: number;
-    clearSearch?: boolean;
-    showClearIcon?: boolean;
-}

package/dist/Common/DebouncedSearch/Utils.d.ts

@@ -1 +0,0 @@
-export declare function useDebouncedEffect(callback: any, delay: any, deps?: unknown[]): void;

package/dist/Common/Grid/Grid.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { GridProps } from './types';
-export default function Grid({ container, spacing, item, xs, containerClass, itemClass, children, }: GridProps): JSX.Element;

package/dist/Common/Grid/types.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface GridProps {
-    container?: boolean;
-    spacing?: number;
-    item?: boolean;
-    xs?: number;
-    containerClass?: string;
-    itemClass?: string;
-    children?: React.ReactNode;
-}

package/src/Assets/Icon/ic-error-cross.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <g transform="translate(2.667 2.667)">
-            <rect width="26.667" height="26.667" class="fill-color" fill="#596168" rx="13.333"/>
-            <path fill="#FFF" fill-rule="nonzero" d="M8.62 8.62c.52-.521 1.364-.521 1.885 0l2.828 2.827 2.829-2.828a1.334 1.334 0 0 1 1.777-.097l.108.097c.521.521.521 1.365 0 1.886l-2.828 2.828 2.828 2.829c.486.486.519 1.254.098 1.777l-.098.108c-.52.521-1.365.521-1.885 0l-2.83-2.828-2.827 2.828a1.334 1.334 0 0 1-1.777.098l-.109-.098a1.333 1.333 0 0 1 0-1.885l2.828-2.83-2.828-2.827a1.334 1.334 0 0 1-.097-1.777z"/>
-        </g>
-    </g>
-</svg>

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useDebouncedEffect } from './Utils'
-import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
-import { DebouncedSearchProps } from './Types'
-
-/**
- * @param onSearch - Callback function to be called on search
- * @param Icon - (Optional) Icon to be shown before the input
- * @param iconClass - (Optional) Class for the icon
- * @param children - (Optional) In case we want to add another button or any other element
- * @param placeholder - (Optional) Placeholder for the input
- * @param containerClass - (Optional) Class for the container
- * @param inputClass - (Optional) Class for the input field
- * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
- * @param clearSearch - (Optional) To clear the search text
- * @param showClearIcon - (Optional) To show the clear icon default value is true
- */
-export default function DebouncedSearch({
-    onSearch,
-    Icon,
-    children,
-    placeholder,
-    containerClass = '',
-    iconClass = '',
-    inputClass = '',
-    debounceTimeout = 500,
-    clearSearch,
-    showClearIcon = true,
-}: DebouncedSearchProps) {
-    const [searchText, setSearchText] = useState<string>('')
-
-    useEffect(() => {
-        setSearchText('')
-    }, [clearSearch])
-
-    const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchText(e.target.value)
-    }
-
-    const handleClearSearch = () => {
-        setSearchText('')
-    }
-
-    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText, onSearch])
-
-    return (
-        <div className={containerClass}>
-            {Icon && <Icon className={iconClass} />}
-
-            <input
-                type="text"
-                className={inputClass}
-                placeholder={placeholder ?? 'Search'}
-                value={searchText}
-                onChange={handleSearchTextChange}
-                autoFocus
-                data-testid="debounced-search"
-            />
-
-            {showClearIcon && !!searchText && (
-                <button
-                    type="button"
-                    className="dc__outline-none-imp dc__no-border p-0 bc-n50 flex"
-                    onClick={handleClearSearch}
-                    data-testid="clear-search"
-                >
-                    <ICClear className="icon-dim-20 icon-n6" />
-                </button>
-            )}
-
-            {/* In case we want to add another button or something  */}
-            {children}
-        </div>
-    )
-}

package/src/Common/DebouncedSearch/Types.ts

@@ -1,12 +0,0 @@
-export interface DebouncedSearchProps {
-    onSearch: (query: string) => void
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    placeholder?: string
-    inputClass?: string
-    containerClass?: string
-    iconClass?: string
-    children?: React.ReactNode
-    debounceTimeout?: number
-    clearSearch?: boolean
-    showClearIcon?: boolean
-}

package/src/Common/DebouncedSearch/Utils.ts

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export function useDebouncedEffect(callback, delay, deps: unknown[] = []) {
-    // function will be executed only after the specified time once the user stops firing the event.
-    const firstUpdate = useRef(true)
-    useEffect(() => {
-        if (firstUpdate.current) {
-            firstUpdate.current = false
-            return
-        }
-        const handler = setTimeout(() => {
-            callback()
-        }, delay)
-
-        return () => {
-            clearTimeout(handler)
-        }
-    }, [delay, ...deps])
-}

package/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
-import DebouncedSearch from '../DebouncedSearch'
-
-jest.mock('../../helpers/Helpers', () => ({
-    useDebouncedEffect: jest.fn().mockImplementation((fn) => fn()),
-}))
-
-describe('When DebouncedSearch mounts', () => {
-    it('should have a input field', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} />)
-        expect(screen.getByRole('textbox')).toBeTruthy()
-    })
-
-    it('should have a clear icon when clearSearch is true and user has typed something', () => {
-        const { getByTestId } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        expect(getByTestId('clear-search')).toBeTruthy()
-    })
-
-    it('should call onSearch when input value changes', () => {
-        const onSearch = jest.fn()
-        render(<DebouncedSearch onSearch={onSearch} debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        expect(onSearch).toHaveBeenCalled()
-    })
-
-    it('should clear input value when clear icon is clicked', () => {
-        const { container } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        const inputBar = container.querySelector('input')
-        expect(inputBar.value).toBe('test')
-        fireEvent.click(screen.getByRole('button'))
-        expect(inputBar.value).toBe('')
-    })
-
-    it('should have a placeholder', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} placeholder="test" />)
-        expect(screen.getByPlaceholderText('test')).toBeTruthy()
-    })
-
-    it('should not show clear icon when showClearIcon is false', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} showClearIcon={false} />)
-        expect(screen.queryByRole('button')).toBeNull()
-    })
-
-    it('should have a custom Icon', () => {
-        const { container } = render(<DebouncedSearch onSearch={jest.fn()} Icon={ICClear} iconClass="icon-class" />)
-        expect(container.querySelector('.icon-class')).toBeTruthy()
-    })
-
-    it('should support children', () => {
-        render(
-            <DebouncedSearch onSearch={jest.fn()}>
-                <div>test</div>
-            </DebouncedSearch>,
-        )
-        expect(screen.getByText('test')).toBeTruthy()
-    })
-})

package/src/Common/Grid/Grid.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import { GridProps } from './types'
-
-// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
-export default function Grid({
-    container,
-    spacing = 0,
-    item,
-    xs,
-    containerClass = '',
-    itemClass = '',
-    children,
-}: GridProps) {
-    const containerStyles = container ? { gap: spacing + 'px' } : {}
-
-    if (item) {
-        const getColumnWidth = () => {
-            const percentageWidth = (xs / 12) * 100
-            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
-            return `calc(${percentageWidth}%)`
-        }
-
-        const itemStyles = {
-            flex: `1 1 ${getColumnWidth()}`,
-        }
-
-        return (
-            <div className={`p-0 ${itemClass}`} style={itemStyles}>
-                {children}
-            </div>
-        )
-    }
-
-    return (
-        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
-            {children}
-        </div>
-    )
-}

package/src/Common/Grid/types.ts

@@ -1,9 +0,0 @@
-export interface GridProps {
-    container?: boolean
-    spacing?: number
-    item?: boolean
-    xs?: number
-    containerClass?: string
-    itemClass?: string
-    children?: React.ReactNode
-}