diff --git a/src/components/Heading.js b/src/components/Heading.js
index 534064fcb..71c1515c7 100644
--- a/src/components/Heading.js
+++ b/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 ;
})}
+ {shouldShowLabButton && (
+
+ )}
{isPageTitle && }
diff --git a/src/components/Instruqt/index.js b/src/components/Instruqt/index.js
index fc30760a3..a1be86703 100644
--- a/src/components/Instruqt/index.js
+++ b/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 ? (
- <>
-
- >
+ {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasDrawer ? (
+ isOpen && (
+ <>
+
+ >
+ )
) : (
<>
diff --git a/src/components/Instruqt/instruqt-context.js b/src/components/Instruqt/instruqt-context.js
index d530a0a90..a3671cd06 100644
--- a/src/components/Instruqt/instruqt-context.js
+++ b/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 {children};
+ return {children};
};
InstruqtProvider.defaultProps = {
- hasInstruqtLab: false,
+ hasLabDrawer: false,
};
export { InstruqtContext, InstruqtProvider };
diff --git a/src/components/RootProvider.js b/src/components/RootProvider.js
index b9a2f5e98..27c03785e 100644
--- a/src/components/RootProvider.js
+++ b/src/components/RootProvider.js
@@ -19,7 +19,7 @@ const RootProvider = ({
selectors,
slug,
repoBranches,
- hasInstruqtLab,
+ hasLabDrawer,
remoteMetadata,
project,
}) => {
@@ -30,7 +30,7 @@ const RootProvider = ({
-
+
{children}
diff --git a/src/layouts/index.js b/src/layouts/index.js
index 0e2211669..56f618208 100644
--- a/src/layouts/index.js
+++ b/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}
>
{!isInPresentationMode ? : }
diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
index af9a2ddf5..a09d3549b 100644
--- a/src/layouts/preview-layout.js
+++ b/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}
>
diff --git a/tests/unit/Instruqt.test.js b/tests/unit/Instruqt.test.js
index 25a6cd763..19513f52f 100644
--- a/tests/unit/Instruqt.test.js
+++ b/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();
});
});
});