Skip to content

Commit bfb6af5

Browse files
shivani170shivani170
authored
Merge pull request #2749 from devtron-labs/feat/info-block-v2
feat: replacement of info block in chart diff view
2 parents 54ad6bd + eb8d04a commit bfb6af5

File tree

13 files changed

+156
-171
lines changed

13 files changed

+156
-171
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-0",
7+
"@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-1",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,12 +194,13 @@ export const ConfigMapSecretDryRun = ({
194194
areScopeVariablesResolving={areScopeVariablesResolving}
195195
fallbackMergeStrategy={DEFAULT_MERGE_STRATEGY}
196196
/>
197-
{renderExternalInfo(
198-
dryRunConfigMapSecretData.externalType,
199-
dryRunConfigMapSecretData.external,
200-
componentType,
201-
'mr-16 ml-16',
202-
)}
197+
<div className="ml-16 mr-16">
198+
{renderExternalInfo(
199+
dryRunConfigMapSecretData.externalType,
200+
dryRunConfigMapSecretData.external,
201+
componentType,
202+
)}
203+
</div>
203204
</>
204205
)
205206
}

‎src/Pages/Shared/ConfigMapSecret/helpers.tsx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,8 @@ import {
2323
DocLink,
2424
Icon,
2525
InfoBlock,
26-
InfoColourBar,
2726
} from '@devtron-labs/devtron-fe-common-lib'
2827

29-
import { ReactComponent as InfoIcon } from '@Icons/info-filled.svg'
3028
import { URLS } from '@Config/routes'
3129

3230
import { EXTERNAL_INFO_TEXT } from './constants'
@@ -54,20 +52,12 @@ export const renderExternalInfo = (
5452
externalType: CMSecretExternalType,
5553
external: boolean,
5654
componentType: CMSecretComponentType,
57-
className?: string,
5855
) =>
5956
externalType === CMSecretExternalType.KubernetesSecret ||
6057
(componentType === CMSecretComponentType.ConfigMap && external) ? (
61-
<InfoColourBar
62-
classname={`info_bar ${className || ''}`}
63-
message={
64-
<div className="flex column left">
65-
<h4 className="m-0 lh-20 dc__info-title">{EXTERNAL_INFO_TEXT[componentType].title}</h4>
66-
<p className="m-0 lh-20 dc__info-subtitle">{EXTERNAL_INFO_TEXT[componentType].infoText}</p>
67-
</div>
68-
}
69-
Icon={InfoIcon}
70-
iconSize={20}
58+
<InfoBlock
59+
heading={EXTERNAL_INFO_TEXT[componentType].title}
60+
description={EXTERNAL_INFO_TEXT[componentType].infoText}
7161
/>
7262
) : null
7363

‎src/components/cdPipeline/BuildCD.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { useContext, useState } from 'react'
1818
import {
1919
CustomInput,
2020
DeploymentAppTypes,
21-
InfoColourBar,
2221
Progressing,
2322
TippyCustomized,
2423
TippyTheme,

‎src/components/ciConfig/CIContainerRegistryConfig.tsx

Lines changed: 11 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,21 @@
1515
*/
1616

1717
import { useState } from 'react'
18-
import { generatePath, Link, NavLink } from 'react-router-dom'
1918
import {
2019
ComponentSizeType,
2120
CustomInput,
2221
Icon,
23-
InfoColourBar,
2422
REGISTRY_TYPE_MAP,
2523
RegistryIcon,
2624
SelectPicker,
27-
URLS as CommonURLs,
2825
ButtonVariantType,
2926
ButtonComponentType,
3027
} from '@devtron-labs/devtron-fe-common-lib'
31-
import { ReactComponent as ArrowIcon } from '../../assets/icons/ic-arrow-left.svg'
32-
import { ReactComponent as InfoIcon } from '../../assets/icons/info-filled.svg'
33-
import { Routes, URLS } from '../../config'
28+
import { URLS } from '../../config'
3429
import { _multiSelectStyles } from './CIConfig.utils'
3530
import { CIContainerRegistryConfigProps } from './types'
3631
import { DockerConfigOverrideKeys } from '../ciPipeline/types'
32+
import { CIContainerRegistryInfoBlock } from './CIContainerRegistryInfoBlock'
3733

3834
export default function CIContainerRegistryConfig({
3935
appId,
@@ -70,47 +66,6 @@ export default function CIContainerRegistryConfig({
7066
}
7167
}
7268

73-
const getInfoColourBarProps = () => {
74-
if (configOverridenPipelines?.length > 0) {
75-
return {
76-
message: (
77-
<>
78-
<span className="fw-6">Overrides:</span>&nbsp;
79-
<span className="mr-4">This configuration is overridden for build pipeline of</span>
80-
</>
81-
),
82-
linkText: (
83-
<span className="flex">
84-
{`${configOverridenPipelines.length} Workflow${configOverridenPipelines.length > 1 ? 's' : ''}`}
85-
<ArrowIcon className="icon-dim-16 fcb-5 dc__flip-180" />
86-
</span>
87-
),
88-
linkClass: 'flex left',
89-
linkOnClick: toggleConfigOverrideDiffModal,
90-
}
91-
}
92-
return {
93-
message: (
94-
<>
95-
<span className="fw-6">Overrides:</span>&nbsp;
96-
<span className="mr-8">
97-
Container registry & docker file location for build pipelines can be overridden.
98-
</span>
99-
{isCDPipeline && (
100-
<Link
101-
to={`${isTemplateView ? generatePath(CommonURLs.GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL, {
102-
appId,
103-
}) : `/${Routes.APP}/${appId}`}/${Routes.WORKFLOW_EDITOR}`}
104-
onClick={onClickRedirectLink}
105-
>
106-
Take me there
107-
</Link>
108-
)}
109-
</>
110-
),
111-
}
112-
}
113-
11469
const handleRegistryChange = (selectedRegistry): void => {
11570
setSelectedRegistry(selectedRegistry)
11671
registry.value = selectedRegistry.id
@@ -208,14 +163,16 @@ export default function CIContainerRegistryConfig({
208163
)}
209164
</div>
210165
</div>
211-
{!isCreateAppView && !configOverrideView && (
212-
<InfoColourBar
213-
classname="info_bar"
214-
Icon={InfoIcon}
215-
iconClass="icon-dim-20"
216-
{...getInfoColourBarProps()}
166+
{!isCreateAppView && !configOverrideView ? (
167+
<CIContainerRegistryInfoBlock
168+
configOverriddenPipelines={configOverridenPipelines}
169+
toggleConfigOverrideDiffModal={toggleConfigOverrideDiffModal}
170+
isCDPipeline={isCDPipeline}
171+
isTemplateView={isTemplateView}
172+
appId={appId}
173+
onClickRedirectLink={onClickRedirectLink}
217174
/>
218-
)}
175+
) : null}
219176
</div>
220177
)
221178
}

‎src/components/ciConfig/CIContainerRegistryInfoBlock.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { generatePath, Link } from 'react-router-dom'
2+
3+
import { Button, ButtonVariantType, InfoBlock, URLS } from '@devtron-labs/devtron-fe-common-lib'
4+
5+
import { Routes } from '@Config/constants'
6+
7+
import { ReactComponent as ArrowIcon } from '../../assets/icons/ic-arrow-left.svg'
8+
import { CIContainerRegistryInfoBlockProps } from './types'
9+
10+
export const CIContainerRegistryInfoBlock = ({
11+
configOverriddenPipelines,
12+
toggleConfigOverrideDiffModal,
13+
isCDPipeline,
14+
isTemplateView,
15+
appId,
16+
onClickRedirectLink,
17+
}: CIContainerRegistryInfoBlockProps) => {
18+
const configOverriddenPipelineCount = configOverriddenPipelines?.length
19+
20+
return (
21+
<InfoBlock
22+
description={
23+
configOverriddenPipelineCount > 0 ? (
24+
<div className="flexbox">
25+
<span className="fw-6">Overrides:</span>&nbsp;
26+
<span className="mr-4">This configuration is overridden for build pipeline of</span>
27+
<Button
28+
onClick={toggleConfigOverrideDiffModal}
29+
dataTestId="info-bar-redirectLink"
30+
variant={ButtonVariantType.text}
31+
endIcon={<ArrowIcon className="icon-dim-16 fcb-5 dc__flip-180" />}
32+
text={`${configOverriddenPipelineCount} Workflow${configOverriddenPipelineCount > 1 ? 's' : ''}`}
33+
/>
34+
</div>
35+
) : (
36+
<div className="flexbox">
37+
<span className="fw-6">Overrides:</span>&nbsp;
38+
<span>Container registry & docker file location for build pipelines can be overridden.</span>
39+
&nbsp;
40+
{isCDPipeline && (
41+
<Link
42+
to={`${
43+
isTemplateView
44+
? generatePath(URLS.GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL, {
45+
appId,
46+
})
47+
: `/${Routes.APP}/${appId}`
48+
}/${Routes.WORKFLOW_EDITOR}`}
49+
onClick={onClickRedirectLink}
50+
>
51+
Take me there
52+
</Link>
53+
)}
54+
</div>
55+
)
56+
}
57+
/>
58+
)
59+
}

‎src/components/ciConfig/types.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -473,3 +473,12 @@ export interface GetCIPipelineModalURLType {
473473
ciNode: CommonNodeAttr
474474
workflowId: number
475475
}
476+
477+
export interface CIContainerRegistryInfoBlockProps {
478+
configOverriddenPipelines: CiPipeline[]
479+
toggleConfigOverrideDiffModal: () => void
480+
isCDPipeline: boolean
481+
isTemplateView: boolean
482+
appId: string
483+
onClickRedirectLink: (e) => void
484+
}

‎src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx

Lines changed: 31 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
showError,
2020
Progressing,
2121
Drawer,
22-
InfoColourBar,
2322
Reload,
2423
copyToClipboard,
2524
CustomInput,
@@ -44,7 +43,6 @@ import Tippy from '@tippyjs/react'
4443
import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
4544
import { ReactComponent as Help } from '../../../assets/icons/ic-help.svg'
4645
import { ReactComponent as ICHelpOutline } from '../../../assets/icons/ic-help-outline.svg'
47-
import { ReactComponent as InfoIcon } from '../../../assets/icons/info-filled.svg'
4846
import { ReactComponent as Add } from '../../../assets/icons/ic-add.svg'
4947
import { ReactComponent as PlayButton } from '../../../assets/icons/ic-play.svg'
5048
import { ReactComponent as Tag } from '../../../assets/icons/ic-tag.svg'
@@ -311,21 +309,6 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
311309
setShowTokenSection(true)
312310
}
313311

314-
const renderActionButton = (): JSX.Element => {
315-
if (generateTokenLoader) {
316-
return (
317-
<div className="w-120">
318-
<Progressing />
319-
</div>
320-
)
321-
}
322-
return (
323-
<span className="cb-5 cursor top fw-6" onClick={generateToken}>
324-
Generate token
325-
</span>
326-
)
327-
}
328-
329312
const renderWebhookURLContainer = (): JSX.Element => {
330313
return (
331314
<div className="flexbox dc__content-space mb-16">
@@ -444,7 +427,7 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
444427

445428
const renderGenerateTokenSection = (): JSX.Element => {
446429
return (
447-
<div>
430+
<div className="flexbox-col dc__gap-16">
448431
<div className="mt-16">
449432
<CustomInput
450433
placeholder="Enter token name"
@@ -454,16 +437,18 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
454437
onChange={handleTokenNameChange}
455438
disabled={!!generatedAPIToken}
456439
error={showTokenNameError && GENERATE_TOKEN_NAME_VALIDATION}
440+
helperText="An API token with the required permissions will be auto-generated."
457441
/>
458442
{generatedAPIToken && renderSelectedToken('Generated', generatedAPIToken)}
459443
</div>
460444
{!generatedAPIToken && (
461-
<InfoColourBar
462-
message="An API token with the required permissions will be auto-generated."
463-
classname="info_bar mt-16"
464-
Icon={InfoIcon}
465-
iconClass="h-20"
466-
renderActionButton={renderActionButton}
445+
<Button
446+
dataTestId="generate-token"
447+
variant={ButtonVariantType.secondary}
448+
size={ComponentSizeType.medium}
449+
onClick={generateToken}
450+
text="Generate token"
451+
isLoading={generateTokenLoader}
467452
/>
468453
)}
469454
</div>
@@ -482,11 +467,14 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
482467
)
483468
}
484469
return !showTokenSection ? (
485-
<div className="cb-5 fs-13 mt-16 pointer" onClick={toggleTokenSection}>
486-
Select or auto-generate token with required permissions
487-
</div>
470+
<Button
471+
dataTestId="select-or-generate-token"
472+
variant={ButtonVariantType.text}
473+
onClick={toggleTokenSection}
474+
text="Select or auto-generate token with required permissions"
475+
/>
488476
) : (
489-
<div className="mt-16">
477+
<div>
490478
{generateTabHeader(TOKEN_TAB_LIST, selectedTokenTab, setSelectedTokenTab)}
491479
{selectedTokenTab === TOKEN_TAB_LIST[0].key && renderSelectTokenSection()}
492480
{selectedTokenTab === TOKEN_TAB_LIST[1].key && renderGenerateTokenSection()}
@@ -716,20 +704,22 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
716704

717705
const renderTokenPermissionSection = (): JSX.Element | null => {
718706
return (
719-
<div className="bg__primary p-16 mb-16 br-4 bw-1 en-2">
707+
<div className="bg__primary p-16 mb-16 br-4 bw-1 en-2 flexbox-col dc__gap-16">
720708
<InfoBlock description="Authentication via API token is required to allow requests from an external service." />
721-
<div className="fw-6 fs-13 cn-9 pb-16">Use API token with below permissions in the cURL request</div>
722-
<div className="permission-row dc__border-bottom pt-8 pb-8">
723-
<span>Project</span>
724-
<span>Environment</span>
725-
<span>Application</span>
726-
<span>Role</span>
727-
</div>
728-
<div className="permission-row pt-8 pb-8">
729-
<span>{webhookDetails?.projectName}</span>
730-
<span>{webhookDetails?.environmentName}</span>
731-
<span>{webhookDetails?.appName}</span>
732-
<span>{webhookDetails?.role}</span>
709+
<div className="fw-6 fs-13 cn-9">Use API token with below permissions in the cURL request</div>
710+
<div>
711+
<div className="permission-row dc__border-bottom pt-8 pb-8">
712+
<span>Project</span>
713+
<span>Environment</span>
714+
<span>Application</span>
715+
<span>Role</span>
716+
</div>
717+
<div className="permission-row pt-8 pb-8">
718+
<span>{webhookDetails?.projectName}</span>
719+
<span>{webhookDetails?.environmentName}</span>
720+
<span>{webhookDetails?.appName}</span>
721+
<span>{webhookDetails?.role}</span>
722+
</div>
733723
</div>
734724
{renderTokenSection()}
735725
</div>

‎src/components/v2/appDetails/sourceInfo/rotatePods/RotatePodsModal.component.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
Progressing,
2121
Checkbox,
2222
Drawer,
23-
InfoColourBar,
2423
CHECKBOX_VALUE,
2524
MODAL_TYPE,
2625
ToastManager,

0 commit comments

Comments
 (0)