Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add RHEL, Ansible, and OpenShift to services dropdown #2855

Merged
merged 14 commits into from
Jun 11, 2024
Merged

add RHEL, Ansible, and OpenShift to services dropdown #2855

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
fa64f57
add RHEL, Ansible, and OpenShift to services dropdown
InsaneZein May 31, 2024
e6e081b
Merge branch 'master' into add-big3-dropdown
epwinchell Jun 3, 2024
321ba82
styling updates
epwinchell Jun 4, 2024
73d1e30
remove unused imports; increase height
InsaneZein Jun 4, 2024
e47d1cb
Merge branch 'master' into add-big3-dropdown
epwinchell Jun 4, 2024
8316307
fix dom nesting warning; fix imports
InsaneZein Jun 5, 2024
8e12906
Merge branch 'add-big3-dropdown' of github.com:RedHatInsights/insight…
InsaneZein Jun 5, 2024
8843069
Merge branch 'master' into add-big3-dropdown
InsaneZein Jun 5, 2024
c2f86fa
change import to use /dynamic
InsaneZein Jun 6, 2024
b7f4c1c
fix cypress component test
InsaneZein Jun 6, 2024
d727ffd
fix navigation cypress test
InsaneZein Jun 6, 2024
cec68a2
remove filters from platform urls
InsaneZein Jun 7, 2024
d58a5ad
test for view all text
InsaneZein Jun 10, 2024
c5b1fd5
Merge branch 'master' into add-big3-dropdown
Hyperkid123 Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/component/AllServicesDropdown/AllServicesDropdown.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ describe('<AllServicesDropdown />', () => {
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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is also a cy.contains('All services').should('not.exist'); bellow. This check has to be changed because now its always true. The test does not verify if the dropdown was closed or not.

cy.contains('View all').should('exist');
cy.contains('Favorites').click();
cy.contains('Test section').click();
cy.contains('Test link').click();
cy.contains('All services').should('not.exist');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You want to verify the dropdown is closed. YOu are now looking for a different string.

cy.contains('View all').should('not.exist');

cy.contains('View all').should('not.exist');
}
cy.intercept('http://localhost:8080/api/chrome-service/v1/static/stable/stage/services/services-generated.json', [
{
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/release-gate/navigation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
6 changes: 3 additions & 3 deletions src/components/AllServicesDropdown/AllServicesDropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: 770px;
}
&__content {
height: 630px;
height: 770px;
overflow: auto;
}
&__panel {
height: 630px;
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;
Expand Down
11 changes: 0 additions & 11 deletions src/components/AllServicesDropdown/AllServicesMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -81,15 +79,6 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
<Sidebar>
<SidebarPanel>
<Stack>
<StackItem className="chr-l-stack__item-browse-all-services pf-v5-u-w-100 pf-v5-u-p-md">
<TextContent className="pf-v5-u-text-align-center-on-md pf-v5-u-pl-sm pf-v5-u-pl-0-on-md">
<Text component={TextVariants.p}>
<ChromeLink href="/allservices">
<Button isBlock>All services</Button>
</ChromeLink>
</Text>
</TextContent>
</StackItem>
<StackItem className="pf-v5-u-w-100">
<AllServicesTabs
activeTabKey={activeTabKey}
Expand Down
3 changes: 3 additions & 0 deletions src/components/AllServicesDropdown/AllServicesTabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.pf-v5-c-tabs.pf-m-vertical .pf-v5-c-tabs__list {
max-width: 100%;
}
50 changes: 34 additions & 16 deletions src/components/AllServicesDropdown/AllServicesTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ 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/dynamic/components/Divider';
import { Text, TextVariants } from '@patternfly/react-core/dist/dynamic/components/Text';
import ChromeLink from '../ChromeLink';
import './AllServicesTabs.scss';
import PlatformServiceslinks from './PlatformServicesLinks';

export type AllServicesTabsProps = {
activeTabKey: string | number;
Expand Down Expand Up @@ -74,25 +79,37 @@ 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'}
>
<TabWrapper
ouiaId="AllServices-favorites-Tab"
onClick={(e) => {
handleTabClick?.(e, FAVORITE_TAB_ID);
}}
eventKey={FAVORITE_TAB_ID}
title={
<TabTitleText>
Favorites
<Icon className="chr-c-icon-service-tab pf-v5-u-ml-sm" status="warning" isInline>
<StarIcon />
</Icon>
</TabTitleText>
}
/>
<Text className="pf-v5-u-pl-lg pf-v5-u-pr-0 pf-v5-u-pt-0 pf-v5-u-pb-sm" component={TextVariants.p}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you extract the new links into a separate component? The JSX is starting to be kind of long.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extracted

Platform
</Text>
<Divider className="pf-v5-u-pb-md" />
<PlatformServiceslinks />
<>
<Text className="pf-v5-u-pl-lg pf-v5-u-pr-0 pf-v5-u-pt-lg pf-v5-u-pb-sm" component={TextVariants.p}>
Solutions{' '}
<ChromeLink href="/allservices" className="pf-v5-u-font-size-sm pf-v5-u-p-md" data-ouia-component-id="View all link">
View all
</ChromeLink>
</Text>
<Divider className="pf-v5-u-pb-sm" />
<TabWrapper
ouiaId="AllServices-favorites-Tab"
onClick={(e) => {
handleTabClick?.(e, FAVORITE_TAB_ID);
}}
eventKey={FAVORITE_TAB_ID}
title={
<TabTitleText className="pf-v5-u-pl-sm">
Favorites
<Icon className="chr-c-icon-service-tab pf-v5-u-ml-sm" status="warning" isInline>
<StarIcon />
</Icon>
</TabTitleText>
}
/>
{/* The tabs children type is busted and does not accept array. Hence the fragment wrapper */}
{linkSections.map((section, index) => (
<TabWrapper
Expand All @@ -103,6 +120,7 @@ const AllServicesTabs = ({
tabContentId={TAB_CONTENT_ID}
tabContentRef={tabContentRef}
onClick={() => onTabClick(section, index)}
className="pf-v5-u-pl-sm"
/>
))}
</>
Expand Down
19 changes: 19 additions & 0 deletions src/components/AllServicesDropdown/PlatformServicesLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import ChromeLink from '../ChromeLink';

const PlatformServiceslinks = () => {
return (
<>
<ChromeLink href="/ansible" className="pf-v5-u-pl-lg pf-v5-u-pb-sm">
Red Hat Ansible Platform
</ChromeLink>
<ChromeLink href="/insights" className="pf-v5-u-pl-lg pf-v5-u-pb-sm">
Red Hat Enterprise Linux
</ChromeLink>
<ChromeLink href="/openshift/overview" className="pf-v5-u-pl-lg pf-v5-u-pb-sm">
Red Hat OpenShift
</ChromeLink>
</>
);
};
export default PlatformServiceslinks;
Loading