feat: app clone flow

src/Shared/Components/GenericInfoCard/GenericInfoCardListing.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { useMemo } from 'react'
+
+import emptyList from '@Images/empty-create.png'
+import ErrorScreenManager from '@Common/ErrorScreenManager'
+import { GenericEmptyState, GenericFilterEmptyState } from '@Common/index'
+
+import GenericInfoCard from './GenericInfoCard.component'
+import { GenericInfoListSkeleton } from './GenericInfoListSkeleton'
+import { GenericInfoCardListingProps } from './types'
+
+export const GenericInfoCardListing = ({
+    isLoading,
+    error,
+    list,
+    searchKey,
+    reloadList,
+    borderVariant,
+    handleClearFilters,
+    emptyStateConfig,
+}: GenericInfoCardListingProps) => {
+    const filteredList = useMemo(() => {
+        if (!searchKey || error) {
+            return list
+        }
+
+        const loweredSearchKey = searchKey.toLowerCase()
+        return list.filter(({ title }) => title.toLowerCase().includes(loweredSearchKey))
+    }, [searchKey, list, error])
+
+    if (isLoading) {
+        return <GenericInfoListSkeleton borderVariant={borderVariant} />
+    }
+
+    if (error) {
+        return <ErrorScreenManager code={error?.code as number} reload={reloadList} />
+    }
+
+    if (filteredList.length === 0) {
+        if (searchKey) {
+            return <GenericFilterEmptyState handleClearFilters={handleClearFilters} />
+        }
+
+        return <GenericEmptyState image={emptyStateConfig.image ?? emptyList} {...emptyStateConfig} />
+    }
+
+    return (
+        <>
+            {filteredList.map(({ id, title, description, author, Icon, onClick, linkProps }) => (
+                <GenericInfoCard
+                    key={id}
+                    title={title}
+                    description={description}
+                    author={author}
+                    borderVariant={borderVariant}
+                    Icon={Icon}
+                    {...(onClick ? { onClick } : { linkProps })}
+                />
+            ))}
+        </>
+    )
+}

src/Shared/Components/GenericInfoCard/GenericInfoListSkeleton.tsx

@@ -0,0 +1,9 @@
+import GenericInfoCard from './GenericInfoCard.component'
+
+export const GenericInfoListSkeleton = (borderVariant) => (
+    <>
+        <GenericInfoCard isLoading borderVariant={borderVariant} />
+        <GenericInfoCard isLoading borderVariant={borderVariant} />
+        <GenericInfoCard isLoading borderVariant={borderVariant} />
+    </>
+)

src/Shared/Components/GenericInfoCard/index.ts

@@ -15,4 +15,6 @@
  */
 
 export { default as GenericInfoCard } from './GenericInfoCard.component'
-export { GenericInfoCardBorderVariant, type GenericInfoCardProps } from './types'
+export * from './GenericInfoCardListing'
+export { GenericInfoListSkeleton } from './GenericInfoListSkeleton'
+export { GenericInfoCardBorderVariant, type GenericInfoCardListingProps, type GenericInfoCardProps } from './types'

src/Shared/Components/GenericInfoCard/types.ts

@@ -17,6 +17,11 @@
 import { MouseEventHandler, ReactElement } from 'react'
 import { LinkProps } from 'react-router-dom'
 
+import { GenericFilterEmptyStateProps } from '@Common/EmptyState/types'
+import { GenericEmptyStateType } from '@Common/Types'
+
+import { APIResponseHandlerProps } from '../APIResponseHandler'
+
 type BaseGenericInfoCardProps = {
     title: string
     description: string
@@ -46,3 +51,15 @@ export type GenericInfoCardProps = { borderVariant: GenericInfoCardBorderVariant
           isLoading?: boolean
       } & BaseGenericInfoCardProps)
 )
+
+export interface GenericInfoCardListingProps
+    extends Pick<GenericInfoCardProps, 'borderVariant'>,
+        Pick<GenericFilterEmptyStateProps, 'handleClearFilters'> {
+    list: (Pick<GenericInfoCardProps, 'Icon' | 'author' | 'description' | 'linkProps' | 'onClick' | 'title'> &
+        Record<'id', string>)[]
+    emptyStateConfig: Pick<GenericEmptyStateType, 'title' | 'subTitle' | 'image'>
+    searchKey?: string
+    reloadList?: () => void
+    error?: APIResponseHandlerProps['error']
+    isLoading?: boolean
+}