DOP-4280: Create React context to manage Instruqt lab state (#989)

src/components/Instruqt.js → src/components/Instruqt/index.js

@@ -1,8 +1,9 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useContext } from 'react';
 import { css } from '@emotion/react';
 import IconButton from '@leafygreen-ui/icon-button';
 import Icon from '@leafygreen-ui/icon';
-import { theme } from '../theme/docsTheme';
+import { theme } from '../../theme/docsTheme';
+import { InstruqtContext } from './instruqt-context';
 
 const controlsStyle = css`
   width: 100%;
@@ -19,10 +20,12 @@ const controlsStyle = css`
 const Instruqt = ({ nodeData: { argument }, nodeData }) => {
   const embedValue = argument[0].value;
   const iframeRef = useRef(null);
+  const { setIsOpen } = useContext(InstruqtContext);
 
   const onFullScreen = useCallback(() => {
     if (iframeRef) {
       const element = iframeRef.current;
+      setIsOpen(true);
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.msRequestFullscreen) {
@@ -33,7 +36,7 @@ const Instruqt = ({ nodeData: { argument }, nodeData }) => {
         element.webkitRequestFullscreen();
       }
     }
-  }, [iframeRef]);
+  }, [iframeRef, setIsOpen]);
 
   if (!embedValue) {
     return null;

src/components/Instruqt/instruqt-context.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+const defaultContextValue = {
+  hasLab: false,
+  isOpen: false,
+  setIsOpen: () => {},
+};
+
+const InstruqtContext = React.createContext(defaultContextValue);
+
+const InstruqtProvider = ({ children, hasInstruqtLab }) => {
+  const hasLab = hasInstruqtLab;
+  const [isOpen, setIsOpen] = useState(false);
+
+  return <InstruqtContext.Provider value={{ hasLab, isOpen, setIsOpen }}>{children}</InstruqtContext.Provider>;
+};
+
+InstruqtProvider.defaultProps = {
+  hasInstruqtLab: false,
+};
+
+export { InstruqtContext, InstruqtProvider };

src/components/RootProvider.js

@@ -8,19 +8,31 @@ import { SidenavContextProvider } from './Sidenav';
 import { TabProvider } from './Tabs/tab-context';
 import { ContentsProvider } from './Contents/contents-context';
 import { SearchContextProvider } from './SearchResults/SearchContext';
+import { InstruqtProvider } from './Instruqt/instruqt-context';
 
 // Check for feature flag here to make it easier to pass down for testing purposes
 const SHOW_FACETS = process.env.GATSBY_FEATURE_FACETED_SEARCH === 'true';
 
-const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, remoteMetadata, project }) => {
+const RootProvider = ({
+  children,
+  headingNodes,
+  selectors,
+  slug,
+  repoBranches,
+  hasInstruqtLab,
+  remoteMetadata,
+  project,
+}) => {
   let providers = (
     <TabProvider selectors={selectors}>
       <ContentsProvider headingNodes={headingNodes}>
         <HeaderContextProvider>
           <VersionContextProvider repoBranches={repoBranches} slug={slug}>
             <TocContextProvider remoteMetadata={remoteMetadata}>
               <SidenavContextProvider>
-                <SearchContextProvider showFacets={SHOW_FACETS}>{children}</SearchContextProvider>
+                <InstruqtProvider hasInstruqtLab={hasInstruqtLab}>
+                  <SearchContextProvider showFacets={SHOW_FACETS}>{children}</SearchContextProvider>
+                </InstruqtProvider>
               </SidenavContextProvider>
             </TocContextProvider>
           </VersionContextProvider>

src/layouts/index.js

@@ -103,6 +103,7 @@ const DefaultLayout = ({ children, pageContext: { page, slug, repoBranches, temp
         selectors={page?.options?.selectors}
         remoteMetadata={remoteMetadata}
         project={project}
+        hasInstruqtLab={page?.options?.instruqt}
       >
         <GlobalGrid isInPresentationMode={isInPresentationMode}>
           {!isInPresentationMode ? <Header sidenav={sidenav} eol={eol} slug={slug} template={template} /> : <div />}

src/layouts/preview-layout.js

@@ -154,6 +154,7 @@ const DefaultLayout = ({
           associatedReposInfo={associatedReposInfo}
           headingNodes={page?.options?.headings}
           selectors={page?.options?.selectors}
+          hasInstruqtLab={page?.options?.instruqt}
           isAssociatedProduct={isAssociatedProduct}
         >
           <GlobalGrid>