ui: Migration - Popover Component

frontend/package.json

@@ -28,7 +28,7 @@
         "@heroicons/react": "^1.0.6",
         "@monaco-editor/react": "^4.5",
         "@primer/octicons-react": "^17",
-        "@redpanda-data/ui": "^3.8.0",
+        "@redpanda-data/ui": "^3.17.2",
         "@textea/json-viewer": "^1.24.4",
         "antd": "^4.21",
         "array-move": "^4",

frontend/src/App.tsx

@@ -52,7 +52,12 @@ const App = () => {
     return (
         <BrowserRouter basename={getBasePath()}>
             <HistorySetter />
-            <ChakraProvider theme={redpandaTheme}>
+            {/* 
+                Setting portalZIndex to 1001 allows popovers, tooltips and any component that uses portals
+                to render _above_ Ant's modal component (which sets its z-index to 1000) when they're 
+                inside an Ant modal.
+             */}
+            <ChakraProvider theme={redpandaTheme} portalZIndex={1001}>
                 <ErrorBoundary>
                     <RequireAuth>
                         {isEmbedded()

frontend/src/components/misc/NoClipboardPopover.tsx

@@ -9,9 +9,9 @@
  * by the Apache License, Version 2.0
  */
 
-import { Popover } from 'antd';
 import React, { FunctionComponent, ReactElement } from 'react';
 import { isClipboardAvailable } from '../../utils/featureDetection';
+import { Popover } from '@redpanda-data/ui';
 
 const popoverContent = (
     <>
@@ -22,12 +22,12 @@ const popoverContent = (
 
 export const NoClipboardPopover: FunctionComponent<{
     children: ReactElement;
-    placement?: 'left'|'top'
+    placement?: 'left' | 'top';
 }> = ({ children, placement = 'top' }) =>
     isClipboardAvailable ? (
         <>{children}</>
     ) : (
-        <Popover title="Clipboard unavailable" content={popoverContent} arrowPointAtCenter={true} placement={placement}>
+        <Popover title="Clipboard unavailable" content={popoverContent} placement={placement} trigger="hover">
             {children}
         </Popover>
     );

frontend/src/components/misc/buttons/data-refresh/Component.tsx

@@ -10,7 +10,6 @@
  */
 import { SyncIcon } from '@primer/octicons-react';
 import { MdPause, MdPlayCircleOutline } from 'react-icons/md';
-import { Popover } from 'antd';
 import { Button, Icon } from '@redpanda-data/ui';
 import { autorun, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -20,6 +19,7 @@ import { api, REST_CACHE_DURATION_SEC } from '../../../../state/backendApi';
 import { uiSettings } from '../../../../state/ui';
 import { prettyMilliseconds } from '../../../../utils/utils';
 import styles from '../buttons.module.scss';
+import { Popover } from '@redpanda-data/ui';
 
 
 const autoRefresh = observable({
@@ -106,7 +106,7 @@ export const DataRefreshButton = observer(() => {
 
     // maybe we need to use the same 'no vertical expansion' trick:
     return <div className={styles.dataRefreshButton}>
-        <Popover title="Auto Refresh" content={autoRefreshTextFunc} placement="rightTop" overlayClassName="popoverSmall" >
+        <Popover title="Auto Refresh" content={autoRefreshTextFunc} placement="right" hideCloseButton={true}>
             <Button
                 display="inline-flex" justifyContent="center" alignItems="center"
                 width="35px" borderRadius="100px"
@@ -121,7 +121,7 @@ export const DataRefreshButton = observer(() => {
         {
             (api.activeRequests.length == 0)
                 ? <>
-                    <Popover title="Force Refresh" content={refreshTextFunc} placement="rightTop" overlayClassName="popoverSmall" >
+                    <Popover title="Force Refresh" content={refreshTextFunc} placement="right" hideCloseButton={true}>
                         <Button
                             className={`${styles.hoverButton} ${autoRefresh.active ? styles.rotation : ''}`}
                             borderRadius="100px" width="35px"

frontend/src/components/pages/connect/helper.tsx

@@ -11,12 +11,12 @@
 
 
 
-import { Alert, Empty, message, Modal, Popover } from 'antd';
+import { Alert, Empty, message, Modal } from 'antd';
 import { observer } from 'mobx-react';
 import React, { Component, CSSProperties, useState } from 'react';
 import { api } from '../../../state/backendApi';
 import { ApiError, ClusterConnectorInfo, ClusterConnectors, ClusterConnectorTaskInfo, ConnectorState, ConnectorStatus } from '../../../state/restInterfaces';
-import { findPopupContainer, ZeroSizeWrapper } from '../../../utils/tsxUtils';
+import { ZeroSizeWrapper } from '../../../utils/tsxUtils';
 import ElasticLogo from '../../../assets/connectors/elastic.svg';
 import MsSqlLogo from '../../../assets/connectors/mssql.png';
 import MySqlLogo from '../../../assets/connectors/mysql.svg';
@@ -45,7 +45,7 @@ import { CheckCircleTwoTone, ExclamationCircleTwoTone, HourglassTwoTone, PauseCi
 import Section from '../../misc/Section';
 import PageContent from '../../misc/PageContent';
 import { isEmbedded } from '../../../config';
-import { Button } from '@redpanda-data/ui';
+import { Button, Popover } from '@redpanda-data/ui';
 import { Statistic } from '../../misc/Statistic';
 
 interface ConnectorMetadata {
@@ -359,26 +359,21 @@ export const ConnectorClass = observer((props: { observable: { class: string; }
     const meta = findConnectorMetadata(c);
     const displayName = meta?.friendlyName ?? removeNamespace(c);
 
-    return <div style={{ height: '1px', overflow: 'visible', display: 'flex', alignItems: 'center' }}>
-        {meta && meta.logo &&
-            <span style={{ verticalAlign: 'inherit', marginRight: '5px' }}>
-                <ZeroSizeWrapper width="22px" transform="translateY(-1px)" >
-                    <div style={{ width: '22px', height: '22px' }}>
-                        {meta.logo}
-                    </div>
-                </ZeroSizeWrapper>
-            </span>
-        }
-
-        <Popover placement="right" overlayClassName="popoverSmall"
-            getPopupContainer={findPopupContainer}
-            content={<div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
-                {c}
-            </div>}
-        >
-            {displayName}
-        </Popover>
-    </div>
+    return (
+        <div style={{ height: '1px', overflow: 'visible', display: 'flex', alignItems: 'center' }}>
+            {meta && meta.logo && (
+                <span style={{ verticalAlign: 'inherit', marginRight: '5px' }}>
+                    <ZeroSizeWrapper width="22px" transform="translateY(-1px)">
+                        <div style={{ width: '22px', height: '22px' }}>{meta.logo}</div>
+                    </ZeroSizeWrapper>
+                </span>
+            )}
+
+            <Popover placement="right" size="stretch" hideCloseButton={true} content={<div style={{ maxWidth: '500px', minWidth: 'max-content', whiteSpace: 'pre-wrap' }}>{c}</div>}>
+                {displayName}
+            </Popover>
+        </div>
+    );
 });
 
 export function removeNamespace(className: string): string {

frontend/src/components/pages/consumers/Group.Details.tsx

@@ -10,7 +10,7 @@
  */
 
 import React, { Component } from 'react';
-import { Table, Tag, Collapse, Popover, Empty } from 'antd';
+import { Table, Collapse, Empty } from 'antd';
 import { observer } from 'mobx-react';
 
 import { api } from '../../../state/backendApi';
@@ -29,11 +29,10 @@ import { EditOffsetsModal, GroupOffset, DeleteOffsetsModal, GroupDeletingMode }
 import { ShortNum } from '../../misc/ShortNum';
 import AclList from '../topics/Tab.Acl/AclList';
 import { SkipIcon } from '@primer/octicons-react';
-import { Flex, Section, Tabs, Tooltip } from '@redpanda-data/ui';
+import { Flex, Section, Tabs, Tag, Tooltip, Popover } from '@redpanda-data/ui';
 import PageContent from '../../misc/PageContent';
 import { Features } from '../../../state/supportedFeatures';
 import { Statistic } from '../../misc/Statistic';
-
 @observer
 class GroupDetails extends PageComponent<{ groupId: string }> {
     @observable viewMode: 'topic' | 'member' = 'topic';
@@ -545,7 +544,7 @@ export const GroupState = (p: { group: GroupDescription }) => {
     const icon = stateIcons.get(state);
 
     return (
-        <Popover content={consumerGroupStateTable} placement="right">
+        <Popover trigger="hover" size="auto" placement="right" hideCloseButton content={consumerGroupStateTable}>
             <span>
                 {icon}
                 <span> {p.group.state}</span>

frontend/src/components/pages/consumers/Modals.tsx

@@ -13,7 +13,7 @@
 import { TrashIcon as TrashIconOutline, PencilIcon as PencilIconOutline } from '@heroicons/react/outline';
 import { Component } from 'react';
 import { numberToThousandsString, RadioOptionGroup, InfoText } from '../../../utils/tsxUtils';
-import { Collapse, Modal, Popover, Radio, Select, Table } from 'antd';
+import { Collapse, Modal, Radio, Select, Table } from 'antd';
 import { observer } from 'mobx-react';
 import { action, autorun, IReactionDisposer, makeObservable, observable, transaction } from 'mobx';
 import { DeleteConsumerGroupOffsetsTopic, EditConsumerGroupOffsetsTopic, GroupDescription, PartitionOffset, TopicOffset } from '../../../state/restInterfaces';
@@ -26,7 +26,7 @@ import { showErrorModal } from '../../misc/ErrorModal';
 import { appGlobal } from '../../../state/appGlobal';
 import { KowlTimePicker } from '../../misc/KowlTimePicker';
 import { ChevronLeftIcon, ChevronRightIcon, SkipIcon } from '@primer/octicons-react';
-import { Button, Tooltip } from '@redpanda-data/ui';
+import { Button, Tooltip, Popover } from '@redpanda-data/ui';
 
 type EditOptions = 'startOffset' | 'endOffset' | 'time' | 'otherGroup';
 
@@ -297,7 +297,7 @@ export class EditOffsetsModal extends Component<{
             </p>
         </div>;
 
-        return <Popover trigger="click" content={content}>
+        return <Popover trigger="click" content={content} size="auto" hideCloseButton>
             <WarningOutlined />
         </Popover>;
     }

frontend/src/components/pages/reassign-partitions/Step1.Partitions.tsx

@@ -11,15 +11,15 @@
 
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import { ConfigProvider, Popover, Table } from 'antd';
+import { ConfigProvider, Table } from 'antd';
 import { makePaginationConfig, renderLogDirSummary, sortField, WarningToolip } from '../../misc/common';
 import { Partition, PartitionReassignmentsPartition, Topic } from '../../../state/restInterfaces';
 import { BrokerList } from '../../misc/BrokerList';
 import { IndeterminateCheckbox } from './components/IndeterminateCheckbox';
 import { SelectionInfoBar } from './components/StatisticsBar';
 import { prettyBytesOrNA } from '../../../utils/utils';
 import { ColumnProps } from 'antd/lib/table/Column';
-import { DefaultSkeleton, findPopupContainer, ZeroSizeWrapper, InfoText } from '../../../utils/tsxUtils';
+import { DefaultSkeleton, ZeroSizeWrapper, InfoText } from '../../../utils/tsxUtils';
 import { api } from '../../../state/backendApi';
 import { computed, IReactionDisposer, makeObservable, observable, transaction } from 'mobx';
 import { PartitionSelection } from './ReassignPartitions';
@@ -28,6 +28,7 @@ import { uiSettings } from '../../../state/ui';
 import { ColumnFilterItem, ColumnsType, ExpandableConfig, TableRowSelection } from 'antd/lib/table/interface';
 import { SearchOutlined, WarningTwoTone } from '@ant-design/icons';
 import { SearchTitle } from '../../misc/KowlTable';
+import { Popover } from '@redpanda-data/ui'
 
 export type TopicWithPartitions = Topic & { partitions: Partition[], activeReassignments: PartitionReassignmentsPartition[] };
 
@@ -439,11 +440,13 @@ function renderPartitionError(partition: Partition) {
 
     return <Popover
         title="Partition Error"
-        placement="rightTop" overlayClassName="popoverSmall"
-        getPopupContainer={findPopupContainer}
-        content={<div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
-            {txt}
-        </div>
+        placement="right-start" 
+        size="auto"
+        hideCloseButton
+        content={
+            <div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
+                {txt}
+            </div>
         }
     >
         <span>
@@ -459,12 +462,14 @@ function renderPartitionError(partition: Partition) {
 function renderPartitionErrorsForTopic(_partitionsWithErrors: number) {
     return <Popover
         title="Partition Error"
-        placement="rightTop" overlayClassName="popoverSmall"
-        getPopupContainer={findPopupContainer}
-        content={<div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
-            Some partitions could not be retreived.<br />
-            Expand the topic to see which partitions are affected.
-        </div>
+        placement="right-start" 
+        size="auto"
+        hideCloseButton
+        content={
+            <div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
+                Some partitions could not be retreived.<br />
+                Expand the topic to see which partitions are affected.
+            </div>
         }
     >
         <span>

frontend/src/components/pages/schemas/Schema.Details.tsx

@@ -227,7 +227,7 @@ class SchemaDetailsView extends PageComponent<{ subjectName: string }> {
                             <div>
                                 {' '}
                                 {/* the additional div is necessary because popovers do not trigger on disabled elements, even on hover */}
-                                <Tooltip label="Copy raw JSON to clipboard" placement="top" hasArrow={true}>
+                                <Tooltip label="Copy raw JSON to clipboard" placement="top" hasArrow={true} isDisabled={!isClipboardAvailable}>
                                     <Button
                                         isDisabled={!isClipboardAvailable}
                                         onClick={() => {

frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx

@@ -10,7 +10,7 @@
  */
 
 import { FilterOutlined } from '@ant-design/icons';
-import { AutoComplete, Input, Modal, Popover } from 'antd';
+import { AutoComplete, Input, Modal } from 'antd';
 import { arrayMoveMutable } from 'array-move';
 import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -25,7 +25,7 @@ import { Code, Label, OptionGroup, toSafeString } from '../../../../utils/tsxUti
 import { getAllMessageKeys, randomId, collectElements2, CollectedProperty } from '../../../../utils/utils';
 import globExampleImg from '../../../../assets/globExample.png';
 import { InfoIcon, ThreeBarsIcon, GearIcon, XIcon } from '@primer/octicons-react';
-import { Button, Checkbox } from '@redpanda-data/ui';
+import { Button, Checkbox, Popover } from '@redpanda-data/ui';
 
 
 const globHelp = <div>
@@ -144,7 +144,7 @@ export class PreviewSettings extends Component<{ getShowDialog: () => boolean, s
             <div>
                 <span >
                     When viewing large messages we're often only interested in a few specific fields.
-                    Add <Popover trigger={['click']} placement="bottom" content={globHelp}>
+                    Add <Popover trigger={'click'} placement="bottom" content={globHelp} size="auto" hideCloseButton>
                         <span style={{
                             margin: '0 2px',
                             color: 'hsl(205deg, 100%, 50%)',
@@ -266,9 +266,10 @@ class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, o
 
             {/* Settings */}
             <Popover
-                trigger={['click']}
-                placement="bottomLeft"
-                arrowPointAtCenter={true}
+                trigger={'click'}
+                placement="bottom-start"
+                size="auto"
+                hideCloseButton
                 content={<div style={{ display: 'flex', flexDirection: 'column', gap: '.3em' }} >
 
                     <Label text="Display Name" style={{ marginBottom: '.5em' }}>

frontend/src/components/pages/topics/Tab.Messages/index.tsx

@@ -11,7 +11,7 @@
 
 import { ClockCircleOutlined, DeleteOutlined, DownloadOutlined, EllipsisOutlined, FilterOutlined, SettingFilled, SettingOutlined } from '@ant-design/icons';
 import { DownloadIcon, PlusIcon, SkipIcon, SyncIcon, XCircleIcon } from '@primer/octicons-react';
-import { ConfigProvider, DatePicker, Dropdown, Empty, Menu, message, Modal, Popover, Radio, Select, Table, Typography } from 'antd';
+import { ConfigProvider, DatePicker, Dropdown, Empty, Menu, message, Modal, Radio, Select, Table, Typography } from 'antd';
 import { ColumnProps } from 'antd/lib/table';
 import { SortOrder } from 'antd/lib/table/interface';
 import Paragraph from 'antd/lib/typography/Paragraph';
@@ -46,7 +46,7 @@ import { getPreviewTags, PreviewSettings } from './PreviewSettings';
 import styles from './styles.module.scss';
 import createAutoModal from '../../../../utils/createAutoModal';
 import { CollapsedFieldProps } from '@textea/json-viewer';
-import { Button, Input, InputGroup, Switch, Alert, AlertIcon, Tabs as RpTabs, Box, SearchField, Tag, TagCloseButton, TagLabel, Tooltip } from '@redpanda-data/ui';
+import { Button, Input, InputGroup, Switch, Alert, AlertIcon, Tabs as RpTabs, Box, SearchField, Tag, TagCloseButton, TagLabel, Tooltip, Popover } from '@redpanda-data/ui';
 import { MdExpandMore } from 'react-icons/md';
 import { SingleSelect } from '../../../misc/Select';
 import { isServerless } from '../../../../config';
@@ -1238,11 +1238,11 @@ class ColumnOptions extends Component<{ tags: ColumnList[]; }> {
     };
 }
 
-
 const makeHelpEntry = (title: string, content: ReactNode, popTitle?: string): ReactNode => (
-    <Popover key={title} trigger="click" title={popTitle} content={content} overlayClassName="noArrow" overlayStyle={{ maxWidth: '600px' }}
-    >
-        <Button variant="link" size="small" style={{ fontSize: '1.2em' }}>{title}</Button>
+    <Popover key={title} trigger="click" hideCloseButton title={popTitle} content={<Box maxW="600px">{content}</Box>} size="auto">
+        <Button variant="link" size="small" style={{ fontSize: '1.2em' }}>
+            {title}
+        </Button>
     </Popover>
 );
 

frontend/src/components/pages/topics/Tab.Partitions.tsx

@@ -12,16 +12,16 @@
 import { Component } from 'react';
 import React from 'react';
 import { Partition, Topic, } from '../../../state/restInterfaces';
-import { Table, Popover, } from 'antd';
+import { Table } from 'antd';
 import { observer } from 'mobx-react';
 import { api, } from '../../../state/backendApi';
 import { sortField, makePaginationConfig } from '../../misc/common';
 import '../../../utils/arrayExtensions';
 import { uiState } from '../../../state/uiState';
-import { numberToThousandsString, DefaultSkeleton, InfoText, findPopupContainer, ZeroSizeWrapper } from '../../../utils/tsxUtils';
+import { numberToThousandsString, DefaultSkeleton, InfoText, ZeroSizeWrapper } from '../../../utils/tsxUtils';
 import { BrokerList } from '../../misc/BrokerList';
 import { WarningTwoTone } from '@ant-design/icons';
-import { Alert, AlertIcon } from '@redpanda-data/ui';
+import { Alert, AlertIcon, Popover } from '@redpanda-data/ui';
 
 
 @observer
@@ -100,8 +100,9 @@ function renderPartitionError(partition: Partition) {
 
     return <Popover
         title="Partition Error"
-        placement="rightTop" overlayClassName="popoverSmall"
-        getPopupContainer={findPopupContainer}
+        placement="right-start" 
+        size="auto"
+        hideCloseButton
         content={<div style={{ maxWidth: '500px', whiteSpace: 'pre-wrap' }}>
             {txt}
         </div>