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

* added initial version of the "help system"

fixes: #25

* fix merge error

* fix format

.prettierrc.json

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

prettierrc.json

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

src/App.tsx

@@ -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,15 +66,17 @@ export const App = () => {
   };
   return (
     <Router>
-      <Page header={<Header />} isManagedSidebar sidebar={<PageNav />}>
-        <PageSection variant="light">
-          <Switch>
-            <Route exact path="/add-realm" component={NewRealmForm}></Route>
-            <Route exact path="/add-client" component={NewClientForm}></Route>
-            <Route exact path="/" component={Clients}></Route>
-          </Switch>
-        </PageSection>
-      </Page>
+      <Help>
+        <Page header={<Header />} isManagedSidebar sidebar={<PageNav />}>
+          <PageSection variant="light">
+            <Switch>
+              <Route exact path="/add-realm" component={NewRealmForm}></Route>
+              <Route exact path="/add-client" component={NewClientForm}></Route>
+              <Route exact path="/" component={Clients}></Route>
+            </Switch>
+          </PageSection>
+        </Page>
+      </Help>
     </Router>
   );
 };

src/PageHeader.tsx

@@ -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>
 

src/components/help-enabler/HelpHeader.tsx

@@ -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}
+    />
+  );
+};

src/components/help-enabler/help-header.module.css

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

stories/2-Toobar.stories.js

@@ -1,33 +1,60 @@
-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'
-};
+storiesOf('Toolbar')
+  .add('realm selector', () => {
+    return (
+      <Page sidebar={
+        <PageSidebar nav={
+          <Nav>
+            <NavList>
+              <RealmSelector realm="Master" realmList={["Master", "Photoz"]} />
 
-export const RealmSelect = () => (
-  <Page sidebar={
-    <PageSidebar nav={
-      <Nav>
-        <NavList>
-          <RealmSelector realm="Master" realmList={["Master", "Photoz"]} />
+              <NavItem id="default-link1" to="#default-link1" itemId={0}>
+                Link 1
+              </NavItem>
+              <NavItem id="default-link2" to="#default-link2" itemId={1} isActive>
+                Current link
+              </NavItem>
+              <NavItem id="default-link3" to="#default-link3" itemId={2}>
+                Link 3
+              </NavItem>
+              <NavItem id="default-link4" to="#default-link4" itemId={3}>
+                Link 4
+              </NavItem>
+            </NavList>
+          </Nav>
+        } />
+      } />
+    );
+  })
+  .add('help system', () => {
+    return (
+      <Help>
+        <HelpSystemTest />
+      </Help>
+    );
+  });
 
-          <NavItem id="default-link1" to="#default-link1" itemId={0}>
-            Link 1
-          </NavItem>
-          <NavItem id="default-link2" to="#default-link2" itemId={1} isActive>
-            Current link
-          </NavItem>
-          <NavItem id="default-link3" to="#default-link3" itemId={2}>
-            Link 3
-          </NavItem>
-          <NavItem id="default-link4" to="#default-link4" itemId={3}>
-            Link 4
-          </NavItem>
-        </NavList>
-      </Nav>
-    } />
-  } />
-);
+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>
+  );
+}