CONSOLE-2361: remove and replace Bootstrap close styles and consolidate close button code

frontend/packages/console-app/src/components/cloud-shell/CloudShellDrawer.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { Tooltip, Flex, FlexItem, Button } from '@patternfly/react-core';
-import { CloseIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 import { InlineTechPreviewBadge } from '@console/shared';
+import CloseButton from '@console/shared/src/components/close-button';
 import Drawer from '@console/shared/src/components/drawer/Drawer';
 import MinimizeRestoreButton from './MinimizeRestoreButton';
 
@@ -55,15 +56,7 @@ const CloudShellDrawer: React.FC<CloudShellDrawerProps> = ({ children, onClose }
           onClick={onMRButtonClick}
         />
         <Tooltip content={t('console-app~Close terminal')}>
-          <Button
-            variant="plain"
-            data-test-id="cloudshell-terminal-close"
-            type="button"
-            onClick={onClose}
-            aria-label={t('console-app~Close terminal')}
-          >
-            <CloseIcon />
-          </Button>
+          <CloseButton ariaLabel={t('console-app~Close terminal')} onClick={onClose} />
         </Tooltip>
       </FlexItem>
     </Flex>

frontend/packages/console-app/src/components/cloud-shell/__tests__/CloudShellDrawer.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { Drawer } from '@console/shared';
+import CloseButton from '@console/shared/src/components/close-button';
 import CloudShellDrawer from '../CloudShellDrawer';
 
 jest.mock('react-i18next', () => {
@@ -38,8 +39,8 @@ describe('CloudShellDrawerComponent', () => {
     const closeButton = wrapper
       .find(Drawer)
       .shallow()
-      .find('[data-test-id="cloudshell-terminal-close"]');
-    expect(closeButton.props()['aria-label']).toEqual(`${i18nNS}~Close terminal`);
+      .find(CloseButton);
+    expect(closeButton.props().ariaLabel).toEqual(`${i18nNS}~Close terminal`);
     closeButton.simulate('click');
     expect(onClose).toHaveBeenCalled();
   });

frontend/packages/console-shared/src/components/close-button/CloseButton.scss

@@ -0,0 +1,14 @@
+.co-close-button {
+
+  &--float-right {
+    float: right;
+  }
+
+  &--no-padding {
+    padding: 0 !important;
+  }
+}
+
+.co-sidebar-dismiss__close-button {
+  font-size: 16px !important;
+}

frontend/packages/console-shared/src/components/close-button/CloseButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+import * as classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import './CloseButton.scss';
+
+type CloseButtonProps = {
+  additionalClassName?: string;
+  ariaLabel?: string;
+  dataTestID?: string;
+  onClick: (e: any) => void;
+};
+
+const CloseButton: React.FC<CloseButtonProps> = ({
+  additionalClassName,
+  ariaLabel,
+  dataTestID,
+  onClick,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      aria-label={ariaLabel || t('public~Close')}
+      className={classNames('co-close-button', additionalClassName)}
+      data-test-id={dataTestID}
+      onClick={onClick}
+      variant="plain"
+    >
+      <CloseIcon />
+    </Button>
+  );
+};
+
+export default CloseButton;

frontend/packages/console-shared/src/components/close-button/index.ts

@@ -0,0 +1 @@
+export { default } from './CloseButton';

frontend/packages/console-shared/src/components/form-utils/ActionGroupWithIcons.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ActionGroup, Button, ButtonVariant } from '@patternfly/react-core';
-import { CheckIcon, CloseIcon } from '@patternfly/react-icons';
+import { CheckIcon } from '@patternfly/react-icons';
+import CloseButton from '@console/shared/src/components/close-button';
 import { ActionGroupWithIconsProps } from './form-utils-types';
 
 const ActionGroupWithIcons: React.FC<ActionGroupWithIconsProps> = ({
@@ -22,15 +23,11 @@ const ActionGroupWithIcons: React.FC<ActionGroupWithIconsProps> = ({
           <CheckIcon />
         </Button>
       )}
-      <Button
-        type="button"
-        data-test-id="close-icon"
-        variant={ButtonVariant.plain}
+      <CloseButton
+        additionalClassName="co-close-button--no-padding"
+        dataTestID="close-icon"
         onClick={onClose}
-        style={{ padding: '0' }}
-      >
-        <CloseIcon />
-      </Button>
+      />
     </ActionGroup>
   );
 };

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/task-sidebar/TaskSidebarHeader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionsMenu, CloseButton } from '@console/internal/components/utils';
+import { ActionsMenu } from '@console/internal/components/utils';
+import CloseButton from '@console/shared/src/components/close-button';
 import { TaskKind } from '../../../../types';
 import PipelineResourceRef from '../../../shared/common/PipelineResourceRef';
 import TaskSidebarShortcuts from './TaskSidebarShortcuts';
@@ -23,7 +24,10 @@ const TaskSidebarHeader: React.FC<TaskSidebarHeaderProps> = ({
   return (
     <div className="opp-task-sidebar-header">
       <div className="co-sidebar-dismiss clearfix">
-        <CloseButton onClick={onClose} />
+        <CloseButton
+          onClick={onClose}
+          additionalClassName="co-close-button--float-right co-sidebar-dismiss__close-button"
+        />
       </div>
       <div className="opp-task-sidebar-header__title">
         <h1 className="co-m-pane__heading">

frontend/packages/topology/src/__tests__/TopologySideBar.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Button } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
-import { CloseButton } from '@console/internal/components/utils';
+import CloseButton from '@console/shared/src/components/close-button';
 import TopologySideBar from '../components/side-bar/TopologySideBar';
 
 jest.mock('react-i18next', () => {
@@ -28,7 +29,7 @@ describe('TopologySideBar:', () => {
     wrapper
       .find(CloseButton)
       .shallow()
-      .find('button')
+      .find(Button)
       .simulate('click');
     expect(onClose).toHaveBeenCalled();
   });

frontend/packages/topology/src/components/side-bar/TopologySideBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TopologySideBar as PFTopologySideBar } from '@patternfly/react-topology';
-import { CloseButton } from '@console/internal/components/utils';
+import CloseButton from '@console/shared/src/components/close-button';
 
 type TopologySideBarProps = {
   show: boolean;
@@ -10,7 +10,11 @@ type TopologySideBarProps = {
 const TopologySideBar: React.FC<TopologySideBarProps> = ({ children, show, onClose }) => (
   <PFTopologySideBar show={show}>
     <div className="co-sidebar-dismiss clearfix">
-      <CloseButton onClick={onClose} data-test-id="sidebar-close-button" />
+      <CloseButton
+        onClick={onClose}
+        dataTestID="sidebar-close-button"
+        additionalClassName="co-close-button--float-right co-sidebar-dismiss__close-button"
+      />
     </div>
     {children}
   </PFTopologySideBar>

frontend/public/components/_global-notification.scss

@@ -19,10 +19,6 @@ $global-notification-text: $color-pf-white;
     cursor: pointer;
     text-decoration: underline;
   }
-
-  .close {
-    margin-left: 10px;
-  }
 }
 
 .co-global-notification__text {

frontend/public/components/events.jsx

@@ -4,8 +4,7 @@ import * as classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Button, Chip, ChipGroup } from '@patternfly/react-core';
-import { CloseIcon } from '@patternfly/react-icons';
+import { Chip, ChipGroup } from '@patternfly/react-core';
 import { Trans, useTranslation, withTranslation } from 'react-i18next';
 
 import { namespaceProptype } from '../propTypes';
@@ -35,6 +34,7 @@ import {
   TogglePlay,
 } from './utils';
 import { EventStreamList } from './utils/event-stream';
+import CloseButton from '@console/shared/src/components/close-button';
 
 const maxMessages = 500;
 const flushInterval = 500;
@@ -238,9 +238,7 @@ export const EventsList = (props) => {
                   </Chip>
                 );
               })}
-              <Button variant="plain" aria-label={t('public~Close')} onClick={clearSelection}>
-                <CloseIcon />
-              </Button>
+              <CloseButton onClick={clearSelection} />
             </ChipGroup>
           )}
         </div>

frontend/public/components/factory/modal.tsx

@@ -7,11 +7,11 @@ import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import { ActionGroup, Button } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import CloseButton from '@console/shared/src/components/close-button';
 
 import store from '../../redux';
 import { ButtonBar } from '../utils/button-bar';
 import { history } from '../utils/router';
-import { CloseButton } from '../utils/close-button';
 import i18next from 'i18next';
 
 export const createModal: CreateModal = (getModalContainer) => {
@@ -80,6 +80,7 @@ export const ModalTitle: React.SFC<ModalTitleProps> = ({
             e.stopPropagation();
             close(e);
           }}
+          additionalClassName="co-close-button--float-right"
         />
       )}
     </h1>

frontend/public/components/monitoring/metrics.tsx

@@ -16,7 +16,6 @@ import {
   AngleRightIcon,
   ChartLineIcon,
   CompressIcon,
-  TimesIcon,
 } from '@patternfly/react-icons';
 import {
   ISortBy,
@@ -34,6 +33,7 @@ import { useTranslation } from 'react-i18next';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 import { connect, useDispatch, useSelector } from 'react-redux';
+import CloseButton from '@console/shared/src/components/close-button';
 
 import { withFallback } from '@console/shared/src/components/error/error-boundary';
 import { RedExclamationCircleIcon, YellowExclamationTriangleIcon } from '@console/shared';
@@ -491,15 +491,11 @@ const QueryInput_: React.FC<QueryInputProps> = ({
         spellCheck={false}
         value={text}
       />
-      <Button
-        className="query-browser__clear-icon"
-        aria-label={t('public~Clear query')}
+      <CloseButton
+        additionalClassName="query-browser__clear-icon"
+        ariaLabel={t('public~Clear query')}
         onClick={onClear}
-        type="button"
-        variant="plain"
-      >
-        <TimesIcon />
-      </Button>
+      />
       {!_.isEmpty(allSuggestions) && (
         <ul className="pf-c-dropdown__menu query-browser__metrics-dropdown-menu">
           {_.map(allSuggestions, (suggestions, title) => (

frontend/public/components/sidebars/resource-sidebar.tsx

@@ -1,8 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Button } from '@patternfly/react-core';
-import { CloseIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
+import CloseButton from '@console/shared/src/components/close-button';
 
 import { definitionFor } from '../../module/k8s';
 import { ResourceSidebarSnippets, ResourceSidebarSamples } from './resource-sidebar-samples';
@@ -14,7 +13,6 @@ const sidebarScrollTop = () => {
 };
 
 const ResourceSidebarWrapper = (props) => {
-  const { t } = useTranslation();
   const { label, children, toggleSidebar } = props;
 
   return (
@@ -23,15 +21,10 @@ const ResourceSidebarWrapper = (props) => {
       data-test="resource-sidebar"
     >
       <div className="co-m-pane__body co-p-has-sidebar__sidebar-body">
-        <Button
-          type="button"
-          className="co-p-has-sidebar__sidebar-close"
-          variant="plain"
-          aria-label={t('public~Close')}
+        <CloseButton
+          additionalClassName="co-close-button--float-right co-p-has-sidebar__close-button"
           onClick={toggleSidebar}
-        >
-          <CloseIcon />
-        </Button>
+        />
         <h2 className="co-p-has-sidebar__sidebar-heading text-capitalize">{label}</h2>
         {children}
       </div>

frontend/public/components/utils/index.tsx

@@ -36,7 +36,6 @@ export * from './build-hooks';
 export * from './webhooks';
 export * from './scroll-to-top-on-mount';
 export * from './service-catalog-status';
-export * from './close-button';
 export * from './container-table';
 export * from './simple-tab-nav';
 export * from './request-size-input';

frontend/public/locales/en/public.json

@@ -459,7 +459,6 @@
   "Warning": "Warning",
   "Events by name or message": "Events by name or message",
   "All": "All",
-  "Close": "Close",
   "No events": "No events",
   "No matching events": "No matching events",
   "{{allCount}}+ events exist, but none match the current filter": "{{allCount}}+ events exist, but none match the current filter",
@@ -674,6 +673,7 @@
   "e.g., {{version}}": "e.g., {{version}}",
   "Potential channels are {{stable}}, {{fast}}, or {{candidate}}.": "Potential channels are {{stable}}, {{fast}}, or {{candidate}}.",
   "Other available paths": "Other available paths",
+  "Close": "Close",
   "Select new version": "Select new version",
   "Selected columns will appear in the table.": "Selected columns will appear in the table.",
   "You can select up to {{MAX_VIEW_COLS}} columns": "You can select up to {{MAX_VIEW_COLS}} columns",

frontend/public/style/_common.scss

@@ -305,18 +305,6 @@ dl.co-inline {
 
 .co-sidebar-dismiss {
   padding: 0 5px;
-
-  .close {
-    font-size: 16px;
-    // adjustments to increase click target and default color contrast because it's on a grey background
-    opacity: 0.3;
-    padding: 10px 15px;
-
-    &:hover,
-    &:focus {
-      opacity: 0.6;
-    }
-  }
 }
 
 .co-toolbar {