type HelpTopic = {
  name: string; // unique identifier
  title: string; // displayed in header of side panel
  tags: string[]; // metadata to filter/add relationships between HelpTopics and some piece of data in your application
  content: string; // main content of topic, supports markdown
  links: string[]; // list of related information, use markdown link syntax
};

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 inContextHelpProps: HelpTopicContainerProps = {
    helpTopics,
    resourceBundle,
    language,
    loading,
  };

  return (
    <React.Suspense fallback={<LoadingBox />}>
      <HelpTopicContainer {...inContextHelpProps}>
        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
          {children}
        </Page>
      </HelpTopicContainer>
    </React.Suspense>
  );
};

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