Skip to content

Commit 1cc252c

Browse files
authored
Merge pull request #217 from devtron-labs/chore/doc-link
chore: Feature description added for basic title & Doc Link
2 parents 1ba41aa + 5554b6e commit 1cc252c

File tree

8 files changed

+57
-16
lines changed

8 files changed

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

src/Common/Constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const DOCUMENTATION = {
2626
APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
2727
APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
2828
BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
29+
GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
2930
}
3031

3132
export const PATTERNS = {

src/Common/Types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export interface TippyCustomizedProps {
100100
iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
101101
onImageLoadError?: (e) => void
102102
onClose?: () => void
103-
infoText?: string
103+
infoText?: React.ReactNode
104104
showCloseButton?: boolean
105105
arrow?: boolean
106106
interactive?: boolean

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { DescriptorProps } from './types'
18-
import { BreadCrumb } from '../../../Common'
18+
import { BreadCrumb, DOCUMENTATION } from '../../../Common'
1919
import { BUILD_INFRA_TEXT } from './constants'
2020
import { InfoIconTippy } from '../../../Shared'
2121

@@ -34,7 +34,9 @@ const Descriptor = ({
3434
infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
3535
additionalContent={tippyAdditionalContent}
3636
heading={BUILD_INFRA_TEXT.HEADING}
37-
iconClassName="icon-dim-20"
37+
documentationLink={DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA}
38+
documentationLinkText="View Documentation"
39+
iconClassName="icon-dim-20 fcn-6"
3840
/>
3941
</div>
4042

src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const FeatureDescriptionModal = ({
6161
>
6262
{docLink.length > 0 && (
6363
<a
64-
className="flex dc__link en-2 bw-1 dc__gap-6 br-4 fw-6 lh-20 px-8 py-6 h-32"
64+
className="flex dc__link en-2 bw-1 dc__gap-6 br-4 fw-6 lh-20 px-8 py-6 h-32 anchor dc__hover-n50"
6565
href={docLink}
6666
target="_blank"
6767
rel="noreferrer"

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,22 @@ import { DescriptorProps } from './types'
1919
import { ReactComponent as ICHelpOutline } from '../../../Assets/Icon/ic-help-outline.svg'
2020
import { BreadCrumb } from '../../../Common'
2121
import { FeatureDescriptionModal } from './FeatureDescriptionModal'
22+
import { InfoIconTippy } from '../InfoIconTippy'
2223

2324
const FeatureTitleWithInfo = ({
2425
additionalContainerClasses,
25-
breadCrumbs,
26+
breadCrumbs = [],
2627
children,
27-
iconClassName,
28+
iconClassName = 'icon-dim-20 fcn-6',
2829
title,
2930
renderDescriptionContent,
3031
closeModalText,
3132
docLink,
3233
SVGImage,
34+
showInfoIconTippy,
35+
docLinkText = 'View Documentation',
36+
dataTestId = 'feature-title-with-info',
37+
additionalContent,
3338
}: DescriptorProps) => {
3439
const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
3540
const onClickInfoIcon = () => {
@@ -39,16 +44,44 @@ const FeatureTitleWithInfo = ({
3944
const closeModal = () => {
4045
setShowFeatureDescriptionModal(false)
4146
}
42-
return (
43-
<>
44-
<div
45-
className={`feature-description flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}
46-
>
47+
48+
const renderTitle = () => {
49+
if (showInfoIconTippy) {
50+
return (
51+
<div className="flex left fs-16 cn-9 fw-6 dc__gap-4">
52+
<span data-testid={dataTestId} className="lh-32">
53+
{title}
54+
</span>
55+
<InfoIconTippy
56+
heading={title}
57+
infoText={renderDescriptionContent()}
58+
additionalContent={additionalContent}
59+
iconClassName={iconClassName}
60+
documentationLink={docLink}
61+
documentationLinkText={docLinkText}
62+
dataTestid="info-tippy-button"
63+
/>
64+
</div>
65+
)
66+
}
67+
if (breadCrumbs?.length > 0) {
68+
return (
4769
<div className="flexbox dc__align-items-center dc__gap-4">
4870
<BreadCrumb breadcrumbs={breadCrumbs} />
4971
<ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
5072
</div>
73+
)
74+
}
5175

76+
return <span className="fs-16 fw-6 cn-9 lh-32">{title}</span>
77+
}
78+
79+
return (
80+
<>
81+
<div
82+
className={`feature-description flexbox dc__content-space dc__align-items-center ${additionalContainerClasses ?? ''}`}
83+
>
84+
{renderTitle()}
5285
{children}
5386
</div>
5487
{showFeatureDescriptionModal && (

src/Shared/Components/FeatureDescription/types.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@
1414
* limitations under the License.
1515
*/
1616

17+
import React, { ReactNode } from 'react'
1718
import { ImageType } from '../../../Common'
1819
import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
1920

2021
export interface FeatureDescriptionModalProps {
2122
title: string
22-
renderDescriptionContent?: () => JSX.Element
23+
renderDescriptionContent?: () => ReactNode
2324
closeModalText?: string
2425
docLink?: string
2526
closeModal?: () => void
@@ -29,8 +30,12 @@ export interface FeatureDescriptionModalProps {
2930
}
3031

3132
export interface DescriptorProps extends FeatureDescriptionModalProps {
32-
breadCrumbs: Breadcrumb[]
33+
breadCrumbs?: Breadcrumb[]
3334
additionalContainerClasses?: string
3435
iconClassName?: string
3536
children?: React.ReactNode
37+
showInfoIconTippy?: boolean
38+
docLinkText?: string
39+
dataTestId?: string
40+
additionalContent?: ReactNode
3641
}

0 commit comments

Comments
 (0)