@devtron-labs/devtron-fe-common-lib 0.0.55 → 0.0.56

package/package.json

@@ -1,16 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.55",
+    "version": "0.0.56",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
-        "prepare": "node -e \"try { require('husky').install() } catch (e) {}\"",
-        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
-        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
         "build-lib": "rollup -c --bundleConfigAsCjs",
-        "build-watch": "rollup -c --bundleConfigAsCjs -w",
-        "lint-staged": "lint-staged"
+        "build-watch": "rollup -c --bundleConfigAsCjs -w"
     },
     "repository": {
         "type": "git",
@@ -34,20 +30,7 @@
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "@typescript-eslint/eslint-plugin": "^6.17.0",
-        "@typescript-eslint/parser": "^6.17.0",
-        "eslint": "^8.56.0",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsx-a11y": "^6.8.0",
-        "eslint-plugin-prettier": "^5.1.2",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "husky": "^7.0.4",
-        "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
-        "prettier": "^3.1.1",
         "react-select": "5.2.2",
         "react-toastify": "^8.2.0",
         "rollup": "^3.10.0",

package/src/Common/Constants.ts

@@ -242,4 +242,13 @@ export const RepositoryAction = {
     CHART_PUSH: "CHART_PUSH"
 }
 
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    DEPLOYMENT = 'DEPLOYMENT',
+}
 export const MAX_Z_INDEX = 2147483647
+
+export const SELECTED_APPROVAL_TAB_STATE = {
+    APPROVAL: 'approval',
+    PENDING: 'pending',
+}

package/src/Common/CustomInput/CustomInput.tsx

@@ -28,7 +28,8 @@ export function CustomInput({
     defaultValue,
     onKeyDown,
     required,
-    additionalErrorInfo
+    additionalErrorInfo,
+    inputWrapClassName = '',
 }: CustomInputProps) {
 
     function handleError(error: any): any[] {
@@ -92,7 +93,7 @@ export function CustomInput({
     }
 
     return (
-        <div className="flex column left top">
+        <div className={`flex column left top ${inputWrapClassName}`}>
            {renderInputLabel()}
             <input
                 data-testid={dataTestid}

package/src/Common/CustomInput/Types.ts

@@ -27,4 +27,5 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
+    inputWrapClassName?: string
 }

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -4,8 +4,6 @@ import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
 import { DebouncedSearchProps } from './Types'
 
 /**
- * @deprecated Use `SearchBar` component instead.
- *
  * @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

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -19,24 +19,56 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = ''
+    contentClassName = '',
+    imageStyles = {},
 }: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
+    const isRowLayout = layout === 'row'
+
+    const getImageSize = () => {
+        switch (imageType) {
+            case ImageType.Large:
+                return { width: '250px', height: '200px' }
+            default:
+                return { width: '200px', height: '160px' }
+        }
+    }
+
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
+                classname ? classname : ''
+            }`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+        >
+            {!SvgImage ? (
+                !noImage && (
+                    <img
+                        className={imageClassName ? imageClassName : ''}
+                        src={image || AppNotDeployed}
+                        style={{
+                            ...imageStyles,
+                            width: `${getImageSize().width}`,
+                            height: `${getImageSize().height}`,
+                        }}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage
+                    style={{
+                        ...imageStyles,
+                        width: `${getImageSize().width}`,
+                        height: `${getImageSize().height}`,
+                    }}
+                />
+            )}
+            <div
+                className={`flex column dc__gap-10 dc__mxw-300 ${
+                    isRowLayout ? 'dc__align-start' : ''
+                } ${contentClassName}`}
+            >
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

package/src/Common/Helper.tsx

@@ -559,18 +559,3 @@ export function getLockedJSON(json, jsonPathArray: string[]) {
     return resultJson['$']
 }
 
-/**
- * Returns a debounced variant of the function
- */
-export const debounce = (func, timeout = 500) => {
-    let timer
-
-    return function (this, ...args) {
-        const context = this
-        if (timer) clearTimeout(timer)
-        timer = setTimeout(() => {
-            timer = null
-            func.apply(context, args)
-        }, timeout)
-    }
-}

package/src/Common/Types.ts

@@ -3,23 +3,10 @@ import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
 import { DockerConfigOverrideType, TaskErrorObj } from '.'
 
-/**
- * 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> {
+export interface ResponseType {
     code: number
     status: string
-    result?: T
+    result?: any
     errors?: any
 }
 
@@ -107,6 +94,7 @@ export interface GenericEmptyStateType {
     imageClassName?: string
     children?: ReactNode
     noImage?: boolean
+    imageStyles?: CSSProperties
     /**
      * @default 'column'
      */

package/src/Common/index.ts

@@ -26,7 +26,6 @@ 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'
@@ -47,4 +46,3 @@ export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSel
 export * from './AddCDButton'
 export * from './CustomInput'
 export * from './DraggableWrapper'
-export * from './Pagination'

package/.eslintignore

@@ -1,96 +0,0 @@
-.eslintrc.js
-
-# Files with ESLint errors/warnings
-src/Common/AddCDButton/AddCDButton.tsx
-src/Common/AddCDButton/utils.tsx
-src/Common/Api.ts
-src/Common/AppStatus/AppStatus.tsx
-src/Common/AppStatus/index.ts
-src/Common/AppStatus/utils.ts
-src/Common/BreadCrumb/BreadCrumb.tsx
-src/Common/BreadCrumb/BreadcrumbStore.tsx
-src/Common/BreadCrumb/Types.ts
-src/Common/CIPipeline.Types.ts
-src/Common/ChartVersionAndTypeSelector.tsx
-src/Common/Checkbox.tsx
-src/Common/ClipboardButton/ClipboardButton.tsx
-src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
-src/Common/Common.service.ts
-src/Common/Constants.ts
-src/Common/CustomInput/CustomInput.tsx
-src/Common/CustomInput/Types.ts
-src/Common/CustomInput/index.ts
-src/Common/CustomTagSelector/PropagateTagInfo.tsx
-src/Common/CustomTagSelector/ResizableTagTextArea.tsx
-src/Common/CustomTagSelector/TagDetails.tsx
-src/Common/CustomTagSelector/TagLabelSelect.tsx
-src/Common/CustomTagSelector/TagLabelValueSelector.tsx
-src/Common/CustomTagSelector/TagSelector.utils.ts
-src/Common/CustomTagSelector/Types.ts
-src/Common/CustomTagSelector/ValidationRules.ts
-src/Common/CustomTagSelector/index.ts
-src/Common/DebouncedSearch/DebouncedSearch.tsx
-src/Common/DebouncedSearch/Utils.ts
-src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
-src/Common/DeleteComponentModal/DeleteComponent.tsx
-src/Common/DeleteComponentModal/types.ts
-src/Common/DevtronProgressing/DevtronProgressing.tsx
-src/Common/Dialogs/ConfirmationDialog.tsx
-src/Common/Dialogs/DeleteDialog.tsx
-src/Common/Dialogs/DialogForm.tsx
-src/Common/Dialogs/ForceDeleteDialog.tsx
-src/Common/Dialogs/Types.ts
-src/Common/Dialogs/index.ts
-src/Common/DraggableWrapper/DraggableButton.tsx
-src/Common/DraggableWrapper/DraggableWrapper.tsx
-src/Common/Drawer/Drawer.tsx
-src/Common/EmptyState/EmptyState.tsx
-src/Common/EmptyState/GenericEmptyState.tsx
-src/Common/Error.tsx
-src/Common/ErrorScreenNotFound.tsx
-src/Common/Grid/Grid.tsx
-src/Common/Helper.tsx
-src/Common/Hooks/UseClickOutside/UseClickOutside.tsx
-src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx
-src/Common/Hooks/UseWindowSize/UseWindowSize.tsx
-src/Common/ImageTags.Types.ts
-src/Common/ImageTags.tsx
-src/Common/InfoColorBar/InfoColourbar.tsx
-src/Common/Modals/Modal.tsx
-src/Common/Modals/OpaqueModal.tsx
-src/Common/Modals/VisibleModal.tsx
-src/Common/Modals/VisibleModal2.tsx
-src/Common/MultiSelectCustomization.tsx
-src/Common/Policy.Types.ts
-src/Common/PopupMenu.tsx
-src/Common/Progressing.tsx
-src/Common/RJSF/Form.tsx
-src/Common/RJSF/common/FieldRow.tsx
-src/Common/RJSF/config.ts
-src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx
-src/Common/RJSF/templates/ArrayFieldTemplate.tsx
-src/Common/RJSF/templates/BaseInput.tsx
-src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx
-src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx
-src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx
-src/Common/RJSF/templates/Description.tsx
-src/Common/RJSF/templates/Field.tsx
-src/Common/RJSF/templates/FieldErrorTemplate.tsx
-src/Common/RJSF/templates/ObjectFieldTemplate.tsx
-src/Common/RJSF/templates/TitleField.tsx
-src/Common/RJSF/templates/WrapIfAdditionalTemplate.tsx
-src/Common/RJSF/utils.ts
-src/Common/RJSF/widgets/Checkbox.tsx
-src/Common/RJSF/widgets/Select.tsx
-src/Common/RadioGroup.tsx
-src/Common/RadioGroup/RadioGroup.tsx
-src/Common/Reload.tsx
-src/Common/ResizableTextarea.tsx
-src/Common/Security/ScanVulnerabilitiesTable.tsx
-src/Common/ServerError.ts
-src/Common/TippyCustomized.tsx
-src/Common/ToastBody.tsx
-src/Common/Toggle/Toggle.tsx
-src/Common/Types.ts
-src/custom.d.ts
-src/index.ts

package/.github/pull_request_template.md

@@ -1,25 +0,0 @@
-# Description
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
-## Type of change
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
-
-## How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
-
-- [ ] Test A
-- [ ] Test B
-
-## Checklist
-
-- [ ] The title of the PR states what changed and the related issues number (used for the release note).
-- [ ] Does this PR require documentation updates?
-- [ ] I've updated documentation as required by this PR.
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas

package/.github/workflows/ci.yml

@@ -1,31 +0,0 @@
-name: Common Lib CI
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - edited
-      - reopened
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    - name: Use Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: '.nvmrc'
-        cache: 'npm'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Check linting issues
-      run: npm run lint
-
-    - name: Build Lib
-      run: npm run build-lib

package/.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx tsc --noEmit
-npm run lint-staged

package/.lintstagedrc

@@ -1,3 +0,0 @@
-{
-    "*.{js,jsx,ts,tsx}": ["npx eslint"]
-}

package/.nvmrc

@@ -1 +0,0 @@
-v16.13.0

package/dist/Common/Pagination/PageSizeSelector.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { PageSizeSelectorProps } from './types';
-declare const PageSizeSelector: ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => JSX.Element;
-export default PageSizeSelector;

package/dist/Common/Pagination/Pagination.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { PaginationProps } from './types';
-import './pagination.scss';
-declare const Pagination: ({ size, pageSize, offset, changePage, changePageSize, isPageSizeFix, pageSizeOptions, rootClassName, }: PaginationProps) => JSX.Element;
-export default Pagination;

package/dist/Common/Pagination/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const VISIBLE_PAGES_LIMIT = 5;
-export declare const FALLBACK_PAGE_SIZE_OPTIONS: {
-    value: number;
-    selected: boolean;
-}[];

package/dist/Common/Pagination/index.d.ts

@@ -1 +0,0 @@
-export { default as Pagination } from './Pagination';

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

@@ -1,51 +0,0 @@
-/// <reference types="react" />
-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/dist/Common/Pagination/utils.d.ts

@@ -1,6 +0,0 @@
-import { CreatePageArrType, Page, PageSizeOption } from './types';
-/**
- * Returns an array of pages numbers and whether they are selected, visible or not
- */
-export declare const createPageArr: ({ size, pageSize, selectedPageNo }: CreatePageArrType) => Page[];
-export declare const getDefaultPageValueOptions: (pageSizeOptions: PageSizeOption[]) => PageSizeOption[];

package/dist/Common/SearchBar/SearchBar.component.d.ts

@@ -1,39 +0,0 @@
-/// <reference types="react" />
-import { SearchBarProps } from './types';
-import './searchBar.scss';
-/**
- * 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' }} />
- * ```
- */
-declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
-export default SearchBar;

package/dist/Common/SearchBar/index.d.ts

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

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

@@ -1,35 +0,0 @@
-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/Assets/Icon/ic-search.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#959BA1" d="M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/>
-    </g>
-</svg>

package/src/Common/Pagination/PageSizeSelector.tsx

@@ -1,78 +0,0 @@
-import { useRef, useState } from 'react'
-import { PageSizeItemsProps, PageSizeOption, PageSizeSelectorProps } from './types'
-import { useClickOutside } from '../Hooks'
-import { getDefaultPageValueOptions } from './utils'
-
-const PageSizeItems = ({
-    optionValue,
-    options,
-    setOptions,
-    handleCloseDropdown,
-    changePageSize,
-}: PageSizeItemsProps) => {
-    const handlePageSizeSelect = () => {
-        const newOptions = options.map((_option) => ({
-            value: _option.value,
-            selected: _option.value === optionValue,
-        }))
-        setOptions([...newOptions])
-        handleCloseDropdown()
-        changePageSize(optionValue)
-    }
-
-    return (
-        <div key={optionValue} className="select__item" onClick={handlePageSizeSelect}>
-            {optionValue}
-        </div>
-    )
-}
-
-const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => {
-    const defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map((option) => ({
-        value: option.value,
-        selected: option.value === pageSize,
-    }))
-
-    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
-    const [options, setOptions] = useState<PageSizeOption[]>(defaultOptions)
-
-    const handleCloseDropdown = () => {
-        setIsDropdownOpen(false)
-    }
-
-    const handleDropdownToggle = () => {
-        setIsDropdownOpen(!isDropdownOpen)
-    }
-
-    const dropdownRef = useRef<HTMLDivElement>(null)
-    useClickOutside(dropdownRef, handleCloseDropdown)
-
-    const selectedOption = options.find((option) => option.selected)
-    const font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'
-    return (
-        <div ref={dropdownRef}>
-            {isDropdownOpen && (
-                <div className="pagination__select-menu">
-                    {options.map((_option) => (
-                        <PageSizeItems
-                            optionValue={_option.value}
-                            options={options}
-                            setOptions={setOptions}
-                            handleCloseDropdown={handleCloseDropdown}
-                            changePageSize={changePageSize}
-                        />
-                    ))}
-                </div>
-            )}
-
-            <button type="button" className="select__button" onClick={handleDropdownToggle}>
-                <span>{selectedOption ? selectedOption.value : ''}</span>
-                <span className="select__icon">
-                    <i className={font} />
-                </span>
-            </button>
-        </div>
-    )
-}
-
-export default PageSizeSelector