Fix PF upgrade breaking changes.

RedHatInsights · Aug 1, 2023 · c4dbae7 · c4dbae7
1 parent 253f690
commit c4dbae7
Show file tree

Hide file tree

Showing 37 changed files with 137 additions and 97 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -30,6 +30,7 @@ module.exports = {
         '@typescript-eslint/no-use-before-define': ['error'],
         'react/prop-types': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-unused-vars': 'error',
       },
     },
     {

diff --git a/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js b/packages/advisor-components/src/ReportDetails/ReportDetails.spec.ct.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from '@cypress/react';
 
 import { ReportDetails } from '..';
 import report from '../../cypress/fixtures/report.json';
@@ -15,7 +14,7 @@ const props = {
 
 describe('report details: kba loaded', () => {
   beforeEach(() => {
-    mount(<ReportDetails {...props} />);
+    cy.mount(<ReportDetails {...props} />);
   });
 
   it('renders component and matches screenshot', () => {

diff --git a/packages/advisor-components/src/RuleDetails/RuleDetails.spec.ct.js b/packages/advisor-components/src/RuleDetails/RuleDetails.spec.ct.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { mount } from '@cypress/react';
 
 import rule from '../../cypress/fixtures/rule.json';
 import messages from '../../cypress/fixtures/messages.json';
@@ -25,7 +24,7 @@ describe('RuleDetails: details page', () => {
   const ROOT = '.ins-c-rule-details';
 
   beforeEach(() => {
-    mount(<RuleDetails {...fixtures} />);
+    cy.mount(<RuleDetails {...fixtures} />);
   });
 
   it('renders component', () => {

diff --git a/packages/advisor-components/src/RuleDetails/RuleDetails.tsx b/packages/advisor-components/src/RuleDetails/RuleDetails.tsx
@@ -2,15 +2,15 @@ import './RuleDetails.scss';
 
 import React from 'react';
 
-import { Flex, FlexItem, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Flex, FlexItem, Icon, Stack, StackItem, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import InsightsLabel from '@redhat-cloud-services/frontend-components/InsightsLabel';
 import { SeverityLine } from '@redhat-cloud-services/frontend-components-charts/SeverityLine';
 
 import RebootRequired from '../RebootRequired/RebootRequired';
 import RuleRating from '../RuleRating/RuleRating';
-import { AdvisorProduct, Rating, RuleContentOcp, RuleContentRhel, TopicRhel } from '../types';
+import { AdvisorProduct, Rating, RuleContentOcp, RuleContentRhel } from '../types';
 import { RuleDescription } from '../RuleDescription';
 
 export type Message = React.ReactNode;
@@ -79,7 +79,9 @@ const RuleDetails: React.FC<RuleDetailsProps> = ({
           <StackItem className="ins-c-rule-details__kbs">
             <a rel="noopener noreferrer" target="_blank" href={knowledgebaseUrl}>
               {messages.knowledgebaseArticle}&nbsp;
-              <ExternalLinkAltIcon size="sm" />
+              <Icon size="sm">
+                <ExternalLinkAltIcon />
+              </Icon>
             </a>
           </StackItem>
         )}

diff --git a/packages/advisor-components/src/RuleRating/RuleRating.tsx b/packages/advisor-components/src/RuleRating/RuleRating.tsx
@@ -3,7 +3,7 @@ import './RuleRating.scss';
 import React, { useCallback, useState } from 'react';
 import debounce from 'lodash/debounce';
 
-import { Button } from '@patternfly/react-core';
+import { Button, Icon } from '@patternfly/react-core';
 import { OutlinedThumbsDownIcon, OutlinedThumbsUpIcon, ThumbsDownIcon, ThumbsUpIcon } from '@patternfly/react-icons';
 
 import { Rating } from '../types';
@@ -46,10 +46,10 @@ const RuleRating: React.FC<RuleRatingProps> = ({ messages, ruleId, ruleRating, o
     <span className="ratingSpanOverride">
       {messages.ruleHelpful}
       <Button variant="plain" aria-label="thumbs-up" onClick={() => updateRuleRating(1)} ouiaId="thumbsUp">
-        {rating === 1 ? <ThumbsUpIcon className="ins-c-like" size="sm" /> : <OutlinedThumbsUpIcon size="sm" />}
+        <Icon size="sm">{rating === 1 ? <ThumbsUpIcon className="ins-c-like" /> : <OutlinedThumbsUpIcon />}</Icon>
       </Button>
       <Button variant="plain" aria-label="thumbs-down" onClick={() => updateRuleRating(-1)} ouiaId="thumbsDown">
-        {rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" size="sm" /> : <OutlinedThumbsDownIcon size="sm" />}
+        <Icon size="sm">{rating === -1 ? <ThumbsDownIcon className="ins-c-dislike" /> : <OutlinedThumbsDownIcon />}</Icon>
       </Button>
       {submitted && messages.feedbackThankYou}
     </span>

diff --git a/packages/components/src/Breadcrumbs/ConnectedBreadcrumbs.tsx b/packages/components/src/Breadcrumbs/ConnectedBreadcrumbs.tsx
@@ -1,6 +1,7 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 import { useEffect } from 'react';
+// FIXME: REMOVE this component
+// @ts-ignore
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import Breadcrumbs, { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumbs';
 

diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx
@@ -1,16 +1,15 @@
 import React, { Fragment, useRef, useState } from 'react';
 import classnames from 'classnames';
+import { Checkbox, getDefaultOUIAId } from '@patternfly/react-core';
 import {
-  Checkbox,
   Dropdown,
   DropdownItem,
   DropdownItemProps,
   DropdownToggle,
   DropdownToggleCheckbox,
   DropdownToggleCheckboxProps,
   DropdownToggleProps,
-  getDefaultOUIAId,
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import './bulk-select.scss';
 
 export type BulkSelectItem = {
@@ -95,7 +94,7 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
                   )}
                 </Fragment>,
               ]}
-              onToggle={onToggle}
+              onToggle={(_e, isOpen) => onToggle(isOpen)}
             />
           }
           isOpen={isOpen}

diff --git a/packages/components/src/ConditionalFilter/CheckboxFilter.tsx b/packages/components/src/ConditionalFilter/CheckboxFilter.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 import TextFilter, { FilterItem, FilterValue, isFilterValue } from './TextFilter';
@@ -78,7 +78,7 @@ const CheckboxFilter: React.FunctionComponent<CheckboxFilterProps> = ({
           className={className}
           variant={SelectVariant.checkbox}
           aria-label="Select Input"
-          onToggle={(isExpanded) => setExpanded(isExpanded)}
+          onToggle={(_e, isExpanded) => setExpanded(isExpanded)}
           isDisabled={isDisabled}
           onSelect={(event, value) => onSelect(event, value as string | FilterValue)}
           selections={calculateSelected()}

diff --git a/packages/components/src/ConditionalFilter/ConditionalFilter.tsx b/packages/components/src/ConditionalFilter/ConditionalFilter.tsx
@@ -1,7 +1,9 @@
 import React, { FormEvent, Fragment, ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import globalBreakpointMd from '@patternfly/react-tokens/dist/js/global_breakpoint_md';
-import { Dropdown, DropdownItem, DropdownToggle, Split, SplitItem, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
+import { Icon, Split, SplitItem, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+
 import { FilterIcon } from '@patternfly/react-icons';
 import TextFilter, { FilterValue } from './TextFilter';
 import { conditionalFilterType, typeMapper } from './conditionalFilterConstants';
@@ -154,12 +156,14 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                     toggle={
                       <DropdownToggle
                         aria-label="Conditional filter"
-                        onToggle={setIsOpen}
+                        onToggle={(_e, isOpen) => setIsOpen(isOpen)}
                         isDisabled={isDisabled}
                         className={hideLabel ? 'ins-c-conditional-filter__no-label' : ''}
                         ouiaId="ConditionalFilter"
                       >
-                        <FilterIcon size="sm" />
+                        <Icon size="sm">
+                          <FilterIcon />
+                        </Icon>
                         {!hideLabel && (
                           <span className="ins-c-conditional-filter__value-selector">{activeItem && capitalize(String(activeItem.label))}</span>
                         )}
@@ -171,7 +175,6 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
                         component="button"
                         ouiaId={String(item.label)}
                         onClick={(e) => onChangeCallback(e as FormEvent<HTMLInputElement>, item.value || key)}
-                        isHovered={(activeItem as ConditionalFilterItem).label === item.label}
                       >
                         {capitalize(String(item.label))}
                       </DropdownItem>

diff --git a/packages/components/src/ConditionalFilter/GroupFilter.tsx b/packages/components/src/ConditionalFilter/GroupFilter.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent, Fragment, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import React, { FormEvent, MouseEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
   Button,
@@ -38,7 +38,7 @@ export interface GroupFilterItem {
   /** isChecked flag. */
   isChecked?: boolean;
   /** Item label. */
-  label?: Node | string;
+  label?: ReactNode;
   /** Item name. */
   name?: string;
   /** Optional noFilter flag. */
@@ -237,14 +237,14 @@ const GroupFilter: React.FunctionComponent<GroupFilterProps> = ({
         <TreeView
           data={[mapTree(item as TreeViewItem, groupKey, stateSelected, selected || {})] as TreeViewDataItem[]}
           onCheck={(e, value) => onTreeCheck(e, value as TreeViewItem, [item as TreeViewItem])}
-          hasChecks
+          hasCheckboxes
         />
       ) : (type || item.type) === groupType.checkbox ? (
         <Checkbox
           {...item}
           label={item?.label}
           isChecked={item?.isChecked || isChecked(groupKey, item?.value || key, item?.id, item?.tagValue, stateSelected, selected || {}) || false}
-          onChange={(value, event) => {
+          onChange={(event, value) => {
             item?.onChange?.(value, event);
           }}
           onClick={
@@ -262,7 +262,7 @@ const GroupFilter: React.FunctionComponent<GroupFilterProps> = ({
         <Radio
           {...item}
           isChecked={item?.isChecked || isChecked(groupKey, item?.value || key, item?.id, item?.tagValue, stateSelected, selected || {}) || false}
-          onChange={(value, event) => {
+          onChange={(event, value) => {
             item?.onChange?.(value, event);
           }}
           value={item?.value || key}
@@ -319,7 +319,7 @@ const GroupFilter: React.FunctionComponent<GroupFilterProps> = ({
                   className={classNames({
                     'ins-c-input__clearable': searchDirty,
                   })}
-                  onChange={(value) => setFilter(value)}
+                  onChange={(_e, value) => setFilter(value)}
                   onClick={(e) => e.preventDefault()}
                   onKeyDown={(e) => {
                     if (e.key === ' ' || e.key === 'Escape') {

diff --git a/packages/components/src/ConditionalFilter/RadioFilter.tsx b/packages/components/src/ConditionalFilter/RadioFilter.tsx
@@ -1,5 +1,7 @@
 import React, { Fragment, useState } from 'react';
-import { Radio, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Radio } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+
 import TextFilter, { FilterItem, FilterValue, isFilterValue } from './TextFilter';
 
 export interface RadioFilterProps {
@@ -56,7 +58,7 @@ const RadioFilter: React.FunctionComponent<RadioFilterProps> = ({ items = [], on
           variant={SelectVariant.single}
           aria-label="Select Input"
           isDisabled={isDisabled}
-          onToggle={(value) => setExpanded(value)}
+          onToggle={(_e, value) => setExpanded(value)}
           onSelect={(event, value) => onSelect(event, value as string | FilterValue)}
           isOpen={isExpanded}
           placeholderText={placeholder}
@@ -74,7 +76,7 @@ const RadioFilter: React.FunctionComponent<RadioFilterProps> = ({ items = [], on
                   (checkedValue !== undefined && checkedValue === '' + key) ||
                   false
                 }
-                onChange={(_value, e) => onChange?.(e, { id, label, value, isChecked, ...item }, key)}
+                onChange={(e) => onChange?.(e, { id, label, value, isChecked, ...item }, key)}
                 id={id || `${value}-${key}`}
               />
             </SelectOption>

diff --git a/packages/components/src/ConditionalFilter/TextFilter.tsx b/packages/components/src/ConditionalFilter/TextFilter.tsx
@@ -1,5 +1,5 @@
-import React, { FormEvent, Fragment, MouseEventHandler, useState } from 'react';
-import { TextInput } from '@patternfly/react-core';
+import React, { FormEvent, Fragment, MouseEventHandler, ReactNode, useState } from 'react';
+import { Icon, TextInput } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import './conditional-filter.scss';
 
@@ -8,7 +8,7 @@ export function isFilterValue(item: string | FilterValue): item is FilterValue {
 }
 export interface FilterItem {
   /** Item label. */
-  label: Node | string;
+  label: ReactNode;
   /** Optional item name. */
   name?: string;
   /** Item value. */
@@ -25,7 +25,7 @@ export interface FilterItem {
 
 export interface FilterValue {
   /** Label. */
-  label: Node;
+  label: ReactNode;
   /** Value string. */
   value: string;
 }
@@ -79,7 +79,7 @@ const TextFilter: React.FunctionComponent<TextFilterProps> = ({
 }) => {
   const filterValue = value as string | FilterValue;
   const [stateValue, setStateValue] = useState('');
-  const Icon = icon || SearchIcon;
+  const InternalIcon = icon || SearchIcon;
   const changeCallback = (e: React.FormEvent<HTMLInputElement>, value: string) => (onChange ? onChange(e, value) : setStateValue(value));
 
   return (
@@ -91,7 +91,7 @@ const TextFilter: React.FunctionComponent<TextFilterProps> = ({
         id={id}
         isDisabled={isDisabled}
         value={(onChange ? (typeof value === 'string' ? filterValue : (filterValue as FilterValue).value) : stateValue) as string}
-        onChange={(_inputValue, e) => changeCallback(e, (e.target as HTMLInputElement).value)}
+        onChange={(e) => changeCallback(e, (e.target as HTMLInputElement).value)}
         onKeyDown={(e) =>
           e.key === 'Enter' && onSubmit?.(e, ((typeof value === 'string' ? filterValue : (filterValue as FilterValue).value) as string) || stateValue)
         }
@@ -100,7 +100,9 @@ const TextFilter: React.FunctionComponent<TextFilterProps> = ({
         widget-type="InsightsInput"
         ref={innerRef}
       />
-      <Icon size="sm" className="ins-c-search-icon" />
+      <Icon size="sm">
+        <InternalIcon className="ins-c-search-icon" />
+      </Icon>
     </Fragment>
   );
 };

diff --git a/packages/components/src/ConditionalFilter/groupFilterConstants.ts b/packages/components/src/ConditionalFilter/groupFilterConstants.ts
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 import { Group, GroupFilterItem, GroupItem, TreeViewItem } from './GroupFilter';
 import groupTypes, { GroupType } from './groupType';
 
@@ -44,7 +44,7 @@ export type FilterMenuItemOnChange = (
   selected: unknown,
   selectedItem: {
     value: string;
-    label: string | Node;
+    label: string | ReactNode;
     id: string;
     type: unknown;
     items: GroupFilterItem[];
@@ -84,7 +84,7 @@ export const getMenuItems = (
           unknown,
           {
             value: string;
-            label: string | Node;
+            label: string | ReactNode;
             id: string;
             type: unknown;
             items: GroupFilterItem[];

diff --git a/packages/components/src/Dark/Dark.tsx b/packages/components/src/Dark/Dark.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ThemeContext from './DarkContext';
 
-const DarkContext: React.FunctionComponent = ({ children, ...props }) => (
+const DarkContext: React.FunctionComponent<React.PropsWithChildren> = ({ children, ...props }) => (
   <ThemeContext.Provider {...props} value="dark">
     {children}
   </ThemeContext.Provider>

diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx
@@ -1,4 +1,6 @@
-import { Dropdown, DropdownItem, DropdownProps, DropdownToggle, Tooltip } from '@patternfly/react-core';
+import { Icon, Tooltip } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownProps, DropdownToggle, DropdownToggleProps } from '@patternfly/react-core/deprecated';
+
 import React, { useState } from 'react';
 
 import { ExportIcon } from '@patternfly/react-icons';
@@ -35,7 +37,7 @@ const DownloadButton: React.FunctionComponent<DownloadButtonProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle: DropdownToggleProps['onToggle'] = (_e, isOpen) => setIsOpen(isOpen);
 
   const internalOnSelect = () => setIsOpen((prev) => !prev);
 
@@ -52,7 +54,9 @@ const DownloadButton: React.FunctionComponent<DownloadButtonProps> = ({
           onSelect={internalOnSelect}
           toggle={
             <DropdownToggle aria-label="Export" toggleIndicator={null} onToggle={onToggle} isDisabled={isDisabled} ouiaId="Export">
-              <ExportIcon size="sm" />
+              <Icon size="sm">
+                <ExportIcon />
+              </Icon>
             </DropdownToggle>
           }
           isOpen={isOpen}

diff --git a/packages/components/src/ErrorBoundary/ErrorBoundary.tsx b/packages/components/src/ErrorBoundary/ErrorBoundary.tsx
@@ -19,7 +19,7 @@ interface ErrorPageState {
 }
 
 // As of time of writing, React only supports error boundaries in class components
-class ErrorBoundaryPage extends React.Component<ErrorPageProps, ErrorPageState> {
+class ErrorBoundaryPage extends React.Component<React.PropsWithChildren<ErrorPageProps>, ErrorPageState> {
   constructor(props: Readonly<ErrorPageProps>) {
     super(props);
     this.state = {

diff --git a/packages/components/src/ErrorState/ErrorState.tsx b/packages/components/src/ErrorState/ErrorState.tsx
@@ -21,7 +21,7 @@ export interface ErrorStateProps extends Omit<EmptyStateProps, 'children'> {
 
 const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'Something went wrong', errorDescription, ...props }) => {
   return (
-    <EmptyState variant={EmptyStateVariant.large} {...props} className="ins-c-error-state">
+    <EmptyState variant={EmptyStateVariant.lg} {...props} className="ins-c-error-state">
       <EmptyStateIcon icon={ExclamationCircleIcon} />
       <Title headingLevel="h4" size="lg">
         {errorTitle}