feat(ospm): add search to ospm table

eclipse-tractusx · Sep 20, 2024 · 6bcb421 · 6bcb421
1 parent 7e31363
commit 6bcb421
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 22 deletions.
diff --git a/src/components/pages/IDPManagement/IDPList.tsx b/src/components/pages/IDPManagement/IDPList.tsx
@@ -94,6 +94,10 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
     .sort((a: IdentityProvider, b: IdentityProvider) =>
       (a?.displayName ?? '').localeCompare(b.displayName ?? '')
     )
+  const [managedIdpData, setManagedIdpData] = useState(
+    idpsData?.filter((a) => a.identityProviderTypeId === IDPCategory.MANAGED)
+  )
+  const [expr, setExpr] = useState<string>('')
   const [removeIDP] = useRemoveIDPMutation()
   const [enableIDP] = useEnableIDPMutation()
 
@@ -353,6 +357,19 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
     )
   }
 
+  const onSearch = (value: string) => {
+    const idpManagedData = idpsData?.filter(
+      (a) => a.identityProviderTypeId === IDPCategory.MANAGED
+    )
+    if (value) {
+      const searchFilter = idpManagedData?.filter(
+        (i) => i.alias === value || i.displayName === value
+      )
+      setManagedIdpData(searchFilter)
+      setExpr(expr)
+    } else setManagedIdpData(idpManagedData)
+  }
+
   return (
     <Table
       rowsCount={idpsData?.length}
@@ -365,7 +382,7 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
       disableDensitySelector={true}
       columnHeadersBackgroundColor={'#ffffff'}
       title=""
-      toolbarVariant="ultimate"
+      toolbarVariant={isManagementOSP ? 'searchAndFilter' : 'ultimate'}
       columns={[
         {
           field: 'displayName',
@@ -425,15 +442,39 @@ export const IDPList = ({ isManagementOSP }: { isManagementOSP?: boolean }) => {
             isManagementOSP ? renderManagementOSPMenu(row) : renderMenu(row),
         },
       ]}
-      rows={
-        (isManagementOSP
-          ? idpsData?.filter(
-              (a) => a.identityProviderTypeId === IDPCategory.MANAGED
-            )
-          : idpsData) ?? []
-      }
+      rows={(isManagementOSP ? managedIdpData : idpsData) ?? []}
       getRowId={(row: { [key: string]: string }) => row.identityProviderId}
       hasBorder={false}
+      searchPlaceholder={isManagementOSP ? 'search' : undefined}
+      searchExpr={isManagementOSP ? expr : undefined}
+      onSearch={
+        isManagementOSP
+          ? (expr: string) => {
+              isManagementOSP && onSearch(expr)
+              setExpr(expr)
+            }
+          : undefined
+      }
+      searchDebounce={isManagementOSP ? 1000 : undefined}
+      sx={
+        isManagementOSP
+          ? {
+              '.cx-search-input': {
+                right: '10px',
+                position: 'absolute',
+              },
+              '.MuiDataGrid-columnHeadersInner': {
+                fontSize: '16px',
+                fontWeight: '400',
+                backgroundColor: '#E9E9E9',
+              },
+              '.MuiDataGrid-row': {
+                fontSize: '14px',
+                fontWeight: '400',
+              },
+            }
+          : undefined
+      }
     />
   )
 }
diff --git a/src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.scss b/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%;

diff --git a/src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.tsx b/src/components/pages/OnboardingServiceProvider/OnboardingServiceProvider.tsx
@@ -349,20 +349,22 @@ 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 className="ospm">
+              <Box sx={{ display: 'flex' }}>
+                <Button
+                  size="small"
+                  startIcon={<AddCircleOutlineIcon />}
+                  onClick={() => dispatch(show(OVERLAYS.ADD_IDP))}
+                  className="add-idp-btn"
+                  sx={{ marginLeft: '10px' }}
+                >
+                  {t('content.onboardingServiceProvider.addIdentityProvider')}
+                </Button>
+              </Box>
+              <Box sx={{ mt: '-100px' }}>
+                <IDPList isManagementOSP={true} />
+              </Box>
             </Box>
-            <IDPList isManagementOSP={true} />
           </div>
         </TabPanel>
         <TabPanel value={activeTab} index={1}>
@@ -400,7 +402,7 @@ const OnboardingServiceProvider = () => {
                   flex: 1,
                   sortable: false,
                   renderCell: ({ row }: { row: networkCompany }) =>
-                    row?.identityProvider?.[0].alias,
+                    row?.identityProvider?.[0]?.alias,
                 },
                 {
                   field: 'activeUsers',