Merge branch 'develop' into orphaned-assets

Author: yugalkaushik

client/jest.setup.js

@@ -5,3 +5,11 @@ import 'regenerator-runtime/runtime';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
+
+global.ResizeObserver = class {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+};

client/modules/IDE/components/PreviewFrame.jsx

@@ -1,18 +1,18 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { getConfig } from '../../../utils/getConfig';
 import { registerFrame } from '../../../utils/dispatcher';
 
 const Frame = styled.iframe`
-  min-height: 100%;
-  min-width: 100%;
+  display: block;
   position: ${(props) => (props.fullView ? 'relative' : 'absolute')};
   border-width: 0;
 `;
 
 function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
+  const [frameSize, setFrameSize] = useState(null);
   const previewUrl = getConfig('PREVIEW_URL');
   useEffect(() => {
     const unsubscribe = registerFrame(iframe.current.contentWindow, previewUrl);
@@ -21,6 +21,26 @@ function PreviewFrame({ fullView, isOverlayVisible }) {
     };
   });
 
+  useEffect(() => {
+    const parent = iframe.current?.parentElement;
+    if (!parent) {
+      return () => {};
+    }
+    const updateSize = () => {
+      const { width, height } = parent.getBoundingClientRect();
+      setFrameSize({
+        width: Math.floor(width),
+        height: Math.floor(height)
+      });
+    };
+    updateSize();
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(parent);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   const frameUrl = previewUrl;
   const sandboxAttributes = `allow-forms allow-modals allow-pointer-lock allow-popups 
     allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads`;
@@ -45,6 +65,11 @@ function PreviewFrame({ fullView, isOverlayVisible }) {
         frameBorder="0"
         ref={iframe}
         fullView={fullView}
+        style={
+          frameSize
+            ? { width: frameSize.width, height: frameSize.height }
+            : undefined
+        }
       />
     </>
   );

client/styles/abstracts/_variables.scss

@@ -108,7 +108,8 @@ $themes: (
     preferences-warning-color: $p5js-pink,
     primary-text-color: $dark,
     progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-background-color: $light,
+    progress-bar-border-color: $middle-gray,
     search-background-color: $lightest,
     search-clear-background-color: $light,
     search-hover-background-color: $medium-dark,
@@ -205,7 +206,8 @@ $themes: (
     preferences-warning-color: $yellow,
     primary-text-color: $lightest,
     progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-background-color: $darker,
+    progress-bar-border-color: $middle-gray,
     search-background-color: $darker,
     search-clear-background-color: $medium-dark,
     search-hover-background-color: $p5js-pink,
@@ -300,8 +302,9 @@ $themes: (
     preferences-button-background-color: $medium-light,
     preferences-warning-color: $yellow,
     primary-text-color: $lightest,
-    progress-bar-active-color: $p5js-active-pink,
-    progress-bar-background-color: $middle-gray,
+    progress-bar-active-color: $yellow,
+    progress-bar-background-color: $darker,
+    progress-bar-border-color: $middle-light,
     search-background-color: $darker,
     search-clear-background-color: $medium-dark,
     search-hover-background-color: $yellow,

client/styles/components/_asset-size.scss

@@ -20,6 +20,7 @@
 
   @include themify() {
     background-color: getThemifyVariable('progress-bar-background-color');
+    border-color: getThemifyVariable('progress-bar-border-color');
   }
 }
 

server/server.js

@@ -83,6 +83,8 @@ mongoose.connect(mongoConnectionString, {
   socketTimeoutMS: 45000 // 45 seconds timeout
 });
 
+const isProduction = process.env.NODE_ENV === 'production';
+
 app.use(
   session({
     resave: true,
@@ -92,7 +94,7 @@ app.use(
     name: 'sessionId',
     cookie: {
       httpOnly: true,
-      secure: false,
+      secure: isProduction,
       maxAge: 1000 * 60 * 60 * 24 * 28 // 4 weeks in milliseconds
     },
     store: MongoStore.create({