feat: add PluginImageContainer

Author: AbhishekA1509

src/Shared/Components/Plugin/PluginCard.tsx

@@ -1,8 +1,7 @@
 import { Checkbox, CHECKBOX_VALUE } from '../../../Common'
-import { ImageWithFallback } from '../ImageWithFallback'
+import PluginImageContainer from './PluginImageContainer'
 import PluginTagsContainer from './PluginTagsContainer'
 import { PluginCardProps } from './types'
-import { ReactComponent as ICLegoBlock } from '../../../Assets/Icon/ic-lego-block.svg'
 import { ReactComponent as ICBookOpen } from '../../../Assets/Icon/ic-book-open.svg'
 
 const PluginCard = ({
@@ -39,14 +38,9 @@ const PluginCard = ({
                 </div>
             )}
 
-            {/* TODO: Test multiple cards with fallback since has if in LegoBlock */}
             {!isSelected && (
-                <ImageWithFallback
-                    fallbackImage={
-                        <ICLegoBlock
-                            className={`dc__no-shrink icon-dim-40 ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`}
-                        />
-                    }
+                <PluginImageContainer
+                    fallbackImageClassName={`icon-dim-40 ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`}
                     imageProps={{
                         src: icon,
                         alt: `${name} logo`,

src/Shared/Components/Plugin/PluginImageContainer.tsx

@@ -0,0 +1,12 @@
+import { PluginImageContainerProps } from './types'
+import { ReactComponent as ICLegoBlock } from '../../../Assets/Icon/ic-lego-block.svg'
+import { ImageWithFallback } from '../ImageWithFallback'
+
+const PluginImageContainer = ({ imageProps, fallbackImageClassName }: PluginImageContainerProps) => (
+    <ImageWithFallback
+        fallbackImage={<ICLegoBlock className={`dc__no-shrink ${fallbackImageClassName}`} />}
+        imageProps={imageProps}
+    />
+)
+
+export default PluginImageContainer

src/Shared/Components/Plugin/PluginListContainer.tsx

@@ -227,7 +227,7 @@ const PluginListContainer = ({
                     }}
                     onRemoveFilter={handleRemoveSelectedTag}
                     clearFilters={handleClearFilters}
-                    className="p-0 w-100 pt-4"
+                    className="w-100 pt-0-imp"
                     clearButtonClassName="dc__no-background-imp dc__no-border-imp dc__tab-focus"
                     shouldHideLabel
                 />

src/Shared/Components/Plugin/types.ts

@@ -1,5 +1,6 @@
 import { VariableType } from '../../../Common'
 import { BaseFilterQueryParams } from '../../types'
+import { ImageWithFallbackProps } from '../ImageWithFallback'
 import { getPluginStoreData } from './service'
 
 export enum PluginCreationType {
@@ -196,3 +197,7 @@ export interface PluginTagsContainerProps {
     tags: string[]
     rootClassName?: string
 }
+
+export interface PluginImageContainerProps extends Pick<ImageWithFallbackProps, 'imageProps'> {
+    fallbackImageClassName?: string
+}

src/Shared/Components/ReactSelect/utils.tsx

@@ -191,7 +191,6 @@ export const MenuListWithApplyButton = ({
 }: MenuListProps & { handleApplyFilter: () => void }) => (
     <>
         <components.MenuList {...props} />
-        {/* TODO: Check not working look into this */}
         {props.selectProps.options.length > 0 && (
             <div className="p-8 dc__position-sticky dc__bottom-0 dc__border-top-n1 bcn-0 dc__bottom-radius-4">
                 <button