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

[Stable] Azure flow ms #2634

Merged
merged 3 commits into from
Sep 7, 2023
Merged

[Stable] Azure flow ms #2634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52cbca8
Add dynamic partner title to product selection screen.
Hyperkid123 Aug 14, 2023
b588262
Do not show product links for azure partner page.
Hyperkid123 Aug 14, 2023
1d6e2c6
Use newest stable node version
karelhala Sep 5, 2023
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
5 changes: 3 additions & 2 deletions .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
language: node_js
sudo: required
dist: jammy
notifications:
email: false
slack:
secure: 'd3g5oKl5kfzi2L96QTrj2g77lzLWzjnM6Ct2OTXRrk90GxxhwHS8RH4Q1IgBqkQjw68nkq7CNE9oAs+pt3si8kT4GQ164YLoTMVkDPBGOoOoMACPyanxQOEluUfdLEDIzChy/7EdlY3l1J2IM+lOK4e95jUwsT9BSXBsSladP++1EUiZfon9JcQSiSZa0e1/cVxLpEDuBB2cruUSTZ9sUATe/XZ0uH1EGzrooQJMkRgdty5UyNSsMxkvAY0Haivq8u9/gWAsLar0bA/90M5CVK7yohh9fY9UfTUbXVqwR3dFAXuW+SURrFVnPAX4FLZt/D09cg/CVCvoasiZdNi9RAeKOCfN+FoxB2ZJNnuM+4KDJX3dxnatd/stmEH1bcd75i4mh9zOWE1HX5d23HuZ4sKdDPpvhG3l7SpZfhLv0/EKL10ld9RdIaiTO2uPI3rsoyDeArzeV+09+dbB1iPKnS/3/Iw5KLhbew3mdJXKVfRk6KYcJySjT8EltrNy5Y7mty7/JzWssSpIpkMCnu6RGAtXO2v/jUfFm1WvsKK5BeH5efbLi1sjMNbVTeA3Bp8pvRPuw+50l94uDfeQ1HUTrq5zKXMUaG9dTdaYZX4fEDMmrbM1TLudjb9Xj4elaA5ioBH0gRFxAnSVTmrKFtFoCRVaqfmj3ceqxttCLUpkfvI='
node_js:
- '16'
- '18'
before_install:
- npm install -g npm@latest
install:
Expand Down Expand Up @@ -38,4 +39,4 @@ env:
cache:
directories:
- "$HOME/.npm"
- ".cache"
- ".cache"
138 changes: 73 additions & 65 deletions src/components/Stratosphere/ProductSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,74 +7,82 @@ import ProductCard from './ProductCard';
import { Header } from '../Header/Header';
import ChromeLink from '../ChromeLink/ChromeLink';
import Footer from './Footer';
import useMarketplacePartner from '../../hooks/useMarketplacePartner';

import './product-selection.scss';

const ProductSelection = () => (
<div id="chrome-app-render-root">
<Page
header={
<Masthead className="chr-c-masthead">
<Header />
</Masthead>
}
>
<div className="chr-c-product-selection pf-u-pt-lg pf-u-pb-lg">
<Stack hasGutter>
<StackItem>
<Bullseye>
<CheckCircleIcon size="xl" color="var(--pf-global--success-color--100)" />
</Bullseye>
</StackItem>
<StackItem>
<Stack>
<StackItem>
<Bullseye>
<Title size="3xl" headingLevel="h1">
Congratulations,
const ProductSelection = () => {
const { partner, partnerId } = useMarketplacePartner();
return (
<div id="chrome-app-render-root">
<Page
header={
<Masthead className="chr-c-masthead">
<Header />
</Masthead>
}
>
<div className="chr-c-product-selection pf-u-pt-lg pf-u-pb-lg">
<Stack hasGutter>
<StackItem>
<Bullseye>
<CheckCircleIcon size="xl" color="var(--pf-global--success-color--100)" />
</Bullseye>
</StackItem>
<StackItem>
<Stack>
<StackItem>
<Bullseye>
<Title size="3xl" headingLevel="h1">
Congratulations,
</Title>
</Bullseye>
</StackItem>
<StackItem>
<Title className="chr-c-product-selection__description" size="3xl" headingLevel="h1">
your Red Hat and {partner} accounts are connected and you can now access Red Hat support resources
</Title>
</Bullseye>
</StackItem>
<StackItem>
<Title className="chr-c-product-selection__description" size="3xl" headingLevel="h1">
your Red Hat and AWS accounts are connected and you can now access Red Hat support resources
</Title>
</StackItem>
</Stack>
</StackItem>
<StackItem>
<Bullseye>
<TextContent>
<Text>To get started using your Red Hat products, follow the links below</Text>
</TextContent>
</Bullseye>
</StackItem>
<StackItem>
<Flex>
<div className="chr-c-product-selection__layout">
{productsList.map((item, i) => (
<ProductCard key={i} {...item} order={i} />
))}
</div>
</Flex>
</StackItem>
<StackItem>
<Bullseye>
<TextContent>
<Text>
To manage or learn more about your Red Hat subscriptions, visit{' '}
<ChromeLink href="/insights/subscriptions/rhel" appId="subscriptions">
subscriptions.
</ChromeLink>
</Text>
</TextContent>
</Bullseye>
</StackItem>
</Stack>
</div>
<Footer />
</Page>
</div>
);
</StackItem>
</Stack>
</StackItem>
{partnerId !== 'from-azure' && (
<>
<StackItem>
<Bullseye>
<TextContent>
<Text>To get started using your Red Hat products, follow the links below</Text>
</TextContent>
</Bullseye>
</StackItem>
<StackItem>
<Flex>
<div className="chr-c-product-selection__layout">
{productsList.map((item, i) => (
<ProductCard key={i} {...item} order={i} />
))}
</div>
</Flex>
</StackItem>
</>
)}
<StackItem>
<Bullseye>
<TextContent>
<Text>
To manage or learn more about your Red Hat subscriptions, visit{' '}
<ChromeLink href="/insights/subscriptions/rhel" appId="subscriptions">
subscriptions.
</ChromeLink>
</Text>
</TextContent>
</Bullseye>
</StackItem>
</Stack>
</div>
<Footer />
</Page>
</div>
);
};

export default ProductSelection;
3 changes: 2 additions & 1 deletion src/components/Stratosphere/RedirectBanner.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import configureStore from 'redux-mock-store';
import { InitialEntry } from 'history';
import { Store } from 'redux';

import RedirectBanner, { AWS_BANNER_NAME, AZURE_BANNER_NAME } from './RedirectBanner';
import RedirectBanner from './RedirectBanner';
import { AWS_BANNER_NAME, AZURE_BANNER_NAME } from '../../hooks/useMarketplacePartner';

const LocationSpy: React.VoidFunctionComponent<{ changeSpy: jest.Mock }> = ({ changeSpy }) => {
const { search, pathname, hash, state } = useLocation();
Expand Down
29 changes: 6 additions & 23 deletions src/components/Stratosphere/RedirectBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,22 @@ import { Alert, AlertActionCloseButton, Text, TextContent } from '@patternfly/re
import { useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { ReduxState } from '../../redux/store';

// TODO: Figure out what param chrome should expect
export const AWS_BANNER_NAME = 'from-aws';
export const AZURE_BANNER_NAME = 'from-azure';
export const GCP_BANNER_NAME = 'from-gcp';

const partnerMapper: { [partner: string]: string } = {
[AWS_BANNER_NAME]: 'AWS',
[AZURE_BANNER_NAME]: 'Microsoft Azure',
[GCP_BANNER_NAME]: 'Google Cloud',
};
const possibleParams = [AWS_BANNER_NAME, AZURE_BANNER_NAME, GCP_BANNER_NAME];

const hasPartner = (params: URLSearchParams) => possibleParams.find((param) => params.has(param));
import useMarketplacePartner from '../../hooks/useMarketplacePartner';

const RedirectBanner = () => {
const { pathname, search, hash, state } = useLocation();
const { pathname, hash, state } = useLocation();
const { partnerId, partner, removePartnerParam } = useMarketplacePartner();
const navigate = useNavigate();
const params = new URLSearchParams(search);
const isVisible = hasPartner(params);
const partner = isVisible ? partnerMapper[isVisible] : null;
const product = useSelector<ReduxState, string | undefined>((state) => state.chrome.activeProduct);

const handleClose = () => {
// remove only the flag search param
params.delete(AWS_BANNER_NAME);
params.delete(AZURE_BANNER_NAME);
params.delete(GCP_BANNER_NAME);
const clearedParams = removePartnerParam();
// only change the search params
navigate(
{
pathname,
search: params.toString(),
search: clearedParams.toString(),
hash,
},
{
Expand All @@ -45,7 +28,7 @@ const RedirectBanner = () => {
);
};
// show the banner only if correct search param exists
return isVisible ? (
return partnerId ? (
<Alert
actionClose={<AlertActionCloseButton data-testid="stratosphere-banner-close" onClose={handleClose} />}
isInline
Expand Down
37 changes: 37 additions & 0 deletions src/hooks/useMarketplacePartner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { useLocation } from 'react-router-dom';

// TODO: Figure out what param chrome should expect
export const AWS_BANNER_NAME = 'from-aws';
export const AZURE_BANNER_NAME = 'from-azure';
export const GCP_BANNER_NAME = 'from-gcp';

const partnerMapper: { [partner: string]: string } = {
[AWS_BANNER_NAME]: 'AWS',
[AZURE_BANNER_NAME]: 'Microsoft Azure',
[GCP_BANNER_NAME]: 'Google Cloud',
};
const possibleParams = [AWS_BANNER_NAME, AZURE_BANNER_NAME, GCP_BANNER_NAME];

const hasPartner = (params: URLSearchParams) => possibleParams.find((param) => params.has(param));

const removePartnerParam = (params: URLSearchParams) => {
params.delete(AWS_BANNER_NAME);
params.delete(AZURE_BANNER_NAME);
params.delete(GCP_BANNER_NAME);
return params;
};

const useMarketplacePartner = () => {
const { search } = useLocation();

const params = new URLSearchParams(search);
const partnerId = hasPartner(params);
const partner = partnerId ? partnerMapper[partnerId] : null;
return {
partner,
partnerId,
removePartnerParam: () => removePartnerParam(params),
};
};

export default useMarketplacePartner;
Loading