fix(admin-ui): incorrect cancel button behaviour in the Application S…

admin-ui/app/redux/features/authSlice.ts

@@ -51,7 +51,7 @@ const authSlice = createSlice({
     setAuthState: (state, action: PayloadAction<{ state: boolean }>) => {
       state.isAuthenticated = action.payload?.state
     },
-    getUserInfo: (state, _action: PayloadAction<any>) => {},
+    getUserInfo: (_state, _action: PayloadAction<any>) => {},
     getUserInfoResponse: (
       state,
       action: PayloadAction<{
@@ -74,7 +74,7 @@ const authSlice = createSlice({
         state.isAuthenticated = true
       }
     },
-    getAPIAccessToken: (state, _action: PayloadAction<any>) => {},
+    getAPIAccessToken: (_state, _action: PayloadAction<any>) => {},
     getAPIAccessTokenResponse: (
       state,
       action: PayloadAction<{ access_token?: string; scopes?: string[]; issuer?: string }>,
@@ -89,7 +89,7 @@ const authSlice = createSlice({
         state.isAuthenticated = true
       }
     },
-    getUserLocation: (state, _action: PayloadAction<any>) => {},
+    getUserLocation: (_state, _action: PayloadAction<any>) => {},
     getUserLocationResponse: (state, action: PayloadAction<{ location?: Location }>) => {
       if (action.payload?.location) {
         state.location = action.payload.location

admin-ui/app/routes/Apps/Gluu/GluuCommitFooter.tsx

@@ -13,6 +13,10 @@ interface GluuCommitFooterProps {
     save?: boolean
     back?: boolean
   }
+  disableButtons?: {
+    save?: boolean
+    back?: boolean
+  }
   type?: 'button' | 'submit'
   disableBackButton?: boolean
   cancelHandler?: () => void
@@ -25,6 +29,7 @@ function GluuCommitFooter({
   saveHandler,
   extraLabel,
   hideButtons,
+  disableButtons,
   type = 'button',
   backButtonLabel,
   backButtonHandler,
@@ -54,6 +59,7 @@ function GluuCommitFooter({
             type="button"
             onClick={disableBackButton ? cancelHandler : goBack}
             className="d-flex m-1 mx-5"
+            disabled={disableButtons?.back}
           >
             {!disableBackButton && <i className="fa fa-arrow-circle-left me-2"></i>}
             {backButtonLabel || t('actions.cancel')}
@@ -84,6 +90,7 @@ function GluuCommitFooter({
             color={`primary-${selectedTheme}`}
             style={{ ...applicationStyle.buttonStyle, ...applicationStyle.buttonFlexIconStyles }}
             className="ms-auto px-4"
+            disabled={disableButtons?.save}
           >
             <i className="fa fa-check-circle me-2"></i>
             {t('actions.apply')}
@@ -97,6 +104,7 @@ function GluuCommitFooter({
             style={{ ...applicationStyle.buttonStyle, ...applicationStyle.buttonFlexIconStyles }}
             className="ms-auto px-4"
             onClick={saveHandler}
+            disabled={disableButtons?.save}
           >
             <i className="fa fa-check-circle me-2"></i>
             {t('actions.apply')}

admin-ui/app/utils/pagingUtils.ts

@@ -0,0 +1,10 @@
+export const getPagingSize = (defaultSize: number = 10): number => {
+  const stored = localStorage.getItem('pagingSize')
+  if (!stored) return defaultSize
+  const parsed = parseInt(stored, 10)
+  return isNaN(parsed) ? defaultSize : parsed
+}
+
+export const savePagingSize = (size: number): void => {
+  localStorage.setItem('pagingSize', String(size))
+}

admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.tsx

@@ -27,6 +27,7 @@ import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { adminUiFeatures } from 'Plugins/admin/helper/utils'
 import customColors from '@/customColors'
+import { getPagingSize } from '@/utils/pagingUtils'
 import { RootState, UserAction } from './types'
 
 function ScriptListTable(): JSX.Element {
@@ -39,7 +40,7 @@ function ScriptListTable(): JSX.Element {
   const [myActions, setMyActions] = useState<any[]>([])
   const [item, setItem] = useState<any>({})
   const [modal, setModal] = useState<boolean>(false)
-  const pageSize = localStorage.getItem('paggingSize') || 10
+  const pageSize = getPagingSize()
   const [limit, setLimit] = useState<string | number>(pageSize)
   const [pattern, setPattern] = useState<string>('')
   const [type, setType] = useState<string>('person_authentication')
@@ -192,7 +193,7 @@ function ScriptListTable(): JSX.Element {
         isFreeAction: true,
         onClick: handleGoToCustomScriptAddPage,
       })
-      actions.push((rowData: any) => ({
+      actions.push((_rowData: any) => ({
         icon: 'edit',
         iconProps: {
           color: 'primary',
@@ -209,7 +210,7 @@ function ScriptListTable(): JSX.Element {
     }
 
     if (canRead) {
-      actions.push((rowData: any) => ({
+      actions.push((_rowData: any) => ({
         icon: 'visibility',
         iconProps: {
           color: 'primary',
@@ -271,7 +272,7 @@ function ScriptListTable(): JSX.Element {
     }
 
     if (canDelete) {
-      actions.push((rowData: any) => ({
+      actions.push((_rowData: any) => ({
         icon: () => <DeleteOutlined />,
         iconProps: {
           color: 'primary',

admin-ui/plugins/admin/components/Permissions/UiPermListPage.js

@@ -27,6 +27,7 @@ import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { isEmpty } from 'lodash'
 import customColors from '@/customColors'
+import { getPagingSize } from '@/utils/pagingUtils'
 
 function UiPermListPage() {
   const { hasCedarPermission, authorize } = useCedarling()
@@ -49,7 +50,7 @@ function UiPermListPage() {
 
   // Constants
   const userAction = {}
-  const pageSize = localStorage.getItem('paggingSize') || 10
+  const pageSize = getPagingSize()
 
   SetTitle(t('menus.securityDropdown.capabilities'))
 

admin-ui/plugins/admin/components/Roles/UiRoleListPage.js

@@ -17,18 +17,18 @@ import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
 import { toast } from 'react-toastify'
 import customColors from '@/customColors'
+import { getPagingSize } from '@/utils/pagingUtils'
 
 function UiRoleListPage() {
   const { hasCedarPermission, authorize } = useCedarling()
   const apiRoles = useSelector((state) => state.apiRoleReducer.items)
   const loading = useSelector((state) => state.apiRoleReducer.loading)
-  const { permissions: cedarPermissions } = useSelector((state) => state.cedarPermissions)
 
   const [modal, setModal] = useState(false)
   const myActions = [],
     options = [],
     userAction = {},
-    pageSize = localStorage.getItem('paggingSize') || 10,
+    pageSize = getPagingSize(),
     theme = useContext(ThemeContext),
     selectedTheme = theme.state.theme,
     themeColors = getThemeColor(selectedTheme),