katello 4.16.3 → 4.17.0.rc1

data/webpack/ForemanColumnExtensions/index.js

@@ -18,6 +18,7 @@ import {
   DescriptionListTerm as Dt,
   Text,
   TextVariants,
+  Icon,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
@@ -69,7 +70,7 @@ const hostsIndexColumnExtensions = [
             >
               <FontAwesomeImageModeIcon title={__('Image mode')} />
             </Popover>
-            : <span style={{ color: 'var(--pf-global--palette--black-600)' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
+            : <span style={{ color: 'var(--pf-v5-global--palette--black-600)' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
           }
         </span>
       );
@@ -102,19 +103,26 @@ const hostsIndexColumnExtensions = [
         <Flex alignContent={{ default: 'alignContentSpaceBetween' }}>
           {security !== undefined &&
             <FlexItem>
-              <SecurityIcon color="#0066cc" />
+              <Icon color="#0066cc" >
+                <SecurityIcon />
+              </Icon>
               <Link to={hostErrataUrl('security')}>{security}</Link>
             </FlexItem>
           }
           {bugfix !== undefined &&
             <FlexItem>
-              <BugIcon color="#8bc1f7" />
+              <Icon color="#8bc1f7" >
+                <BugIcon />
+              </Icon>
               <Link to={hostErrataUrl('bugfix')}>{bugfix}</Link>
             </FlexItem>
           }
           {enhancement !== undefined &&
             <FlexItem>
-              <EnhancementIcon color="#002f5d" />
+
+              <Icon color="#002f5d" >
+                <EnhancementIcon color="#002f5d" />
+              </Icon>
               <Link to={hostErrataUrl('enhancement')}>{enhancement}</Link>
             </FlexItem>
           }

data/webpack/components/ActivationKeysSearch/index.js

@@ -5,13 +5,14 @@ import {
   FormGroup,
   Spinner,
   EmptyState,
-  Title,
   Button,
+  Alert, EmptyStateHeader,
+} from '@patternfly/react-core';
+import {
   Select,
   SelectOption,
   SelectVariant,
-  Alert,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 import $ from 'jquery';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -134,9 +135,7 @@ const ActivationKeysSearch = () => {
   if (!(selectedEnvId && selectedContentViewId)) {
     return (
       <EmptyState>
-        <Title headingLevel="h4" size="lg" ouiaId="ak-empty-state-title">
-          {__('Please select a lifecycle environment and content view to view activation keys.')}
-        </Title>
+        <EmptyStateHeader titleText={<>{__('Please select a lifecycle environment and content view to view activation keys.')}</>} headingLevel="h4" />
       </EmptyState>
     );
   }
@@ -157,7 +156,7 @@ const ActivationKeysSearch = () => {
           <Select
             ouiaId="ak-select"
             variant={SelectVariant.typeaheadMulti}
-            onToggle={setIsOpen}
+            onToggle={(_event, val) => setIsOpen(val)}
             onSelect={onSelect}
             selections={selectedKeys}
             isOpen={isOpen}

data/webpack/components/Bookmark/AddBookmarkModal.js

@@ -46,7 +46,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             aria-label="input_name"
             name="name"
             value={name}
-            onChange={setName}
+            onChange={(_event, val) => setName(val)}
           />
         </FormGroup>
         <FormGroup label={__('Search Query')} isRequired fieldId="query">
@@ -58,7 +58,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             aria-label="input_query"
             name="query"
             value={query}
-            onChange={setQuery}
+            onChange={(_event, val) => setQuery(val)}
           />
         </FormGroup>
         <FormGroup fieldId="public" isInline>
@@ -68,7 +68,7 @@ const AddBookmarkModal = ({ selectedItem, onClose, controller }) => {
             name="public"
             label={__('Public')}
             isChecked={isPublic}
-            onChange={setIsPublic}
+            onChange={(_event, val) => setIsPublic(val)}
           />
           <Tooltip
             position={TooltipPosition.top}

data/webpack/components/Bookmark/Bookmark.scss

@@ -1,4 +1,4 @@
-  .pf-c-dropdown__toggle-text {
+  .pf-v5-c-dropdown__toggle-text {
     padding: 0 5px;
 
     .fa-bookmark {
@@ -6,7 +6,7 @@
     }
   }
 
-  .pf-c-dropdown__toggle-icon {
+  .pf-v5-c-dropdown__toggle-icon {
     margin: 0;
   }
 
@@ -14,7 +14,7 @@
   .pf-m-inline {
     align-content: center;
 
-    .pf-c-check {
+    .pf-v5-c-check {
       input {
         margin-top: 2px;
       }

data/webpack/components/Bookmark/index.js

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
-import { Dropdown, DropdownItem, DropdownToggle, DropdownSeparator } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownToggle,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
 import { OutlinedBookmarkIcon } from '@patternfly/react-icons';
 import { getBookmarks } from './BookmarkActions';
 import { selectBookmarks, selectBookmarkStatus } from './BookmarkSelectors';
@@ -71,7 +76,7 @@ const Bookmark = ({
           <DropdownToggle
             ouiaId="bookmark-toggle"
             isDisabled={isDisabled || status !== STATUS.RESOLVED}
-            onToggle={setDropdownOpen}
+            onToggle={(_event, val) => setDropdownOpen(val)}
             id="toggle-id"
           >
             <OutlinedBookmarkIcon />

data/webpack/components/EditableSwitch.js

@@ -18,7 +18,7 @@ const EditableSwitch = ({
       aria-label={identifier}
       ouiaId={`switch-${identifier}`}
       isChecked={value}
-      onChange={onSwitch}
+      onChange={(_event, val) => onSwitch(val)}
       disabled={disabled}
     />
   );

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -69,7 +69,7 @@ const EditableTextInput = ({
     onKeyUp,
     component,
     value: inputValue || '',
-    onChange: setInputValue,
+    onChange: (e, v) => setInputValue(v),
   };
 
   return editing ? (

data/webpack/components/EditableTextInput/editableTextInput.scss

@@ -14,5 +14,5 @@
 }
 
 .textInput-placeholder {
-  color: var(--pf-global--disabled-color--100);
+  color: var(--pf-v5-global--disabled-color--100);
 }

data/webpack/components/Errata/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableText } from '@patternfly/react-table';
-import { Tooltip, ToggleGroupItem } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import {
   chart_color_black_500 as pfBlack,
   chart_color_gold_400 as pfGold,
@@ -188,26 +188,3 @@ ErrataSeverity.propTypes = {
   severity: PropTypes.string.isRequired,
 };
 
-export const ErrataToggleGroupItem = ({
-  text, tooltipText, isSelected, onChange, ...toggleGroupItemProps
-}) => (
-  <Tooltip
-    content={tooltipText}
-    position="top"
-    enableFlip
-  >
-    <ToggleGroupItem
-      text={text}
-      isSelected={isSelected}
-      onChange={onChange}
-      {...toggleGroupItemProps}
-    />
-  </Tooltip>
-);
-
-ErrataToggleGroupItem.propTypes = {
-  text: PropTypes.string.isRequired,
-  tooltipText: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-};

data/webpack/components/Loading.js

@@ -7,6 +7,8 @@ import {
   EmptyStateIcon,
   Spinner,
   Skeleton,
+  EmptyStateHeader,
+  EmptyStateFooter,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -19,11 +21,14 @@ const Loading = ({
   return (
     <Bullseye>
       <EmptyState>
-        <EmptyStateIcon size={size} variant="container" component={Spinner} />
-        {showText && (
-        <Title size={size} headingLevel="h4" ouiaId="loading-title">
-          {loadingText || __('Loading')}
-        </Title>)}
+        <EmptyStateHeader icon={<EmptyStateIcon size={size} icon={Spinner} />} />
+        <EmptyStateFooter>
+          {showText && (
+            <Title size={size} headingLevel="h4" ouiaId="loading-title">
+              {loadingText || __('Loading')}
+            </Title>
+          )}
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );
@@ -43,5 +48,4 @@ Loading.defaultProps = {
   skeleton: false,
 };
 
-
 export default Loading;

data/webpack/components/Packages/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { TableText } from '@patternfly/react-table';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -25,7 +26,7 @@ const PackagesStatus = ({ upgradable_versions: upgradableVersions }) => {
 
   return (
     <TableText wrapModifier="nowrap">
-      {color && <PackagesIcon color={color} title={label} />} {label}
+      {color && <Icon color={color} title={label}><PackagesIcon /></Icon>} {label}
     </TableText>
   );
 };

data/webpack/components/SelectAllCheckbox/index.js

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownToggle, DropdownToggleCheckbox,
-  DropdownItem } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
+  DropdownItem,
+} from '@patternfly/react-core/deprecated';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { noop } from 'foremanReact/common/helpers';
 
@@ -95,7 +99,7 @@ const SelectAllCheckbox = ({
               key="tablewrapper-select-all-checkbox"
               ouiaId="select-all-checkbox-dropdown-toggle-checkbox"
               aria-label="Select all"
-              onChange={checked => onSelectAllCheckboxChange(checked)}
+              onChange={(_event, checked) => onSelectAllCheckboxChange(checked)}
               isChecked={selectionToggle}
               isDisabled={totalCount === 0 && selectedCount === 0}
             >

data/webpack/components/SelectableDropdown/SelectableDropdown.js

@@ -1,6 +1,16 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Spinner, Select, SelectOption, SelectVariant, Level, LevelItem } from '@patternfly/react-core';
+import {
+  Spinner,
+  Level,
+  LevelItem,
+  Icon,
+} from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
 import { ErrorCircleOIcon } from '@patternfly/react-icons';
 
 
@@ -9,7 +19,15 @@ const SelectableDropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const icon = () => {
-    if (error) return <span aria-label={`${title} error`}><ErrorCircleOIcon color="red" /></span>;
+    if (error) {
+      return (
+        <span aria-label={`${title} error`}>
+          <Icon color="red">
+            <ErrorCircleOIcon />
+          </Icon>
+        </span>
+      );
+    }
     if (loading) return <span aria-label={`${title} spinner`}><Spinner size="sm" /></span>;
     return null;
   };
@@ -37,7 +55,7 @@ const SelectableDropdown = ({
           aria-label={`select ${title}`}
           key="type-dropdown"
           variant={SelectVariant.single}
-          onToggle={onToggle}
+          onToggle={(_event, open) => onToggle(open)}
           onSelect={onSelect}
           selections={selected}
           isOpen={isOpen}

data/webpack/components/Table/EmptyStateMessage.js

@@ -4,10 +4,8 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
   Bullseye,
-  Title,
-  Button,
+  Button, EmptyStateActions, EmptyStateHeader, EmptyStateFooter,
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -77,7 +75,7 @@ const EmptyStateMessage = ({
   return (
     <Bullseye>
       <EmptyState
-        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.small}
+        variant={happy ? EmptyStateVariant.xl : EmptyStateVariant.sm}
       >
         <KatelloEmptyStateIcon
           error={!!error}
@@ -85,15 +83,14 @@ const EmptyStateMessage = ({
           customIcon={PlusCircleIcon}
           happyIcon={happy}
         />
-        <Title headingLevel="h2" size="lg" ouiaId="empty-state-title">
-          {emptyStateTitle}
-        </Title>
+        <EmptyStateHeader titleText={<>{emptyStateTitle}</>} headingLevel="h2" />
         <EmptyStateBody>
           {emptyStateBody}
         </EmptyStateBody>
-        {showPrimaryAction && actionButton}
-        {showSecondaryActionAnchor &&
-          <EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          {showPrimaryAction && actionButton}
+          {showSecondaryActionAnchor &&
+          <EmptyStateActions>
             <Button variant="link" ouiaId="empty-state-secondary-action-link">
               {extraTableProps.secondaryActionTargetBlank ? (
                 <a href={secondaryActionLink} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
@@ -101,17 +98,18 @@ const EmptyStateMessage = ({
                 <a href={secondaryActionLink} style={{ textDecoration: 'none' }} >{secondaryActionTitle}</a>
               )}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
 
-        {(!showSecondaryActionAnchor &&
+          {(!showSecondaryActionAnchor &&
           (showSecondaryActionButton || searchIsActive || !!filtersAreActive)) &&
-          <EmptyStateSecondaryActions>
+          <EmptyStateActions>
             <Button variant="link" onClick={handleClick} ouiaId="empty-state-secondary-action-router-link">
               {secondaryActionText}
             </Button>
-          </EmptyStateSecondaryActions>
+          </EmptyStateActions>
         }
+        </EmptyStateFooter>
       </EmptyState>
     </Bullseye>
   );

data/webpack/components/Table/MainTable.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
+
 import {
-  Table,
+  Table as TableDeprecated,
   TableHeader,
   TableBody,
-  TableComposable,
-} from '@patternfly/react-table';
+  Table,
+} from '@patternfly/react-table/deprecated';
 import { STATUS } from 'foremanReact/constants';
 import { isEqual } from 'lodash';
 import PropTypes from 'prop-types';
@@ -96,18 +97,18 @@ const MainTable = ({
   const tableProps = { cells, rows, ...extraTableProps };
   if (children) {
     return (
-      <TableComposable
+      <Table
         ouiaId="content-view-table-composable"
         aria-label="Content View Table"
         className="katello-pf4-table"
         {...extraTableProps}
       >
         {children}
-      </TableComposable>
+      </Table>
     );
   }
   return (
-    <Table
+    <TableDeprecated
       ouiaId="Content-View-table"
       aria-label="Content View Table"
       className="katello-pf4-table"
@@ -115,7 +116,7 @@ const MainTable = ({
     >
       <TableHeader />
       <TableBody />
-    </Table>
+    </TableDeprecated>
   );
 };
 

data/webpack/components/Table/MainTable.scss

@@ -1,18 +1,18 @@
 .katello-pf4-table {
-  .pf-c-dropdown.pf-m-align-right {
+  .pf-v5-c-dropdown.pf-m-align-right {
     width: 100%;
     justify-content: flex-end;
     display: flex;
   }
 
-  .pf-c-dropdown__menu {
+  .pf-v5-c-dropdown__menu {
     min-width: 0;
   }
-  .pf-c-wizard__footer {
+  .pf-v5-c-wizard__footer {
     z-index: 1;
   }
 
-  .pf-c-table tbody tr td {
+  .pf-v5-c-table tbody tr td {
     vertical-align: inherit;
   }
 

data/webpack/components/extensions/HostDetails/ActionsBar/index.js

@@ -1,6 +1,9 @@
 import React, { useContext } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import {
+  DropdownItem,
+  DropdownSeparator,
+} from '@patternfly/react-core/deprecated';
 import { CubeIcon, UndoIcon, RedoIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -229,7 +229,7 @@ const ChangeHostCVModal = ({
       </TextContent>
       <Checkbox
         isChecked={forceProfileUpload}
-        onChange={setForceProfileUpload}
+        onChange={(_event, val) => setForceProfileUpload(val)}
         label={__('Update the host immediately via remote execution')}
         id="force-profile-upload-checkbox"
         ouiaId="force-profile-upload-checkbox"

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ContentViewDetailsCard.js

@@ -4,15 +4,17 @@ import {
   CardHeader,
   CardTitle,
   CardBody,
-  Dropdown,
-  DropdownItem,
   Flex,
   FlexItem,
   GridItem,
-  KebabToggle,
   Label,
   Tooltip,
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
@@ -59,15 +61,15 @@ export const ContentViewEnvironmentDisplay = ({
             }}
           />}
         >
-          <Label isTruncated color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`}>{lifecycleEnvironment.name}</Label>
+          <Label color="purple" href={`/lifecycle_environments/${lifecycleEnvironment.id}`} style={{ marginRight: '2px' }}>{lifecycleEnvironment.name}</Label>
         </Tooltip>
-        <ContentViewIcon composite={contentView.composite} style={{ marginRight: '2px' }} position="left" />
+        <ContentViewIcon composite={contentView.composite} rolling={contentViewDefault || contentView.rolling} style={{ marginRight: '2px' }} position="left" />
         {contentViewDefault ? <span>{contentView.name}</span> :
         <a style={{ fontSize: '14px' }} href={`/content_views/${contentView.id}`}>
           {truncate(contentView.name)}
         </a>
         }
-        {!contentViewDefault &&
+        {!(contentViewDefault || contentView.rolling) &&
           <FlexItem>
             <a style={{ fontSize: '14px' }} href={urlBuilder(`content_views/${contentView.id}/versions/${contentViewVersionId}`, '')}>
               <FormattedMessage
@@ -89,6 +91,7 @@ ContentViewEnvironmentDisplay.propTypes = {
     name: PropTypes.string,
     id: PropTypes.number,
     composite: PropTypes.bool,
+    rolling: PropTypes.bool,
   }).isRequired,
   lifecycleEnvironment: PropTypes.shape({
     name: PropTypes.string,

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/__tests__/changeHostCVModal.test.js

@@ -126,6 +126,7 @@ test('Select an env > call CV API > select a CV > Save button is enabled', async
   expect(saveButton).toBeInTheDocument();
   expect(saveButton).toHaveAttribute('aria-disabled', 'false');
 
-  assertNockRequest(contentViewsScope, done);
+  assertNockRequest(contentViewsScope);
+  done();
   act(done);
 });

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/__tests__/contentViews.fixtures.json

@@ -14,6 +14,7 @@
     "results": [
         {
             "composite": false,
+            "rolling": false,
             "component_ids": [],
             "default": true,
             "version_count": 1,
@@ -92,6 +93,7 @@
         },
         {
             "composite": true,
+            "rolling": false,
             "component_ids": [
                 3
             ],
@@ -317,6 +319,7 @@
         },
         {
             "composite": false,
+            "rolling": false,
             "component_ids": [],
             "default": false,
             "version_count": 2,
@@ -440,4 +443,4 @@
             }
         }
     ]
-}
+}

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.js

@@ -8,13 +8,15 @@ import {
   FlexItem,
   GridItem,
   ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
-import { ChartPie } from '@patternfly/react-charts';
-import { ErrataMapper, ErrataToggleGroupItem } from '../../../../components/Errata';
+import { ChartPie, ChartTooltip } from '@patternfly/react-charts';
+import { ErrataMapper } from '../../../../components/Errata';
 import { hostIsRegistered } from '../hostDetailsHelpers';
 import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
 import EmptyStateMessage from '../../../Table/EmptyStateMessage';
@@ -85,6 +87,9 @@ function HostInstallableErrata({
                   }}
                   width={250}
                   height={130}
+                  labelComponent={
+                    <ChartTooltip constrainToVisibleArea renderInPortal={false} />
+                  }
                 />
               </div>
             </div>
@@ -120,20 +125,32 @@ const ErrataOverviewCard = ({ hostDetails }) => {
             <CardTitle>{__('Errata')}</CardTitle>
             {neededErrata &&
               <ToggleGroup isCompact>
-                <ErrataToggleGroupItem
+                <ToggleGroupItem
                   text={__('Applicable')}
                   aria-label="Show applicable errata chart"
-                  tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
+                  buttonId="applicableToggle"
                   isSelected={errataCategory === 'applicable'}
                   onChange={selected => selected && setErrataCategory('applicable')}
                 />
-                <ErrataToggleGroupItem
+                <ToggleGroupItem
                   text={__('Installable')}
                   aria-label="Show installable errata chart"
-                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+                  buttonId="installableToggle"
                   isSelected={errataCategory === 'installable'}
                   onChange={selected => selected && setErrataCategory('installable')}
                 />
+                <Tooltip
+                  content={__('Applicable errata apply to at least one package installed on the host.')}
+                  position="top"
+                  enableFlip
+                  triggerRef={() => document.getElementById('applicableToggle')}
+                />
+                <Tooltip
+                  content={__('Installable errata are applicable errata that are available in the host\'s assigned content view environments.')}
+                  position="top"
+                  enableFlip
+                  triggerRef={() => document.getElementById('installableToggle')}
+                />
               </ToggleGroup>
             }
           </Flex>

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -1,5 +1,5 @@
 #errata-card {
-  .pf-c-empty-state {
+  .pf-v5-c-empty-state {
     margin-top: 0;
   }
   .piechart-overflow {