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

Commit

Permalink
chore: update overview page (#631)
Browse files Browse the repository at this point in the history 
* Update overview page

Signed-off-by: hemahg <hhg@redhat.com>

* Update test

Signed-off-by: hemahg <hhg@redhat.com>

---------

Signed-off-by: hemahg <hhg@redhat.com>
  • Loading branch information
@hemahg
hemahg committed May 3, 2023
1 parent b63e75b commit dc3886c
Show file tree
Hide file tree
Showing 4 changed files with 7 additions and 743 deletions.
6 changes: 0 additions & 6 deletions src/AppServices/OverviewPageV4.stories.tsx
View file
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
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
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

0 comments on commit dc3886c

Please sign in to comment.