Merge pull request #140 from CooperRedhat/in-context

In context help POC

Merging as it only adds functionality to be tested in a stage environment

packages/dev/src/AppHelpTopicDemo.tsx

@@ -0,0 +1,46 @@
+import './App.css';
+import { Page } from '@patternfly/react-core';
+import { LoadingBox, HelpTopicContainerProps, HelpTopicContainer } from '@patternfly/quickstarts';
+import { helpTopics } from './quickstarts-data/quick-start-test-data';
+import React from 'react';
+import i18n from './i18n/i18n';
+import { AppHeader, AppSidebar } from './common/Page';
+
+type AppProps = {
+  children?: React.ReactNode;
+  showCardFooters?: boolean;
+};
+
+const AppHelpTopicDemo: React.FC<AppProps> = ({ children }) => {
+  const language = localStorage.getItem('bridge/language') || 'en';
+  const resourceBundle = i18n.getResourceBundle(language, 'quickstart');
+
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    const load = async () => {
+      setLoading(false);
+    };
+    setTimeout(() => {
+      load();
+    }, 500);
+  }, []);
+
+  const helpTopicContainerProps: HelpTopicContainerProps = {
+    helpTopics,
+    resourceBundle,
+    language,
+    loading,
+  };
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <HelpTopicContainer {...helpTopicContainerProps}>
+        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
+          {children}
+        </Page>
+      </HelpTopicContainer>
+    </React.Suspense>
+  );
+};
+
+export default AppHelpTopicDemo;

packages/dev/src/MockConsole.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {
+  Banner,
+  Button,
+  Divider,
+  Form,
+  FormGroup,
+  PageSection,
+  Popover,
+  Split,
+  SplitItem,
+  TextInput,
+  Title,
+} from '@patternfly/react-core';
+import { HelpTopicContext, HelpTopicContextValues } from '@patternfly/quickstarts';
+import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
+import { HelpTopic } from '@patternfly/quickstarts/dist/utils/help-topic-types';
+
+// Example usage of topics, render certain topics depending on the page
+// used this case when "consolePageState" below is between 4 - 6
+// these HelpTopics with the following names will be rendered
+const helpTopicNamesByPage = [
+  ['auto-deploy', 'code-sample', 'manual-deployment'],
+  ['manual-deployment', 'target-port', 'build-configuration'],
+  ['deploy-configuration', 'environment-variables', 'health-checks'],
+];
+
+interface FormGroupWithHelpTopicPopoverProps extends React.HTMLProps<HTMLDivElement> {
+  topic: HelpTopic;
+}
+
+// Example usage of setActiveHelpTopicByName()
+// render a popover with a learn more link to open the drawer
+const FormGroupWithHelpTopicPopover: React.FC<FormGroupWithHelpTopicPopoverProps> = ({ topic }) => {
+  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  return (
+    <FormGroup
+      label={topic.title}
+      isRequired
+      fieldId={topic.name}
+      key={topic.name}
+      labelIcon={
+        <Popover
+          bodyContent={(hide) => (
+            <div>
+              {topic.title} is quite amaizing{' '}
+              <Button
+                variant="link"
+                onClick={() => {
+                  setActiveHelpTopicByName(topic.name);
+                  hide();
+                }}
+              >
+                Learn more
+              </Button>
+            </div>
+          )}
+        >
+          <Button variant="plain">
+            <HelpIcon noVerticalAlign />
+          </Button>
+        </Popover>
+      }
+    >
+      <TextInput isRequired type="text" id={topic.name} />
+    </FormGroup>
+  );
+};
+
+export const MockConsole: React.FC = () => {
+  const {
+    helpTopics,
+    setFilteredHelpTopics,
+    filteredHelpTopics,
+    setActiveHelpTopicByName,
+  } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  // mock console page identifiers: 1 - 6
+  // click handlers to change page
+  const [consolePageState, setConsolePageState] = React.useState(1);
+
+  const handleClickNext = () => {
+    setActiveHelpTopicByName('');
+    if (consolePageState === 6) {
+      setConsolePageState(1);
+      return;
+    }
+    setConsolePageState(consolePageState + 1);
+  };
+
+  const handleClickBack = () => {
+    setActiveHelpTopicByName('');
+    if (consolePageState === 6) {
+      setConsolePageState(4);
+      return;
+    }
+    setConsolePageState(consolePageState - 1);
+  };
+
+  // Example usage setFilteredHelpTopics()
+  // After rendering the console, set the filtered help topics
+  React.useEffect(() => {
+    // set filtered topics using tags, matching to the consolePageState
+    if (consolePageState < 4) {
+      const topics = helpTopics.filter((topic: HelpTopic) => {
+        const pageTagNumbers = topic.tags.map((tag: string) => {
+          return Number(tag.slice(-1));
+        });
+        return pageTagNumbers.includes(consolePageState);
+      });
+      setFilteredHelpTopics(topics);
+    } else {
+      // set filtered topics using the appropriate helpTopicNamesByPage array above
+      setFilteredHelpTopics(
+        helpTopics.filter((topic) => {
+          return helpTopicNamesByPage[consolePageState - 4].includes(topic.name);
+        }),
+      );
+    }
+  }, [consolePageState, helpTopics, setFilteredHelpTopics]);
+
+  // Render filteredHelpTopics in a <FormGroupWithHelpTopicPopover />
+  const formGroupsFromTags = filteredHelpTopics.map((topic: HelpTopic, index) => {
+    return <FormGroupWithHelpTopicPopover topic={topic} key={index} />;
+  });
+
+  // From an array of topic names, render all topics in a <FormGroupWithHelpTopicPopover />
+  const formGroupsFromTopicNames = (helpTopicNames: string[]) => {
+    return helpTopicNames.map((topicName: string, index) => {
+      const topicToRender = helpTopics.find((topic) => {
+        return topicName === topic.name;
+      });
+
+      if (topicToRender) {
+        return <FormGroupWithHelpTopicPopover topic={topicToRender} key={index} />;
+      }
+    });
+  };
+
+  return (
+    <>
+      <PageSection>
+        <Banner variant="info">
+          <Title headingLevel="h1">Console Page {consolePageState}</Title>
+        </Banner>
+      </PageSection>
+      <PageSection>
+        <Title headingLevel="h3">
+          Example usage of help topics opened via popover{' '}
+          <b>
+            {consolePageState < 4
+              ? 'using tags that match the Console Page number'
+              : 'by defining which help topics should be present on each page'}
+          </b>
+        </Title>
+        <Divider />
+        <Form>
+          {consolePageState < 4
+            ? formGroupsFromTags
+            : formGroupsFromTopicNames(helpTopicNamesByPage[consolePageState - 4])}
+        </Form>
+      </PageSection>
+      <PageSection>
+        <Split hasGutter>
+          <SplitItem>
+            <Button onClick={handleClickBack} variant="tertiary">
+              Previous
+            </Button>
+          </SplitItem>
+          <SplitItem>
+            <Button onClick={handleClickNext}>Next</Button>
+          </SplitItem>
+        </Split>
+      </PageSection>
+    </>
+  );
+};

packages/dev/src/Nav.ts

@@ -30,6 +30,11 @@ export const Nav: NavInterface[] = [
     name: 'Quick starts (context)',
     to: '/quickstarts-context',
   },
+  {
+    id: 'in-context-help',
+    name: 'In Context Help',
+    to: '/in-context-help',
+  },
 ];
 
 export default Nav;

packages/dev/src/index.tsx

@@ -18,8 +18,10 @@ import './i18n/i18n';
 import AppContext from './AppContext';
 import AppProps from './AppProps';
 import AppLocalized from './AppLocalized';
+import AppHelpTopicDemo from './AppHelpTopicDemo';
 import { DefaultCatalog } from './DefaultCatalog';
 import { CustomCatalog } from './CustomCatalog';
+import { MockConsole } from './MockConsole';
 
 ReactDOM.render(
   <Router>
@@ -44,6 +46,11 @@ ReactDOM.render(
           <DefaultCatalog hint="This catalog is for testing the context based quick starts approach by utilizing the QuickStartContextProvider" />
         </AppContext>
       </Route>
+      <Route exact path="/in-context-help">
+        <AppHelpTopicDemo>
+          <MockConsole />
+        </AppHelpTopicDemo>
+      </Route>
     </Switch>
   </Router>,
   document.getElementById('root'),

packages/dev/src/quickstarts-data/quick-start-test-data.ts

@@ -21,6 +21,9 @@ import sampleApplicationQuickstart from './yaml/sample-application-quickstart.ya
 import serverlessApplicationQuickstart from './yaml/serverless-application-quickstart.yaml';
 import springWithS2i from './yaml/spring-with-s2i.yaml';
 
+// in-context help examples
+import exampleHelpTopics from './yaml/in-context-help/example-topics.yaml';
+
 export const allQuickStarts: QuickStart[] = [
   template,
   external,
@@ -38,3 +41,5 @@ export const allQuickStarts: QuickStart[] = [
 ];
 
 export const localizedQuickStarts: QuickStart[] = [csDemo, enDemo];
+
+export const helpTopics = exampleHelpTopics;

packages/dev/src/quickstarts-data/yaml/in-context-help/example-topics.yaml

@@ -0,0 +1,121 @@
+- name: auto-deploy
+  tags:
+    - page-1
+  title: Automatic Deployment
+  content: |-
+    **An Automatic Deployment** is...
+
+    Etiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: workspace
+  tags:
+    - page-1
+    - page-2
+    - page-3
+  title: Workspace
+  content: |-
+    **A Workspace** is...
+
+    Fusce nunc risus, vehicula feugiat pellentesque sit amet, pretium non urna. Phasellus nibh mi, ornare quis euismod a, iaculis et eros. Vivamus auctor nunc odio, quis porttitor diam pellentesque nec. In et varius tellus, eget porta urna. Etiam bibendum, est eget mollis lobortis, velit risus efficitur lacus, sed pulvinar sem est vel libero. In sodales placerat tincidunt. Proin vitae risus elit. Ut lobortis ligula est, cursus rhoncus enim scelerisque ac. Donec lacus nisl, tempor porta hendrerit nec, volutpat vitae arcu. Curabitur ornare ullamcorper mi in tincidunt. Aenean efficitur posuere auctor. Pellentesque accumsan mauris vel arcu congue, nec sagittis nisl condimentum. Suspendisse mauris nulla, dignissim at viverra sed, fringilla eu purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: code-sample
+  tags:
+    - page-1
+  title: Code Sample
+  content: |-
+    **A Code Sample** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit.
+    ```
+    console.log("hello world")
+    ```
+    Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: manual-deployment
+  tags:
+    - page-2
+    - page-1
+  title: Manual Deployment
+  content: |-
+    **A Manual Deployment** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit.
+    ```
+    console.log("hello world")
+    ```
+    Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: target-port
+  tags:
+    - page-2
+  title: Target Port
+  content: |-
+    **A Target Port** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: build-configuration
+  tags:
+    - page-2
+  title: Build Configuration
+  content: |-
+    **A Build Configuration** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: run-time
+  tags:
+    - page-3
+  title: Runtime
+  content: |-
+    **A Runtime** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: deploy-configuration
+  tags:
+    - page-3
+  title: Deploy Configuration
+  content: |-
+    **A Deploy Configuration** is...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: environment-variables
+  tags:
+    - page-3
+  title: Environment Variables
+  content: |-
+    **Environment Variable** are...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"
+- name: health-checks
+  tags:
+    - page-3
+  title: Health Checks
+  content: |-
+    **Health Checks** are...
+
+    Vivamus pharetra vel risus id dignissim. Donec in nisl quis ligula rutrum vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper ex at lorem vehicula, id facilisis velit suscipit. Etiam elit ante, tempus sit amet maximus vel, laoreet vel quam. Sed sollicitudin ex sem, vel aliquam eros volutpat sit amet. Aliquam lobortis elementum sapien et dictum. Nullam interdum porttitor dapibus. Etiam id finibus libero, vitae vehicula metus. Mauris sit amet sollicitudin enim. Nullam tellus ante, ullamcorper sed odio vestibulum, dignissim luctus purus.
+  links:
+    - "[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)"
+    - "[Redhat Console](https://console.redhat.com/)"