Merge branch 'develop' into chore/react-router-v4

Author: lindapaiste

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": ["airbnb", "prettier"],
+	"extends": ["airbnb", "prettier", "plugin:storybook/recommended"],
 	"parser": "@babel/eslint-parser",
 	"env": {
     "browser": true,

.storybook/main.js

@@ -1,29 +1,35 @@
-const path = require('path');
-
-module.exports = {
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
   stories: ['../client/**/*.stories.(jsx|mdx)'],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-docs',
-    '@storybook/addon-knobs',
     '@storybook/addon-links',
-    'storybook-addon-theme-playground/dist/register'
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
   ],
-  webpackFinal: async config => {
-    // do mutation to the config
-
-    const rules = config.module.rules;
-
-    // modify storybook's file-loader rule to avoid conflicts with svgr
-    const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
-    fileLoaderRule.exclude = path.resolve(__dirname, '../client');
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  async webpackFinal(config) {
+    // https://storybook.js.org/docs/react/builders/webpack
+    // this modifies the existing image rule to exclude .svg files
+    // since we want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
+    imageRule.exclude = /\.svg$/
 
-    // use svgr for svg files
-    rules.push({
+    // configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
       test: /\.svg$/,
-      use: ["@svgr/webpack"],
+      use: ['@svgr/webpack']
     })
 
-    return config;
+    return config
   },
 };
+
+export default config;
+
+

.storybook/preview.js

@@ -1,31 +1,22 @@
 import React from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
-import { withKnobs } from "@storybook/addon-knobs";
-import { withThemePlayground } from 'storybook-addon-theme-playground';
-import { ThemeProvider } from "styled-components";
+import { Provider } from 'react-redux';
 
-import theme, { Theme } from '../client/theme';
+import ThemeProvider from '../client/modules/App/components/ThemeProvider';
+import configureStore from '../client/store';
+import '../client/i18n-test';
+import '../client/styles/build/css/main.css'
 
-addDecorator(withKnobs);
+const initialState = window.__INITIAL_STATE__;
 
-const themeConfigs = Object.values(Theme).map(
-  name => {
-    return { name, theme: theme[name] };
-  }
-);
+const store = configureStore(initialState);
 
-addDecorator(withThemePlayground({
-  theme: themeConfigs,
-  provider: ThemeProvider
-}));
+export const decorators = [
+  (Story) => (
+    <Provider store={store}>
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    </Provider>
+  ),
+]
 
-addParameters({
-  options: {
-    /**
-     * display the top-level grouping as a "root" in the sidebar
-     */
-    showRoots: true,
-  },
-})
-
-// addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>);

client/common/Button.stories.jsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
 
 import Button from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
   title: 'Common/Button',
-  component: Button
+  component: Button,
+  args: {
+    children: 'this is the button',
+    label: 'submit',
+    disabled: false
+  }
 };
 
-export const AllFeatures = () => (
-  <Button
-    disabled={boolean('disabled', false)}
-    type="submit"
-    label={text('label', 'submit')}
-  >
-    {text('children', 'this is the button')}
+export const AllFeatures = (args) => (
+  <Button disabled={args.disabled} type="submit" label={args.label}>
+    {args.children}
   </Button>
 );
 

client/common/icons.stories.jsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
 
 import * as icons from './icons';
 
 export default {
   title: 'Common/Icons',
-  component: icons
+  component: icons,
+  argTypes: {
+    variant: {
+      options: Object.keys(icons),
+      control: { type: 'select' },
+      default: icons.CircleFolderIcon
+    }
+  }
 };
 
-export const AllIcons = () => {
-  const names = Object.keys(icons);
-
-  const SelectedIcon = icons[select('name', names, names[0])];
+export const Icons = (args) => {
+  const SelectedIcon = icons[args.variant || 'CircleInfoIcon'];
   return <SelectedIcon />;
 };

client/modules/IDE/components/ErrorModal.jsx

@@ -69,9 +69,14 @@ const ErrorModal = ({ type, service, closeModal }) => {
 };
 
 ErrorModal.propTypes = {
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([
+    'forceAuthentication',
+    'staleSession',
+    'staleProject',
+    'oauthError'
+  ]).isRequired,
   closeModal: PropTypes.func.isRequired,
-  service: PropTypes.string
+  service: PropTypes.oneOf(['google', 'github'])
 };
 
 ErrorModal.defaultProps = {

client/modules/IDE/components/ErrorModal.stories.jsx

@@ -0,0 +1,30 @@
+import ErrorModal from './ErrorModal';
+
+export default {
+  title: 'IDE/ErrorModal',
+  component: ErrorModal,
+  argTypes: {
+    closeModal: { action: 'closed' }
+  }
+};
+
+export const ForceAuthenticationErrorModal = {
+  args: {
+    type: 'forceAuthentication'
+  }
+};
+export const StaleSessionErrorModal = {
+  args: {
+    type: 'staleSession'
+  }
+};
+export const StaleProjectErrorModal = {
+  args: {
+    type: 'staleProject'
+  }
+};
+export const OauthErrorModal = {
+  args: {
+    type: 'oauthError'
+  }
+};

client/modules/IDE/components/ErrorModal.unit.test.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { render, screen } from '../../../test-utils';
+
+import ErrorModal from './ErrorModal';
+
+jest.mock('../../../i18n');
+
+describe('<ErrorModal />', () => {
+  it('renders type forceAuthentication', () => {
+    render(<ErrorModal type="forceAuthentication" closeModal={jest.fn()} />);
+
+    expect(screen.getByText('Login')).toBeVisible();
+    expect(screen.getByText('Sign Up')).toBeVisible();
+  });
+
+  it('renders type staleSession', () => {
+    render(<ErrorModal type="staleSession" closeModal={jest.fn()} />);
+
+    expect(screen.getByText('log in')).toBeVisible();
+  });
+
+  it('renders type staleProject', () => {
+    render(<ErrorModal type="staleProject" closeModal={jest.fn()} />);
+
+    expect(
+      screen.getByText(
+        'The project you have attempted to save has been saved from another window',
+        { exact: false }
+      )
+    ).toBeVisible();
+  });
+
+  it('renders type oauthError with service google', () => {
+    render(
+      <ErrorModal type="oauthError" service="google" closeModal={jest.fn()} />
+    );
+
+    expect(
+      screen.getByText('There was a problem linking your Google account', {
+        exact: false
+      })
+    ).toBeVisible();
+  });
+
+  it('renders type oauthError with service github', () => {
+    render(
+      <ErrorModal type="oauthError" service="github" closeModal={jest.fn()} />
+    );
+
+    expect(
+      screen.getByText('There was a problem linking your GitHub account', {
+        exact: false
+      })
+    ).toBeVisible();
+  });
+});

client/modules/IDE/components/SketchList.jsx

@@ -18,11 +18,14 @@ import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 import Overlay from '../../App/components/Overlay';
 import AddToCollectionList from './AddToCollectionList';
+import getConfig from '../../../utils/getConfig';
 
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
+const ROOT_URL = getConfig('API_URL');
+
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -140,7 +143,13 @@ class SketchListRowBase extends React.Component {
   };
 
   handleSketchDownload = () => {
-    this.props.exportProjectAsZip(this.props.sketch.id);
+    const { sketch } = this.props;
+    const downloadLink = document.createElement('a');
+    downloadLink.href = `${ROOT_URL}/projects/${sketch.id}/zip`;
+    downloadLink.download = `${sketch.name}.zip`;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
   };
 
   handleSketchDuplicate = () => {
@@ -332,7 +341,6 @@ SketchListRowBase.propTypes = {
   deleteProject: PropTypes.func.isRequired,
   showShareModal: PropTypes.func.isRequired,
   cloneProject: PropTypes.func.isRequired,
-  exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
   onAddToCollection: PropTypes.func.isRequired,
   mobile: PropTypes.bool,

client/styles/components/_account.scss

@@ -3,7 +3,7 @@
     color: getThemifyVariable('primary-text-color');
     background-color: getThemifyVariable('background-color');
   }
-  height: 100%;
+  min-height: 100%;
 }
 
 .account-settings {