fix: Show tooltip on defined widget

docs/extensibility/60-form-widgets.md

@@ -27,16 +27,16 @@ The `Text` widgets render a field as a text field. They are used by default for
 
 These are the available `Text` widget parameters:
 
-| Parameter             | Required | Type                | Description                                                                                                                                                             |
-| --------------------- | -------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **enum[]**            | No       | an array of options | Generate an input field with a dropdown. Optionally can be a string containing a [JSONata](jsonata.md) expression returning an array of options.                        |
-| **placeholder**       | No       | string              | Specifies a short hint about the input field value.                                                                                                                     |
-| **required**          | No       | boolean             | Specifies if a field is required. The default value is taken from CustomResourceDefintion (CRD); if it doesn't exist in the CRD, then it defaults to `false`.           |
-| **inputInfo**         | No       | string              | A string below the input field that shows how to fill in the input. You can use the {{ [`name`] (`link`) }} format to display a `name` instead of a `link.              |
-| **description**       | No       | string              | A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD). |
-| **readOnly**          | No       | boolean             | Specifies if a field is read-only. Defaults to `false`.                                                                                                                 |
-| **decodable**         | No       | boolean             | Specifies that the field is base64-encoded and can be decoded in the UI. It can't be used together with **enum**.                                                       |
-| **decodedPlacehoder** | No       | string              | An optional alternative placeholder to use when the field is decoded.                                                                                                   |
+| Parameter             | Required | Type                | Description                                                                                                                                                                                                                  |
+| --------------------- | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **enum[]**            | No       | an array of options | Generate an input field with a dropdown. Optionally can be a string containing a [JSONata](jsonata.md) expression returning an array of options.                                                                             |
+| **placeholder**       | No       | string              | Specifies a short hint about the input field value.                                                                                                                                                                          |
+| **required**          | No       | boolean             | Specifies if a field is required. The default value is taken from CustomResourceDefintion (CRD); if it doesn't exist in the CRD, then it defaults to `false`.                                                                |
+| **inputInfo**         | No       | string              | A string below the input field that shows how to fill in the input. You can use the {{ [`name`] (`link`) }} format to display a `name` instead of a `link.                                                                   |
+| **description**       | No       | string              | A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD). The tooltip can be disabled by placing empty string. |
+| **readOnly**          | No       | boolean             | Specifies if a field is read-only. Defaults to `false`.                                                                                                                                                                      |
+| **decodable**         | No       | boolean             | Specifies that the field is base64-encoded and can be decoded in the UI. It can't be used together with **enum**.                                                                                                            |
+| **decodedPlacehoder** | No       | string              | An optional alternative placeholder to use when the field is decoded.                                                                                                                                                        |
 
 See the following examples:
 

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>
   );

src/components/Extensibility/components-form/FormGroup.js

@@ -12,20 +12,22 @@ export function FormGroup({
 }) {
   const { WidgetRenderer } = widgets;
   const ownSchema = schema.delete('widget');
-  const { tFromStoreKeys } = useGetTranslation();
+  const { tFromStoreKeys, t: tExt } = useGetTranslation();
 
   const columns = schema.get('columns');
   const gridTemplateColumns = `repeat(${columns}, 1fr)`;
 
   const defaultOpen = schema.get('defaultExpanded') ?? false;
   const schemaRequired = schema.get('required') ?? required;
+  const tooltipContent = schema.get('description');
 
   return (
     <ResourceForm.CollapsibleSection
       title={tFromStoreKeys(storeKeys, schema)}
       defaultOpen={defaultOpen}
       nestingLevel={nestingLevel}
       required={schemaRequired}
+      tooltipContent={tExt(tooltipContent)}
     >
       <div className="form-group__grid-wrapper" style={{ gridTemplateColumns }}>
         <WidgetRenderer

src/components/Extensibility/components-form/GenericList.js

@@ -28,6 +28,7 @@ export function GenericList({
   const schemaPlaceholder = schema.get('placeholder');
   const itemTemplate = schema.get('template') || {};
   const defaultOpen = schema.get('defaultExpanded') ?? false;
+  const tooltipContent = schema.get('description');
   const [newItemIndex, setNewItemIndex] = useState(0);
 
   const addItem = itemTemplate => {
@@ -55,6 +56,7 @@ export function GenericList({
   return (
     <ResourceForm.CollapsibleSection
       defaultOpen={defaultOpen}
+      tooltipContent={t(tooltipContent)}
       container
       title={tFromStoreKeys(storeKeys, schema)}
       nestingLevel={nestingLevel}

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"
             />
           }
         </>

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}
             />
           )}

src/shared/ResourceForm/components/Title.js

@@ -37,7 +37,6 @@ export function Title({
             setShowTitleDescription={setOpenPopover}
             showTitleDescription={openPopover}
             description={tooltipContent}
-            context={title}
             style={spacing.sapUiTinyMarginBegin}
           />
         )}

src/shared/components/DescriptionHint/DescriptionHint.js → src/shared/components/DescriptionHint/DescriptionHint.tsx

@@ -1,19 +1,27 @@
 import { Button, Popover, Text } from '@ui5/webcomponents-react';
 import { createPortal } from 'react-dom';
-import { useRef } from 'react';
+import React, { CSSProperties, ReactNode, useRef, useState } from 'react';
+import { uniqueId } from 'lodash';
+
+type HintButtonProps = {
+  setShowTitleDescription: React.Dispatch<React.SetStateAction<boolean>>;
+  showTitleDescription: boolean;
+  description: string | ReactNode;
+  style?: CSSProperties;
+};
 
 export function HintButton({
   setShowTitleDescription,
   showTitleDescription,
   description,
   style,
-  context,
-}) {
+}: HintButtonProps) {
+  const [ID] = useState(uniqueId('id-')); //todo: migrate to useID from react after upgrade to version 18+
   const descBtnRef = useRef(null);
   return (
     <>
       <Button
-        id={`descriptionOpener-${context}`}
+        id={`descriptionOpener-${ID}`}
         ref={descBtnRef}
         icon="hint"
         design="Transparent"
@@ -25,9 +33,10 @@ export function HintButton({
       />
       {createPortal(
         <Popover
-          opener={`descriptionOpener-${context}`}
+          opener={`descriptionOpener-${ID}`}
           //Point initial focus to other component removes the focus from the link in description
           onAfterOpen={() => {
+            // @ts-ignore
             descBtnRef.current.focus();
           }}
           open={showTitleDescription}

src/shared/components/DynamicPageComponent/DynamicPageComponent.js

@@ -110,7 +110,6 @@ export const DynamicPageComponent = ({
               setShowTitleDescription={setShowTitleDescription}
               showTitleDescription={showTitleDescription}
               description={description}
-              context="dynamic"
             />
           )}
         </FlexBox>

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>
 

src/shared/components/ResourceDetails/ResourceDetails.js

@@ -345,7 +345,6 @@ function Resource({
                   setShowTitleDescription={setShowTitleDescription}
                   showTitleDescription={showTitleDescription}
                   description={description}
-                  context="details"
                 />
               )}
             </div>