Merge branch 'develop' of github.com:devtron-labs/dashboard into refactor/remove-monaco

Author: RohitRaj011

.eslintignore

@@ -36,7 +36,6 @@ src/components/ApplicationGroup/SearchBar.tsx
 src/components/CIPipelineN/AdvancedConfigOptions.tsx
 src/components/CIPipelineN/Build.tsx
 src/components/CIPipelineN/CIPipeline.tsx
-src/components/CIPipelineN/ConditionContainer.tsx
 src/components/CIPipelineN/CustomImageTags.tsx
 src/components/CIPipelineN/CustomInputOutputVariables.tsx
 src/components/CIPipelineN/CustomInputVariableSelect.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-0",
+        "@devtron-labs/devtron-fe-common-lib": "1.12.0-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx

@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
+    abortPreviousRequests,
     AppType,
     DeploymentAppTypes,
     ERROR_STATUS_CODE,
     ErrorScreenManager,
+    getIsRequestAborted,
     IndexStore,
     noop,
     ResponseType,
@@ -46,6 +48,15 @@ const ExternalFluxAppDetails = () => {
     const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(true)
     const [appDetailsError, setAppDetailsError] = useState(null)
 
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+
+    useEffect(
+        () => () => {
+            abortControllerRef.current.abort()
+        },
+        [],
+    )
+
     const handleUpdateIndexStoreWithDetails = (response: ResponseType<any>) => {
         const genericAppDetail: AppDetails = {
             ...response.result,
@@ -63,13 +74,19 @@ const ExternalFluxAppDetails = () => {
         new Promise<void>((resolve) => {
             setIsReloadResourceTreeInProgress(true)
 
-            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization)
+            abortPreviousRequests(
+                () =>
+                    getExternalFluxCDAppDetails({ clusterId, namespace, appName, isKustomization, abortControllerRef }),
+                abortControllerRef,
+            )
                 .then(handleUpdateIndexStoreWithDetails)
                 .catch((error) => {
-                    if (!initialLoading) {
-                        showError(error)
-                    } else {
-                        setAppDetailsError(error)
+                    if (!getIsRequestAborted(error)) {
+                        if (!initialLoading) {
+                            showError(error)
+                        } else {
+                            setAppDetailsError(error)
+                        }
                     }
                 })
                 .finally(() => {

src/Pages/App/Details/ExternalFlux/service.tsx

@@ -17,13 +17,21 @@
 import { get, getUrlWithSearchParams } from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '../../../../config'
+import { GetExternalFluxCDAppDetailsParamsType } from './types'
 
-export const getExternalFluxCDAppDetails = (clusterId, namespace, appName, isKustomization) => {
+export const getExternalFluxCDAppDetails = async ({
+    clusterId,
+    namespace,
+    appName,
+    isKustomization,
+    abortControllerRef,
+}: GetExternalFluxCDAppDetailsParamsType) => {
     const appId = `${clusterId}|${namespace}|${appName}|${isKustomization}`
     const baseurl = `${Routes.FLUX_APPS}/${Routes.APP}`
     const params = {
         appId,
     }
+
     const url = getUrlWithSearchParams(baseurl, params)
-    return get(url)
+    return get(url, { abortControllerRef })
 }

src/Pages/App/Details/ExternalFlux/types.tsx

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { APIOptions } from '@devtron-labs/devtron-fe-common-lib'
+
 export interface ExternalFluxAppDetailParams {
     clusterId: string
     appName: string
@@ -25,3 +27,9 @@ export enum EXTERNAL_FLUX_APP_STATUS {
     READY = 'Ready',
     NOT_READY = 'Not Ready',
 }
+
+export interface GetExternalFluxCDAppDetailsParamsType
+    extends Pick<ExternalFluxAppDetailParams, 'clusterId' | 'namespace' | 'appName'>,
+        Pick<APIOptions, 'abortControllerRef'> {
+    isKustomization: boolean
+}

src/Pages/GlobalConfigurations/Authorization/APITokens/APITokenList.tsx

@@ -69,7 +69,7 @@ const APITokenList = ({ tokenList, renderSearchToken, reload }: APITokenListType
 
     return (
         <div className="bg__primary">
-            <div data-testid="api-token-page-header" className="flex dc__content-space pl-20 pr-20 pb-16">
+            <div data-testid="api-token-page-header" className="flex dc__content-space pl-20 pr-20 py-16">
                 <FeatureTitleWithInfo
                     title={HEADER_TEXT.API_TOKEN.title}
                     renderDescriptionContent={() => HEADER_TEXT.API_TOKEN.description}

src/Pages/GlobalConfigurations/Authorization/Authorization.component.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { lazy } from 'react'
+import { lazy, useRef } from 'react'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import { Routes } from '../../../config'
@@ -26,15 +26,21 @@ const SSOLogin = lazy(() => import('./SSOLoginServices'))
 
 const Authorization = () => {
     const { path } = useRouteMatch()
+    const authorizationContainerRef = useRef<HTMLDivElement>(null)
 
     return (
         <Switch>
             <Route path={`${path}/${Routes.SSO_LOGIN_SERVICES}`} component={SSOLogin} />
             <Route
                 path={path}
                 render={() => (
-                    <div className="authorization-container flexbox-col flex-grow-1 min-h-100 bg__primary flex-align-center dc__content-center pt-16">
-                        <UserAndGroupPermissions />
+                    <div
+                        ref={authorizationContainerRef}
+                        className="authorization-container flexbox-col flex-grow-1 h-100 bg__primary dc__overflow-hidden"
+                    >
+                        <div className="flex-grow-1 flexbox-col dc__overflow-auto">
+                            <UserAndGroupPermissions authorizationContainerRef={authorizationContainerRef} />
+                        </div>
                     </div>
                 )}
             />

src/Pages/GlobalConfigurations/Authorization/AuthorizationProvider.tsx

@@ -26,6 +26,7 @@ const AuthorizationContext = createContext<AuthorizationContextProps>({
         possibleRolesMetaForCluster: {},
     },
     isAutoAssignFlowEnabled: false,
+    authorizationContainerRef: { current: null },
 })
 
 export const AuthorizationProvider = ({ children, value }: AuthorizationProviderProps) => (

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx

@@ -41,7 +41,7 @@ const PermissionGroupListHeader = ({
     const { isSuperAdmin } = useMainContext()
 
     return (
-        <div className="flex dc__content-space pl-20 pr-20">
+        <div className="flex dc__content-space pl-20 pr-20 pt-16">
             <div className="flex dc__gap-8">
                 <h2 className="fs-16 lh-32 cn-9 fw-6 m-0">Permission Groups</h2>
                 <InfoIconTippy

src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx

@@ -996,7 +996,6 @@ const AppPermissions = () => {
                               }
                             : [],
                     )}
-                    alignActiveBorderWithContainer
                 />
             </div>
             <div>