feat(subscription): add hover information on the status icon

CHANGELOG.md

@@ -8,6 +8,8 @@
   - 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)
+- - **App & Service Subcription Managment**
+  - Search place holder text updated, Show only available offer names at the top and Implement Hover-Information on the Status Icon of serviceSubscription[#1130](https://github.com/eclipse-tractusx/portal-frontend/pull/1130)
 
 ### Bugfixes
 

DEPENDENCIES

@@ -609,16 +609,16 @@ npm/npmjs/@emotion/babel-plugin/11.11.0, MIT, approved, #8386
 npm/npmjs/@emotion/cache/11.11.0, MIT, approved, #8401
 npm/npmjs/@emotion/hash/0.9.1, MIT, approved, #8394
 npm/npmjs/@emotion/hash/0.9.2, MIT, approved, #8394
-npm/npmjs/@emotion/is-prop-valid/1.3.0, MIT, approved, clearlydefined
+npm/npmjs/@emotion/is-prop-valid/1.3.0, MIT AND (BSD-2-Clause AND MIT), approved, #16339
 npm/npmjs/@emotion/memoize/0.8.1, MIT, approved, #8408
 npm/npmjs/@emotion/memoize/0.9.0, MIT, approved, clearlydefined
 npm/npmjs/@emotion/react/11.11.4, MIT AND (BSD-3-Clause AND MIT), approved, #8931
-npm/npmjs/@emotion/serialize/1.3.0, MIT, approved, clearlydefined
+npm/npmjs/@emotion/serialize/1.3.0, MIT AND (BSD-2-Clause AND MIT), approved, #16340
 npm/npmjs/@emotion/sheet/1.2.2, MIT, approved, #8389
 npm/npmjs/@emotion/styled/11.11.5, MIT, approved, clearlydefined
 npm/npmjs/@emotion/unitless/0.9.0, MIT, approved, clearlydefined
 npm/npmjs/@emotion/use-insertion-effect-with-fallbacks/1.0.1, MIT, approved, #8419
-npm/npmjs/@emotion/utils/1.4.0, MIT, approved, clearlydefined
+npm/npmjs/@emotion/utils/1.4.0, MIT AND (BSD-2-Clause AND MIT), approved, #16344
 npm/npmjs/@emotion/weak-memoize/0.3.1, MIT, approved, #8402
 npm/npmjs/@esbuild/aix-ppc64/0.20.2, MIT, approved, clearlydefined
 npm/npmjs/@esbuild/android-arm/0.20.2, Apache-2.0 AND MIT AND BSD-3-Clause AND (BSD-2-Clause AND BSD-3-Clause), approved, #15302

src/assets/locales/de/main.json

@@ -1488,6 +1488,9 @@
       "pleaseEnterValidURL": "Please enter a valid URL",
       "error": "Error",
       "success": "Success",
+      "pending": "Das Abonnement steht noch aus",
+      "active": "Das Abonnement ist aktiv",
+      "process": "Das Abonnement ist in Bearbeitung",
       "tabs": {
         "request": "Request",
         "active": "Active",

src/assets/locales/en/main.json

@@ -1456,6 +1456,9 @@
       "pleaseEnterValidURL": "Please enter a valid URL",
       "error": "Error",
       "success": "Success",
+      "pending": "Subscription is Pending",
+      "active": "Subscription is Active",
+      "process": "Subscription is in Progress",
       "tabs": {
         "request": "Request",
         "active": "Active",

src/components/shared/templates/Subscription/SubscriptionElements.tsx

@@ -178,7 +178,15 @@ export default function SubscriptionElements({
     subscription: CompanySubscriptionData
   ) => {
     if (subscription.offerSubscriptionStatus === SubscriptionStatus.ACTIVE) {
-      return <AddTaskIcon className="statusIcon active" />
+      return (
+        <Tooltips
+          color="dark"
+          tooltipPlacement="top-start"
+          tooltipText={t('content.appSubscription.active')}
+        >
+          <AddTaskIcon className="statusIcon active" />
+        </Tooltips>
+      )
     } else if (
       subscription.offerSubscriptionStatus === SubscriptionStatus.PENDING
     ) {
@@ -211,7 +219,13 @@ export default function SubscriptionElements({
                     })
               }}
             />
-            <HistoryIcon className="statusIcon pending" />
+            <Tooltips
+              color="dark"
+              tooltipPlacement="top-start"
+              tooltipText={t('content.appSubscription.pending')}
+            >
+              <HistoryIcon className="statusIcon pending" />
+            </Tooltips>
           </>
         )
       } else if (
@@ -226,16 +240,28 @@ export default function SubscriptionElements({
               variant="filled"
               onClick={() => handleActivate(subscription.subscriptionId)}
             />
-            <HistoryIcon className="statusIcon pending" />
+            <Tooltips
+              color="dark"
+              tooltipPlacement="top-start"
+              tooltipText={t('content.appSubscription.pending')}
+            >
+              <HistoryIcon className="statusIcon pending" />
+            </Tooltips>
           </>
         )
       } else {
         return (
-          <img
-            src={`${getAssetBase()}/images/icons/process.svg`}
-            className="statusIcon"
-            alt="subscription process"
-          />
+          <Tooltips
+            color="dark"
+            tooltipPlacement="top-start"
+            tooltipText={t('content.appSubscription.process')}
+          >
+            <img
+              src={`${getAssetBase()}/images/icons/process.svg`}
+              className="statusIcon"
+              alt="subscription process"
+            />
+          </Tooltips>
         )
       }
     } else {