feat: add search to onboarding service provider (eclipse-tractusx#1132)

Author: lavanya-bmw

CHANGELOG.md

@@ -19,6 +19,8 @@
 
 ### Change
 
+- **Onboarding Service Provider Management**
+  - Removed "User List" from table header, added search to onboarding service provider management table, adjusted design to be identical with customer overview table and fixed action 'disable/enable' status not being updated issue [#1132](https://github.com/eclipse-tractusx/portal-frontend/pull/1132)
 - **Service Subscriptions**
 
   - rename 'Configure' button to 'Activate' button [#1150](https://github.com/eclipse-tractusx/portal-frontend/pull/1150)

src/assets/locales/de/main.json

@@ -70,7 +70,7 @@
     "mycompany": "My Company",
     "mynotifications": "My Notifications",
     "companyData": "Company Data",
-    "ManagementOnboardingServiceProvider": "Onboarding Service Provider"
+    "onboardingServiceProviderManagement": "Onboarding Service Provider"
   },
   "overlays": {
     "invite": "Neuen Geschäftspartner einladen",
@@ -465,7 +465,7 @@
         "inactive": "inaktiv",
         "showAll": "Alles anzeigen"
       },
-      "searchName": "..search by company name here"
+      "searchName": "..search by title here"
     },
     "companySubscriptionsDetail": {
       "language": "Verfügbare App Sprachen",
@@ -2271,7 +2271,9 @@
       "clientSecret": {
         "name": "Client-Geheimnis",
         "hint": "Geben Sie das von Ihrem IdP bereitgestellte Client-Geheimnis ein"
-      }
+      },
+      "ospIdentityProvider": "OSP-Identitätsanbieter (IDPs)",
+      "search": "Geben Sie einen Namen oder Alias ​​ein, um zu suchen"
     }
   },
   "navigation": {

src/assets/locales/en/main.json

@@ -70,7 +70,7 @@
     "mycompany": "My Company",
     "mynotifications": "My Notifications",
     "companyData": "Company Data",
-    "ManagementOnboardingServiceProvider": "Onboarding Service Provider"
+    "onboardingServiceProviderManagement": "Onboarding Service Provider"
   },
   "overlays": {
     "invite": "Invite new Business Partner",
@@ -462,7 +462,7 @@
         "inactive": "inactive",
         "showAll": "show all"
       },
-      "searchName": "..search by company name here"
+      "searchName": "..search by title here"
     },
     "companySubscriptionsDetail": {
       "language": "Language",
@@ -2245,7 +2245,9 @@
       "clientSecret": {
         "name": "Client Secret",
         "hint": "Enter the client secret provided by your IdP"
-      }
+      },
+      "ospIdentityProvider": "OSP Identity Provider(IDPs)",
+      "search": "Enter name or alias to search"
     }
   },
   "navigation": {

src/components/pages/IDPManagement/IDPList.tsx

@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { MenuItem } from '@mui/material'
@@ -84,6 +84,7 @@ const MenuItemOpenOverlay = ({
 export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
   const { t } = useTranslation()
   const ti = useTranslation('idp').t
+  const dispatch = useDispatch()
 
   const [disableLoading, setDisableLoading] = useState(false)
   const [deleteLoading, setDeleteLoading] = useState(false)
@@ -94,8 +95,17 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
     .sort((a: IdentityProvider, b: IdentityProvider) =>
       (a?.displayName ?? '').localeCompare(b.displayName ?? '')
     )
+  const [searchExpr, setSearchExpr] = useState<string>('')
   const [removeIDP] = useRemoveIDPMutation()
   const [enableIDP] = useEnableIDPMutation()
+  const managedIdpsData = idpsData?.filter(
+    (a) => a.identityProviderTypeId === IDPCategory.MANAGED
+  )
+  const [idpsManagedData, setIdpsManagedData] = useState(managedIdpsData)
+
+  useEffect(() => {
+    setIdpsManagedData(managedIdpsData)
+  }, [data])
 
   const doDelete = async (
     e: React.MouseEvent<HTMLElement, MouseEvent>,
@@ -353,9 +363,31 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
     )
   }
 
+  const onSearch = (value: string) => {
+    if (value) {
+      const searchFilter = managedIdpsData?.filter(
+        (i) => i.alias === value || i.displayName === value
+      )
+      setIdpsManagedData(searchFilter)
+      setSearchExpr(value)
+    } else setIdpsManagedData(managedIdpsData)
+  }
+
+  const style = {
+    '.MuiDataGrid-columnHeadersInner': {
+      fontSize: '16px',
+      fontWeight: '400',
+      backgroundColor: '#E9E9E9',
+    },
+    '.MuiDataGrid-row': {
+      fontSize: '14px',
+      fontWeight: '400',
+    },
+  }
+
   return (
     <Table
-      rowsCount={idpsData?.length}
+      rowsCount={isManagementOSP ? idpsManagedData?.length : idpsData?.length}
       hideFooter
       loading={isFetching}
       disableRowSelectionOnClick={true}
@@ -364,8 +396,12 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
       disableColumnSelector={true}
       disableDensitySelector={true}
       columnHeadersBackgroundColor={'#ffffff'}
-      title=""
-      toolbarVariant="ultimate"
+      title={
+        isManagementOSP
+          ? t('content.onboardingServiceProvider.ospIdentityProvider')
+          : ''
+      }
+      toolbarVariant={isManagementOSP ? undefined : 'ultimate'}
       columns={[
         {
           field: 'displayName',
@@ -425,15 +461,27 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
             isManagementOSP ? renderManagementOSPMenu(row) : renderMenu(row),
         },
       ]}
-      rows={
-        (isManagementOSP
-          ? idpsData?.filter(
-              (a) => a.identityProviderTypeId === IDPCategory.MANAGED
-            )
-          : idpsData) ?? []
-      }
+      rows={(isManagementOSP ? idpsManagedData : idpsData) ?? []}
       getRowId={(row: { [key: string]: string }) => row.identityProviderId}
       hasBorder={false}
+      searchPlaceholder={
+        isManagementOSP
+          ? t('content.onboardingServiceProvider.search')
+          : undefined
+      }
+      searchExpr={isManagementOSP ? searchExpr : undefined}
+      onSearch={
+        isManagementOSP
+          ? (expr: string) => {
+              isManagementOSP && onSearch(expr)
+              setSearchExpr(expr)
+            }
+          : undefined
+      }
+      searchDebounce={isManagementOSP ? 1000 : undefined}
+      onButtonClick={() => dispatch(show(OVERLAYS.ADD_IDP))}
+      buttonLabel={t('content.onboardingServiceProvider.addIdentityProvider')}
+      sx={isManagementOSP ? style : undefined}
     />
   )
 }

src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.scss

@@ -23,6 +23,12 @@
   width: 100%;
 }
 
+.ospm {
+  border: 1px solid #dcdcdc;
+  border-radius: 24px;
+  padding: 32px 0px 0px;
+}
+
 .onboarding-service-header {
   text-align: center;
   width: 100%;

src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.tsx

@@ -46,10 +46,6 @@ import {
   useUpdateRegistartionStatusCallbackMutation,
 } from 'features/admin/idpApiSlice'
 import ValidatingInput from 'components/shared/basic/Input/ValidatingInput'
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
-import { useDispatch } from 'react-redux'
-import { show } from 'features/control/overlay'
-import { OVERLAYS } from 'types/Constants'
 import { isIDPClientID, isIDPClientSecret, isURL } from 'types/Patterns'
 import { InputType } from 'components/shared/basic/Input/BasicInput'
 import { type IHashMap } from 'types/MainTypes'
@@ -60,8 +56,7 @@ const OnboardingServiceProvider = () => {
   const { t } = useTranslation()
   const [activeTab, setActiveTab] = useState<number>(0)
   const [overlayOpen, setOverlayOpen] = useState<boolean>(false)
-  const dispatch = useDispatch()
-  const { data } = useFetchRegistartionStatusCallbackQuery()
+  const { data, refetch } = useFetchRegistartionStatusCallbackQuery()
   const [loading, setLoading] = useState(false)
   const [updateRegistartionStatusCallback] =
     useUpdateRegistartionStatusCallbackMutation()
@@ -112,6 +107,8 @@ const OnboardingServiceProvider = () => {
       await updateRegistartionStatusCallback(callbackData).unwrap()
       success(t('content.onboardingServiceProvider.success'))
       setOverlayOpen(false)
+      setCallbackData(undefined)
+      refetch()
     } catch (err) {
       setShowError(true)
     }
@@ -348,22 +345,12 @@ const OnboardingServiceProvider = () => {
           />
         </Tabs>
         <TabPanel value={activeTab} index={0}>
-          <div className="connector-table-container">
-            <Box sx={{ display: 'flex' }}>
-              <Typography variant="h5" sx={{ mr: 5 }}>
-                {t('content.onboardingServiceProvider.userList')}
-              </Typography>
-              <Button
-                size="small"
-                startIcon={<AddCircleOutlineIcon />}
-                onClick={() => dispatch(show(OVERLAYS.ADD_IDP))}
-                className="add-idp-btn"
-              >
-                {t('content.onboardingServiceProvider.addIdentityProvider')}
-              </Button>
-            </Box>
+          <Box
+            className="connector-table-container"
+            sx={{ border: '1px solid #DCDCDC', borderRadius: '24px' }}
+          >
             <IDPList isManagementOSP={true} />
-          </div>
+          </Box>
         </TabPanel>
         <TabPanel value={activeTab} index={1}>
           <div className="connector-table-container">

src/components/shared/frame/Header/index.tsx

@@ -98,7 +98,7 @@ export const Header = ({
     } else {
       setPages(
         user.filter(
-          (item) => item !== PAGES.MANAGEMENT_ONBOARDING_SERVICE_PROVIDER
+          (item) => item !== PAGES.ONBOARDING_SERVICE_PROVIDER_MANAGEMENT
         )
       )
     }

src/types/Config.tsx

@@ -604,7 +604,7 @@ export const ALL_PAGES: IPage[] = [
     element: <CompanyData />,
   },
   {
-    name: PAGES.MANAGEMENT_ONBOARDING_SERVICE_PROVIDER,
+    name: PAGES.ONBOARDING_SERVICE_PROVIDER_MANAGEMENT,
     allowTo: () => userHasPortalRole(ROLES.CONFIGURE_PARTNER_REGISTRATION),
     element: <OnboardingServiceProvider />,
   },
@@ -845,7 +845,7 @@ export const userMenuFull = [
   PAGES.COMPANY_CERTIFICATE,
   PAGES.COMPANY_WALLET,
   PAGES.COMPANY_DATA,
-  PAGES.MANAGEMENT_ONBOARDING_SERVICE_PROVIDER,
+  PAGES.ONBOARDING_SERVICE_PROVIDER_MANAGEMENT,
   PAGES.LOGOUT,
 ]
 
@@ -867,7 +867,7 @@ export const userMenuCompany = [
   PAGES.COMPANY_CERTIFICATE,
   PAGES.COMPANY_WALLET,
   PAGES.COMPANY_DATA,
-  PAGES.MANAGEMENT_ONBOARDING_SERVICE_PROVIDER,
+  PAGES.ONBOARDING_SERVICE_PROVIDER_MANAGEMENT,
 ]
 
 /**

src/types/Constants.ts

@@ -108,7 +108,7 @@ export enum PAGES {
   COMPANY_SUBSCRIPTIONS = 'companySubscriptions',
   COMPANY_SUBSCRIPTIONS_DETAIL = 'companySubscriptionsDetail',
   COMPANY_DATA = 'companyData',
-  MANAGEMENT_ONBOARDING_SERVICE_PROVIDER = 'ManagementOnboardingServiceProvider',
+  ONBOARDING_SERVICE_PROVIDER_MANAGEMENT = 'onboardingServiceProviderManagement',
 }
 
 export enum OVERLAYS {