From a2c7750c02ddb1a25f3cb2e386f8030e4354bc54 Mon Sep 17 00:00:00 2001
From: Damian Badura <damian.badura@sap.com>
Date: Fri, 19 Jul 2024 09:38:15 +0200
Subject: [PATCH] improve hint button

---
 src/components/Clusters/views/ClusterStorageType.js   |  1 -
 src/components/KymaModules/KymaModulesList.js         |  2 --
 src/shared/ResourceForm/components/FormField.js       |  1 -
 src/shared/ResourceForm/components/Title.js           |  1 -
 .../components/DescriptionHint/DescriptionHint.js     | 11 +++++++----
 .../DynamicPageComponent/DynamicPageComponent.js      |  1 -
 .../components/GenericList/Pagination/Pagination.js   |  1 -
 .../components/ResourceDetails/ResourceDetails.js     |  1 -
 8 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/Clusters/views/ClusterStorageType.js b/src/components/Clusters/views/ClusterStorageType.js
index dce7a56e35..fee05256a4 100644
--- a/src/components/Clusters/views/ClusterStorageType.js
+++ b/src/components/Clusters/views/ClusterStorageType.js
@@ -19,7 +19,6 @@ export function ClusterStorageType({ clusterConfig }) {
         setShowTitleDescription={setShowDescription}
         showTitleDescription={showDescription}
         description={tooltipContent}
-        context="storage-type"
       ></HintButton>
     </div>
   );
diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
index b4e37a60ad..0557b6c8ae 100644
--- a/src/components/KymaModules/KymaModulesList.js
+++ b/src/components/KymaModules/KymaModulesList.js
@@ -422,7 +422,6 @@ export function KymaModulesList(props) {
               setShowTitleDescription={setShowReleaseChannelTitleDescription}
               showTitleDescription={showReleaseChannelTitleDescription}
               description={ReleaseChannelDescription}
-              context="details-release-channel"
             />
           </FlexBox>
         </DynamicPageHeader>
@@ -443,7 +442,6 @@ export function KymaModulesList(props) {
               setShowTitleDescription={setShowTitleDescription}
               showTitleDescription={showTitleDescription}
               description={ResourceDescription}
-              context="modules"
             />
           }
         </>
diff --git a/src/shared/ResourceForm/components/FormField.js b/src/shared/ResourceForm/components/FormField.js
index c1036f179a..b8ae44fbe4 100644
--- a/src/shared/ResourceForm/components/FormField.js
+++ b/src/shared/ResourceForm/components/FormField.js
@@ -44,7 +44,6 @@ export function FormField({
               setShowTitleDescription={setOpenPopover}
               showTitleDescription={openPopover}
               description={tooltipContent}
-              context={props['data-testid'] ?? label}
               style={spacing.sapUiTinyMarginBegin}
             />
           )}
diff --git a/src/shared/ResourceForm/components/Title.js b/src/shared/ResourceForm/components/Title.js
index 2f3be64ce1..3444dc5303 100644
--- a/src/shared/ResourceForm/components/Title.js
+++ b/src/shared/ResourceForm/components/Title.js
@@ -37,7 +37,6 @@ export function Title({
             setShowTitleDescription={setOpenPopover}
             showTitleDescription={openPopover}
             description={tooltipContent}
-            context={title}
             style={spacing.sapUiTinyMarginBegin}
           />
         )}
diff --git a/src/shared/components/DescriptionHint/DescriptionHint.js b/src/shared/components/DescriptionHint/DescriptionHint.js
index cd6518b906..7d73d4d1a2 100644
--- a/src/shared/components/DescriptionHint/DescriptionHint.js
+++ b/src/shared/components/DescriptionHint/DescriptionHint.js
@@ -1,19 +1,21 @@
 import { Button, Popover, Text } from '@ui5/webcomponents-react';
 import { createPortal } from 'react-dom';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import { uniqueId } from 'lodash';
 
 export function HintButton({
   setShowTitleDescription,
   showTitleDescription,
   description,
   style,
-  context,
+  dataTestID = null,
 }) {
+  const [uniqueID] = useState(uniqueId('id-'));
   const descBtnRef = useRef(null);
   return (
     <>
       <Button
-        id={`descriptionOpener-${context}`}
+        id={`descriptionOpener-${uniqueID}`} //migrate to useID from react after upgrade to version 18+
         ref={descBtnRef}
         icon="hint"
         design="Transparent"
@@ -22,10 +24,11 @@ export function HintButton({
           e.stopPropagation();
           setShowTitleDescription(true);
         }}
+        data-testid={dataTestID}
       />
       {createPortal(
         <Popover
-          opener={`descriptionOpener-${context}`}
+          opener={`descriptionOpener-${uniqueID}`}
           //Point initial focus to other component removes the focus from the link in description
           onAfterOpen={() => {
             descBtnRef.current.focus();
diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
index 3f9a219174..7a316a5e16 100644
--- a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
+++ b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -110,7 +110,6 @@ export const DynamicPageComponent = ({
               setShowTitleDescription={setShowTitleDescription}
               showTitleDescription={showTitleDescription}
               description={description}
-              context="dynamic"
             />
           )}
         </FlexBox>
diff --git a/src/shared/components/GenericList/Pagination/Pagination.js b/src/shared/components/GenericList/Pagination/Pagination.js
index 2d0e385a53..8254fd30ef 100644
--- a/src/shared/components/GenericList/Pagination/Pagination.js
+++ b/src/shared/components/GenericList/Pagination/Pagination.js
@@ -92,7 +92,6 @@ export const Pagination = ({
           setShowTitleDescription={setShowInfo}
           showTitleDescription={showInfo}
           description={t('settings.other.info')}
-          context="pagination"
         />
       </div>
 
diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
index af296a8dce..3703e7e382 100644
--- a/src/shared/components/ResourceDetails/ResourceDetails.js
+++ b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -345,7 +345,6 @@ function Resource({
                   setShowTitleDescription={setShowTitleDescription}
                   showTitleDescription={showTitleDescription}
                   description={description}
-                  context="details"
                 />
               )}
             </div>