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

package/package.json

@@ -1,16 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.54",
+    "version": "0.0.55-beta-2",
     "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",
@@ -64,8 +47,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",
-        "react-router-dom": "^5.3.0",
-        "react-draggable": "^4.4.5"
+        "react-router-dom": "^5.3.0"
     },
     "dependencies": {
         "fast-json-patch": "^3.1.1",

package/src/Common/Constants.ts

@@ -240,6 +240,4 @@ export const RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
-}
-
-export const MAX_Z_INDEX = 2147483647
+}

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/Grid/Grid.tsx

@@ -10,7 +10,6 @@ export default function Grid({
     containerClass = '',
     itemClass = '',
     children,
-    ...containerDivProps
 }: GridProps) {
     const containerStyles = container ? { gap: spacing + 'px' } : {}
 
@@ -26,18 +25,14 @@ export default function Grid({
         }
 
         return (
-            <div className={`p-0 ${itemClass}`} style={itemStyles} {...containerDivProps}>
+            <div className={`p-0 ${itemClass}`} style={itemStyles}>
                 {children}
             </div>
         )
     }
 
     return (
-        <div
-            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
-            style={containerStyles}
-            {...containerDivProps}
-        >
+        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
             {children}
         </div>
     )

package/src/Common/Grid/types.ts

@@ -1,6 +1,4 @@
-import { HTMLAttributes } from 'react'
-
-export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+export interface GridProps {
     container?: boolean
     spacing?: number
     item?: boolean

package/src/Common/Helper.tsx

@@ -499,18 +499,20 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
+
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    // It recursively removes empty object keys and empty array keys
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0) continue
-            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key] // Delete the key if the array is empty
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key] 
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+            if (
+                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0
+            ) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -520,20 +522,25 @@ function removeEmptyObjectKeysAndNullValues(obj) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray) {
+export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
+    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
+    
     const jsonCopy = JSON.parse(JSON.stringify(json))
+    const originaljsonCopy = JSON.parse(JSON.stringify(json))
+    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse()
+        return pathsToRemove.map((result) => {
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
+            return { op: 'remove', path: result.pointer }
+        })
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
+    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
+    return { newDocument, removedPatches: removedPatches.reverse() }
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {
@@ -559,18 +566,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/Hooks/index.ts

@@ -1,3 +1,2 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
-export { useWindowSize } from './UseWindowSize/UseWindowSize'

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
 }
 

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

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/DraggableWrapper/DraggableButton.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { DraggableButtonProps } from './types';
-export default function DraggableButton({ dragClassName }: DraggableButtonProps): JSX.Element;

package/dist/Common/DraggableWrapper/DraggableWrapper.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { DraggableWrapperProps } from './types';
-/**
- * TODO: import it as lazy, after it is supported in common
- * 1. If using react select please use menuPlacement='auto'
- * 2. dragSelector will be used to identify the grabbable button that will grab the div to drag
- * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
- */
-export default function DraggableWrapper({ children, zIndex, positionVariant, dragSelector, parentRef, boundaryGap, childDivProps, }: DraggableWrapperProps): JSX.Element;

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

@@ -1,3 +0,0 @@
-export { default as DraggableWrapper } from './DraggableWrapper';
-export { default as DraggableButton } from './DraggableButton';
-export * from './types';

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

@@ -1,23 +0,0 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
-export declare enum DraggablePositionVariant {
-    PARENT_BOTTOM_CENTER = "PARENT_BOTTOM_CENTER",
-    SCREEN_BOTTOM_CENTER = "SCREEN_BOTTOM_CENTER"
-}
-export interface DraggableWrapperProps {
-    children: ReactNode;
-    zIndex?: number;
-    positionVariant?: DraggablePositionVariant;
-    /**
-     * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
-     */
-    dragSelector: string;
-    parentRef?: RefObject<HTMLDivElement>;
-    boundaryGap?: number;
-    childDivProps?: HTMLAttributes<HTMLDivElement>;
-}
-/**
- * dragClassName is the class that we feed to Draggable to identify dragging buttons
- */
-export interface DraggableButtonProps {
-    dragClassName: string;
-}

package/dist/Common/Hooks/UseWindowSize/UseWindowSize.d.ts

@@ -1,4 +0,0 @@
-export declare const useWindowSize: () => {
-    width: number;
-    height: number;
-};

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-drag.svg

@@ -1,8 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.3335 9.33325C10.8858 9.33325 11.3335 8.88554 11.3335 8.33325C11.3335 7.78097 10.8858 7.33325 10.3335 7.33325C9.78121 7.33325 9.3335 7.78097 9.3335 8.33325C9.3335 8.88554 9.78121 9.33325 10.3335 9.33325Z" fill="#596168"/>
-<path d="M5.66675 9.33325C6.21903 9.33325 6.66675 8.88554 6.66675 8.33325C6.66675 7.78097 6.21903 7.33325 5.66675 7.33325C5.11446 7.33325 4.66675 7.78097 4.66675 8.33325C4.66675 8.88554 5.11446 9.33325 5.66675 9.33325Z" fill="#596168"/>
-<path d="M10.3335 5.33325C10.8858 5.33325 11.3335 4.88554 11.3335 4.33325C11.3335 3.78097 10.8858 3.33325 10.3335 3.33325C9.78121 3.33325 9.3335 3.78097 9.3335 4.33325C9.3335 4.88554 9.78121 5.33325 10.3335 5.33325Z" fill="#596168"/>
-<path d="M5.66675 5.33325C6.21903 5.33325 6.66675 4.88554 6.66675 4.33325C6.66675 3.78097 6.21903 3.33325 5.66675 3.33325C5.11446 3.33325 4.66675 3.78097 4.66675 4.33325C4.66675 4.88554 5.11446 5.33325 5.66675 5.33325Z" fill="#596168"/>
-<path d="M10.3335 13.3333C10.8858 13.3333 11.3335 12.8855 11.3335 12.3333C11.3335 11.781 10.8858 11.3333 10.3335 11.3333C9.78121 11.3333 9.3335 11.781 9.3335 12.3333C9.3335 12.8855 9.78121 13.3333 10.3335 13.3333Z" fill="#596168"/>
-<path d="M5.66675 13.3333C6.21903 13.3333 6.66675 12.8855 6.66675 12.3333C6.66675 11.781 6.21903 11.3333 5.66675 11.3333C5.11446 11.3333 4.66675 11.781 4.66675 12.3333C4.66675 12.8855 5.11446 13.3333 5.66675 13.3333Z" fill="#596168"/>
-</svg>

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/DraggableWrapper/DraggableButton.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
-import { DraggableButtonProps } from './types'
-
-export default function DraggableButton({ dragClassName }: DraggableButtonProps) {
-    return (
-        <button
-            type="button"
-            className={`${dragClassName} dc__outline-none-imp dc__no-border p-0 dc__transparent h-20`}
-        >
-            <ICDrag className="dc__grabbable icon-dim-20 fcn-6" />
-        </button>
-    )
-}