From fa64f5743b31b324692f4038a15fd844b00d6d44 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Fri, 31 May 2024 10:10:39 -0500 Subject: [PATCH 1/9] add RHEL, Ansible, and OpenShift to services dropdown --- .../AllServicesDropdown.scss | 6 ++-- .../AllServicesDropdown/AllServicesMenu.tsx | 9 ------ .../AllServicesDropdown/AllServicesTabs.tsx | 29 +++++++++++++++++++ 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/AllServicesDropdown/AllServicesDropdown.scss b/src/components/AllServicesDropdown/AllServicesDropdown.scss index 3c1ee7fa2..1ac89a0a9 100644 --- a/src/components/AllServicesDropdown/AllServicesDropdown.scss +++ b/src/components/AllServicesDropdown/AllServicesDropdown.scss @@ -63,14 +63,14 @@ --pf-v5-c-sidebar__panel--md--FlexBasis: 20rem; --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); &__main { - height: 630px; + height: 740px; } &__content { - height: 630px; + height: 740px; overflow: auto; } &__panel { - height: 630px; + height: 740px; box-shadow: inset -4px 0 4px -4px rgba(0, 0, 0, 0.16); .pf-v5-c-tabs { --pf-v5-c-tabs__item--m-current__link--after--BorderColor: transparent; diff --git a/src/components/AllServicesDropdown/AllServicesMenu.tsx b/src/components/AllServicesDropdown/AllServicesMenu.tsx index a9b0e9edf..47b46f507 100644 --- a/src/components/AllServicesDropdown/AllServicesMenu.tsx +++ b/src/components/AllServicesDropdown/AllServicesMenu.tsx @@ -81,15 +81,6 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe - - - - - - - - - + + Platform + + + + + + + + + + { @@ -93,6 +114,14 @@ const AllServicesTabs = ({ } /> <> + + Solutions{' '} + + + + {/* The tabs children type is busted and does not accept array. Hence the fragment wrapper */} {linkSections.map((section, index) => ( Date: Tue, 4 Jun 2024 12:11:27 -0400 Subject: [PATCH 2/9] styling updates --- .../AllServicesDropdown/AllServicesTabs.scss | 3 ++ .../AllServicesDropdown/AllServicesTabs.tsx | 50 +++++++++++-------- 2 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 src/components/AllServicesDropdown/AllServicesTabs.scss diff --git a/src/components/AllServicesDropdown/AllServicesTabs.scss b/src/components/AllServicesDropdown/AllServicesTabs.scss new file mode 100644 index 000000000..fa846734a --- /dev/null +++ b/src/components/AllServicesDropdown/AllServicesTabs.scss @@ -0,0 +1,3 @@ +.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__list { + max-width: 100%; +} diff --git a/src/components/AllServicesDropdown/AllServicesTabs.tsx b/src/components/AllServicesDropdown/AllServicesTabs.tsx index fe22e4f5f..83d501e74 100644 --- a/src/components/AllServicesDropdown/AllServicesTabs.tsx +++ b/src/components/AllServicesDropdown/AllServicesTabs.tsx @@ -7,10 +7,13 @@ import StarIcon from '@patternfly/react-icons/dist/dynamic/icons/star-icon'; import { FAVORITE_TAB_ID, TAB_CONTENT_ID } from './common'; import type { AllServicesSection as AllServicesSectionType } from '../AllServices/allServicesLinks'; import { isBeta } from '../../utils/common'; +import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; import { Text, TextVariants } from '@patternfly/react-core/dist/esm/components/Text'; import ChromeLink from '../ChromeLink'; import { Button } from '@patternfly/react-core'; +import './AllServicesTabs.scss'; + export type AllServicesTabsProps = { activeTabKey: string | number; handleTabClick: TabsProps['onSelect']; @@ -77,51 +80,53 @@ const AllServicesTabs = ({ onToggle={onToggle} toggleText={activeTabTitle} role="region" - className="pf-v5-u-p-md pf-v5-u-pr-0" + className="pf-v5-u-p-md pf-v5-u-pr-0 pf-v5-u-pl-0-on-md" ouiaId={'all-services-tabs'} > - + Platform + - - - - { - handleTabClick?.(e, FAVORITE_TAB_ID); - }} - eventKey={FAVORITE_TAB_ID} - title={ - - Favorites - - - - - } - /> <> - + Solutions{' '} - + + { + handleTabClick?.(e, FAVORITE_TAB_ID); + }} + eventKey={FAVORITE_TAB_ID} + title={ + + Favorites + + + + + } + /> {/* The tabs children type is busted and does not accept array. Hence the fragment wrapper */} {linkSections.map((section, index) => ( onTabClick(section, index)} + className="pf-v5-u-pl-sm" /> ))} From 73d1e30e719c8af89cd07245382e3364c372d60c Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Tue, 4 Jun 2024 12:27:56 -0500 Subject: [PATCH 3/9] remove unused imports; increase height --- src/components/AllServicesDropdown/AllServicesDropdown.scss | 6 +++--- src/components/AllServicesDropdown/AllServicesMenu.tsx | 2 -- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/AllServicesDropdown/AllServicesDropdown.scss b/src/components/AllServicesDropdown/AllServicesDropdown.scss index 1ac89a0a9..84561dc0e 100644 --- a/src/components/AllServicesDropdown/AllServicesDropdown.scss +++ b/src/components/AllServicesDropdown/AllServicesDropdown.scss @@ -63,14 +63,14 @@ --pf-v5-c-sidebar__panel--md--FlexBasis: 20rem; --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); &__main { - height: 740px; + height: 770px; } &__content { - height: 740px; + height: 770px; overflow: auto; } &__panel { - height: 740px; + height: 770px; box-shadow: inset -4px 0 4px -4px rgba(0, 0, 0, 0.16); .pf-v5-c-tabs { --pf-v5-c-tabs__item--m-current__link--after--BorderColor: transparent; diff --git a/src/components/AllServicesDropdown/AllServicesMenu.tsx b/src/components/AllServicesDropdown/AllServicesMenu.tsx index 47b46f507..1f7d3026e 100644 --- a/src/components/AllServicesDropdown/AllServicesMenu.tsx +++ b/src/components/AllServicesDropdown/AllServicesMenu.tsx @@ -6,10 +6,8 @@ import { Stack, StackItem } from '@patternfly/react-core/dist/dynamic/layouts/St import { Panel, PanelMain } from '@patternfly/react-core/dist/dynamic/components/Panel'; import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core/dist/dynamic/components/Sidebar'; import { TabContent } from '@patternfly/react-core/dist/dynamic/components/Tabs'; -import { Text, TextContent, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text'; import { Title } from '@patternfly/react-core/dist/dynamic/components/Title'; -import ChromeLink from '../ChromeLink'; import TimesIcon from '@patternfly/react-icons/dist/dynamic/icons/times-icon'; import type { AllServicesSection } from '../AllServices/allServicesLinks'; import FavoriteServicesGallery from '../FavoriteServices/ServicesGallery'; From 831630710a7172d7ee344e04c09a25e73e13b058 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Wed, 5 Jun 2024 11:12:35 -0500 Subject: [PATCH 4/9] fix dom nesting warning; fix imports --- .../AllServicesDropdown/AllServicesTabs.tsx | 27 ++++--------------- .../PlatformServicesLinks.tsx | 19 +++++++++++++ 2 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 src/components/AllServicesDropdown/PlatformServicesLinks.tsx diff --git a/src/components/AllServicesDropdown/AllServicesTabs.tsx b/src/components/AllServicesDropdown/AllServicesTabs.tsx index 83d501e74..519911a89 100644 --- a/src/components/AllServicesDropdown/AllServicesTabs.tsx +++ b/src/components/AllServicesDropdown/AllServicesTabs.tsx @@ -8,11 +8,10 @@ import { FAVORITE_TAB_ID, TAB_CONTENT_ID } from './common'; import type { AllServicesSection as AllServicesSectionType } from '../AllServices/allServicesLinks'; import { isBeta } from '../../utils/common'; import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; -import { Text, TextVariants } from '@patternfly/react-core/dist/esm/components/Text'; +import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text'; import ChromeLink from '../ChromeLink'; -import { Button } from '@patternfly/react-core'; - import './AllServicesTabs.scss'; +import PlatformServiceslinks from './PlatformServicesLinks'; export type AllServicesTabsProps = { activeTabKey: string | number; @@ -87,28 +86,12 @@ const AllServicesTabs = ({ Platform - - - - - - - - - + <> Solutions{' '} - - + + View all diff --git a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx new file mode 100644 index 000000000..2ee8f084d --- /dev/null +++ b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import ChromeLink from '../ChromeLink'; + +const PlatformServiceslinks = () => { + return ( + <> + + Red Hat Ansible Platform + + + Red Hat Enterprise Linux + + + Red Hat OpenShift + + + ); +}; +export default PlatformServiceslinks; From c2f86fa6bee1a024ef584cd7b667895a9138cf42 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Thu, 6 Jun 2024 08:50:33 -0500 Subject: [PATCH 5/9] change import to use /dynamic --- src/components/AllServicesDropdown/AllServicesTabs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AllServicesDropdown/AllServicesTabs.tsx b/src/components/AllServicesDropdown/AllServicesTabs.tsx index 519911a89..103756e7d 100644 --- a/src/components/AllServicesDropdown/AllServicesTabs.tsx +++ b/src/components/AllServicesDropdown/AllServicesTabs.tsx @@ -7,7 +7,7 @@ import StarIcon from '@patternfly/react-icons/dist/dynamic/icons/star-icon'; import { FAVORITE_TAB_ID, TAB_CONTENT_ID } from './common'; import type { AllServicesSection as AllServicesSectionType } from '../AllServices/allServicesLinks'; import { isBeta } from '../../utils/common'; -import { Divider } from '@patternfly/react-core/dist/esm/components/Divider'; +import { Divider } from '@patternfly/react-core/dist/dynamic/components/Divider'; import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text'; import ChromeLink from '../ChromeLink'; import './AllServicesTabs.scss'; From b7f4c1c290fd7dc7150a5cc4b9d1b472e670caba Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Thu, 6 Jun 2024 10:08:56 -0500 Subject: [PATCH 6/9] fix cypress component test --- .../component/AllServicesDropdown/AllServicesDropdown.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx index f68fb6004..9e0ccfa9c 100644 --- a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx +++ b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx @@ -23,7 +23,7 @@ describe('', () => { it('should close all services dropdown in link matches current pathname', () => { function checkMenuClosed() { cy.get('.pf-v5-c-menu-toggle__text').click(); - cy.contains('All services').should('exist'); + cy.contains('View all').should('exist'); cy.contains('Favorites').click(); cy.contains('Test section').click(); cy.contains('Test link').click(); From d727ffde04e0c65b699133591446a524b1be5c40 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Thu, 6 Jun 2024 13:57:15 -0500 Subject: [PATCH 7/9] fix navigation cypress test --- cypress/e2e/release-gate/navigation.cy.ts | 2 +- src/components/AllServicesDropdown/AllServicesTabs.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/release-gate/navigation.cy.ts b/cypress/e2e/release-gate/navigation.cy.ts index 7abcabbd1..b67bd442d 100644 --- a/cypress/e2e/release-gate/navigation.cy.ts +++ b/cypress/e2e/release-gate/navigation.cy.ts @@ -17,7 +17,7 @@ describe('Navigation', () => { cy.contains('.pf-v5-c-tabs__link', 'Favorites'); // click on all services - cy.get('.chr-l-stack__item-browse-all-services a').click(); + cy.get('[data-ouia-component-id="View all link"]').first().click(); // get users link cy.get('p:contains("Users")').click(); diff --git a/src/components/AllServicesDropdown/AllServicesTabs.tsx b/src/components/AllServicesDropdown/AllServicesTabs.tsx index 103756e7d..66fbf1a0b 100644 --- a/src/components/AllServicesDropdown/AllServicesTabs.tsx +++ b/src/components/AllServicesDropdown/AllServicesTabs.tsx @@ -90,7 +90,7 @@ const AllServicesTabs = ({ <> Solutions{' '} - + View all From cec68a205f2700eb740f25c9aa7c0847df1532ef Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Fri, 7 Jun 2024 08:19:08 -0500 Subject: [PATCH 8/9] remove filters from platform urls --- .../component/AllServicesDropdown/AllServicesDropdown.cy.tsx | 1 - src/components/AllServicesDropdown/PlatformServicesLinks.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx index 9e0ccfa9c..dabc6f2c8 100644 --- a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx +++ b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx @@ -27,7 +27,6 @@ describe('', () => { cy.contains('Favorites').click(); cy.contains('Test section').click(); cy.contains('Test link').click(); - cy.contains('All services').should('not.exist'); } cy.intercept('http://localhost:8080/api/chrome-service/v1/static/stable/stage/services/services-generated.json', [ { diff --git a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx index 2ee8f084d..bfb019116 100644 --- a/src/components/AllServicesDropdown/PlatformServicesLinks.tsx +++ b/src/components/AllServicesDropdown/PlatformServicesLinks.tsx @@ -4,10 +4,10 @@ import ChromeLink from '../ChromeLink'; const PlatformServiceslinks = () => { return ( <> - + Red Hat Ansible Platform - + Red Hat Enterprise Linux From d58a5ad2e030bffae8868ed82371fd416b3345c8 Mon Sep 17 00:00:00 2001 From: Zein Sleiman Date: Mon, 10 Jun 2024 08:19:57 -0500 Subject: [PATCH 9/9] test for view all text --- cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx index dabc6f2c8..e33fec960 100644 --- a/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx +++ b/cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx @@ -27,6 +27,7 @@ describe('', () => { cy.contains('Favorites').click(); cy.contains('Test section').click(); cy.contains('Test link').click(); + cy.contains('View all').should('not.exist'); } cy.intercept('http://localhost:8080/api/chrome-service/v1/static/stable/stage/services/services-generated.json', [ {