fix(connector): show service accounts (#836)

CHANGELOG.md

@@ -17,6 +17,8 @@
   - Api url typo fix
 - App Access Management
   - Fix carousel element issue
+- Connectors
+  - Fetch all service accounts and show them in the auto complete list
 - Admin Credential
   - Change document download endpoint
 

src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx

@@ -258,11 +258,9 @@ any) => {
   const [serviceAccountUsers, setServiceAccountUsers] = useState([])
 
   useEffect(() => {
-    if (fetchServiceAccountUsers?.content)
+    if (fetchServiceAccountUsers)
       setServiceAccountUsers(
-        fetchServiceAccountUsers.content?.filter(
-          (item: { name: string }) => item.name
-        )
+        fetchServiceAccountUsers?.filter((item: { name: string }) => item.name)
       )
   }, [fetchServiceAccountUsers])
 

src/components/pages/EdcConnector/AddConnectorOverlay/index.tsx

@@ -39,7 +39,10 @@ import {
 } from 'features/connector/connectorApiSlice'
 import Box from '@mui/material/Box'
 import { useFetchOwnCompanyDetailsQuery } from 'features/admin/userApiSlice'
-import { useFetchServiceAccountUsersQuery } from 'features/admin/serviceApiSlice'
+import {
+  type ServiceAccountListEntry,
+  useFetchServiceAccountUsersQuery,
+} from 'features/admin/serviceApiSlice'
 
 interface AddCollectorOverlayProps {
   openDialog?: boolean
@@ -97,8 +100,10 @@ const AddConnectorOverlay = ({
   const { t } = useTranslation()
   const { data } = useFetchOfferSubscriptionsQuery()
   const { data: ownCompanyDetails } = useFetchOwnCompanyDetailsQuery()
-  const fetchServiceAccountUsers = useFetchServiceAccountUsersQuery().data
+  const [page, setPage] = useState<number>(0)
+  const { data: serviceAccounts } = useFetchServiceAccountUsersQuery(page)
   const [newTechnicalUSer, setNewTechnicalUSer] = useState(false)
+  const [allAccounts, setAllAccounts] = useState<ServiceAccountListEntry[]>([])
 
   const {
     handleSubmit,
@@ -118,6 +123,15 @@ const AddConnectorOverlay = ({
     if (openDialog) reset(formFields)
   }, [openDialog, reset])
 
+  useEffect(() => {
+    if (serviceAccounts && serviceAccounts?.meta?.totalPages > page) {
+      setPage((pre) => pre + 1)
+      setAllAccounts((i: ServiceAccountListEntry[]) =>
+        i.concat(serviceAccounts?.content)
+      )
+    }
+  }, [serviceAccounts])
+
   const onFormSubmit = async () => {
     const validateFields =
       newTechnicalUSer && !newUserSuccess
@@ -197,7 +211,7 @@ const AddConnectorOverlay = ({
               <ConnectorInsertForm
                 subscriptions={data}
                 selectedService={selected}
-                fetchServiceAccountUsers={fetchServiceAccountUsers}
+                fetchServiceAccountUsers={allAccounts}
                 onFormSubmitt={onFormSubmit}
                 setNewTechnicalUSer={setNewTechnicalUSer}
                 newUserLoading={newUserLoading}

src/features/admin/serviceApiSlice.ts

@@ -77,6 +77,16 @@ export type AppRoleCreate = {
   roles: string[]
 }
 
+export interface ServiceAccountsResponseType {
+  content: ServiceAccountListEntry[]
+  meta: {
+    contentSize: number
+    page: number
+    totalElements: number
+    totalPages: number
+  }
+}
+
 export enum ServiceAccountStatusFilter {
   ACTIVE = 'ACTIVE',
   INACTIVE = 'INACTIVE',
@@ -165,9 +175,12 @@ export const apiSlice = createApi({
         method: 'POST',
       }),
     }),
-    fetchServiceAccountUsers: builder.query<ServiceAccountListEntry[], void>({
-      query: () =>
-        `/api/administration/serviceaccount/owncompany/serviceaccounts?page=0&size=${PAGE_SIZE}&filterForInactive=false`,
+    fetchServiceAccountUsers: builder.query<
+      ServiceAccountsResponseType,
+      number
+    >({
+      query: (page) =>
+        `/api/administration/serviceaccount/owncompany/serviceaccounts?page=${page}&size=${PAGE_SIZE}&filterForInactive=false`,
     }),
   }),
 })