toggle help on kebab click (#339)

* toggle help on kebab click

fixes: #305

* changed realm info to server info and fixed mobile layout

* added on off indication

* changed to use single key for enabled and disabled

src/PageHeader.tsx

@@ -15,7 +15,7 @@ import {
 } from "@patternfly/react-core";
 import { HelpIcon } from "@patternfly/react-icons";
 import { WhoAmIContext } from "./context/whoami/WhoAmI";
-import { HelpHeader } from "./components/help-enabler/HelpHeader";
+import { HelpContext, HelpHeader } from "./components/help-enabler/HelpHeader";
 import { Link, useHistory } from "react-router-dom";
 import { useAdminClient } from "./context/auth/AdminClient";
 import { useRealm } from "./context/realm-context/RealmContext";
@@ -75,7 +75,12 @@ export const Header = () => {
 
   const HelpDropdownItem = () => {
     const { t } = useTranslation();
-    return <DropdownItem icon={<HelpIcon />}>{t("help")}</DropdownItem>;
+    const { enabled, toggleHelp } = useContext(HelpContext);
+    return (
+      <DropdownItem icon={<HelpIcon />} onClick={toggleHelp}>
+        {enabled ? t("helpEnabled") : t("helpDisabled")}
+      </DropdownItem>
+    );
   };
 
   const kebabDropdownItems = [

src/common-messages.json

@@ -36,6 +36,8 @@
     "realmInfo": "Realm info",
     "help": "Help",
     "helpLabel": "More help for {{label}}",
+    "helpEnabled": "Help on",
+    "helpDisabled": "Help off",
     "documentation": "Documentation",
     "enableHelpMode": "Enable help mode",
     "learnMore": "Learn more",

src/dashboard/Dashboard.tsx

@@ -51,7 +51,7 @@ const EmptyDashboard = () => {
         </Title>
         <EmptyStateBody>{t("introduction")}</EmptyStateBody>
         <Button variant="link" onClick={() => setRealm("master")}>
-          {t("common:providerInfo")}
+          {t("common:serverInfo")}
         </Button>
       </EmptyState>
     </PageSection>
@@ -86,7 +86,7 @@ const Dashboard = () => {
       </PageSection>
       <PageSection>
         <Grid hasGutter>
-          <GridItem span={2}>
+          <GridItem lg={2} sm={12}>
             <Card className="keycloak__dashboard_card">
               <CardTitle>{t("serverInfo")}</CardTitle>
               <CardBody>
@@ -105,7 +105,7 @@ const Dashboard = () => {
               </CardBody>
             </Card>
           </GridItem>
-          <GridItem span={10}>
+          <GridItem lg={10} sm={12}>
             <Card className="keycloak__dashboard_card">
               <CardTitle>{t("profile")}</CardTitle>
               <CardBody>