particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LandingPage: add "go to beta" banner

Browse source
This commit is contained in:
Sanne Raymaekers 2023-04-06 14:41:17 +02:00
parent 341b37a567
commit c3c8a687a0
2 changed files with 120 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

175
src/Components/LandingPage/LandingPage.js
View file

@ -1,6 +1,13 @@
import React, { Component } from 'react';
import React, { useState } from 'react';
import { Button, Popover, Text, TextContent } from '@patternfly/react-core';
import {
Alert,
AlertActionCloseButton,
Button,
Popover,
Text,
TextContent,
} from '@patternfly/react-core';
import {
HelpIcon,
CodeBranchIcon,
@ -13,81 +20,107 @@ import {
} from '@redhat-cloud-services/frontend-components';
import { Outlet } from 'react-router-dom';
import isBeta from '../../Utilities/isBeta';
import ImagesTable from '../ImagesTable/ImagesTable';
import './LandingPage.scss';
import DocumentationButton from '../sharedComponents/DocumentationButton';
class LandingPage extends Component {
constructor(props) {
super(props);
}
export const LandingPage = () => {
const [showBetaAlert, setShowBetaAlert] = useState(true);
render() {
return (
<React.Fragment>
<PageHeader>
<PageHeaderTitle className="title" title="Image Builder" />
<Popover
headerContent={'About Image Builder'}
bodyContent={
<TextContent>
<Text>
Image Builder is a service that allows you to create RHEL
images and push them to cloud environments.
</Text>
<DocumentationButton />
</TextContent>
return (
<React.Fragment>
<PageHeader>
<PageHeaderTitle className="title" title="Image Builder" />
<Popover
headerContent={'About Image Builder'}
bodyContent={
<TextContent>
<Text>
Image Builder is a service that allows you to create RHEL images
and push them to cloud environments.
</Text>
<DocumentationButton />
</TextContent>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<Popover
headerContent={'About open source'}
bodyContent={
<TextContent>
<Text>
This service is open source, so all of its code is inspectable.
Explore repositories to view and contribute to the source code.
</Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://www.osbuild.org/guides/image-builder-service/architecture.html'
}
>
Repositories
</Button>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About Open Services"
className="pf-u-pl-sm header-button"
>
<CodeBranchIcon />
</Button>
</Popover>
</PageHeader>
<section className="pf-l-page__main-section pf-c-page__main-section">
{!isBeta() && showBetaAlert && (
<Alert
className="pf-u-mb-xl"
isInline
variant="default"
title="Try new features in our Beta environment."
actionClose={
<AlertActionCloseButton onClose={() => setShowBetaAlert(false)} />
}
actionLinks={
<Button
isInline
component="a"
variant="link"
href="/beta/insights/image-builder/landing"
>
Enter beta environment
</Button>
}
>
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
>
<HelpIcon />
</Button>
</Popover>
<Popover
headerContent={'About open source'}
bodyContent={
<TextContent>
<Text>
This service is open source, so all of its code is
inspectable. Explore repositories to view and contribute to
the source code.
</Text>
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={
'https://www.osbuild.org/guides/image-builder-service/architecture.html'
}
>
Repositories
</Button>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About Open Services"
className="pf-u-pl-sm header-button"
>
<CodeBranchIcon />
</Button>
</Popover>
</PageHeader>
<section className="pf-l-page__main-section pf-c-page__main-section">
<ImagesTable />
</section>
<Outlet />
</React.Fragment>
);
}
}
<p>
Launch Amazon Web Services or Microsoft Azure hosts to the cloud
from the console.
</p>
<p>
Link custom repositories and build any supported image with custom
content.
</p>
</Alert>
)}
<ImagesTable />
</section>
<Outlet />
</React.Fragment>
);
};
export default LandingPage;

16
src/test/Components/LandingPage/LandingPage.test.js
View file

@ -13,6 +13,22 @@ jest.mock('../../../store/actions/actions', () => {
};
});
beforeAll(() => {
global.insights = {
chrome: {
isBeta: () => {
return false;
},
isProd: () => {
return true;
},
getEnvironment: () => {
return 'prod';
},
},
};
});
describe('Landing Page', () => {
test('renders page heading', async () => {
renderWithReduxRouter(<LandingPage />);