added initial version of the "help system" (#26)

* added initial version of the "help system"

fixes: #25

* fix merge error

* fix format
This commit is contained in:
Erik Jan de Wit 2020-09-02 09:51:42 +02:00 committed by GitHub
parent 8e664659b7
commit bc041cd44e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 174 additions and 45 deletions

3
.prettierrc.json Normal file
View file

@ -0,0 +1,3 @@
{
"singleQuote": false
}

View file

@ -1,3 +0,0 @@
{
"singleQuote": true
}

View file

@ -9,6 +9,7 @@ import { PageNav } from "./PageNav";
import { KeycloakContext } from "./auth/KeycloakContext";
import { TableToolbar } from "./components/table-toolbar/TableToolbar";
import { Help } from "./components/help-enabler/HelpHeader";
import {
BrowserRouter as Router,
Route,
@ -65,6 +66,7 @@ export const App = () => {
};
return (
<Router>
<Help>
<Page header={<Header />} isManagedSidebar sidebar={<PageNav />}>
<PageSection variant="light">
<Switch>
@ -74,6 +76,7 @@ export const App = () => {
</Switch>
</PageSection>
</Page>
</Help>
</Router>
);
};

View file

@ -2,8 +2,6 @@ import React, { useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import {
Avatar,
Button,
ButtonVariant,
Brand,
Dropdown,
DropdownItem,
@ -17,6 +15,7 @@ import {
} from "@patternfly/react-core";
import { HelpIcon } from "@patternfly/react-icons";
import { KeycloakContext } from "./auth/KeycloakContext";
import { HelpHeader } from "./components/help-enabler/HelpHeader";
import { Link } from "react-router-dom";
export const Header = () => {
@ -95,9 +94,7 @@ const headerTools = () => {
}} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
>
<PageHeaderToolsItem>
<Button aria-label="Help actions" variant={ButtonVariant.plain}>
<HelpIcon />
</Button>
<HelpHeader />
</PageHeaderToolsItem>
</PageHeaderToolsGroup>

View file

@ -0,0 +1,93 @@
import React, { useState, useContext, ReactNode, createContext } from "react";
import {
Dropdown,
DropdownItem,
DropdownToggle,
Switch,
Text,
TextVariants,
} from "@patternfly/react-core";
import { Trans, useTranslation } from "react-i18next";
import { HelpIcon, ExternalLinkAltIcon } from "@patternfly/react-icons";
import style from "./help-header.module.css";
type HelpProps = {
children: ReactNode;
};
type HelpContextProps = {
enabled: boolean;
toggleHelp: () => void;
};
export const HelpContext = createContext<HelpContextProps>({
enabled: true,
toggleHelp: () => {},
});
export const Help = ({ children }: HelpProps) => {
const [enabled, setHelp] = useState(true);
function toggleHelp() {
setHelp((help) => !help);
}
return (
<HelpContext.Provider value={{ enabled, toggleHelp }}>
{children}
</HelpContext.Provider>
);
};
export const HelpHeader = () => {
const [open, setOpen] = useState(false);
const help = useContext(HelpContext);
const { t } = useTranslation();
const dropdownItems = [
<DropdownItem key="link" id="link">
{t("Documentation") + " "}
<ExternalLinkAltIcon />
</DropdownItem>,
<DropdownItem
key="enable"
id="enable"
component="div"
className={style.helpDropdownItem}
>
{t("Enable help mode") + " "}
<Switch
id="enableHelp"
aria-label="Help is enabled"
isChecked={help.enabled}
onChange={() => help.toggleHelp()}
/>
<div>
<Text component={TextVariants.small} className={style.helpText}>
<Trans>
This toggle will enable / disable part of the help info in the
console. Includes any help text, links and popovers.
</Trans>
</Text>
</div>
</DropdownItem>,
];
return (
<Dropdown
position="right"
isPlain
isOpen={open}
toggle={
<DropdownToggle
toggleIndicator={null}
onToggle={() => setOpen(!open)}
aria-label="Help"
id="help"
>
<HelpIcon />
</DropdownToggle>
}
dropdownItems={dropdownItems}
/>
);
};

View file

@ -0,0 +1,9 @@
.helpDropdownItem {
background-color: transparent;
}
.helpText {
overflow-wrap: break-word;
white-space: normal;
}

View file

@ -1,13 +1,13 @@
import React from 'react';
import { Nav, NavItem, NavList, PageSidebar, Page } from '@patternfly/react-core';
import React, { useContext } from 'react';
import { storiesOf } from '@storybook/react';
import { Nav, NavItem, NavList, PageSidebar, Page, PageHeader, PageHeaderTools, PageHeaderToolsItem } from '@patternfly/react-core';
import { RealmSelector } from '../src/components/realm-selector/RealmSelector';
import { Help, HelpContext, HelpHeader } from '../src/components/help-enabler/HelpHeader';
export default {
title: 'Toolbar'
};
export const RealmSelect = () => (
storiesOf('Toolbar')
.add('realm selector', () => {
return (
<Page sidebar={
<PageSidebar nav={
<Nav>
@ -30,4 +30,31 @@ export const RealmSelect = () => (
</Nav>
} />
} />
);
);
})
.add('help system', () => {
return (
<Help>
<HelpSystemTest />
</Help>
);
});
const HelpSystemTest = () => {
const { enabled } = useContext(HelpContext);
return (
<Page header={<PageHeader
headerTools={
<PageHeaderTools>
<PageHeaderToolsItem>
<HelpHeader />
</PageHeaderToolsItem>
<PageHeaderToolsItem>
dummy user...
</PageHeaderToolsItem>
</PageHeaderTools>}
/>}>
Help system is {enabled ? 'enabled' : "not on, guess you don't need help"}
</Page>
);
}