feat: add plugin list

Author: AbhishekA1509

src/Assets/Icon/ic-lego-block.svg

@@ -93,6 +93,8 @@ export const ROUTES = {
     MODULE_CONFIGURED: 'module/config',
     RESOURCE_HISTORY_DEPLOYMENT: 'resource/history/deployment',
     PLUGIN_GLOBAL_DETAIL: 'plugin/global/detail',
+    PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
+    PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
 }
 
 export enum KEY_VALUE {

src/Assets/Icon/ic-visibility-on.svg

@@ -30,7 +30,7 @@ import {
     FetchIdDataStatus,
 } from './types'
 import { getCustomOptionSelectionStyle } from '../ReactSelect'
-import DetectBottom from './DetectBottom'
+import { DetectBottom } from '../DetectBottom'
 import {
     ConditionalWrap,
     DATE_TIME_FORMATS,

src/Common/Constants.ts

@@ -17,7 +17,11 @@
 import { useEffect, useRef } from 'react'
 import { useIntersection } from '../../Helpers'
 
-const DetectBottom = ({ callback }: { callback: () => void }) => {
+interface DetectBottomProps {
+    callback: () => void
+}
+
+const DetectBottom = ({ callback }: DetectBottomProps) => {
     const target = useRef<HTMLSpanElement>(null)
     const intersected = useIntersection(target, {
         rootMargin: '0px',

src/Shared/Components/CICDHistory/Sidebar.tsx

@@ -0,0 +1 @@
+export { default as DetectBottom } from './DetectBottom.component'

src/Shared/Components/CICDHistory/DetectBottom.tsx renamed to src/Shared/Components/DetectBottom/DetectBottom.component.tsx

@@ -0,0 +1,77 @@
+import { Checkbox, CHECKBOX_VALUE, noop } from '../../../Common'
+import { ImageWithFallback } from '../ImageWithFallback'
+import { PluginCardProps } from './types'
+import { ReactComponent as ICLegoBlock } from '../../../Assets/Icon/ic-lego-block.svg'
+
+const PluginCard = ({
+    isSelectable,
+    pluginDataStore,
+    handlePluginSelection,
+    parentPluginId,
+    isSelected,
+}: PluginCardProps) => {
+    const latestPluginId = pluginDataStore.parentPluginStore[parentPluginId].latestVersionId
+    const { icon, name, description, tags, pluginVersion, updatedBy } =
+        pluginDataStore.pluginVersionStore[latestPluginId]
+
+    const handleSelection = () => {
+        handlePluginSelection(parentPluginId)
+    }
+
+    return (
+        <div className="p-12 flexbox dc__gap-16 dc__tab-focus" role="button" tabIndex={0} onClick={handleSelection}>
+            {isSelectable ? (
+                <div className="dc__no-shrink icon-dim-40 p-8">
+                    <Checkbox
+                        isChecked={isSelected}
+                        onChange={noop}
+                        rootClassName="icon-dim-40 p-8 w-100 mb-0 dc__no-shrink"
+                        value={CHECKBOX_VALUE.CHECKED}
+                    />
+                </div>
+            ) : (
+                // TODO: Test multiple cards with fallback since has if in LegoBlock
+                <ImageWithFallback
+                    fallbackImage={<ICLegoBlock className="dc__no-shrink icon-dim-40" />}
+                    imageProps={{
+                        src: icon,
+                        alt: `${name} logo`,
+                        width: 40,
+                        height: 40,
+                        className: 'p-4 dc__no-shrink',
+                    }}
+                />
+            )}
+
+            <div className="flexbox-col dc__gap-12">
+                <div className="flexbox-col dc__gap-8">
+                    <div className="flexbox-col dc__gap-4">
+                        <h4 className="m-0 dc__truncate--clamp-3 cn-9 fs-13 fw-6 lh-20">
+                            {name}
+
+                            {!isSelectable && (
+                                <span className="dc__truncate--clamp-3 cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
+                            )}
+                        </h4>
+
+                        <span className="dc__truncate cn-7 fs-12 fw-4 lh-16">By {updatedBy || 'Devtron'}</span>
+                    </div>
+
+                    {/* Plugin description */}
+                    {description && <p className="m-0 cn-7 fs-12 fw-4 lh-16 dc__truncate--clamp-3">{description}</p>}
+                </div>
+
+                {/* Tag container */}
+                <div className="flexbox dc__gap-6 flex-wrap">
+                    {tags.map((tag) => (
+                        <div className="flexbox px-6 br-4 bcn-1 dc__align-items-center dc__mxw-160" key={tag}>
+                            <span className="dc__mxw-160 dc__truncate cn-8 fs-11 fw-4 lh-20">{tag}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PluginCard

src/Shared/Components/DetectBottom/index.ts

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { PluginListProps } from './types'
+import { DetectBottom } from '../DetectBottom'
+import { GenericEmptyState, GenericFilterEmptyState, showError } from '../../../Common'
+import { getPluginStoreData } from './service'
+import PluginCard from './PluginCard'
+
+const PluginList = ({
+    pluginDataStore,
+    pluginList,
+    totalCount,
+    handleDataUpdateForPluginResponse,
+    filters: { selectedTags, searchKey, showSelectedPlugins },
+    handlePluginSelection,
+    selectedPluginsMap,
+    isSelectable,
+    handleClearFilters,
+}: PluginListProps) => {
+    const [isLoadingMorePlugins, setIsLoadingMorePlugins] = useState<boolean>(false)
+    const handleLoadMore = async () => {
+        setIsLoadingMorePlugins(true)
+        try {
+            const pluginDataResponse = await getPluginStoreData({
+                searchKey,
+                offset: pluginList.length,
+                selectedTags,
+                appId: undefined,
+            })
+
+            handleDataUpdateForPluginResponse(pluginDataResponse)
+        } catch (error) {
+            showError(error)
+        } finally {
+            setIsLoadingMorePlugins(false)
+        }
+    }
+
+    if (!pluginList.length) {
+        if (!!searchKey || !selectedTags.length) {
+            return <GenericFilterEmptyState handleClearFilters={handleClearFilters} />
+        }
+
+        // Not going to happen but still handling in case of any issue that might arise
+        return (
+            <GenericEmptyState title="No plugins found" subTitle="We are unable to locate any plugin in our system" />
+        )
+    }
+
+    // selectedPluginsMap should always be present if s
+    if (showSelectedPlugins) {
+        return (
+            <>
+                {Object.keys(selectedPluginsMap).map((pluginId) => (
+                    <PluginCard
+                        key={pluginId}
+                        parentPluginId={+pluginId}
+                        isSelectable={isSelectable}
+                        pluginDataStore={pluginDataStore}
+                        handlePluginSelection={handlePluginSelection}
+                        isSelected
+                    />
+                ))}
+            </>
+        )
+    }
+
+    return (
+        <>
+            {pluginList.map((plugin) => (
+                <PluginCard
+                    key={plugin.parentPluginId}
+                    parentPluginId={plugin.parentPluginId}
+                    isSelectable={isSelectable}
+                    pluginDataStore={pluginDataStore}
+                    handlePluginSelection={handlePluginSelection}
+                    isSelected={!!selectedPluginsMap[plugin.parentPluginId]}
+                />
+            ))}
+
+            {totalCount > pluginList.length && !isLoadingMorePlugins && <DetectBottom callback={handleLoadMore} />}
+        </>
+    )
+}
+
+export default PluginList