KaotoIO · lordrip · Dec 3, 2024 · Nov 20, 2024
diff --git a/packages/ui/src/components/Catalog/CatalogFilter.tsx b/packages/ui/src/components/Catalog/CatalogFilter.tsx
@@ -7,7 +7,6 @@
   SearchInput,
   ToggleGroup,
   ToggleGroupItem,
-  Tooltip,
   capitalize,
 } from '@patternfly/react-core';
 import { TimesCircleIcon } from '@patternfly/react-icons';
@@ -110,19 +109,18 @@
         <FormGroup label="Layout" fieldId="layout">
           <ToggleGroup aria-label="Change layout">
             {props.layouts.map((key) => (
-              <Tooltip key={key} aria-label="Layout toggle Tooltip" content={<p>Display elements with a {key} view</p>}>
-                <ToggleGroupItem
-                  icon={<CatalogLayoutIcon key={key} layout={key} />}
-                  key={key}
-                  data-testid={`toggle-layout-button-${key}`}
-                  buttonId={`toggle-layout-button-${key}`}
-                  aria-label={`toggle-layout-button-${key}`}
-                  isSelected={props.activeLayout === key}
-                  onChange={() => {
-                    props.setActiveLayout(key);
-                  }}
-                />
-              </Tooltip>
+              <ToggleGroupItem
+                title={`Display elements with a ${key} view`}
+                icon={<CatalogLayoutIcon key={key} layout={key} />}
+                key={key}
+                data-testid={`toggle-layout-button-${key}`}
+                buttonId={`toggle-layout-button-${key}`}
+                aria-label={`toggle-layout-button-${key}`}
+                isSelected={props.activeLayout === key}
+                onChange={() => {
+                  props.setActiveLayout(key);
+                }}
+              />
             ))}
           </ToggleGroup>
         </FormGroup>

diff --git a/packages/ui/src/components/Form/properties/AddPropertyButtons.tsx b/packages/ui/src/components/Form/properties/AddPropertyButtons.tsx
@@ -1,4 +1,4 @@
-import { Button, Split, SplitItem, Tooltip } from '@patternfly/react-core';
+import { Button, Split, SplitItem } from '@patternfly/react-core';
 import { FolderPlusIcon, PlusCircleIcon } from '@patternfly/react-icons';
 
 type AddPropertyPopoverProps = {
@@ -24,32 +24,30 @@ export function AddPropertyButtons({
   return (
     <Split>
       <SplitItem>
-        <Tooltip content="Add string property">
+        <Button
+          title="Add string property"
+          data-testid={`properties-add-string-property-${path.join('-')}-btn`}
+          variant={'link'}
+          icon={<PlusCircleIcon />}
+          isDisabled={disabled}
+          onClick={() => createPlaceholder(false)}
+        >
+          {showLabel && 'Add string property'}
+        </Button>
+      </SplitItem>
+
+      {canAddObjectProperties && (
+        <SplitItem>
           <Button
-            data-testid={`properties-add-string-property-${path.join('-')}-btn`}
+            title="Add object property"
+            data-testid={`properties-add-object-property-${path.join('-')}-btn`}
             variant={'link'}
-            icon={<PlusCircleIcon />}
+            icon={<FolderPlusIcon />}
             isDisabled={disabled}
-            onClick={() => createPlaceholder(false)}
+            onClick={() => createPlaceholder(true)}
           >
-            {showLabel && 'Add string property'}
+            {showLabel && 'Add object property'}
           </Button>
-        </Tooltip>
-      </SplitItem>
-
-      {canAddObjectProperties && (
-        <SplitItem>
-          <Tooltip content="Add object property">
-            <Button
-              data-testid={`properties-add-object-property-${path.join('-')}-btn`}
-              variant={'link'}
-              icon={<FolderPlusIcon />}
-              isDisabled={disabled}
-              onClick={() => createPlaceholder(true)}
-            >
-              {showLabel && 'Add object property'}
-            </Button>
-          </Tooltip>
         </SplitItem>
       )}
     </Split>

diff --git a/packages/ui/src/components/Form/properties/PropertyRow.tsx b/packages/ui/src/components/Form/properties/PropertyRow.tsx
@@ -1,4 +1,4 @@
-import { Button, HelperText, HelperTextItem, Split, SplitItem, TextInput, Tooltip } from '@patternfly/react-core';
+import { Button, HelperText, HelperTextItem, Split, SplitItem, TextInput } from '@patternfly/react-core';
 import { CheckIcon, PencilAltIcon, TimesIcon, TrashIcon } from '@patternfly/react-icons';
 import { Td, TdProps, TreeRowWrapper } from '@patternfly/react-table';
 import { FormEvent, useState } from 'react';
@@ -149,49 +149,45 @@ export function PropertyRow({
           {isEditing
             ? [
                 <SplitItem key={`${getKey()}-property-edit-confirm-${nodeName}`}>
-                  <Tooltip content="Confirm edit">
-                    <Button
-                      data-testid={`${getKey()}-property-edit-confirm-${nodeName}-btn`}
-                      icon={<CheckIcon />}
-                      variant="link"
-                      isDisabled={isUserInputInvalid()}
-                      onClick={commitUserInput}
-                    />
-                  </Tooltip>
+                  <Button
+                    title="Confirm edit"
+                    data-testid={`${getKey()}-property-edit-confirm-${nodeName}-btn`}
+                    icon={<CheckIcon />}
+                    variant="link"
+                    isDisabled={isUserInputInvalid()}
+                    onClick={commitUserInput}
+                  />
                 </SplitItem>,
                 <SplitItem key={`${getKey()}-property-edit-cancel-${nodeName}`}>
-                  <Tooltip content="Cancel edit">
-                    <Button
-                      data-testid={`${getKey()}-property-edit-cancel-${nodeName}-btn`}
-                      icon={<TimesIcon />}
-                      variant="link"
-                      onClick={cancelEditing}
-                    />
-                  </Tooltip>
+                  <Button
+                    title="Cancel edit"
+                    data-testid={`${getKey()}-property-edit-cancel-${nodeName}-btn`}
+                    icon={<TimesIcon />}
+                    variant="link"
+                    onClick={cancelEditing}
+                  />
                 </SplitItem>,
               ]
             : [
                 <SplitItem key={`${getKey()}-property-edit-${nodeName}`}>
-                  <Tooltip content="Edit property">
-                    <Button
-                      data-testid={`${getKey()}-property-edit-${nodeName}-btn`}
-                      icon={<PencilAltIcon />}
-                      variant="link"
-                      onClick={() => setIsEditing(true)}
-                    />
-                  </Tooltip>
+                  <Button
+                    title="Edit property"
+                    data-testid={`${getKey()}-property-edit-${nodeName}-btn`}
+                    icon={<PencilAltIcon />}
+                    variant="link"
+                    onClick={() => setIsEditing(true)}
+                  />
                 </SplitItem>,
-                <SplitItem key={`${getKey()}-property-edit-spacer-${nodeName}`}></SplitItem>,
+                <SplitItem key={`${getKey()}-property-edit-spacer-${nodeName}`} />,
               ]}
           <SplitItem key={`${getKey()}-property-delete-${nodeName}`}>
-            <Tooltip content="Delete property">
-              <Button
-                data-testid={`${getKey()}-delete-${nodeName}-btn`}
-                icon={<TrashIcon />}
-                variant="link"
-                onClick={() => handleTrashClick(parentModel, nodeName)}
-              ></Button>
-            </Tooltip>
+            <Button
+              title="Delete property"
+              data-testid={`${getKey()}-delete-${nodeName}-btn`}
+              icon={<TrashIcon />}
+              variant="link"
+              onClick={() => handleTrashClick(parentModel, nodeName)}
+            />
           </SplitItem>
         </Split>
       </Td>

diff --git a/packages/ui/src/components/MetadataEditor/TopmostArrayTable.tsx b/packages/ui/src/components/MetadataEditor/TopmostArrayTable.tsx
@@ -1,5 +1,4 @@
-import './MetadataEditor.scss';
-import { Button, EmptyState, EmptyStateBody, Tooltip, Truncate } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, Truncate } from '@patternfly/react-core';
 import { PlusCircleIcon, TrashIcon } from '@patternfly/react-icons';
 import {
   InnerScrollContainer,
@@ -12,6 +11,7 @@ import {
   Thead,
   Tr,
 } from '@patternfly/react-table';
+import './MetadataEditor.scss';
 
 type TopmostArrayTableProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -58,14 +58,13 @@ export function TopmostArrayTable(props: TopmostArrayTableProps) {
                   </Th>
                 ))}
               <Td modifier="nowrap" key="buttons" isActionCell>
-                <Tooltip content={`Add new ${props.name}`}>
-                  <Button
-                    data-testid={'metadata-add-' + props.name + '-btn'}
-                    icon={<PlusCircleIcon />}
-                    variant="link"
-                    onClick={() => handleAddNew()}
-                  ></Button>
-                </Tooltip>
+                <Button
+                  title={`Add new ${props.name}`}
+                  data-testid={'metadata-add-' + props.name + '-btn'}
+                  icon={<PlusCircleIcon />}
+                  variant="link"
+                  onClick={() => handleAddNew()}
+                />
               </Td>
             </Tr>
           </Thead>
@@ -102,14 +101,13 @@ export function TopmostArrayTable(props: TopmostArrayTableProps) {
                       </Td>
                     ))}
                   <Td key="buttons" isActionCell>
-                    <Tooltip content={`Delete ${props.name}`}>
-                      <Button
-                        data-testid={'metadata-delete-' + index + '-btn'}
-                        icon={<TrashIcon />}
-                        variant="link"
-                        onClick={() => handleTrashClick(index)}
-                      ></Button>
-                    </Tooltip>
+                    <Button
+                      title={`Delete ${props.name}`}
+                      data-testid={'metadata-delete-' + index + '-btn'}
+                      icon={<TrashIcon />}
+                      variant="link"
+                      onClick={() => handleTrashClick(index)}
+                    />
                   </Td>
                 </Tr>
               ))

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.tsx
@@ -1,19 +1,10 @@
-import {
-  Button,
-  Grid,
-  GridItem,
-  SearchInput,
-  Title,
-  ToggleGroup,
-  ToggleGroupItem,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Button, Grid, GridItem, SearchInput, Title, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 import { FunctionComponent, useContext } from 'react';
 import { CanvasFormTabsContext } from '../../../../providers/canvas-form-tabs.provider';
 import { FilteredFieldContext } from '../../../../providers/filtered-field.provider';
-import { FormTabsModes } from './canvasformtabs.modes';
 import './CanvasFormHeader.scss';
+import { FormTabsModes } from './canvasformtabs.modes';
 
 interface CanvasFormHeaderProps {
   nodeId: string;
@@ -43,15 +34,14 @@ export const CanvasFormHeader: FunctionComponent<CanvasFormHeaderProps> = (props
       {canvasFormTabsContext && (
         <ToggleGroup aria-label="Single selectable form tabs" className="form-tabs">
           {Object.entries(FormTabsModes).map(([mode, tooltip]) => (
-            <Tooltip key={mode} content={tooltip}>
-              <ToggleGroupItem
-                key={mode}
-                text={mode}
-                buttonId={mode}
-                isSelected={canvasFormTabsContext.selectedTab === mode}
-                onChange={canvasFormTabsContext.onTabChange}
-              />
-            </Tooltip>
+            <ToggleGroupItem
+              title={tooltip}
+              key={mode}
+              text={mode}
+              buttonId={mode}
+              isSelected={canvasFormTabsContext.selectedTab === mode}
+              onChange={canvasFormTabsContext.onTabChange}
+            />
           ))}
         </ToggleGroup>
       )}