feat: app clone flow

package.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",

src/Shared/Components/GenericInfoCard/GenericInfoCardListing.tsx

@@ -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/Shared/Components/GenericInfoCard/GenericInfoListSkeleton.tsx

@@ -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/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,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'>> {}

src/Shared/Components/Icon/Icon.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as ICAdd } from '@IconsV2/ic-add.svg'
 import { ReactComponent as ICAmazonEks } from '@IconsV2/ic-amazon-eks.svg'
 import { ReactComponent as ICApica } from '@IconsV2/ic-apica.svg'
 import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg'
+import { ReactComponent as ICAppTemplate } from '@IconsV2/ic-app-template.svg'
 import { ReactComponent as ICArrowClockwise } from '@IconsV2/ic-arrow-clockwise.svg'
 import { ReactComponent as ICArrowRight } from '@IconsV2/ic-arrow-right.svg'
 import { ReactComponent as ICArrowSquareOut } from '@IconsV2/ic-arrow-square-out.svg'
@@ -50,7 +51,9 @@ import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg'
 import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightning.svg'
 import { ReactComponent as ICDelhivery } from '@IconsV2/ic-delhivery.svg'
 import { ReactComponent as ICDevtron } from '@IconsV2/ic-devtron.svg'
+import { ReactComponent as ICDevtronApp } from '@IconsV2/ic-devtron-app.svg'
 import { ReactComponent as ICDevtronHeaderLogo } from '@IconsV2/ic-devtron-header-logo.svg'
+import { ReactComponent as ICDevtronJob } from '@IconsV2/ic-devtron-job.svg'
 import { ReactComponent as ICDisconnect } from '@IconsV2/ic-disconnect.svg'
 import { ReactComponent as ICDiscordFill } from '@IconsV2/ic-discord-fill.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
@@ -163,6 +166,7 @@ export const iconMap = {
     'ic-amazon-eks': ICAmazonEks,
     'ic-apica': ICApica,
     'ic-app-group': ICAppGroup,
+    'ic-app-template': ICAppTemplate,
     'ic-arrow-clockwise': ICArrowClockwise,
     'ic-arrow-right': ICArrowRight,
     'ic-arrow-square-out': ICArrowSquareOut,
@@ -206,7 +210,9 @@ export const iconMap = {
     'ic-delete-lightning': ICDeleteLightning,
     'ic-delete': ICDelete,
     'ic-delhivery': ICDelhivery,
+    'ic-devtron-app': ICDevtronApp,
     'ic-devtron-header-logo': ICDevtronHeaderLogo,
+    'ic-devtron-job': ICDevtronJob,
     'ic-devtron': ICDevtron,
     'ic-disconnect': ICDisconnect,
     'ic-discord-fill': ICDiscordFill,