Merge remote-tracking branch 'upstream/main' into rhoai-2.16

red-hat-data-services · Nov 8, 2024 · d651d23 · d651d23
2 parents c6fa805 + 44e60e6
commit d651d23
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 20 deletions.
diff --git a/frontend/src/components/DashboardDescriptionListGroup.tsx b/frontend/src/components/DashboardDescriptionListGroup.tsx
@@ -8,13 +8,20 @@ import {
   DescriptionListTerm,
   Flex,
   FlexItem,
+  Popover,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
 import text from '@patternfly/react-styles/css/utilities/Text/text';
-import { CheckIcon, PencilAltIcon, TimesIcon } from '@patternfly/react-icons';
+import {
+  CheckIcon,
+  PencilAltIcon,
+  TimesIcon,
+  OutlinedQuestionCircleIcon,
+} from '@patternfly/react-icons';
 
 import './DashboardDescriptionListGroup.scss';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 
 type EditableProps = {
   isEditing: boolean;
@@ -30,7 +37,7 @@ type EditableProps = {
 
 export type DashboardDescriptionListGroupProps = {
   title: React.ReactNode;
-  tooltip?: React.ReactNode;
+  popover?: React.ReactNode;
   action?: React.ReactNode;
   isEmpty?: boolean;
   contentWhenEmpty?: React.ReactNode;
@@ -41,7 +48,7 @@ export type DashboardDescriptionListGroupProps = {
 const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps> = (props) => {
   const {
     title,
-    tooltip,
+    popover,
     action,
     isEmpty,
     contentWhenEmpty,
@@ -110,11 +117,18 @@ const DashboardDescriptionListGroup: React.FC<DashboardDescriptionListGroupProps
       ) : (
         <DescriptionListTerm>
           <Flex
-            spaceItems={{ default: 'spaceItemsSm' }}
+            spaceItems={{ default: 'spaceItemsNone' }}
             alignItems={{ default: 'alignItemsCenter' }}
           >
             <FlexItem>{title}</FlexItem>
-            {tooltip}
+            {popover && (
+              <Popover bodyContent={popover}>
+                <DashboardPopupIconButton
+                  icon={<OutlinedQuestionCircleIcon />}
+                  aria-label="More info"
+                />
+              </Popover>
+            )}
           </Flex>
         </DescriptionListTerm>
       )}

diff --git a/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx b/frontend/src/concepts/roleBinding/RoleBindingPermissionsTableRow.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ActionsColumn, Tbody, Td, Tr } from '@patternfly/react-table';
 import {
   Button,
-  Icon,
+  Popover,
   Split,
   SplitItem,
   Text,
@@ -20,6 +20,7 @@ import { ProjectKind, RoleBindingKind, RoleBindingSubject } from '~/k8sTypes';
 import { relativeTime } from '~/utilities/time';
 import { ProjectsContext } from '~/concepts/projects/ProjectsContext';
 import { projectDisplayNameToNamespace } from '~/concepts/projects/utils';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 import { castRoleBindingPermissionsRoleType, firstSubject, roleLabel } from './utils';
 import { RoleBindingPermissionsRoleType } from './types';
 import RoleBindingPermissionsNameInput from './RoleBindingPermissionsNameInput';
@@ -94,18 +95,19 @@ const RoleBindingPermissionsTableRow: React.FC<RoleBindingPermissionsTableRowPro
               {roleBindingName}
               {` `}
               {isDefaultGroup && (
-                <Tooltip
-                  content={
+                <Popover
+                  bodyContent={
                     <div>
                       This group is created by default. You can add users to this group in OpenShift
                       user management, or ask the cluster admin to do so.
                     </div>
                   }
                 >
-                  <Icon>
-                    <OutlinedQuestionCircleIcon />
-                  </Icon>
-                </Tooltip>
+                  <DashboardPopupIconButton
+                    icon={<OutlinedQuestionCircleIcon />}
+                    aria-label="More info"
+                  />
+                </Popover>
               )}
             </Text>
           )}

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
@@ -9,7 +9,6 @@ import { getLabels, mergeUpdatedLabels } from '~/pages/modelRegistry/screens/uti
 import useModelArtifactsByVersionId from '~/concepts/modelRegistry/apiHooks/useModelArtifactsByVersionId';
 import { ModelRegistryContext } from '~/concepts/modelRegistry/context/ModelRegistryContext';
 import ModelTimestamp from '~/pages/modelRegistry/screens/components/ModelTimestamp';
-import DashboardHelpTooltip from '~/concepts/dashboard/DashboardHelpTooltip';
 import { uriToObjectStorageFields } from '~/concepts/modelRegistry/utils';
 import InlineTruncatedClipboardCopy from '~/components/InlineTruncatedClipboardCopy';
 
@@ -203,9 +202,7 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
         <DescriptionList isFillColumns style={{ marginTop: '2em' }}>
           <DashboardDescriptionListGroup
             title="Author"
-            tooltip={
-              <DashboardHelpTooltip content="The author is the user who registered the model version." />
-            }
+            popover="The author is the user who registered the model version."
           >
             {mv.author}
           </DashboardDescriptionListGroup>

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelDetailsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelDetailsView.tsx
@@ -87,7 +87,10 @@ const ModelDetailsView: React.FC<ModelDetailsViewProps> = ({
               {rm.id}
             </ClipboardCopy>
           </DashboardDescriptionListGroup>
-          <DashboardDescriptionListGroup title="Owner">
+          <DashboardDescriptionListGroup
+            title="Owner"
+            popover="The owner is the user who registered the model."
+          >
             <Text data-testid="registered-model-owner">{rm.owner || '-'}</Text>
           </DashboardDescriptionListGroup>
           <DashboardDescriptionListGroup

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTableColumns.ts b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTableColumns.ts
@@ -25,6 +25,9 @@ export const mvColumns: SortableData<ModelVersion>[] = [
       const second = b.author || '';
       return first.localeCompare(second);
     },
+    info: {
+      popover: 'The author is the user who registered the model version.',
+    },
   },
   {
     field: 'labels',

diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableColumns.ts b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelsTableColumns.ts
@@ -28,9 +28,9 @@ export const rmColumns: SortableData<RegisteredModel>[] = [
     label: 'Owner',
     sortable: true,
     info: {
-      tooltip: 'The owner is the user who registered the model.',
-      tooltipProps: {
-        isContentLeftAligned: true,
+      popover: 'The owner is the user who registered the model.',
+      popoverProps: {
+        position: 'left',
       },
     },
   },