fix(appsubscription): fix technical user detail page url issue (eclip…

…se-tractusx#825)
manojava-gk · May 24, 2024 · b5c8b93 · b5c8b93
1 parent 8b6ee5e
commit b5c8b93
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@
 
 - App Subscription
   - Blank Page fix on autosetup call
+- App Subscription Detail
+  - fix opening the correct technical user by ID
 
 ## 2.0.0-RC8
 

diff --git a/DEPENDENCIES b/DEPENDENCIES
@@ -599,7 +599,7 @@ npm/npmjs/@babel/template/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@babel/traverse/7.24.1, MIT AND (BSD-2-Clause AND ISC AND MIT) AND BSD-2-Clause AND BSD-3-Clause, approved, #13926
 npm/npmjs/@babel/types/7.24.0, MIT, approved, clearlydefined
 npm/npmjs/@bcoe/v8-coverage/0.2.3, ISC AND MIT, approved, clearlydefined
-npm/npmjs/@catena-x/portal-shared-components/3.0.12, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
+npm/npmjs/@catena-x/portal-shared-components/3.0.16, Apache-2.0 AND CC-BY-4.0 AND OFL-1.1, approved, #14247
 npm/npmjs/@cspotcode/source-map-support/0.8.1, MIT, approved, clearlydefined
 npm/npmjs/@date-io/core/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/@date-io/date-fns/3.0.0, MIT, approved, #14023

diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
     ]
   },
   "dependencies": {
-    "@catena-x/portal-shared-components": "^3.0.12",
+    "@catena-x/portal-shared-components": "^3.0.16",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@hookform/error-message": "^2.0.1",

diff --git a/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/index.tsx b/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/index.tsx
@@ -26,7 +26,12 @@ import {
   PageSnackbar,
   StaticTable,
   type TableType,
+  type VerticalTableType,
   Typography,
+  VerticalTableNew,
+  EditField,
+  type TableCellType,
+  Tooltips,
 } from '@catena-x/portal-shared-components'
 import {
   ProcessStep,
@@ -43,6 +48,8 @@ import { SuccessErrorType } from 'features/admin/appuserApiSlice'
 import { isURL } from 'types/Patterns'
 import { SubscriptionTypes } from 'components/shared/templates/Subscription'
 import { useFetchServiceSubDetailQuery } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
+import { Link } from 'react-router-dom'
 
 interface AppSubscriptionDetailProps {
   openDialog: boolean
@@ -154,17 +161,91 @@ const AppSubscriptionDetailOverlay = ({
     ],
   }
 
-  const bodyData = [
+  const renderTooltipText = (value: string, tooltipText: string) => {
+    return (
+      <span style={{ display: 'flex', flexDirection: 'row' }}>
+        <Typography variant="body3">{value}</Typography>
+        <Tooltips
+          color="dark"
+          tooltipPlacement="bottom-start"
+          tooltipText={tooltipText}
+        >
+          <HelpOutlineIcon
+            sx={{
+              width: '2em',
+              fontSize: '19px',
+              color: '#888888',
+              cursor: 'pointer',
+              paddingTop: '2px',
+              '&:hover': {
+                color: '#0088CC',
+              },
+            }}
+          />
+        </Tooltips>
+      </span>
+    )
+  }
+
+  const renderTechnicalName = (technicalData: TechnicalUserData[]) => (
+    <>
+      {technicalData.map((data) => (
+        <Link
+          target="_blank"
+          to={`/techuserdetails/${data.id}`}
+          style={{
+            textDecoration: 'none',
+          }}
+          key={data.id}
+        >
+          <Typography
+            variant="body3"
+            sx={{
+              color: '#0088CC',
+              cursor: 'pointer',
+            }}
+          >
+            {data.name}
+          </Typography>
+        </Link>
+      ))}
+    </>
+  )
+
+  const renderTenantUrl = (url: string) => {
+    if (
+      isAppSubscription &&
+      UserService.hasRole(ROLES.APPSTORE_EDIT) &&
+      data?.offerSubscriptionStatus === SubscriptionStatus.ACTIVE
+    ) {
+      return (
+        <EditField
+          value={url ?? ''}
+          isValid={(value: string) => isURL(value)}
+          handleEdit={(url: string | number | boolean) =>
+            handleSaveURL(url as string)
+          }
+          errorMessage={t('content.appSubscription.pleaseEnterValidURL')}
+        />
+      )
+    } else return url
+  }
+
+  const bodyData: TableCellType[][] = [
     [
-      `${t('content.appSubscription.detailOverlay.technicalName')}`,
+      renderTooltipText(
+        t('content.appSubscription.detailOverlay.technicalName'),
+        t('content.appSubscription.detailOverlay.technicalNameInfo')
+      ),
       data?.technicalUserData.length
-        ? data?.technicalUserData
-            .map((userdata: TechnicalUserData) => userdata.name)
-            .toString()
+        ? renderTechnicalName(data?.technicalUserData)
         : getTechnicalValue(),
     ],
     [
-      `${t('content.appSubscription.detailOverlay.technicalPermission')}`,
+      renderTooltipText(
+        t('content.appSubscription.detailOverlay.technicalPermission'),
+        t('content.appSubscription.detailOverlay.technicalPermissionInfo')
+      ),
       data?.technicalUserData.length
         ? data?.technicalUserData
             .map((userdata: TechnicalUserData) => userdata.permissions)
@@ -176,79 +257,22 @@ const AppSubscriptionDetailOverlay = ({
   if (isAppSubscription) {
     bodyData.unshift(
       [
-        `${t('content.appSubscription.detailOverlay.appTenantUrl')}`,
-        data?.tenantUrl ?? '',
+        t('content.appSubscription.detailOverlay.appTenantUrl'),
+        renderTenantUrl(data?.tenantUrl ?? ''),
       ],
       [
-        `${t('content.appSubscription.detailOverlay.appId')}`,
+        renderTooltipText(
+          t('content.appSubscription.detailOverlay.appId'),
+          t('content.appSubscription.detailOverlay.appIdInfo')
+        ),
         data?.appInstanceId ?? getTechnicalValue(),
       ]
     )
   }
 
-  const getTechnicalName = () => {
-    if (isAppSubscription) return ''
-    else return t('content.appSubscription.detailOverlay.technicalNameInfo')
-  }
-
-  const technicalDetails: TableType = {
+  const technicalDetails: VerticalTableType = {
     head: [t('content.appSubscription.detailOverlay.technicalDetails'), ''],
     body: bodyData,
-    edit: [
-      [
-        {
-          icon: !isAppSubscription,
-          inputValue: getTechnicalName(),
-        },
-        {
-          icon:
-            isAppSubscription &&
-            UserService.hasRole(ROLES.APPSTORE_EDIT) &&
-            data?.offerSubscriptionStatus === SubscriptionStatus.ACTIVE,
-          inputValue: data?.tenantUrl ?? '',
-          isValid: (value: string) => isURL(value),
-          errorMessage: t('content.appSubscription.pleaseEnterValidURL'),
-        },
-      ],
-      [
-        {
-          icon: true,
-          inputValue: isAppSubscription
-            ? t('content.appSubscription.detailOverlay.appIdInfo')
-            : t(
-                'content.appSubscription.detailOverlay.technicalPermissionInfo'
-              ),
-        },
-        {
-          icon: false,
-        },
-      ],
-      [
-        {
-          icon: true,
-          inputValue: t(
-            'content.appSubscription.detailOverlay.technicalNameInfo'
-          ),
-        },
-        {
-          icon: false,
-          clickableLink: data?.technicalUserData[0]?.id
-            ? `/techuserdetails/${data?.technicalUserData[0]?.id}`
-            : undefined,
-        },
-      ],
-      [
-        {
-          icon: true,
-          inputValue: t(
-            'content.appSubscription.detailOverlay.technicalPermissionInfo'
-          ),
-        },
-        {
-          icon: false,
-        },
-      ],
-    ],
   }
 
   const getActiveSteps = () => {
@@ -328,10 +352,7 @@ const AppSubscriptionDetailOverlay = ({
             <StaticTable data={subscriptionDetails} />
           </div>
           <div style={{ marginTop: '20px' }}>
-            <StaticTable
-              data={technicalDetails}
-              handleEdit={(url) => handleSaveURL(url)}
-            />
+            <VerticalTableNew data={technicalDetails} />
           </div>
           <div style={{ marginTop: '20px' }}>
             <Typography

diff --git a/yarn.lock b/yarn.lock
@@ -336,10 +336,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@catena-x/portal-shared-components@^3.0.12":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.12.tgz#c8dbfe05c4adab19a9ca06e3ba60142b4d03a3a8"
-  integrity sha512-t6hcg/+koQgVYz6GsgPfCs9MbS1pR/i96JgTjlI3zbbFmttbZr/jTwTvJxg0Jb4igjSATL3tBuT5Dk6hNQQFAg==
+"@catena-x/portal-shared-components@^3.0.16":
+  version "3.0.16"
+  resolved "https://registry.yarnpkg.com/@catena-x/portal-shared-components/-/portal-shared-components-3.0.16.tgz#1a397ca1038ebbec08b01bd554c39c50aa430964"
+  integrity sha512-yUsuC7LFjKZdAmX3qLqMKPhAa9lafLRWjJLQ2Yujt1rZDcKX1jo52j/IA0fQb1H2olEWPmMsbCCeoFe9g26oFg==
   dependencies:
     "@date-io/date-fns" "^3.0.0"
     "@emotion/react" "^11.11.4"