feat(technical integration): technical user profile improvements

src/assets/locales/de/main.json

@@ -1326,10 +1326,12 @@
         "technicalUserSetupMandatory": "Bitte wählen Sie mindestens ein technisches Benutzer-Setup aus",
         "roleDeleteSuccessMessage": "Role deleted successfully",
         "technicalUserProfileError": "Error while updating technical user profiles",
+        "technicalUserProfileDeleteError": "Fehler beim Löschen des technischen Benutzerprofils",
         "roleUpdateError": "Error while updating roles",
         "encoding": "Encoding(select supported encoding)",
         "encodingPlaceholder": "Select supported encoding",
         "noneOption": "Nicht notwendig (für die Integration ist kein technisches Benutzerprofil notwendig)",
+        "userProfileDeleteSuccessMessage": "Technisches Benutzerprofil erfolgreich gelöscht",
         "table": {
           "addtechUserButton": "Technisches Benutzerprofil hinzufügen",
           "title": "Technisches Benutzerprofil",
@@ -1347,6 +1349,10 @@
           "externalUserRoles": "Externer technischer Benutzer",
           "externalUserRolesDescription": "Externe technische Benutzerprofile werden in einer externen Umgebung erstellt und können daher nur eine Rolle haben",
           "userDetailsNotVisible": "Technische Benutzerdaten sind für die abonnierenden Kunden nicht sichtbar."
+        },
+        "deleteOverlay": {
+          "title": "Technisches Benutzerprofil löschen",
+          "description": "Sind Sie sicher, dass Sie das ausgewählte technische Benutzerprofil löschen möchten?"
         }
       },
       "betaTest": {

src/assets/locales/de/servicerelease.json

@@ -64,7 +64,9 @@
     "headerDescription": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard .",
     "technicalUserSetupMandatory": "Bitte wählen Sie mindestens ein technisches Benutzer-Setup aus",
     "technicalUserProfileError": "Error while updating technical user profiles",
-    "noneOption": "Nicht notwendig (für die Integration ist kein technischer User notwendig)"
+    "technicalUserProfileDeleteError": "Fehler beim Löschen des technischen Benutzerprofils",
+    "noneOption": "Nicht notwendig (für die Integration ist kein technischer User notwendig)",
+    "userProfileDeleteSuccessMessage": "Technisches Benutzerprofil erfolgreich gelöscht"
   },
   "step4": {
     "headerTitle": "Validate & Publish",

src/assets/locales/en/main.json

@@ -1326,10 +1326,12 @@
         "technicalUserSetupMandatory": "Please select at least one technical userprofile setup",
         "roleDeleteSuccessMessage": "Role deleted successfully",
         "technicalUserProfileError": "Error while updating technical user profiles",
+        "technicalUserProfileDeleteError": "Error while deleting technical user profile",
         "roleUpdateError": "Error while updating roles",
         "encoding": "Encoding(select supported encoding)",
         "encodingPlaceholder": "Select supported encoding",
         "noneOption": "none (no technical userprofile needed to run the app/service)",
+        "userProfileDeleteSuccessMessage": "Technical userprofile deleted successfully",
         "table": {
           "addtechUserButton": "Add Technical Userprofile",
           "title": "Technical Userprofile",
@@ -1347,6 +1349,10 @@
           "externalUserRoles": "External technical userprofile",
           "externalUserRolesDescription": "External technical userprofile are created in external environment therefore can only have one role",
           "userDetailsNotVisible": "Technical user details won't be visible to the subscribing customers"
+        },
+        "deleteOverlay": {
+          "title": "Delete technical userprofile",
+          "description": "Are you sure you want to delete selected technical userprofile?"
         }
       },
       "betaTest": {

src/assets/locales/en/servicerelease.json

@@ -64,7 +64,9 @@
     "headerDescription": "Setup the technical profile of a technical user/service account of needed permissions to be able to run the application inside the dataspace. Select minimum one permission, the selected permission(s) will be stored as service technical user profile and used to create technical users for subscription activations.",
     "technicalUserSetupMandatory": "Please select at least one technical user permission for the service tech user profile",
     "technicalUserProfileError": "Error while updating technical user profiles",
-    "noneOption": "none (no technical user needed to run the app/service)"
+    "technicalUserProfileDeleteError": "Error while deleting technical user profile",
+    "noneOption": "none (no technical user needed to run the app/service)",
+    "userProfileDeleteSuccessMessage": "Technical userprofile deleted successfully"
   },
   "step4": {
     "headerTitle": "Validate & Publish",

src/components/shared/basic/ReleaseProcess/OfferTechnicalIntegration/index.tsx

@@ -46,6 +46,7 @@ import { error, success } from 'services/NotifyService'
 import { TechUserTable } from '../TechnicalIntegration/TechUserTable'
 import { AddTechUserForm } from '../TechnicalIntegration/AddTechUserForm'
 import { type TechnicalUserProfiles } from 'features/appManagement/types'
+import DeleteTechnicalUserProfileOverlay from '../TechnicalIntegration/DeleteTechnicalUserProfileOverlay'
 
 export default function OfferTechnicalIntegration() {
   const { t } = useTranslation('servicerelease')
@@ -71,6 +72,8 @@ export default function OfferTechnicalIntegration() {
   const [saveServiceTechnicalUserProfiles] =
     useSaveServiceTechnicalUserProfilesMutation()
   const serviceTechnicalUserNone = 'NONE'
+  const [deleteTechnicalUserProfile, setDeleteTechnicalUserProfile] =
+    useState<boolean>(false)
 
   const userProfiles = useMemo(
     () => data?.[0]?.userRoles.map((i: { roleId: string }) => i.roleId) ?? [],
@@ -182,7 +185,7 @@ export default function OfferTechnicalIntegration() {
       serviceId,
       body,
     }
-    handleApiCall(updateData)
+    handleApiCall(updateData, 'delete')
   }
 
   const handletechUserProfiles = (roles: string[]) => {
@@ -195,27 +198,50 @@ export default function OfferTechnicalIntegration() {
           ? []
           : getBodyParams(roles),
     }
-    handleApiCall(updateData)
+    handleApiCall(updateData, 'update')
   }
 
-  const handleApiCall = async (updateData: updateTechnicalUserProfile) => {
+  const handleApiCall = async (
+    updateData: updateTechnicalUserProfile,
+    action: string
+  ) => {
     await saveServiceTechnicalUserProfiles(updateData)
       .unwrap()
       .then(() => {
         setErrorMessage(false)
         refetch()
-        success(t('serviceReleaseForm.dataSavedSuccessMessage'))
+        action === 'delete'
+          ? success(t('technicalIntegration.userProfileDeleteSuccessMessage'))
+          : success(t('serviceReleaseForm.dataSavedSuccessMessage'))
       })
       .catch((err) => {
-        error(t('technicalIntegration.technicalUserProfileError'), '', err)
+        error(
+          t(
+            `technicalIntegration.${action === 'delete' ? 'technicalUserProfileDeleteError' : 'technicalUserProfileError'}`
+          ),
+          '',
+          err
+        )
       })
+    action === 'delete' && setDeleteTechnicalUserProfile(false)
     setLoading(false)
     setAddNewTechUserProfile(false)
     setSelectedTechUser(null)
   }
 
   return (
     <>
+      {deleteTechnicalUserProfile && (
+        <DeleteTechnicalUserProfileOverlay
+          openDialog
+          handleDeleteClick={() => {
+            selectedTechUser && handleDelete(selectedTechUser)
+          }}
+          handleOverlayClose={() => {
+            setDeleteTechnicalUserProfile(false)
+          }}
+        />
+      )}
       <Typography variant="h3" mt={10} mb={4} align="center">
         {t('technicalIntegration.headerTitle')}
       </Typography>
@@ -241,7 +267,8 @@ export default function OfferTechnicalIntegration() {
               setShowAddTechUser(true)
             }}
             handleDelete={(row: TechnicalUserProfiles) => {
-              handleDelete(row)
+              setDeleteTechnicalUserProfile(true)
+              setSelectedTechUser(row)
             }}
           />
         )}

src/components/shared/basic/ReleaseProcess/TechnicalIntegration/DeleteTechnicalUserProfileOverlay.tsx

@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useTranslation } from 'react-i18next'
+import {
+  Dialog,
+  DialogContent,
+  Button,
+  DialogActions,
+  DialogHeader,
+} from '@catena-x/portal-shared-components'
+interface DeleteOverlayProps {
+  openDialog?: boolean
+  handleOverlayClose: React.MouseEventHandler
+  handleDeleteClick: React.MouseEventHandler
+}
+
+const DeleteTechnicalUserProfileOverlay = ({
+  openDialog = false,
+  handleOverlayClose,
+  handleDeleteClick,
+}: DeleteOverlayProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <Dialog
+        open={openDialog}
+        sx={{
+          '.MuiDialog-paper': {
+            maxWidth: '45%',
+          },
+        }}
+      >
+        <DialogHeader
+          title={t(
+            'content.apprelease.technicalIntegration.deleteOverlay.title'
+          )}
+        />
+        <DialogContent
+          sx={{
+            textAlign: 'center',
+            padding: '40px 80px 45px 80px',
+          }}
+        >
+          {t(
+            'content.apprelease.technicalIntegration.deleteOverlay.description'
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="outlined"
+            onClick={(e) => {
+              handleOverlayClose(e)
+            }}
+          >
+            {t('global.actions.cancel')}
+          </Button>
+          <Button
+            variant="contained"
+            onClick={(e) => {
+              handleDeleteClick(e)
+            }}
+          >
+            {t('global.actions.delete')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+export default DeleteTechnicalUserProfileOverlay

src/components/shared/basic/ReleaseProcess/TechnicalIntegration/TechUserTable.tsx

@@ -18,7 +18,7 @@
  ********************************************************************************/
 
 import { t } from 'i18next'
-import { Table } from '@catena-x/portal-shared-components'
+import { Table, Tooltips } from '@catena-x/portal-shared-components'
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
 import { Box } from '@mui/material'
@@ -89,11 +89,40 @@ export const TechUserTable = ({
         {
           field: 'roleName',
           headerAlign: 'center',
-          align: 'center',
+          align: 'left',
           headerName: t('content.apprelease.technicalIntegration.table.role'),
           flex: disableActions ? 2.5 : 2,
-          valueGetter: ({ row }: { row: TechnicalUserProfiles }) =>
-            row.userRoles.map((x) => x.roleName.split('"')).toString(),
+          renderCell: ({ row }: { row: TechnicalUserProfiles }) => {
+            const roleNames = row.userRoles.map((role) => role.roleName)
+            const roles = roleNames.join(', ')
+            const charLimit = 200 / 10
+            const maxLength = Math.floor(charLimit)
+            let displayedRoles = roles
+            let remainingCount = 0
+            if (roles.length > maxLength) {
+              displayedRoles = roles.slice(0, maxLength) + '...'
+              remainingCount =
+                roleNames.length - displayedRoles.split(',').length
+            }
+            return (
+              <Tooltips
+                additionalStyles={{
+                  display: 'block',
+                }}
+                tooltipPlacement="top-start"
+                tooltipText={row.userRoles
+                  .map((role) => role.roleName)
+                  .join(', ')}
+                children={
+                  <span>
+                    {remainingCount > 0
+                      ? displayedRoles + ' +' + remainingCount
+                      : displayedRoles}
+                  </span>
+                }
+              />
+            )
+          },
         },
         {
           field: 'edit',