From 562433470baa345a1bf4a59387c2784a26934233 Mon Sep 17 00:00:00 2001
From: rayangler <27821750+rayangler@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:32:19 -0500
Subject: [PATCH] DOP-4282: Implement container for lab drawers (#992)
---
package-lock.json | 44 +++++++++
package.json | 1 +
src/components/Instruqt/InstruqtFrame.js | 28 ++++++
src/components/Instruqt/LabDrawer.js | 121 +++++++++++++++++++++++
src/components/Instruqt/index.js | 37 +++----
tests/unit/Instruqt.test.js | 40 ++++++++
tests/unit/data/Instruqt.test.json | 21 ++++
7 files changed, 275 insertions(+), 17 deletions(-)
create mode 100644 src/components/Instruqt/InstruqtFrame.js
create mode 100644 src/components/Instruqt/LabDrawer.js
create mode 100644 tests/unit/Instruqt.test.js
create mode 100644 tests/unit/data/Instruqt.test.json
diff --git a/package-lock.json b/package-lock.json
index d2520e29e..a98c9f940 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.9.0",
+ "react-resizable": "^3.0.5",
"react-transition-group": "^4.4.1",
"readable-stream": "^4.3.0",
"realm-web": "^2.0.0",
@@ -21476,6 +21477,19 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-draggable": {
+ "version": "4.4.6",
+ "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-draggable/-/react-draggable-4.4.6.tgz",
+ "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+ "dependencies": {
+ "clsx": "^1.1.1",
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "react": ">= 16.3.0",
+ "react-dom": ">= 16.3.0"
+ }
+ },
"node_modules/react-error-overlay": {
"version": "6.0.11",
"license": "MIT"
@@ -21574,6 +21588,18 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-resizable": {
+ "version": "3.0.5",
+ "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-resizable/-/react-resizable-3.0.5.tgz",
+ "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+ "dependencies": {
+ "prop-types": "15.x",
+ "react-draggable": "^4.0.3"
+ },
+ "peerDependencies": {
+ "react": ">= 16.3"
+ }
+ },
"node_modules/react-server-dom-webpack": {
"version": "0.0.0-experimental-c8b778b7f-20220825",
"license": "MIT",
@@ -38860,6 +38886,15 @@
"scheduler": "^0.23.0"
}
},
+ "react-draggable": {
+ "version": "4.4.6",
+ "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-draggable/-/react-draggable-4.4.6.tgz",
+ "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+ "requires": {
+ "clsx": "^1.1.1",
+ "prop-types": "^15.8.1"
+ }
+ },
"react-error-overlay": {
"version": "6.0.11"
},
@@ -38932,6 +38967,15 @@
"react-refresh": {
"version": "0.14.0"
},
+ "react-resizable": {
+ "version": "3.0.5",
+ "resolved": "https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/react-resizable/-/react-resizable-3.0.5.tgz",
+ "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+ "requires": {
+ "prop-types": "15.x",
+ "react-draggable": "^4.0.3"
+ }
+ },
"react-server-dom-webpack": {
"version": "0.0.0-experimental-c8b778b7f-20220825",
"requires": {
diff --git a/package.json b/package.json
index 62c709ace..5a8cdf47b 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
"react-loadable": "^5.5.0",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.9.0",
+ "react-resizable": "^3.0.5",
"react-transition-group": "^4.4.1",
"readable-stream": "^4.3.0",
"realm-web": "^2.0.0",
diff --git a/src/components/Instruqt/InstruqtFrame.js b/src/components/Instruqt/InstruqtFrame.js
new file mode 100644
index 000000000..6a293d923
--- /dev/null
+++ b/src/components/Instruqt/InstruqtFrame.js
@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { css, cx } from '@leafygreen-ui/emotion';
+
+const iframeStyle = css`
+ border: none;
+`;
+
+const InstruqtFrame = forwardRef(({ title, height, embedValue }, ref) => {
+ const labTitle = title || 'MongoDB Interactive Lab';
+ const frameTitle = `Instruqt - ${labTitle}`;
+ const frameHeight = height || '640';
+ const frameSrc = `https://play.instruqt.com/embed${embedValue}`;
+
+ return (
+
+ );
+});
+
+export default InstruqtFrame;
diff --git a/src/components/Instruqt/LabDrawer.js b/src/components/Instruqt/LabDrawer.js
new file mode 100644
index 000000000..851e7f569
--- /dev/null
+++ b/src/components/Instruqt/LabDrawer.js
@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Resizable } from 'react-resizable';
+import { cx, css } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
+import useViewport from '../../hooks/useViewport';
+import { theme } from '../../theme/docsTheme';
+import InstruqtFrame from './InstruqtFrame';
+
+const labContainerStyle = css`
+ background-color: ${palette.gray.dark3};
+ z-index: 9999;
+ position: fixed !important;
+ bottom: 0;
+ padding-top: 21px;
+ color: ${palette.white};
+`;
+
+const handleContainerStyle = css`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+`;
+
+const handleStyle = css`
+ position: absolute;
+ border-radius: 4px;
+ cursor: ns-resize;
+ top: 10px;
+ background-color: ${palette.white};
+ width: 50px;
+ height: 4px;
+
+ @media ${theme.screenSize.upToMedium} {
+ display: none;
+ }
+`;
+
+const topContainerStyle = css`
+ margin-bottom: 11px;
+ padding-left: 17px;
+ height: 28px;
+ display: flex;
+ justify-content: center;
+
+ @media ${theme.screenSize.upToSmall} {
+ display: block;
+ }
+`;
+
+const titleStyle = css`
+ line-height: 28px;
+ width: 50vw;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: center;
+
+ @media ${theme.screenSize.upToSmall} {
+ text-align: left;
+ }
+`;
+
+const CustomResizeHandle = React.forwardRef((props, ref) => {
+ const { handleAxis, ...restProps } = props;
+ return (
+
+ );
+});
+
+const LabDrawer = ({ title, embedValue }) => {
+ const viewportSize = useViewport();
+ const labTitle = title || 'MongoDB Interactive Lab';
+
+ const defaultMeasurement = 200;
+ const defaultWidth = viewportSize.width ?? defaultMeasurement;
+ const defaultHeight = (viewportSize.height * 2) / 3 ?? defaultMeasurement;
+
+ const minHeight = 60;
+ const maxHeight = viewportSize.height ?? defaultMeasurement;
+ const [height, setHeight] = useState(defaultHeight);
+
+ const frameHeight = height - minHeight;
+
+ // Shrink height of the drawer if new max height is less than the current height
+ useEffect(() => {
+ if (maxHeight < height) {
+ setHeight(maxHeight);
+ }
+ }, [height, maxHeight]);
+
+ const handleResize = (_e, { size }) => {
+ setHeight(size.height);
+ };
+
+ return createPortal(
+ }
+ onResize={handleResize}
+ >
+ {/* Need this div with style as a wrapper to help with resizing */}
+
+ ,
+ document.body
+ );
+};
+
+export default LabDrawer;
diff --git a/src/components/Instruqt/index.js b/src/components/Instruqt/index.js
index b1b6e296f..fc30760a3 100644
--- a/src/components/Instruqt/index.js
+++ b/src/components/Instruqt/index.js
@@ -3,6 +3,8 @@ import { css } from '@emotion/react';
import IconButton from '@leafygreen-ui/icon-button';
import Icon from '@leafygreen-ui/icon';
import { theme } from '../../theme/docsTheme';
+import LabDrawer from './LabDrawer';
+import InstruqtFrame from './InstruqtFrame';
import { InstruqtContext } from './instruqt-context';
const controlsStyle = css`
@@ -17,10 +19,11 @@ const controlsStyle = css`
margin-bottom: ${theme.size.default};
`;
-const Instruqt = ({ nodeData: { argument }, nodeData }) => {
- const embedValue = argument[0].value;
+const Instruqt = ({ nodeData }) => {
+ const embedValue = nodeData?.argument[0]?.value;
+ const title = nodeData?.options?.title;
const iframeRef = useRef(null);
- const { setIsOpen } = useContext(InstruqtContext);
+ const { setIsOpen, hasLab } = useContext(InstruqtContext);
const onFullScreen = useCallback(() => {
if (iframeRef) {
@@ -44,20 +47,20 @@ const Instruqt = ({ nodeData: { argument }, nodeData }) => {
return (
<>
-
-
-
-
-
-
+ {process.env.GATSBY_FEATURE_LAB_DRAWER === 'true' && hasLab ? (
+ <>
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ )}
);
};
diff --git a/tests/unit/Instruqt.test.js b/tests/unit/Instruqt.test.js
new file mode 100644
index 000000000..25a6cd763
--- /dev/null
+++ b/tests/unit/Instruqt.test.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Instruqt from '../../src/components/Instruqt';
+import { InstruqtProvider } from '../../src/components/Instruqt/instruqt-context';
+import mockData from './data/Instruqt.test.json';
+
+const renderComponent = (nodeData, hasLabDrawer = false) => {
+ return render(
+
+
+
+ );
+};
+
+describe('Instruqt', () => {
+ beforeEach(() => {
+ process.env.GATSBY_FEATURE_LAB_DRAWER = false;
+ });
+
+ it('renders null when directive argument does not exist', () => {
+ const wrapper = renderComponent(mockData.noArgument);
+ expect(wrapper.queryByTitle('Instruqt', { exact: false })).toBeFalsy();
+ });
+
+ it('renders as embedded content', () => {
+ const wrapper = renderComponent(mockData.example);
+ expect(wrapper.queryByTitle('Instruqt', { exact: false })).toBeTruthy();
+ });
+
+ describe('lab drawer', () => {
+ it('renders in a drawer', () => {
+ // This may be removed as the feature work is complete
+ process.env.GATSBY_FEATURE_LAB_DRAWER = true;
+ const hasLabDrawer = true;
+ const wrapper = renderComponent(mockData.example, hasLabDrawer);
+ expect(wrapper.queryByTitle('Instruqt', { exact: false })).toBeTruthy();
+ expect(wrapper.queryByText('MongoDB Interactive Lab')).toBeTruthy();
+ });
+ });
+});
diff --git a/tests/unit/data/Instruqt.test.json b/tests/unit/data/Instruqt.test.json
new file mode 100644
index 000000000..8717e15c7
--- /dev/null
+++ b/tests/unit/data/Instruqt.test.json
@@ -0,0 +1,21 @@
+{
+ "noArgument": {
+ "type": "directive",
+ "children": [],
+ "domain": "mongodb",
+ "name": "instruqt",
+ "argument": []
+ },
+ "example": {
+ "type": "directive",
+ "children": [],
+ "domain": "mongodb",
+ "name": "instruqt",
+ "argument": [
+ {
+ "type": "text",
+ "value": "/mongodb-docs/tracks/getting-started-with-mongodb?token=em_j_d_wUT93QTFvgsZ"
+ }
+ ]
+ }
+}
\ No newline at end of file