From 0df8acdc1c39e576098ea621978b685769cdc81d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Oliveira?=
 <oliveira.andrerodrigues95@gmail.com>
Date: Tue, 19 Jul 2022 16:14:56 +0100
Subject: [PATCH 1/2] test: first try

---
 .../workspaces/components/WorkspaceDrawer.jsx | 85 +++++++++++++++----
 ...eDrawerItem.js => WorkspaceDrawerItem.jsx} |  0
 src/styles/vertical.scss                      | 25 ++++++
 3 files changed, 93 insertions(+), 17 deletions(-)
 rename src/features/workspaces/components/{WorkspaceDrawerItem.js => WorkspaceDrawerItem.jsx} (100%)

diff --git a/src/features/workspaces/components/WorkspaceDrawer.jsx b/src/features/workspaces/components/WorkspaceDrawer.jsx
index b0b0e639ab..00fb2e3f90 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.jsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.jsx
@@ -5,7 +5,7 @@ import injectSheet from 'react-jss';
 import { defineMessages, injectIntl } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiCog } from '@mdi/js';
+import { mdiPlusBox, mdiCog, mdiMenuUp, mdiMenuDown } from '@mdi/js';
 
 import { H1 } from '../../../components/ui/headline';
 import Icon from '../../../components/ui/icon';
@@ -64,7 +64,7 @@ const styles = theme => ({
   },
   workspaces: {
     height: 'auto',
-    overflowY: 'auto',
+    overflowY: 'visible',
   },
   addNewWorkspaceLabel: {
     height: 'auto',
@@ -104,6 +104,27 @@ class WorkspaceDrawer extends Component {
     }
   }
 
+  handleClick(e, workspaces, index) {
+    switch (e) {
+      case 'goUp':
+        if (index !== 0) {
+          const toIndex = index - 1;
+          const element = workspaces.splice(index, 1)[0];
+          workspaces.splice(toIndex, 0, element);
+        }
+        break;
+      case 'goDown':
+        if (index !== workspaces.length - 1) {
+          const toIndex = index + 1;
+          const element = workspaces.splice(index, 1)[0];
+          workspaces.splice(toIndex, 0, element);
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
   render() {
     const { classes, getServicesForWorkspace } = this.props;
     const { intl } = this.props;
@@ -144,21 +165,51 @@ class WorkspaceDrawer extends Component {
             shortcutIndex={0}
           />
           {workspaces.map((workspace, index) => (
-            <WorkspaceDrawerItem
-              key={workspace.id}
-              name={workspace.name}
-              isActive={actualWorkspace === workspace}
-              onClick={() => {
-                if (actualWorkspace === workspace) return;
-                workspaceActions.activate({ workspace });
-                workspaceActions.toggleWorkspaceDrawer();
-              }}
-              onContextMenuEditClick={() =>
-                workspaceActions.edit({ workspace })
-              }
-              services={getServicesForWorkspace(workspace)}
-              shortcutIndex={index + 1}
-            />
+            <div className="wrapper-workspaces-drawer-item">
+              <div className="wrapper-workspaces-drawer-item__workspaces">
+                <WorkspaceDrawerItem
+                  key={workspace.id}
+                  name={workspace.name}
+                  isActive={actualWorkspace === workspace}
+                  onClick={() => {
+                    if (actualWorkspace === workspace) return;
+                    workspaceActions.activate({ workspace });
+                    workspaceActions.toggleWorkspaceDrawer();
+                  }}
+                  onContextMenuEditClick={() =>
+                    workspaceActions.edit({ workspace })
+                  }
+                  services={getServicesForWorkspace(workspace)}
+                  shortcutIndex={index + 1}
+                  workspaces={workspaces}
+                  className="wrapper-workspaces-drawer-item__workspace"
+                />
+              </div>
+              <div className="wrapper-workspaces-drawer-item__buttons">
+                {index !== 0 && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      this.handleClick('goUp', workspaces, index);
+                    }}
+                    className="button-up"
+                  >
+                    <Icon icon={mdiMenuUp} size={1.5} />
+                  </button>
+                )}
+                {index !== workspaces.length - 1 && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      this.handleClick('goDown', workspaces, index);
+                    }}
+                    className="button-down"
+                  >
+                    <Icon icon={mdiMenuDown} size={1.5} />
+                  </button>
+                )}
+              </div>
+            </div>
           ))}
           <div
             className={classes.addNewWorkspaceLabel}
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.jsx
similarity index 100%
rename from src/features/workspaces/components/WorkspaceDrawerItem.js
rename to src/features/workspaces/components/WorkspaceDrawerItem.jsx
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 87bbae1b07..0cb12f20a5 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -96,6 +96,31 @@ $tabitem-bias: 30px;
   }
 }
 
+.wrapper-workspaces-drawer-item {
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  width: 107%;
+
+  &__workspaces {
+    display: flex;
+    flex-basis: 100%;
+
+    & > div {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+  &__buttons {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    top: 0;
+    right: 9%;
+    bottom: 0;
+  }
+}
+
 .theme__dark {
   .sidebar .sidebar__button--workspaces.is-active {
     background-color: #2d2f31;

From 63568d33991620c4ea0f8039b08302cbd3d87fa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Oliveira?=
 <oliveira.andrerodrigues95@gmail.com>
Date: Wed, 20 Jul 2022 16:49:09 +0100
Subject: [PATCH 2/2] refactor: lint issue

---
 src/features/workspaces/components/WorkspaceDrawer.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/workspaces/components/WorkspaceDrawer.jsx b/src/features/workspaces/components/WorkspaceDrawer.jsx
index 00fb2e3f90..2f37a10db8 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.jsx
+++ b/src/features/workspaces/components/WorkspaceDrawer.jsx
@@ -172,7 +172,9 @@ class WorkspaceDrawer extends Component {
                   name={workspace.name}
                   isActive={actualWorkspace === workspace}
                   onClick={() => {
-                    if (actualWorkspace === workspace) return;
+                    if (actualWorkspace === workspace) {
+                      return;
+                    }
                     workspaceActions.activate({ workspace });
                     workspaceActions.toggleWorkspaceDrawer();
                   }}