feat: try devtron button on header

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.7",
+    "version": "0.5.7-patch-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

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

@@ -16,13 +16,14 @@
 
 import { useState } from 'react'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
-import { Modal, SERVER_MODE, URLS } from '../../../../Common'
+import Button from '@Shared/Components/Button/Button.component'
+import { ReactComponent as DropDown } from '@Icons/ic-caret-down-small.svg'
+import { ReactComponent as ChartIcon } from '@Icons/ic-charts.svg'
+import { ReactComponent as AddIcon } from '@Icons/ic-add.svg'
+import { ReactComponent as JobIcon } from '@Icons/ic-k8s-job.svg'
 import PageHeader from '../PageHeader'
-import { ReactComponent as DropDown } from '../../../../Assets/Icon/ic-dropdown-filled.svg'
-import { ReactComponent as ChartIcon } from '../../../../Assets/Icon/ic-charts.svg'
-import { ReactComponent as AddIcon } from '../../../../Assets/Icon/ic-add.svg'
-import { ReactComponent as JobIcon } from '../../../../Assets/Icon/ic-k8s-job.svg'
-import { AppListConstants } from '../../../constants'
+import { Modal, SERVER_MODE, URLS } from '../../../../Common'
+import { AppListConstants, ComponentSizeType } from '../../../constants'
 import './HeaderWithCreateButton.scss'
 import { useMainContext } from '../../../Providers'
 
@@ -56,23 +57,28 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
 
     const renderActionButtons = () =>
         serverMode === SERVER_MODE.FULL ? (
-            <button
-                type="button"
-                className="flex cta h-32 lh-n"
+            <Button
+                text="Create"
                 onClick={handleCreateButton}
-                data-testid="create-app-button-on-header"
-            >
-                Create
-                <DropDown className="icon-dim-20" />
-            </button>
+                dataTestId="create-app-button-on-header"
+                endIcon={<DropDown className="icon-dim-20" />}
+                size={ComponentSizeType.small}
+            />
         ) : (
-            <button type="button" className="flex cta h-32 lh-n" onClick={redirectToHelmAppDiscover}>
-                Deploy helm charts
-            </button>
+            <Button
+                text="Deploy helm charts"
+                onClick={redirectToHelmAppDiscover}
+                dataTestId="deploy-helm-chart-on-header"
+                size={ComponentSizeType.small}
+            />
         )
 
     const renderCreateSelectionModal = () => (
-        <Modal rootClassName="create-modal-wrapper" onClick={handleCreateButton}>
+        <Modal
+            rootClassName={`create-modal-wrapper
+                ${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
+            onClick={handleCreateButton}
+        >
             <div
                 className="create-modal-child cursor"
                 onClick={openCreateDevtronAppModel}

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

@@ -32,4 +32,8 @@
             background-color: var(--N100);
         }
     }
+
+    &--try-devtron {
+        right: 84px !important;
+    }
 }

src/Shared/Components/Header/IframePromoButton.tsx

@@ -0,0 +1,73 @@
+import { GenericEmptyState, VisibleModal } from '@Common/index'
+import { ComponentSizeType } from '@Shared/constants'
+import { useState, useCallback } from 'react'
+import { ReactComponent as Close } from '@Icons/ic-close.svg'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
+
+export const IframePromoButton = () => {
+    const [showEmbeddedIframeModal, setEmbeddedIframeModal] = useState(false)
+
+    const {
+        FEATURE_PROMO_EMBEDDED_BUTTON_TEXT,
+        FEATURE_PROMO_EMBEDDED_MODAL_TITLE,
+        FEATURE_PROMO_EMBEDDED_IFRAME_URL,
+    } = window._env_
+
+    const onClickShowIframeModal = useCallback(() => setEmbeddedIframeModal(true), [])
+    const onClickCloseIframeModal = useCallback(() => setEmbeddedIframeModal(false), [])
+
+    const renderIframeDrawer = () => (
+        <VisibleModal close={onClickCloseIframeModal}>
+            <div className="modal-body--ci-material h-100 dc__overflow-hidden dc__border-left flex column dc__content-space w-100">
+                <div className="trigger-modal__header w-100">
+                    <h1 className="modal__title flex left fs-16 fw-6-imp" data-testid="app-details-url-heading">
+                        {FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
+                    </h1>
+                    <Button
+                        ariaLabel="promo-header-button"
+                        dataTestId="iframe-modal-close-button"
+                        size={ComponentSizeType.small}
+                        onClick={onClickCloseIframeModal}
+                        style={ButtonStyleType.negativeGrey}
+                        variant={ButtonVariantType.borderLess}
+                        icon={<Close />}
+                        showAriaLabelInTippy={false}
+                    />
+                </div>
+                {FEATURE_PROMO_EMBEDDED_IFRAME_URL ? (
+                    <iframe
+                        title={FEATURE_PROMO_EMBEDDED_MODAL_TITLE || FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
+                        src={FEATURE_PROMO_EMBEDDED_IFRAME_URL}
+                        width="100%"
+                        height="100%"
+                        className="dc__no-border"
+                        sandbox="allow-same-origin allow-scripts"
+                        referrerPolicy="no-referrer"
+                    />
+                ) : (
+                    <div className="flex h-100">
+                        <GenericEmptyState
+                            title="Nothing to show"
+                            subTitle="An iframe appears here in a parallel universe"
+                        />
+                    </div>
+                )}
+            </div>
+        </VisibleModal>
+    )
+
+    return (
+        <div>
+            {FEATURE_PROMO_EMBEDDED_BUTTON_TEXT && (
+                <Button
+                    dataTestId="iframe-header-button"
+                    size={ComponentSizeType.small}
+                    onClick={onClickShowIframeModal}
+                    text={FEATURE_PROMO_EMBEDDED_BUTTON_TEXT}
+                    variant={ButtonVariantType.secondary}
+                />
+            )}
+            {showEmbeddedIframeModal && renderIframeDrawer()}
+        </div>
+    )
+}

src/Shared/Components/Header/PageHeader.tsx

@@ -32,6 +32,7 @@ import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-
 import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
 import { useMainContext, useUserEmail } from '../../Providers'
 import { InfoIconTippy } from '../InfoIconTippy'
+import { IframePromoButton } from './IframePromoButton'
 
 const PageHeader = ({
     headerName,
@@ -121,8 +122,8 @@ const PageHeader = ({
 
     const renderLogoutHelpSection = () => (
         <>
-            <div className="flex left cursor mr-16" onClick={onClickHelp}>
-                <span className="icon-dim-24 fcn-9 mr-4 ml-16">
+            <div className="flex left cursor dc__gap-8" onClick={onClickHelp}>
+                <span className="icon-dim-24 fcn-9">
                     <Question />
                 </span>
                 <span className="fs-13 cn-9" data-testid="go-to-get-started">
@@ -156,6 +157,8 @@ const PageHeader = ({
         <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>
     )
 
+    const renderIframeButton = () => <IframePromoButton />
+
     return (
         <div
             className={`dc__page-header dc__content-space cn-9 bcn-0 pl-20 pr-20 ${
@@ -220,7 +223,8 @@ const PageHeader = ({
                     {markAsBeta && renderBetaTag()}
                 </div>
                 {showTabs && (
-                    <div className="flex left">
+                    <div className="flex left dc__gap-12">
+                        {renderIframeButton()}
                         {typeof renderActionButtons === 'function' && renderActionButtons()}
                         {renderLogoutHelpSection()}
                     </div>
@@ -258,8 +262,9 @@ const PageHeader = ({
                 />
             )}
             {!showTabs && (
-                <div className="flex left">
+                <div className="flex left dc__gap-12">
                     {typeof renderActionButtons === 'function' && renderActionButtons()}
+                    {renderIframeButton()}
                     {renderLogoutHelpSection()}
                 </div>
             )}

src/index.ts

@@ -76,6 +76,9 @@ export interface customEnv {
     SYSTEM_CONTROLLER_LISTING_TIMEOUT?: number
     FEATURE_STEP_WISE_LOGS_ENABLE?: boolean
     FEATURE_IMAGE_PROMOTION_ENABLE?: boolean
+    FEATURE_PROMO_EMBEDDED_BUTTON_TEXT?: string
+    FEATURE_PROMO_EMBEDDED_MODAL_TITLE?: string
+    FEATURE_PROMO_EMBEDDED_IFRAME_URL?: string
 }
 declare global {
     interface Window {