improve hint button

kyma-project · Jul 19, 2024 · a2c7750 · a2c7750
1 parent 9154ad0
commit a2c7750
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -345,7 +345,6 @@ function Resource({
                   setShowTitleDescription={setShowTitleDescription}
                   showTitleDescription={showTitleDescription}
                   description={description}
-                  context="details"
                 />
               )}
             </div>