Skip to content
This repository has been archived by the owner on Jan 10, 2024. It is now read-only.

chore: update overview page #631

Merged
merged 2 commits into from
May 3, 2023
Merged

chore: update overview page #631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
779274f
Update overview page
hemahg May 3, 2023
bb7552e
Update test
hemahg May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 0 additions & 6 deletions src/AppServices/OverviewPageV4.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,6 @@ import { OverviewPageV4 as OverviewPageV4Comp } from "./OverviewPageV4";

export default {
component: OverviewPageV4Comp,
args: {
toKafkaHref: "/to-kafka",
toServiceRegistryHref: "/to-service",
toConnectorsHref: "/to-connectors",
toAPIDesignHref: "/to-apidesigner",
},
} as ComponentMeta<typeof OverviewPageV4Comp>;

const Template: ComponentStory<typeof OverviewPageV4Comp> = (args) => (
Expand Down
29 changes: 0 additions & 29 deletions src/AppServices/OverviewPageV4.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,38 +9,9 @@ describe("OverviewPage", () => {
const comp = render(<OverviewPageV4 />);
await waitForI18n(comp);
expect(comp.baseElement).toMatchSnapshot();
expect(
comp.getByText("Try OpenShift Streams for Apache Kafka")
).toHaveAttribute("href", OverviewPageV4.args!.toKafkaHref);
const [createKafka, createServiceRegistry] =
comp.getAllByText("Create an instance");
expect(createKafka).toHaveAttribute(
"href",
OverviewPageV4.args!.toKafkaHref
);
expect(createServiceRegistry).toHaveAttribute(
"href",
OverviewPageV4.args!.toServiceRegistryHref
);
const createConnectors = comp.getByTestId("cardRHOC-buttonCTA");
expect(createConnectors).toHaveAttribute(
"href",
OverviewPageV4.args!.toConnectorsHref
);

const createDesign = comp.getByTestId("hero-buttonCreateDesign");
expect(createDesign).toHaveAttribute(
"href",
OverviewPageV4.args!.toAPIDesignHref
);

expect(comp.getByTestId("cardRHODS-buttonTryIt")).toHaveAttribute(
"data-ouia-component-id",
"button-rhods-tryit"
);

expect(
comp.getByText("Try OpenShift Streams for Apache Kafka")
).toHaveAttribute("data-ouia-component-id", "button-try-kafka");
});
});
261 changes: 2 additions & 259 deletions src/AppServices/OverviewPageV4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,108 +15,27 @@ import {
import { ExternalLinkAltIcon } from "@patternfly/react-icons";
import type { FunctionComponent } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import {
AppServicesOverviewIconPattern,
LogoRedHatOpenShiftApiManagementAStandardRgb,
LogoRedHatOpenShiftConnectorsBStandardRgb,
LogoRedHatOpenShiftDatabaseAccessAStandardRgb,
LogoRedHatOpenShiftDataScienceAStandardRgb,
LogoRedHatOpenShiftServiceRegistryAStandardRgb,
LogoRedHatOpenShiftStreamsForApacheKafkaAStandardRgbPng,
LogoRedHatOpenShiftAPIDesignerSvg,
} from "../images";
import {
MarketingPageBanner,
MarketingPageHero,
MarketingPageSection,
} from "./components";

export type OverviewPageV4Props = {
toKafkaHref: string;
toServiceRegistryHref: string;
toConnectorsHref: string;
toAPIDesignHref: string;
};
import { MarketingPageHero, MarketingPageSection } from "./components";

export const OverviewPageV4: FunctionComponent<OverviewPageV4Props> = ({
toKafkaHref,
toServiceRegistryHref,
toConnectorsHref,
toAPIDesignHref,
}) => {
export const OverviewPageV4: FunctionComponent = () => {
const { t } = useTranslation();
return (
<>
<MarketingPageHero
title={t("overview-v4:heroTitle")}
tagLine={t("overview-v4:heroTagline")}
description={t("overview-v4:heroDescription")}
description2={t("overview-v4:heroDescription2")}
heroImage={AppServicesOverviewIconPattern}
heroImageSize={678}
cta={
<Button
variant={ButtonVariant.primary}
ouiaId="button-try-kafka"
isLarge
component={(props) => (
<Link
{...props}
data-testid="hero-buttonTryKafka"
to={toKafkaHref}
/>
)}
>
{t("overview-v4:heroCallToActionButton")}
</Button>
}
variant="dark"
/>
<MarketingPageBanner>{t("overview-v4:banner")}</MarketingPageBanner>
<MarketingPageSection>
<Grid md={6} lg={3} hasGutter>
{/* Api Designer card */}
<Card>
<CardHeader>
<CardHeaderMain>
<img
src={LogoRedHatOpenShiftAPIDesignerSvg}
alt="Red Hat OpenShift API Designer"
style={{ height: "50px" }}
/>
</CardHeaderMain>
</CardHeader>
<CardTitle>
<Title headingLevel="h2" size="xl">
{t("overview-v4:rhoapidesignerTitle")}
</Title>
</CardTitle>
<CardBody>
<Stack hasGutter>
<StackItem>{t("overview-v4:rhoapidesignerMainText")}</StackItem>
<StackItem className="pf-u-color-200">
{t("overview-v4:rhoapidesignerSecondaryText")}
</StackItem>
</Stack>
</CardBody>
<CardFooter>
<Button
data-testid="cardRHOAPIDesigner-buttonCTA"
variant={ButtonVariant.secondary}
component={(props) => (
<Link
{...props}
data-testid="hero-buttonCreateDesign"
to={toAPIDesignHref}
/>
)}
>
{t("overview-v4:rhoapidesignerCalltoActionButton")}
</Button>
</CardFooter>
</Card>

{/* API Management card */}
<Card>
<CardHeader>
Expand Down Expand Up @@ -167,182 +86,6 @@ export const OverviewPageV4: FunctionComponent<OverviewPageV4Props> = ({
</CardFooter>
</Card>

{/* Kafka card */}
<Card ouiaId="card-rhosak">
<CardHeader>
<CardHeaderMain>
<img
src={LogoRedHatOpenShiftStreamsForApacheKafkaAStandardRgbPng}
alt="Red Hat OpenShift Streams for Apache Kafka logo"
style={{ height: "50px" }}
/>
</CardHeaderMain>
</CardHeader>
<CardTitle>
<Title headingLevel="h2" size="xl">
{t("overview-v4:rhosakTitle")}
</Title>
</CardTitle>
<CardBody>
<Stack hasGutter>
<StackItem>{t("overview-v4:rhosakMainText")}</StackItem>
<StackItem className="pf-u-color-200">
{t("overview-v4:rhosakSecondaryText")}
</StackItem>
</Stack>
</CardBody>
<CardFooter>
<Button
data-testid="cardRHOSAK-buttonCreateKafka"
variant={ButtonVariant.secondary}
component={(props) => <Link {...props} to={toKafkaHref} />}
ouiaId="button-create"
>
{t("overview-v4:rhosakCallToActionButton")}
</Button>
</CardFooter>
</Card>

{/* Service Registry card */}
<Card>
<CardHeader>
<CardHeaderMain>
<img
src={LogoRedHatOpenShiftServiceRegistryAStandardRgb}
alt="Red Hat OpenShift Service Registry logo"
style={{ height: "50px" }}
/>
</CardHeaderMain>
</CardHeader>
<CardTitle>
<Title headingLevel="h2" size="xl">
{t("overview-v4:rhosrTitle")}
</Title>
</CardTitle>
<CardBody>
<Stack hasGutter>
<StackItem>{t("overview-v4:rhosrMainText")}</StackItem>
<StackItem className="pf-u-color-200">
{t("overview-v4:rhosrSecondaryText")}
</StackItem>
</Stack>
</CardBody>
<CardFooter>
<Button
data-testid="cardRHOSR-buttonCTA"
variant={ButtonVariant.secondary}
component={(props) => (
<Link
{...props}
data-testid="hero-buttonTryKafka"
to={toServiceRegistryHref}
/>
)}
>
{t("overview-v4:rhosrCallToActionButton")}
</Button>
</CardFooter>
</Card>

{/* Connectors card */}
<Card>
<CardHeader>
<CardHeaderMain>
<img
src={LogoRedHatOpenShiftConnectorsBStandardRgb}
alt="Red Hat OpenShift Connectors logo"
style={{ height: "50px" }}
/>
</CardHeaderMain>
</CardHeader>
<CardTitle>
<Title headingLevel="h2" size="xl">
{t("overview-v4:rhocTitle")}
</Title>
</CardTitle>
<CardBody>
<Stack hasGutter>
<StackItem>{t("overview-v4:rhocMainText")}</StackItem>
<StackItem className="pf-u-color-200">
{t("overview-v4:rhocSecondaryText")}{" "}
<Button
data-testid="cardRHOC-linkOpenShift"
isInline
variant={ButtonVariant.link}
component="a"
target="_blank"
href="https://openshift.com"
>
OpenShift
<ExternalLinkAltIcon className="pf-u-ml-xs" />
</Button>
{t("overview-v4:rhocSecondaryTextContinued")}
</StackItem>
</Stack>
</CardBody>
<CardFooter>
<Button
data-testid="cardRHOC-buttonCTA"
variant={ButtonVariant.secondary}
target="_blank"
component={(props) => <Link {...props} to={toConnectorsHref} />}
>
{t("overview-v4:getStarted")}
</Button>
</CardFooter>
</Card>

{/* Database access card */}
<Card>
<CardHeader>
<CardHeaderMain>
<img
src={LogoRedHatOpenShiftDatabaseAccessAStandardRgb}
alt="Red Hat OpenShift Data Science logo"
style={{ height: "50px" }}
/>
</CardHeaderMain>
</CardHeader>
<CardTitle>
<Title headingLevel="h2" size="xl">
{t("overview-v4:dbaasTitle")}
</Title>
</CardTitle>
<CardBody>
<Stack hasGutter>
<StackItem>{t("overview-v4:dbaasMainText")}</StackItem>
<StackItem className="pf-u-color-200">
{t("overview-v4:dbaasSecondaryText")}{" "}
<Button
data-testid="cardRHODS-linkOpenShift"
isInline
variant={ButtonVariant.link}
component="a"
target="_blank"
href="https://openshift.com"
>
{" "}
OpenShift
<ExternalLinkAltIcon className="pf-u-ml-xs" />
</Button>
.
</StackItem>
</Stack>
</CardBody>
<CardFooter>
<Button
data-testid="cardRHODS-buttonCTA"
variant={ButtonVariant.secondary}
component="a"
target="_blank"
href="https://console.redhat.com/application-services/databases"
>
{t("overview-v4:learnMore")}{" "}
<ExternalLinkAltIcon className="pf-u-ml-sm" />
</Button>
</CardFooter>
</Card>

{/* Data science card */}
<Card>
<CardHeader>
Expand Down