Skip to content

Commit f9416fd

Browse files
Elessar1802Elessar1802
authored
Merge branch 'main' into feat/input-ref-search-bar
2 parents 0cafb82 + b1aae68 commit f9416fd

38 files changed

+1012
-328
lines changed

‎package-lock.json

Lines changed: 2 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: 1 addition & 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.1.17",
3+
"version": "0.1.20",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-caret-down.svg

Lines changed: 16 additions & 0 deletions
Loading

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

Lines changed: 9 additions & 0 deletions
Loading

‎src/Assets/Icon/ic-exit-fullscreen.svg

Lines changed: 2 additions & 15 deletions
Loading

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

Lines changed: 2 additions & 2 deletions
Loading

‎src/Assets/Icon/ic-in-progress.svg

Lines changed: 10 additions & 0 deletions
Loading

‎src/Common/AppStatus/AppStatus.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,23 @@ export default function AppStatus({
3333
}
3434
const appStatusLowerCase = status?.toLowerCase()
3535
const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
36-
const iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase
36+
const isNotReady = appStatus === StatusConstants.NOT_READY.normalCase
3737
const statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-')
3838
const notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase
3939
const textContent = isNotDeployed ? notDeployed : statusMessage
4040

41+
const getIconClass = () => {
42+
if (isNotDeployed) {
43+
return StatusConstants.NOT_DEPLOYED.lowerCase
44+
}
45+
if (isNotReady) {
46+
return StatusConstants.NOT_READY.lowerCase
47+
}
48+
return appStatusLowerCase
49+
}
50+
51+
const iconClass = getIconClass()
52+
4153
const renderIcon = () => {
4254
if (iconClass) {
4355
return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />

‎src/Common/AppStatus/constants.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ export const StatusConstants = {
2020
normalCase: 'Not deployed',
2121
lowerCase: 'not-deployed',
2222
},
23+
NOT_READY: {
24+
noSpaceLower: 'notready',
25+
normalCase: 'Not Ready',
26+
lowerCase: 'not-ready',
27+
},
2328
APP_STATUS: {
2429
noSpaceLower: 'appStatus',
2530
normalText: 'App status',

‎src/Common/ClipboardButton/ClipboardButton.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { useState, useEffect, useCallback } from 'react'
1818
import Tippy from '@tippyjs/react'
19-
import { copyToClipboard, noop } from '../Helper'
19+
import { copyToClipboard, noop, stopPropagation } from '../Helper'
2020
import ClipboardProps from './types'
2121
import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
2222
import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
@@ -42,10 +42,16 @@ export default function ClipboardButton({
4242
const [copied, setCopied] = useState<boolean>(false)
4343
const [enableTippy, setEnableTippy] = useState<boolean>(false)
4444

45-
const handleTextCopied = () => setCopied(true)
45+
const handleTextCopied = () => {setCopied(true)}
4646
const handleEnableTippy = () => setEnableTippy(true)
4747
const handleDisableTippy = () => setEnableTippy(false)
48-
const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
48+
const handleCopyContent = useCallback(
49+
(e?) => {
50+
if(e) stopPropagation(e)
51+
copyToClipboard(content, handleTextCopied)
52+
},
53+
[content],
54+
)
4955
const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
5056

5157
useEffect(() => {

‎src/Common/SearchBar/SearchBar.component.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
*/
1616

1717
import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
18+
import { ComponentSizeType } from '@Shared/constants'
1819
import { ReactComponent as Search } from '@Icons/ic-search.svg'
1920
import { ReactComponent as Clear } from '@Icons/ic-error-cross.svg'
2021
import { SearchBarProps } from './types'
2122
import './searchBar.scss'
2223
import { debounce } from '../Helper'
24+
import { getSearchBarHeightFromSize } from './utils'
2325

2426
/**
2527
* Generic search input component with support for enter based and debounced search
@@ -65,6 +67,7 @@ const SearchBar = ({
6567
debounceTimeout = 300,
6668
dataTestId = 'search-bar',
6769
noBackgroundAndBorder = false,
70+
size = ComponentSizeType.medium,
6871
}: SearchBarProps) => {
6972
const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
7073
const inputRef = useRef<HTMLInputElement>()
@@ -124,7 +127,7 @@ const SearchBar = ({
124127
return (
125128
<div className={containerClassName}>
126129
<div
127-
className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 h-32`}
130+
className={`search-bar ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bc-n50 en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
128131
>
129132
<Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
130133
<input

‎src/Common/SearchBar/types.ts

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

17+
import { ComponentSizeType } from '@Shared/constants'
18+
1719
export interface SearchBarProps {
1820
/**
1921
* Initial search text
@@ -56,4 +58,10 @@ export interface SearchBarProps {
5658
* Hide the background and border of the search
5759
*/
5860
noBackgroundAndBorder?: boolean
61+
/**
62+
* Height of the searchbar
63+
*
64+
* @default 'ComponentSizeType.medium'
65+
*/
66+
size?: ComponentSizeType.medium | ComponentSizeType.large
5967
}

‎src/Common/SearchBar/utils.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ComponentSizeType } from '@Shared/constants'
2+
import { SearchBarProps } from './types'
3+
4+
export const getSearchBarHeightFromSize = (size: SearchBarProps['size']): string => {
5+
switch (size) {
6+
case ComponentSizeType.large:
7+
return 'h-36'
8+
default:
9+
return 'h-32'
10+
}
11+
}

‎src/Common/Types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -564,6 +564,7 @@ export enum DeploymentAppTypes {
564564
GITOPS = 'argo_cd',
565565
MANIFEST_DOWNLOAD = 'manifest_download',
566566
MANIFEST_PUSH = 'manifest_push',
567+
FLUX = 'flux',
567568
}
568569

569570
export interface VulnerabilityType {

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,14 @@ const ArtifactInfoModal = ({
9797
}}
9898
>
9999
{isArtifactInfoAvailable ? (
100-
<div className="select-material">
100+
<div className="select-material p-16 flexbox-col dc__gap-12">
101101
{artifactInfo.materials.map((material) => (
102-
<MaterialHistory material={material} pipelineName="" key={material.id} />
102+
<MaterialHistory
103+
material={material}
104+
pipelineName=""
105+
key={material.id}
106+
isCommitInfoModal
107+
/>
103108
))}
104109
<div className="dc__dashed_icon_grid-container">
105110
<hr className="dc__dotted-line" />

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export const CIListItem = ({
7070
return (
7171
<>
7272
{type === 'deployed-artifact' && (
73-
<div className="flex mb-12 dc__width-inherit">
73+
<div className="flex dc__width-inherit">
7474
<div className="w-50 text-underline-dashed-300" />
7575
<Down className="icon-dim-16 ml-8 mr-8" style={{ transform: 'rotate(90deg)' }} />
7676
<div className="w-50 text-underline-dashed-300" />
@@ -89,7 +89,7 @@ export const CIListItem = ({
8989
})}
9090

9191
<div
92-
className={`dc__h-fit-content ci-artifact ci-artifact--${type} image-tag-parent-card bcn-0 br-4 dc__border p-12 w-100 dc__mxw-800 ${
92+
className={`dc__h-fit-content ci-artifact image-tag-parent-card bcn-0 br-4 dc__border p-12 w-100 dc__mxw-800 ci-artifact--${type} ${
9393
headerMetaDataPresent && renderCIListHeader ? 'dc__no-top-radius dc__no-top-border' : ''
9494
}`}
9595
data-testid="hover-on-report-artifact"
@@ -215,7 +215,7 @@ const Artifacts = ({
215215
)
216216
}
217217
return (
218-
<div className={`flex left column p-16 ${jobCIClass ?? ''}`}>
218+
<div className={`flex left column dc__gap-12 ${jobCIClass ?? ''}`}>
219219
{!isJobView && type !== HistoryComponentType.CD && (
220220
<CIListItem
221221
type="artifact"

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -136,12 +136,12 @@ export const CiPipelineSourceConfig = ({
136136
<div className={`flex left ${showTooltip ? 'branch-name' : ''}`}>
137137
{loading && showIcons && <span className="dc__loading-dots">loading</span>}
138138
{!loading && (
139-
<>
139+
<div className="flex dc__gap-4">
140140
{showIcons && (
141141
<img
142142
src={_isWebhook ? webhookIcon : isRegexOrBranchIcon}
143143
alt="branch"
144-
className="icon-dim-12 mr-5"
144+
className="icon-dim-12"
145145
/>
146146
)}
147147
{showTooltip && (
@@ -151,7 +151,10 @@ export const CiPipelineSourceConfig = ({
151151
placement="bottom"
152152
content={sourceValueAdv}
153153
>
154-
<div className="flex" style={{ maxWidth: !baseText ? 'calc(100% - 15px)' : 'auto' }}>
154+
<div
155+
className="flex left dc__gap-4"
156+
style={{ maxWidth: !baseText ? 'calc(100% - 15px)' : 'auto' }}
157+
>
155158
{!baseText && (
156159
<>
157160
<div
@@ -162,9 +165,7 @@ export const CiPipelineSourceConfig = ({
162165
{sourceValueBase}
163166
</div>
164167
{sourceValue !== DEFAULT_GIT_BRANCH_VALUE && (
165-
<div className="mt-2">
166-
<Info className="icon-dim-12 fcn-5 ml-4" />
167-
</div>
168+
<Info className="icon-dim-12 fcn-5" />
168169
)}
169170
</>
170171
)}
@@ -177,7 +178,7 @@ export const CiPipelineSourceConfig = ({
177178
</Tippy>
178179
)}
179180
{!showTooltip && <span className="dc__ellipsis-right">{sourceValueAdv}</span>}
180-
</>
181+
</div>
181182
)}
182183
</div>
183184
)

‎src/Shared/Components/CICDHistory/History.components.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import GitCommitInfoGeneric from '../GitCommitInfoGeneric/GitCommitInfoGeneric'
2525
import { CIListItem } from './Artifacts'
2626
import { ReactComponent as ZoomIn } from '../../../Assets/Icon/ic-fullscreen.svg'
2727
import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscreen.svg'
28+
import './cicdHistory.scss'
2829

2930
export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResizeButtonType): JSX.Element => {
3031
const { pathname } = useLocation()
@@ -60,9 +61,9 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
6061
>
6162
<div>
6263
{fullScreenView ? (
63-
<ZoomOut className="zoom zoom--out pointer" onClick={toggleFullScreen} />
64+
<ZoomOut className="zoom zoom--out pointer dc__zi-4" onClick={toggleFullScreen} />
6465
) : (
65-
<ZoomIn className="zoom zoom--in pointer" onClick={toggleFullScreen} />
66+
<ZoomIn className="zoom zoom--in pointer dc__zi-4" onClick={toggleFullScreen} />
6667
)}
6768
</div>
6869
</Tippy>
@@ -71,7 +72,7 @@ export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResize
7172
}
7273

7374
export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
74-
<div style={style} className="dc__element-scroller flex column top">
75+
<div style={style} className="dc__element-scroller flex column top br-4">
7576
<Tippy className="default-tt" arrow={false} content="Scroll to Top">
7677
<button
7778
className="flex"
@@ -130,14 +131,14 @@ export const GitChanges = ({
130131
const extractImageArtifact = extractImage(artifact)
131132

132133
return (
133-
<div className="flex column left w-100 ">
134+
<div className="history-component__wrapper flex column left w-100 p-16 dc__gap-12">
134135
{ciMaterials?.map((ciMaterial, index) => {
135136
const gitTrigger = gitTriggers[ciMaterial.id]
136137
return gitTrigger && (gitTrigger.Commit || gitTrigger.WebhookData?.data) ? (
137138
<div
138139
// eslint-disable-next-line react/no-array-index-key
139140
key={`mat-${gitTrigger?.Commit}-${index}`}
140-
className="bcn-0 pt-12 br-4 en-2 bw-1 pb-12 mt-16 ml-16"
141+
className="bcn-0 br-4 en-2 bw-1"
141142
data-testid="source-code-git-hash"
142143
style={{ width: 'min( 100%, 800px )' }}
143144
>
@@ -160,7 +161,7 @@ export const GitChanges = ({
160161
) : null
161162
})}
162163
{artifact && (
163-
<div className="flex left column mt-16 mb-16 ml-16" style={{ width: 'min( 100%, 800px )' }}>
164+
<div className="history-component__artifact flex left column dc__gap-12">
164165
<CIListItem
165166
type="deployed-artifact"
166167
userApprovalMetadata={userApprovalMetadata}

0 commit comments

Comments
 (0)