meta: Update import from Trello

Closes #27, closes #105

.dockerignore

@@ -1,11 +1,29 @@
-*/node_modules
-*/.gitignore
 */README.md
+*/.gitignore
+*/node_modules
 
 **/.DS_Store
-**/.gitkeep
+
+server/**/.gitkeep
+
+server/.env
+server/.editorconfig
+server/.eslintignore
+server/.npmrc
+server/test
+server/logs
+server/.tmp
+
+server/views/*
 
 server/public/*
-server/views/*
+!server/public/user-avatars
-server/logs
+server/public/user-avatars/*
+!server/public/project-background-images
+server/public/project-background-images/*
+
+server/private/*
+!server/private/attachments
+server/private/attachments/*
+
 client/build

.github/workflows/build-and-push-docker-base-image.yml

@@ -9,7 +9,7 @@ on:
   workflow_dispatch:
 
 env:
-  ALPINE_VERSION: 3.15
+  ALPINE_VERSION: 3.16
 
 jobs:
   build-and-push-docker-base-image:

.gitignore

@@ -3,3 +3,10 @@ docker-compose.override.yml
 
 .idea
 .DS_Store
+
+# Prevent another lockfile than package-lock.json (npm) from being created
+# If some case you are using pnpm or yarn, don't forget to generate npm lockfile
+# before commiting your code by running:
+# `npm i --package-lock-only`
+pnpm-lock.yaml
+yarn.lock

Dockerfile

@@ -1,32 +1,40 @@
-FROM node:lts AS client-builder
+FROM ghcr.io/plankanban/planka:base-latest as server-dependencies
 
 WORKDIR /app
 
-COPY client/package.json client/package-lock.json ./
+COPY server/package.json server/package-lock.json .
 
 RUN npm install npm@latest --global \
-  && npm install
+  && npm clean-install --omit=dev
+
+FROM node:lts AS client
+
+WORKDIR /app
+
+COPY client/package.json client/package-lock.json .
+
+RUN npm install npm@latest --global \
+  && npm clean-install --omit=dev
 
 COPY client .
-RUN npm run build
+RUN DISABLE_ESLINT_PLUGIN=true npm run build
 
 FROM ghcr.io/plankanban/planka:base-latest
 
+RUN apk del vips-dependencies --purge
+
+USER node
 WORKDIR /app
 
-COPY server/.npmrc server/package.json server/package-lock.json ./
+COPY --chown=node:node docker-start.sh start.sh
+COPY --chown=node:node server .
 
-RUN npm install npm@latest --global \
+RUN mv .env.sample .env
-  && npm install --production \
-  && apk del vips-dependencies --purge
 
-COPY docker-start.sh start.sh
+COPY --from=server-dependencies --chown=node:node /app/node_modules node_modules
-COPY server .
 
-RUN cp .env.sample .env
+COPY --from=client --chown=node:node /app/build public
-
+COPY --from=client --chown=node:node /app/build/index.html views/index.ejs
-COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views/index.ejs
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images

Dockerfile.base

@@ -1,7 +1,7 @@
 FROM node:lts-alpine
 
-ARG ALPINE_VERSION=3.15
+ARG ALPINE_VERSION=3.16
-ARG VIPS_VERSION=8.12.2
+ARG VIPS_VERSION=8.13.3
 
 RUN apk -U upgrade \
   && apk add \

README.md

@@ -21,9 +21,14 @@ A Trello-like kanban board built with React and Redux.
 
 ## Deploy
 
-### Docker Compose
+There are 2 types of installation:
+1. [Dockerized](#1-docker-compose)
+2. [Without Docker](#2-without-docker)
 
-[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://hub.docker.com/r/meltyshev/planka)
+
+### 1. Docker Compose
+
+[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://github.com/plankanban/planka/pkgs/container/planka)
 
 - Make sure you have [Docker](https://docs.docker.com/install/) and [Docker Compose](https://docs.docker.com/compose/install/) installed and operational.
 - Create `docker-compose.yml` based on [the example](https://raw.githubusercontent.com/plankanban/planka/master/docker-compose.yml). This is the ONLY file you will need. You can create this file on your own machine by copy and pasting the content.
@@ -44,9 +49,146 @@ docker-compose up -d
 
 Demo user: demo@demo.demo demo
 
+### 2. Without Docker
+
+Installing without Docker is a bit more complicated, here's what you need to do:
+
+1. Clone this repository into a directory of your choice. (e.g. `/var/www/planka`)
+
+```bash
+mkdir -p /var/www/planka
+cd /var/www/planka
+git clone https://github.com/plankanban/planka.git .
+```
+
+2. Install dependencies for client and build it.
+
+```bash
+cd client
+npm install
+npm run build
+```
+
+**Note**: You can use `yarn` or `pnpm` instead of `npm`.
+
+3. Copy the `build` directory to the `server/public` directory.
+
+```bash
+cp -r build ../server/public
+cp build/index.html ../server/views/index.ejs
+```
+
+4. Install dependencies for server.
+
+```bash
+cd ../server
+npm install
+```
+
+5. Configure environment variables.
+
+```bash
+cp .env.sample .env
+
+# Edit .env file (You could use nano, vim, etc.)
+nano .env
+```
+
+**Note**: Before continuing, make sure you have your selected database created and running.
+
+6. Copy start script from the root directory to the `server` directory.
+
+```bash
+cp ../docker-start.sh start.sh
+```
+
+7. Start the server.
+
+```bash
+./start.sh
+```
+
+**Note**: You can use `pm2` or `systemd` to run the server in the background.
+
+## Additional information
+
+### Nginx configuration
+
+Here is an example of Nginx configuration for Planka, make sure to replace `<domain>` with your domain name, and make sure to configure the SSL.
+
+```nginx
+upstream planka {
+   server localhost:1337;
+   keepalive 32;
+}
+
+server {
+    listen 443 ssl http2;
+    listen [::]:443 ssl http2;
+    server_name <domain>;
+
+    access_log /var/log/nginx/planka-access.log;
+    error_log  /var/log/nginx/planka-error.log error;
+
+    # SSL Configuration - Replace the example <domain> with your domain
+    ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/<domain>/privkey.pem;
+    ssl_session_cache shared:SSL:10m;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";
+    ssl_prefer_server_ciphers on;
+
+    client_max_body_size 120M;
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Max-Age 3600;
+    add_header Access-Control-Expose-Headers Content-Length;
+    add_header Access-Control-Allow-Headers Range;
+
+    # Make sure to allow socket.io connections
+    location ~* \.io {
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        client_max_body_size 50M;
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_buffers 256 16k;
+        proxy_buffer_size 16k;
+        client_body_timeout 60;
+        send_timeout 300;
+        lingering_timeout 5;
+        proxy_connect_timeout 1d;
+        proxy_send_timeout 1d;
+        proxy_read_timeout 1d;
+        proxy_pass http://planka;
+    }
+
+    location / {
+        client_max_body_size 50M;
+        proxy_set_header Connection "";
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_buffers 256 16k;
+        proxy_buffer_size 16k;
+        proxy_read_timeout 600s;
+        proxy_cache_revalidate on;
+        proxy_cache_min_uses 2;
+        proxy_cache_use_stale timeout;
+        proxy_cache_lock on;
+        proxy_http_version 1.1;
+        proxy_pass http://planka;
+    }
+}
+```
+
 ### Logging
 
-Planka currently allows you to expose the applciation's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
+Planka currently allows you to expose the application's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
 
 To expose the logfile director to the host machine, add the item `./logs/:/app/logs/` under `services.planka.volumes`.
 
@@ -117,6 +259,10 @@ Restart the fail2ban service. You can check the status of your Planka jail by ru
 fail2ban-client status planka
 ```
 
+### Import from Trello
+
+It's already available in Planka, or you can also use the great tool [trello2planka](https://github.com/christophenne/trello2planka) to do the import.
+
 ## Development
 
 Clone the repository and install dependencies:

client/package.json

@@ -34,15 +34,13 @@
       },
       "requireConfigFile": false
     },
-    "plugins": [
-      "prettier"
-    ],
     "extends": [
       "airbnb",
       "airbnb/hooks",
-      "plugin:prettier/recommended"
+      "../package.json"
     ],
     "rules": {
+      "no-unused-vars": "warn",
       "import/no-extraneous-dependencies": [
         "error",
         {
@@ -51,76 +49,66 @@
             "**/*.test.js"
           ]
         }
-      ],
-      "prettier/prettier": [
-        "error",
-        {
-          "printWidth": 100,
-          "singleQuote": true,
-          "trailingComma": "all"
-        }
       ]
     }
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
-    "connected-react-router": "^6.9.3",
+    "date-fns": "^2.29.3",
-    "date-fns": "^2.29.1",
     "dequal": "^2.0.3",
-    "history": "^4.10.1",
+    "easymde": "^2.18.0",
-    "i18next": "^21.8.14",
+    "history": "^5.3.0",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
     "initials": "^3.1.2",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "node-sass": "^7.0.1",
+    "node-sass": "^8.0.0",
-    "photoswipe": "^5.3.0",
+    "photoswipe": "^5.3.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-app-rewired": "^2.2.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.2",
+    "react-dropzone": "^14.2.3",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^12.0.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.3",
-    "react-photoswipe-gallery": "^2.2.1",
+    "react-photoswipe-gallery": "^2.2.2",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.0.5",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
-    "react-textarea-autosize": "^8.3.4",
+    "react-simplemde-editor": "^5.2.0",
+    "react-textarea-autosize": "^8.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
-    "redux-saga": "^1.1.3",
+    "redux-saga": "^1.2.1",
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
-    "reselect": "^4.1.6",
+    "reselect": "^4.1.7",
     "sails.io.js": "^1.2.1",
     "semantic-ui-react": "^2.1.3",
-    "socket.io-client": "^2.3.1",
+    "socket.io-client": "^2.5.0",
     "validator": "^13.7.0",
     "whatwg-fetch": "^3.6.2",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-preset-airbnb": "^5.0.0",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
-    "enzyme": "^3.11.0",
+    "eslint": "^8.28.0",
-    "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^18.2.0"
-    "prettier": "2.7.1",
-    "react-app-rewired": "^2.2.1",
-    "react-test-renderer": "^17.0.2"
   }
 }

client/src/api/boards.js

@@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';
 
@@ -7,6 +8,9 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
   socket.post(`/projects/${projectId}/boards`, data, headers);
 
+const createBoardWithImport = (projectId, data, requestId, headers) =>
+  http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
+
 const getBoard = (id, headers) =>
   socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
     ...body,
@@ -23,6 +27,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
 
 export default {
   createBoard,
+  createBoardWithImport,
   getBoard,
   updateBoard,
   deleteBoard,

client/src/components/BoardActions/BoardActions.jsx

@@ -14,6 +14,7 @@ const BoardActions = React.memo(
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit,
     canEditMemberships,
     onMembershipCreate,
     onMembershipUpdate,
@@ -27,6 +28,7 @@ const BoardActions = React.memo(
     onLabelDelete,
   }) => {
     return (
+      <div className={styles.wrapper}>
         <div className={styles.actions}>
           <div className={styles.action}>
             <Memberships
@@ -45,6 +47,7 @@ const BoardActions = React.memo(
               labels={filterLabels}
               allBoardMemberships={memberships}
               allLabels={labels}
+              canEdit={canEdit}
               onUserAdd={onUserToFilterAdd}
               onUserRemove={onUserFromFilterRemove}
               onLabelAdd={onLabelToFilterAdd}
@@ -55,6 +58,7 @@ const BoardActions = React.memo(
             />
           </div>
         </div>
+      </div>
     );
   },
 );
@@ -67,6 +71,7 @@ BoardActions.propTypes = {
   filterLabels: PropTypes.array.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
   onMembershipUpdate: PropTypes.func.isRequired,

client/src/components/BoardActions/BoardActions.module.scss

@@ -1,5 +1,6 @@
 :global(#app) {
   .action {
+    flex: 0 0 auto;
     margin-right: 20px;
   }
 
@@ -8,4 +9,15 @@
     display: flex;
     margin: 20px 20px;
   }
+
+  .wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

client/src/components/BoardActions/Filters.jsx

@@ -15,6 +15,7 @@ const Filters = React.memo(
     labels,
     allBoardMemberships,
     allLabels,
+    canEdit,
     onUserAdd,
     onUserRemove,
     onLabelAdd,
@@ -74,6 +75,7 @@ const Filters = React.memo(
             title={t('common.filterByLabels', {
               context: 'title',
             })}
+            canEdit={canEdit}
             onSelect={onLabelAdd}
             onDeselect={onLabelRemove}
             onCreate={onLabelCreate}
@@ -108,6 +110,7 @@ Filters.propTypes = {
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,

client/src/components/Boards/AddPopup.jsx

@@ -1,70 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Button, Form } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
-import { Input, Popup } from '../../lib/custom-ui';
-
-import { useForm } from '../../hooks';
-
-import styles from './AddPopup.module.scss';
-
-const AddStep = React.memo(({ onCreate, onClose }) => {
-  const [t] = useTranslation();
-
-  const [data, handleFieldChange] = useForm({
-    name: '',
-  });
-
-  const nameField = useRef(null);
-
-  const handleSubmit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      type: 'kanban',
-      name: data.name.trim(),
-    };
-
-    if (!cleanData.name) {
-      nameField.current.select();
-      return;
-    }
-
-    onCreate(cleanData);
-    onClose();
-  }, [onCreate, onClose, data]);
-
-  useEffect(() => {
-    nameField.current.focus();
-  }, []);
-
-  return (
-    <>
-      <Popup.Header>
-        {t('common.createBoard', {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <Form onSubmit={handleSubmit}>
-          <Input
-            fluid
-            ref={nameField}
-            name="name"
-            value={data.name}
-            className={styles.field}
-            onChange={handleFieldChange}
-          />
-          <Button positive content={t('action.createBoard')} />
-        </Form>
-      </Popup.Content>
-    </>
-  );
-});
-
-AddStep.propTypes = {
-  onCreate: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default withPopup(AddStep);

client/src/components/Boards/AddPopup.module.scss

@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}

client/src/components/Boards/AddPopup/AddPopup.jsx

@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Icon } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import { useForm, useSteps } from '../../../hooks';
+import ImportStep from './ImportStep';
+
+import styles from './AddPopup.module.scss';
+
+const StepTypes = {
+  IMPORT: 'IMPORT',
+};
+
+const AddStep = React.memo(({ onCreate, onClose }) => {
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm({
+    name: '',
+    import: null,
+  });
+
+  const [step, openStep, handleBack] = useSteps();
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const nameField = useRef(null);
+
+  const handleImportSelect = useCallback(
+    (nextImport) => {
+      setData((prevData) => ({
+        ...prevData,
+        import: nextImport,
+      }));
+    },
+    [setData],
+  );
+
+  const handleImportBack = useCallback(() => {
+    handleBack();
+    focusNameField();
+  }, [handleBack, focusNameField]);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      type: 'kanban',
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameField.current.select();
+      return;
+    }
+
+    onCreate(cleanData);
+    onClose();
+  }, [onClose, data, onCreate]);
+
+  const handleImportClick = useCallback(() => {
+    openStep(StepTypes.IMPORT);
+  }, [openStep]);
+
+  useEffect(() => {
+    nameField.current.focus();
+  }, []);
+
+  useDidUpdate(() => {
+    nameField.current.focus();
+  }, [focusNameFieldState]);
+
+  if (step && step.type === StepTypes.IMPORT) {
+    return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
+  }
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.createBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <Input
+            fluid
+            ref={nameField}
+            name="name"
+            value={data.name}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <div className={styles.controls}>
+            <Button positive content={t('action.createBoard')} className={styles.createButton} />
+            <Button type="button" className={styles.importButton} onClick={handleImportClick}>
+              <Icon
+                name={data.import ? data.import.type : 'arrow down'}
+                className={styles.importButtonIcon}
+              />
+              {data.import ? data.import.file.name : t('action.import')}
+            </Button>
+          </div>
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(AddStep);

client/src/components/Boards/AddPopup/AddPopup.module.scss

@@ -0,0 +1,42 @@
+:global(#app) {
+  .controls {
+    display: flex;
+    max-width: 280px;
+
+    @media only screen and (max-width: 767px) {
+      max-width: 226px;
+    }
+  }
+
+  .createButton {
+    white-space: nowrap;
+  }
+
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .importButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-left: auto;
+    margin-right: 0;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    transition: none;
+    white-space: nowrap;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .importButtonIcon {
+    text-decoration: none;
+  }
+}

client/src/components/Boards/AddPopup/ImportStep.jsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
+
+import styles from './ImportStep.module.scss';
+
+const ImportStep = React.memo(({ onSelect, onBack }) => {
+  const [t] = useTranslation();
+
+  const handleFileSelect = useCallback(
+    (type, file) => {
+      onSelect({
+        type,
+        file,
+      });
+
+      onBack();
+    },
+    [onSelect, onBack],
+  );
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.importBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <FilePicker onSelect={(file) => handleFileSelect('trello', file)} accept=".json">
+          <Button
+            fluid
+            type="button"
+            icon="trello"
+            content={t('common.fromTrello')}
+            className={styles.button}
+          />
+        </FilePicker>
+      </Popup.Content>
+    </>
+  );
+});
+
+ImportStep.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default ImportStep;

client/src/components/Boards/AddPopup/ImportStep.module.scss

@@ -0,0 +1,17 @@
+:global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+}

client/src/components/Boards/AddPopup/index.js

@@ -0,0 +1,3 @@
+import AddPopup from './AddPopup';
+
+export default AddPopup;

client/src/components/CardModal/AttachmentAddZone/AttachmentAddZone.module.scss

@@ -10,7 +10,7 @@
     position: absolute;
     text-align: center;
     width: 100%;
-    z-index: 2000;
+    z-index: 2001;
   }
 
   .wrapper {

client/src/components/CardModal/Attachments/Item.module.scss

@@ -29,7 +29,6 @@
     padding: 6px 32px 6px 128px;
     margin: 0;
     min-height: 80px;
-    z-index: 0;
   }
 
   .extension {
@@ -95,7 +94,6 @@
     text-decoration: none;
     top: 50%;
     width: 112px;
-    z-index: 1;
   }
 
   .thumbnailLabel {

client/src/components/CardModal/DescriptionEdit.jsx

@@ -1,19 +1,15 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Form } from 'semantic-ui-react';
-import { Button, Form, TextArea } from 'semantic-ui-react';
+import SimpleMDE from 'react-simplemde-editor';
-
-import { useClosableForm, useField } from '../../hooks';
 
 import styles from './DescriptionEdit.module.scss';
 
 const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
-  const [value, handleFieldChange, setValue] = useField(null);
+  const [value, setValue] = useState(null);
-
-  const field = useRef(null);
 
   const open = useCallback(() => {
     setIsOpened(true);
@@ -55,20 +51,37 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     [close],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    close,
-    isOpened,
-  );
-
   const handleSubmit = useCallback(() => {
     close();
   }, [close]);
 
-  useEffect(() => {
+  const mdEditorOptions = useMemo(
-    if (isOpened) {
+    () => ({
-      field.current.ref.current.focus();
+      autofocus: true,
-    }
+      spellChecker: false,
-  }, [isOpened]);
+      status: false,
+      toolbar: [
+        'bold',
+        'italic',
+        'heading',
+        'strikethrough',
+        '|',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        'table',
+        '|',
+        'link',
+        'image',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'guide',
+      ],
+    }),
+    [],
+  );
 
   if (!isOpened) {
     return React.cloneElement(children, {
@@ -78,26 +91,17 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   return (
     <Form onSubmit={handleSubmit}>
-      <TextArea
+      <SimpleMDE
-        ref={field}
-        as={TextareaAutosize}
         value={value}
+        options={mdEditorOptions}
         placeholder={t('common.enterDescription')}
-        minRows={3}
-        spellCheck={false}
         className={styles.field}
         onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
+        onChange={setValue}
-        onBlur={handleFieldBlur}
       />
       <div className={styles.controls}>
         {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-        <Button
+        <Button positive content={t('action.save')} />
-          positive
-          content={t('action.save')}
-          onMouseOver={handleControlMouseOver}
-          onMouseOut={handleControlMouseOut}
-        />
       </div>
     </Form>
   );

client/src/components/CardModal/DescriptionEdit.module.scss

@@ -6,15 +6,12 @@
 
   .field {
     background: #fff;
-    border: 1px solid rgba(9, 30, 66, 0.13);
-    border-radius: 3px;
     color: #17394d;
     display: block;
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 4px;
     overflow: hidden;
-    padding: 8px 12px;
     resize: none;
 
     &:focus {

client/src/components/Fixed/Fixed.module.scss

@@ -2,5 +2,6 @@
   .wrapper {
     position: fixed;
     width: 100%;
+    z-index: 1;
   }
 }

client/src/components/Header/Header.module.scss

@@ -7,7 +7,8 @@
       background: none;
     }
 
-    &:active, &:hover {
+    &:active,
+    &:hover {
       background: transparent;
       color: rgba(255, 255, 255, 0.9);
     }
@@ -42,7 +43,6 @@
     height: 50px;
     margin: 0;
     width: 100%;
-    z-index: 1;
   }
 
   .notification {

client/src/components/Header/NotificationsPopup.jsx

@@ -1,3 +1,4 @@
+import truncate from 'lodash/truncate';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation, Trans } from 'react-i18next';
@@ -47,23 +48,26 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
               {activity.data.toList.name}
             </Trans>
           );
-        case ActivityTypes.COMMENT_CARD:
+        case ActivityTypes.COMMENT_CARD: {
+          const commentText = truncate(activity.data.text);
+
           return (
             <Trans
               i18nKey="common.userLeftNewCommentToCard"
               values={{
                 user: activity.user.name,
-                comment: activity.data.text,
+                comment: commentText,
                 card: card.name,
               }}
             >
               {activity.user.name}
-              {` left a new comment «${activity.data.text}» to `}
+              {` left a new comment «${commentText}» to `}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
             </Trans>
           );
+        }
         default:
       }
 
@@ -80,9 +84,10 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
         })}
       </Popup.Header>
       <Popup.Content>
-        {items.length > 0
+        {items.length > 0 ? (
-          ? items.map((item) => (
+          <div className={styles.wrapper}>
-              <div key={item.id} className={styles.wrapper}>
+            {items.map((item) => (
+              <div key={item.id} className={styles.item}>
                 {item.card && item.activity ? (
                   <>
                     <User
@@ -90,20 +95,23 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
                       avatarUrl={item.activity.user.avatarUrl}
                       size="large"
                     />
-                    <span className={styles.content}>{renderItemContent(item)}</span>
+                    <span className={styles.itemContent}>{renderItemContent(item)}</span>
                   </>
                 ) : (
-                  <div className={styles.deletedContent}>{t('common.cardOrActionAreDeleted')}</div>
+                  <div className={styles.itemDeleted}>{t('common.cardOrActionAreDeleted')}</div>
                 )}
                 <Button
                   type="button"
-                  icon="close"
+                  icon="trash alternate outline"
-                  className={styles.button}
+                  className={styles.itemButton}
                   onClick={() => handleDelete(item.id)}
                 />
               </div>
-            ))
+            ))}
-          : t('common.noUnreadNotifications')}
+          </div>
+        ) : (
+          t('common.noUnreadNotifications')
+        )}
       </Popup.Content>
     </>
   );

client/src/components/Header/NotificationsPopup.module.scss

@@ -1,5 +1,13 @@
 :global(#app) {
-  .button {
+  .item {
+    padding: 12px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+
+  .itemButton {
     background: transparent;
     box-shadow: none;
     float: right;
@@ -7,7 +15,7 @@
     line-height: 20px;
     margin: 0;
     min-height: auto;
-    padding: 5px 0;
+    padding: 0;
     transition: background 0.3s ease;
     width: 20px;
 
@@ -16,7 +24,7 @@
     }
   }
 
-  .content {
+  .itemContent {
     display: inline-block;
     font-size: 12px;
     min-height: 36px;
@@ -27,7 +35,7 @@
     word-break: break-word;
   }
 
-  .deletedContent {
+  .itemDeleted {
     display: inline-block;
     line-height: 20px;
     min-height: 20px;
@@ -38,10 +46,21 @@
 
   .wrapper {
     margin: 0 -12px;
-    padding: 12px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
 
-    &:hover {
+    &::-webkit-scrollbar {
-      background: #f0f0f0;
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
     }
   }
 }

client/src/components/LabelsStep/Item.jsx

@@ -8,7 +8,8 @@ import { Button } from 'semantic-ui-react';
 import styles from './Item.module.scss';
 import globalStyles from '../../styles.module.scss';
 
-const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDeselect, onEdit }) => {
+const Item = React.memo(
+  ({ name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
     const handleToggleClick = useCallback(() => {
       if (isActive) {
         onDeselect();
@@ -31,22 +32,27 @@ const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDesel
           )}
           onClick={handleToggleClick}
         />
+        {canEdit && (
           <Button
             icon="pencil"
             size="small"
+            floated="right"
             disabled={!isPersisted}
             className={styles.editButton}
             onClick={onEdit}
           />
+        )}
       </div>
     );
-});
+  },
+);
 
 Item.propTypes = {
   name: PropTypes.string,
   color: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   isActive: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,

client/src/components/LabelsStep/Item.module.scss

@@ -4,7 +4,6 @@
     box-shadow: none;
     flex: 0 0 auto;
     font-weight: normal;
-    margin: 0;
     padding: 8px 10px;
     text-decoration: underline;
 
@@ -18,6 +17,7 @@
     flex: 1 1 auto;
     font-size: 14px;
     font-weight: bold;
+    margin-right: 0;
     overflow: hidden;
     padding: 8px 32px 8px 10px;
     position: relative;

client/src/components/LabelsStep/LabelsStep.jsx

@@ -18,7 +18,18 @@ const StepTypes = {
 };
 
 const LabelsStep = React.memo(
-  ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
+  ({
+    items,
+    currentIds,
+    title,
+    canEdit,
+    onSelect,
+    onDeselect,
+    onCreate,
+    onUpdate,
+    onDelete,
+    onBack,
+  }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
     const [search, handleSearchChange] = useField('');
@@ -140,6 +151,7 @@ const LabelsStep = React.memo(
                   color={item.color}
                   isPersisted={item.isPersisted}
                   isActive={currentIds.includes(item.id)}
+                  canEdit={canEdit}
                   onSelect={() => handleSelect(item.id)}
                   onDeselect={() => handleDeselect(item.id)}
                   onEdit={() => handleEdit(item.id)}
@@ -147,12 +159,14 @@ const LabelsStep = React.memo(
               ))}
             </div>
           )}
+          {canEdit && (
             <Button
               fluid
               content={t('action.createNewLabel')}
               className={styles.addButton}
               onClick={handleAddClick}
             />
+          )}
         </Popup.Content>
       </>
     );
@@ -165,6 +179,7 @@ LabelsStep.propTypes = {
   currentIds: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   title: PropTypes.string,
+  canEdit: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onCreate: PropTypes.func.isRequired,
@@ -175,6 +190,7 @@ LabelsStep.propTypes = {
 
 LabelsStep.defaultProps = {
   title: 'common.labels',
+  canEdit: true,
   onBack: undefined,
 };
 

client/src/components/Root.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { ReduxRouter } from '../lib/redux-router';
 
 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
@@ -11,6 +11,7 @@ import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import 'photoswipe/dist/photoswipe.css';
+import 'easymde/dist/easymde.min.css';
 import '../lib/custom-ui/styles.css';
 
 import '../styles.module.scss';
@@ -18,16 +19,16 @@ import '../styles.module.scss';
 function Root({ store, history }) {
   return (
     <Provider store={store}>
-      <ConnectedRouter history={history}>
+      <ReduxRouter history={history}>
-        <Switch>
+        <Routes>
-          <Route exact path={Paths.LOGIN} component={LoginContainer} />
+          <Route path={Paths.LOGIN} element={<LoginContainer />} />
-          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
+          <Route path={Paths.ROOT} element={<CoreWrapperContainer />} />
-          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
+          <Route path={Paths.PROJECTS} element={<CoreWrapperContainer />} />
-          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
+          <Route path={Paths.BOARDS} element={<CoreWrapperContainer />} />
-          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
+          <Route path={Paths.CARDS} element={<CoreWrapperContainer />} />
-          <Route path="*" component={NotFound} />
+          <Route path="*" element={<NotFound />} />
-        </Switch>
+        </Routes>
-      </ConnectedRouter>
+      </ReduxRouter>
     </Provider>
   );
 }

client/src/containers/BoardActionsContainer.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import BoardActions from '../components/BoardActions';
 
 const mapStateToProps = (state) => {
@@ -12,6 +13,7 @@ const mapStateToProps = (state) => {
   const labels = selectors.selectLabelsForCurrentBoard(state);
   const filterUsers = selectors.selectFilterUsersForCurrentBoard(state);
   const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
+  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
   return {
     memberships,
@@ -19,6 +21,7 @@ const mapStateToProps = (state) => {
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
     canEditMemberships: isCurrentUserManager,
   };
 };

client/src/containers/CardModalContainer.js

@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'connected-react-router';
 import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';

client/src/entry-actions/boards.js

@@ -7,10 +7,11 @@ const createBoardInCurrentProject = (data) => ({
   },
 });
 
-const handleBoardCreate = (board) => ({
+const handleBoardCreate = (board, requestId) => ({
   type: EntryActionTypes.BOARD_CREATE_HANDLE,
   payload: {
     board,
+    requestId,
   },
 });
 

client/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import store from './store';
 import history from './history';
@@ -7,4 +7,5 @@ import Root from './components/Root';
 
 import './i18n';
 
-ReactDOM.render(React.createElement(Root, { store, history }), document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(Root, { store, history }));

client/src/lib/popup/with-popup.jsx

@@ -80,8 +80,10 @@ export default (WrappedComponent, defaultProps) => {
         popperModifiers={[
           {
             name: 'preventOverflow',
+            enabled: true,
             options: {
-              boundariesElement: 'window',
+              altAxis: true,
+              padding: 20,
             },
           },
         ]}

client/src/lib/redux-router/ReduxRouter.jsx

@@ -0,0 +1,46 @@
+import React, { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Router } from 'react-router-dom';
+
+import { handleLocationChange } from './actions';
+
+function ReduxRouter({ children, history, selector, basename }) {
+  const state = useSelector(selector);
+  const dispatch = useDispatch();
+
+  useLayoutEffect(() => {
+    const unlisten = history.listen((nextState) => {
+      dispatch(handleLocationChange(nextState.location, nextState.action));
+    });
+
+    dispatch(handleLocationChange(history.location, history.action, true));
+
+    return unlisten;
+  }, [history, dispatch]);
+
+  return (
+    <Router
+      basename={basename}
+      location={state.location}
+      navigationType={state.action}
+      navigator={history}
+    >
+      {children}
+    </Router>
+  );
+}
+
+ReduxRouter.propTypes = {
+  children: PropTypes.element.isRequired,
+  history: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  selector: PropTypes.func,
+  basename: PropTypes.string,
+};
+
+ReduxRouter.defaultProps = {
+  selector: ({ router }) => router,
+  basename: undefined,
+};
+
+export default ReduxRouter;

client/src/lib/redux-router/actions.js

@@ -0,0 +1,28 @@
+export const LOCATION_CHANGE_HANDLE = '@@router/LOCATION_CHANGE_HANDLE';
+
+export const handleLocationChange = (location, action, isFirstRendering = false) => ({
+  type: LOCATION_CHANGE_HANDLE,
+  payload: {
+    location,
+    action,
+    isFirstRendering,
+  },
+});
+
+export const HISTORY_METHOD_CALL = '@@router/HISTORY_METHOD_CALL';
+
+const createHistoryMethodCaller = (method) => {
+  return (...args) => ({
+    type: HISTORY_METHOD_CALL,
+    payload: {
+      method,
+      args,
+    },
+  });
+};
+
+export const push = createHistoryMethodCaller('push');
+export const replace = createHistoryMethodCaller('replace');
+export const go = createHistoryMethodCaller('go');
+export const back = createHistoryMethodCaller('back');
+export const forward = createHistoryMethodCaller('forward');

client/src/lib/redux-router/create-router-middleware.js

@@ -0,0 +1,18 @@
+import { HISTORY_METHOD_CALL } from './actions';
+
+const createRouterMiddleware = (history) => {
+  // eslint-disable-next-line consistent-return
+  return () => (next) => (action) => {
+    if (action.type !== HISTORY_METHOD_CALL) {
+      return next(action);
+    }
+
+    const {
+      payload: { method, args },
+    } = action;
+
+    history[method](...args);
+  };
+};
+
+export default createRouterMiddleware;

client/src/lib/redux-router/create-router-reducer.js

@@ -0,0 +1,28 @@
+import { LOCATION_CHANGE_HANDLE } from './actions';
+
+const createRouterReducer = (history) => {
+  const initialState = {
+    location: history.location,
+    action: history.action,
+  };
+
+  return (state = initialState, { type, payload } = {}) => {
+    if (type === LOCATION_CHANGE_HANDLE) {
+      const { location, action, isFirstRendering } = payload;
+
+      if (isFirstRendering) {
+        return state;
+      }
+
+      return {
+        ...state,
+        location,
+        action,
+      };
+    }
+
+    return state;
+  };
+};
+
+export default createRouterReducer;

client/src/lib/redux-router/index.js

@@ -0,0 +1,12 @@
+export {
+  LOCATION_CHANGE_HANDLE,
+  HISTORY_METHOD_CALL,
+  push,
+  replace,
+  go,
+  back,
+  forward,
+} from './actions';
+export { default as createRouterReducer } from './create-router-reducer';
+export { default as createRouterMiddleware } from './create-router-middleware';
+export { default as ReduxRouter } from './ReduxRouter';

client/src/locales/en/core.js

@@ -92,8 +92,10 @@ export default {
       filterByLabels_title: 'Filter By Labels',
       filterByMembers_title: 'Filter By Members',
       fromComputer_title: 'From Computer',
+      fromTrello: 'From Trello',
       general: 'General',
       hours: 'Hours',
+      importBoard_title: 'Import Board',
       invalidCurrentPassword: 'Invalid current password',
       labels: 'Labels',
       language: 'Language',
@@ -201,6 +203,7 @@ export default {
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',
       hideDetails: 'Hide details',
+      import: 'Import',
       leaveBoard: 'Leave board',
       leaveProject: 'Leave project',
       logOut_title: 'Log Out',

client/src/models/Board.js

@@ -30,11 +30,12 @@ export default class extends Model {
   static reducer({ type, payload }, Board) {
     switch (type) {
       case ActionTypes.LOCATION_CHANGE_HANDLE:
-      case ActionTypes.BOARD_FETCH__SUCCESS:
+        if (payload.board) {
           Board.upsert({
             ...payload.board,
             isFetching: false,
           });
+        }
 
         break;
       case ActionTypes.LOCATION_CHANGE_HANDLE__BOARD_FETCH:
@@ -124,7 +125,10 @@ export default class extends Model {
         break;
       case ActionTypes.BOARD_CREATE__SUCCESS:
         Board.withId(payload.localId).delete();
+        Board.upsert(payload.board);
 
+        break;
+      case ActionTypes.BOARD_FETCH__SUCCESS:
         Board.upsert({
           ...payload.board,
           isFetching: false,

client/src/reducers/core.js

@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../lib/redux-router';
 
 import ActionTypes from '../constants/ActionTypes';
 import ModalTypes from '../constants/ModalTypes';
@@ -12,7 +12,7 @@ const initialState = {
 // eslint-disable-next-line default-param-last
 export default (state = initialState, { type, payload }) => {
   switch (type) {
-    case LOCATION_CHANGE:
+    case LOCATION_CHANGE_HANDLE:
     case ActionTypes.MODAL_CLOSE:
       return {
         ...state,

client/src/reducers/router.js

@@ -1,5 +1,5 @@
-import { connectRouter } from 'connected-react-router';
+import { createRouterReducer } from '../lib/redux-router';
 
 import history from '../history';
 
-export default connectRouter(history);
+export default createRouterReducer(history);

client/src/sagas/core/requests/boards.js

@@ -23,9 +23,9 @@ export function* fetchBoardByCurrentPath() {
 
   if (pathsMatch) {
     let boardId;
-    if (pathsMatch.path === Paths.BOARDS) {
+    if (pathsMatch.pattern.path === Paths.BOARDS) {
       boardId = pathsMatch.params.id;
-    } else if (pathsMatch.path === Paths.CARDS) {
+    } else if (pathsMatch.pattern.path === Paths.CARDS) {
       ({
         item: card,
         item: { boardId },

client/src/sagas/core/services/boards.js

@@ -7,7 +7,7 @@ import actions from '../../../actions';
 import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
-export function* createBoard(projectId, data) {
+export function* createBoard(projectId, { import: boardImport, ...data }) {
   const nextData = {
     ...data,
     position: yield select(selectors.selectNextBoardPosition, projectId),
@@ -30,7 +30,19 @@ export function* createBoard(projectId, data) {
     ({
       item: board,
       included: { boardMemberships },
-    } = yield call(request, api.createBoard, projectId, nextData));
+    } = yield boardImport
+      ? call(
+          request,
+          api.createBoardWithImport,
+          projectId,
+          {
+            ...nextData,
+            importType: boardImport.type,
+            importFile: boardImport.file,
+          },
+          localId,
+        )
+      : call(request, api.createBoard, projectId, nextData));
   } catch (error) {
     yield put(actions.createBoard.failure(localId, error));
     return;
@@ -46,9 +58,13 @@ export function* createBoardInCurrentProject(data) {
   yield call(createBoard, projectId, data);
 }
 
-export function* handleBoardCreate(board) {
+export function* handleBoardCreate(board, requestId) {
+  const isExists = yield select(selectors.selectIsBoardWithIdExists, requestId);
+
+  if (!isExists) {
     yield put(actions.handleBoardCreate(board));
   }
+}
 
 export function* fetchBoard(id) {
   yield put(actions.fetchBoard(id));

client/src/sagas/core/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select, take } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from '../../../lib/redux-router';
 
 import request from '../request';
 import selectors from '../../../selectors';
@@ -31,7 +31,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.LOGIN:
       yield call(goToRoot);
 
@@ -58,7 +58,7 @@ export function* handleLocationChange() {
   let attachments;
   let deletedNotifications;
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.BOARDS:
     case Paths.CARDS: {
       const currentBoard = yield select(selectors.selectCurrentBoard);
@@ -85,7 +85,7 @@ export function* handleLocationChange() {
         } catch (error) {} // eslint-disable-line no-empty
       }
 
-      if (pathsMatch.path === Paths.CARDS) {
+      if (pathsMatch.pattern.path === Paths.CARDS) {
         const notificationIds = yield select(selectors.selectNotificationIdsForCurrentCard);
 
         if (notificationIds && notificationIds.length > 0) {

client/src/sagas/core/watchers/boards.js

@@ -8,8 +8,8 @@ export default function* boardsWatchers() {
     takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
       services.createBoardInCurrentProject(data),
     ),
-    takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
+    takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board, requestId } }) =>
-      services.handleBoardCreate(board),
+      services.handleBoardCreate(board, requestId),
     ),
     takeEvery(EntryActionTypes.BOARD_FETCH, ({ payload: { id } }) => services.fetchBoard(id)),
     takeEvery(EntryActionTypes.BOARD_UPDATE, ({ payload: { id, data } }) =>

client/src/sagas/core/watchers/router.js

@@ -1,8 +1,8 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
 
 import services from '../services';
 
 export default function* routerWatchers() {
-  yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+  yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
 }

client/src/sagas/core/watchers/socket.js

@@ -48,8 +48,8 @@ const createSocketEventsChannel = () =>
       emit(entryActions.handleProjectManagerDelete(item));
     };
 
-    const handleBoardCreate = ({ item }) => {
+    const handleBoardCreate = ({ item, requestId }) => {
-      emit(entryActions.handleBoardCreate(item));
+      emit(entryActions.handleBoardCreate(item, requestId));
     };
 
     const handleBoardUpdate = ({ item }) => {

client/src/sagas/login/services/router.js

@@ -1,5 +1,5 @@
 import { call, put, select } from 'redux-saga/effects';
-import { push } from 'connected-react-router';
+import { push } from '../../../lib/redux-router';
 
 import selectors from '../../../selectors';
 import Paths from '../../../constants/Paths';
@@ -19,7 +19,7 @@ export function* handleLocationChange() {
     return;
   }
 
-  switch (pathsMatch.path) {
+  switch (pathsMatch.pattern.path) {
     case Paths.ROOT:
     case Paths.PROJECTS:
     case Paths.BOARDS:

client/src/sagas/login/watchers/router.js

@@ -1,8 +1,8 @@
 import { takeEvery } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'connected-react-router';
+import { LOCATION_CHANGE_HANDLE } from '../../../lib/redux-router';
 
 import services from '../services';
 
 export default function* routerWatchers() {
-  yield takeEvery(LOCATION_CHANGE, () => services.handleLocationChange());
+  yield takeEvery(LOCATION_CHANGE_HANDLE, () => services.handleLocationChange());
 }

client/src/selectors/boards.js

@@ -172,6 +172,12 @@ export const selectCurrentUserMembershipForCurrentBoard = createSelector(
   },
 );
 
+export const selectIsBoardWithIdExists = createSelector(
+  orm,
+  (_, id) => id,
+  ({ Board }, id) => Board.idExists(id),
+);
+
 export default {
   makeSelectBoardById,
   selectBoardById,
@@ -182,4 +188,5 @@ export default {
   selectFilterUsersForCurrentBoard,
   selectFilterLabelsForCurrentBoard,
   selectCurrentUserMembershipForCurrentBoard,
+  selectIsBoardWithIdExists,
 };

client/src/selectors/router.js

@@ -22,7 +22,7 @@ export const selectPath = createReduxOrmSelector(
   (state) => selectCurrentUserId(state),
   ({ Project, Board, Card }, pathsMatch, currentUserId) => {
     if (pathsMatch) {
-      switch (pathsMatch.path) {
+      switch (pathsMatch.pattern.path) {
         case Paths.PROJECTS: {
           const projectModel = Project.withId(pathsMatch.params.id);
 

client/src/setupTests.js

@@ -1,6 +1,5 @@
-import { configure } from 'enzyme';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+// allows you to do things like:
-
+// expect(element).toHaveTextContent(/react/i)
-import 'jest-enzyme';
+// learn more: https://github.com/testing-library/jest-dom
-
+import '@testing-library/jest-dom';
-configure({ adapter: new Adapter() });

client/src/store.js

@@ -1,6 +1,6 @@
 import { applyMiddleware, legacy_createStore as createStore, compose as reduxCompose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
-import { routerMiddleware } from 'connected-react-router';
+import { createRouterMiddleware } from './lib/redux-router';
 
 import rootReducer from './reducers';
 import rootSaga from './sagas';
@@ -8,7 +8,7 @@ import history from './history';
 
 const sagaMiddleware = createSagaMiddleware();
 
-const middlewares = [sagaMiddleware, routerMiddleware(history)];
+const middlewares = [sagaMiddleware, createRouterMiddleware(history)];
 
 let compose = reduxCompose;
 

client/src/utils/match-paths.js

@@ -2,10 +2,13 @@ import { matchPath } from 'react-router-dom';
 
 export default (pathname, paths) => {
   for (let i = 0; i < paths.length; i += 1) {
-    const match = matchPath(pathname, {
+    const match = matchPath(
+      {
         path: paths[i],
-      exact: true,
+        end: true,
-    });
+      },
+      pathname,
+    );
 
     if (match) {
       return match;

docker-compose.yml

@@ -27,7 +27,7 @@ services:
       - postgres
 
   postgres:
-    image: postgres:alpine
+    image: postgres:14-alpine
     restart: unless-stopped
     volumes:
       - db-data:/var/lib/postgresql/data

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {
@@ -38,9 +38,32 @@
       "npm run server:lint"
     ]
   },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "all"
+  },
+  "eslintConfig": {
+    "plugins": [
+      "prettier"
+    ],
+    "extends": [
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "no-undef": "off",
+      "prettier/prettier": "error"
+    }
+  },
   "dependencies": {
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.6.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.2",
     "lint-staged": "^13.0.3"
+  },
+  "devDependencies": {
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.7.1"
   }
 }

server/api/controllers/boards/create.js

@@ -1,7 +1,16 @@
+const util = require('util');
+const { v4: uuid } = require('uuid');
+
 const Errors = {
   PROJECT_NOT_FOUND: {
     projectNotFound: 'Project not found',
   },
+  NO_IMPORT_FILE_WAS_UPLOADED: {
+    noImportFileWasUploaded: 'No import file was uploaded',
+  },
+  INVALID_IMPORT_FILE: {
+    invalidImportFile: 'Invalid import file',
+  },
 };
 
 module.exports = {
@@ -24,12 +33,26 @@ module.exports = {
       type: 'string',
       required: true,
     },
+    importType: {
+      type: 'string',
+      isIn: Object.values(Board.ImportTypes),
+    },
+    requestId: {
+      type: 'string',
+      isNotEmptyString: true,
+    },
   },
 
   exits: {
     projectNotFound: {
       responseType: 'notFound',
     },
+    noImportFileWasUploaded: {
+      responseType: 'unprocessableEntity',
+    },
+    uploadError: {
+      responseType: 'unprocessableEntity',
+    },
   },
 
   async fn(inputs) {
@@ -49,10 +72,42 @@ module.exports = {
 
     const values = _.pick(inputs, ['type', 'position', 'name']);
 
+    let boardImport;
+    if (inputs.importType && Object.values(Board.ImportTypes).includes(inputs.importType)) {
+      const upload = util.promisify((options, callback) =>
+        this.req.file('importFile').upload(options, (error, files) => callback(error, files)),
+      );
+
+      let files;
+      try {
+        files = await upload({
+          saveAs: uuid(),
+          maxBytes: null,
+        });
+      } catch (error) {
+        return exits.uploadError(error.message); // TODO: add error
+      }
+
+      if (files.length === 0) {
+        throw Errors.NO_IMPORT_FILE_WAS_UPLOADED;
+      }
+
+      const file = _.last(files);
+
+      if (inputs.importType === Board.ImportTypes.TRELLO) {
+        boardImport = {
+          type: inputs.importType,
+          board: await sails.helpers.boards.processUploadedTrelloImportFile(file),
+        };
+      }
+    }
+
     const { board, boardMembership } = await sails.helpers.boards.createOne(
       values,
+      boardImport,
       currentUser,
       project,
+      inputs.requestId,
       this.req,
     );
 

server/api/helpers/boards/create-one.js

@@ -5,6 +5,13 @@ module.exports = {
       custom: (value) => _.isPlainObject(value) && _.isFinite(value.position),
       required: true,
     },
+    import: {
+      type: 'json',
+      custom: (value) =>
+        value.type &&
+        Object.values(Board.ImportTypes).includes(value.type) &&
+        _.isPlainObject(value.board),
+    },
     user: {
       type: 'ref',
       required: true,
@@ -13,6 +20,10 @@ module.exports = {
       type: 'ref',
       required: true,
     },
+    requestId: {
+      type: 'string',
+      isNotEmptyString: true,
+    },
     request: {
       type: 'ref',
     },
@@ -54,6 +65,10 @@ module.exports = {
       projectId: inputs.project.id,
     }).fetch();
 
+    if (inputs.import && inputs.import.type === Board.ImportTypes.TRELLO) {
+      await sails.helpers.boards.importFromTrello(inputs.user, board, inputs.import.board);
+    }
+
     const boardMembership = await BoardMembership.create({
       boardId: board.id,
       userId: inputs.user.id,
@@ -66,6 +81,7 @@ module.exports = {
         'boardCreate',
         {
           item: board,
+          requestId: inputs.requestId,
         },
         inputs.request,
       );

server/api/helpers/boards/import-from-trello.js

@@ -0,0 +1,152 @@
+module.exports = {
+  inputs: {
+    user: {
+      type: 'ref',
+      required: true,
+    },
+    board: {
+      type: 'ref',
+      required: true,
+    },
+    trelloBoard: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  async fn(inputs) {
+    const trelloToPlankaLabels = {};
+
+    const getTrelloLists = () => inputs.trelloBoard.lists.filter((list) => !list.closed);
+
+    const getUsedTrelloLabels = () => {
+      const result = {};
+      inputs.trelloBoard.cards
+        .map((card) => card.labels)
+        .flat()
+        .forEach((label) => {
+          result[label.id] = label;
+        });
+
+      return Object.values(result);
+    };
+
+    const getTrelloCardsOfList = (listId) =>
+      inputs.trelloBoard.cards.filter((card) => card.idList === listId && !card.closed);
+
+    const getAllTrelloCheckItemsOfCard = (cardId) =>
+      inputs.trelloBoard.checklists
+        .filter((checklist) => checklist.idCard === cardId)
+        .map((checklist) => checklist.checkItems)
+        .flat();
+
+    const getTrelloCommentsOfCard = (cardId) =>
+      inputs.trelloBoard.actions.filter(
+        (action) =>
+          action.type === 'commentCard' &&
+          action.data &&
+          action.data.card &&
+          action.data.card.id === cardId,
+      );
+
+    const getPlankaLabelColor = (trelloLabelColor) =>
+      Label.COLORS.find((color) => color.indexOf(trelloLabelColor) !== -1) || 'desert-sand';
+
+    const importCardLabels = async (plankaCard, trelloCard) => {
+      return Promise.all(
+        trelloCard.labels.map(async (trelloLabel) => {
+          return CardLabel.create({
+            cardId: plankaCard.id,
+            labelId: trelloToPlankaLabels[trelloLabel.id].id,
+          });
+        }),
+      );
+    };
+
+    const importTasks = async (plankaCard, trelloCard) => {
+      // TODO find workaround for tasks/checklist mismapping, see issue trello2planka#5
+      return Promise.all(
+        getAllTrelloCheckItemsOfCard(trelloCard.id).map(async (trelloCheckItem) => {
+          return Task.create({
+            cardId: plankaCard.id,
+            position: trelloCheckItem.pos,
+            name: trelloCheckItem.name,
+            isCompleted: trelloCheckItem.state === 'complete',
+          }).fetch();
+        }),
+      );
+    };
+
+    const importComments = async (plankaCard, trelloCard) => {
+      const trelloComments = getTrelloCommentsOfCard(trelloCard.id);
+      trelloComments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+      return Promise.all(
+        trelloComments.map(async (trelloComment) => {
+          return Action.create({
+            cardId: plankaCard.id,
+            userId: inputs.user.id,
+            type: 'commentCard',
+            data: {
+              text:
+                `${trelloComment.data.text}\n\n---\n*Note: imported comment, originally posted by ` +
+                `\n${trelloComment.memberCreator.fullName} (${trelloComment.memberCreator.username}) on ${trelloComment.date}*`,
+            },
+          }).fetch();
+        }),
+      );
+    };
+
+    const importCards = async (plankaList, trelloList) => {
+      return Promise.all(
+        getTrelloCardsOfList(trelloList.id).map(async (trelloCard) => {
+          const plankaCard = await Card.create({
+            boardId: inputs.board.id,
+            listId: plankaList.id,
+            creatorUserId: inputs.user.id,
+            position: trelloCard.pos,
+            name: trelloCard.name,
+            description: trelloCard.desc || null,
+          }).fetch();
+
+          await importCardLabels(plankaCard, trelloCard);
+          await importTasks(plankaCard, trelloCard);
+          await importComments(plankaCard, trelloCard);
+
+          return plankaCard;
+        }),
+      );
+    };
+
+    const importLabels = async () => {
+      return Promise.all(
+        getUsedTrelloLabels().map(async (trelloLabel) => {
+          const plankaLabel = await Label.create({
+            boardId: inputs.board.id,
+            name: trelloLabel.name || null,
+            color: getPlankaLabelColor(trelloLabel.color),
+          }).fetch();
+
+          trelloToPlankaLabels[trelloLabel.id] = plankaLabel;
+        }),
+      );
+    };
+
+    const importLists = async () => {
+      return Promise.all(
+        getTrelloLists().map(async (trelloList) => {
+          const plankaList = await List.create({
+            boardId: inputs.board.id,
+            name: trelloList.name,
+            position: trelloList.pos,
+          }).fetch();
+
+          return importCards(plankaList, trelloList);
+        }),
+      );
+    };
+
+    await importLabels();
+    await importLists();
+  },
+};

server/api/helpers/boards/process-uploaded-trello-import-file.js

@@ -0,0 +1,38 @@
+const fs = require('fs').promises;
+const rimraf = require('rimraf');
+
+module.exports = {
+  inputs: {
+    file: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  exits: {
+    invalidFile: {},
+  },
+
+  async fn(inputs) {
+    const content = await fs.readFile(inputs.file.fd);
+    const trelloBoard = JSON.parse(content);
+
+    if (
+      !trelloBoard ||
+      !_.isArray(trelloBoard.lists) ||
+      !_.isArray(trelloBoard.cards) ||
+      !_.isArray(trelloBoard.checklists) ||
+      !_.isArray(trelloBoard.actions)
+    ) {
+      throw 'invalidFile';
+    }
+
+    try {
+      rimraf.sync(inputs.file.fd);
+    } catch (error) {
+      console.warn(error.stack); // eslint-disable-line no-console
+    }
+
+    return trelloBoard;
+  },
+};

server/api/helpers/lists/get-cards.js

@@ -22,6 +22,6 @@ module.exports = {
       };
     }
 
-    return sails.helpers.cards.getMany(criteria);
+    return sails.helpers.cards.getMany(criteria, 'position');
   },
 };

server/api/models/Board.js

@@ -10,8 +10,13 @@ const Types = {
   COLLECTION: 'collection',
 };
 
+const ImportTypes = {
+  TRELLO: 'trello',
+};
+
 module.exports = {
   Types,
+  ImportTypes,
 
   attributes: {
     //  ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦  ╦╔═╗╔═╗

server/package.json

@@ -13,24 +13,13 @@
     "test": "mocha test/lifecycle.test.js test/integration/**/*.test.js test/utils/**/*.test.js"
   },
   "eslintConfig": {
-    "plugins": [
-      "prettier"
-    ],
     "extends": [
       "airbnb-base",
-      "plugin:prettier/recommended"
+      "../package.json"
     ],
     "rules": {
       "no-throw-literal": "off",
-      "no-undef": "off",
+      "no-undef": "off"
-      "prettier/prettier": [
-        "error",
-        {
-          "printWidth": 100,
-          "singleQuote": true,
-          "trailingComma": "all"
-        }
-      ]
     },
     "globals": {
       "_": true,
@@ -38,38 +27,35 @@
     }
   },
   "dependencies": {
-    "bcrypt": "^5.0.1",
+    "bcrypt": "^5.1.0",
-    "dotenv": "^16.0.1",
+    "dotenv": "^16.0.3",
     "dotenv-cli": "^6.0.0",
     "filenamify": "^4.3.0",
     "jsonwebtoken": "^8.5.1",
-    "knex": "^2.2.0",
+    "knex": "^2.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "move-file": "^2.1.0",
     "rimraf": "^3.0.2",
-    "sails": "^1.5.2",
+    "sails": "^1.5.3",
-    "sails-hook-orm": "^4.0.1",
+    "sails-hook-orm": "^4.0.2",
-    "sails-hook-sockets": "^2.0.1",
+    "sails-hook-sockets": "^2.0.3",
     "sails-postgresql-redacted": "^1.0.2-9",
-    "sharp": "^0.30.7",
+    "sharp": "^0.31.2",
     "stream-to-array": "^2.3.0",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.0",
     "validator": "^13.7.0",
-    "winston": "^3.8.1",
+    "winston": "^3.8.2",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
-    "eslint": "^8.20.0",
+    "eslint": "^8.28.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "mocha": "^10.1.0",
-    "mocha": "^9.2.2",
+    "nodemon": "^2.0.20",
-    "nodemon": "^2.0.19",
+    "supertest": "^6.3.1"
-    "prettier": "2.7.1",
-    "supertest": "^6.2.4"
   },
   "engines": {
     "node": "^12.10"