Integration fixes for patternfly-react PRs 2818, 3296, 3922, 4022, 39…

…45, 3920, 4017, 3924
openshift · Apr 17, 2020 · 9fdff5e · 9fdff5e
1 parent c62449e
commit 9fdff5e
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 25 deletions.
diff --git a/frontend/packages/console-shared/src/components/editor/yaml-editor-utils.ts b/frontend/packages/console-shared/src/components/editor/yaml-editor-utils.ts
@@ -8,7 +8,7 @@ import { openAPItoJSONSchema } from '@console/internal/module/k8s/openapi-to-jso
 import { getStoredSwagger } from '@console/internal/module/k8s/swagger';
 import {
   global_BackgroundColor_100 as lineNumberActiveForeground,
-  global_BackgroundColor_300 as lineNumberForeground,
+  global_BackgroundColor_200 as lineNumberForeground,
   global_BackgroundColor_dark_100 as editorBackground,
 } from '@patternfly/react-tokens';
 

diff --git a/frontend/packages/dev-console/src/components/modals/EditApplicationModal.tsx b/frontend/packages/dev-console/src/components/modals/EditApplicationModal.tsx
@@ -46,7 +46,7 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
     <form onSubmit={handleSubmit} className="modal-content modal-content--no-inner-scroll">
       <ModalTitle>Edit Application Grouping</ModalTitle>
       <ModalBody>
-        <Title size="md" className="co-m-form-row">
+        <Title size="md" headingLevel="h2" className="co-m-form-row">
           Select an application group to add the component
           <strong>{` ${resource.metadata.name} `}</strong>
           to

diff --git a/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx b/frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx
@@ -68,7 +68,6 @@ const MonitoringOverview: React.FC<MonitoringOverviewProps> = (props) => {
     <div className="odc-monitoring-overview">
       <Accordion
         asDefinitionList={false}
-        noBoxShadow
         className="odc-monitoring-overview__metric-accordion"
         headingLevel="h5"
       >
@@ -115,7 +114,9 @@ const MonitoringOverview: React.FC<MonitoringOverviewProps> = (props) => {
                   className="odc-monitoring-overview__empty-state-icon"
                   icon={InfoCircleIcon}
                 />
-                <Title size="md">No Metrics Found</Title>
+                <Title headingLevel="h2" size="md">
+                  No Metrics Found
+                </Title>
                 <EmptyStateBody>
                   Deployment Configuration metrics are not yet supported.
                 </EmptyStateBody>

diff --git a/frontend/packages/dev-console/src/components/topology/components/MoveConnectionModal.tsx b/frontend/packages/dev-console/src/components/topology/components/MoveConnectionModal.tsx
@@ -79,7 +79,7 @@ const MoveConnectionForm: React.FC<FormikProps<FormikValues> & MoveConnectionMod
     <form onSubmit={handleSubmit} className="modal-content modal-content--no-inner-scroll">
       <ModalTitle>Move Connector</ModalTitle>
       <ModalBody>
-        <Title size="md" className="co-m-form-row">
+        <Title headingLevel="h2" size="md" className="co-m-form-row">
           Connect
           <strong>{` ${edge.getSource().getLabel()} `}</strong>
           to

diff --git a/frontend/packages/dev-console/src/components/topology/filters/FilterDropdown.tsx b/frontend/packages/dev-console/src/components/topology/filters/FilterDropdown.tsx
@@ -40,7 +40,7 @@ const FilterDropdown: React.FC<FilterDropdownProps> = ({ filters, onChange }) =>
       variant={SelectVariant.checkbox}
       onToggle={onToggle}
       selections={selected}
-      isExpanded={isOpen}
+      isOpen={isOpen}
       onSelect={onSelect}
       placeholderText="Display Options"
       isGrouped

diff --git a/...plugin/src/components/create-vm-wizard/tabs/virtual-hardware-tab/virtual-hardware-tab.tsx b/...plugin/src/components/create-vm-wizard/tabs/virtual-hardware-tab/virtual-hardware-tab.tsx
@@ -139,7 +139,9 @@ const VirtualHardwareTabFirehose: React.FC<VirtualHardwareTabFirehoseProps> = ({
       )}
       {!showStorages && (
         <div className="virtual-hardware-tab-empty-state">
-          <Title size="md">There are no CD-ROMs currently attached.</Title>
+          <Title headingLevel="h2" size="md">
+            There are no CD-ROMs currently attached.
+          </Title>
           {addButton}
         </div>
       )}

diff --git a/...tend/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.tsx b/...tend/packages/kubevirt-plugin/src/components/modals/boot-order-modal/boot-order-modal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { Modal, Button, ButtonVariant } from '@patternfly/react-core';
+import { Modal, Button, ButtonVariant, ModalVariant } from '@patternfly/react-core';
 import { createBasicLookup } from '@console/shared/src';
 import { withHandlePromise, HandlePromiseProps } from '@console/internal/components/utils';
 import { ModalComponentProps } from '@console/internal/components/factory';
@@ -143,10 +143,9 @@ const BootOrderModalComponent = ({
     <Modal
       title={title}
       isOpen={isOpen}
-      isSmall
+      variant={ModalVariant.small}
       onClose={() => setOpen(false)}
       footer={footer}
-      isFooterLeftAligned
     >
       <BootOrder devices={devices} setDevices={setDevices} />
     </Modal>

diff --git a/...ing-modals/affinity-modal/components/affinity-expression-list/affinity-expression-row.tsx b/...ing-modals/affinity-modal/components/affinity-expression-list/affinity-expression-row.tsx
@@ -60,14 +60,14 @@ export const AffinityExpressionRow = ({
         <Select
           isDisabled={!enableValueField}
           variant={SelectVariant.typeaheadMulti}
-          isExpanded={isValuesExpanded}
+          isOpen={isValuesExpanded}
           isCreatable
-          ariaLabelTypeAhead="Enter Value"
+          typeAheadAriaLabel="Enter Value"
           onToggle={() => setIsValuesExpanded(!isValuesExpanded)}
           onClear={() => onChange({ ...expression, values: [] })}
           onSelect={onSelect}
           selections={enableValueField ? values : []}
-          ariaLabelledBy="values select"
+          aria-labelledby="values select"
           placeholderText={enableValueField ? 'Enter Value' : ''}
         />
       </GridItem>

diff --git a/frontend/packages/kubevirt-plugin/src/components/modals/vm-status-modal/vm-status-modal.tsx b/frontend/packages/kubevirt-plugin/src/components/modals/vm-status-modal/vm-status-modal.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import { HandlePromiseProps, withHandlePromise } from '@console/internal/components/utils';
 import { ModalComponentProps } from '@console/internal/components/factory';
 import { ModalFooter } from '../modal/modal-footer';
@@ -36,10 +36,9 @@ const VMStatusModal = withHandlePromise<VMStatusModalProps>(
       <Modal
         title={title}
         isOpen={isOpen}
-        isSmall
+        variant={ModalVariant.small}
         onClose={() => setOpen(false)}
         footer={footer}
-        isFooterLeftAligned
       >
         <div>{PAUSED_VM_MODAL_MESSAGE}</div>
       </Modal>

diff --git a/frontend/packages/noobaa-storage-plugin/src/components/noobaa-operator/infoPage.tsx b/frontend/packages/noobaa-storage-plugin/src/components/noobaa-operator/infoPage.tsx
@@ -74,14 +74,18 @@ const InfoPage: React.FC<InfoPageProps> = ({ obj }) => {
       </div>
       <div className="nb-data-section__right">
         <div className="nb-data-section__right-entry">
-          <Title size="xl">Description</Title>
+          <Title headingLevel="h1" size="xl">
+            Description
+          </Title>
           <p className="nb-data-section__right-entry--faded">
             Multi Cloud Gateway is a data platform for object data federation across private and
             public clouds.
           </p>
         </div>
         <div className="nb-data-section__right-entry">
-          <Title size="xl">FAQ</Title>
+          <Title headingLevel="h1" size="xl">
+            FAQ
+          </Title>
           <ul className="nb-data-section__right-faq">
             <li>
               <ExternalLink href={FAQ_LINK_1} text={FAQ_TEXT_1} />

diff --git a/frontend/public/components/factory/table.tsx b/frontend/public/components/factory/table.tsx
@@ -646,7 +646,7 @@ export type TableInnerProps = {
   ) => any;
   selectedResourcesForKind?: string[];
   onSelect?: (
-    event: React.MouseEvent,
+    event: React.FormEvent<HTMLInputElement>,
     isSelected: boolean,
     rowIndex: number,
     rowData: IRowData,

diff --git a/frontend/public/components/monitoring/alert-manager-config.tsx b/frontend/public/components/monitoring/alert-manager-config.tsx
@@ -343,7 +343,9 @@ ReceiversTable.displayName = 'ReceiversTable';
 
 const ReceiversEmptyState: React.FC = () => (
   <EmptyState variant={EmptyStateVariant.full}>
-    <Title size="lg">No Receivers Found</Title>
+    <Title headingLevel="h1" size="lg">
+      No Receivers Found
+    </Title>
     <EmptyStateBody>
       Create a receiver to get OpenShift alerts through other services such as email or a chat
       platform. The first receiver you create will become the default receiver and will

diff --git a/frontend/public/components/monitoring/metrics.tsx b/frontend/public/components/monitoring/metrics.tsx
@@ -904,7 +904,7 @@ const QueryBrowserWrapper_: React.FC<QueryBrowserWrapperProps> = ({
     <div className="query-browser__wrapper graph-empty-state">
       <EmptyState variant={EmptyStateVariant.full}>
         <EmptyStateIcon size="sm" icon={ChartLineIcon} />
-        <Title size="md">No Query Entered</Title>
+        <Title headingLevel="h2" size="md">No Query Entered</Title>
         <EmptyStateBody>
           Enter a query in the box below to explore metrics for this cluster.
         </EmptyStateBody>

diff --git a/frontend/public/components/monitoring/query-browser.tsx b/frontend/public/components/monitoring/query-browser.tsx
@@ -81,7 +81,9 @@ const GraphEmptyState: React.FC<GraphEmptyStateProps> = ({ children, title }) =>
   <div className="query-browser__wrapper graph-empty-state">
     <EmptyState variant={EmptyStateVariant.full}>
       <EmptyStateIcon size="sm" icon={ChartLineIcon} />
-      <Title size="md">{title}</Title>
+      <Title headingLevel="h2" size="md">
+        {title}
+      </Title>
       <EmptyStateBody>{children}</EmptyStateBody>
     </EmptyState>
   </div>

diff --git a/frontend/public/components/nav/nav-header.tsx b/frontend/public/components/nav/nav-header.tsx
@@ -54,7 +54,7 @@ const NavHeader_: React.FC<NavHeaderProps & StateProps> = ({
         iconComponent={CaretDownIcon}
         data-test-id="perspective-switcher-toggle"
       >
-        <Title size="md">
+        <Title size="md" headingLevel="h2">
           <span className="oc-nav-header__icon">{icon}</span>
           {name}
         </Title>
@@ -74,7 +74,7 @@ const NavHeader_: React.FC<NavHeaderProps & StateProps> = ({
           isHovered={nextPerspective.properties.id === activePerspective}
           href="#"
         >
-          <Title size="md">
+          <Title size="md" headingLevel="h2">
             <span className="oc-nav-header__icon">{nextPerspective.properties.icon}</span>
             {nextPerspective.properties.name}
           </Title>

diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
@@ -264,7 +264,7 @@ const SearchPage_: React.FC<SearchProps & StateProps & DispatchProps> = (props)
         </div>
       </PageHeading>
       <div className="co-search">
-        <Accordion className="co-search__accordion" asDefinitionList={false} noBoxShadow>
+        <Accordion className="co-search__accordion" asDefinitionList={false}>
           {[...selectedItems].map((resource) => {
             const isCollapsed = collapsedKinds.has(resource);
             return (