Skip to content

Commit a9945c7

Browse files
AbhishekA1509AbhishekA1509
committed
feat: add documentation link on plugin card
1 parent 3a06c11 commit a9945c7

File tree

8 files changed

+97
-14
lines changed

8 files changed

+97
-14
lines changed

‎src/Assets/Icon/ic-book-open.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Shared/Components/Plugin/PluginCard.tsx

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Checkbox, CHECKBOX_VALUE } from '../../../Common'
22
import { ImageWithFallback } from '../ImageWithFallback'
3+
import PluginTagsContainer from './PluginTagsContainer'
34
import { PluginCardProps } from './types'
45
import { ReactComponent as ICLegoBlock } from '../../../Assets/Icon/ic-lego-block.svg'
6+
import { ReactComponent as ICBookOpen } from '../../../Assets/Icon/ic-book-open.svg'
57

68
const PluginCard = ({
79
isSelectable,
@@ -12,7 +14,7 @@ const PluginCard = ({
1214
showCardBorder,
1315
}: PluginCardProps) => {
1416
const latestPluginId = pluginDataStore.parentPluginStore[parentPluginId].latestVersionId
15-
const { icon, name, description, tags, pluginVersion, updatedBy } =
17+
const { icon, name, description, tags, pluginVersion, updatedBy, docLink } =
1618
pluginDataStore.pluginVersionStore[latestPluginId]
1719

1820
const handleSelection = () => {
@@ -40,18 +42,22 @@ const PluginCard = ({
4042
{/* TODO: Test multiple cards with fallback since has if in LegoBlock */}
4143
{!isSelected && (
4244
<ImageWithFallback
43-
fallbackImage={<ICLegoBlock className="dc__no-shrink dc__visible-hover--hide-child icon-dim-40" />}
45+
fallbackImage={
46+
<ICLegoBlock
47+
className={`dc__no-shrink icon-dim-40 ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`}
48+
/>
49+
}
4450
imageProps={{
4551
src: icon,
4652
alt: `${name} logo`,
4753
width: 40,
4854
height: 40,
49-
className: 'p-4 dc__no-shrink dc__visible-hover--hide-child',
55+
className: `p-4 dc__no-shrink ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`,
5056
}}
5157
/>
5258
)}
5359

54-
<div className="flexbox-col dc__gap-12">
60+
<div className="flexbox-col dc__gap-12 w-100">
5561
<div className="flexbox-col dc__gap-8">
5662
<div className="flexbox-col dc__gap-4">
5763
<div className="flexbox dc__gap-4">
@@ -69,13 +75,21 @@ const PluginCard = ({
6975
</div>
7076

7177
{/* Tag container */}
72-
{/* TODO: Make component since re-usable */}
73-
<div className="flexbox dc__gap-6 flex-wrap">
74-
{tags.map((tag) => (
75-
<div className="flexbox px-6 br-4 bcn-1 dc__align-items-center dc__mxw-160" key={tag}>
76-
<span className="dc__mxw-160 dc__truncate cn-8 fs-11 fw-4 lh-20">{tag}</span>
77-
</div>
78-
))}
78+
<div className="flexbox dc__gap-6 w-100 dc__align-start">
79+
<PluginTagsContainer tags={tags} />
80+
81+
{/* Adding a div with min width so that tags won't have layout shift on hover and will give flex-grow as 1 with flex end so that it sticks to end even if tags don't exist */}
82+
<div className="mw-84 flexbox dc__content-end flex-grow-1">
83+
{docLink && (
84+
<div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
85+
<a href={docLink} className="anchor" target="_blank" rel="noopener noreferrer">
86+
Learn more
87+
</a>
88+
89+
<ICBookOpen className="icon-dim-12 dc__no-shrink" />
90+
</div>
91+
)}
92+
</div>
7993
</div>
8094
</div>
8195
</div>

‎src/Shared/Components/Plugin/PluginCardSkeletonList.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { PluginCardSkeletonListProps } from './types'
2+
3+
const PluginCardSkeleton = () => (
4+
<div className="p-12 flexbox dc__gap-16 w-100">
5+
<div className="p-4 dc__no-shrink icon-dim-40 shimmer-loading" />
6+
7+
<div className="flexbox-col dc__gap-12 w-100">
8+
<div className="flexbox-col dc__gap-8 w-100">
9+
<div className="h-20 w-150 shimmer-loading" />
10+
11+
<div className="flexbox-col dc__gap-4">
12+
<div className="h-12 w-100 shimmer-loading" />
13+
<div className="h-12 w-120 shimmer-loading" />
14+
</div>
15+
</div>
16+
17+
<div className="h-20 w-60 shimmer-loading" />
18+
</div>
19+
</div>
20+
)
21+
22+
const PluginCardSkeletonList = ({ count = 3 }: PluginCardSkeletonListProps) => (
23+
<>
24+
{Array(count)
25+
.fill(0)
26+
.map((_, index) => (
27+
// eslint-disable-next-line react/no-array-index-key
28+
<PluginCardSkeleton key={index} />
29+
))}
30+
</>
31+
)
32+
33+
export default PluginCardSkeletonList

‎src/Shared/Components/Plugin/PluginList.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { useState } from 'react'
22
import { useParams } from 'react-router'
33
import PluginCard from './PluginCard'
44
import { DetectBottom } from '../DetectBottom'
5+
import PluginCardSkeletonList from './PluginCardSkeletonList'
56
import { PluginListParamsType, PluginListProps } from './types'
6-
import { GenericEmptyState, GenericFilterEmptyState, Progressing, showError } from '../../../Common'
7+
import { GenericEmptyState, GenericFilterEmptyState, showError } from '../../../Common'
78
import { getPluginStoreData } from './service'
89

910
const PluginList = ({
@@ -85,8 +86,9 @@ const PluginList = ({
8586
/>
8687
))}
8788

88-
{isLoadingMorePlugins && <Progressing />}
89+
{isLoadingMorePlugins && <PluginCardSkeletonList />}
8990

91+
{/* TODO: Handle on error */}
9092
{totalCount > pluginList.length && !isLoadingMorePlugins && <DetectBottom callback={handleLoadMore} />}
9193
</>
9294
)

‎src/Shared/Components/Plugin/PluginListContainer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
import { DEFAULT_PLUGIN_LIST_FILTERS } from './constants'
1717
import { ReactComponent as ICCross } from '../../../Assets/Icon/ic-cross.svg'
1818
import { ReactComponent as ICVisibility } from '../../../Assets/Icon/ic-visibility-on.svg'
19+
import PluginCardSkeletonList from './PluginCardSkeletonList'
1920

2021
const PluginListContainer = ({
2122
availableTags,
@@ -237,7 +238,7 @@ const PluginListContainer = ({
237238
{showSelectedPluginFilter && (
238239
<button
239240
className={`py-6 px-8 dc__gap-12 flex dc__outline-none-imp dc__tab-focus dc__tab-focus dc__no-shrink ${
240-
showSelectedPlugins ? 'bc-n50 dc__border-n1' : 'dc__no-border dc__no-background'
241+
showSelectedPlugins ? 'bc-n50 dc__border-n1' : 'en-0 bw-1 dc__no-background'
241242
}`}
242243
data-testid="view-only-selected"
243244
type="button"
@@ -268,6 +269,7 @@ const PluginListContainer = ({
268269

269270
<APIResponseHandler
270271
isLoading={isLoadingPluginData}
272+
customLoader={<PluginCardSkeletonList count={5} />}
271273
error={pluginDataError}
272274
errorScreenManagerProps={{
273275
code: pluginDataError?.code,

‎src/Shared/Components/Plugin/PluginTagsContainer.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { PluginTagsContainerProps } from './types'
2+
3+
const PluginTagsContainer = ({ tags }: PluginTagsContainerProps) => {
4+
if (!tags?.length) {
5+
return null
6+
}
7+
8+
return (
9+
<div className="flexbox dc__gap-6 flex-wrap">
10+
{tags.map((tag) => (
11+
<div className="flexbox px-6 br-4 bcn-1 dc__align-items-center dc__mxw-160" key={tag}>
12+
<span className="dc__mxw-160 dc__truncate cn-8 fs-11 fw-4 lh-20">{tag}</span>
13+
</div>
14+
))}
15+
</div>
16+
)
17+
}
18+
19+
export default PluginTagsContainer

‎src/Shared/Components/Plugin/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export * from './service'
33
export * from './utils'
44
export * from './constants'
55
export { default as PluginListContainer } from './PluginListContainer'
6+
export { default as PluginTagsContainer } from './PluginTagsContainer'

‎src/Shared/Components/Plugin/types.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,3 +179,12 @@ export interface PluginCardProps
179179
parentPluginId: PluginDetailType['parentPluginId']
180180
isSelected: boolean
181181
}
182+
183+
export interface PluginCardSkeletonListProps {
184+
// Default value is 3
185+
count?: number
186+
}
187+
188+
export interface PluginTagsContainerProps {
189+
tags: string[]
190+
}

0 commit comments

Comments
 (0)