Skip to content

Commit a9f64a7

Browse files
gitdallasibolton336
gitdallas
and
ibolton336
authored
🌱 chore(Header): use new pf masthead (#1282)
closes #1243 --------- Signed-off-by: gitdallas <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
1 parent b086b18 commit a9f64a7

File tree

3 files changed

+320
-225
lines changed

3 files changed

+320
-225
lines changed

‎client/src/app/layout/HeaderApp/HeaderApp.tsx

+91-62
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,109 @@
11
import React from "react";
2-
import { Brand, Button, ButtonVariant, Title } from "@patternfly/react-core";
32
import {
4-
PageHeader,
5-
PageHeaderTools,
6-
PageHeaderToolsGroup,
7-
PageHeaderToolsItem,
8-
} from "@patternfly/react-core/deprecated";
3+
Brand,
4+
Button,
5+
ButtonVariant,
6+
Masthead,
7+
MastheadBrand,
8+
MastheadContent,
9+
MastheadMain,
10+
MastheadToggle,
11+
PageToggleButton,
12+
Title,
13+
Toolbar,
14+
ToolbarContent,
15+
ToolbarGroup,
16+
ToolbarItem,
17+
} from "@patternfly/react-core";
918
import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
10-
19+
import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon";
1120
import { AppAboutModalState } from "../AppAboutModalState";
1221
import { SSOMenu } from "./SSOMenu";
1322
import { MobileDropdown } from "./MobileDropdown";
1423

1524
import konveyorBrandImage from "@app/images/Konveyor-white-logo.svg";
16-
import { APP_BRAND, BrandType, isAuthRequired } from "@app/Constants";
25+
import { APP_BRAND, BrandType } from "@app/Constants";
1726
import logoRedHat from "@app/images/logoRedHat.svg";
1827
import "./header.css";
1928

2029
export const HeaderApp: React.FC = () => {
2130
const toolbar = (
22-
<PageHeaderTools>
23-
<PageHeaderToolsGroup
24-
visibility={{
25-
default: "hidden",
26-
"2xl": "visible",
27-
xl: "visible",
28-
lg: "visible",
29-
md: "hidden",
30-
sm: "hidden",
31-
}}
32-
>
33-
<PageHeaderToolsItem>
34-
<AppAboutModalState>
35-
{({ toggleModal }) => {
36-
return (
37-
<Button
38-
id="about-button"
39-
aria-label="about button"
40-
variant={ButtonVariant.plain}
41-
onClick={toggleModal}
42-
>
43-
<HelpIcon />
44-
</Button>
45-
);
46-
}}
47-
</AppAboutModalState>
48-
</PageHeaderToolsItem>
49-
</PageHeaderToolsGroup>
50-
<PageHeaderToolsGroup>
51-
<PageHeaderToolsItem
31+
<Toolbar isFullHeight isStatic>
32+
<ToolbarContent>
33+
<ToolbarGroup
34+
variant="icon-button-group"
35+
align={{ default: "alignRight" }}
36+
spacer={{ default: "spacerNone", md: "spacerMd" }}
5237
visibility={{
53-
lg: "hidden",
54-
}} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
38+
default: "hidden",
39+
"2xl": "visible",
40+
xl: "visible",
41+
lg: "visible",
42+
md: "hidden",
43+
}}
5544
>
56-
<MobileDropdown />
57-
</PageHeaderToolsItem>
58-
<SSOMenu />
59-
</PageHeaderToolsGroup>
60-
{APP_BRAND === BrandType.MTA && (
61-
<PageHeaderToolsGroup>
62-
<PageHeaderToolsItem>
63-
<img src={logoRedHat} alt="Logo" className="redhat-logo-style" />
64-
</PageHeaderToolsItem>
65-
</PageHeaderToolsGroup>
45+
<ToolbarItem>
46+
<AppAboutModalState>
47+
{({ toggleModal }) => {
48+
return (
49+
<Button
50+
id="about-button"
51+
aria-label="about button"
52+
variant={ButtonVariant.plain}
53+
onClick={toggleModal}
54+
>
55+
<HelpIcon />
56+
</Button>
57+
);
58+
}}
59+
</AppAboutModalState>
60+
</ToolbarItem>
61+
</ToolbarGroup>
62+
<ToolbarGroup>
63+
<ToolbarItem
64+
visibility={{
65+
lg: "hidden",
66+
}} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
67+
>
68+
<MobileDropdown />
69+
</ToolbarItem>
70+
<SSOMenu />
71+
</ToolbarGroup>
72+
{APP_BRAND === BrandType.MTA && (
73+
<ToolbarGroup>
74+
<ToolbarItem>
75+
<img src={logoRedHat} alt="Logo" className="redhat-logo-style" />
76+
</ToolbarItem>
77+
</ToolbarGroup>
78+
)}
79+
</ToolbarContent>
80+
</Toolbar>
81+
);
82+
return (
83+
<Masthead>
84+
<MastheadToggle>
85+
<PageToggleButton variant="plain" aria-label="Global navigation">
86+
<BarsIcon />
87+
</PageToggleButton>
88+
</MastheadToggle>
89+
{APP_BRAND === BrandType.Konveyor ? (
90+
<MastheadMain>
91+
<MastheadBrand>
92+
<Brand
93+
src={konveyorBrandImage}
94+
alt="brand"
95+
heights={{ default: "60px" }}
96+
/>
97+
</MastheadBrand>
98+
</MastheadMain>
99+
) : (
100+
<MastheadContent>
101+
<Title className="logo-pointer" headingLevel="h1" size="2xl">
102+
Migration Toolkit for Applications
103+
</Title>
104+
</MastheadContent>
66105
)}
67-
</PageHeaderTools>
106+
<MastheadContent>{toolbar}</MastheadContent>
107+
</Masthead>
68108
);
69-
70-
const headerLogo =
71-
APP_BRAND === BrandType.Konveyor ? (
72-
<Brand src={konveyorBrandImage} alt="brand" />
73-
) : (
74-
<Title className="logo-pointer" headingLevel="h1" size="2xl">
75-
Migration Toolkit for Applications
76-
</Title>
77-
);
78-
79-
return <PageHeader logo={headerLogo} headerTools={toolbar} showNavToggle />;
80109
};

‎client/src/app/layout/HeaderApp/SSOMenu.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import { useKeycloak } from "@react-keycloak/web";
4-
import { DropdownGroup, DropdownItem } from "@patternfly/react-core";
54
import {
6-
Dropdown,
7-
DropdownToggle,
8-
PageHeaderToolsItem,
9-
} from "@patternfly/react-core/deprecated";
5+
DropdownGroup,
6+
DropdownItem,
7+
ToolbarItem,
8+
} from "@patternfly/react-core";
9+
import { Dropdown, DropdownToggle } from "@patternfly/react-core/deprecated";
1010
import { isAuthRequired, LocalStorageKey } from "@app/Constants";
1111
import { useHistory } from "react-router-dom";
1212

@@ -27,7 +27,7 @@ export const SSOMenu: React.FC = () => {
2727
return (
2828
<>
2929
{keycloak && (
30-
<PageHeaderToolsItem
30+
<ToolbarItem
3131
visibility={{
3232
default: "hidden",
3333
md: "visible",
@@ -82,7 +82,7 @@ export const SSOMenu: React.FC = () => {
8282
</DropdownGroup>,
8383
]}
8484
/>
85-
</PageHeaderToolsItem>
85+
</ToolbarItem>
8686
)}
8787
</>
8888
);

0 commit comments

Comments
 (0)