refactor: common out common types, add sticky header for table

Author: eshankvaish

package.json

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

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupList.component.tsx

@@ -117,7 +117,7 @@ const PermissionGroupList = () => {
             )}
             {isLoading || (result.totalCount && result.permissionGroups.length) ? (
                 <div className="flexbox-col flex-grow-1">
-                    <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom">
+                    <div className="user-permission__header cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bcn-0">
                         <span />
                         <SortableTableHeaderCell
                             title="Name"

src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx

@@ -120,7 +120,7 @@ const UserPermissionList = () => {
                     <div
                         className={`user-permission__header ${
                             showStatus ? 'user-permission__header--with-status' : ''
-                        } cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom`}
+                        } cn-7 fs-12 fw-6 lh-20 dc__uppercase pl-20 pr-20 dc__border-bottom dc__position-sticky dc__top-0 bcn-0`}
                     >
                         <span />
                         <SortableTableHeaderCell

src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -1,8 +1,6 @@
-export enum UserStatus {
-    active = 'active',
-    inactive = 'inactive',
-}
-
+/**
+ * Permission types for users and permission groups
+ */
 export enum PermissionType {
     SUPER_ADMIN = 'SUPER_ADMIN',
     SPECIFIC = 'SPECIFIC',

src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/UserGroup.tsx

@@ -16,7 +16,7 @@ import {
     createClusterEnvGroup,
 } from '../../../../../../components/common'
 import { getAllWorkflowsForAppNames } from '../../../../../../services/service'
-import { DirectPermissionsRoleFilter, ChartGroupPermissionsFilter, ActionTypes, EntityTypes } from './userGroups.types'
+import { ChartGroupPermissionsFilter, ActionTypes, EntityTypes, DirectPermissionRow, ChartPermissionRow } from './userGroups.types'
 import { ACCESS_TYPE_MAP, HELM_APP_UNASSIGNED_PROJECT } from '../../../../../../config'
 import { ReactComponent as CloseIcon } from '../../../../../../assets/icons/ic-close.svg'
 import {
@@ -59,13 +59,6 @@ const allEnvironmentsOption = {
 export const APPROVER_ACTION = { label: 'approver', value: 'approver' }
 export const CONFIG_APPROVER_ACTION = { label: 'configApprover', value: 'configApprover' }
 
-interface DirectPermissionRow {
-    permission: DirectPermissionsRoleFilter
-    handleDirectPermissionChange: (...rest) => void
-    index: number
-    removeRow: (index: number) => void
-}
-
 export const DirectPermission: React.FC<DirectPermissionRow> = ({
     permission,
     handleDirectPermissionChange,
@@ -722,11 +715,7 @@ const AppOption = ({ props, permission }) => {
     )
 }
 
-interface ChartPermissionRow {
-    chartPermission: ChartGroupPermissionsFilter
-    setChartPermission: any
-    hideInfoLegend?: boolean
-}
+
 
 export const ChartPermission: React.FC<ChartPermissionRow> = React.memo(
     ({ chartPermission, setChartPermission, hideInfoLegend }) => {

src/Pages/GlobalConfigurations/Authorization/shared/components/userGroups/userGroups.types.ts

@@ -211,3 +211,16 @@ export const ViewChartGroupPermission:APIRoleFilter = {
     entity: EntityTypes.CHART_GROUP,
     action: ActionTypes.VIEW,
 }
+
+export interface DirectPermissionRow {
+    permission: DirectPermissionsRoleFilter
+    handleDirectPermissionChange: (...rest) => void
+    index: number
+    removeRow: (index: number) => void
+}
+
+export interface ChartPermissionRow {
+    chartPermission: ChartGroupPermissionsFilter
+    setChartPermission: any
+    hideInfoLegend?: boolean
+}

src/Pages/GlobalConfigurations/Authorization/types.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
-import { SortingParams } from '@devtron-labs/devtron-fe-common-lib'
+import { SortingParams, UserStatusDto } from '@devtron-labs/devtron-fe-common-lib'
 import { APIRoleFilter } from './shared/components/userGroups/userGroups.types'
-import { UserStatus } from './constants'
 
 export interface UserAndGroupPermissionsWrapProps {
     children: ReactNode
@@ -57,7 +56,7 @@ export interface UserDto {
      *
      * @default 'active'
      */
-    userStatus?: UserStatus
+    userStatus?: UserStatusDto
     /**
      * Last login time of the user
      *