fix for diable env

Author: shivani170

.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=

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

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.53",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.58",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/App.tsx

@@ -17,14 +17,16 @@ import {
     ToastBody,
     ToastBody3 as UpdateToast,
     ErrorBoundary,
+    importComponentFromFELibrary,
 } from './components/common'
-import { showError, BreadcrumbStore, Reload, DevtronProgressing } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, BreadcrumbStore, Reload, DevtronProgressing, APPROVAL_MODAL_TYPE } from '@devtron-labs/devtron-fe-common-lib'
 import * as serviceWorker from './serviceWorker'
 import Hotjar from './components/Hotjar/Hotjar'
 import { validateToken } from './services/service'
 
 const NavigationRoutes = lazy(() => import('./components/common/navigation/NavigationRoutes'))
 const Login = lazy(() => import('./components/login/Login'))
+const GenericDirectApprovalModal = importComponentFromFELibrary('GenericDirectApprovalModal')
 
 toast.configure({
     autoClose: 3000,
@@ -46,9 +48,12 @@ export default function App() {
     const [bgUpdated, setBGUpdated] = useState(false)
     const [validating, setValidating] = useState(true)
     const [forceUpdateOnLocationChange, setForceUpdateOnLocationChange] = useState(false)
+    const [approvalToken, setApprovalToken] = useState<string>('')
+    const [approvalType, setApprovalType] = useState<APPROVAL_MODAL_TYPE>(APPROVAL_MODAL_TYPE.CONFIG)
     const location = useLocation()
     const { push } = useHistory()
     const didMountRef = useRef(false)
+    const isDirectApprovalNotification = location.pathname && location.pathname.includes('approve') && location.search && location.search.includes(`?token=${approvalToken}`)
 
     function onlineToast(toastBody: JSX.Element, options) {
         if (onlineToastRef.current && toast.isActive(onlineToastRef.current)) {
@@ -84,30 +89,52 @@ export default function App() {
         }
     }
 
-    useEffect(() => {
-        async function validation() {
-            try {
-                await validateToken()
-                defaultRedirection()
-            } catch (err: any) {
-                // push to login without breaking search
-                if (err?.code === 401) {
-                    const loginPath = URLS.LOGIN_SSO
-                    const newSearch = location.pathname.includes(URLS.LOGIN_SSO)
-                        ? location.search
-                        : `?continue=${location.pathname}`
-                    push(`${loginPath}${newSearch}`)
-                } else {
-                    setErrorPage(true)
-                    showError(err)
-                }
-            } finally {
-                setValidating(false)
+    const redirectToDirectApprovalNotification = (): void => {
+        setValidating(false)
+        if (location.pathname && location.pathname.includes('deployment')) {
+            setApprovalType(APPROVAL_MODAL_TYPE.DEPLOYMENT)
+        } else {
+            setApprovalType(APPROVAL_MODAL_TYPE.CONFIG)
+        }
+
+        let queryString = new URLSearchParams(location.search)
+        let token = queryString.get('token')
+        if (token) {
+            setApprovalToken(token)
+        }
+    }
+
+    async function validation() {
+        try {
+            await validateToken()
+            defaultRedirection()
+        } catch (err: any) {
+            // push to login without breaking search
+            if (err?.code === 401) {
+                const loginPath = URLS.LOGIN_SSO
+                const newSearch = location.pathname.includes(URLS.LOGIN_SSO)
+                    ? location.search
+                    : `?continue=${location.pathname}`
+                push(`${loginPath}${newSearch}`)
+            } else {
+                setErrorPage(true)
+                showError(err)
             }
+        } finally {
+            setValidating(false)
         }
+    }
+
+
+    useEffect(() => {
         // If not K8S_CLIENT then validateToken otherwise directly redirect
         if (!window._env_.K8S_CLIENT) {
+            // By Passing validations for direct email approval notifications
+            if (isDirectApprovalNotification) {
+                redirectToDirectApprovalNotification()
+            } else {
             validation()
+            }
         } else {
             setValidating(false)
             defaultRedirection()
@@ -207,7 +234,7 @@ export default function App() {
         <Suspense fallback={null}>
             {validating ? (
                 <div className="full-height-width">
-                    <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80"/>
+                    <DevtronProgressing parentClasses="h-100 flex bcn-0" classes="icon-dim-80" />
                 </div>
             ) : (
                 <>
@@ -218,13 +245,21 @@ export default function App() {
                     ) : (
                         <ErrorBoundary>
                             <BreadcrumbStore>
-                                <Switch>
-                                    {!window._env_.K8S_CLIENT && <Route path={`/login`} component={Login} />}
-                                    <Route path="/" render={() => <NavigationRoutes />} />
-                                    <Redirect
-                                        to={window._env_.K8S_CLIENT ? '/' : `${URLS.LOGIN_SSO}${location.search}`}
-                                    />
-                                </Switch>
+                                    <Switch>
+                                             {isDirectApprovalNotification && GenericDirectApprovalModal && (
+                                                <Route exact path={`/${approvalType?.toLocaleLowerCase()}/approve`}>
+                                                    <GenericDirectApprovalModal
+                                                        approvalType={approvalType}
+                                                        approvalToken={approvalToken}
+                                                    />
+                                                </Route>
+                                            )}
+                                        {!window._env_.K8S_CLIENT && <Route path={`/login`} component={Login} />}
+                                        <Route path="/" render={() => <NavigationRoutes />} />
+                                        <Redirect
+                                            to={window._env_.K8S_CLIENT ? '/' : `${URLS.LOGIN_SSO}${location.search}`}
+                                        />
+                                    </Switch>
                                 <div id="full-screen-modal"></div>
                                 <div id="visible-modal"></div>
                                 <div id="visible-modal-2"></div>

src/assets/icons/ic-login-dt-with-hat.svg

@@ -3,6 +3,7 @@ import {
     Checkbox,
     CHECKBOX_VALUE,
     ConditionalWrap,
+    CustomInput,
     Drawer,
     GenericEmptyState,
     Progressing,
@@ -327,25 +328,17 @@ export default function CreateAppGroup({
         return (
             <div className="p-20 bcn-0 dc__overflow-auto" style={{ height: 'calc(100vh - 128px)' }}>
                 <div className="form__row mb-16">
-                    <span className="form__label dc__required-field">Name</span>
-                    <input
+                    <CustomInput
+                        label="Name"
                         tabIndex={1}
-                        className="form__input"
-                        autoComplete="off"
                         placeholder="Enter filter name"
-                        type="text"
                         value={appGroupName}
                         name="name"
                         onChange={onInputChange}
                         disabled={selectedAppGroup && !!selectedAppGroup.value}
+                        isRequiredField={true}
+                        error={showErrorMsg && nameErrorMessage()}
                     />
-
-                    {showErrorMsg && (
-                        <span className="form__error">
-                            <Error className="form__icon form__icon--error" />
-                            {nameErrorMessage()}
-                        </span>
-                    )}
                 </div>
                 <div className="form__row mb-16">
                     <span className="form__label">Description (Max 50 characters)</span>

src/assets/icons/ic-sidebar-dt-with-hat.svg

@@ -140,12 +140,14 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const handledLocation = useRef(false)
     const abortControllerRef = useRef(new AbortController())
 
-    useEffect(
-        () => () => {
-            handledLocation.current = false
-        },
-        [],
-    )
+    useEffect(() => {
+         if (ApprovalMaterialModal) {
+             getConfigs()
+         }
+         return () => {
+             handledLocation.current = false
+         }
+    }, [])
 
     useEffect(() => {
         if (envId) {
@@ -165,20 +167,18 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
             // URL Encoding for Bulk is not planned as of now
             setShowBulkCDModal(false)
             if (location.search.includes('approval-node')) {
-                getConfigs()
                 const searchParams = new URLSearchParams(location.search)
                 const nodeId = Number(searchParams.get('approval-node'))
                 if (!isNaN(nodeId)) {
                     onClickCDMaterial(nodeId, DeploymentNodeType.CD, true)
-                }
-                else {
+                } else {
                     toast.error('Invalid node id')
                     history.push({
                         search: '',
                     })
                 }
-            }
-            else if (location.search.includes('rollback-node')) {
+            }  
+             else if (location.search.includes('rollback-node')) {
                 const searchParams = new URLSearchParams(location.search)
                 const nodeId = Number(searchParams.get('rollback-node'))
                 if (!isNaN(nodeId)) {