Merge pull request #6771 from jcaianirh/fix-search-toolbar-wrap

Bug 1847074: PF fix for filter bar layout issues at some screen widths on search page
openshift · Oct 9, 2020 · f4fe96b · f4fe96b
2 parents 96c2242 + 7bc8e43
commit f4fe96b
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 168 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.34.1",
-    "@patternfly/react-catalog-view-extension": "4.8.3",
-    "@patternfly/react-charts": "6.9.2",
-    "@patternfly/react-core": "4.40.2",
-    "@patternfly/react-table": "4.15.3",
-    "@patternfly/react-tokens": "4.9.2",
-    "@patternfly/react-topology": "4.5.15",
-    "@patternfly/react-virtualized-extension": "4.5.49",
+    "@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)',
           }}
-          alt="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)',
           }}
-          alt="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
-                  alt="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 alt="Critical" title="Critical" />;
-const WarningIcon = () => <YellowExclamationTriangleIcon alt="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 alt="Healthy" title="Healthy" />,
+    icon: <GreenCheckCircleIcon title="Healthy" />,
   },
   [HealthState.UNKNOWN]: {
     priority: 1,
     health: HealthState.UNKNOWN,
-    icon: <GrayUnknownIcon alt="Unknown" title="Unknown" />,
+    icon: <GrayUnknownIcon title="Unknown" />,
     message: 'Unknown',
   },
   [HealthState.PROGRESS]: {
     priority: 2,
     health: HealthState.PROGRESS,
-    icon: <InProgressIcon alt="In progress" title="In progress" />,
+    icon: <InProgressIcon title="In progress" />,
     message: 'Pending',
   },
   [HealthState.UPDATING]: {
     priority: 3,
     health: HealthState.UPDATING,
-    icon: <BlueSyncIcon alt="Updating" title="Updating" />,
+    icon: <BlueSyncIcon title="Updating" />,
     message: 'Updating',
   },
   [HealthState.WARNING]: {
     priority: 4,
     health: HealthState.WARNING,
-    icon: <YellowExclamationTriangleIcon alt="Warning" title="Warning" />,
+    icon: <YellowExclamationTriangleIcon title="Warning" />,
     message: 'Degraded',
   },
   [HealthState.ERROR]: {
     priority: 5,
     health: HealthState.ERROR,
-    icon: <RedExclamationCircleIcon alt="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 alt="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,87 +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,
-  alt,
-  title,
-  size,
-}) => (
-  <CheckCircleIcon
-    size={size}
-    color={okColor.value}
-    className={className}
-    alt={alt}
-    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,
-  alt,
   title,
   size,
 }) => (
   <ExclamationCircleIcon
     size={size}
     color={dangerColor.value}
     className={className}
-    alt={alt}
     title={title}
   />
 );
 
 export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
   className,
-  alt,
   title,
   size,
 }) => (
   <ExclamationTriangleIcon
     size={size}
     color={warningColor.value}
     className={className}
-    alt={alt}
     title={title}
   />
 );
 
-export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, alt, title }) => (
-  <InfoCircleIcon color={blueInfoColor.value} className={className} alt={alt} 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, alt, title }) => (
-  <UnknownIcon color={disabledColor.value} className={className} alt={alt} 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, alt, title }) => (
-  <SyncAltIcon color={blueInfoColor.value} className={className} alt={alt} 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, alt, title }) => (
-  <ResourcesFullIcon color={dangerColor.value} className={className} alt={alt} 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,
-  alt,
-  title,
-}) => (
-  <ResourcesAlmostFullIcon
-    color={warningColor.value}
-    className={className}
-    alt={alt}
-    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, alt, title }) => (
-  <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} alt={alt} title={title} />
+export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
+  <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} title={title} />
 );
 
 export type ColoredIconProps = {
   className?: string;
-  alt?: string;
   title?: string;
   size?: 'sm' | 'md' | 'lg' | 'xl';
 };
diff --git a/frontend/packages/container-security/src/components/summary.tsx b/frontend/packages/container-security/src/components/summary.tsx
@@ -74,7 +74,7 @@ export const SecurityBreakdownPopup: React.FC<SecurityBreakdownPopupProps> = ({
                         <div>
                           <ExclamationTriangleIcon
                             color={priority.color.value}
-                            alt={priority.title}
+                            title={priority.title}
                           />
                           &nbsp;
                           {_.uniqBy(vulnsFor(priority.value), 'metadata.name').length}{' '}

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 }} alt="Edit Source Code" />;
+      return <GithubIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     case GitTypes.bitbucket:
-      return <BitbucketIcon style={{ fontSize: radius }} alt="Edit Source Code" />;
+      return <BitbucketIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     case GitTypes.gitlab:
-      return <GitlabIcon style={{ fontSize: radius }} alt="Edit Source Code" />;
+      return <GitlabIcon style={{ fontSize: radius }} title="Edit Source Code" />;
     default:
-      return <GitAltIcon style={{ fontSize: radius }} alt="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,7 +113,7 @@ const ObservedWorkloadNode: React.FC<WorkloadNodeProps> = ({
                   circleRef={urlAnchorRef}
                 >
                   <g transform={`translate(-${decoratorRadius / 2}, -${decoratorRadius / 2})`}>
-                    <ExternalLinkAltIcon style={{ fontSize: decoratorRadius }} alt="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 }} alt="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 }} alt="Open URL" />
+                <ExternalLinkAltIcon style={{ fontSize: DECORATOR_RADIUS }} title="Open URL" />
               </g>
             </Decorator>
           </Tooltip>

diff --git a/frontend/public/components/custom-resource-definition.tsx b/frontend/public/components/custom-resource-definition.tsx
@@ -115,11 +115,11 @@ const namespaced = (crd: CustomResourceDefinitionKind) => crd.spec.scope === 'Na
 const Established: React.FC<{ crd: CustomResourceDefinitionKind }> = ({ crd }) => {
   return crd.status && isEstablished(crd.status.conditions) ? (
     <span>
-      <GreenCheckCircleIcon alt="true" />
+      <GreenCheckCircleIcon title="true" />
     </span>
   ) : (
     <span>
-      <BanIcon alt="false" />
+      <BanIcon title="false" />
     </span>
   );
 };

diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
@@ -211,7 +211,11 @@ const SearchPage_: React.FC<SearchProps & StateProps & DispatchProps> = (props)
         <title>Search</title>
       </Helmet>
       <PageHeading detail={true} title="Search">
-        <Toolbar id="search-toolbar" clearAllFilters={clearAll}>
+        <Toolbar
+          id="search-toolbar"
+          clearAllFilters={clearAll}
+          collapseListedFiltersBreakpoint="xl"
+        >
           <ToolbarContent>
             <ToolbarItem>
               <ToolbarFilter