add workspaces count badge in settings navigation

7 files changed, 21 insertions, 17 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 4a80bb126..3f570f3b6 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -39,6 +39,7 @@ const messages = defineMessages({
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
     serviceCount: PropTypes.number.isRequired,
+    workspaceCount: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -46,7 +47,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount } = this.props;
+    const { serviceCount, workspaceCount } = this.props;
     const { intl } = this.context;
 
     return (
@@ -74,6 +75,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         >
           {intl.formatMessage(messages.yourWorkspaces)}
           {' '}
+          <span className="badge">{workspaceCount}</span>
         </Link>
         <Link
           to="/settings/user"
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 6d9e0ee77..8cbde24c1 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -7,6 +7,7 @@ import ServicesStore from '../../stores/ServicesStore';
 import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { workspacesState } from '../../features/workspaces/state';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
   render() {
@@ -16,6 +17,7 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     const navigation = (
       <Navigation
         serviceCount={stores.services.all.length}
+        workspaceCount={workspacesState.workspaces.length}
       />
     );
 
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 5a8d5d854..c18eb0e11 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -9,7 +9,6 @@ import ReactTooltip from 'react-tooltip';
 import { workspacesState } from '../state';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
-import { ctrlKey } from '../../../environment';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index d4d2a55cc..480f5c6cb 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3326,39 +3326,39 @@
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 17
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 21
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.allServices",
         "start": {
           "column": 15,
-          "line": 19
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Add workspace",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 25
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.addWorkspaceTooltip",
         "start": {
           "column": 23,
-          "line": 23
+          "line": 22
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f7b5fe2b8..4206d4358 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -305,4 +305,4 @@
   "workspaceDrawer.headline": "Workspaces",
   "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index 7026708e2..4e3237164 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 15,
+      "line": 14,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!All services",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 19,
+      "line": 18,
       "column": 15
     },
     "end": {
-      "line": 22,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Add workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 23,
+      "line": 22,
       "column": 23
     },
     "end": {
-      "line": 26,
+      "line": 25,
       "column": 3
     }
   }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 750b6bedd..9fde9a7bf 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -68,7 +68,7 @@
       }
     }
 
-    .premium-info { 
+    .premium-info {
       background: $dark-theme-gray-darker;
       border: 2px solid $theme-brand-primary;
     }
@@ -414,6 +414,7 @@
 
   .settings-navigation__link {
     align-items: center;
+    justify-content: space-between;
     color: $theme-text-color;
     display: flex;
     flex-shrink: 0;
@@ -442,8 +443,8 @@
   .settings-navigation__expander { flex: 1; }
 
   .badge {
+
     display: initial;
-    margin-left: 5px;
     transition: background $theme-transition-time, color $theme-transition-time;
   }