Merge pull request #1594 from devtron-labs/feat/dt-logo-cm

AbhishekA1509 · web-flow · commit 735f9cd5a34f · 2024-01-18T13:47:02.000+05:30
feat: derive devtron logo from cm
diff --git a/.env b/.env
@@ -40,3 +40,5 @@ LOGIN_PAGE_IMAGE_BG=
 HIDE_DEFAULT_CLUSTER=false
 GLOBAL_API_TIMEOUT=60000
 TRIGGER_API_TIMEOUT=60000
+LOGIN_DT_LOGO=
+SIDEBAR_DT_LOGO=
diff --git a/config.md b/config.md
@@ -30,5 +30,7 @@
 | DEFAULT_CI_TRIGGER_TYPE_MANUAL     | "false"    | Change default trigger behaviour of newly created ci-pipeline to manual |
 | GLOBAL_API_TIMEOUT    |  60000  | Default timeout for all API requests in DASHBOARD  |
 | TRIGGER_API_TIMEOUT   |  60000  | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD  |
+| LOGIN_DT_LOGO                      | ""         | Devtron logo for login page     |
+| SIDEBAR_DT_LOGO                    | ""         | Devtron logo for sidebar        |
 
 # DASHBOARD CONFIG SECRET
diff --git a/src/assets/icons/ic-login-dt-with-hat.svg b/src/assets/icons/ic-login-dt-with-hat.svg
diff --git a/src/assets/icons/ic-sidebar-dt-with-hat.svg b/src/assets/icons/ic-sidebar-dt-with-hat.svg
diff --git a/src/components/common/navigation/Navigation.tsx b/src/components/common/navigation/Navigation.tsx
@@ -14,9 +14,8 @@ import { ReactComponent as SecurityIcon } from '../../../assets/icons/ic-nav-sec
 import { ReactComponent as BulkEditIcon } from '../../../assets/icons/ic-nav-code.svg'
 import { ReactComponent as GlobalConfigIcon } from '../../../assets/icons/ic-nav-gear.svg'
 import { ReactComponent as StackManagerIcon } from '../../../assets/icons/ic-nav-stack.svg'
-import { ReactComponent as ChristmasLogo } from '../../../assets/icons/ic-sidebar-dt-with-hat.svg'
-// TODO: Remove after New Year
-// import NavSprite from '../../../assets/icons/navigation-sprite.svg'
+// Fallback Icon
+import NavSprite from '../../../assets/icons/navigation-sprite.svg'
 import TextLogo from '../../../assets/icons/ic-nav-devtron.svg'
 import { Command, CommandErrorBoundary } from '../../command'
 import { ModuleStatus } from '../../v2/devtronStackManager/DevtronStackManager.type'
@@ -336,15 +335,23 @@ export default class Navigation extends Component<
                             }}
                         >
                             <div className="short-nav--flex">
-                                {/* TODO: Uncomment after New Year */}
-                                {/* <svg
-                                    className="devtron-logo"
-                                    data-testid="click-on-devtron-app-logo"
-                                    viewBox="0 0 40 40"
-                                >
-                                    <use href={`${NavSprite}#nav-short-devtron-logo`}></use>
-                                </svg> */}
-                                <ChristmasLogo className="icon-dim-40" />
+                                {window._env_.SIDEBAR_DT_LOGO ? (
+                                    <img
+                                        src={window._env_.SIDEBAR_DT_LOGO}
+                                        alt="devtron"
+                                        className="icon-dim-40"
+                                        width={40}
+                                        height={40}
+                                    />
+                                ): (
+                                    <svg
+                                        className="devtron-logo"
+                                        data-testid="click-on-devtron-app-logo"
+                                        viewBox="0 0 40 40"
+                                    >
+                                        <use href={`${NavSprite}#nav-short-devtron-logo`}></use>
+                                    </svg>
+                                )}
                                 <div className="pl-12">
                                     <img src={TextLogo} alt="devtron" className="devtron-logo devtron-logo--text" />
                                 </div>
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
-// TODO: Enable after New Year
-// import dt from '../../assets/icons/logo/logo-dt.svg'
+import dt from '../../assets/icons/logo/logo-dt.svg'
 import LoginIcons from '../../assets/icons/LoginSprite.svg'
 import { Switch, Redirect, Route, NavLink } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -9,8 +8,6 @@ import { URLS, DOCUMENTATION, TOKEN_COOKIE_NAME, PREVIEW_DEVTRON, PRIVACY_POLICY
 import { LoginProps, LoginFormState } from './login.types'
 import { getSSOConfigList, loginAsAdmin } from './login.service'
 import { dashboardAccessed } from '../../services/service'
-// TODO: remove after New Year
-import { ReactComponent as ChristmasLogo } from '../../assets/icons/ic-login-dt-with-hat.svg'
 import './login.scss'
 
 export default class Login extends Component<LoginProps, LoginFormState> {
@@ -141,10 +138,14 @@ export default class Login extends Component<LoginProps, LoginFormState> {
 
         return (
             <div className="login__control">
-                {/* <img src={dt} alt="login" className="login__dt-logo" width="170px" height="120px" /> */}
-                <div className="flex">
-                    <ChristmasLogo width={170} height={120} className="login__dt-logo"/>
-                </div>
+                <img
+                    src={window._env_.LOGIN_DT_LOGO || dt}
+                    alt="login-dt-logo"
+                    className="login__dt-logo"
+                    width="170px"
+                    height="120px"
+                />
+
                 <p className="login__text">Your tool for Rapid, Reliable & Repeatable deployments</p>
                 {this.state.loginList
                     .filter((sso) => sso.active)
@@ -178,11 +179,13 @@ export default class Login extends Component<LoginProps, LoginFormState> {
 
         return (
             <div className="login__control">
-                {/* TODO: Uncomment after New year */}
-                {/* <img src={dt} alt="login" className="login__dt-logo" width="170px" height="120px" /> */}
-                <div className="flex">
-                    <ChristmasLogo width={170} height={120} className="login__dt-logo"/>
-                </div>
+                <img
+                    src={window._env_.LOGIN_DT_LOGO || dt}
+                    alt="login-dt-logo"
+                    className="login__dt-logo"
+                    width="170px"
+                    height="120px"
+                />
                 <p className="login__text">Your tool for Rapid, Reliable & Repeatable deployments</p>
                 {/* @ts-ignore */}
                 <form className="login-dt__form" autoComplete="on" onSubmit={this.login}>
diff --git a/src/index.tsx b/src/index.tsx
@@ -50,6 +50,8 @@ interface customEnv {
     HIDE_DEFAULT_CLUSTER?: boolean
     GLOBAL_API_TIMEOUT?: number
     TRIGGER_API_TIMEOUT?: number
+    LOGIN_DT_LOGO?: string
+    SIDEBAR_DT_LOGO?: string
 }
 declare global {
     interface Window {
@@ -154,6 +156,8 @@ if (!window || !window._env_) {
         HIDE_DEFAULT_CLUSTER: false,
         GLOBAL_API_TIMEOUT: 60000,
         TRIGGER_API_TIMEOUT: 60000,
+        LOGIN_DT_LOGO: '',
+        SIDEBAR_DT_LOGO: '',
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,8 @@ interface customEnv {`
`50`	`50`	`HIDE_DEFAULT_CLUSTER?: boolean`
`51`	`51`	`GLOBAL_API_TIMEOUT?: number`
`52`	`52`	`TRIGGER_API_TIMEOUT?: number`
	`53`	`+ LOGIN_DT_LOGO?: string`
	`54`	`+ SIDEBAR_DT_LOGO?: string`
`53`	`55`	`}`
`54`	`56`	`declare global {`
`55`	`57`	`interface Window {`
`@@ -154,6 +156,8 @@ if (!window \|\| !window._env_) {`
`154`	`156`	`HIDE_DEFAULT_CLUSTER: false,`
`155`	`157`	`GLOBAL_API_TIMEOUT: 60000,`
`156`	`158`	`TRIGGER_API_TIMEOUT: 60000,`
	`159`	`+ LOGIN_DT_LOGO: '',`
	`160`	`+ SIDEBAR_DT_LOGO: '',`
`157`	`161`	`}`
`158`	`162`	`}`
`159`	`163`