use same delete icon in acl list that's being used in topic list

frontend/src/components/App.tsx

@@ -34,7 +34,7 @@ import Login from './misc/login';
 import LoginCompletePage from './misc/login-complete';
 import env, { getBuildDate } from '../utils/env';
 import { MenuFoldOutlined, MenuUnfoldOutlined, GithubFilled, TwitterOutlined, LinkedinFilled, SlackSquareOutlined } from '@ant-design/icons';
-import { LayoutBypass, } from '../utils/tsxUtils';
+import { ZeroSizeWrapper, } from '../utils/tsxUtils';
 import { UserPreferencesButton } from './misc/UserPreferences';
 import { featureErrors } from '../state/supportedFeatures';
 import { renderErrorModals } from './misc/ErrorModal';
@@ -176,17 +176,17 @@ const AppPageHeader = observer(() => {
     const breadcrumbRender = (r: AntBreadcrumbRoute, params: any) => (r.breadcrumbName === params.breadcrumbName && r.path === params.path)
         ? <>
             <div className="breadcrumbLast">{r.breadcrumbName}</div>
-            <LayoutBypass justifyContent="start">
+            <ZeroSizeWrapper justifyContent="start">
                 <DataRefreshButton />
-            </LayoutBypass>
+            </ZeroSizeWrapper>
         </>
         : <NavLink to={r.path}>{r.breadcrumbName}</NavLink>;
 
     return <MotionDiv identityKey={uiState.pageTitle} className="pageTitle" style={{ display: 'flex', paddingRight: '16px', alignItems: 'center', marginBottom: '10px' }}>
         <PageHeader
             breadcrumb={{
                 routes: breadcrumbs,
-                separator: <LayoutBypass width="10px"><ChevronRightIcon size={14} verticalAlign="unset" /></LayoutBypass>,
+                separator: <ZeroSizeWrapper width="10px"><ChevronRightIcon size={14} verticalAlign="unset" /></ZeroSizeWrapper>,
                 params: breadcrumbs.last(),
                 itemRender: breadcrumbRender
             }}

frontend/src/components/misc/common.tsx

@@ -19,7 +19,7 @@ import { Grid, Modal, Tag } from 'antd';
 import { uiState } from '../../state/uiState';
 import { prettyBytesOrNA } from '../../utils/utils';
 import env, { IsDev } from '../../utils/env';
-import { LayoutBypass } from '../../utils/tsxUtils';
+import { ZeroSizeWrapper } from '../../utils/tsxUtils';
 import { clone } from '../../utils/jsonUtils';
 import { TopicLogDirSummary } from '../../state/restInterfaces';
 import { AlertIcon } from '@primer/octicons-react';
@@ -205,7 +205,7 @@ export function WarningToolip(p: { content: React.ReactNode, position: 'top' | '
         transform: 'none',
     };
 
-    return <LayoutBypass>
+    return <ZeroSizeWrapper>
         <div className="tooltip" style={{
             color: 'hsl(33deg, 90%, 65%)',
             borderRadius: '25px',
@@ -219,5 +219,5 @@ export function WarningToolip(p: { content: React.ReactNode, position: 'top' | '
             <AlertIcon />
             <span className="tooltiptext" style={p.position == 'left' ? styleLeft : undefined}>{p.content}</span>
         </div>
-    </LayoutBypass>
+    </ZeroSizeWrapper>
 }

frontend/src/components/pages/acls/Acl.List.tsx

@@ -22,11 +22,11 @@ import { animProps } from '../../../utils/animationProps';
 import { comparer, computed, makeObservable, observable } from 'mobx';
 import { appGlobal } from '../../../state/appGlobal';
 import Card from '../../misc/Card';
-import { Code, DefaultSkeleton } from '../../../utils/tsxUtils';
+import { Code, DefaultSkeleton, ZeroSizeWrapper } from '../../../utils/tsxUtils';
 import { clone } from '../../../utils/jsonUtils';
 import { KowlTable } from '../../misc/KowlTable';
 import { LockIcon } from '@primer/octicons-react';
-import { TrashIcon } from '@heroicons/react/solid';
+import { TrashIcon } from '@heroicons/react/outline';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { AclFlat, AclPrincipalGroup, collectClusterAcls, collectConsumerGroupAcls, collectTopicAcls, createEmptyClusterAcl, createEmptyConsumerGroupAcl, createEmptyTopicAcl } from './Models';
 import { AclPrincipalGroupEditor } from './PrincipalGroupEditor';
@@ -61,34 +61,33 @@ class AclList extends PageComponent {
                     >
                         <span>{record.sourceEntries.length}</span>
 
-                        <Popconfirm
-                            title={<>Delete all ACL entries for principal <Code>{record.principalName}</Code> ?</>}
-                            icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
-                            placement="left"
-                            okText="Delete"
-
-                            okButtonProps={{ danger: true }}
-                            onConfirm={async () => {
-                                await api.deleteACLs({
-                                    resourceType: 'Any',
-                                    resourceName: undefined,
-                                    resourcePatternType: 'Any',
-                                    principal: record.principalType + ':' + record.principalName,
-                                    host: record.host,
-                                    operation: 'Any',
-                                    permissionType: 'Any',
-                                });
-                                await this.refreshData(true);
-                                message.success(<>Deleted ACLs for principal <Code>{record.principalName}</Code></>);
-                            }}
-                        >
-                            <Button
-                                type="text"
-                                className="iconButton"
-                                style={{ marginLeft: 'auto', padding: '4px', width: '40px' }}
-
-                            ><TrashIcon /></Button>
-                        </Popconfirm>
+                        <ZeroSizeWrapper height="21px" width="auto" wrapperStyle={{ marginLeft: 'auto' }}>
+                            <Popconfirm
+                                title={<>Delete all ACL entries for principal <Code>{record.principalName}</Code> ?</>}
+                                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+                                placement="left"
+                                okText="Delete"
+
+                                okButtonProps={{ danger: true }}
+                                onConfirm={async () => {
+                                    await api.deleteACLs({
+                                        resourceType: 'Any',
+                                        resourceName: undefined,
+                                        resourcePatternType: 'Any',
+                                        principal: record.principalType + ':' + record.principalName,
+                                        host: record.host,
+                                        operation: 'Any',
+                                        permissionType: 'Any',
+                                    });
+                                    await this.refreshData(true);
+                                    message.success(<>Deleted ACLs for principal <Code>{record.principalName}</Code></>);
+                                }}
+                            >
+                                <Button type="text" className="iconButton" style={{ marginLeft: 'auto' }}>
+                                    <TrashIcon />
+                                </Button>
+                            </Popconfirm>
+                        </ZeroSizeWrapper>
                     </span>
                 </>
             },

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

@@ -19,7 +19,7 @@ import React, { Component, CSSProperties, useState } from 'react';
 import { api } from '../../../state/backendApi';
 import { ApiError, ClusterConnectorInfo, ClusterConnectors, ClusterConnectorTaskInfo, ConnectorState } from '../../../state/restInterfaces';
 import { animProps } from '../../../utils/animationProps';
-import { findPopupContainer, LayoutBypass } from '../../../utils/tsxUtils';
+import { findPopupContainer, ZeroSizeWrapper } from '../../../utils/tsxUtils';
 import Card from '../../misc/Card';
 
 import ElasticLogo from '../../../assets/connectors/elastic.svg';
@@ -246,11 +246,11 @@ export const ConnectorClass = observer((props: { observable: { class: string; }
     return <div style={{ height: '1px', overflow: 'visible', display: 'flex', alignItems: 'center' }}>
         {meta && meta.logo &&
             <span style={{ verticalAlign: 'inherit', marginRight: '5px' }}>
-                <LayoutBypass width="22px" transform="translateY(-1px)" >
+                <ZeroSizeWrapper width="22px" transform="translateY(-1px)" >
                     <div style={{ width: '22px', height: '22px' }}>
                         {meta.logo}
                     </div>
-                </LayoutBypass>
+                </ZeroSizeWrapper>
             </span>
         }
 
@@ -527,9 +527,9 @@ export const TaskState = observer((p: { observable: { state: ClusterConnectorTas
     const state = task.state;
 
     const iconWrapper = (icon: JSX.Element) => <span style={{ display: 'inline-flex', fontSize: '17px', verticalAlign: 'middle' }}>
-        <LayoutBypass width="17px">
+        <ZeroSizeWrapper width="17px">
             {icon}
-        </LayoutBypass>
+        </ZeroSizeWrapper>
     </span>
 
     let icon: JSX.Element = <></>;
@@ -547,12 +547,12 @@ export const TaskState = observer((p: { observable: { state: ClusterConnectorTas
     let errBtn: JSX.Element | undefined = undefined;
     let modal: JSX.Element | undefined = undefined;
     if (task.taskId != null && task.trace) {
-        errBtn = <LayoutBypass height="12px" width="autos">
+        errBtn = <ZeroSizeWrapper height="12px" width="autos">
             <Button danger onClick={() => showErr(task.trace)} style={{ padding: '0px 12px', display: 'inline-flex', alignItems: 'center', height: '30px', gap: '5px' }}>
                 {stateContent}
                 <span>(Show Error)</span>
             </Button>
-        </LayoutBypass>
+        </ZeroSizeWrapper>
 
         const close = () => showErr(undefined);
         modal = <Modal visible={err != null} onOk={close} onCancel={close} cancelButtonProps={{ style: { display: 'none' } }}

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

@@ -19,7 +19,7 @@ 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, LayoutBypass, InfoText } from '../../../utils/tsxUtils';
+import { DefaultSkeleton, findPopupContainer, ZeroSizeWrapper, InfoText } from '../../../utils/tsxUtils';
 import { api } from '../../../state/backendApi';
 import { computed, IReactionDisposer, makeObservable, observable, transaction } from 'mobx';
 import { PartitionSelection } from './ReassignPartitions';
@@ -447,11 +447,11 @@ function renderPartitionError(partition: Partition) {
         }
     >
         <span>
-            <LayoutBypass justifyContent="center" alignItems="center" width="20px" height="18px">
+            <ZeroSizeWrapper justifyContent="center" alignItems="center" width="20px" height="18px">
                 <span style={{ fontSize: '19px' }}>
                     <WarningTwoTone twoToneColor="orange" />
                 </span>
-            </LayoutBypass>
+            </ZeroSizeWrapper>
         </span>
     </Popover>
 }
@@ -468,11 +468,11 @@ function renderPartitionErrorsForTopic(_partitionsWithErrors: number) {
         }
     >
         <span>
-            <LayoutBypass justifyContent="center" alignItems="center" width="20px" height="18px">
+            <ZeroSizeWrapper justifyContent="center" alignItems="center" width="20px" height="18px">
                 <span style={{ fontSize: '19px' }}>
                     <WarningTwoTone twoToneColor="orange" />
                 </span>
-            </LayoutBypass>
+            </ZeroSizeWrapper>
         </span>
     </Popover>
 }

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

@@ -39,7 +39,7 @@ import { FilterableDataSource } from '../../../../utils/filterableDataSource';
 import { sanitizeString, wrapFilterFragment } from '../../../../utils/filterHelper';
 import { toJson } from '../../../../utils/jsonUtils';
 import { editQuery } from '../../../../utils/queryHelper';
-import { Ellipsis, findPopupContainer, Label, LayoutBypass, numberToThousandsString, OptionGroup, StatusIndicator, TimestampDisplay, toSafeString } from '../../../../utils/tsxUtils';
+import { Ellipsis, findPopupContainer, Label, ZeroSizeWrapper, numberToThousandsString, OptionGroup, StatusIndicator, TimestampDisplay, toSafeString } from '../../../../utils/tsxUtils';
 import { cullText, encodeBase64, prettyBytes, prettyMilliseconds, titleCase } from '../../../../utils/utils';
 import { makePaginationConfig, range, sortField } from '../../../misc/common';
 import { KowlJsonView } from '../../../misc/KowlJsonView';
@@ -259,9 +259,9 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
                                 <MotionSpan identityKey="btnCancelSearch" overrideAnimProps={animProps_span_messagesStatus}>
                                     <Tooltip title="Stop searching" getPopupContainer={findPopupContainer}>
                                         <Button type="primary" danger onClick={() => api.stopMessageSearch()} style={{ padding: 0, width: '48px' }}>
-                                            <LayoutBypass >
+                                            <ZeroSizeWrapper >
                                                 <XCircleIcon size={20} />
-                                            </LayoutBypass>
+                                            </ZeroSizeWrapper>
                                         </Button>
                                     </Tooltip>
                                 </MotionSpan>
@@ -455,13 +455,6 @@ export class TopicMessageView extends Component<TopicMessageViewProps> {
                             </Dropdown>
                         </div>
                     </NoClipboardPopover>
-                    // <ZeroSizeWrapper width={32} height={0}>
-                    //     <Button className='iconButton' style={{ height: '40px', width: '40px' }} type='link' icon={<CopyOutlined />} size='middle' onClick={() => this.copyMessage(record)} />
-                    // </ZeroSizeWrapper>
-                    // <ZeroSizeWrapper width={32} height={0}>
-                    //     <Button className='iconButton fill' style={{ height: '40px', width: '40px' }} type='link' icon={<LinkOutlined />} size='middle' onClick={() => this.copyLinkToMessage(record)} />
-                    // </ZeroSizeWrapper>
-                    // <Divider type="vertical" />
                 ),
             },
             // todo: size was a guess anyway, might be added back later
@@ -1386,7 +1379,7 @@ class MessageSearchFilterBar extends Component {
                             value={this.currentFilter!.code}
                             onValueChange={(code, transpiled) => { this.currentFilter!.code = code; this.currentFilter!.transpiledCode = transpiled; this.hasChanges = true;  }}
 
-                        /> 
+                            />
 
                                              </>
                     </Label>

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

@@ -18,7 +18,7 @@ import { api, } from '../../../state/backendApi';
 import { sortField, makePaginationConfig } from '../../misc/common';
 import '../../../utils/arrayExtensions';
 import { uiState } from '../../../state/uiState';
-import { numberToThousandsString, DefaultSkeleton, InfoText, findPopupContainer, LayoutBypass } from '../../../utils/tsxUtils';
+import { numberToThousandsString, DefaultSkeleton, InfoText, findPopupContainer, ZeroSizeWrapper } from '../../../utils/tsxUtils';
 import { BrokerList } from '../../misc/BrokerList';
 import { WarningTwoTone } from '@ant-design/icons';
 
@@ -104,11 +104,11 @@ function renderPartitionError(partition: Partition) {
         }
     >
         <span>
-            <LayoutBypass justifyContent="center" alignItems="center" width="20px" height="18px">
+            <ZeroSizeWrapper justifyContent="center" alignItems="center" width="20px" height="18px">
                 <span style={{ fontSize: '19px' }}>
                     <WarningTwoTone twoToneColor="orange" />
                 </span>
-            </LayoutBypass>
+            </ZeroSizeWrapper>
         </span>
     </Popover>
 

frontend/src/utils/tsxUtils.tsx

@@ -424,8 +424,7 @@ export class StatusIndicator extends Component<StatusIndicatorProps> {
     }
 }
 
-// todo: layoutbypass and zerosizewrapper do the same thing, merge them.
-export class LayoutBypass extends Component<{ width?: string, height?: string, justifyContent?: string, alignItems?: string, positionContentAbsolute?: boolean, transform?: string }> {
+export class ZeroSizeWrapper extends Component<{ width?: string, height?: string, justifyContent?: string, alignItems?: string, positionContentAbsolute?: boolean, transform?: string, wrapperStyle?: CSSProperties }> {
 
     static readonly style: CSSProperties = {
         display: 'inline-flex',
@@ -438,9 +437,9 @@ export class LayoutBypass extends Component<{ width?: string, height?: string, j
 
     render() {
         const p = this.props;
-        let style = LayoutBypass.style;
-        if (p.width || p.height || p.justifyContent || p.alignItems || p.transform) {
-            style = Object.assign({}, style, p);
+        let style = ZeroSizeWrapper.style;
+        if (p.width || p.height || p.justifyContent || p.alignItems || p.transform || p.wrapperStyle) {
+            style = Object.assign({}, style, p, p.wrapperStyle);
         }
 
         return <span className="verticalCenter" style={style}>
@@ -451,16 +450,6 @@ export class LayoutBypass extends Component<{ width?: string, height?: string, j
     }
 }
 
-export const ZeroSizeWrapper = (p: { width: number, height: number, children?: React.ReactNode }) => {
-    return <span style={{
-        width: p.width, height: p.height,
-        display: 'inline-flex', placeContent: 'center', placeItems: 'center',
-
-    }}>
-        {p.children}
-    </span>;
-};
-
 
 const defaultSkeletonStyle = { margin: '2rem' };
 const innerSkeleton = <Skeleton loading={true} active={true} paragraph={{ rows: 8 }} />