chore: Update version

ref: Prettify eslint-disables
feat: Labels reordering
2023-01-09 12:35:08 +01:00 · 2023-01-09 12:33:49 +01:00 · 2023-01-09 12:17:06 +01:00 · 2023-01-09 02:26:00 +05:00 · 2023-01-09 02:23:01 +05:00 · 2023-01-09 02:20:25 +05:00
276 changed files with 3162 additions and 1795 deletions
@@ -261,7 +261,7 @@ fail2ban-client status planka

 ### Import from Trello

-It is not yet implemented inside Planka, but for now you can use the great tool [trello2planka](https://github.com/christophenne/trello2planka) to do the import.
+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

@@ -32,13 +32,11 @@
        "react-markdown": "^8.0.3",
        "react-photoswipe-gallery": "^2.2.2",
        "react-redux": "^8.0.5",
-        "react-router": "^6.4.3",
        "react-router-dom": "^6.4.3",
        "react-scripts": "5.0.1",
        "react-simplemde-editor": "^5.2.0",
        "react-textarea-autosize": "^8.4.0",
        "redux": "^4.2.0",
-        "redux-first-history": "^5.1.1",
        "redux-logger": "^3.0.6",
        "redux-orm": "^0.16.2",
        "redux-saga": "^1.2.1",
@@ -14960,9 +14958,9 @@
      "peer": true
    },
    "node_modules/json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
      "bin": {
        "json5": "lib/cli.js"
      },
@@ -19949,15 +19947,6 @@
        "@babel/runtime": "^7.9.2"
      }
    },
-    "node_modules/redux-first-history": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
-      "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
-      "peerDependencies": {
-        "history": "^4.7.2 || ^5.0",
-        "redux": "^3.6.0 || ^4.0.0"
-      }
-    },
    "node_modules/redux-logger": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
@@ -21982,9 +21971,9 @@
      }
    },
    "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
      "dependencies": {
        "minimist": "^1.2.0"
      },
@@ -34513,9 +34502,9 @@
      "peer": true
    },
    "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
    },
    "jsonfile": {
      "version": "6.1.0",
@@ -37850,12 +37839,6 @@
        "@babel/runtime": "^7.9.2"
      }
    },
-    "redux-first-history": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/redux-first-history/-/redux-first-history-5.1.1.tgz",
-      "integrity": "sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw==",
-      "requires": {}
-    },
    "redux-logger": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
@@ -39433,9 +39416,9 @@
      },
      "dependencies": {
        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
          "requires": {
            "minimist": "^1.2.0"
          }
@@ -79,13 +79,11 @@
    "react-markdown": "^8.0.3",
    "react-photoswipe-gallery": "^2.2.2",
    "react-redux": "^8.0.5",
-    "react-router": "^6.4.3",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "react-simplemde-editor": "^5.2.0",
    "react-textarea-autosize": "^8.4.0",
    "redux": "^4.2.0",
-    "redux-first-history": "^5.1.1",
    "redux-logger": "^3.0.6",
    "redux-orm": "^0.16.2",
    "redux-saga": "^1.2.1",
@@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';

@@ -7,15 +8,20 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
  socket.post(`/projects/${projectId}/boards`, data, headers);

-const getBoard = (id, headers) =>
-  socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
-    ...body,
-    included: {
-      ...body.included,
-      cards: body.included.cards.map(transformCard),
-      attachments: body.included.attachments.map(transformAttachment),
-    },
-  }));
+const createBoardWithImport = (projectId, data, requestId, headers) =>
+  http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
+
+const getBoard = (id, subscribe, headers) =>
+  socket
+    .get(`/boards/${id}${subscribe ? '?subscribe=true' : ''}`, undefined, headers)
+    .then((body) => ({
+      ...body,
+      included: {
+        ...body.included,
+        cards: body.included.cards.map(transformCard),
+        attachments: body.included.attachments.map(transformAttachment),
+      },
+    }));

 const updateBoard = (id, data, headers) => socket.patch(`/boards/${id}`, data, headers);

@@ -23,6 +29,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h

 export default {
  createBoard,
+  createBoardWithImport,
  getBoard,
  updateBoard,
  deleteBoard,
@@ -35,18 +35,8 @@ export const transformCardData = (data) => ({

 /* Actions */

-const getCards = (boardId, data, headers) =>
-  socket.get(`/board/${boardId}/cards`, data, headers).then((body) => ({
-    ...body,
-    items: body.items.map(transformCard),
-    included: {
-      ...body.included,
-      attachments: body.included.attachments.map(transformAttachment),
-    },
-  }));
-
-const createCard = (boardId, data, headers) =>
-  socket.post(`/boards/${boardId}/cards`, transformCardData(data), headers).then((body) => ({
+const createCard = (listId, data, headers) =>
+  socket.post(`/lists/${listId}/cards`, transformCardData(data), headers).then((body) => ({
    ...body,
    item: transformCard(body.item),
  }));
@@ -55,6 +45,10 @@ const getCard = (id, headers) =>
  socket.get(`/cards/${id}`, undefined, headers).then((body) => ({
    ...body,
    item: transformCard(body.item),
+    included: {
+      ...body.included,
+      attachments: body.included.attachments.map(transformAttachment),
+    },
  }));

 const updateCard = (id, data, headers) =>
@@ -83,7 +77,6 @@ const makeHandleCardUpdate = makeHandleCardCreate;
 const makeHandleCardDelete = makeHandleCardCreate;

 export default {
-  getCards,
  createCard,
  getCard,
  updateCard,
@@ -9,7 +9,8 @@ const createUser = (data, headers) => socket.post('/users', data, headers);

 const getUser = (id, headers) => socket.get(`/users/${id}`, undefined, headers);

-const getCurrentUser = (headers) => socket.get('/users/me', undefined, headers);
+const getCurrentUser = (subscribe, headers) =>
+  socket.get(`/users/me${subscribe ? '?subscribe=true' : ''}`, undefined, headers);

 const updateUser = (id, data, headers) => socket.patch(`/users/${id}`, data, headers);

@@ -10,11 +10,11 @@ import CardModalContainer from '../../containers/CardModalContainer';
 import ListAdd from './ListAdd';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';

-import styles from './BoardKanban.module.scss';
+import styles from './Board.module.scss';

 const parseDndId = (dndId) => dndId.split(':')[1];

-const BoardKanban = React.memo(
+const Board = React.memo(
  ({ listIds, isCardModalOpened, canEdit, onListCreate, onListMove, onCardMove }) => {
    const [t] = useTranslation();
    const [isListAddOpened, setIsListAddOpened] = useState(false);
@@ -166,7 +166,7 @@ const BoardKanban = React.memo(
  },
 );

-BoardKanban.propTypes = {
+Board.propTypes = {
  listIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
  isCardModalOpened: PropTypes.bool.isRequired,
  canEdit: PropTypes.bool.isRequired,
@@ -175,4 +175,4 @@ BoardKanban.propTypes = {
  onCardMove: PropTypes.func.isRequired,
 };

-export default BoardKanban;
+export default Board;
@@ -72,7 +72,7 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
        <Button
          positive
          content={t('action.addList')}
-          className={styles.submitButton}
+          className={styles.button}
          onMouseOver={handleControlMouseOver}
          onMouseOut={handleControlMouseOut}
        />
@@ -1,4 +1,9 @@
 :global(#app) {
+  .button {
+    min-height: 30px;
+    vertical-align: top;
+  }
+
  .controls {
    margin-top: 4px;
  }
@@ -18,11 +23,6 @@
    }
  }

-  .submitButton {
-    min-height: 30px;
-    vertical-align: top;
-  }
-
  .wrapper {
    background: #e2e4e6;
    border-radius: 3px;
@@ -0,0 +1,3 @@
+import Board from './Board';
+
+export default Board;
@@ -25,6 +25,7 @@ const BoardActions = React.memo(
    onLabelFromFilterRemove,
    onLabelCreate,
    onLabelUpdate,
+    onLabelMove,
    onLabelDelete,
  }) => {
    return (
@@ -54,6 +55,7 @@ const BoardActions = React.memo(
              onLabelRemove={onLabelFromFilterRemove}
              onLabelCreate={onLabelCreate}
              onLabelUpdate={onLabelUpdate}
+              onLabelMove={onLabelMove}
              onLabelDelete={onLabelDelete}
            />
          </div>
@@ -82,6 +84,7 @@ BoardActions.propTypes = {
  onLabelFromFilterRemove: PropTypes.func.isRequired,
  onLabelCreate: PropTypes.func.isRequired,
  onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
  onLabelDelete: PropTypes.func.isRequired,
 };

@@ -22,6 +22,7 @@ const Filters = React.memo(
    onLabelRemove,
    onLabelCreate,
    onLabelUpdate,
+    onLabelMove,
    onLabelDelete,
  }) => {
    const [t] = useTranslation();
@@ -80,6 +81,7 @@ const Filters = React.memo(
            onDeselect={onLabelRemove}
            onCreate={onLabelCreate}
            onUpdate={onLabelUpdate}
+            onMove={onLabelMove}
            onDelete={onLabelDelete}
          >
            <button type="button" className={styles.filterButton}>
@@ -117,6 +119,7 @@ Filters.propTypes = {
  onLabelRemove: PropTypes.func.isRequired,
  onLabelCreate: PropTypes.func.isRequired,
  onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
  onLabelDelete: PropTypes.func.isRequired,
 };

@@ -1,3 +0,0 @@
-import BoardKanban from './BoardKanban';
-
-export default BoardKanban;
@@ -1,3 +1,4 @@
+import { dequal } from 'dequal';
 import omit from 'lodash/omit';
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +11,7 @@ import { BoardMembershipRoles } from '../../constants/Enums';
 import styles from './BoardMembershipPermissionsSelectStep.module.scss';

 const BoardMembershipPermissionsSelectStep = React.memo(
-  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+  ({ defaultData, title, buttonContent, onSelect, onBack, onClose }) => {
    const [t] = useTranslation();

    const [data, setData] = useState(() => ({
@@ -23,7 +24,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
      setData((prevData) => ({
        ...prevData,
        role,
-        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+        canComment: role === BoardMembershipRoles.VIEWER ? !!prevData.canComment : null,
      }));
    }, []);

@@ -35,8 +36,12 @@ const BoardMembershipPermissionsSelectStep = React.memo(
    }, []);

    const handleSubmit = useCallback(() => {
-      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
-    }, [onSelect, data]);
+      if (!dequal(data, defaultData)) {
+        onSelect(data.role === BoardMembershipRoles.VIEWER ? data : omit(data, 'canComment'));
+      }
+
+      onClose();
+    }, [defaultData, onSelect, onClose, data]);

    return (
      <>
@@ -65,7 +70,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
                <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>
              </Menu.Item>
            </Menu>
-            {data.role !== BoardMembershipRoles.EDITOR && (
+            {data.role === BoardMembershipRoles.VIEWER && (
              <Segment basic className={styles.settings}>
                <Radio
                  toggle
@@ -90,6 +95,7 @@ BoardMembershipPermissionsSelectStep.propTypes = {
  buttonContent: PropTypes.string,
  onSelect: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };

 BoardMembershipPermissionsSelectStep.defaultProps = {
@@ -43,7 +43,9 @@ const BoardMembershipsStep = React.memo(
    );

    useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    return (
@@ -1,7 +1,7 @@
 :global(#app) {
  .menu {
    margin: 8px auto 0;
-    max-height: 320px;
+    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Loader } from 'semantic-ui-react';
-
-import { BoardTypes } from '../constants/Enums';
-import BoardKanbanContainer from '../containers/BoardKanbanContainer';
-
-const BoardWrapper = React.memo(({ type, isFetching }) => {
-  if (isFetching) {
-    return <Loader active />;
-  }
-
-  if (type === BoardTypes.KANBAN) {
-    return <BoardKanbanContainer />;
-  }
-
-  return null;
-});
-
-BoardWrapper.propTypes = {
-  type: PropTypes.string.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-};
-
-export default BoardWrapper;
@@ -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);
@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}
@@ -0,0 +1,117 @@
+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,
+      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({
+      preventScroll: true,
+    });
+  }, []);
+
+  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);
@@ -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;
+  }
+}
@@ -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;
@@ -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;
+    }
+  }
+}
@@ -0,0 +1,3 @@
+import AddPopup from './AddPopup';
+
+export default AddPopup;
@@ -29,7 +29,7 @@
  }

  .link {
-    color: #fff;
+    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    display: block;
    line-height: 20px;
@@ -60,6 +60,11 @@
    &:hover {
      background: rgba(0, 0, 0, 0.32);
    }
+
+    .link {
+      color: #fff;
+      font-weight: bold;
+    }
  }

  .tabWrapper {
@@ -45,6 +45,7 @@ const ActionsStep = React.memo(
    onLabelRemove,
    onLabelCreate,
    onLabelUpdate,
+    onLabelMove,
    onLabelDelete,
    onClose,
  }) => {
@@ -119,6 +120,7 @@ const ActionsStep = React.memo(
              onDeselect={onLabelRemove}
              onCreate={onLabelCreate}
              onUpdate={onLabelUpdate}
+              onMove={onLabelMove}
              onDelete={onLabelDelete}
              onBack={handleBack}
            />
@@ -241,6 +243,7 @@ ActionsStep.propTypes = {
  onLabelRemove: PropTypes.func.isRequired,
  onLabelCreate: PropTypes.func.isRequired,
  onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
  onLabelDelete: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
 };
@@ -48,6 +48,7 @@ const Card = React.memo(
    onLabelRemove,
    onLabelCreate,
    onLabelUpdate,
+    onLabelMove,
    onLabelDelete,
  }) => {
    const nameEdit = useRef(null);
@@ -189,6 +190,7 @@ const Card = React.memo(
                        onLabelRemove={onLabelRemove}
                        onLabelCreate={onLabelCreate}
                        onLabelUpdate={onLabelUpdate}
+                        onLabelMove={onLabelMove}
                        onLabelDelete={onLabelDelete}
                      >
                        <Button className={classNames(styles.actionsButton, styles.target)}>
@@ -241,6 +243,7 @@ Card.propTypes = {
  onLabelRemove: PropTypes.func.isRequired,
  onLabelCreate: PropTypes.func.isRequired,
  onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
  onLabelDelete: PropTypes.func.isRequired,
 };

@@ -22,11 +22,9 @@ const Tasks = React.memo(({ items }) => {

  return (
    <>
-      {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                         jsx-a11y/no-static-element-interactions */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                   jsx-a11y/no-static-element-interactions */}
      <div className={styles.button} onClick={handleToggleClick}>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                          jsx-a11y/no-static-element-interactions */}
        <span className={styles.progressWrapper}>
          <Progress
            autoSuccess
@@ -14,7 +14,6 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
  const [t] = useTranslation();

  let contentNode;
-
  switch (type) {
    case ActivityTypes.CREATE_CARD:
      contentNode = (
@@ -120,6 +120,7 @@ const Attachments = React.memo(
          withCaption
          withDownloadButton
          options={{
+            wheelToZoom: true,
            showHideAnimationType: 'none',
            closeTitle: '',
            zoomTitle: '',
@@ -61,11 +61,9 @@ const Item = React.forwardRef(
    const extension = filename.slice((Math.max(0, filename.lastIndexOf('.')) || Infinity) + 1);

    return (
-      /* eslint-disable jsx-a11y/click-events-have-key-events,
-                        jsx-a11y/no-static-element-interactions */
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                  jsx-a11y/no-static-element-interactions */
      <div ref={ref} className={styles.wrapper} onClick={handleClick}>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                          jsx-a11y/no-static-element-interactions */}
        <div
          className={styles.thumbnail}
          style={{
@@ -62,6 +62,7 @@ const CardModal = React.memo(
    onLabelRemove,
    onLabelCreate,
    onLabelUpdate,
+    onLabelMove,
    onLabelDelete,
    onTaskCreate,
    onTaskUpdate,
@@ -235,6 +236,7 @@ const CardModal = React.memo(
                            onDeselect={onLabelRemove}
                            onCreate={onLabelCreate}
                            onUpdate={onLabelUpdate}
+                            onMove={onLabelMove}
                            onDelete={onLabelDelete}
                          >
                            <Label name={label.name} color={label.color} />
@@ -252,6 +254,7 @@ const CardModal = React.memo(
                        onDeselect={onLabelRemove}
                        onCreate={onLabelCreate}
                        onUpdate={onLabelUpdate}
+                        onMove={onLabelMove}
                        onDelete={onLabelDelete}
                      >
                        <button
@@ -419,6 +422,7 @@ const CardModal = React.memo(
                  onDeselect={onLabelRemove}
                  onCreate={onLabelCreate}
                  onUpdate={onLabelUpdate}
+                  onMove={onLabelMove}
                  onDelete={onLabelDelete}
                >
                  <Button fluid className={styles.actionButton}>
@@ -546,6 +550,7 @@ CardModal.propTypes = {
  onLabelRemove: PropTypes.func.isRequired,
  onLabelCreate: PropTypes.func.isRequired,
  onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
  onLabelDelete: PropTypes.func.isRequired,
  onTaskCreate: PropTypes.func.isRequired,
  onTaskUpdate: PropTypes.func.isRequired,
@@ -9,6 +9,7 @@
    text-align: left;
    text-overflow: ellipsis;
    transition: background 85ms ease;
+    white-space: nowrap;

    &:hover {
      background: #dfe3e6;
@@ -55,14 +55,12 @@ const Item = React.memo(
              </span>
              <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
                <div className={classNames(canEdit && styles.contentHoverable)}>
-                  {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                           jsx-a11y/no-static-element-interactions */}
+                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                               jsx-a11y/no-static-element-interactions */}
                  <span
                    className={classNames(styles.text, canEdit && styles.textEditable)}
                    onClick={handleClick}
                  >
-                    {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                            jsx-a11y/no-static-element-interactions */}
                    <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
                      {name}
                    </span>
@@ -48,6 +48,7 @@
  }

  .taskCompleted {
+    color: #aaa;
    text-decoration: line-through;
  }

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ModalTypes from '../constants/ModalTypes';
-import FixedContainer from '../containers/FixedContainer';
-import StaticContainer from '../containers/StaticContainer';
-import UsersModalContainer from '../containers/UsersModalContainer';
-import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
-import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
-import Background from './Background';
-
-function Core({ currentModal, currentProject }) {
-  return (
-    <>
-      {currentProject && currentProject.background && (
-        <Background
-          type={currentProject.background.type}
-          name={currentProject.background.name}
-          imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
-        />
-      )}
-      <FixedContainer />
-      <StaticContainer />
-      {currentModal === ModalTypes.USERS && <UsersModalContainer />}
-      {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-      {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
-    </>
-  );
-}
-
-Core.propTypes = {
-  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
-  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
-
-Core.defaultProps = {
-  currentModal: undefined,
-  currentProject: undefined,
-};
-
-export default Core;
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation, Trans } from 'react-i18next';
+import { Loader } from 'semantic-ui-react';
+
+import ModalTypes from '../../constants/ModalTypes';
+import FixedContainer from '../../containers/FixedContainer';
+import StaticContainer from '../../containers/StaticContainer';
+import UsersModalContainer from '../../containers/UsersModalContainer';
+import UserSettingsModalContainer from '../../containers/UserSettingsModalContainer';
+import ProjectAddModalContainer from '../../containers/ProjectAddModalContainer';
+import Background from '../Background';
+
+import styles from './Core.module.scss';
+
+const Core = React.memo(
+  ({ isInitializing, isSocketDisconnected, currentModal, currentProject }) => {
+    const [t] = useTranslation();
+
+    return (
+      <>
+        {isInitializing ? (
+          <Loader active size="massive" />
+        ) : (
+          <>
+            {currentProject && currentProject.background && (
+              <Background
+                type={currentProject.background.type}
+                name={currentProject.background.name}
+                imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
+              />
+            )}
+            <FixedContainer />
+            <StaticContainer />
+            {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+            {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+            {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
+          </>
+        )}
+        {isSocketDisconnected && (
+          <div className={styles.message}>
+            <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
+            <div className={styles.messageContent}>
+              <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
+                All changes will be automatically saved
+                <br />
+                after connection restored
+              </Trans>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+Core.propTypes = {
+  isInitializing: PropTypes.bool.isRequired,
+  isSocketDisconnected: PropTypes.bool.isRequired,
+  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
+  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+Core.defaultProps = {
+  currentModal: undefined,
+  currentProject: undefined,
+};
+
+export default Core;
@@ -0,0 +1,3 @@
+import Core from './Core';
+
+export default Core;
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation, Trans } from 'react-i18next';
-import { Loader } from 'semantic-ui-react';
-
-import CoreContainer from '../../containers/CoreContainer';
-
-import styles from './CoreWrapper.module.scss';
-
-const CoreWrapper = React.memo(({ isInitializing, isSocketDisconnected }) => {
-  const [t] = useTranslation();
-
-  return (
-    <>
-      {isInitializing ? <Loader active size="massive" /> : <CoreContainer />}
-      {isSocketDisconnected && (
-        <div className={styles.message}>
-          <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
-          <div className={styles.messageContent}>
-            <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
-              All changes will be automatically saved
-              <br />
-              after connection restored
-            </Trans>
-          </div>
-        </div>
-      )}
-    </>
-  );
-});
-
-CoreWrapper.propTypes = {
-  isInitializing: PropTypes.bool.isRequired,
-  isSocketDisconnected: PropTypes.bool.isRequired,
-};
-
-export default CoreWrapper;
@@ -1,3 +0,0 @@
-import CoreWrapper from './CoreWrapper';
-
-export default CoreWrapper;
@@ -1,53 +1,69 @@
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
 import React, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Draggable } from 'react-beautiful-dnd';
 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, canEdit, onSelect, onDeselect, onEdit }) => {
+  ({ id, index, name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
    const handleToggleClick = useCallback(() => {
-      if (isActive) {
-        onDeselect();
-      } else {
-        onSelect();
+      if (isPersisted) {
+        if (isActive) {
+          onDeselect();
+        } else {
+          onSelect();
+        }
      }
-    }, [isActive, onSelect, onDeselect]);
+    }, [isPersisted, isActive, onSelect, onDeselect]);

    return (
-      <div className={styles.wrapper}>
-        <Button
-          fluid
-          content={name}
-          active={isActive}
-          disabled={!isPersisted}
-          className={classNames(
-            styles.labelButton,
-            isActive && styles.labelButtonActive,
-            globalStyles[`background${upperFirst(camelCase(color))}`],
-          )}
-          onClick={handleToggleClick}
-        />
-        {canEdit && (
-          <Button
-            icon="pencil"
-            size="small"
-            floated="right"
-            disabled={!isPersisted}
-            className={styles.editButton}
-            onClick={onEdit}
-          />
-        )}
-      </div>
+      <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
+        {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+          const contentNode = (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <div {...draggableProps} ref={innerRef} className={styles.wrapper}>
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                           jsx-a11y/no-static-element-interactions */}
+              <span
+                {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                className={classNames(
+                  styles.name,
+                  isActive && styles.nameActive,
+                  globalStyles[`background${upperFirst(camelCase(color))}`],
+                )}
+                onClick={handleToggleClick}
+              >
+                {name}
+              </span>
+              {canEdit && (
+                <Button
+                  icon="pencil"
+                  size="small"
+                  floated="right"
+                  disabled={!isPersisted}
+                  className={styles.editButton}
+                  onClick={onEdit}
+                />
+              )}
+            </div>
+          );
+
+          return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+        }}
+      </Draggable>
    );
  },
 );

 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
  name: PropTypes.string,
  color: PropTypes.string.isRequired,
  isPersisted: PropTypes.bool.isRequired,
@@ -12,16 +12,15 @@
    }
  }

-  .labelButton {
+  .name {
+    border-radius: 3px;
    color: #fff;
+    cursor: pointer;
    flex: 1 1 auto;
-    font-size: 14px;
    font-weight: bold;
-    margin-right: 0;
    overflow: hidden;
    padding: 8px 32px 8px 10px;
    position: relative;
-    text-align: left;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);

@@ -30,7 +29,7 @@
    }
  }

-  .labelButtonActive:before {
+  .nameActive:before {
    bottom: 1px;
    content: "Г";
    font-size: 18px;
@@ -2,10 +2,12 @@ import pick from 'lodash/pick';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Button } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';

 import { useField, useSteps } from '../../hooks';
+import DroppableTypes from '../../constants/DroppableTypes';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -27,6 +29,7 @@ const LabelsStep = React.memo(
    onDeselect,
    onCreate,
    onUpdate,
+    onMove,
    onDelete,
    onBack,
  }) => {
@@ -74,6 +77,17 @@ const LabelsStep = React.memo(
      [onDeselect],
    );

+    const handleDragEnd = useCallback(
+      ({ draggableId, source, destination }) => {
+        if (!destination || source.index === destination.index) {
+          return;
+        }
+
+        onMove(draggableId, destination.index);
+      },
+      [onMove],
+    );
+
    const handleUpdate = useCallback(
      (id, data) => {
        onUpdate(id, data);
@@ -89,7 +103,9 @@ const LabelsStep = React.memo(
    );

    useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    if (step) {
@@ -143,21 +159,45 @@ const LabelsStep = React.memo(
            onChange={handleSearchChange}
          />
          {filteredItems.length > 0 && (
-            <div className={styles.items}>
-              {filteredItems.map((item) => (
-                <Item
-                  key={item.id}
-                  name={item.name}
-                  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)}
-                />
-              ))}
-            </div>
+            <DragDropContext onDragEnd={handleDragEnd}>
+              <Droppable droppableId="labels" type={DroppableTypes.LABEL}>
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    ref={innerRef}
+                    className={styles.items}
+                  >
+                    {filteredItems.map((item, index) => (
+                      <Item
+                        key={item.id}
+                        id={item.id}
+                        index={index}
+                        name={item.name}
+                        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)}
+                      />
+                    ))}
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+              <Droppable droppableId="labels:hack" type={DroppableTypes.LABEL}>
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    ref={innerRef}
+                    className={styles.droppableHack}
+                  >
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
          )}
          {canEdit && (
            <Button
@@ -184,6 +224,7 @@ LabelsStep.propTypes = {
  onDeselect: PropTypes.func.isRequired,
  onCreate: PropTypes.func.isRequired,
  onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onBack: PropTypes.func,
 };
@@ -15,9 +15,14 @@
    }
  }

+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
  .items {
    margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
@@ -21,36 +21,46 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {

  const nameField = useRef(null);

-  const submit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      name: data.name.trim(),
-    };
+  const submit = useCallback(
+    (autoOpen) => {
+      const cleanData = {
+        ...data,
+        name: data.name.trim(),
+      };

-    if (!cleanData.name) {
-      nameField.current.ref.current.select();
-      return;
-    }
+      if (!cleanData.name) {
+        nameField.current.ref.current.select();
+        return;
+      }

-    onCreate(cleanData);
+      onCreate(cleanData, autoOpen);
+      setData(DEFAULT_DATA);

-    setData(DEFAULT_DATA);
-    focusNameField();
-  }, [onCreate, data, setData, focusNameField]);
+      if (autoOpen) {
+        onClose();
+      } else {
+        focusNameField();
+      }
+    },
+    [onCreate, onClose, data, setData, focusNameField],
+  );

  const handleFieldKeyDown = useCallback(
    (event) => {
      switch (event.key) {
-        case 'Enter':
+        case 'Enter': {
          event.preventDefault();

-          submit();
+          const autoOpen = event.ctrlKey;
+          submit(autoOpen);

          break;
-        case 'Escape':
+        }
+        case 'Escape': {
          onClose();

          break;
+        }
        default:
      }
    },
@@ -95,18 +95,14 @@ const List = React.memo(
            ref={innerRef}
            className={styles.innerWrapper}
          >
-            {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                               jsx-a11y/no-static-element-interactions,
-                               react/jsx-props-no-spreading */}
            <div className={styles.outerWrapper}>
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                           jsx-a11y/no-static-element-interactions */}
              <div
-                {...dragHandleProps}
+                {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
                className={classNames(styles.header, canEdit && styles.headerEditable)}
                onClick={handleHeaderClick}
              >
-                {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                                jsx-a11y/no-static-element-interactions,
-                                react/jsx-props-no-spreading */}
                <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
                  <div className={styles.headerName}>{name}</div>
                </NameEdit>
@@ -28,8 +28,8 @@ const ActionsStep = React.memo(
    deleteConfirmationTitle,
    deleteConfirmationContent,
    deleteConfirmationButtonContent,
-    canLeave,
    canEdit,
+    canLeave,
    onUpdate,
    onDelete,
    onClose,
@@ -50,10 +50,8 @@ const ActionsStep = React.memo(
        if (onUpdate) {
          onUpdate(data);
        }
-
-        onClose();
      },
-      [onUpdate, onClose],
+      [onUpdate],
    );

    if (step) {
@@ -68,6 +66,7 @@ const ActionsStep = React.memo(
              buttonContent="action.save"
              onSelect={handleRoleSelect}
              onBack={handleBack}
+              onClose={onClose}
            />
          );
        }
@@ -146,8 +145,8 @@ ActionsStep.propTypes = {
  deleteConfirmationTitle: PropTypes.string,
  deleteConfirmationContent: PropTypes.string,
  deleteConfirmationButtonContent: PropTypes.string,
-  canLeave: PropTypes.bool.isRequired,
  canEdit: PropTypes.bool.isRequired,
+  canLeave: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func,
  onDelete: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
@@ -56,14 +56,14 @@ const AddStep = React.memo(
          userId: step.params.userId,
          ...data,
        });
-
-        onClose();
      },
-      [onCreate, onClose, step],
+      [onCreate, step],
    );

    useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    if (step) {
@@ -79,6 +79,7 @@ const AddStep = React.memo(
                buttonContent="action.addMember"
                onSelect={handleRoleSelect}
                onBack={handleBack}
+                onClose={onClose}
              />
            );
          }
@@ -1,7 +1,7 @@
 :global(#app) {
  .users {
    margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
@@ -44,8 +44,8 @@ const Memberships = React.memo(
                deleteConfirmationTitle={deleteConfirmationTitle}
                deleteConfirmationContent={deleteConfirmationContent}
                deleteConfirmationButtonContent={deleteConfirmationButtonContent}
-                canLeave={items.length > 1 || canLeaveIfLast}
                canEdit={canEdit}
+                canLeave={items.length > 1 || canLeaveIfLast}
                onUpdate={(data) => onUpdate(item.id, data)}
                onDelete={() => onDelete(item.id)}
              >
@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
-import { HistoryRouter as Router } from 'redux-first-history/rr6';
+import { ReduxRouter } from '../lib/redux-router';

 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
-import CoreWrapperContainer from '../containers/CoreWrapperContainer';
+import CoreContainer from '../containers/CoreContainer';
 import NotFound from './NotFound';

 import 'react-datepicker/dist/react-datepicker.css';
@@ -19,16 +19,16 @@ import '../styles.module.scss';
 function Root({ store, history }) {
  return (
    <Provider store={store}>
-      <Router history={history}>
+      <ReduxRouter history={history}>
        <Routes>
          <Route path={Paths.LOGIN} element={<LoginContainer />} />
-          <Route path={Paths.ROOT} element={<CoreWrapperContainer />} />
-          <Route path={Paths.PROJECTS} element={<CoreWrapperContainer />} />
-          <Route path={Paths.BOARDS} element={<CoreWrapperContainer />} />
-          <Route path={Paths.CARDS} element={<CoreWrapperContainer />} />
+          <Route path={Paths.ROOT} element={<CoreContainer />} />
+          <Route path={Paths.PROJECTS} element={<CoreContainer />} />
+          <Route path={Paths.BOARDS} element={<CoreContainer />} />
+          <Route path={Paths.CARDS} element={<CoreContainer />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
-      </Router>
+      </ReduxRouter>
    </Provider>
  );
 }
@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
-import { Icon } from 'semantic-ui-react';
+import { Icon, Loader } from 'semantic-ui-react';

 import ProjectsContainer from '../../containers/ProjectsContainer';
-import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
+import BoardContainer from '../../containers/BoardContainer';

 import styles from './Static.module.scss';

-function Static({ cardId, boardId, projectId }) {
+function Static({ projectId, cardId, board }) {
  const [t] = useTranslation();

  if (projectId === undefined) {
    return (
-      <div className={styles.root}>
+      <div className={styles.wrapper}>
        <ProjectsContainer />
      </div>
    );
@@ -22,7 +22,7 @@ function Static({ cardId, boardId, projectId }) {

  if (cardId === null) {
    return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
        <div className={styles.message}>
          <h1>
            {t('common.cardNotFound', {
@@ -34,9 +34,9 @@ function Static({ cardId, boardId, projectId }) {
    );
  }

-  if (boardId === null) {
+  if (board === null) {
    return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
        <div className={styles.message}>
          <h1>
            {t('common.boardNotFound', {
@@ -50,7 +50,7 @@ function Static({ cardId, boardId, projectId }) {

  if (projectId === null) {
    return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
        <div className={styles.message}>
          <h1>
            {t('common.projectNotFound', {
@@ -62,9 +62,9 @@ function Static({ cardId, boardId, projectId }) {
    );
  }

-  if (boardId === undefined) {
+  if (board === undefined) {
    return (
-      <div className={classNames(styles.board, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperProject)}>
        <div className={styles.message}>
          <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
          <h1 className={styles.messageTitle}>
@@ -80,23 +80,31 @@ function Static({ cardId, boardId, projectId }) {
    );
  }

+  if (board.isFetching) {
+    return (
+      <div className={classNames(styles.wrapper, styles.wrapperLoader, styles.wrapperProject)}>
+        <Loader active size="big" />
+      </div>
+    );
+  }
+
  return (
-    <div className={classNames(styles.board, styles.flex)}>
-      <BoardWrapperContainer />
+    <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperBoard)}>
+      <BoardContainer />
    </div>
  );
 }

 Static.propTypes = {
-  cardId: PropTypes.string,
-  boardId: PropTypes.string,
  projectId: PropTypes.string,
+  cardId: PropTypes.string,
+  board: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };

 Static.defaultProps = {
-  cardId: undefined,
-  boardId: undefined,
  projectId: undefined,
+  cardId: undefined,
+  board: undefined,
 };

 export default Static;
@@ -1,13 +1,4 @@
 :global(#app) {
-  .board {
-    margin-top: 174px;
-  }
-
-  .flex {
-    display: flex;
-    height: 100%;
-  }
-
  .message {
    align-content: space-between;
    align-items: center;
@@ -34,7 +25,24 @@
    text-align: center;
  }

-  .root {
+  .wrapper {
+    height: 100%;
    margin-top: 50px;
  }
+
+  .wrapperBoard {
+    margin-top: 174px;
+  }
+
+  .wrapperFlex {
+    display: flex;
+  }
+
+  .wrapperLoader {
+    position: relative;
+  }
+
+  .wrapperProject {
+    margin-top: 98px;
+  }
 }
@@ -88,7 +88,9 @@ const UserAddStep = React.memo(
    }, [onCreate, data]);

    useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    useEffect(() => {
@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -78,16 +77,22 @@ const UserEmailEditStep = React.memo(
        return;
      }

-      if (usePasswordConfirmation && !cleanData.currentPassword) {
-        currentPasswordField.current.focus();
-        return;
+      if (usePasswordConfirmation) {
+        if (!cleanData.currentPassword) {
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
      }

-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
    }, [email, usePasswordConfirmation, onUpdate, onClose, data]);

    useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    useEffect(() => {
@@ -71,7 +71,9 @@ const UserPasswordEditStep = React.memo(
    }, [usePasswordConfirmation, onUpdate, data]);

    useEffect(() => {
-      passwordField.current.focus();
+      passwordField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    useEffect(() => {
@@ -73,7 +73,9 @@ const UserSettingsModal = React.memo(
        ),
      },
      {
-        menuItem: 'About Planka',
+        menuItem: t('common.aboutPlanka', {
+          context: 'title',
+        }),
        render: () => <AboutPane />,
      },
    ];
@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -78,16 +77,22 @@ const UserUsernameEditStep = React.memo(
        return;
      }

-      if (usePasswordConfirmation && !cleanData.currentPassword) {
-        currentPasswordField.current.focus();
-        return;
+      if (usePasswordConfirmation) {
+        if (!cleanData.currentPassword) {
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
      }

-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
    }, [username, usePasswordConfirmation, onUpdate, onClose, data]);

    useEffect(() => {
-      usernameField.current.focus();
+      usernameField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    useEffect(() => {
@@ -1,10 +1,12 @@
 const BOARD = 'BOARD';
+const LABEL = 'LABEL';
 const LIST = 'LIST';
 const CARD = 'CARD';
 const TASK = 'TASK';

 export default {
  BOARD,
+  LABEL,
  LIST,
  CARD,
  TASK,
@@ -99,6 +99,7 @@ export default {
  LABEL_CREATE_HANDLE: `${PREFIX}/LABEL_CREATE_HANDLE`,
  LABEL_UPDATE: `${PREFIX}/LABEL_UPDATE`,
  LABEL_UPDATE_HANDLE: `${PREFIX}/LABEL_UPDATE_HANDLE`,
+  LABEL_MOVE: `${PREFIX}/LABEL_MOVE`,
  LABEL_DELETE: `${PREFIX}/LABEL_DELETE`,
  LABEL_DELETE_HANDLE: `${PREFIX}/LABEL_DELETE_HANDLE`,
  LABEL_TO_CARD_ADD: `${PREFIX}/LABEL_TO_CARD_ADD`,
@@ -3,10 +3,6 @@ export const ProjectBackgroundTypes = {
  IMAGE: 'image',
 };

-export const BoardTypes = {
-  KANBAN: 'kanban',
-};
-
 export const BoardMembershipRoles = {
  EDITOR: 'editor',
  VIEWER: 'viewer',
@@ -15,13 +15,16 @@ const mapStateToProps = (state) => {
  const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);

+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
  return {
    memberships,
    labels,
    filterUsers,
    filterLabels,
    allUsers,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEdit: isCurrentUserEditor,
    canEditMemberships: isCurrentUserManager,
  };
 };
@@ -38,6 +41,7 @@ const mapDispatchToProps = (dispatch) =>
      onLabelFromFilterRemove: entryActions.removeLabelFromFilterInCurrentBoard,
      onLabelCreate: entryActions.createLabelInCurrentBoard,
      onLabelUpdate: entryActions.updateLabel,
+      onLabelMove: entryActions.moveLabel,
      onLabelDelete: entryActions.deleteLabel,
    },
    dispatch,
@@ -4,17 +4,20 @@ import { connect } from 'react-redux';
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
 import { BoardMembershipRoles } from '../constants/Enums';
-import BoardKanban from '../components/BoardKanban';
+import Board from '../components/Board';

 const mapStateToProps = (state) => {
  const { cardId } = selectors.selectPath(state);
  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
  const listIds = selectors.selectListIdsForCurrentBoard(state);

+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
  return {
    listIds,
    isCardModalOpened: !!cardId,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEdit: isCurrentUserEditor,
  };
 };

@@ -28,4 +31,4 @@ const mapDispatchToProps = (dispatch) =>
    dispatch,
  );

-export default connect(mapStateToProps, mapDispatchToProps)(BoardKanban);
+export default connect(mapStateToProps, mapDispatchToProps)(Board);
@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import BoardWrapper from '../components/BoardWrapper';
-
-const mapStateToProps = (state) => {
-  const { type, isFetching } = selectors.selectCurrentBoard(state);
-
-  return {
-    type,
-    isFetching,
-  };
-};
-
-export default connect(mapStateToProps)(BoardWrapper);
@@ -30,6 +30,9 @@ const makeMapStateToProps = () => {
    const tasks = selectTasksByCardId(state, id);
    const notificationsTotal = selectNotificationsTotalByCardId(state, id);

+    const isCurrentUserEditor =
+      !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
    return {
      id,
      index,
@@ -48,8 +51,7 @@ const makeMapStateToProps = () => {
      allProjectsToLists,
      allBoardMemberships,
      allLabels,
-      canEdit:
-        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+      canEdit: isCurrentUserEditor,
    };
  };
 };
@@ -68,6 +70,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
      onLabelRemove: (labelId) => entryActions.removeLabelFromCard(labelId, id),
      onLabelCreate: (data) => entryActions.createLabelInCurrentBoard(data),
      onLabelUpdate: (labelId, data) => entryActions.updateLabel(labelId, data),
+      onLabelMove: (labelId, index) => entryActions.moveLabel(labelId, index),
      onLabelDelete: (labelId) => entryActions.deleteLabel(labelId),
    },
    dispatch,
@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'redux-first-history';
 import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';

 import selectors from '../selectors';
 import entryActions from '../entry-actions';
@@ -37,6 +37,14 @@ const mapStateToProps = (state) => {
  const attachments = selectors.selectAttachmentsForCurrentCard(state);
  const activities = selectors.selectActivitiesForCurrentCard(state);

+  let isCurrentUserEditor = false;
+  let isCurrentUserEditorOrCanComment = false;
+
+  if (currentUserMembership) {
+    isCurrentUserEditor = currentUserMembership.role === BoardMembershipRoles.EDITOR;
+    isCurrentUserEditorOrCanComment = isCurrentUserEditor || currentUserMembership.canComment;
+  }
+
  return {
    name,
    description,
@@ -58,11 +66,8 @@ const mapStateToProps = (state) => {
    allProjectsToLists,
    allBoardMemberships,
    allLabels,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
-    canEditCommentActivities:
-      !!currentUserMembership &&
-      (currentUserMembership.role === BoardMembershipRoles.EDITOR ||
-        currentUserMembership.canComment),
+    canEdit: isCurrentUserEditor,
+    canEditCommentActivities: isCurrentUserEditorOrCanComment,
    canEditAllCommentActivities: isCurrentUserManager,
  };
 };
@@ -81,6 +86,7 @@ const mapDispatchToProps = (dispatch) =>
      onLabelRemove: entryActions.removeLabelFromCurrentCard,
      onLabelCreate: entryActions.createLabelInCurrentBoard,
      onLabelUpdate: entryActions.updateLabel,
+      onLabelMove: entryActions.moveLabel,
      onLabelDelete: entryActions.deleteLabel,
      onTaskCreate: entryActions.createTaskInCurrentCard,
      onTaskUpdate: entryActions.updateTask,
@@ -4,12 +4,16 @@ import selectors from '../selectors';
 import Core from '../components/Core';

 const mapStateToProps = (state) => {
+  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
+  const isSocketDisconnected = selectors.selectIsSocketDisconnected(state);
  const currentModal = selectors.selectCurrentModal(state);
  const currentProject = selectors.selectCurrentProject(state);

  return {
+    isSocketDisconnected,
    currentModal,
    currentProject,
+    isInitializing: isCoreInitializing,
  };
 };

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import CoreWrapper from '../components/CoreWrapper';
-
-const mapStateToProps = (state) => {
-  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
-
-  return {
-    isInitializing: isCoreInitializing,
-    isSocketDisconnected: state.socket.isDisconnected,
-  };
-};
-
-export default connect(mapStateToProps)(CoreWrapper);
@@ -15,14 +15,16 @@ const makeMapStateToProps = () => {
    const cardIds = selectCardIdsByListId(state, id);
    const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);

+    const isCurrentUserEditor =
+      !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
    return {
      id,
      index,
      name,
      isPersisted,
      cardIds,
-      canEdit:
-        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+      canEdit: isCurrentUserEditor,
    };
  };
 };
@@ -32,7 +34,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
    {
      onUpdate: (data) => entryActions.updateList(id, data),
      onDelete: () => entryActions.deleteList(id),
-      onCardCreate: (data) => entryActions.createCard(id, data),
+      onCardCreate: (data, autoOpen) => entryActions.createCard(id, data, autoOpen),
    },
    dispatch,
  );
@@ -4,12 +4,13 @@ import selectors from '../selectors';
 import Static from '../components/Static';

 const mapStateToProps = (state) => {
-  const { cardId, boardId, projectId } = selectors.selectPath(state);
+  const { cardId, projectId } = selectors.selectPath(state);
+  const currentBoard = selectors.selectCurrentBoard(state);

  return {
-    cardId,
-    boardId,
    projectId,
+    cardId,
+    board: currentBoard,
  };
 };

@@ -7,10 +7,11 @@ const createBoardInCurrentProject = (data) => ({
  },
 });

-const handleBoardCreate = (board) => ({
+const handleBoardCreate = (board, requestId) => ({
  type: EntryActionTypes.BOARD_CREATE_HANDLE,
  payload: {
    board,
+    requestId,
  },
 });

@@ -1,10 +1,11 @@
 import EntryActionTypes from '../constants/EntryActionTypes';

-const createCard = (listId, data) => ({
+const createCard = (listId, data, autoOpen) => ({
  type: EntryActionTypes.CARD_CREATE,
  payload: {
    listId,
    data,
+    autoOpen,
  },
 });

@@ -29,6 +29,14 @@ const handleLabelUpdate = (label) => ({
  },
 });

+const moveLabel = (id, index) => ({
+  type: EntryActionTypes.LABEL_MOVE,
+  payload: {
+    id,
+    index,
+  },
+});
+
 const deleteLabel = (id) => ({
  type: EntryActionTypes.LABEL_DELETE,
  payload: {
@@ -106,6 +114,7 @@ export default {
  handleLabelCreate,
  updateLabel,
  handleLabelUpdate,
+  moveLabel,
  deleteLabel,
  handleLabelDelete,
  addLabelToCard,
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history';
+
+export default createBrowserHistory();
@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';

-import store, { history } from './store';
+import store from './store';
+import history from './history';
 import Root from './components/Root';

 import './i18n';
@@ -3,9 +3,10 @@ import { Input as SemanticUIInput } from 'semantic-ui-react';
 import InputPassword from './InputPassword';
 import InputMask from './InputMask';

-const Input = SemanticUIInput;
+export default class Input extends SemanticUIInput {
+  static Password = InputPassword;

-Input.Password = InputPassword;
-Input.Mask = InputMask;
+  static Mask = InputMask;

-export default Input;
+  focus = (options) => this.inputRef.current.focus(options);
+}
@@ -1,8 +1,8 @@
 import InputMask from 'react-input-mask';

 export default class MaskedInput extends InputMask {
-  focus() {
-    this.getInputDOMNode().focus();
+  focus(options) {
+    this.getInputDOMNode().focus(options);
  }

  select() {
@@ -14,13 +14,12 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
  }, []);

  const linkRenderer = useCallback(
-    /* eslint-disable jsx-a11y/anchor-has-content,
-                      jsx-a11y/click-events-have-key-events,
-                      jsx-a11y/no-static-element-interactions,
-                      react/jsx-props-no-spreading */
    ({ node, ...linkProps }) => (
+      /* eslint-disable-next-line jsx-a11y/anchor-has-content,
+                                  jsx-a11y/click-events-have-key-events,
+                                  jsx-a11y/no-static-element-interactions */
      <a
-        {...linkProps}
+        {...linkProps} // eslint-disable-line react/jsx-props-no-spreading
        rel={
          ABSOLUTE_URL_REGEX.test(linkProps.href) && linkProps.target === '_blank'
            ? 'noreferrer'
@@ -29,10 +28,6 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
        onClick={linkStopPropagation ? handleLinkClick : undefined}
      />
    ),
-    /* eslint-enable jsx-a11y/anchor-has-content,
-                     jsx-a11y/click-events-have-key-events,
-                     jsx-a11y/no-static-element-interactions,
-                     react/jsx-props-no-spreading */
    [linkStopPropagation, handleLinkClick],
  );

@@ -6,7 +6,7 @@ import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 import styles from './Popup.module.css';

 export default (WrappedComponent, defaultProps) => {
-  const Popup = React.memo(({ children, ...props }) => {
+  const Popup = React.memo(({ children, onClose, ...props }) => {
    const [isOpened, setIsOpened] = useState(false);

    const wrapper = useRef(null);
@@ -18,7 +18,11 @@ export default (WrappedComponent, defaultProps) => {

    const handleClose = useCallback(() => {
      setIsOpened(false);
-    }, []);
+
+      if (onClose) {
+        onClose();
+      }
+    }, [onClose]);

    const handleMouseDown = useCallback((event) => {
      event.stopPropagation();
@@ -80,8 +84,10 @@ export default (WrappedComponent, defaultProps) => {
        popperModifiers={[
          {
            name: 'preventOverflow',
+            enabled: true,
            options: {
-              boundariesElement: 'window',
+              altAxis: true,
+              padding: 20,
            },
          },
        ]}
@@ -103,6 +109,11 @@ export default (WrappedComponent, defaultProps) => {

  Popup.propTypes = {
    children: PropTypes.node.isRequired,
+    onClose: PropTypes.func,
+  };
+
+  Popup.defaultProps = {
+    onClose: undefined,
  };

  return Popup;
@@ -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;
@@ -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');
@@ -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;
@@ -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;
@@ -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';
@@ -9,6 +9,7 @@ export default {

  translation: {
    common: {
+      aboutPlanka: 'About Planka',
      account: 'Account',
      actions: 'Actions',
      addAttachment_title: 'Add Attachment',
@@ -83,7 +84,7 @@ export default {
      editUsername_title: 'Edit Username',
      email: 'E-mail',
      emailAlreadyInUse: 'E-mail already in use',
-      enterCardTitle: 'Enter card title...',
+      enterCardTitle: 'Enter card title... [Ctrl+Enter] to auto-open',
      enterDescription: 'Enter description...',
      enterFilename: 'Enter filename',
      enterListTitle: 'Enter list title...',
@@ -92,8 +93,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 +204,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',
@@ -54,7 +54,7 @@ export default {
      createProject_title: 'Crea Progetto',
      createTextFile_title: 'Create File di Testo',
      currentPassword: 'Password corrente',
-      dangerZone_title: 'Danger Zone',
+      dangerZone_title: 'Zona pericolosa',
      date: 'Data',
      dueDate_title: 'Data di scadenza',
      deleteAttachment_title: 'Elimina Allegato',
@@ -219,10 +219,10 @@ export default {
      showAllAttachments: 'Mostra tutti gli allegati ({{hidden}} hidden)',
      showDetails: 'Mostra dettagli',
      showFewerAttachments: 'Mostra meno allegati',
-      start: 'Start',
-      stop: 'Stop',
-      subscribe: 'Subscribe',
-      unsubscribe: 'Unsubscribe',
+      start: 'Inizio',
+      stop: 'Ferma',
+      subscribe: 'Iscriviti',
+      unsubscribe: 'Annulla iscrizione',
      uploadNewAvatar: 'Carica nuovo avatar',
      uploadNewImage: 'Carica nuova immagine',
    },
@@ -2,13 +2,13 @@ export default {
  translation: {
    common: {
      emailOrUsername: 'E-mail o username',
-      invalidEmailOrUsername: 'E-mail or username invalido',
+      invalidEmailOrUsername: 'E-mail o username non valido',
      invalidPassword: 'Password non valida',
      logInToPlanka: 'Log in Planka',
      noInternetConnection: 'Nessuna connessione internet',
      pageNotFound_title: 'Pagina non trovata',
      password: 'Password',
-      projectManagement: 'Project management',
+      projectManagement: 'Gestione del progetto',
      serverConnectionFailed: 'Connesione al server fallita',
      unknownError: 'Errore sconosciuto, prova ancora',
    },
@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Activity';

  static fields = {
@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Attachment';

  static fields = {
@@ -0,0 +1,6 @@
+import { Model } from 'redux-orm';
+
+export default class BaseModel extends Model {
+  // eslint-disable-next-line no-underscore-dangle, class-methods-use-this
+  _onDelete() {}
+}
@@ -1,13 +1,13 @@
-import { Model, attr, fk, many } from 'redux-orm';
+import { attr, fk, many } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Board';

  static fields = {
    id: attr(),
-    type: attr(),
    position: attr(),
    name: attr(),
    isFetching: attr({
@@ -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:
-        Board.upsert({
-          ...payload.board,
-          isFetching: false,
-        });
+        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,
@@ -171,11 +175,15 @@ export default class extends Model {
    return this.memberships.orderBy('id');
  }

+  getOrderedLabelsQuerySet() {
+    return this.labels.orderBy('position');
+  }
+
  getOrderedListsQuerySet() {
    return this.lists.orderBy('position');
  }

-  getMembershipModel(userId) {
+  getMembershipModelForUser(userId) {
    return this.memberships
      .filter({
        userId,
@@ -183,7 +191,7 @@ export default class extends Model {
      .first();
  }

-  hasMemberUser(userId) {
+  hasMembershipForUser(userId) {
    return this.memberships
      .filter({
        userId,
@@ -191,6 +199,12 @@ export default class extends Model {
      .exists();
  }

+  isAvailableForUser(userId) {
+    return (
+      this.project && (this.project.hasManagerForUser(userId) || this.hasMembershipForUser(userId))
+    );
+  }
+
  deleteRelated(exceptMemberUserId) {
    this.memberships.toModelArray().forEach((boardMembershipModel) => {
      if (boardMembershipModel.userId !== exceptMemberUserId) {
@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'BoardMembership';

  static fields = {
@@ -1,10 +1,11 @@
-import { Model, attr, fk, many, oneToOne } from 'redux-orm';
+import { attr, fk, many, oneToOne } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 import Config from '../constants/Config';
 import { ActivityTypes } from '../constants/Enums';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Card';

  static fields = {
@@ -74,7 +75,11 @@ export default class extends Model {

        break;
      case ActionTypes.SOCKET_RECONNECT_HANDLE:
-        Card.all().delete();
+        Card.all()
+          .toModelArray()
+          .forEach((cardModel) => {
+            cardModel.deleteWithClearable();
+          });

        if (payload.cards) {
          payload.cards.forEach((card) => {
@@ -176,7 +181,7 @@ export default class extends Model {

        break;
      case ActionTypes.CARD_DELETE:
-        Card.withId(payload.id).delete();
+        Card.withId(payload.id).deleteWithRelated();

        break;
      case ActionTypes.CARD_DELETE__SUCCESS:
@@ -220,15 +225,7 @@ export default class extends Model {
          isActivitiesDetailsFetching: false,
        });

-        cardModel.activities.toModelArray().forEach((activityModel) => {
-          if (activityModel.notification) {
-            activityModel.update({
-              isInCard: false,
-            });
-          } else {
-            activityModel.delete();
-          }
-        });
+        cardModel.deleteActivities();

        break;
      }
@@ -268,10 +265,37 @@ export default class extends Model {
    });
  }

+  isAvailableForUser(userId) {
+    return this.board && this.board.isAvailableForUser(userId);
+  }
+
+  deleteClearable() {
+    this.users.clear();
+    this.labels.clear();
+  }
+
+  deleteActivities() {
+    this.activities.toModelArray().forEach((activityModel) => {
+      if (activityModel.notification) {
+        activityModel.update({
+          isInCard: false,
+        });
+      } else {
+        activityModel.delete();
+      }
+    });
+  }
+
  deleteRelated() {
+    this.deleteClearable();
    this.tasks.delete();
    this.attachments.delete();
-    this.activities.delete();
+    this.deleteActivities();
+  }
+
+  deleteWithClearable() {
+    this.deleteClearable();
+    this.delete();
  }

  deleteWithRelated() {
@@ -1,12 +1,14 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Label';

  static fields = {
    id: attr(),
+    position: attr(),
    name: attr(),
    color: attr(),
    boardId: fk({
@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'List';

  static fields = {
@@ -1,8 +1,9 @@
-import { Model, attr, fk, oneToOne } from 'redux-orm';
+import { attr, fk, oneToOne } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Notification';

  static fields = {
@@ -1,9 +1,10 @@
-import { Model, attr, many } from 'redux-orm';
+import { attr, many } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';
 import { ProjectBackgroundTypes } from '../constants/Enums';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'Project';

  static fields = {
@@ -143,21 +144,21 @@ export default class extends Model {
    return this.boards.orderBy('position');
  }

-  getOrderedMemberBoardsModelArray(userId) {
+  getOrderedBoardsModelArrayForUser(userId) {
    return this.getOrderedBoardsQuerySet()
      .toModelArray()
-      .filter((boardModel) => boardModel.hasMemberUser(userId));
+      .filter((boardModel) => boardModel.hasMembershipForUser(userId));
  }

-  getOrderedAvailableBoardsModelArray(userId) {
-    if (this.hasManagerUser(userId)) {
+  getOrderedBoardsModelArrayAvailableForUser(userId) {
+    if (this.hasManagerForUser(userId)) {
      return this.getOrderedBoardsQuerySet().toModelArray();
    }

-    return this.getOrderedMemberBoardsModelArray(userId);
+    return this.getOrderedBoardsModelArrayForUser(userId);
  }

-  hasManagerUser(userId) {
+  hasManagerForUser(userId) {
    return this.managers
      .filter({
        userId,
@@ -165,8 +166,12 @@ export default class extends Model {
      .exists();
  }

-  hasMemberUserForAnyBoard(userId) {
-    return this.boards.toModelArray().some((boardModel) => boardModel.hasMemberUser(userId));
+  hasMembershipInAnyBoardForUser(userId) {
+    return this.boards.toModelArray().some((boardModel) => boardModel.hasMembershipForUser(userId));
+  }
+
+  isAvailableForUser(userId) {
+    return this.hasManagerForUser(userId) || this.hasMembershipInAnyBoardForUser(userId);
  }

  deleteRelated() {
@@ -1,8 +1,9 @@
-import { Model, attr, fk } from 'redux-orm';
+import { attr, fk } from 'redux-orm';

+import BaseModel from './BaseModel';
 import ActionTypes from '../constants/ActionTypes';

-export default class extends Model {
+export default class extends BaseModel {
  static modelName = 'ProjectManager';

  static fields = {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maksim Eltyshev	3ad383fca6	chore: Update version	2023-01-09 12:35:08 +01:00
Maksim Eltyshev	38eab8b166	ref: Prettify eslint-disables	2023-01-09 12:33:49 +01:00
Maksim Eltyshev	aa69bb8d1e	feat: Labels reordering Closes #289	2023-01-09 12:17:06 +01:00
dependabot[bot]	d627a19935	chore(deps): Bump json5 from 1.0.1 to 1.0.2 in /client (#370 ) Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-01-09 02:26:00 +05:00
dependabot[bot]	b7cf1853f5	chore(deps): Bump json5 from 1.0.1 to 1.0.2 in /server (#369 ) Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-01-09 02:23:01 +05:00
dependabot[bot]	4850fc5fc8	chore(deps): Bump jsonwebtoken from 8.5.1 to 9.0.0 in /server (#357 ) Bumps [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) from 8.5.1 to 9.0.0. - [Release notes](https://github.com/auth0/node-jsonwebtoken/releases) - [Changelog](https://github.com/auth0/node-jsonwebtoken/blob/master/CHANGELOG.md) - [Commits](https://github.com/auth0/node-jsonwebtoken/compare/v8.5.1...v9.0.0) --- updated-dependencies: - dependency-name: jsonwebtoken dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-01-09 02:20:25 +05:00
Maksim Eltyshev	1dfd6972bf	Merge branch 'master' of https://github.com/plankanban/planka	2023-01-08 22:11:20 +01:00
Maksim Eltyshev	b58b91baa1	ref: Little refactoring	2023-01-08 22:10:41 +01:00
RAR	ed89fe5351	feat: Open card once created with Ctrl+Enter (#373 )	2023-01-09 01:59:24 +05:00
Maksim Eltyshev	6021d67a00	fix: Subscribe only when needed	2023-01-05 15:03:06 +01:00
RAR	58afeb1e6b	fix: Fix npm install errors on Windows (#368 )	2023-01-05 18:16:55 +05:00
albanobattistella	7182a09931	fix: Update Italian translation (#363 )	2023-01-03 03:16:35 +05:00
Maksim Eltyshev	33765dfe8a	chore: Update version	2022-12-26 22:56:13 +01:00
Maksim Eltyshev	d21dee05a3	fix: Show completed tasks greyed out	2022-12-26 22:55:04 +01:00
Maksim Eltyshev	1dacd6e700	fix: Prevent scroll when focusing	2022-12-26 22:51:17 +01:00
Maksim Eltyshev	7e07a75124	fix: Improve quality of resized images	2022-12-26 22:43:21 +01:00
Maksim Eltyshev	6ffa817b53	ref: Remove board types, refactoring	2022-12-26 21:10:50 +01:00
Maksim Eltyshev	2b131f76c1	fix: Proper image error handling during migration	2022-12-24 16:24:50 +01:00
Maksim Eltyshev	2bc82d557a	fix: Fix image size for animated attachments	2022-12-24 02:59:03 +01:00
Maksim Eltyshev	7c99aeb9e1	chore: Update version	2022-12-24 01:04:46 +01:00
Maksim Eltyshev	8d477af498	fix: Fix active tab style	2022-12-24 01:03:36 +01:00
Maksim Eltyshev	32507f2799	fix: Add missing translation key	2022-12-24 01:00:57 +01:00
Maksim Eltyshev	0a5210dd21	feat: Preserve original format of images, change interpolation kernel Closes #349	2022-12-24 00:47:59 +01:00
Maksim Eltyshev	b82a601f46	fix: Increase height of scroll area in popups	2022-12-21 22:57:04 +01:00
Maksim Eltyshev	c658665ee8	meta: Update import from Trello	2022-12-17 00:09:43 +01:00
Maksim Eltyshev	a37bad4867	chore: Update version	2022-12-16 23:55:19 +01:00
Christoph Enne	738ed19e7f	feat: Trello board JSON import (#352 ) Closes #27, closes #105	2022-12-17 03:48:06 +05:00
Maksim Eltyshev	9ce8b2ab9c	chore: Update version	2022-12-16 17:06:35 +01:00
Maksim Eltyshev	a8d312922a	fix: Fix error on initial loading Closes #347	2022-12-16 17:05:03 +01:00
Maksim Eltyshev	90c8b4d548	chore: Update version	2022-12-15 01:39:00 +01:00
Maksim Eltyshev	4941b51fa4	fix: Prevent popup from overflowing	2022-12-15 01:38:03 +01:00
Maksim Eltyshev	a858419f3c	fix: Fix router synchronization with redux store	2022-12-15 01:34:48 +01:00