feat: about devtron dialog

src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx

@@ -0,0 +1,75 @@
+import ReactGA from 'react-ga4'
+
+import DevtronCopyright from '@Common/DevtronCopyright'
+import { EULA_LINK, PRIVACY_POLICY_LINK, TERMS_OF_USE_LINK } from '@Shared/constants'
+import { useMainContext } from '@Shared/Providers'
+
+import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
+import { InstallationType } from '../Header/types'
+import { Icon } from '../Icon'
+
+const AboutDevtronBody = () => {
+    const { currentServerInfo } = useMainContext()
+
+    const currentVersion = currentServerInfo?.serverInfo?.currentVersion
+    const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
+
+    const handleEULAClick = () => {
+        ReactGA.event({
+            category: 'about-devtron',
+            action: 'ABOUT_DEVTRON_LICENSE_AGREEMENT_CLICKED',
+        })
+    }
+
+    return (
+        <div className="flexbox-col p-32 dc__gap-24 br-16 border__secondary bg__secondary">
+            <div className="flexbox-col dc__align-items-center dc__gap-16 text-center">
+                <div className="flex p-6 border__primary br-8">
+                    <Icon name="ic-devtron" color="B500" size={40} />
+                </div>
+                <div>
+                    <p className="fs-16 cn-9 fw-6 lh-1-5 m-0">Devtron</p>
+                    <p className="fs-13 cn-7 fw-4 lh-20 m-0">{`${isEnterprise ? 'Enterprise' : 'OSS'} Version${currentVersion ? `(${currentVersion})` : ''}`}</p>
+                </div>
+                <DevtronCopyright />
+            </div>
+            <div className="flexbox flex-wrap dc__content-center dc__gap-4">
+                <Button
+                    dataTestId="terms-of-service"
+                    text="Terms of service"
+                    variant={ButtonVariantType.text}
+                    style={ButtonStyleType.neutral}
+                    component={ButtonComponentType.anchor}
+                    anchorProps={{
+                        href: TERMS_OF_USE_LINK,
+                    }}
+                />
+                <span>•</span>
+                <Button
+                    dataTestId="privacy-policy"
+                    text="Privacy policy"
+                    variant={ButtonVariantType.text}
+                    style={ButtonStyleType.neutral}
+                    component={ButtonComponentType.anchor}
+                    anchorProps={{
+                        href: PRIVACY_POLICY_LINK,
+                    }}
+                />
+                <span>•</span>
+                <Button
+                    dataTestId="license-agreement"
+                    text="End-User License agreement"
+                    variant={ButtonVariantType.text}
+                    style={ButtonStyleType.neutral}
+                    onClick={handleEULAClick}
+                    component={ButtonComponentType.anchor}
+                    anchorProps={{
+                        href: EULA_LINK,
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default AboutDevtronBody

src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx

@@ -0,0 +1,25 @@
+import { ComponentSizeType } from '@Shared/constants'
+
+import { Backdrop } from '../Backdrop'
+import { Button } from '../Button'
+import AboutDevtronBody from './AboutDevtronBody'
+
+const AboutDevtronDialog = ({ handleCloseLicenseInfoDialog }: { handleCloseLicenseInfoDialog }) => (
+    <Backdrop onEscape={handleCloseLicenseInfoDialog}>
+        <div className="flexbox-col w-400 br-12 bg__primary border__primary dc__m-auto mt-40">
+            <div className="p-24">
+                <AboutDevtronBody />
+            </div>
+            <div className="flex px-24 py-20 dc__content-end">
+                <Button
+                    dataTestId="license-info-okay"
+                    text="Okay"
+                    size={ComponentSizeType.medium}
+                    onClick={handleCloseLicenseInfoDialog}
+                />
+            </div>
+        </div>
+    </Backdrop>
+)
+
+export default AboutDevtronDialog

src/Shared/Components/AboutDevtron/index.tsx

@@ -0,0 +1,2 @@
+export { default as AboutDevtronBody } from './AboutDevtronBody'
+export { default as AboutDevtronDialog } from './AboutDevtronDialog'

src/Shared/Components/Header/HelpNav.tsx

@@ -76,7 +76,7 @@ const HelpNav = ({
         onClickHelpOptions(option)
     }
 
-    const handleOpenLicenseDialog = () => {
+    const handleOpenAboutDevtron = () => {
         ReactGA.event({
             category: 'help-nav__about-devtron',
             action: 'ABOUT_DEVTRON_CLICKED',
@@ -100,23 +100,22 @@ const HelpNav = ({
                         <option.icon />
                         <div className="ml-12 cn-9 fs-14">{option.name}</div>
                     </a>
-                    {/* licenseData is only set when showLicenseData is received true */}
-                    {isEnterprise && index === 1 && (
+                    {index === 1 && (
                         <>
-                            {licenseData && (
-                                <button
-                                    type="button"
-                                    className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
-                                    onClick={handleOpenLicenseDialog}
-                                    data-testid="about-devtron"
-                                >
-                                    <Icon name="ic-devtron" color="N600" size={20} />
-                                    About Devtron
-                                </button>
+                            <button
+                                type="button"
+                                className="dc__transparent help-card__option flexbox dc__align-items-center cn-9 dc__gap-12 fs-14"
+                                onClick={handleOpenAboutDevtron}
+                                data-testid="about-devtron"
+                            >
+                                <Icon name="ic-devtron" color="N600" size={20} />
+                                About Devtron
+                            </button>
+                            {isEnterprise && (
+                                <div className="help__enterprise pl-8 pb-4-imp pt-4-imp dc__gap-12 flexbox dc__align-items-center h-28">
+                                    Enterprise Support
+                                </div>
                             )}
-                            <div className="help__enterprise pl-8 pb-4-imp pt-4-imp dc__gap-12 flexbox dc__align-items-center h-28">
-                                Enterprise Support
-                            </div>
                         </>
                     )}
                 </Fragment>

src/Shared/Components/index.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+export * from './AboutDevtron'
 export * from './ActionMenu'
 export * from './ActivityIndicator'
 export * from './AnimatedDeployButton'

src/Shared/constants.tsx

@@ -538,6 +538,8 @@ export const DC_DELETE_SUBTITLES = {
 
 export const EULA_LINK = 'https://devtron.ai/end-user-license-agreement-eula'
 export const CONTACT_SUPPORT_LINK = 'https://devtron.ai/enterprise-support'
+export const PRIVACY_POLICY_LINK = 'https://devtron.ai/privacy-policy'
+export const TERMS_OF_USE_LINK = 'https://devtron.ai/terms-of-use'
 
 export const enum DeleteComponentsName {
     Cluster = 'cluster',