Update to PatternFly 5.1

Revert all our RTL overrides as this release now includes official RTL
support in PatternFly itself.

In PatternFly change 3707ffb2d8, there is a new way to focus the
datepicker depending on the value of the date. If there is a truthy
value the selected date css selector is used and otherwise the current
date. In our test code the date is an invalid date string and parsed
into an invalid `Date` object as this is a truthy value the wrong
selector is picked.

Mirror the metrics Icon using PF's new `shouldMirrorRTL` property.

package.json

@@ -4,12 +4,12 @@
   "type": "module",
   "private": true,
   "dependencies": {
-    "@patternfly/patternfly": "5.0.4",
-    "@patternfly/react-core": "5.0.1",
-    "@patternfly/react-icons": "5.0.1",
-    "@patternfly/react-styles": "5.0.1",
-    "@patternfly/react-table": "5.0.1",
-    "@patternfly/react-tokens": "5.0.1",
+    "@patternfly/patternfly": "5.1.0",
+    "@patternfly/react-core": "5.1.1",
+    "@patternfly/react-icons": "5.1.1",
+    "@patternfly/react-styles": "5.1.1",
+    "@patternfly/react-table": "5.1.1",
+    "@patternfly/react-tokens": "5.1.1",
     "deep-equal": "2.2.2",
     "date-fns": "2.30.0",
     "js-sha1": "0.6.0",

pkg/lib/cockpit-components-shutdown.jsx

@@ -212,7 +212,11 @@ export class ShutdownModal extends React.Component {
                                                 buttonAriaLabel={_("Toggle date picker")}
                                                 className='shutdown-date-picker'
                                                 dateFormat={timeformat.dateShort}
-                                                dateParse={timeformat.parseShortDate}
+                                                // https://github.com/patternfly/patternfly-react/issues/9721
+                                                dateParse={date => {
+                                                    const newDate = timeformat.parseShortDate(date);
+                                                    return Number.isNaN(newDate.valueOf()) ? false : newDate;
+                                                }}
                                                 invalidFormatText=""
                                                 isDisabled={!this.state.formFilled}
                                                 locale={timeformat.dateFormatLang()}

pkg/lib/patternfly/patternfly-5-overrides.scss

@@ -331,220 +331,6 @@ select.pf-v5-c-form-control {
   margin-inline: 0 var(--pf-v5-c-button__icon--m-start--MarginRight);
 }
 
-// RTL fix: Masthead actions should be on the far side
-.pf-v5-c-masthead__content {
-  margin-inline: auto var(--pf-v5-c-masthead__content--MarginLeft);
-}
-
-// RTL fix: Menu direction should take direction into consideration
-.pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
-.pf-v5-c-dropdown__menu.pf-m-align-right {
-  inset-inline: auto 0;
-}
-
-// RTL fix: Modal close button
-.pf-v5-c-modal {
-  &-box__header {
-    padding-inline: var(--pf-v5-c-modal-box__header--PaddingRight) var(--pf-v5-c-modal-box__header--PaddingLeft);
-  }
-
-  &-box__close {
-    text-align: end;
-    inset-inline: auto var(--pf-v5-c-modal-box__close--Right);
-
-    + * {
-      margin-inline: 0 var(--pf-v5-c-modal-box__close--sibling--MarginRight);
-    }
-  }
-}
-
-// RTL fix: Menu item alignment
-.pf-v5-c-menu__item-main {
-  text-align: start;
-}
-
-// RTL fix: inline button alignment
-.pf-v5-c-button.pf-m-link.pf-m-inline {
-  text-align: start;
-}
-
-// RTL fix: alert icons
-.pf-v5-c-alert__icon {
-  margin-inline: 0 var(--pf-v5-c-alert__icon--MarginRight);
-}
-
-// RTL fix: card
-.pf-v5-c-card__actions {
-  padding-inline: var(--pf-v5-c-card__actions--PaddingLeft) 0;
-}
-
-// RTL fix: table
-.pf-v5-c-table tr > * {
-  padding-inline: var(--pf-v5-c-table--cell--PaddingLeft) var(--pf-v5-c-table--cell--PaddingRight);
-}
-
-// RTL fix: description lists
-.pf-v5-c-description-list__term, .pf-v5-c-description-list__description {
-  text-align: start;
-}
-
-// RTL fix: about modal
-.pf-v5-c-about-modal-box__close {
-  padding-inline: 0 var(--pf-v5-c-about-modal-box__close--PaddingRight);
-}
-
-// RTL fix: card toggle
-.pf-v5-c-card__header-toggle {
-  margin-inline: var(--pf-v5-c-card__header-toggle--MarginLeft) var(--pf-v5-c-card__header-toggle--MarginRight);
-
-  [dir="rtl"] & {
-    transform: scaleX(-1);
-  }
-}
-
-// RTL fix: Select toggle
-.pf-v5-c-select__toggle {
-  padding-inline: var(--pf-v5-c-select__toggle--PaddingLeft) var(--pf-v5-c-select__toggle--PaddingRight);
-
-  * + &-arrow {
-    margin-inline: var(--pf-v5-c-select__toggle-arrow--MarginLeft) var(--pf-v5-c-select__toggle-arrow--MarginRight);
-  }
-
-  .pf-v5-c-select__toggle-clear {
-    padding-inline: var(--pf-v5-c-select__toggle-clear--PaddingLeft) var(--pf-v5-c-select__toggle-clear--PaddingRight);
-  }
-}
-
-// RTL fix: Menu item
-.pf-v5-c-select__menu-item {
-  padding-inline: var(--pf-v5-c-select__menu-item--PaddingLeft) var(--pf-v5-c-select__menu-item--PaddingRight);
-  text-align: start;
-
-  &-icon {
-    inset-inline: auto var(--pf-v5-c-select__menu-item-icon--Right);
-  }
-}
-
-// RTL fix: Input group padding and icons
-.pf-v5-c-text-input-group {
-  &__text-input {
-    padding-inline: var(--pf-v5-c-text-input-group__text-input--PaddingLeft) var(--pf-v5-c-text-input-group__text-input--PaddingRight);
-  }
-
-  &__icon {
-    inset-inline: var(--pf-v5-c-text-input-group__icon--Left) 0;
-  }
-}
-
-// RTL fix: List item actions
-.pf-v5-c-data-list__item-action {
-  margin-inline: var(--pf-v5-c-data-list__item-action--MarginLeft) 0;
-}
-
-// RTL fix: Align right utilities in flexes
-.pf-v5-l-flex > .pf-m-align-right {
-  margin-inline: auto 0;
-}
-
-// Override PF to fix Right to Left languages
-[dir="rtl"] {
-  // Flip outlines for buttons
-  .pf-m-split-button {
-    button::before {
-      transform: scaleX(-1);
-    }
-  }
-
-  // Flip submit button icons (they're often arrows or direction related)
-  .pf-v5-c-button > .pf-v5-svg {
-    transform: scaleX(-1);
-  }
-
-  // Flip expandable buttons
-  .pf-v5-c-expandable-section__toggle-icon {
-    transform: scaleX(-1);
-  }
-
-  // Swap image padding in buttons
-  .pf-v5-c-dropdown__toggle-image {
-    margin-inline-end: unset;
-    gap: var(--pf-v5-c-dropdown__toggle-image--MarginRight);
-  }
-
-  // PatternFly and us are setting text-align to the left.
-  // It needs to be to the start.
-  // We should change it to start where we can.
-  // Meanwhile, here's an override just for RTL.
-  body, td, th {
-    text-align: start;
-  }
-
-  // Swap side of selected nav's blue line
-  .pf-v5-c-nav__link.pf-m-current {
-    &, &:hover, &:not(.pf-m-expanded) .pf-v5-c-nav__link {
-      &::after {
-        inline-size: 100%;
-        transform: scaleX(-1);
-      }
-    }
-  }
-
-  // Toolbar content (as seen in the shell) should be left aligned in RTL
-  // See: https://github.com/patternfly/patternfly/issues/3812
-  .pf-v5-c-toolbar__content {
-    margin-inline: 0 auto;
-  }
-
-  // Dropdown toggles: Swap image margins to be on left instead
-  .pf-v5-c-dropdown__toggle {
-    &-image {
-      margin-inline: var(--pf-v5-c-dropdown__toggle-image--MarginRight) 0;
-    }
-
-    &-icon {
-      margin-inline: var(--pf-v5-c-dropdown__toggle-icon--MarginRight) var(--pf-v5-c-dropdown__toggle-icon--MarginLeft);
-    }
-  }
-
-  // Flip popup directions, part 1 of 2
-  .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right,
-  .pf-v5-c-dropdown__menu.pf-m-align-right {
-    inset-inline: 0 unset;
-  }
-
-  // Flip popup directions, part 2 of 2
-  .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left,
-  .pf-v5-c-dropdown__menu.pf-m-align-left {
-    inset-inline: unset 0;
-  }
-
-  // Another case of aligning to the left instead of start
-  .pf-v5-c-dropdown__menu-item {
-    text-align: start;
-  }
-
-  // Fix spacing around menu icons
-  .pf-v5-c-dropdown__menu-item-icon {
-    margin-inline: 0 var(--pf-v5-c-dropdown__menu-item-icon--MarginRight);
-  }
-
-  // Flip external icons
-  a[target] svg {
-    transform: scaleX(-1);
-  }
-
-  // Fix spacing in link icons
-  .pf-v5-c-button__icon.pf-m-end {
-    margin-inline: var(--pf-v5-c-button__icon--m-end--MarginLeft) 0;
-  }
-
-  // Flip breadcrum divider
-  .pf-v5-c-breadcrumb__item-divider {
-    transform: scaleX(-1);
-    margin-inline: 0 var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
-  }
-}
-
 // Drop side padding in mobile mode,
 // intended mainly for PF PageSection elements (pf-v5-c-page__main-section).
 // It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},

pkg/metrics/metrics.jsx

@@ -27,6 +27,7 @@ import { Gallery } from "@patternfly/react-core/dist/esm/layouts/Gallery/index.j
 import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
 import { Grid, GridItem } from "@patternfly/react-core/dist/esm/layouts/Grid/index.js";
+import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/index.js";
 import { Modal } from "@patternfly/react-core/dist/esm/components/Modal/index.js";
 import { Page, PageGroup, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page/index.js";
 import { Popover } from "@patternfly/react-core/dist/esm/components/Popover/index.js";
@@ -1322,7 +1323,7 @@ const HourDescription = ({ minute_events, isHourExpanded, onToggleHourExpanded,
     return (
         <span className={"metrics-events" + (isHourExpanded ? " metrics-events-hour-header-expanded" : "")}>
             {spikes > 0 &&
-                <Button variant="plain" className="metrics-events-expander" onClick={() => onToggleHourExpanded(!isHourExpanded)} icon={isHourExpanded ? <AngleDownIcon /> : <AngleRightIcon />} />}
+                <Button variant="plain" className="metrics-events-expander" onClick={() => onToggleHourExpanded(!isHourExpanded)} icon={isHourExpanded ? <AngleDownIcon /> : <Icon shouldMirrorRTL><AngleRightIcon /></Icon>} />}
             <time>{ timeformat.time(startTime) }</time>
             <Flex flexWrap={{ default: 'nowrap' }} spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsBaseline' }} className="spikes_count">
                 {spikes >= 10 && <ResourcesFullIcon color="var(--resource-icon-color-full)" />}

test/verify/check-storage-used

@@ -71,7 +71,7 @@ ExecStart=/usr/bin/sleep infinity
                         mock={".pf-v5-c-popover__body p:nth-of-type(2) li": "process (user: root, pid: 1234)"},
                         scroll_into_view="#dialog button:contains(Currently in use)")
         b.click(".pf-v5-c-popover button")
-        b.assert_pixels('#dialog', "format")
+        b.assert_pixels('#dialog', "format", wait_after_layout_change=True)
         self.dialog_cancel()
         self.dialog_wait_close()
 

test/verify/check-system-services

@@ -419,7 +419,7 @@ WantedBy=default.target
         # the header happens asynchronously with an animation.
         time.sleep(2)
         # Now scroll the header all the way to the left to get a conistent pixel test result
-        nav_scroll_btn = ".services-header button[aria-label='Scroll left']"
+        nav_scroll_btn = ".services-header button[aria-label='Scroll back']"
         while b.call_js_func("ph_attr", nav_scroll_btn, "disabled") is None:
             b.click(nav_scroll_btn)
             time.sleep(0.5)