Update Search behavior/styling (#2974)

* Update Search behavior/styling

* update snapshot

* update cypress snapshots

* update cypress snapshots

* update cypress snapshots #3

* update cypress snapshots #4

* update cypress snapshots #5

* Update default layout cypress snapshots.

---------

Co-authored-by: Martin Marosi <[email protected]>

.github/workflows/test.yml

@@ -98,6 +98,7 @@ jobs:
         with:
             component: true
             install-command: npm i
+            browser: chrome
   # build job
   build:
     needs: [install]

.gitignore

@@ -31,6 +31,7 @@ yalc.lock
 cypress/**/*.diff.png
 cypress/videos
 cypress/screenshots
+cypress/downloads
 
 # cache
 .cache

cypress.config.ts

@@ -10,17 +10,32 @@ export default defineConfig({
       addMatchImageSnapshotPlugin(on, config);
       on('before:browser:launch', (browser, launchOptions) => {
         if (browser.name === 'chrome' && browser.isHeadless) {
-          launchOptions.args.push('--window-size=1280,720');
+          launchOptions.args = launchOptions.args.map((arg) => {
+            if (arg === '--headless=new') {
+              return '--headless';
+            }
 
+            return arg;
+          });
+          // Needs the extra 139 because of the cypress toolbar, this is the size of the window! not size of the viewport
+          launchOptions.args.push(`--window-size=1280,${720 + 139}`);
           // force screen to be non-retina
           launchOptions.args.push('--force-device-scale-factor=1');
+          // force screen to be retina (2800x2400 size)
+          // launchOptions.args.push('--force-device-scale-factor=2')
         }
 
         if (browser.name === 'electron' && browser.isHeadless) {
-          // fullPage screenshot size is 1280x720
           launchOptions.preferences.width = 1280;
           launchOptions.preferences.height = 720;
         }
+
+        if (browser.name === 'firefox' && browser.isHeadless) {
+          launchOptions.args.push('--width=1280');
+          launchOptions.args.push('--height=720');
+        }
+
+        return launchOptions;
       });
       require('@cypress/code-coverage/task')(on, config);
       return config;

cypress/component/NotEntitledModal/NotEntitledModal.cy.tsx

@@ -23,6 +23,8 @@ describe('NonEntitledModal', () => {
       if (image) {
         cy.get(`[src="${image}"]`).should('be.visible');
       }
+      // make sure the scrollbar is hidden to ensure valid snapshot
+      cy.get('.pf-v5-c-modal-box__body').invoke('attr', 'style', 'overflow: hidden');
       elem.matchImageSnapshot();
     });
   });

cypress/run-test.js

@@ -9,7 +9,7 @@ const defaultOptions = {
   updateSnapshots: false,
 };
 
-const defaultCommand = 'npm run cypress run -- --component --browser electron';
+const defaultCommand = 'npm run cypress run -- --component --browser chrome';
 
 if (argv.u || argv.update) {
   defaultOptions.updateSnapshots = true;

cypress/support/component.ts

@@ -54,6 +54,5 @@ declare global {
 }
 
 Cypress.Commands.add('mount', mount)
-
 // Example use:
 // cy.mount(<MyComponent />)

src/components/Header/Header.tsx

@@ -112,13 +112,13 @@ const MemoizedHeader = memo(
                   </ToolbarItem>
                 )}
               </ToolbarGroup>
-              <ToolbarGroup className="pf-v5-u-flex-grow-1 pf-v5-u-mr-0 pf-v5-u-mr-md-on-2xl" variant="filter-group">
+              <ToolbarGroup className="pf-v5-u-flex-grow-1 pf-v5-u-mr-0 pf-v5-u-mr-0-on-2xl" variant="filter-group">
                 <Suspense fallback={null}>
                   <SearchInput onStateChange={hideAllServices} />
                 </Suspense>
               </ToolbarGroup>
               <ToolbarGroup
-                className="pf-v5-m-icon-button-group pf-v5-u-ml-auto"
+                className="pf-v5-m-icon-button-group pf-v5-u-ml-auto pf-v5-u-mr-0"
                 visibility={{ default: 'hidden', '2xl': 'visible' }}
                 widget-type="InsightsToolbar"
               >

src/components/Header/HeaderTests/__snapshots__/Tools.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Tools should render correctly 1`] = `
 <div
-  class="pf-v5-c-toolbar__item pf-v5-u-mr-0 pf-v5-u-ml-sm"
+  class="pf-v5-c-toolbar__item pf-v5-u-mx-0"
 >
   <div
     style="display: contents;"

src/components/Header/Tools.tsx

@@ -240,7 +240,7 @@ const Tools = () => {
   return (
     <>
       {isNotificationsEnabled && (
-        <ToolbarItem className="pf-v5-u-mr-0 pf-v5-u-ml-sm">
+        <ToolbarItem className="pf-v5-u-mx-0">
           <Tooltip aria="none" aria-live="polite" content={'Notifications'} flipBehavior={['bottom']} className="tooltip-inner-settings-cy">
             <NotificationBadge
               className="chr-c-notification-badge"

src/components/Search/SearchInput.tsx

@@ -186,13 +186,13 @@ const SearchInput = ({ onStateChange }: SearchInputListener) => {
         setIsOpen(false);
         onStateChange(false);
       }}
-      {...(!md && {
+      {...{
         expandableInput: {
           isExpanded: willExpand(),
           onToggleExpand,
           toggleAriaLabel: 'Expandable search input toggle',
         },
-      })}
+      }}
       onClick={onInputClick}
       ref={toggleRef}
       onKeyDown={onToggleKeyDown}