feat: add support for clear filter button in GenericFilterEmptyState

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.84-beta-9",
+    "version": "0.0.84-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,17 +1,34 @@
-import { GenericEmptyStateType } from '../Types'
 import noResult from '../../Assets/Img/empty-noresult@2x.png'
 import GenericEmptyState from './GenericEmptyState'
+import { GenericFilterEmptyStateProps } from './types'
 
-const GenericFilterEmptyState = (
-    props: Omit<GenericEmptyStateType, 'image' | 'title' | 'subTitle'> &
-        Partial<Pick<GenericEmptyStateType, 'title' | 'subTitle'>>,
-) => (
-    <GenericEmptyState
-        image={noResult}
-        title="No results"
-        subTitle="We couldn’t find any matching results"
-        {...props}
-    />
-)
+/**
+ * Empty state when no filters are applied
+ */
+const GenericFilterEmptyState = ({
+    handleClearFilters,
+    isButtonAvailable,
+    renderButton,
+    ...props
+}: GenericFilterEmptyStateProps) => {
+    const isClearFilterButtonAvailable = !!handleClearFilters
+
+    const renderClearFilterButton = () => (
+        <button type="button" onClick={handleClearFilters} className="cta secondary flex h-32 lh-20-imp">
+            Clear Filters
+        </button>
+    )
+
+    return (
+        <GenericEmptyState
+            image={noResult}
+            title="No results"
+            subTitle="We couldn’t find any matching results"
+            {...props}
+            isButtonAvailable={isClearFilterButtonAvailable || isButtonAvailable}
+            renderButton={isClearFilterButtonAvailable ? renderClearFilterButton : renderButton}
+        />
+    )
+}
 
 export default GenericFilterEmptyState

src/Common/EmptyState/GenericFilterEmptyState.tsx

@@ -0,0 +1,21 @@
+import { GenericEmptyStateType } from '../Types'
+
+export type GenericFilterEmptyStateProps = Omit<
+    GenericEmptyStateType,
+    'image' | 'title' | 'subTitle' | 'isButtonAvailable' | 'renderButton'
+> &
+    Partial<Pick<GenericEmptyStateType, 'title' | 'subTitle'>> &
+    (
+        | {
+              /**
+               * If provided, it will have priority over the isButtonAvailable prop
+               * and render clear filter button
+               */
+              handleClearFilters?: () => void
+              isButtonAvailable?: never
+              renderButton?: never
+          }
+        | (Pick<GenericEmptyStateType, 'isButtonAvailable' | 'renderButton'> & {
+              handleClearFilters?: never
+          })
+    )