Merge branch 'main' into DOP-4247-build-artifacts

src/components/Heading.js

@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { cx, css } from '@leafygreen-ui/emotion';
 import { H2, H3, Subtitle, Body } from '@leafygreen-ui/typography';
+import Button from '@leafygreen-ui/button';
+import Icon from '@leafygreen-ui/icon';
 import useScreenSize from '../hooks/useScreenSize';
 import ComponentFactory from './ComponentFactory';
 import TabSelectors from './Tabs/TabSelectors';
 import { TabContext } from './Tabs/tab-context';
+import { InstruqtContext } from './Instruqt/instruqt-context';
 import ConditionalWrapper from './ConditionalWrapper';
 import Contents from './Contents';
 import Permalink from './Permalink';
@@ -21,6 +24,10 @@ const headingStyles = css`
   margin-bottom: 8px;
 `;
 
+const labButtonStyling = css`
+  margin-left: 18px;
+`;
+
 const determineHeading = (sectionDepth) => {
   if (sectionDepth === 1) {
     return H2;
@@ -39,7 +46,9 @@ const Heading = ({ sectionDepth, nodeData, page, ...rest }) => {
   const isPageTitle = sectionDepth === 1;
   const { isMobile, isTabletOrMobile } = useScreenSize();
   const { selectors } = useContext(TabContext);
+  const { hasDrawer, isOpen, setIsOpen } = useContext(InstruqtContext);
   const hasSelectors = selectors && Object.keys(selectors).length > 0;
+  const shouldShowLabButton = process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && isPageTitle && hasDrawer;
   const shouldShowMobileHeader = !!(isPageTitle && isTabletOrMobile && hasSelectors);
 
   return (
@@ -62,6 +71,17 @@ const Heading = ({ sectionDepth, nodeData, page, ...rest }) => {
             return <ComponentFactory {...rest} nodeData={element} key={index} />;
           })}
           <Permalink id={id} description="heading" />
+          {shouldShowLabButton && (
+            <Button
+              role="button"
+              className={cx(labButtonStyling)}
+              disabled={isOpen}
+              onClick={() => setIsOpen(true)}
+              leftGlyph={<Icon glyph="Code" />}
+            >
+              {'Open Interactive Tutorial'}
+            </Button>
+          )}
         </HeadingTag>
       </ConditionalWrapper>
       {isPageTitle && <Contents />}

src/components/Instruqt/index.js

@@ -23,7 +23,7 @@ const Instruqt = ({ nodeData }) => {
   const embedValue = nodeData?.argument[0]?.value;
   const title = nodeData?.options?.title;
   const iframeRef = useRef(null);
-  const { setIsOpen, hasLab } = useContext(InstruqtContext);
+  const { setIsOpen, isOpen, hasDrawer } = useContext(InstruqtContext);
 
   const onFullScreen = useCallback(() => {
     if (iframeRef) {
@@ -47,10 +47,12 @@ const Instruqt = ({ nodeData }) => {
 
   return (
     <>
-      {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasLab ? (
-        <>
-          <LabDrawer embedValue={embedValue} title={title} />
-        </>
+      {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasDrawer ? (
+        isOpen && (
+          <>
+            <LabDrawer embedValue={embedValue} title={title} />
+          </>
+        )
       ) : (
         <>
           <InstruqtFrame title={title} embedValue={embedValue} ref={iframeRef} />

src/components/Instruqt/instruqt-context.js

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

src/components/RootProvider.js

@@ -19,7 +19,7 @@ const RootProvider = ({
   selectors,
   slug,
   repoBranches,
-  hasInstruqtLab,
+  hasLabDrawer,
   remoteMetadata,
   project,
 }) => {
@@ -30,7 +30,7 @@ const RootProvider = ({
           <VersionContextProvider repoBranches={repoBranches} slug={slug}>
             <TocContextProvider remoteMetadata={remoteMetadata}>
               <SidenavContextProvider>
-                <InstruqtProvider hasInstruqtLab={hasInstruqtLab}>
+                <InstruqtProvider hasLabDrawer={hasLabDrawer}>
                   <SearchContextProvider showFacets={SHOW_FACETS}>{children}</SearchContextProvider>
                 </InstruqtProvider>
               </SidenavContextProvider>

src/layouts/index.js

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

src/layouts/preview-layout.js

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

tests/unit/Instruqt.test.js

@@ -34,7 +34,6 @@ describe('Instruqt', () => {
       const hasLabDrawer = true;
       const wrapper = renderComponent(mockData.example, hasLabDrawer);
       expect(wrapper.queryByTitle('Instruqt', { exact: false })).toBeTruthy();
-      expect(wrapper.queryByText('MongoDB Interactive Lab')).toBeTruthy();
     });
   });
 });