updates(tech user): enable search and filter option

eclipse-tractusx · Aug 28, 2023 · 84485e5 · 84485e5
1 parent d391c9f
commit 84485e5
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<string>('')
+  const [refresh, setRefresh] = useState<number>(0)
+  const [group, setGroup] = useState<string>(ServiceAccountStatusFilter.ALL)
+  const setView = (e: React.MouseEvent<HTMLInputElement>) => {
+    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 (
     <div style={{ paddingTop: '30px' }}>
       <PageLoadingTable<ServiceAccountListEntry>
+        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
@@ -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<ServiceAccountListEntry>,
       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<ServiceAccountDetail, string>({
       query: (id: string) =>