Merge pull request #731 from devtron-labs/feat/app-clone-flow

feat: app clone flow

Author: shivani170

package-lock.json

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

package.json

@@ -0,0 +1,73 @@
+/*
+ * 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(() => {
+        const sanitizedList = list || []
+        if (!searchKey || error) {
+            return sanitizedList
+        }
+
+        const loweredSearchKey = searchKey.toLowerCase()
+        return sanitizedList.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}
+                renderButton={emptyStateConfig.renderButton}
+                isButtonAvailable={!!emptyStateConfig.renderButton}
+                {...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/Assets/IconV2/ic-app-template.svg

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

src/Assets/IconV2/ic-devtron-app.svg

@@ -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/Assets/IconV2/ic-devtron-job.svg

@@ -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,17 @@ 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' | 'renderButton' | 'renderButton'>
+    searchKey?: string
+    reloadList: () => void
+    error?: APIResponseHandlerProps['error']
+    isLoading?: boolean
+}
+
+export interface GenericInfoListSkeletonProps extends Partial<Pick<GenericInfoCardProps, 'borderVariant'>> {}