update pf to release candidate 2020-13 and use title prop for react-i…

…cons
openshift · Oct 8, 2020 · 1a38e53 · 1a38e53
1 parent 9c5c0e0
commit 1a38e53
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 167 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -91,14 +91,14 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.9.0",
-    "@patternfly/patternfly": "4.44.3",
-    "@patternfly/react-catalog-view-extension": "4.8.46",
-    "@patternfly/react-charts": "6.10.2",
-    "@patternfly/react-core": "4.57.4",
-    "@patternfly/react-table": "4.17.11",
-    "@patternfly/react-tokens": "4.9.10",
-    "@patternfly/react-topology": "4.6.11",
-    "@patternfly/react-virtualized-extension": "4.5.91",
+    "@patternfly/patternfly": "4.50.4",
+    "@patternfly/react-catalog-view-extension": "4.8.60",
+    "@patternfly/react-charts": "6.10.4",
+    "@patternfly/react-core": "4.63.3",
+    "@patternfly/react-table": "4.18.14",
+    "@patternfly/react-tokens": "4.9.12",
+    "@patternfly/react-topology": "4.6.25",
+    "@patternfly/react-virtualized-extension": "4.5.105",
     "abort-controller": "3.0.0",
     "ajv": "^6.12.3",
     "apollo-cache-inmemory": "^1.6.5",

diff --git a/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx b/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx
@@ -19,7 +19,7 @@ const AlertSeverityIcon: React.FC<AlertSeverityIconProps> = ({
             fontSize,
             color: 'var(--pf-global--danger-color--100)',
           }}
-          aria-label="Monitoring Alert"
+          title="Monitoring Alert"
         />
       );
     case AlertSeverity.Warning:
@@ -29,7 +29,7 @@ const AlertSeverityIcon: React.FC<AlertSeverityIconProps> = ({
             fontSize,
             color: 'var(--pf-global--warning-color--100)',
           }}
-          aria-label="Monitoring Alert"
+          title="Monitoring Alert"
         />
       );
     default:

diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx b/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx
@@ -41,7 +41,6 @@ const EventItem: React.FC<EventItemProps> = React.memo(({ event, isExpanded, onT
             <div className="co-recent-item__title-message">
               {isWarning && (
                 <YellowExclamationTriangleIcon
-                  aria-label="Warning"
                   title="Warning"
                   className="co-dashboard-icon co-recent-item__icon--warning"
                 />

diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertItem.tsx
@@ -14,8 +14,8 @@ import {
   getAlertTime,
 } from './alert-utils';
 
-const CriticalIcon = () => <RedExclamationCircleIcon ariaLabel="Critical" title="Critical" />;
-const WarningIcon = () => <YellowExclamationTriangleIcon ariaLabel="Warning" title="Warning" />;
+const CriticalIcon = () => <RedExclamationCircleIcon title="Critical" />;
+const WarningIcon = () => <YellowExclamationTriangleIcon title="Warning" />;
 const getSeverityIcon = (severity: string) => {
   switch (severity) {
     case 'critical':

diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx
@@ -23,36 +23,36 @@ export const healthStateMapping: { [key in HealthState]: HealthStateMappingValue
   [HealthState.OK]: {
     priority: 0,
     health: HealthState.OK,
-    icon: <GreenCheckCircleIcon aria-label="Healthy" title="Healthy" />,
+    icon: <GreenCheckCircleIcon title="Healthy" />,
   },
   [HealthState.UNKNOWN]: {
     priority: 1,
     health: HealthState.UNKNOWN,
-    icon: <GrayUnknownIcon aria-label="Unknown" title="Unknown" />,
+    icon: <GrayUnknownIcon title="Unknown" />,
     message: 'Unknown',
   },
   [HealthState.PROGRESS]: {
     priority: 2,
     health: HealthState.PROGRESS,
-    icon: <InProgressIcon aria-label="In progress" title="In progress" />,
+    icon: <InProgressIcon title="In progress" />,
     message: 'Pending',
   },
   [HealthState.UPDATING]: {
     priority: 3,
     health: HealthState.UPDATING,
-    icon: <BlueSyncIcon aria-label="Updating" title="Updating" />,
+    icon: <BlueSyncIcon title="Updating" />,
     message: 'Updating',
   },
   [HealthState.WARNING]: {
     priority: 4,
     health: HealthState.WARNING,
-    icon: <YellowExclamationTriangleIcon aria-label="Warning" title="Warning" />,
+    icon: <YellowExclamationTriangleIcon title="Warning" />,
     message: 'Degraded',
   },
   [HealthState.ERROR]: {
     priority: 5,
     health: HealthState.ERROR,
-    icon: <RedExclamationCircleIcon aria-label="Error" title="Error" />,
+    icon: <RedExclamationCircleIcon title="Error" />,
     message: 'Degraded',
   },
   [HealthState.LOADING]: {
@@ -64,7 +64,7 @@ export const healthStateMapping: { [key in HealthState]: HealthStateMappingValue
   [HealthState.NOT_AVAILABLE]: {
     priority: 7,
     health: HealthState.NOT_AVAILABLE,
-    icon: <GrayUnknownIcon aria-label="Not available" title="Not available" />,
+    icon: <GrayUnknownIcon title="Not available" />,
     message: 'Not available',
   },
 };

diff --git a/frontend/packages/console-shared/src/components/status/icons.tsx b/frontend/packages/console-shared/src/components/status/icons.tsx
@@ -17,120 +17,62 @@ import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-toke
 import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
 import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
-export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({
-  className,
-  ariaLabel,
-  title,
-  size,
-}) => (
-  <CheckCircleIcon
-    size={size}
-    color={okColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <CheckCircleIcon size={size} color={okColor.value} className={className} title={title} />
 );
 
 export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
   className,
-  ariaLabel,
   title,
   size,
 }) => (
   <ExclamationCircleIcon
     size={size}
     color={dangerColor.value}
     className={className}
-    aria-label={ariaLabel}
     title={title}
   />
 );
 
 export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
   className,
-  ariaLabel,
   title,
   size,
 }) => (
   <ExclamationTriangleIcon
     size={size}
     color={warningColor.value}
     className={className}
-    aria-label={ariaLabel}
     title={title}
   />
 );
 
-export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, ariaLabel, title }) => (
-  <InfoCircleIcon
-    color={blueInfoColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <InfoCircleIcon color={blueInfoColor.value} className={className} title={title} />
 );
 
-export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, ariaLabel, title }) => (
-  <UnknownIcon
-    color={disabledColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <UnknownIcon color={disabledColor.value} className={className} title={title} />
 );
 
-export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, ariaLabel, title }) => (
-  <SyncAltIcon
-    color={blueInfoColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <SyncAltIcon color={blueInfoColor.value} className={className} title={title} />
 );
 
-export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({
-  className,
-  ariaLabel,
-  title,
-}) => (
-  <ResourcesFullIcon
-    color={dangerColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <ResourcesFullIcon color={dangerColor.value} className={className} title={title} />
 );
 
-export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({
-  className,
-  ariaLabel,
-  title,
-}) => (
-  <ResourcesAlmostFullIcon
-    color={warningColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <ResourcesAlmostFullIcon color={warningColor.value} className={className} title={title} />
 );
 
-export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({
-  className,
-  ariaLabel,
-  title,
-}) => (
-  <ArrowCircleUpIcon
-    color={blueDefaultColor.value}
-    className={className}
-    aria-label={ariaLabel}
-    title={title}
-  />
+export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} title={title} />
 );
 
 export type ColoredIconProps = {
   className?: string;
-  ariaLabel?: string;
-  title?: string;
+  title: string;
   size?: 'sm' | 'md' | 'lg' | 'xl';
 };
diff --git a/frontend/packages/dev-console/src/components/import/render-utils.tsx b/frontend/packages/dev-console/src/components/import/render-utils.tsx
@@ -17,12 +17,12 @@ export const routeDecoratorIcon = (
       // Not a valid url and thus not safe to use
       return null;
     case GitTypes.github:
-      return <GithubIcon style={{ fontSize: radius }} aria-label="Edit Source Code" />;
+      return <GithubIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     case GitTypes.bitbucket:
-      return <BitbucketIcon style={{ fontSize: radius }} aria-label="Edit Source Code" />;
+      return <BitbucketIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     case GitTypes.gitlab:
-      return <GitlabIcon style={{ fontSize: radius }} aria-label="Edit Source Code" />;
+      return <GitlabIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     default:
-      return <GitAltIcon style={{ fontSize: radius }} aria-label="Edit Source Code" />;
+      return <GitAltIcon style={{ fontSize: radius }} title="Edit Source Code" />;
   }
 };
diff --git a/frontend/packages/dev-console/src/components/topology/components/nodes/WorkloadNode.tsx b/frontend/packages/dev-console/src/components/topology/components/nodes/WorkloadNode.tsx
@@ -113,10 +113,7 @@ const ObservedWorkloadNode: React.FC<WorkloadNodeProps> = ({
                   circleRef={urlAnchorRef}
                 >
                   <g transform={`translate(-${decoratorRadius / 2}, -${decoratorRadius / 2})`}>
-                    <ExternalLinkAltIcon
-                      style={{ fontSize: decoratorRadius }}
-                      aria-label="Open URL"
-                    />
+                    <ExternalLinkAltIcon style={{ fontSize: decoratorRadius }} title="Open URL" />
                   </g>
                 </Decorator>
               </Tooltip>

diff --git a/frontend/packages/knative-plugin/src/topology/components/groups/KnativeServiceGroup.tsx b/frontend/packages/knative-plugin/src/topology/components/groups/KnativeServiceGroup.tsx
@@ -169,7 +169,7 @@ const KnativeServiceGroup: React.FC<KnativeServiceGroupProps> = ({
           <Tooltip key="route" content="Open URL" position={TooltipPosition.right}>
             <Decorator x={x + width} y={y} radius={DECORATOR_RADIUS} href={data.url} external>
               <g transform="translate(-6.5, -6.5)">
-                <ExternalLinkAltIcon style={{ fontSize: DECORATOR_RADIUS }} aria-label="Open URL" />
+                <ExternalLinkAltIcon style={{ fontSize: DECORATOR_RADIUS }} title="Open URL" />
               </g>
             </Decorator>
           </Tooltip>

diff --git a/frontend/packages/knative-plugin/src/topology/components/nodes/SinkUriNode.tsx b/frontend/packages/knative-plugin/src/topology/components/nodes/SinkUriNode.tsx
@@ -112,7 +112,7 @@ const SinkUriNode: React.FC<SinkUriNodeProps> = ({
               external
             >
               <g transform={`translate(-${DECORATOR_RADIUS / 2}, -${DECORATOR_RADIUS / 2})`}>
-                <ExternalLinkAltIcon style={{ fontSize: DECORATOR_RADIUS }} aria-label="Open URL" />
+                <ExternalLinkAltIcon style={{ fontSize: DECORATOR_RADIUS }} title="Open URL" />
               </g>
             </Decorator>
           </Tooltip>