Skip to content

Commit 0628827

Browse files
RohitRaj011RohitRaj011
committed
Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/pipeline-deploy-config-diff-revamp
2 parents 4ee5946 + 6db886c commit 0628827

21 files changed

+360
-140
lines changed

‎.github/semantic.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
titleOnly: true
2+
3+
types:
4+
- fix
5+
- feat
6+
- feature
7+
- fixes
8+
- chore
9+
- perf
10+
- docs
11+
- doc
12+
- release
13+
- misc

‎package-lock.json

Lines changed: 9 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "0.3.12",
3+
"version": "0.3.14",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -87,6 +87,7 @@
8787
"react-mde": "^11.5.0",
8888
"react-router": "^5.3.0",
8989
"react-router-dom": "^5.3.0",
90+
"react-keybind": "^0.9.4",
9091
"rxjs": "^7.8.1",
9192
"yaml": "^2.4.1"
9293
},

‎src/Assets/Icon/ic-collapse-all.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-expand-all.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Common/Constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,3 +548,6 @@ export const VULNERABILITIES_SORT_PRIORITY = {
548548
low: 4,
549549
unknown: 5,
550550
}
551+
552+
// TODO: might not work need to verify
553+
export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')

‎src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { KEYBOARD_KEYS_MAP, TooltipProps } from './types'
2+
3+
const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutKeyCombo']) => (
4+
<div className="flexbox dc__gap-8 px-8 py-4 flex-wrap">
5+
<span className="lh-18 fs-12 fw-4 cn-0">{text}</span>
6+
{!!combo?.length && (
7+
<div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
8+
{combo.map((key) => (
9+
<span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
10+
{KEYBOARD_KEYS_MAP[key]}
11+
</span>
12+
))}
13+
</div>
14+
)}
15+
</div>
16+
)
17+
18+
export default ShortcutKeyComboTooltipContent

‎src/Common/Tooltip/Tooltip.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { useState, cloneElement } from 'react'
22
import TippyJS from '@tippyjs/react'
33
import { TooltipProps } from './types'
4+
import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
5+
import './styles.scss'
46

57
const Tooltip = ({
8+
shortcutKeyCombo,
69
alwaysShowTippyOnHover,
7-
// NOTE: if alwaysShowTippyOnHover is being passed by user don't apply truncation logic at all
8-
showOnTruncate = alwaysShowTippyOnHover === undefined,
10+
// NOTE: if alwaysShowTippyOnHover or shortcutKeyCombo are being passed by user don't apply truncation logic at all
11+
showOnTruncate = alwaysShowTippyOnHover === undefined && shortcutKeyCombo === undefined,
912
wordBreak = true,
1013
children: child,
1114
...rest
@@ -22,17 +25,24 @@ const Tooltip = ({
2225
}
2326
}
2427

25-
return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
26-
cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
27-
) : (
28+
const showTooltipWhenShortcutKeyComboProvided =
29+
!!shortcutKeyCombo && (alwaysShowTippyOnHover === undefined || alwaysShowTippyOnHover)
30+
const showTooltipOnTruncate = showOnTruncate && isTextTruncated
31+
32+
return showTooltipOnTruncate || showTooltipWhenShortcutKeyComboProvided || alwaysShowTippyOnHover ? (
2833
<TippyJS
2934
arrow={false}
3035
placement="top"
36+
// NOTE: setting the default maxWidth to empty string so that we can override using css
37+
maxWidth=""
3138
{...rest}
32-
className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
39+
{...(shortcutKeyCombo ? { content: <ShortcutKeyComboTooltipContent {...shortcutKeyCombo} /> } : {})}
40+
className={`${shortcutKeyCombo ? 'shortcut-keys__tippy' : 'default-tt'} ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className ?? ''}`}
3341
>
3442
{cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
3543
</TippyJS>
44+
) : (
45+
cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
3646
)
3747
}
3848

‎src/Common/Tooltip/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as Tooltip } from './Tooltip'
2+
export type { SupportedKeyboardKeysType } from './types'
23
export { TOOLTIP_CONTENTS } from './constants'

‎src/Common/Tooltip/styles.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.tippy-box.shortcut-keys__tippy {
2+
border-radius: 4px;
3+
border: 1px solid rgba(255, 255, 255, 0.20);
4+
background: var(--N900);
5+
6+
& > .tippy-content {
7+
padding: 0;
8+
}
9+
10+
& .shortcut-keys__chip {
11+
border-radius: 4px;
12+
border: 0.5px solid rgba(255, 255, 255, 0.20);
13+
background: var(--N800);
14+
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.20);
15+
padding: 0 2px;
16+
min-width: 16px;
17+
max-width: 250px;
18+
}
19+
}

‎src/Common/Tooltip/types.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1+
import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
12
import { TippyProps } from '@tippyjs/react'
23

4+
export const KEYBOARD_KEYS_MAP = {
5+
Control: IS_PLATFORM_MAC_OS ? '⌘' : 'Ctrl',
6+
Shift: '⇧',
7+
F: 'F',
8+
E: 'E',
9+
} as const
10+
11+
export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP
12+
313
type BaseTooltipProps =
414
| {
515
/**
@@ -12,6 +22,12 @@ type BaseTooltipProps =
1222
* @default false
1323
*/
1424
alwaysShowTippyOnHover?: never
25+
/**
26+
* If true, use the common styling for shortcuts
27+
* @default undefined
28+
*/
29+
shortcutKeyCombo?: never
30+
content: TippyProps['content']
1531
}
1632
| {
1733
/**
@@ -21,9 +37,36 @@ type BaseTooltipProps =
2137
showOnTruncate?: never
2238
/**
2339
* If true, wrap with tippy irrespective of other options
40+
* @default true
41+
*/
42+
alwaysShowTippyOnHover: boolean
43+
/**
44+
* If true, use the common styling for shortcuts
45+
* @default undefined
46+
*/
47+
shortcutKeyCombo?: never
48+
content: TippyProps['content']
49+
}
50+
| {
51+
/**
52+
* If true, show tippy on truncate
53+
* @default false
54+
*/
55+
showOnTruncate?: never
56+
/**
57+
* If showOnTruncate is defined this prop doesn't work
2458
* @default false
2559
*/
2660
alwaysShowTippyOnHover?: boolean
61+
/**
62+
* If true, use the common styling for shortcuts
63+
* @default undefined
64+
*/
65+
shortcutKeyCombo: {
66+
text: string
67+
combo: SupportedKeyboardKeysType[]
68+
}
69+
content?: never
2770
}
2871

2972
export type TooltipProps = BaseTooltipProps &

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,9 +154,14 @@ const Button = ({
154154
}
155155
}
156156

157+
if (Object.hasOwn(tooltipProps, 'shortcutKeyCombo') && 'shortcutKeyCombo' in tooltipProps) {
158+
return tooltipProps
159+
}
160+
157161
return {
158-
alwaysShowTippyOnHover: showTooltip && !!tooltipProps?.content,
159-
...tooltipProps,
162+
// TODO: using some typing somersaults here, clean it up later
163+
alwaysShowTippyOnHover: showTooltip && !!(tooltipProps as Required<Pick<TooltipProps, 'content'>>)?.content,
164+
...(tooltipProps as Required<Pick<TooltipProps, 'content'>>),
160165
}
161166
}
162167

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@ export type ButtonProps = (
9494
/**
9595
* Props for tooltip
9696
*/
97-
tooltipProps: Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate'>
97+
// TODO: using some typing somersaults here, clean it up later
98+
tooltipProps:
99+
| Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo'>
100+
| (Omit<TooltipProps, 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'content'> &
101+
Required<Pick<TooltipProps, 'shortcutKeyCombo'>>)
98102
}
99103
| {
100104
showTooltip?: never

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

Lines changed: 45 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -153,32 +153,6 @@ const Artifacts = ({
153153
if (status.toLowerCase() === TERMINAL_STATUS_MAP.RUNNING || status.toLowerCase() === TERMINAL_STATUS_MAP.STARTING) {
154154
return <CIProgressView />
155155
}
156-
if (!blobStorageEnabled) {
157-
return (
158-
<div className="flex column p-24 w-100 h-100">
159-
<GenericEmptyState
160-
title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoFilesFound}
161-
subTitle={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.BlobStorageNotConfigured}
162-
image={noartifact}
163-
/>
164-
<div className="flexbox pt-8 pr-12 pb-8 pl-12 bcv-1 ev-2 bw-1 br-4 dc__position-abs-b-20">
165-
<ICHelpOutline className="icon-dim-20 fcv-5" />
166-
<span className="fs-13 fw-4 mr-8 ml-8">
167-
{EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.StoreFiles}
168-
</span>
169-
<a
170-
className="fs-13 fw-6 cb-5 dc__no-decor"
171-
href={DOCUMENTATION.BLOB_STORAGE}
172-
target="_blank"
173-
rel="noreferrer"
174-
>
175-
{EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
176-
</a>
177-
<OpenInNew className="icon-dim-20 ml-8" />
178-
</div>
179-
</div>
180-
)
181-
}
182156
if (
183157
status.toLowerCase() === TERMINAL_STATUS_MAP.FAILED ||
184158
status.toLowerCase() === TERMINAL_STATUS_MAP.CANCELLED ||
@@ -200,7 +174,7 @@ const Artifacts = ({
200174
/>
201175
)
202176
}
203-
if (!artifactId && status.toLowerCase() === TERMINAL_STATUS_MAP.SUCCEEDED && !isJobView) {
177+
if (!artifactId && status.toLowerCase() === TERMINAL_STATUS_MAP.SUCCEEDED) {
204178
return (
205179
<GenericEmptyState
206180
title={EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.NoArtifactsFound}
@@ -210,8 +184,8 @@ const Artifacts = ({
210184
)
211185
}
212186
return (
213-
<div className={`flex left column dc__gap-12 dc__content-start ${rootClassName ?? ''}`}>
214-
{!isJobView && type !== HistoryComponentType.CD && (
187+
<>
188+
<div className={`flex left column dc__gap-12 dc__content-start ${rootClassName ?? ''}`}>
215189
<CIListItem
216190
type="artifact"
217191
ciPipelineId={ciPipelineId}
@@ -239,30 +213,49 @@ const Artifacts = ({
239213
</div>
240214
</div>
241215
</CIListItem>
216+
{blobStorageEnabled &&
217+
downloadArtifactUrl &&
218+
(type === HistoryComponentType.CD || isArtifactUploaded || isJobView) && (
219+
<CIListItem
220+
type="report"
221+
hideImageTaggingHardDelete={hideImageTaggingHardDelete}
222+
isSuperAdmin={isSuperAdmin}
223+
renderCIListHeader={renderCIListHeader}
224+
>
225+
<div className="flex column left">
226+
<div className="cn-9 fs-14">Reports.zip</div>
227+
<button
228+
type="button"
229+
onClick={handleArtifact}
230+
className="anchor p-0 cb-5 fs-12 flex left pointer"
231+
>
232+
Download
233+
<Download className="ml-5 icon-dim-16" />
234+
</button>
235+
</div>
236+
</CIListItem>
237+
)}
238+
</div>
239+
{!blobStorageEnabled && (
240+
<div className="flexbox dc__position-abs-b-20 dc__content-center w-100">
241+
<div className="flexbox pt-8 pr-12 pb-8 pl-12 bcv-1 ev-2 bw-1 br-4">
242+
<ICHelpOutline className="icon-dim-20 fcv-5" />
243+
<span className="fs-13 fw-4 mr-8 ml-8">
244+
{EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.StoreFiles}
245+
</span>
246+
<a
247+
className="fs-13 fw-6 cb-5 dc__no-decor"
248+
href={DOCUMENTATION.BLOB_STORAGE}
249+
target="_blank"
250+
rel="noreferrer"
251+
>
252+
{EMPTY_STATE_STATUS.ARTIFACTS_EMPTY_STATE_TEXTS.ConfigureBlobStorage}
253+
</a>
254+
<OpenInNew className="icon-dim-20 ml-8" />
255+
</div>
256+
</div>
242257
)}
243-
{blobStorageEnabled &&
244-
downloadArtifactUrl &&
245-
(type === HistoryComponentType.CD || isArtifactUploaded || isJobView) && (
246-
<CIListItem
247-
type="report"
248-
hideImageTaggingHardDelete={hideImageTaggingHardDelete}
249-
isSuperAdmin={isSuperAdmin}
250-
renderCIListHeader={renderCIListHeader}
251-
>
252-
<div className="flex column left">
253-
<div className="cn-9 fs-14">Reports.zip</div>
254-
<button
255-
type="button"
256-
onClick={handleArtifact}
257-
className="anchor p-0 cb-5 fs-12 flex left pointer"
258-
>
259-
Download
260-
<Download className="ml-5 icon-dim-16" />
261-
</button>
262-
</div>
263-
</CIListItem>
264-
)}
265-
</div>
258+
</>
266259
)
267260
}
268261

0 commit comments

Comments
 (0)