Skip to content

Commit

Permalink
Enable a logo-only header and use it for QuickSight dashboard.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tdilauro
tdilauro committed Sep 25, 2024
1 parent 6d6472f commit e8584c0
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 77 deletions.
153 changes: 86 additions & 67 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export interface HeaderDispatchProps {

export interface HeaderOwnProps {
store?: Store<RootState>;
logoOnly?: boolean;
}

export interface HeaderProps
Expand Down Expand Up @@ -130,83 +131,90 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
},
];
const accountLink = { label: "Change password", href: "account/" };
const logoOnly = this.props.logoOnly ?? false;

return (
<Navbar fluid={true}>
<Navbar.Header>
<img src={palaceLogoUrl} alt={title()} />
{this.props.libraries && this.props.libraries.length > 0 && (
<EditableInput
elementType="select"
ref={this.libraryRef}
value={currentLibrary}
onChange={this.changeLibrary}
aria-label="Select a library"
>
{(!this.context.library || !currentLibrary) && (
<option aria-selected={false}>Select a library</option>
)}
{this.props.libraries.map((library) => (
<option
key={library.short_name}
value={library.short_name}
aria-selected={currentLibrary === library.short_name}
{!logoOnly && (
<>
{this.props.libraries && this.props.libraries.length > 0 && (
<EditableInput
elementType="select"
ref={this.libraryRef}
value={currentLibrary}
onChange={this.changeLibrary}
aria-label="Select a library"
>
{library.name || library.short_name}
</option>
))}
</EditableInput>
{(!this.context.library || !currentLibrary) && (
<option aria-selected={false}>Select a library</option>
)}
{this.props.libraries.map((library) => (
<option
key={library.short_name}
value={library.short_name}
aria-selected={currentLibrary === library.short_name}
>
{library.name || library.short_name}
</option>
))}
</EditableInput>
)}
<Navbar.Toggle />
</>
)}
<Navbar.Toggle />
</Navbar.Header>

<Navbar.Collapse className="menu">
{currentLibrary && (
<Nav>
{this.renderLinkItem(
dashboardLinkItem,
currentPathname,
currentLibrary
)}
{libraryNavItems.map((item) =>
this.renderNavItem(item, currentPathname, currentLibrary)
{!logoOnly && (
<Navbar.Collapse className="menu">
{currentLibrary && (
<Nav>
{this.renderLinkItem(
dashboardLinkItem,
currentPathname,
currentLibrary
)}
{libraryNavItems.map((item) =>
this.renderNavItem(item, currentPathname, currentLibrary)
)}
{libraryLinkItems.map((item) =>
this.renderLinkItem(item, currentPathname, currentLibrary)
)}
</Nav>
)}
<Nav className="pull-right">
{sitewideLinkItems.map((item) =>
this.renderLinkItem(item, currentPathname)
)}
{libraryLinkItems.map((item) =>
this.renderLinkItem(item, currentPathname, currentLibrary)
{this.context.admin.email && (
<li className="dropdown">
<Button
className="account-dropdown-toggle transparent"
type="button"
aria-haspopup="true"
aria-expanded={this.state.showAccountDropdown}
callback={this.toggleAccountDropdown}
content={
<span>
{this.context.admin.email} <GenericWedgeIcon />
</span>
}
/>
{this.state.showAccountDropdown && (
<ul className="dropdown-menu">
{this.displayPermissions(isSystemAdmin, isLibraryManager)}
{this.renderLinkItem(accountLink, currentPathname)}
<li>
<a href="/admin/sign_out">Sign out</a>
</li>
</ul>
)}
</li>
)}
</Nav>
)}
<Nav className="pull-right">
{sitewideLinkItems.map((item) =>
this.renderLinkItem(item, currentPathname)
)}
{this.context.admin.email && (
<li className="dropdown">
<Button
className="account-dropdown-toggle transparent"
type="button"
aria-haspopup="true"
aria-expanded={this.state.showAccountDropdown}
callback={this.toggleAccountDropdown}
content={
<span>
{this.context.admin.email} <GenericWedgeIcon />
</span>
}
/>
{this.state.showAccountDropdown && (
<ul className="dropdown-menu">
{this.displayPermissions(isSystemAdmin, isLibraryManager)}
{this.renderLinkItem(accountLink, currentPathname)}
<li>
<a href="/admin/sign_out">Sign out</a>
</li>
</ul>
)}
</li>
)}
</Nav>
</Navbar.Collapse>
</Navbar.Collapse>
)}
</Navbar>
);
}
Expand Down Expand Up @@ -331,14 +339,25 @@ const ConnectedHeader = connect<

/** HeaderWithStore is a wrapper component to pass the store as a prop to the
ConnectedHeader, since it's not in the regular place in the context. */
export default class HeaderWithStore extends React.Component<{}, {}> {
type HeaderWithStoreProps = {
logoOnly?: boolean;
};

export default class HeaderWithStore extends React.Component<
HeaderWithStoreProps
> {
context: { editorStore: Store<RootState> };

static contextTypes = {
editorStore: PropTypes.object.isRequired,
};

render(): JSX.Element {
return <ConnectedHeader store={this.context.editorStore} />;
return (
<ConnectedHeader
store={this.context.editorStore}
logoOnly={this.props.logoOnly}
/>
);
}
}
2 changes: 1 addition & 1 deletion src/components/QuicksightDashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class QuicksightDashboardPage extends React.Component<
const { library } = this.props.params;
return (
<div className="quicksight-dashboard">
<Header />
<Header logoOnly={true} />
<main className="body">
<QuicksightDashboard dashboardId="library" />
</main>
Expand Down
29 changes: 20 additions & 9 deletions tests/jest/components/QuicksightDashboard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import buildStore from "../../../src/store";
import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";
import renderWithContext from "../testUtils/renderWithContext";
import { renderWithProviders } from "../testUtils/withProviders";
import QuicksightDashboardPage from "../../../src/components/QuicksightDashboardPage";

const libraries: LibrariesData = { libraries: [{ uuid: "my-uuid" }] };
const dashboardId = "test";
Expand Down Expand Up @@ -35,15 +37,8 @@ describe("QuicksightDashboard", () => {
});

it("embed url is retrieved and set in iframe", async () => {
const contextProviderProps = {
csrfToken: "",
featureFlags: {},
roles: [{ role: "system" }],
};

renderWithContext(
<QuicksightDashboard dashboardId={dashboardId} store={buildStore()} />,
contextProviderProps
renderWithProviders(
<QuicksightDashboard dashboardId={dashboardId} store={buildStore()} />
);

await waitFor(() => {
Expand All @@ -53,4 +48,20 @@ describe("QuicksightDashboard", () => {
);
});
});

it("header renders without navigation links ", () => {
renderWithProviders(<QuicksightDashboardPage params={{ library: null }} />);

// Make sure we see the QuicksSight iFrame.
expect(screen.getByTitle("Library Dashboard")).toBeInTheDocument();
// Make sure we have the branding image.
expect(
screen.getByAltText("Palace Collection Manager")
).toBeInTheDocument();

// Make sure we do not see other navigation links.
["Dashboard", "System Configuration"].forEach((name) => {
expect(screen.queryByText(name)).not.toBeInTheDocument();
});
});
});

0 comments on commit e8584c0

Please sign in to comment.