Merge pull request #1579 from devtron-labs/approval-via-email

feat: Approval via email

Author: shivani170

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.56",
         "@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/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx

@@ -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)) {

src/css/base.scss

@@ -3220,6 +3220,10 @@ textarea,
     min-height: 400px;
 }
 
+.mh-440 {
+    min-height: 440px;
+}
+
 .mh-500 {
     min-height: 500px;
 }

src/css/icons.scss

@@ -188,6 +188,11 @@
     height: 48px;
 }
 
+.icon-dim-72 {
+    width: 72px;
+    height: 72px;
+}
+
 .icon-dim-80 {
     width: 80px;
     height: 80px;