Merge branch 'main' of https://github.com/lavanya-bmw/portal-frontend …

…into feat/541/osp-management
eclipse-tractusx · Sep 24, 2024 · 4238a96 · 4238a96
2 parents 118a2fc + 6a45e6a
commit 4238a96
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,19 @@
 
 ### Change
 
+- **Technical User Details**
+  - updated technical user details with user type and service endpoint fields. Also, updated copy icon color for better view and made copy icon available only when value is available [#1137](https://github.com/eclipse-tractusx/portal-frontend/pull/1137)
+- **Company Subscriptions**
+  - update API query parameters and fix tab UI scroll [#1131](https://github.com/eclipse-tractusx/portal-frontend/pull/1131)
 - **Onboarding Service Provider Management**
   - Added search to ospm table[#1132](https://github.com/eclipse-tractusx/portal-frontend/pull/1132)
 
+### Bugfixes
+
+- **Connector Management**
+  - fixed overlay enabling on click of managed connectors(details) [#1142](https://github.com/eclipse-tractusx/portal-frontend/pull/1142)
+  - fixed customer link selection and fixed resetting values [#1119](https://github.com/eclipse-tractusx/portal-frontend/pull/1119)
+
 ## 2.2.0-alpha.1
 
 ### Bugfixes

diff --git a/src/components/pages/CompanySubscriptions/index.tsx b/src/components/pages/CompanySubscriptions/index.tsx
@@ -252,7 +252,7 @@ export default function CompanySubscriptions() {
         <Tabs
           value={currentActive}
           onChange={handleTabChange}
-          sx={{ margin: '0 18% 20px' }}
+          sx={{ margin: '0 auto 20px', maxWidth: '1110px', width: '100%' }}
         >
           <Tab
             iconPosition="start"

diff --git a/src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx b/src/components/pages/EdcConnector/AddConnectorOverlay/components/ConnectorInsertForm.tsx
@@ -33,7 +33,10 @@ import {
 } from '@catena-x/portal-shared-components'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import Patterns from 'types/Patterns'
-import { ConnectType } from 'features/connector/connectorApiSlice'
+import {
+  ConnectType,
+  type EdcSubscriptionsType,
+} from 'features/connector/connectorApiSlice'
 import { Dropzone } from '../../../../shared/basic/Dropzone'
 import { useEffect, useState } from 'react'
 import './EdcComponentStyles.scss'
@@ -245,6 +248,7 @@ const ConnectorInsertForm = ({
   control,
   trigger,
   getValues,
+  resetField,
   selectedService,
   subscriptions,
   fetchServiceAccountUsers,
@@ -258,7 +262,8 @@ any) => {
   const { t } = useTranslation()
   const [selectedValue, setSelectedValue] = useState<string>()
   const [serviceAccountUsers, setServiceAccountUsers] = useState([])
-  const [selectedTechnicalUser, setSelectedTechnicalUser] = useState('')
+  const [selectedTechnicalUser, setSelectedTechnicalUser] = useState({})
+  const [selectedCustomerLink, setSelectedCustomerLink] = useState({})
 
   useEffect(() => {
     if (fetchServiceAccountUsers)
@@ -274,10 +279,20 @@ any) => {
           i.serviceAccountId === getValues().ConnectorTechnicalUser
       )
     if (selectedConnectorTechnicalUser.length > 0) {
-      setSelectedTechnicalUser(selectedConnectorTechnicalUser[0]?.name)
+      setSelectedTechnicalUser(selectedConnectorTechnicalUser[0])
     }
   }, [serviceAccountUsers])
 
+  useEffect(() => {
+    const selectedCustomer: EdcSubscriptionsType[] = subscriptions?.filter(
+      (item: { subscriptionId: string }) =>
+        item.subscriptionId === getValues().ConnectorSubscriptionId
+    )
+    if (selectedCustomer.length > 0) {
+      setSelectedCustomerLink(selectedCustomer[0])
+    }
+  }, [subscriptions])
+
   const handleTechnicalUserSubmit = () => {
     if (
       selectedValue === t('content.edcconnector.modal.createNewTechnicalUser')
@@ -354,6 +369,12 @@ any) => {
                 )}
                 onChange={(event) => {
                   setSelectedValue(event.target.value)
+                  resetField('TechnicalUserName', {
+                    defaultValue: '',
+                  })
+                  resetField('TechnicalUserDescription', {
+                    defaultValue: '',
+                  })
                 }}
                 size="small"
                 sx={{
@@ -612,7 +633,7 @@ any) => {
                   'content.edcconnector.modal.insertform.subscription.error'
                 ),
                 items: subscriptions,
-                defaultSelectValue: {},
+                defaultSelectValue: selectedCustomerLink ?? {},
                 keyTitle: 'name',
               }}
             />

diff --git a/src/components/pages/EdcConnector/AddConnectorOverlay/index.tsx b/src/components/pages/EdcConnector/AddConnectorOverlay/index.tsx
@@ -109,6 +109,7 @@ const AddConnectorOverlay = ({
     handleSubmit,
     getValues,
     control,
+    resetField,
     trigger,
     formState: { errors },
     reset,
@@ -120,8 +121,10 @@ const AddConnectorOverlay = ({
   const [selected, setSelected] = useState<ConnectorType>({})
 
   useEffect(() => {
-    if (openDialog) reset(formFields)
-  }, [openDialog, reset])
+    if (openDialog || connectorStep === 0) {
+      reset(formFields)
+    }
+  }, [openDialog, reset, connectorStep])
 
   useEffect(() => {
     if (serviceAccounts && serviceAccounts?.meta?.totalPages > page) {
@@ -216,7 +219,14 @@ const AddConnectorOverlay = ({
                 setNewTechnicalUSer={setNewTechnicalUSer}
                 newUserLoading={newUserLoading}
                 newUserSuccess={newUserSuccess}
-                {...{ handleSubmit, control, errors, trigger, getValues }}
+                {...{
+                  handleSubmit,
+                  control,
+                  errors,
+                  trigger,
+                  getValues,
+                  resetField,
+                }}
               />
             </>
           )}
@@ -225,12 +235,9 @@ const AddConnectorOverlay = ({
           <Button
             variant="outlined"
             onClick={() => {
-              if (connectorStep === 1) {
-                onStepChange()
-              } else {
-                setSelected({})
-                handleOverlayClose()
-              }
+              if (connectorStep === 1) onStepChange()
+              else handleOverlayClose()
+              setSelected({})
             }}
           >
             {connectorStep === 0

diff --git a/src/components/pages/EdcConnector/index.tsx b/src/components/pages/EdcConnector/index.tsx
@@ -158,16 +158,12 @@ const EdcConnector = () => {
     setAddConnectorOverlayOpen(false)
   }
 
-  const onTableCellClick = (params: GridCellParams, title: string) => {
+  const onTableCellClick = (params: GridCellParams) => {
     // Show overlay only when detail field clicked
-    if (
-      params.field === 'details' &&
-      title === t('content.edcconnector.tabletitle')
-    ) {
+    if (params.field === 'details') {
       setOpenDetailsOverlay(true)
       setOverlayData(params.row)
     }
-
     setSelectedConnector(params.row as ConnectorContentAPIResponse)
   }
 
@@ -508,7 +504,7 @@ const EdcConnector = () => {
               getRowId={(row: { [key: string]: string }) => row.id}
               columns={ownConnectorCols}
               onCellClick={(params: GridCellParams) => {
-                onTableCellClick(params, t('content.edcconnector.tabletitle'))
+                onTableCellClick(params)
               }}
             />
           </div>
@@ -525,10 +521,7 @@ const EdcConnector = () => {
               columns={managedConnectorCols}
               noRowsMsg={t('content.edcconnector.noConnectorsMessage')}
               onCellClick={(params: GridCellParams) => {
-                onTableCellClick(
-                  params,
-                  t('content.edcconnector.managedtabletitle')
-                )
+                onTableCellClick(params)
               }}
             />
           </div>

diff --git a/src/components/pages/TechnicalUserDetails/TechnicalUserDetailsContent.tsx b/src/components/pages/TechnicalUserDetails/TechnicalUserDetailsContent.tsx
@@ -31,7 +31,6 @@ import {
   type ServiceAccountDetail,
   type ServiceAccountRole,
   useResetCredentialMutation,
-  UserType,
 } from 'features/admin/serviceApiSlice'
 import { OVERLAYS } from 'types/Constants'
 import { useDispatch } from 'react-redux'
@@ -52,11 +51,6 @@ export const statusColorMap: Record<
   [ServiceAccountStatus.PENDING_DELETION]: 'pending',
 }
 
-const userTypeMapping = {
-  [UserType.INTERNAL]: 'INTERNAL',
-  [UserType.EXTERNAL]: 'EXTERNAL',
-}
-
 const getValueWithTooltip = (value: string, tooltipTitle: string) => {
   return (
     value || (
@@ -129,10 +123,7 @@ export default function TechnicalUserDetailsContent({
     },
     {
       key: t('content.usermanagement.technicalUser.detailsPage.userType'),
-      value: getValueWithTooltip(
-        userTypeMapping[newData.usertype],
-        missingInformationHint
-      ),
+      value: getValueWithTooltip(newData.usertype, missingInformationHint),
       copy: false,
     },
     {

diff --git a/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx b/src/components/pages/TechnicalUserManagement/TechnicalUserTable.tsx
@@ -30,7 +30,6 @@ import {
   ServiceAccountStatus,
   ServiceAccountStatusFilter,
   useFetchServiceAccountListQuery,
-  UserType,
 } from 'features/admin/serviceApiSlice'
 import { useSelector } from 'react-redux'
 import { PAGES } from 'types/Constants'
@@ -45,11 +44,6 @@ interface FetchHookArgsType {
 }
 type StatusTagColor = 'pending' | 'confirmed' | 'label' | undefined
 
-const userTypeMapping = {
-  [UserType.INTERNAL]: 'INTERNAL',
-  [UserType.EXTERNAL]: 'EXTERNAL',
-}
-
 export const TechnicalUserTable = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -145,7 +139,7 @@ export const TechnicalUserTable = () => {
             headerName: t('global.field.userType'),
             flex: 1.2,
             valueGetter: ({ row }: { row: ServiceAccountListEntry }) =>
-              userTypeMapping[row.usertype] || '-',
+              row.usertype || '-',
           },
           {
             field: 'offer',

diff --git a/src/components/shared/basic/KeyValueView/index.tsx b/src/components/shared/basic/KeyValueView/index.tsx
@@ -70,9 +70,9 @@ export const KeyValueView = ({
         sx={{
           cursor: 'pointer',
           display: 'flex',
-          color: copied === item.value ? '#00cc00' : '#eeeeee',
+          color: copied === item.value ? '#00cc00' : '#888888',
           ':hover': {
-            color: copied === item.value ? '#00cc00' : '#cccccc',
+            color: copied === item.value ? '#00cc00' : '#0088CC',
           },
         }}
         onClick={async () => {
@@ -85,11 +85,14 @@ export const KeyValueView = ({
         }}
       >
         {renderValue(item.value ?? '')}
-        <ContentCopyIcon
-          sx={{
-            marginLeft: '10px',
-          }}
-        />
+        {item.value && (
+          <ContentCopyIcon
+            sx={{
+              marginLeft: '10px',
+              fontSize: '18px',
+            }}
+          />
+        )}
       </Box>
     ) : (
       <Box sx={{ marginRight: '34px', textAlign: 'left' }}>

diff --git a/src/features/admin/serviceApiSlice.ts b/src/features/admin/serviceApiSlice.ts
@@ -54,18 +54,13 @@ export enum ServiceAccountStatus {
   PENDING_DELETION = 'PENDING_DELETION',
 }
 
-export enum UserType {
-  INTERNAL = 'internal',
-  EXTERNAL = 'external',
-}
-
 export interface ServiceAccountListEntry {
   serviceAccountId: string
   clientId: string
   name: string
   status: ServiceAccountStatus
   isOwner?: boolean
-  usertype: UserType
+  usertype: string
   offer?: {
     name?: string
   }
@@ -84,7 +79,7 @@ export interface ServiceAccountDetail extends ServiceAccountListEntry {
   connector: ConnectedObject
   offer: ConnectedObject
   companyServiceAccountTypeId: companyServiceAccountType
-  usertype: UserType
+  usertype: string
   authenticationServiceUrl: string
 }
 

diff --git a/src/features/apps/apiSlice.ts b/src/features/apps/apiSlice.ts
@@ -176,11 +176,9 @@ export const apiSlice = createApi({
           body.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
             ? `&status=${body.args.statusId}`
             : ''
-        const companyName = body.args.expr
-          ? `&companyName=${body.args.expr}`
-          : ''
+        const name = body.args.expr ? `&name=${body.args.expr}` : ''
         return {
-          url: `${url}${statusId}${companyName}`,
+          url: `${url}${statusId}${name}`,
         }
       },
     }),

diff --git a/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts b/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
@@ -212,11 +212,9 @@ export const apiSlice = createApi({
           body.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
             ? `&status=${body.args.statusId}`
             : ''
-        const companyName = body.args.expr
-          ? `&companyName=${body.args.expr}`
-          : ''
+        const name = body.args.expr ? `&name=${body.args.expr}` : ''
         return {
-          url: `${url}${statusId}${companyName}`,
+          url: `${url}${statusId}${name}`,
         }
       },
     }),