Skip to content

Commit 67d8895

Browse files
shivani170shivani170
authored
Merge pull request #733 from devtron-labs/feat/doc-utm-source
chore: doc link component added
2 parents 359d795 + bb3d3d3 commit 67d8895

File tree

37 files changed

+373
-147
lines changed

37 files changed

+373
-147
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": "1.13.0-pre-9",
3+
"version": "1.14.0-pre-0",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/IconV2/ic-terminal.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Assets/IconV2/ic-thermometer.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/Common/Constants.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,6 @@ export const DEVTRON_HOME_PAGE = 'https://devtron.ai/'
2222
export const DOCUMENTATION_VERSION = '/v/v0.7'
2323
export const DISCORD_LINK = 'https://discord.devtron.ai/'
2424
export const DEFAULT_JSON_SCHEMA_URI = 'https://json-schema.org/draft/2020-12/schema'
25-
export const DOCUMENTATION = {
26-
APP_METRICS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/app-details/app-metrics`,
27-
APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
28-
APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
29-
BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
30-
GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
31-
ENTERPRISE_LICENSE: `${DOCUMENTATION_HOME_PAGE}/enterprise-license`,
32-
KUBE_CONFIG: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/resource-browser#running-kubectl-commands-locally`,
33-
TENANT_INSTALLATION: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/software-distribution-hub/tenants`,
34-
}
3525

3626
export const PATTERNS = {
3727
STRING: /^[a-zA-Z0-9_]+$/,

‎src/Common/CustomTagSelector/PropagateTagInfo.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,10 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react'
1817
import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
1918
import { ReactComponent as ICHelpOutline } from '../../Assets/Icon/ic-help-outline.svg'
2019
import { TippyCustomized } from '../TippyCustomized'
2120
import { TippyTheme } from '../Types'
22-
import { DOCUMENTATION } from '../Constants'
2321

2422
export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
2523
const additionalInfo = () => (
@@ -47,7 +45,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
4745
showCloseButton
4846
trigger="click"
4947
interactive
50-
documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
48+
documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}
5149
documentationLinkText="View Documentation"
5250
>
5351
<div className="flexbox cursor">

‎src/Common/SegmentedBarChart/SegmentedBarChart.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types'
2323
import './styles.scss'
2424

2525
const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
26+
hideLegend,
2627
entities: userEntities = [FALLBACK_ENTITY],
2728
rootClassName,
2829
countClassName,
@@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
3637
const total = entities.reduce((sum, entity) => entity.value + sum, 0)
3738
const filteredEntities = entities.filter((entity) => !!entity.value)
3839

39-
const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
40+
const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%`
4041

4142
const renderLabel = (label: Entity['label']) =>
4243
isLoading ? (
@@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
8889
))
8990
}
9091

91-
const renderLegend = () => (
92-
<div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
93-
{renderContent()}
94-
</div>
95-
)
92+
const renderLegend = () => {
93+
if (hideLegend) {
94+
return null
95+
}
96+
97+
return (
98+
<div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
99+
{renderContent()}
100+
</div>
101+
)
102+
}
96103

97104
const renderBar = () => (
98105
<motion.div
@@ -112,7 +119,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
112119
className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
113120
index === map.length - 1 ? 'dc__right-radius-4' : ''
114121
} ${isLoading ? 'shimmer' : ''}`}
115-
style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
122+
style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }}
116123
/>
117124
))}
118125
</motion.div>

‎src/Common/SegmentedBarChart/types.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,22 @@ export type Entity = {
2020
value: number
2121
}
2222

23-
export interface SegmentedBarChartProps {
24-
entities: NonNullable<Entity[]>
23+
type EntityPropType =
24+
| {
25+
hideLegend?: false
26+
entities: NonNullable<Entity[]>
27+
}
28+
| {
29+
hideLegend: true
30+
entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
31+
}
32+
33+
export type SegmentedBarChartProps = {
2534
rootClassName?: string
2635
countClassName?: string
2736
labelClassName?: string
2837
isProportional?: boolean
2938
swapLegendAndBar?: boolean
3039
showAnimationOnBar?: boolean
3140
isLoading?: boolean
32-
}
41+
} & EntityPropType

‎src/Common/TippyCustomized.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ import Tippy from '@tippyjs/react'
1919
import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
2020
import { ReactComponent as Help } from '../Assets/Icon/ic-help.svg'
2121
import { ReactComponent as ICHelpOutline } from '../Assets/Icon/ic-help-outline.svg'
22-
import { ReactComponent as ICOpenInNew } from '../Assets/Icon/ic-open-in-new.svg'
2322
import 'tippy.js/animations/shift-toward-subtle.css'
2423
import 'tippy.js/animations/shift-toward.css'
2524
import { TippyCustomizedProps, TippyTheme } from './Types'
2625
import { not, stopPropagation } from './Helper'
26+
import { DocLink } from '../Shared/DocLink'
2727

2828
// This component will handle some of the new tippy designs and interactions
2929
// So this can be updated to support further for new features or interactions
30-
export const TippyCustomized = (props: TippyCustomizedProps) => {
30+
export const TippyCustomized = <T extends boolean = false>(props: TippyCustomizedProps<T>) => {
3131
const tippyRef = useRef(null)
3232
const [showHeadingInfo, setShowHeadingInfo] = useState(false)
3333
const isWhiteTheme = props.theme === TippyTheme.white
@@ -79,6 +79,8 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
7979
additionalContent,
8080
documentationLink,
8181
documentationLinkText,
82+
isEnterprise,
83+
isExternalLink,
8284
} = props
8385
return (
8486
<>
@@ -156,17 +158,16 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
156158
)}
157159
{additionalContent}
158160
{documentationLink && (
159-
<div className="pl-12 pb-12">
160-
<a
161-
href={documentationLink}
162-
target="_blank"
163-
rel="noreferrer noopener"
164-
className="fs-13 cb-5 flex left"
161+
<div className="px-12 pb-12 flexbox">
162+
<DocLink
163+
text={documentationLinkText}
164+
dataTestId="learn-more-about-tippy-link"
165+
showExternalIcon
165166
onClick={closeTippy}
166-
>
167-
{documentationLinkText || 'Learn more'}
168-
<ICOpenInNew className="icon-dim-14 ml-4 scb-5" />
169-
</a>
167+
isEnterprise={isEnterprise}
168+
isExternalLink={isExternalLink}
169+
docLinkKey={documentationLink}
170+
/>
170171
</div>
171172
)}
172173
</>

‎src/Common/Types.ts‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
ACTION_STATE,
3434
DEPLOYMENT_WINDOW_TYPE,
3535
DockerConfigOverrideType,
36+
DOCUMENTATION,
3637
RefVariableType,
3738
SortingOrder,
3839
TaskErrorObj,
@@ -119,52 +120,60 @@ export interface CheckboxProps {
119120
children?: ReactNode
120121
}
121122

122-
export interface TippyCustomizedProps extends Pick<TippyProps, 'appendTo'> {
123-
theme: TippyTheme
124-
visible?: boolean
125-
heading?: ReactNode | string
126-
headingInfo?: ReactNode | string
127-
noHeadingBorder?: boolean
128-
infoTextHeading?: string
129-
hideHeading?: boolean
130-
placement?: TippyProps['placement']
131-
className?: string
132-
Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
133-
iconPath?: string
134-
iconClass?: string
135-
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-`).
136-
onImageLoadError?: (e) => void
137-
onClose?: () => void
138-
infoText?: React.ReactNode
139-
showCloseButton?: boolean
140-
arrow?: boolean
141-
interactive?: boolean
142-
showOnCreate?: boolean
143-
trigger?: string
144-
animation?: string
145-
duration?: number
146-
additionalContent?: ReactNode
147-
documentationLink?: string
148-
documentationLinkText?: string
149-
children: React.ReactElement<any>
150-
disableClose?: boolean
151-
}
152-
153-
export interface InfoIconTippyProps
123+
export type TippyWithBaseDocLinkTypes<T extends boolean> = {
124+
isExternalLink?: T
125+
isEnterprise?: boolean
126+
documentationLink?: T extends true ? string : keyof typeof DOCUMENTATION
127+
}
128+
129+
export type TippyCustomizedProps<T extends boolean> = Pick<TippyProps, 'appendTo'> &
130+
TippyWithBaseDocLinkTypes<T> & {
131+
theme: TippyTheme
132+
visible?: boolean
133+
heading?: ReactNode | string
134+
headingInfo?: ReactNode | string
135+
noHeadingBorder?: boolean
136+
infoTextHeading?: string
137+
hideHeading?: boolean
138+
placement?: TippyProps['placement']
139+
className?: string
140+
Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
141+
iconPath?: string
142+
iconClass?: string
143+
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-`).
144+
onImageLoadError?: (e) => void
145+
onClose?: () => void
146+
infoText?: React.ReactNode
147+
showCloseButton?: boolean
148+
arrow?: boolean
149+
interactive?: boolean
150+
showOnCreate?: boolean
151+
trigger?: string
152+
animation?: string
153+
duration?: number
154+
additionalContent?: ReactNode
155+
documentationLinkText?: string
156+
children: React.ReactElement<any>
157+
disableClose?: boolean
158+
}
159+
160+
export interface InfoIconTippyProps<T extends boolean = false>
154161
extends Pick<
155-
TippyCustomizedProps,
162+
TippyCustomizedProps<T>,
156163
| 'heading'
157164
| 'infoText'
158165
| 'iconClass'
159-
| 'documentationLink'
160166
| 'documentationLinkText'
161167
| 'additionalContent'
162168
| 'placement'
163169
| 'Icon'
164170
| 'headingInfo'
171+
| 'documentationLink'
172+
| 'isEnterprise'
173+
| 'isExternalLink'
165174
> {
166175
dataTestid?: string
167-
children?: TippyCustomizedProps['children']
176+
children?: TippyCustomizedProps<T>['children']
168177
iconClassName?: string
169178
buttonPadding?: string
170179
}

0 commit comments

Comments
 (0)