Skip to content

Commit ef72519

Browse files
Ash-expAsh-exp
committed
Merge branch 'main' into feat-ci-job-plugin
2 parents a8fe5a2 + bb37638 commit ef72519

35 files changed

+1195
-85
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react-csv": "^2.2.2",
3232
"react-dates": "^21.8.0",
3333
"react-dom": "^17.0.2",
34+
"react-draggable": "^4.4.5",
3435
"react-ga4": "^1.4.1",
3536
"react-gtm-module": "^2.0.11",
3637
"react-keybind": "^0.9.4",

‎src/assets/icons/ic-variable.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/CIPipelineN/CIPipeline.tsx‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { useState, useEffect, useMemo, useRef } from 'react'
22
import { NavLink } from 'react-router-dom'
33
import { Redirect, Route, Switch, useParams, useRouteMatch, useLocation } from 'react-router'
4-
import { ButtonWithLoader, importComponentFromFELibrary, sortObjectArrayAlphabetically } from '../common'
4+
import {
5+
ButtonWithLoader,
6+
FloatingVariablesSuggestions,
7+
importComponentFromFELibrary,
8+
sortObjectArrayAlphabetically,
9+
} from '../common'
510
import {
611
ServerErrors,
712
showError,
@@ -37,7 +42,7 @@ import {
3742
import { toast } from 'react-toastify'
3843
import { ValidationRules } from '../ciPipeline/validationRules'
3944
import { CIBuildType, CIPipelineBuildType, CIPipelineDataType, CIPipelineType } from '../ciPipeline/types'
40-
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
45+
import { ReactComponent as Close } from '../../assets/icons/ic-cross.svg'
4146
import Tippy from '@tippyjs/react'
4247
import { PreBuild } from './PreBuild'
4348
import { Sidebar } from './Sidebar'
@@ -201,6 +206,7 @@ export default function CIPipeline({
201206
list.push({
202207
id: 0,
203208
clusterName: '',
209+
clusterId: null,
204210
name: DEFAULT_ENV,
205211
active: false,
206212
isClusterActive: false,
@@ -211,6 +217,7 @@ export default function CIPipeline({
211217
list.push({
212218
id: env.id,
213219
clusterName: env.cluster_name,
220+
clusterId: env.cluster_id,
214221
name: env.environment_name,
215222
active: false,
216223
isClusterActive: env.isClusterActive,
@@ -524,7 +531,7 @@ export default function CIPipeline({
524531
}
525532

526533
let _ciPipeline = ciPipeline
527-
if(selectedEnv && selectedEnv.id !== 0) {
534+
if (selectedEnv && selectedEnv.id !== 0) {
528535
_ciPipeline.environmentId = selectedEnv.id
529536
} else {
530537
_ciPipeline.environmentId = undefined
@@ -712,6 +719,7 @@ export default function CIPipeline({
712719
<h2 className="fs-16 fw-6 lh-1-43 m-0" data-testid="build-pipeline-heading">
713720
{title}
714721
</h2>
722+
715723
<button
716724
type="button"
717725
className="dc__transparent flex icon-dim-24"
@@ -722,6 +730,7 @@ export default function CIPipeline({
722730
<Close className="icon-dim-24" />
723731
</button>
724732
</div>
733+
725734
{isAdvanced && (
726735
<ul className="ml-20 tab-list w-90">
727736
{isJobCard ? (
@@ -739,9 +748,7 @@ export default function CIPipeline({
739748
</ul>
740749
)}
741750
<hr className="divider m-0" />
742-
<pipelineContext.Provider
743-
value={contextValue}
744-
>
751+
<pipelineContext.Provider value={contextValue}>
745752
<div className={`ci-pipeline-advance ${isAdvanced ? 'pipeline-container' : ''}`}>
746753
{isAdvanced && (
747754
<div className="sidebar-container">
@@ -829,10 +836,31 @@ export default function CIPipeline({
829836
)
830837
}
831838

839+
const renderFloatingVariablesWidget = () => {
840+
if (!window._env_.ENABLE_SCOPED_VARIABLES || activeStageName === BuildStageVariable.Build) return <></>
841+
842+
return (
843+
<div className="flexbox">
844+
<div className="floating-scoped-variables-widget">
845+
<FloatingVariablesSuggestions
846+
zIndex={21}
847+
appId={appId}
848+
envId={selectedEnv?.id ? String(selectedEnv.id) : null}
849+
clusterId={selectedEnv?.clusterId}
850+
/>
851+
</div>
852+
</div>
853+
)
854+
}
855+
832856
return ciPipelineId || isAdvanced ? (
833-
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
834-
{renderCIPipelineModal()}
835-
</Drawer>
857+
<>
858+
{renderFloatingVariablesWidget()}
859+
860+
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
861+
{renderCIPipelineModal()}
862+
</Drawer>
863+
</>
836864
) : (
837865
<VisibleModal className="">{renderCIPipelineModal()}</VisibleModal>
838866
)

‎src/components/ClusterNodes/ClusterSelectionList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export default function ClusterSelectionList({
145145
/>
146146
</div>
147147
<div>
148-
{errorCount > 0 ? (
148+
{clusterData.errorInNodeListing ? (
149149
<Tippy className="default-tt w-200" arrow={false} content={clusterData.errorInNodeListing}>
150150
<div className="flexbox">
151151
<Error className="mt-2 mb-2 mr-8 icon-dim-18" />

‎src/components/app/details/appConfig/appConfig.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,17 @@
3939

4040
&.config-protection__side-nav {
4141
grid-template-rows: 110px repeat(6, 32px) 54px 32px 1fr auto;
42-
&.hide-external-links {
43-
grid-template-rows: 110px repeat(6, 32px) 16px 32px 1fr auto;
44-
}
45-
&.hide-app-config-help {
46-
grid-template-rows: repeat(6, 32px) 54px 32px 1fr auto;
47-
42+
4843
&.hide-external-links {
49-
grid-template-rows: repeat(6, 32px) 16px 32px 1fr auto;
44+
grid-template-rows: 110px repeat(6, 32px) 54px 1fr auto;
5045
}
46+
47+
&.hide-app-config-help {
48+
grid-template-rows: repeat(6, 32px) 54px 32px 1fr auto;
49+
50+
&.hide-external-links {
51+
grid-template-rows: repeat(6, 32px) 54px 1fr auto;
52+
}
5153
}
5254
}
5355

‎src/components/app/list-new/HelmAppList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@ export default function HelmAppList({
403403
<span className="app-list__cell-header flex cursor" onClick={sortByLastDeployed}>
404404
{APP_LIST_HEADERS.LastDeployedAt}
405405
{sortBy == SortBy.LAST_DEPLOYED ? (
406-
<span className={`sort ${sortOrder == OrderBy.DESC ? 'sort-up' : ''} ml-4`}></span>
406+
<span className={`sort ${sortOrder == OrderBy.ASC ? 'sort-up' : ''} ml-4`}></span>
407407
) : (
408408
<span className="sort-col dc__opacity-0_5 ml-4"></span>
409409
)}

‎src/components/cdPipeline/NewCDPipeline.tsx‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
1717
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
1818
import { NavLink, Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router-dom'
1919
import { CDDeploymentTabText, DELETE_ACTION, SourceTypeMap, TriggerType, ViewType } from '../../config'
20-
import { ButtonWithLoader, sortObjectArrayAlphabetically } from '../common'
20+
import { ButtonWithLoader, FloatingVariablesSuggestions, sortObjectArrayAlphabetically } from '../common'
2121
import BuildCD from './BuildCD'
2222
import { CD_PATCH_ACTION, Environment, GeneratedHelmPush } from './cdPipeline.types'
2323
import {
@@ -122,6 +122,7 @@ export default function NewCDPipeline({
122122
isClusterCdActive: false,
123123
deploymentAppCreated: false,
124124
clusterName: '',
125+
clusterId: null,
125126
runPreStageInEnv: false,
126127
runPostStageInEnv: false,
127128
allowedDeploymentTypes: [],
@@ -253,6 +254,7 @@ export default function NewCDPipeline({
253254
list = list.map((env) => {
254255
return {
255256
id: env.id,
257+
clusterId: env.cluster_id,
256258
clusterName: env.cluster_name,
257259
name: env.environment_name,
258260
namespace: env.namespace || '',
@@ -326,7 +328,10 @@ export default function NewCDPipeline({
326328
validateStage(BuildStageVariable.PostBuild, result.form)
327329
setIsAdvanced(true)
328330
setIsVirtualEnvironment(pipelineConfigFromRes.isVirtualEnvironment)
329-
setFormData(form)
331+
setFormData({
332+
...form,
333+
clusterId: result.form?.clusterId,
334+
})
330335
setPageState(ViewType.FORM)
331336
})
332337
.catch((error: ServerErrors) => {
@@ -1105,10 +1110,31 @@ export default function NewCDPipeline({
11051110
)
11061111
}
11071112

1113+
const renderFloatingVariablesWidget = () => {
1114+
if (!window._env_.ENABLE_SCOPED_VARIABLES || activeStageName === BuildStageVariable.Build) return <></>
1115+
1116+
return (
1117+
<div className="flexbox">
1118+
<div className="floating-scoped-variables-widget">
1119+
<FloatingVariablesSuggestions
1120+
zIndex={21}
1121+
appId={appId}
1122+
envId={formData?.environmentId ? String(formData.environmentId) : null}
1123+
clusterId={formData?.clusterId}
1124+
/>
1125+
</div>
1126+
</div>
1127+
)
1128+
}
1129+
11081130
return cdPipelineId || isAdvanced ? (
1109-
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
1110-
{renderCDPipelineModal()}
1111-
</Drawer>
1131+
<>
1132+
{renderFloatingVariablesWidget()}
1133+
1134+
<Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
1135+
{renderCDPipelineModal()}
1136+
</Drawer>
1137+
</>
11121138
) : (
11131139
<VisibleModal className="">{renderCDPipelineModal()}</VisibleModal>
11141140
)

‎src/components/cdPipeline/cdPipeline.service.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,16 @@ export async function getCDPipelineConfig(appId: string, pipelineId: string): Pr
5858
active: envId == env.id,
5959
isClusterCdActive: env.isClusterCdActive,
6060
allowedDeploymentTypes: env.allowedDeploymentTypes || [],
61+
clusterId: env.cluster_id,
6162
}
6263
});
6364

64-
let env = environments.find((e) => e.id === cdPipeline.environmentId)
65+
const env = environments.find((e) => e.id === cdPipeline.environmentId)
6566

6667
const form = {
6768
name: cdPipeline.name,
6869
environmentId: cdPipeline.environmentId,
70+
clusterId: env.clusterId,
6971
namespace: env.namespace,
7072
triggerType: cdPipeline.isManual ? TriggerType.Manual : TriggerType.Auto,
7173
preBuildStage: cdPipeline.preDeployStage || { id: 0, triggerType: TriggerType.Auto, steps: [] },

‎src/components/cdPipeline/cdPipeline.types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export interface Environment {
5454
namespace: string
5555
active: boolean
5656
clusterName: string
57+
clusterId: string
5758
isClusterCdActive: boolean
5859
isVirtualEnvironment?: boolean
5960
allowedDeploymentTypes?: DeploymentAppTypes[]
@@ -215,6 +216,7 @@ export interface CDFormType {
215216
}
216217
isClusterCdActive: boolean
217218
deploymentAppCreated: boolean,
219+
clusterId: string,
218220
clusterName: string
219221
runPreStageInEnv: boolean,
220222
runPostStageInEnv: boolean,

‎src/components/common/ClipboardButton/ClipboardButton.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState, useEffect, useCallback } from 'react'
2+
import Tippy from '@tippyjs/react'
3+
import { copyToClipboard } from '../helpers/Helpers'
4+
import ClipboardProps from './types'
5+
import { ReactComponent as ICCopy } from '../../../assets/icons/ic-copy.svg'
6+
7+
/**
8+
* @param content - Content to be copied
9+
* @param copiedTippyText - Text to be shown in the tippy when the content is copied
10+
* @param duration - Duration for which the tippy should be shown
11+
* @param trigger - To trigger the copy action, if set to true the content will be copied, use case being triggering the copy action from outside the component
12+
* @param setTrigger - Callback function to set the trigger
13+
*/
14+
export default function ClipboardButton({ content, copiedTippyText, duration, trigger, setTrigger }: ClipboardProps) {
15+
const [copied, setCopied] = useState<boolean>(false)
16+
const [enableTippy, setEnableTippy] = useState<boolean>(false)
17+
18+
const handleTextCopied = () => setCopied(true)
19+
const handleEnableTippy = () => setEnableTippy(true)
20+
const handleDisableTippy = () => setEnableTippy(false)
21+
const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
22+
23+
useEffect(() => {
24+
if (!copied) return
25+
26+
const timeout = setTimeout(() => {
27+
setCopied(false)
28+
setTrigger(false)
29+
}, duration)
30+
31+
return () => clearTimeout(timeout)
32+
}, [copied, duration, setTrigger])
33+
34+
useEffect(() => {
35+
if (!trigger) return
36+
37+
setCopied(true)
38+
handleCopyContent()
39+
}, [trigger, handleCopyContent])
40+
41+
return (
42+
<div className="icon-dim-16 flex center">
43+
<Tippy
44+
className="default-tt"
45+
content={copied ? copiedTippyText : 'Copy'}
46+
placement="right"
47+
visible={copied || enableTippy}
48+
>
49+
<button
50+
type="button"
51+
className="dc__hover-n100 dc__outline-none-imp p-0 flex bcn-0 dc__no-border"
52+
onMouseEnter={handleEnableTippy}
53+
onMouseLeave={handleDisableTippy}
54+
onClick={handleCopyContent}
55+
>
56+
<ICCopy className="icon-dim-16" />
57+
</button>
58+
</Tippy>
59+
</div>
60+
)
61+
}

0 commit comments

Comments
 (0)