diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a348bd0c..8a46887a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,8 @@ - Active Subscription - Switch endpoint used to display "App Subscriptions" +- Technical User + - Enable search & filter ## 1.6.0 diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json index 68d5a6960..6b81f2bb8 100644 --- a/src/assets/locales/de/main.json +++ b/src/assets/locales/de/main.json @@ -737,7 +737,13 @@ "noteDeleteUser": "Diese Aktion kann nicht rückgängig gemacht werden.", "confirmDeleteNotificationTitle": "Das Löschen des Benutzers war erfolgreich.", "confirmDeleteNotificationDescription": "Die Aktion kann nicht rückgängig gemacht werden. Bitte erstellen Sie einen neuen Benutzer, falls dies erforderlich ist", - "deleteTechUserNotificationErrorTitle": "Something went wrong" + "deleteTechUserNotificationErrorTitle": "Something went wrong", + "tabs": { + "all": "All", + "managed": "Managed", + "owned": "Owned" + }, + "searchText": "Search by client Id" }, "deleteUserConfirm": { "header": "Delete user account", diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json index 21b077eb8..2067fab1c 100644 --- a/src/assets/locales/en/main.json +++ b/src/assets/locales/en/main.json @@ -736,7 +736,13 @@ "noteDeleteUser": "Note: The deletion will be permanently. It is not possible the reactive the user again.", "confirmDeleteNotificationTitle": "User deletion was successful.", "confirmDeleteNotificationDescription": "The action can not be reversed. Please create a new user in case it's needed", - "deleteTechUserNotificationErrorTitle": "Something went wrong" + "deleteTechUserNotificationErrorTitle": "Something went wrong", + "tabs": { + "all": "All", + "managed": "Managed", + "owned": "Owned" + }, + "searchText": "Search by client Id" }, "deleteUserConfirm": { "header": "Delete user account", diff --git a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx index d539bdf56..4de179955 100644 --- a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx +++ b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx @@ -26,26 +26,81 @@ import { useTranslation } from 'react-i18next' import ArrowForwardIcon from '@mui/icons-material/ArrowForward' import { ServiceAccountListEntry, + ServiceAccountStatusFilter, useFetchServiceAccountListQuery, } from 'features/admin/serviceApiSlice' import { useSelector } from 'react-redux' import { PAGES } from 'types/Constants' import { updateTechuserSelector } from 'features/control/updates' import { useNavigate } from 'react-router-dom' +import { useState, useEffect } from 'react' export const TechnicalUserTable = () => { const { t } = useTranslation() const navigate = useNavigate() const update = useSelector(updateTechuserSelector) + const [fetchHookArgs, setFetchHookArgs] = useState({}) + const [expr, setExpr] = useState('') + const [refresh, setRefresh] = useState(0) + const [group, setGroup] = useState(ServiceAccountStatusFilter.ALL) + const setView = (e: React.MouseEvent) => { + const viewValue = e.currentTarget.value + setGroup(viewValue) + setRefresh(Date.now()) + } + + useEffect(() => { + setFetchHookArgs({ + statusFilter: group, + expr: expr, + }) + }, [group, expr]) + + const filterButtons = [ + { + buttonText: t('content.usermanagement.technicalUser.tabs.all'), + buttonValue: ServiceAccountStatusFilter.ALL, + onButtonClick: setView, + }, + { + buttonText: t('content.usermanagement.technicalUser.tabs.managed'), + buttonValue: ServiceAccountStatusFilter.MANAGED, + onButtonClick: setView, + }, + { + buttonText: t('content.usermanagement.technicalUser.tabs.owned'), + buttonValue: ServiceAccountStatusFilter.OWNED, + onButtonClick: setView, + }, + ] + + const validateExpr = (expr: string) => { + const validateExpr = /^[ A-Za-z0-9]*$/.test(expr) + return validateExpr + } return (
+ searchExpr={expr} + hasBorder={false} + rowHeight={80} + defaultFilter={group} + columnHeadersBackgroundColor={'transparent'} + toolbarVariant={'searchAndFilter'} title={t('content.usermanagement.technicalUser.tableHeader')} loadLabel={t('global.actions.more')} + searchPlaceholder={t('content.usermanagement.technicalUser.searchText')} fetchHook={useFetchServiceAccountListQuery} - fetchHookRefresh={update} + fetchHookRefresh={update || refresh} getRowId={(row: { [key: string]: string }) => row.serviceAccountId} + filterViews={filterButtons} + fetchHookArgs={fetchHookArgs} + onSearch={(expr: string) => { + if (!validateExpr(expr)) return + setExpr(expr) + setRefresh(Date.now()) + }} columns={[ { field: 'name', diff --git a/src/features/admin/serviceApiSlice.ts b/src/features/admin/serviceApiSlice.ts index 3ab88d7e3..db9c6b935 100644 --- a/src/features/admin/serviceApiSlice.ts +++ b/src/features/admin/serviceApiSlice.ts @@ -59,6 +59,12 @@ export type AppRoleCreate = { roles: string[] } +export enum ServiceAccountStatusFilter { + ALL = 'ALL', + MANAGED = 'MANAGED', + OWNED = 'OWNED', +} + export const apiSlice = createApi({ reducerPath: 'rtk/admin/service', baseQuery: fetchBaseQuery(apiBaseQuery()), @@ -87,8 +93,34 @@ export const apiSlice = createApi({ PaginResult, PaginFetchArgs >({ - query: (fetchArgs) => - `/api/administration/serviceaccount/owncompany/serviceaccounts?size=${PAGE_SIZE}&page=${fetchArgs.page}`, + query: (fetchArgs) => { + console.log(fetchArgs) + const isFetchArgs = fetchArgs.args && fetchArgs.args.expr !== '' + const url = `/api/administration/serviceaccount/owncompany/serviceaccounts?size=${PAGE_SIZE}&page=${fetchArgs.page}` + const isOwner = + fetchArgs.args!.statusFilter === ServiceAccountStatusFilter.OWNED + if ( + isFetchArgs && + fetchArgs.args.statusFilter && + fetchArgs.args.statusFilter !== ServiceAccountStatusFilter.ALL + ) { + return `${url}&clientId=${fetchArgs.args!.expr}&isOwner=${isOwner}` + } else if ( + isFetchArgs && + fetchArgs.args.statusFilter && + fetchArgs.args.statusFilter === ServiceAccountStatusFilter.ALL + ) { + return `${url}&clientId=${fetchArgs.args!.expr}` + } else if ( + !isFetchArgs && + fetchArgs.args.statusFilter && + fetchArgs.args.statusFilter !== ServiceAccountStatusFilter.ALL + ) { + return `${url}&isOwner=${isOwner}` + } else { + return url + } + }, }), fetchServiceAccountDetail: builder.query({ query: (id: string) =>