Skip to content

Commit 37093cf

Browse files
arunjaindevarunjaindev
committed
Merge branch 'release-candidate-v0.21.0' of https://github.com/devtron-labs/devtron-fe-common-lib into chore/versio-bump
2 parents bf6aa40 + 6ca8ab0 commit 37093cf

File tree

6 files changed

+116
-22
lines changed

6 files changed

+116
-22
lines changed

‎src/Assets/Icon/ic-caret-down-small.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,14 @@
1616

1717
import { useState } from 'react'
1818
import { useHistory, useLocation, useParams } from 'react-router-dom'
19-
import { Modal, SERVER_MODE, URLS } from '../../../../Common'
19+
import Button from '@Shared/Components/Button/Button.component'
20+
import { ReactComponent as DropDown } from '@Icons/ic-caret-down-small.svg'
21+
import { ReactComponent as ChartIcon } from '@Icons/ic-charts.svg'
22+
import { ReactComponent as AddIcon } from '@Icons/ic-add.svg'
23+
import { ReactComponent as JobIcon } from '@Icons/ic-k8s-job.svg'
2024
import PageHeader from '../PageHeader'
21-
import { ReactComponent as DropDown } from '../../../../Assets/Icon/ic-dropdown-filled.svg'
22-
import { ReactComponent as ChartIcon } from '../../../../Assets/Icon/ic-charts.svg'
23-
import { ReactComponent as AddIcon } from '../../../../Assets/Icon/ic-add.svg'
24-
import { ReactComponent as JobIcon } from '../../../../Assets/Icon/ic-k8s-job.svg'
25-
import { AppListConstants } from '../../../constants'
25+
import { Modal, SERVER_MODE, URLS } from '../../../../Common'
26+
import { AppListConstants, ComponentSizeType } from '../../../constants'
2627
import './HeaderWithCreateButton.scss'
2728
import { useMainContext } from '../../../Providers'
2829

@@ -56,23 +57,28 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
5657

5758
const renderActionButtons = () =>
5859
serverMode === SERVER_MODE.FULL ? (
59-
<button
60-
type="button"
61-
className="flex cta h-32 lh-n"
60+
<Button
61+
text="Create"
6262
onClick={handleCreateButton}
63-
data-testid="create-app-button-on-header"
64-
>
65-
Create
66-
<DropDown className="icon-dim-20" />
67-
</button>
63+
dataTestId="create-app-button-on-header"
64+
endIcon={<DropDown className="icon-dim-20" />}
65+
size={ComponentSizeType.small}
66+
/>
6867
) : (
69-
<button type="button" className="flex cta h-32 lh-n" onClick={redirectToHelmAppDiscover}>
70-
Deploy helm charts
71-
</button>
68+
<Button
69+
text="Deploy helm charts"
70+
onClick={redirectToHelmAppDiscover}
71+
dataTestId="deploy-helm-chart-on-header"
72+
size={ComponentSizeType.small}
73+
/>
7274
)
7375

7476
const renderCreateSelectionModal = () => (
75-
<Modal rootClassName="create-modal-wrapper" onClick={handleCreateButton}>
77+
<Modal
78+
rootClassName={`create-modal-wrapper
79+
${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
80+
onClick={handleCreateButton}
81+
>
7682
<div
7783
className="create-modal-child cursor"
7884
onClick={openCreateDevtronAppModel}

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButton.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,8 @@
3232
background-color: var(--N100);
3333
}
3434
}
35+
36+
&--try-devtron {
37+
right: 84px !important;
38+
}
3539
}

‎src/Shared/Components/Header/IframePromoButton.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { GenericEmptyState, VisibleModal } from '@Common/index'
2+
import { ComponentSizeType } from '@Shared/constants'
3+
import { useState, useCallback } from 'react'
4+
import { ReactComponent as Close } from '@Icons/ic-close.svg'
5+
import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
6+
7+
export const IframePromoButton = () => {
8+
const [showEmbeddedIframeModal, setEmbeddedIframeModal] = useState(false)
9+
10+
const {
11+
FEATURE_PROMO_EMBEDDED_BUTTON_TEXT,
12+
FEATURE_PROMO_EMBEDDED_MODAL_TITLE,
13+
FEATURE_PROMO_EMBEDDED_IFRAME_URL,
14+
} = window._env_
15+
16+
const onClickShowIframeModal = useCallback(() => setEmbeddedIframeModal(true), [])
17+
const onClickCloseIframeModal = useCallback(() => setEmbeddedIframeModal(false), [])
18+
19+
const renderIframeDrawer = () => (
20+
<VisibleModal close={onClickCloseIframeModal}>
21+
<div className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100">
22+
<div className="trigger-modal__header w-100">
23+
<h1 className="modal__title flex left fs-16 fw-6-imp" data-testid="app-details-url-heading">
24+
{FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
25+
</h1>
26+
<Button
27+
ariaLabel="promo-header-button"
28+
dataTestId="iframe-modal-close-button"
29+
size={ComponentSizeType.small}
30+
onClick={onClickCloseIframeModal}
31+
style={ButtonStyleType.negativeGrey}
32+
variant={ButtonVariantType.borderLess}
33+
icon={<Close />}
34+
showAriaLabelInTippy={false}
35+
/>
36+
</div>
37+
{FEATURE_PROMO_EMBEDDED_IFRAME_URL ? (
38+
<iframe
39+
title={FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
40+
src={FEATURE_PROMO_EMBEDDED_IFRAME_URL}
41+
width="100%"
42+
height="100%"
43+
className="dc__no-border"
44+
sandbox="allow-same-origin allow-scripts"
45+
referrerPolicy="no-referrer"
46+
/>
47+
) : (
48+
<div className="flex h-100">
49+
<GenericEmptyState
50+
title="Nothing to show"
51+
subTitle="An iframe appears here in a parallel universe"
52+
/>
53+
</div>
54+
)}
55+
</div>
56+
</VisibleModal>
57+
)
58+
59+
return (
60+
<div>
61+
{FEATURE_PROMO_EMBEDDED_BUTTON_TEXT && (
62+
<Button
63+
dataTestId="iframe-header-button"
64+
size={ComponentSizeType.small}
65+
onClick={onClickShowIframeModal}
66+
text={FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
67+
variant={ButtonVariantType.secondary}
68+
/>
69+
)}
70+
{showEmbeddedIframeModal && renderIframeDrawer()}
71+
</div>
72+
)
73+
}

‎src/Shared/Components/Header/PageHeader.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-
3232
import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
3333
import { useMainContext, useUserEmail } from '../../Providers'
3434
import { InfoIconTippy } from '../InfoIconTippy'
35+
import { IframePromoButton } from './IframePromoButton'
3536

3637
const PageHeader = ({
3738
headerName,
@@ -121,8 +122,8 @@ const PageHeader = ({
121122

122123
const renderLogoutHelpSection = () => (
123124
<>
124-
<div className="flex left cursor mr-16" onClick={onClickHelp}>
125-
<span className="icon-dim-24 fcn-9 mr-4 ml-16">
125+
<div className="flex left cursor dc__gap-8" onClick={onClickHelp}>
126+
<span className="icon-dim-24 fcn-9">
126127
<Question />
127128
</span>
128129
<span className="fs-13 cn-9" data-testid="go-to-get-started">
@@ -156,6 +157,8 @@ const PageHeader = ({
156157
<span className="fs-12 fw-4 lh-18 pt-1 pb-1 pl-6 pr-6 ml-8 cn-9 bcy-5 br-4">Beta</span>
157158
)
158159

160+
const renderIframeButton = () => <IframePromoButton />
161+
159162
return (
160163
<div
161164
className={`dc__page-header dc__content-space cn-9 bcn-0 pl-20 pr-20 ${
@@ -220,7 +223,8 @@ const PageHeader = ({
220223
{markAsBeta && renderBetaTag()}
221224
</div>
222225
{showTabs && (
223-
<div className="flex left">
226+
<div className="flex left dc__gap-12">
227+
{renderIframeButton()}
224228
{typeof renderActionButtons === 'function' && renderActionButtons()}
225229
{renderLogoutHelpSection()}
226230
</div>
@@ -258,8 +262,9 @@ const PageHeader = ({
258262
/>
259263
)}
260264
{!showTabs && (
261-
<div className="flex left">
265+
<div className="flex left dc__gap-12">
262266
{typeof renderActionButtons === 'function' && renderActionButtons()}
267+
{renderIframeButton()}
263268
{renderLogoutHelpSection()}
264269
</div>
265270
)}

‎src/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ export interface customEnv {
7676
SYSTEM_CONTROLLER_LISTING_TIMEOUT?: number
7777
FEATURE_STEP_WISE_LOGS_ENABLE?: boolean
7878
FEATURE_IMAGE_PROMOTION_ENABLE?: boolean
79+
FEATURE_PROMO_EMBEDDED_BUTTON_TEXT?: string
80+
FEATURE_PROMO_EMBEDDED_MODAL_TITLE?: string
81+
FEATURE_PROMO_EMBEDDED_IFRAME_URL?: string
7982
}
8083
declare global {
8184
interface Window {

0 commit comments

Comments
 (0)