Resolve remaining issues from UI review

frontend/src/__tests__/cypress/cypress/pages/components/subComponents/SearchSelector.ts

@@ -6,7 +6,7 @@ export class SearchSelector extends SubComponentBase {
   }
 
   private findContextualItem(suffix: string): Cypress.Chainable<JQuery<HTMLElement>> {
-    return this.findScope().findByTestId(`${this.selectorId}-${suffix}`);
+    return this.findScope().document().findByTestId(`${this.selectorId}-${suffix}`);
   }
 
   findItem(name: string, useMenuList: boolean): Cypress.Chainable<JQuery<HTMLElement>> {

frontend/src/__tests__/cypress/cypress/pages/pipelines/createRunPage.ts

@@ -57,6 +57,7 @@ export class CreateRunPage {
 
   findPipelineVersionByName(name: string): Cypress.Chainable<JQuery<HTMLTableCellElement>> {
     return this.find()
+      .document()
       .findByTestId('pipeline-version-selector-table-list')
       .find('td')
       .contains(name);

frontend/src/__tests__/cypress/cypress/pages/pipelines/pipelineVersionImportModal.ts

@@ -58,7 +58,7 @@ class PipelineImportModal extends Modal {
     this.pipelineSelector
       .findToggleButton()
       .click()
-      .parents()
+      .document()
       .findByTestId('pipeline-selector-table-list')
       .find('tr')
       .contains(name)

frontend/src/__tests__/cypress/cypress/pages/pipelines/topology.ts

@@ -166,7 +166,7 @@ class PipelineDetails extends PipelinesTopology {
     this.pipelineVersionSelector
       .findToggleButton()
       .click()
-      .parents()
+      .document()
       .findByTestId('pipeline-version-selector-table-list')
       .find('td')
       .contains(name)

frontend/src/components/searchSelector/SearchSelector.tsx

@@ -63,7 +63,7 @@ const SearchSelector: React.FC<SearchSelectorProps> = ({
   const toggleRef = React.useRef(null);
   const menuRef = React.useRef(null);
   const searchRef = React.useRef<HTMLInputElement | null>(null);
-  const popperProps = { minWidth, maxWidth: 'trigger', appendTo: 'inline' };
+  const popperProps = { minWidth, maxWidth: 'trigger' };
 
   return (
     <MenuContainer
@@ -129,7 +129,7 @@ const SearchSelector: React.FC<SearchSelectorProps> = ({
             )}
           </MenuSearch>
           <Divider />
-          <MenuContent>
+          <MenuContent maxMenuHeight="200px">
             <MenuList data-testid={`${dataTestId}-menuList`}>
               {typeof children === 'function'
                 ? children({ menuClose: () => setIsOpen(false) })

frontend/src/components/table/TableBase.tsx

@@ -272,9 +272,7 @@ const TableBase = <T,>({
       {caption && <Caption>{caption}</Caption>}
       <Thead noWrap hasNestedHeader={hasNestedHeader}>
         {/* Note from PF: following custom style can be removed when we can resolve misalignment issue natively */}
-        <Tr style={{ verticalAlign: 'middle' }}>
-          {columns.map((col, i) => renderColumnHeader(col, i))}
-        </Tr>
+        <Tr>{columns.map((col, i) => renderColumnHeader(col, i))}</Tr>
         {subColumns?.length ? (
           <Tr>{subColumns.map((col, i) => renderColumnHeader(col, columns.length + i, true))}</Tr>
         ) : null}

frontend/src/components/table/TableRowTitleDescription.tsx

@@ -6,7 +6,6 @@ import TruncatedText from '~/components/TruncatedText';
 
 type TableRowTitleDescriptionProps = {
   title: React.ReactNode;
-  boldTitle?: boolean;
   titleIcon?: React.ReactNode;
   resource?: K8sResourceCommon;
   subtitle?: React.ReactNode;
@@ -19,7 +18,6 @@ type TableRowTitleDescriptionProps = {
 
 const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
   title,
-  boldTitle = true,
   titleIcon,
   description,
   resource,
@@ -50,7 +48,7 @@ const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
 
   return (
     <div>
-      <div data-testid="table-row-title" className={boldTitle ? 'pf-v6-u-font-weight-bold' : ''}>
+      <div data-testid="table-row-title">
         {resource ? (
           <ResourceNameTooltip resource={resource} wrap={wrapResourceTitle}>
             {title}

frontend/src/concepts/dashboard/DashboardHelpTooltip.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { Tooltip } from '@patternfly/react-core';
+import { Popover } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import DashboardPopupIconButton from './DashboardPopupIconButton';
 
 type DashboardHelpTooltipProps = {
   content: React.ReactNode;
 };
 
 const DashboardHelpTooltip: React.FC<DashboardHelpTooltipProps> = ({ content }) => (
-  <Tooltip content={content}>
-    <OutlinedQuestionCircleIcon />
-  </Tooltip>
+  <Popover bodyContent={content}>
+    <DashboardPopupIconButton icon={<OutlinedQuestionCircleIcon />} aria-label="More info" />
+  </Popover>
 );
 
 export default DashboardHelpTooltip;

frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx

@@ -9,16 +9,18 @@ loader.config({ monaco });
 
 type DashboardCodeEditorProps = Omit<CodeEditorProps, 'ref'> & {
   testId?: string;
+  codeEditorHeight?: string;
 };
 
 const DashboardCodeEditor: React.FC<Partial<DashboardCodeEditorProps>> = ({
   // 38px is the code editor toolbar height+border
   // calculate the div height to avoid container scrolling
   height = 'calc(100% - 38px)',
+  codeEditorHeight = '400px',
   ...props
 }) => (
   <div data-testid={props.testId} style={{ height, padding: '14px' }}>
-    <CodeEditor height="400px" className="odh-dashboard__code-editor" {...props} />
+    <CodeEditor height={codeEditorHeight} className="odh-dashboard__code-editor" {...props} />
   </div>
 );
 

frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsYAML.tsx

@@ -47,6 +47,7 @@ const PipelineDetailsYAML: React.FC<PipelineDetailsYAMLProps> = ({
       isLanguageLabelVisible
       language={Language.yaml}
       isReadOnly
+      codeEditorHeight="100%"
     />
   );
 };

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

@@ -171,7 +171,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
             hasBodyWrapper={false}
             isFilled
             padding={{ default: 'noPadding' }}
-            style={{ flexBasis: 0, overflowY: 'hidden' }}
+            style={{ flexBasis: 0 }}
           >
             <Flex
               direction={{ default: 'column' }}

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsTabs.tsx

@@ -49,7 +49,7 @@ export const PipelineRunDetailsTabs: React.FC<PipelineRunDetailsTabsProps> = ({
       hasBodyWrapper={false}
       isFilled
       padding={{ default: 'noPadding' }}
-      style={{ flexBasis: 0, overflowY: 'hidden' }}
+      style={{ flexBasis: 0 }}
     >
       <Flex
         direction={{ default: 'column' }}

frontend/src/concepts/pipelines/content/tables/experiment/ExperimentTableRow.tsx

@@ -39,8 +39,8 @@ const ExperimentTableRow: React.FC<ExperimentTableRowProps> = ({
               }
               state={{ experiment }}
             >
-              {/* TODO: Remove the custom className after upgrading to PFv6 */}
-              <Truncate content={experiment.display_name} className="truncate-no-min-width" />
+              {/* TODO: Remove the inline style for underline once https://github.com/patternfly/patternfly/issues/7255 is resolved and PF versions are updated */}
+              <Truncate style={{ textDecoration: 'underline' }} content={experiment.display_name} />
             </Link>
           }
           description={experiment.description}

frontend/src/pages/ApplicationsPage.tsx

@@ -148,7 +148,11 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
       </FlexItem>
       <FlexItem>{!noHeader && renderHeader()}</FlexItem>
       <FlexItem flex={{ default: 'flex_1' }}>
-        <Flex direction={{ default: 'column' }} style={{ height: '100%' }}>
+        <Flex
+          direction={{ default: 'column' }}
+          style={{ height: '100%' }}
+          flexWrap={{ default: 'nowrap' }}
+        >
           {renderContents()}
         </Flex>
       </FlexItem>

frontend/src/pages/connectionTypes/ConnectionTypesPage.tsx

@@ -22,7 +22,7 @@ const ConnectionTypesPage: React.FC = () => {
       description="Create and manage connection types for users in your organization. Connection types include customizable fields and optional default values to decrease the time required to add connections to data sources and sinks."
       errorMessage="Unable to load connection types"
     >
-      <PageSection hasBodyWrapper={false} isFilled>
+      <PageSection isFilled>
         <ConnectionTypesTable connectionTypes={connectionTypes} onUpdate={refresh} />
       </PageSection>
     </ApplicationsPage>

frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx

@@ -87,7 +87,6 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({
     <Tr>
       <Td dataLabel={connectionTypeColumns[0].label}>
         <TableRowTitleDescription
-          boldTitle={false}
           title={<Truncate content={getDisplayNameFromK8sResource(obj)} />}
           description={getDescriptionFromK8sResource(obj)}
           truncateDescriptionLines={2}

frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx

@@ -64,7 +64,6 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
         />
         <Td dataLabel={columns[0].label} data-testid="field-name">
           <TableRowTitleDescription
-            boldTitle={false}
             title={
               <Flex gap={{ default: 'gapSm' }} flexWrap={{ default: 'nowrap' }}>
                 <FlexItem>
@@ -132,7 +131,6 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
       />
       <Td dataLabel={columns[0].label} data-testid="field-name" visibility={columns[0].visibility}>
         <TableRowTitleDescription
-          boldTitle={false}
           title={<Truncate content={row.name} />}
           description={row.description}
           truncateDescriptionLines={2}

frontend/src/pages/distributedWorkloads/global/projectMetrics/sections/DWSectionCard.tsx

@@ -11,7 +11,7 @@ export const DWSectionCard: React.FC<{
   <Card isFullHeight>
     <CardHeader>
       <CardTitle>
-        <Flex gap={{ default: 'gapMd' }}>
+        <Flex gap={{ default: 'gapSm' }}>
           {title} {helpTooltip ? <DashboardHelpTooltip content={helpTooltip} /> : null}
         </Flex>
       </CardTitle>

frontend/src/pages/distributedWorkloads/global/workloadStatus/DWStatusOverviewDonutChart.tsx

@@ -39,7 +39,8 @@ export const DWStatusOverviewDonutChart: React.FC = () => {
     );
   }
   return (
-    <div style={{ height: '250px', minWidth: '620px', paddingBottom: '12px' }}>
+    // maxWidth matches what the chart's svg width value would be without the default "width: 100%" coming from PF Charts
+    <div style={{ maxWidth: '530px' }}>
       <ChartDonut
         ariaDesc="Distributed workload status overview"
         ariaTitle="Status overview donut chart"

frontend/src/pages/distributedWorkloads/global/workloadStatus/GlobalDistributedWorkloadsWorkloadStatusTab.tsx

@@ -8,7 +8,7 @@ const GlobalDistributedWorkloadsWorkloadStatusTab: React.FC = () => (
     <StackItem>
       <Card isFullHeight data-testid="dw-status-overview-card">
         <CardTitle>Status overview</CardTitle>
-        <CardBody style={{ height: 250 }}>
+        <CardBody>
           <DWStatusOverviewDonutChart />
         </CardBody>
       </Card>

frontend/src/pages/home/HomeHint.tsx

@@ -63,7 +63,13 @@ const HomeHint: React.FC = () => {
               data-testid="jupyter-hint-icon"
               src={jupyterImg}
               alt="Jupyter"
-              style={{ height: 42, maxWidth: 'unset' }}
+              style={{
+                height: 42,
+                maxWidth: 'unset',
+                backgroundColor: 'var(--pf-t--color--white)',
+                padding: 'var(--pf-t--global--spacer--xs)',
+                borderRadius: 'var(--pf-t--global--border--radius--small)',
+              }}
             />
             <FlexItem>
               <Content>

frontend/src/pages/home/projects/ProjectCard.tsx

@@ -44,7 +44,11 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
           }}
           style={{ fontSize: 'var(--pf-t--global--font--size--body--default)' }}
         >
-          <Truncate content={getDisplayNameFromK8sResource(project)} />
+          <Truncate
+            // TODO: Remove the inline style for underline once https://github.com/patternfly/patternfly/issues/7255 is resolved and PF versions are updated
+            style={{ textDecoration: 'underline' }}
+            content={getDisplayNameFromK8sResource(project)}
+          />
         </Button>
       </CardHeader>
       <CardBody>