diff options
Diffstat (limited to 'src/components/settings/navigation/SettingsNavigation.js')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 29 |
1 files changed, 28 insertions, 1 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 0be1a22ba..cab6f23d7 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -2,8 +2,11 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { ProBadge } from '@meetfranz/ui'; | ||
5 | 6 | ||
6 | import Link from '../../ui/Link'; | 7 | import Link from '../../ui/Link'; |
8 | import { workspaceStore } from '../../../features/workspaces'; | ||
9 | import UIStore from '../../../stores/UIStore'; | ||
7 | 10 | ||
8 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
9 | availableServices: { | 12 | availableServices: { |
@@ -14,6 +17,10 @@ const messages = defineMessages({ | |||
14 | id: 'settings.navigation.yourServices', | 17 | id: 'settings.navigation.yourServices', |
15 | defaultMessage: '!!!Your services', | 18 | defaultMessage: '!!!Your services', |
16 | }, | 19 | }, |
20 | yourWorkspaces: { | ||
21 | id: 'settings.navigation.yourWorkspaces', | ||
22 | defaultMessage: '!!!Your workspaces', | ||
23 | }, | ||
17 | account: { | 24 | account: { |
18 | id: 'settings.navigation.account', | 25 | id: 'settings.navigation.account', |
19 | defaultMessage: '!!!Account', | 26 | defaultMessage: '!!!Account', |
@@ -38,7 +45,11 @@ const messages = defineMessages({ | |||
38 | 45 | ||
39 | export default @inject('stores') @observer class SettingsNavigation extends Component { | 46 | export default @inject('stores') @observer class SettingsNavigation extends Component { |
40 | static propTypes = { | 47 | static propTypes = { |
48 | stores: PropTypes.shape({ | ||
49 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
50 | }).isRequired, | ||
41 | serviceCount: PropTypes.number.isRequired, | 51 | serviceCount: PropTypes.number.isRequired, |
52 | workspaceCount: PropTypes.number.isRequired, | ||
42 | }; | 53 | }; |
43 | 54 | ||
44 | static contextTypes = { | 55 | static contextTypes = { |
@@ -46,7 +57,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
46 | }; | 57 | }; |
47 | 58 | ||
48 | render() { | 59 | render() { |
49 | const { serviceCount } = this.props; | 60 | const { serviceCount, workspaceCount, stores } = this.props; |
61 | const { isDarkThemeActive } = stores.ui; | ||
50 | const { intl } = this.context; | 62 | const { intl } = this.context; |
51 | 63 | ||
52 | return ( | 64 | return ( |
@@ -67,6 +79,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
67 | {' '} | 79 | {' '} |
68 | <span className="badge">{serviceCount}</span> | 80 | <span className="badge">{serviceCount}</span> |
69 | </Link> | 81 | </Link> |
82 | {workspaceStore.isFeatureEnabled ? ( | ||
83 | <Link | ||
84 | to="/settings/workspaces" | ||
85 | className="settings-navigation__link" | ||
86 | activeClassName="is-active" | ||
87 | > | ||
88 | {intl.formatMessage(messages.yourWorkspaces)} | ||
89 | {' '} | ||
90 | {workspaceStore.isPremiumUpgradeRequired ? ( | ||
91 | <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} /> | ||
92 | ) : ( | ||
93 | <span className="badge">{workspaceCount}</span> | ||
94 | )} | ||
95 | </Link> | ||
96 | ) : null} | ||
70 | <Link | 97 | <Link |
71 | to="/settings/user" | 98 | to="/settings/user" |
72 | className="settings-navigation__link" | 99 | className="settings-navigation__link" |