Skip to content

Commit a7aeffb

Browse files
Elessar1802Elessar1802
committed
Merge branch 'main' of github.com:devtron-labs/devtron-fe-common-lib into feat/resource-shortnames
2 parents 9145648 + f01f775 commit a7aeffb

32 files changed

+1266
-58
lines changed

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

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-filter-applied.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-filter.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 20 additions & 0 deletions
Loading

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

Lines changed: 20 additions & 0 deletions
Loading

‎src/Common/CIPipeline.Types.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -280,14 +280,3 @@ export interface FormErrorObjectType {
280280
steps: TaskErrorObj[]
281281
}
282282
}
283-
284-
export interface PluginDetailType {
285-
id: number
286-
name: string
287-
type: string
288-
description: string
289-
icon: string
290-
tags: string[]
291-
inputVariables?: VariableType[]
292-
outputVariables?: VariableType[]
293-
}

‎src/Common/Constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ export const ROUTES = {
9595
CONFIG_CD_PIPELINE: 'config/cd-pipeline',
9696
MODULE_CONFIGURED: 'module/config',
9797
RESOURCE_HISTORY_DEPLOYMENT: 'resource/history/deployment',
98+
PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
99+
PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
100+
PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
98101
}
99102

100103
export enum KEY_VALUE {

‎src/Common/Policy.Types.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { PluginDataStoreType } from '../Shared'
1718
import { VariableType } from './CIPipeline.Types'
19+
import { ServerErrors } from './ServerError'
1820
import { ResponseType } from './Types'
1921

2022
export enum ApplyPolicyToStage {
@@ -42,6 +44,7 @@ export interface DefinitionSourceType {
4244
}
4345
export interface MandatoryPluginDetailType {
4446
id: number
47+
parentPluginId: number
4548
icon: string
4649
name: string
4750
description?: string
@@ -57,6 +60,12 @@ export interface MandatoryPluginDataType {
5760
isValidPost: boolean
5861
}
5962

63+
export interface ProcessPluginDataReturnType {
64+
mandatoryPluginData: MandatoryPluginDataType
65+
pluginDataStore: PluginDataStoreType
66+
mandatoryPluginsError?: ServerErrors
67+
}
68+
6069
export enum ConsequenceAction {
6170
BLOCK = 'BLOCK',
6271
ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',

‎src/Pages/GlobalConfigurations/Authorization/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
*/
1616

1717
export * from './constants'
18-
export type { UserListFilterParams, BaseFilterQueryParams, UserRoleGroup } from './types'
18+
export type { UserListFilterParams, UserRoleGroup } from './types'
1919
export * from './shared'

‎src/Pages/GlobalConfigurations/Authorization/types.ts

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,9 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { SortingParams } from '@Common/Types'
17+
import { BaseFilterQueryParams } from '../../../Shared'
1818
import { UserListSortableKeys, UserStatus } from './constants'
1919

20-
export type BaseFilterQueryParams<T> = {
21-
/**
22-
* Offset for the list result
23-
*/
24-
offset?: number
25-
/**
26-
* Number of items required in the list
27-
*/
28-
size?: number
29-
/**
30-
* Search string (if any)
31-
*/
32-
searchKey?: string
33-
/**
34-
* If true, all items are returned with any search / filtering applied without pagination
35-
*/
36-
showAll?: boolean
37-
} & SortingParams<T>
38-
3920
export type UserListFilterParams = BaseFilterQueryParams<UserListSortableKeys> & {
4021
/**
4122
* Selected statuses (if any)

‎src/Shared/Components/CICDHistory/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
FetchIdDataStatus,
3131
} from './types'
3232
import { getCustomOptionSelectionStyle } from '../ReactSelect'
33-
import DetectBottom from './DetectBottom'
33+
import { DetectBottom } from '../DetectBottom'
3434
import {
3535
ConditionalWrap,
3636
DATE_TIME_FORMATS,

‎src/Shared/Components/CICDHistory/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export { default as CDEmptyState } from './CDEmptyState'
2121
export { default as DeploymentStatusDetailBreakdown } from './DeploymentStatusBreakdown'
2222
export { default as AppStatusDetailsChart } from './AppStatusDetailsChart'
2323
export { default as DeploymentDetailSteps } from './DeploymentDetailSteps'
24-
export { default as DetectBottom } from './DetectBottom'
2524
export * from './types'
2625
export * from './service'
2726
export * from './History.components'

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@
1717
import { useEffect, useRef } from 'react'
1818
import { useIntersection } from '../../Helpers'
1919

20-
const DetectBottom = ({ callback }: { callback: () => void }) => {
20+
interface DetectBottomProps {
21+
callback: () => void
22+
}
23+
24+
const DetectBottom = ({ callback }: DetectBottomProps) => {
2125
const target = useRef<HTMLSpanElement>(null)
2226
const intersected = useIntersection(target, {
2327
rootMargin: '0px',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as DetectBottom } from './DetectBottom.component'

‎src/Shared/Components/FilterChips/FilterChips.component.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const FilterChip = ({
2424
handleRemoveFilter,
2525
getFormattedLabel = noop,
2626
getFormattedValue = noop,
27+
shouldHideLabel = false,
2728
}: FilterChipProps) => {
2829
const removeFilter = () => {
2930
handleRemoveFilter(label, value)
@@ -34,11 +35,15 @@ const FilterChip = ({
3435
const valueToDisplay = getFormattedValue(label, value) ?? value
3536

3637
return (
37-
labelToDisplay &&
38+
(labelToDisplay || shouldHideLabel) &&
3839
valueToDisplay && (
3940
<div className="flexbox flex-align-center br-4 dc__border dc__bg-n50 pl-6 pr-6 pt-2 pb-2 dc__user-select-none h-24 dc__gap-6 fs-12 lh-20 cn-9 fw-4 dc__ellipsis-right">
40-
<span className="fw-6 dc__capitalize">{labelToDisplay}</span>
41-
<span className="dc__divider h-24" />
41+
{!shouldHideLabel && (
42+
<>
43+
<span className="fw-6 dc__capitalize">{labelToDisplay}</span>
44+
<span className="dc__divider h-24" />
45+
</>
46+
)}
4247
<span className="dc__ellipsis-right">{valueToDisplay}</span>
4348
<button
4449
type="button"
@@ -64,6 +69,7 @@ const FilterChips = <T = Record<string, unknown>,>({
6469
getFormattedValue,
6570
className = '',
6671
clearButtonClassName = '',
72+
shouldHideLabel,
6773
}: FilterChipsProps<T>) => {
6874
const handleRemoveFilter = (filterKey, valueToRemove) => {
6975
const updatedFilterConfig = JSON.parse(JSON.stringify(filterConfig))
@@ -95,6 +101,7 @@ const FilterChips = <T = Record<string, unknown>,>({
95101
handleRemoveFilter={handleRemoveFilter}
96102
getFormattedLabel={getFormattedLabel}
97103
getFormattedValue={getFormattedValue}
104+
shouldHideLabel={shouldHideLabel}
98105
/>
99106
))
100107
) : (
@@ -105,6 +112,7 @@ const FilterChips = <T = Record<string, unknown>,>({
105112
handleRemoveFilter={handleRemoveFilter}
106113
getFormattedLabel={getFormattedLabel}
107114
getFormattedValue={getFormattedValue}
115+
shouldHideLabel={shouldHideLabel}
108116
/>
109117
),
110118
)}

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export interface FilterChipProps {
2020
/**
2121
* Filter label
2222
*/
23-
label: string
23+
label?: string
2424
/**
2525
* Corresponding value of the filter
2626
*/
@@ -37,10 +37,15 @@ export interface FilterChipProps {
3737
* If passed, the label will be formatted accordingly
3838
*/
3939
getFormattedValue?: (filterKey: string, filterValue: unknown) => ReactNode
40+
/**
41+
* If true, would hide the label
42+
* @default false
43+
*/
44+
shouldHideLabel?: boolean
4045
}
4146

4247
export interface FilterChipsProps<T = Record<string, unknown>>
43-
extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue'> {
48+
extends Pick<FilterChipProps, 'getFormattedLabel' | 'getFormattedValue' | 'shouldHideLabel'> {
4449
/**
4550
* Current filter configuration
4651
*/

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { Checkbox, CHECKBOX_VALUE, stopPropagation } from '../../../Common'
2+
import PluginImageContainer from './PluginImageContainer'
3+
import PluginTagsContainer from './PluginTagsContainer'
4+
import { PluginCardProps } from './types'
5+
import { ReactComponent as ICBookOpen } from '../../../Assets/Icon/ic-book-open.svg'
6+
7+
const PluginCard = ({
8+
isSelectable,
9+
pluginDataStore,
10+
handlePluginSelection,
11+
parentPluginId,
12+
isSelected,
13+
showCardBorder,
14+
}: PluginCardProps) => {
15+
const latestPluginId = pluginDataStore.parentPluginStore[parentPluginId].latestVersionId
16+
const { icon, name, description, tags, pluginVersion, updatedBy, docLink } =
17+
pluginDataStore.pluginVersionStore[latestPluginId]
18+
19+
const handleSelection = (e: React.MouseEvent | React.KeyboardEvent) => {
20+
if ('key' in e && e.key !== 'Enter' && e.key !== ' ') {
21+
return
22+
}
23+
24+
handlePluginSelection(parentPluginId)
25+
}
26+
27+
return (
28+
<div
29+
className={`p-12 flexbox dc__gap-16 dc__tab-focus plugin-card dc__visible-hover dc__visible-hover--parent ${showCardBorder ? 'dc__border br-4 dc__hover-n50' : ''}`}
30+
role="button"
31+
tabIndex={0}
32+
onClick={handleSelection}
33+
onKeyDown={handleSelection}
34+
>
35+
{isSelectable && (
36+
<div className={`dc__no-shrink icon-dim-40 p-8 ${!isSelected ? 'dc__visible-hover--child' : ''}`}>
37+
<Checkbox
38+
isChecked={isSelected}
39+
onChange={handleSelection}
40+
rootClassName="icon-dim-40 p-8 w-100 mb-0 dc__no-shrink"
41+
value={CHECKBOX_VALUE.CHECKED}
42+
/>
43+
</div>
44+
)}
45+
46+
{!isSelected && (
47+
<PluginImageContainer
48+
fallbackImageClassName={`icon-dim-40 ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`}
49+
imageProps={{
50+
src: icon,
51+
alt: `${name} logo`,
52+
width: 40,
53+
height: 40,
54+
className: `p-4 dc__no-shrink ${isSelectable ? 'dc__visible-hover--hide-child' : ''}`,
55+
}}
56+
/>
57+
)}
58+
59+
<div className="flexbox-col dc__gap-12 w-100">
60+
<div className="flexbox-col dc__gap-8">
61+
<div className="flexbox-col dc__gap-4">
62+
<div className="flexbox dc__gap-6 w-100 dc__align-start dc__content-space">
63+
<div className="flexbox dc__gap-4">
64+
<h4 className="m-0 dc__truncate cn-9 fs-13 fw-6 lh-20 plugin-card__title">{name}</h4>
65+
{!isSelectable && (
66+
<span className="dc__truncate cn-7 fs-12 fw-4 lh-20">({pluginVersion})</span>
67+
)}
68+
</div>
69+
70+
{docLink && (
71+
<div className="flexbox dc__gap-4 dc__visible-hover--child dc__align-items-center">
72+
<a
73+
href={docLink}
74+
className="anchor fs-12 fw-6 lh-20"
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
onClick={stopPropagation}
78+
>
79+
Learn more
80+
</a>
81+
82+
<ICBookOpen className="icon-dim-12 dc__no-shrink scb-5" />
83+
</div>
84+
)}
85+
</div>
86+
87+
<span className="dc__truncate cn-7 fs-12 fw-4 lh-16">By {updatedBy}</span>
88+
</div>
89+
90+
{/* Plugin description */}
91+
{description && <p className="m-0 cn-7 fs-12 fw-4 lh-16 dc__truncate--clamp-3">{description}</p>}
92+
</div>
93+
94+
{/* Tag container */}
95+
<PluginTagsContainer tags={tags} />
96+
</div>
97+
</div>
98+
)
99+
}
100+
101+
export default PluginCard

‎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

0 commit comments

Comments
 (0)