Merge pull request #1305 from devtron-labs/chore/import-common-modules

Chore: import common modules

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.26",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.26-beta-3",
         "@sentry/browser": "^7.3.1",
         "@sentry/integrations": "^7.3.1",
         "@sentry/tracing": "^7.3.1",

src/components/common/DebouncedSearch/DebouncedSearch.tsx

@@ -1,6 +1,5 @@
 import React, { useState, memo, useEffect } from 'react'
-import { GenericEmptyState, Progressing, Reload } from '@devtron-labs/devtron-fe-common-lib'
-import DebouncedSearch from '../DebouncedSearch/DebouncedSearch'
+import { GenericEmptyState, Progressing, Reload, DebouncedSearch } from '@devtron-labs/devtron-fe-common-lib'
 import SuggestionItem from './SuggestionItem'
 import { ReactComponent as ICClose } from '../../../assets/icons/ic-cross.svg'
 import { ReactComponent as ICSearch } from '../../../assets/icons/ic-search.svg'

src/components/common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
 import Suggestions from '../Suggestions'
 import { mockVariable } from '../mocks'
 
@@ -12,18 +12,6 @@ jest.mock(
         },
 )
 
-// mocking DebouncedSearch since its already tested
-jest.mock(
-    '../../DebouncedSearch/DebouncedSearch',
-    () =>
-        function DebouncedSearch({ onSearch }: { onSearch: (text: string) => void }) {
-            const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-                onSearch(e.target.value)
-            }
-            return <input data-testid="debounced-search" onChange={handleSearch} />
-        },
-)
-
 // mocking SuggestionsInfo since its already tested
 jest.mock(
     '../SuggestionsInfo',
@@ -93,7 +81,7 @@ describe('When Suggestions mounts', () => {
         expect(screen.getByText('No variables found')).toBeTruthy()
     })
 
-    it('should show no matching variable found if there are no matching variables', () => {
+    it('should show no matching variable found if there are no matching variables', async () => {
         render(
             <Suggestions
                 handleDeActivation={null}
@@ -104,6 +92,9 @@ describe('When Suggestions mounts', () => {
             />,
         )
         fireEvent.change(screen.getByTestId('debounced-search'), { target: { value: 'test' } })
+        await act(async () => {
+            await new Promise((res) => setTimeout(res, 500))
+        })
         expect(screen.getByText('No matching variable found')).toBeTruthy()
     })
 })

src/components/common/DebouncedSearch/types.ts

@@ -38,6 +38,4 @@ export * from './hooks/ClickOutside'
 export * from './hooks/FileReader'
 export { default as FloatingVariablesSuggestions } from './FloatingVariablesSuggestions/FloatingVariablesSuggestions'
 export { default as CopyClipboard } from './ClipboardButton/ClipboardButton'
-export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
-export { default as Grid } from './Grid/Grid'
 export { default as HiddenInput } from './HiddenInput/HiddenInput'

src/components/common/FloatingVariablesSuggestions/Suggestions.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Tippy from '@tippyjs/react'
-import { GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
-import { Grid } from '../common'
+import { GenericEmptyState, Grid } from '@devtron-labs/devtron-fe-common-lib'
 import { VariableType, VariablesListItemProps } from './types'
 import {
     TABLE_LIST_HEADINGS,