Skip to content

Commit e1a2c87

Browse files
randhir-devtronrandhir-devtron
authored
Merge pull request #114 from devtron-labs/tippyinfo-fe-common-lib
chore: extract a new component infoicontippy from TippyCustomized
2 parents 90b99a1 + 23c76c9 commit e1a2c87

File tree

12 files changed

+92
-55
lines changed

12 files changed

+92
-55
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.0.76",
3+
"version": "0.0.77",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-help-outline.svg

Lines changed: 2 additions & 2 deletions
Loading

‎src/Common/CustomTagSelector/PropagateTagInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
3-
import { ReactComponent as Help } from '../../Assets/Icon/ic-help-outline.svg'
3+
import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
44
import { TippyCustomized } from '../TippyCustomized'
55
import { TippyTheme } from '../Types'
66
import { DOCUMENTATION } from '../Constants'
@@ -37,7 +37,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
3737
<div className="flexbox cursor">
3838
<InjectTag className="icon-dim-16 mt-2 mr-4" />
3939
<span>Propagate tags</span>
40-
<Help className="icon-dim-16 mt-2 ml-4" />
40+
<ICHelpOutline className="icon-dim-16 mt-2 ml-4" />
4141
</div>
4242
</TippyCustomized>
4343
)

‎src/Common/CustomTagSelector/TagLabelSelect.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react'
21
import PropagateTagInfo from './PropagateTagInfo'
32
import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
43
import { DEFAULT_TAG_DATA } from '../Constants'

‎src/Common/ImageTags.tsx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
1-
import React, { useEffect, useMemo, useRef, useState } from 'react'
1+
import { useEffect, useRef, useState } from 'react'
22
import { toast } from 'react-toastify'
33
import Tippy from '@tippyjs/react'
44
import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
55
import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
6-
import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
7-
import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
8-
96
import { ReactComponent as EditIcon } from '../Assets/Icon/ic-pencil.svg'
107
import { ReactComponent as Redo } from '../Assets/Icon/ic-arrow-counter-clockwise.svg'
118
import { ReactComponent as Minus } from '../Assets/Icon/ic-minus.svg'
129
import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
1310
import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
1411
import { ReactComponent as Warning } from '../Assets/Icon/ic-error-exclamation.svg'
1512
import { ReactComponent as Enter } from '../Assets/Icon/ic-enter.svg'
16-
import { TippyTheme } from './Types'
1713
import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageTags.Types'
1814
import { showError, stopPropagation } from './Helper'
19-
import { TippyCustomized } from './TippyCustomized'
2015
import { setImageTags } from './Common.service'
2116
import { Progressing } from './Progressing'
17+
import { InfoIconTippy } from '../Shared'
2218

2319
export const ImageTagsContainer = ({
2420
// Setting it to zero in case of external pipeline
@@ -257,21 +253,11 @@ export const ImageTagsContainer = ({
257253
}
258254

259255
const renderInfoCard = (): JSX.Element => (
260-
<TippyCustomized
261-
theme={TippyTheme.white}
262-
className="w-300 fcv-5"
263-
placement="right"
264-
Icon={QuestionFilled}
256+
<InfoIconTippy
265257
heading="Release tags"
266-
showCloseButton
267-
trigger="click"
268-
interactive
269258
additionalContent={getBuildContextAdditionalContent()}
270-
>
271-
<div className="flex">
272-
<Question className="fcn-5 ml-8 cursor icon-dim-16" />
273-
</div>
274-
</TippyCustomized>
259+
iconClassName="fcn-5 ml-4 icon-dim-16"
260+
/>
275261
)
276262

277263
const getBuildContextAdditionalContent = () => (

‎src/Common/TippyCustomized.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useRef, useState } from 'react'
22
import Tippy from '@tippyjs/react'
33
import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
4-
import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
5-
import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
4+
import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
5+
import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg'
66
import 'tippy.js/animations/shift-toward-subtle.css'
77
import { TippyCustomizedProps, TippyTheme } from './Types'
88
import { not, stopPropagation } from './Helper'
@@ -63,7 +63,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
6363
<>
6464
{!hideHeading && (
6565
<div
66-
className={`dc__word-break dc__hyphens-auto flex left ${
66+
className={`dc__word-break dc__hyphens-auto flex dc__align-start left ${
6767
isWhiteTheme
6868
? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
6969
: 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
@@ -84,11 +84,11 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
8484
)
8585
)}
8686
{heading && (
87-
<span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>
87+
<span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-12' : ''}`}>{heading}</span>
8888
)}
8989
{headingInfo && (
9090
<div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
91-
<Question className="icon-dim-20" />
91+
<ICHelpOutline className="icon-dim-20" />
9292
</div>
9393
)}
9494
{showCloseButton && (
@@ -108,7 +108,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
108108
}`}
109109
>
110110
<div className="icon-dim-20 mr-8">
111-
<QuestionFilled className="icon-dim-20 fcv-5" />
111+
<Help className="icon-dim-20 fcv-5" />
112112
</div>
113113
<div className="dc__word-break dc__hyphens-auto">{headingInfo}</div>
114114
</div>

‎src/Common/Types.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export interface TippyCustomizedProps {
7474
noHeadingBorder?: boolean
7575
infoTextHeading?: string
7676
hideHeading?: boolean
77-
placement: Placement
77+
placement?: Placement
7878
className?: string
7979
Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
8080
iconPath?: string
@@ -95,6 +95,25 @@ export interface TippyCustomizedProps {
9595
documentationLinkText?: string
9696
children: React.ReactElement<any>
9797
}
98+
99+
export interface InfoIconTippyProps
100+
extends Pick<
101+
TippyCustomizedProps,
102+
| 'heading'
103+
| 'infoText'
104+
| 'iconClass'
105+
| 'documentationLink'
106+
| 'documentationLinkText'
107+
| 'additionalContent'
108+
| 'placement'
109+
| 'Icon'
110+
| 'headingInfo'
111+
> {
112+
dataTestid?: string
113+
children?: TippyCustomizedProps['children']
114+
iconClassName?: string
115+
}
116+
98117
export interface GenericEmptyStateType {
99118
title: ReactNode
100119
image?

‎src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { DescriptorProps } from './types'
2-
import { BreadCrumb, TippyCustomized, TippyTheme } from '../../../Common'
3-
import { ReactComponent as QuestionFilled } from '../../../Assets/Icon/ic-help.svg'
4-
import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
2+
import { BreadCrumb } from '../../../Common'
53
import { BUILD_INFRA_TEXT } from './constants'
4+
import { InfoIconTippy } from '../../../Shared'
65

76
const Descriptor = ({
87
additionalContainerClasses,
@@ -15,27 +14,12 @@ const Descriptor = ({
1514
<div className="flexbox dc__align-items-center dc__gap-4">
1615
<BreadCrumb breadcrumbs={breadCrumbs} />
1716

18-
<TippyCustomized
19-
theme={TippyTheme.white}
20-
className="w-300 h-100 dc__align-left"
21-
placement="right"
22-
Icon={QuestionFilled}
23-
iconClass="fcv-5"
17+
<InfoIconTippy
2418
infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
2519
additionalContent={tippyAdditionalContent}
2620
heading={BUILD_INFRA_TEXT.HEADING}
27-
showCloseButton
28-
trigger="click"
29-
interactive
30-
>
31-
<button
32-
className="p-0 h-20 dc__no-background dc__no-border dc__tab-focus"
33-
type="button"
34-
aria-label="build-infra-info"
35-
>
36-
<ICHelpOutline className="icon-dim-20" />
37-
</button>
38-
</TippyCustomized>
21+
iconClassName="icon-dim-20"
22+
/>
3923
</div>
4024

4125
{children}

‎src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { TippyCustomized } from '../../../Common/TippyCustomized'
2+
import { TippyTheme, InfoIconTippyProps } from '../../../Common/Types'
3+
import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
4+
import { ReactComponent as HelpIcon } from '../../../Assets/Icon/ic-help.svg'
5+
6+
const InfoIconTippy = ({
7+
heading,
8+
infoText,
9+
iconClass = 'fcv-5',
10+
documentationLink,
11+
documentationLinkText,
12+
additionalContent,
13+
iconClassName = 'icon-dim-16',
14+
placement = 'bottom',
15+
dataTestid = 'info-tippy-button',
16+
children,
17+
}: InfoIconTippyProps) => (
18+
<TippyCustomized
19+
theme={TippyTheme.white}
20+
className="w-300 h-100 dc__no-text-transform"
21+
placement={placement}
22+
Icon={HelpIcon}
23+
heading={heading}
24+
infoText={infoText}
25+
iconClass={iconClass}
26+
showCloseButton
27+
trigger="click"
28+
interactive
29+
documentationLink={documentationLink}
30+
documentationLinkText={documentationLinkText}
31+
additionalContent={additionalContent}
32+
>
33+
{children || (
34+
<button
35+
type="button"
36+
className="p-0 dc__no-background dc__no-border dc__outline-none-imp flex dc__tab-focus"
37+
aria-label="Info Icon"
38+
data-testid={dataTestid}
39+
>
40+
<ICHelpOutline className={iconClassName} />
41+
</button>
42+
)}
43+
</TippyCustomized>
44+
)
45+
46+
export default InfoIconTippy

0 commit comments

Comments
 (0)