refactor: move the abortPreviousRequest func and SortingOrder enum to common lib + code cleanup

eshankvaish · eshankvaish · commit 80ad39ee93ea · 2024-01-25T17:33:51.000+05:30
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.58-beta-6",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.58-beta-9",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx
@@ -6,29 +6,27 @@ import { ReactComponent as AddIcon } from '../../../../../assets/icons/ic-add.sv
 import { EMPTY_STATE_STATUS } from '../../../../../config/constantMessaging'
 import { URLS } from '../../../../../config'
 
-const NoPermissionGroups = () => {
-    const renderAddGroupButton = () => (
-        <Link
-            type="button"
-            to={`${URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS}/add`}
-            role="button"
-            className="cta dc__gap-4 flex h-32 anchor"
-        >
-            <AddIcon />
-            Add group
-        </Link>
-    )
+const renderAddGroupButton = () => (
+    <Link
+        type="button"
+        to={`${URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS}/add`}
+        role="button"
+        className="cta dc__gap-4 flex h-32 anchor"
+    >
+        <AddIcon />
+        Add group
+    </Link>
+)
 
-    return (
-        <GenericEmptyState
-            image={nullStateImage}
-            title={EMPTY_STATE_STATUS.NO_GROUPS.TITLE}
-            subTitle={EMPTY_STATE_STATUS.NO_GROUPS.SUBTITLE}
-            isButtonAvailable
-            renderButton={renderAddGroupButton}
-            classname="flex-grow-1"
-        />
-    )
-}
+const NoPermissionGroups = () => (
+    <GenericEmptyState
+        image={nullStateImage}
+        title={EMPTY_STATE_STATUS.NO_GROUPS.TITLE}
+        subTitle={EMPTY_STATE_STATUS.NO_GROUPS.SUBTITLE}
+        isButtonAvailable
+        renderButton={renderAddGroupButton}
+        classname="flex-grow-1"
+    />
+)
 
 export default NoPermissionGroups
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupList.component.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupList.component.tsx
@@ -11,6 +11,8 @@ import {
     useAsync,
     DEFAULT_BASE_PAGE_SIZE,
     useUrlFilters,
+    abortPreviousRequests,
+    getIsRequestAborted,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { API_STATUS_CODES } from '../../../../../config'
 
@@ -22,7 +24,6 @@ import { useAuthorizationContext } from '../../AuthorizationProvider'
 import { importComponentFromFELibrary } from '../../../../../components/common'
 import FiltersEmptyState from '../../shared/components/FilterEmptyState/FilterEmptyState.component'
 import NoPermissionGroups from './NoPermissionGroups'
-import { abortPreviousRequests, getIsRequestAborted } from '../../utils'
 
 const PermissionGroupInfoBar = importComponentFromFELibrary('PermissionGroupInfoBar', noop, 'function')
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/PermissionGroups.component.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/PermissionGroups.component.tsx
@@ -13,8 +13,9 @@ const PermissionGroups = () => {
             <Route
                 path={`${path}/:groupId`}
                 render={({ match }) => (
-                    <section className="flexbox-col flex-grow-1 h-100" key={match.params.groupId}>
-                        <PermissionGroupAddEdit />
+                    <section className="flexbox-col flex-grow-1 h-100">
+                        {/* Passing the groupId as key to re-mount the component on its change */}
+                        <PermissionGroupAddEdit key={match.params.groupId} />
                     </section>
                 )}
             />
diff --git a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/service.ts b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/service.ts
@@ -6,7 +6,6 @@ export function getSSOConfigList(): Promise<any> {
     return get(Routes.SSO_LIST)
 }
 
-// Use the common function for search params
 export function getSSOConfig(name: string): Promise<any> {
     return get(getUrlWithSearchParams(Routes.SSO, { name }))
 }
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx
@@ -389,17 +389,15 @@ const UserForm = ({ isAddMode, userData = null }: { isAddMode: boolean; userData
                 </div>
                 {!isAddMode && (
                     <div className="flex dc__content-start dc__gap-12">
-                        {!isAddMode && (
-                            <button
-                                disabled={submitting}
-                                type="button"
-                                className="cta delete override-button flex dc__gap-6 h-32"
-                                onClick={toggleDeleteConfirmationModal}
-                            >
-                                <PlusIcon className="icon-dim-14 mw-14" />
-                                Delete
-                            </button>
-                        )}
+                        <button
+                            disabled={submitting}
+                            type="button"
+                            className="cta delete override-button flex dc__gap-6 h-32"
+                            onClick={toggleDeleteConfirmationModal}
+                        >
+                            <PlusIcon className="icon-dim-14 mw-14" />
+                            Delete
+                        </button>
                     </div>
                 )}
             </div>
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx
@@ -6,29 +6,27 @@ import { ReactComponent as AddIcon } from '../../../../../assets/icons/ic-add.sv
 import { EMPTY_STATE_STATUS } from '../../../../../config/constantMessaging'
 import { URLS } from '../../../../../config'
 
-const NoUsers = () => {
-    const renderAddUserButton = () => (
-        <Link
-            type="button"
-            to={`${URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION}/add`}
-            role="button"
-            className="cta dc__gap-4 flex h-32 anchor"
-        >
-            <AddIcon />
-            Add user
-        </Link>
-    )
+const renderAddUserButton = () => (
+    <Link
+        type="button"
+        to={`${URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION}/add`}
+        role="button"
+        className="cta dc__gap-4 flex h-32 anchor"
+    >
+        <AddIcon />
+        Add user
+    </Link>
+)
 
-    return (
-        <GenericEmptyState
-            image={nullStateImage}
-            title={EMPTY_STATE_STATUS.NO_USER.TITLE}
-            subTitle={EMPTY_STATE_STATUS.NO_USER.SUBTITLE}
-            isButtonAvailable
-            renderButton={renderAddUserButton}
-            classname="flex-grow-1"
-        />
-    )
-}
+const NoUsers = () => (
+    <GenericEmptyState
+        image={nullStateImage}
+        title={EMPTY_STATE_STATUS.NO_USER.TITLE}
+        subTitle={EMPTY_STATE_STATUS.NO_USER.SUBTITLE}
+        isButtonAvailable
+        renderButton={renderAddUserButton}
+        classname="flex-grow-1"
+    />
+)
 
 export default NoUsers
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx
@@ -10,6 +10,8 @@ import {
     useAsync,
     DEFAULT_BASE_PAGE_SIZE,
     useUrlFilters,
+    abortPreviousRequests,
+    getIsRequestAborted,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { API_STATUS_CODES } from '../../../../../config'
 
@@ -20,7 +22,6 @@ import UserPermissionRow from './UserPermissionRow'
 import FiltersEmptyState from '../../shared/components/FilterEmptyState/FilterEmptyState.component'
 import NoUsers from './NoUsers'
 import { importComponentFromFELibrary } from '../../../../../components/common'
-import { abortPreviousRequests, getIsRequestAborted } from '../../utils'
 
 const StatusHeaderCell = importComponentFromFELibrary('StatusHeaderCell', null, 'function')
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/UserPermissions.component.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/UserPermissions.component.tsx
@@ -37,6 +37,7 @@ const UserPermissions = () => {
 
     const isSSOConfigured = ssoConfig?.result?.some((sso) => sso.active) || false
 
+    // The users can only be configured if SSO is configured
     if (!isSSOConfigured) {
         return <SSONotConfiguredState />
     }
@@ -48,6 +49,7 @@ const UserPermissions = () => {
                 path={`${path}/:userId`}
                 render={({ match }) => (
                     <section className="flexbox-col flex-grow-1 h-100 dc__content-center">
+                        {/* Passing the userId as key to re-mount the component on its change */}
                         <UserPermissionAddEdit key={match.params.userId} />
                     </section>
                 )}
diff --git a/src/Pages/GlobalConfigurations/Authorization/shared/components/FilterEmptyState/types.ts b/src/Pages/GlobalConfigurations/Authorization/shared/components/FilterEmptyState/types.ts
@@ -1,3 +1,6 @@
 export interface FilterEmptyStateProps {
+    /**
+     * Click handler for clearing the applied filters
+     */
     clearFilters: () => void
 }
diff --git a/src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/UserGroup.tsx b/src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/UserGroup.tsx
@@ -1,3 +1,5 @@
+// TODO (v3): Remove this file
+
 import React, { useState, useEffect, useRef, useMemo } from 'react'
 import {
     showError,
@@ -14,12 +16,7 @@ import {
     createClusterEnvGroup,
 } from '../../../../../../components/common'
 import { getAllWorkflowsForAppNames } from '../../../../../../services/service'
-import {
-    DirectPermissionsRoleFilter,
-    ChartGroupPermissionsFilter,
-    ActionTypes,
-    EntityTypes,
-} from './userGroups.types'
+import { DirectPermissionsRoleFilter, ChartGroupPermissionsFilter, ActionTypes, EntityTypes } from './userGroups.types'
 import { ACCESS_TYPE_MAP, HELM_APP_UNASSIGNED_PROJECT } from '../../../../../../config'
 import { ReactComponent as CloseIcon } from '../../../../../../assets/icons/ic-close.svg'
 import {
diff --git a/src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/userGroups.types.ts b/src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/userGroups.types.ts
@@ -29,37 +29,12 @@ export enum ActionTypes {
 
 export type ActionRoleType = ActionTypes.MANAGER | ActionTypes.VIEW | ActionTypes.TRIGGER | ActionTypes.ADMIN
 
-// export enum DefaultUserKey {
-//     SYSTEM = 'system',
-//     ADMIN = 'admin',
-// }
-
-// Can be deleted once the UserGroup is removed
-export const DefaultUserValue = {
-    system: 'System',
-    admin: 'Admin',
-}
-
 export const ACTION_LABEL = {
     [ActionTypes.ADMIN]: 'Admin',
     [ActionTypes.VIEW]: 'View',
     [ActionTypes.MANAGER]: 'Manager',
 }
 
-// export interface CollapsedUserOrGroupProps {
-//     index: number
-//     email_id?: string
-//     id?: number
-//     name?: string
-//     description?: string
-//     type: 'user' | 'group'
-//     updateCallback: (index: number, payload: any) => void
-//     deleteCallback: (index: number) => void
-//     createCallback: (payload: any) => void
-//     isAutoAssignFlowEnabled: boolean
-//     collapsed: boolean
-//     setCollapsed: (id?: string) => void
-// }
 interface RoleFilter {
     entity: EntityTypes.DIRECT | EntityTypes.CHART_GROUP | EntityTypes.CLUSTER | EntityTypes.JOB
     team?: OptionType
@@ -162,8 +137,6 @@ export interface UserGroup {
     projectsList: any[]
     chartGroupsList: ChartGroup[]
     fetchAppList: (projectId: number[]) => void
-    // superAdmin: boolean
-    // roles: string[]
     envClustersList: any[]
     fetchAppListHelmApps: (projectId: number[]) => void
     fetchJobsList: (projectId: number[]) => void
diff --git a/src/Pages/GlobalConfigurations/Authorization/types.ts b/src/Pages/GlobalConfigurations/Authorization/types.ts
diff --git a/src/Pages/GlobalConfigurations/Authorization/utils.ts b/src/Pages/GlobalConfigurations/Authorization/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@ export function getSSOConfigList(): Promise<any> {`
`6`	`6`	`return get(Routes.SSO_LIST)`
`7`	`7`	`}`
`8`	`8`
`9`		`-// Use the common function for search params`
`10`	`9`	`export function getSSOConfig(name: string): Promise<any> {`
`11`	`10`	`return get(getUrlWithSearchParams(Routes.SSO, { name }))`
`12`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
`1`	`1`	`export interface FilterEmptyStateProps {`
	`2`	`+ /**`
	`3`	`+ * Click handler for clearing the applied filters`
	`4`	`+ */`
`2`	`5`	`clearFilters: () => void`
`3`	`6`	`}`