feat: Add create-board button to open-board screen (#1438)

Closes #1435

client/src/components/boards/AddBoardStep/AddBoardStep.jsx

@@ -9,20 +9,20 @@ import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Icon } from 'semantic-ui-react';
-import { useDidUpdate, useToggle } from '../../../../lib/hooks';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
-import { Input, Popup } from '../../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
-import entryActions from '../../../../entry-actions';
+import entryActions from '../../../entry-actions';
-import { useForm, useNestedRef, useSteps } from '../../../../hooks';
+import { useForm, useNestedRef, useSteps } from '../../../hooks';
 import ImportStep from './ImportStep';
 
-import styles from './AddStep.module.scss';
+import styles from './AddBoardStep.module.scss';
 
 const StepTypes = {
   IMPORT: 'IMPORT',
 };
 
-const AddStep = React.memo(({ onClose }) => {
+const AddBoardStep = React.memo(({ onClose }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
 
@@ -123,8 +123,8 @@ const AddStep = React.memo(({ onClose }) => {
   );
 });
 
-AddStep.propTypes = {
+AddBoardStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddStep;
+export default AddBoardStep;

client/src/components/boards/AddBoardStep/ImportStep.jsx

@@ -7,7 +7,7 @@ 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 { FilePicker, Popup } from '../../../lib/custom-ui';
 
 import styles from './ImportStep.module.scss';
 

client/src/components/boards/AddBoardStep/index.js

@@ -3,6 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import AddStep from './AddStep';
+import AddBoardStep from './AddBoardStep';
 
-export default AddStep;
+export default AddBoardStep;

client/src/components/boards/Boards/Boards.jsx

@@ -13,7 +13,7 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import DroppableTypes from '../../../constants/DroppableTypes';
 import Item from './Item';
-import AddStep from './AddStep';
+import AddBoardStep from '../AddBoardStep';
 
 import styles from './Boards.module.scss';
 import globalStyles from '../../../styles.module.scss';
@@ -59,7 +59,7 @@ const Boards = React.memo(() => {
     });
   }, []);
 
-  const AddPopup = usePopup(AddStep);
+  const AddBoardPopup = usePopup(AddBoardStep);
 
   return (
     <div className={styles.wrapper} onWheel={handleWheel}>
@@ -74,9 +74,9 @@ const Boards = React.memo(() => {
                 ))}
                 {placeholder}
                 {canAdd && (
-                  <AddPopup>
+                  <AddBoardPopup>
                     <Button icon="plus" className={styles.addButton} />
-                  </AddPopup>
+                  </AddBoardPopup>
                 )}
               </div>
             )}

client/src/components/common/Static/Static.jsx

@@ -7,14 +7,16 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { useTranslation, Trans } from 'react-i18next';
-import { Icon, Loader } from 'semantic-ui-react';
+import { Button, Icon, Loader } from 'semantic-ui-react';
 import { useTransitioning } from '../../../lib/hooks';
+import { usePopup } from '../../../lib/popup';
 
 import selectors from '../../../selectors';
 import { BoardViews } from '../../../constants/Enums';
 import Home from '../Home';
 import GhostError from '../GhostError';
 import Board from '../../boards/Board';
+import AddBoardStep from '../../boards/AddBoardStep';
 
 import styles from './Static.module.scss';
 
@@ -24,6 +26,10 @@ const Static = React.memo(() => {
   const isFetching = useSelector(selectors.selectIsContentFetching);
   const isFavoritesActive = useSelector(selectors.selectIsFavoritesActiveForCurrentUser);
 
+  const canAddBoard = useSelector((state) =>
+    selectors.selectIsCurrentUserManagerForCurrentProject(state),
+  );
+
   const [t] = useTranslation();
 
   const wrapperRef = useRef(null);
@@ -32,6 +38,8 @@ const Static = React.memo(() => {
     isFavoritesActive,
   ]);
 
+  const AddBoardPopup = usePopup(AddBoardStep);
+
   let wrapperClassNames;
   let contentNode;
 
@@ -67,6 +75,14 @@ const Static = React.memo(() => {
         <div className={styles.messageContent}>
           <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
         </div>
+        {canAddBoard && (
+          <AddBoardPopup>
+            <Button basic positive size="large" className={styles.button}>
+              <Icon name="plus" />
+              {t('action.createBoard')}
+            </Button>
+          </AddBoardPopup>
+        )}
       </div>
     );
   } else if (board.isFetching) {

client/src/components/common/Static/Static.module.scss

@@ -4,6 +4,11 @@
  */
 
 :global(#app) {
+  .button {
+    margin-top: 24px;
+    padding: 0.78571429em 1.5em 0.78571429em;
+  }
+
   .message {
     align-content: space-between;
     align-items: center;