From bd0ae24e9fa152d5c3bec90c122ad08a5cbaf15a Mon Sep 17 00:00:00 2001
From: anabellabuckvar <41971124+anabellabuckvar@users.noreply.github.com>
Date: Fri, 26 Jan 2024 12:25:12 -0500
Subject: [PATCH] DOP-4280: Create React context to manage Instruqt lab state
 (#989)

---
 .../{Instruqt.js => Instruqt/index.js}        |  9 +++++---
 src/components/Instruqt/instruqt-context.js   | 22 +++++++++++++++++++
 src/components/RootProvider.js                | 16 ++++++++++++--
 src/layouts/index.js                          |  1 +
 src/layouts/preview-layout.js                 |  1 +
 5 files changed, 44 insertions(+), 5 deletions(-)
 rename src/components/{Instruqt.js => Instruqt/index.js} (85%)
 create mode 100644 src/components/Instruqt/instruqt-context.js

diff --git a/src/components/Instruqt.js b/src/components/Instruqt/index.js
similarity index 85%
rename from src/components/Instruqt.js
rename to src/components/Instruqt/index.js
index 5d671b466..b1b6e296f 100644
--- a/src/components/Instruqt.js
+++ b/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;
diff --git a/src/components/Instruqt/instruqt-context.js b/src/components/Instruqt/instruqt-context.js
new file mode 100644
index 000000000..d530a0a90
--- /dev/null
+++ b/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 };
diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js
index a2a13773a..b9a2f5e98 100644
--- a/src/components/RootProvider.js
+++ b/src/components/RootProvider.js
@@ -8,11 +8,21 @@ 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}>
@@ -20,7 +30,9 @@ const RootProvider = ({ children, headingNodes, selectors, slug, repoBranches, r
           <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>
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 28595fe47..0e2211669 100644
--- a/src/layouts/index.js
+++ b/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 />}
diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
index 5b82968a3..af9a2ddf5 100644
--- a/src/layouts/preview-layout.js
+++ b/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>