diff options
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/basicAuth/Component.js | 41 | ||||
-rw-r--r-- | src/features/nightlyBuilds/Component.js | 26 | ||||
-rw-r--r-- | src/features/publishDebugInfo/Component.js | 94 | ||||
-rw-r--r-- | src/features/quickSwitch/Component.js | 67 | ||||
-rw-r--r-- | src/features/webControls/components/WebControls.js | 20 | ||||
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.js | 21 | ||||
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 34 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 54 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 21 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceItem.js | 14 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 12 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 26 |
12 files changed, 201 insertions, 229 deletions
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js index a9601836b..3cf937f98 100644 --- a/src/features/basicAuth/Component.js +++ b/src/features/basicAuth/Component.js | |||
@@ -2,19 +2,14 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import injectSheet from 'react-jss'; | 3 | import injectSheet from 'react-jss'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | 7 | ||
8 | import Modal from '../../components/ui/Modal'; | 8 | import Modal from '../../components/ui/Modal'; |
9 | import Input from '../../components/ui/Input'; | 9 | import Input from '../../components/ui/Input'; |
10 | import Button from '../../components/ui/Button'; | 10 | import Button from '../../components/ui/Button'; |
11 | 11 | ||
12 | import { | 12 | import { state, resetState, sendCredentials, cancelLogin } from './store'; |
13 | state, | ||
14 | resetState, | ||
15 | sendCredentials, | ||
16 | cancelLogin, | ||
17 | } from './store'; | ||
18 | import Form from './Form'; | 13 | import Form from './Form'; |
19 | 14 | ||
20 | import styles from './styles'; | 15 | import styles from './styles'; |
@@ -23,17 +18,15 @@ import globalMessages from '../../i18n/globalMessages'; | |||
23 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
24 | signIn: { | 19 | signIn: { |
25 | id: 'feature.basicAuth.signIn', | 20 | id: 'feature.basicAuth.signIn', |
26 | defaultMessage: '!!!Sign In', | 21 | defaultMessage: 'Sign In', |
27 | }, | 22 | }, |
28 | }); | 23 | }); |
29 | 24 | ||
30 | export default @injectSheet(styles) @observer class BasicAuthModal extends Component { | 25 | @injectSheet(styles) |
26 | @observer | ||
27 | class BasicAuthModal extends Component { | ||
31 | static propTypes = { | 28 | static propTypes = { |
32 | classes: PropTypes.object.isRequired, | 29 | classes: PropTypes.object.isRequired, |
33 | } | ||
34 | |||
35 | static contextTypes = { | ||
36 | intl: intlShape, | ||
37 | }; | 30 | }; |
38 | 31 | ||
39 | submit(e) { | 32 | submit(e) { |
@@ -56,20 +49,15 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo | |||
56 | } | 49 | } |
57 | 50 | ||
58 | render() { | 51 | render() { |
59 | const { | 52 | const { classes } = this.props; |
60 | classes, | ||
61 | } = this.props; | ||
62 | 53 | ||
63 | const { | 54 | const { isModalVisible, authInfo } = state; |
64 | isModalVisible, | ||
65 | authInfo, | ||
66 | } = state; | ||
67 | 55 | ||
68 | if (!authInfo) { | 56 | if (!authInfo) { |
69 | return null; | 57 | return null; |
70 | } | 58 | } |
71 | 59 | ||
72 | const { intl } = this.context; | 60 | const { intl } = this.props; |
73 | 61 | ||
74 | return ( | 62 | return ( |
75 | <Modal | 63 | <Modal |
@@ -89,10 +77,7 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo | |||
89 | onSubmit={this.submit.bind(this)} | 77 | onSubmit={this.submit.bind(this)} |
90 | className={classnames('franz-form', classes.form)} | 78 | className={classnames('franz-form', classes.form)} |
91 | > | 79 | > |
92 | <Input | 80 | <Input field={Form.$('user')} showLabel={false} /> |
93 | field={Form.$('user')} | ||
94 | showLabel={false} | ||
95 | /> | ||
96 | <Input | 81 | <Input |
97 | field={Form.$('password')} | 82 | field={Form.$('password')} |
98 | showLabel={false} | 83 | showLabel={false} |
@@ -105,13 +90,11 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo | |||
105 | buttonType="secondary" | 90 | buttonType="secondary" |
106 | onClick={this.cancel.bind(this)} | 91 | onClick={this.cancel.bind(this)} |
107 | /> | 92 | /> |
108 | <Button | 93 | <Button type="submit" label={intl.formatMessage(messages.signIn)} /> |
109 | type="submit" | ||
110 | label={intl.formatMessage(messages.signIn)} | ||
111 | /> | ||
112 | </div> | 94 | </div> |
113 | </form> | 95 | </form> |
114 | </Modal> | 96 | </Modal> |
115 | ); | 97 | ); |
116 | } | 98 | } |
117 | } | 99 | } |
100 | export default injectIntl(BasicAuthModal); | ||
diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js index e43287db5..814d529d9 100644 --- a/src/features/nightlyBuilds/Component.js +++ b/src/features/nightlyBuilds/Component.js | |||
@@ -2,7 +2,7 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, inject } from 'mobx-react'; | 3 | import { observer, inject } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import { H1 } from '@meetfranz/ui'; | 6 | import { H1 } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import Modal from '../../components/ui/Modal'; | 8 | import Modal from '../../components/ui/Modal'; |
@@ -16,15 +16,16 @@ import globalMessages from '../../i18n/globalMessages'; | |||
16 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
17 | title: { | 17 | title: { |
18 | id: 'feature.nightlyBuilds.title', | 18 | id: 'feature.nightlyBuilds.title', |
19 | defaultMessage: '!!!Nightly Builds', | 19 | defaultMessage: 'Nightly Builds', |
20 | }, | 20 | }, |
21 | info: { | 21 | info: { |
22 | id: 'feature.nightlyBuilds.info', | 22 | id: 'feature.nightlyBuilds.info', |
23 | defaultMessage: '!!!Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don\'t know what you are doing, we suggest not activating nightly builds.', | 23 | defaultMessage: |
24 | "Nightly builds are highly experimental versions of Ferdi that may contain unpolished or uncompleted features. These nightly builds are mainly used by developers to test their newly developed features and how they will perform in the final build. If you don't know what you are doing, we suggest not activating nightly builds.", | ||
24 | }, | 25 | }, |
25 | activate: { | 26 | activate: { |
26 | id: 'feature.nightlyBuilds.activate', | 27 | id: 'feature.nightlyBuilds.activate', |
27 | defaultMessage: '!!!Activate', | 28 | defaultMessage: 'Activate', |
28 | }, | 29 | }, |
29 | }); | 30 | }); |
30 | 31 | ||
@@ -52,11 +53,10 @@ const styles = () => ({ | |||
52 | }, | 53 | }, |
53 | }); | 54 | }); |
54 | 55 | ||
55 | export default @injectSheet(styles) @inject('stores', 'actions') @observer class NightlyBuildsModal extends Component { | 56 | @injectSheet(styles) |
56 | static contextTypes = { | 57 | @inject('stores', 'actions') |
57 | intl: intlShape, | 58 | @observer |
58 | }; | 59 | class NightlyBuildsModal extends Component { |
59 | |||
60 | close() { | 60 | close() { |
61 | ModalState.isModalVisible = false; | 61 | ModalState.isModalVisible = false; |
62 | 62 | ||
@@ -84,11 +84,9 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
84 | render() { | 84 | render() { |
85 | const { isModalVisible } = ModalState; | 85 | const { isModalVisible } = ModalState; |
86 | 86 | ||
87 | const { | 87 | const { classes } = this.props; |
88 | classes, | ||
89 | } = this.props; | ||
90 | 88 | ||
91 | const { intl } = this.context; | 89 | const { intl } = this.props; |
92 | 90 | ||
93 | return ( | 91 | return ( |
94 | <Modal | 92 | <Modal |
@@ -132,3 +130,5 @@ NightlyBuildsModal.wrappedComponent.propTypes = { | |||
132 | }).isRequired, | 130 | }).isRequired, |
133 | classes: PropTypes.object.isRequired, | 131 | classes: PropTypes.object.isRequired, |
134 | }; | 132 | }; |
133 | |||
134 | export default injectIntl(NightlyBuildsModal); | ||
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js index 5387bd358..5b5036752 100644 --- a/src/features/publishDebugInfo/Component.js +++ b/src/features/publishDebugInfo/Component.js | |||
@@ -2,7 +2,7 @@ import { H1 } from '@meetfranz/ui'; | |||
2 | import { inject, observer } from 'mobx-react'; | 2 | import { inject, observer } from 'mobx-react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import React, { Component } from 'react'; | 4 | import React, { Component } from 'react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { state as ModalState } from './store'; | 7 | import { state as ModalState } from './store'; |
8 | import { sendAuthRequest } from '../../api/utils/auth'; | 8 | import { sendAuthRequest } from '../../api/utils/auth'; |
@@ -18,35 +18,37 @@ const debug = require('debug')('Ferdi:feature:publishDebugInfo'); | |||
18 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
19 | title: { | 19 | title: { |
20 | id: 'feature.publishDebugInfo.title', | 20 | id: 'feature.publishDebugInfo.title', |
21 | defaultMessage: '!!!Publish debug information', | 21 | defaultMessage: 'Publish debug information', |
22 | }, | 22 | }, |
23 | info: { | 23 | info: { |
24 | id: 'feature.publishDebugInfo.info', | 24 | id: 'feature.publishDebugInfo.info', |
25 | defaultMessage: '!!!Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger\'s privacy policy and terms of service', | 25 | defaultMessage: |
26 | "Publishing your debug information helps us find issues and errors in Ferdi. By publishing your debug information you accept Ferdi Debugger's privacy policy and terms of service", | ||
26 | }, | 27 | }, |
27 | error: { | 28 | error: { |
28 | id: 'feature.publishDebugInfo.error', | 29 | id: 'feature.publishDebugInfo.error', |
29 | defaultMessage: '!!!There was an error while trying to publish the debug information. Please try again later or view the console for more information.', | 30 | defaultMessage: |
31 | 'There was an error while trying to publish the debug information. Please try again later or view the console for more information.', | ||
30 | }, | 32 | }, |
31 | privacy: { | 33 | privacy: { |
32 | id: 'feature.publishDebugInfo.privacy', | 34 | id: 'feature.publishDebugInfo.privacy', |
33 | defaultMessage: '!!!Privacy policy', | 35 | defaultMessage: 'Privacy policy', |
34 | }, | 36 | }, |
35 | terms: { | 37 | terms: { |
36 | id: 'feature.publishDebugInfo.terms', | 38 | id: 'feature.publishDebugInfo.terms', |
37 | defaultMessage: '!!!Terms of service', | 39 | defaultMessage: 'Terms of service', |
38 | }, | 40 | }, |
39 | publish: { | 41 | publish: { |
40 | id: 'feature.publishDebugInfo.publish', | 42 | id: 'feature.publishDebugInfo.publish', |
41 | defaultMessage: '!!!Accept and publish', | 43 | defaultMessage: 'Accept and publish', |
42 | }, | 44 | }, |
43 | published: { | 45 | published: { |
44 | id: 'feature.publishDebugInfo.published', | 46 | id: 'feature.publishDebugInfo.published', |
45 | defaultMessage: '!!!Your debug log was published and is now availible at', | 47 | defaultMessage: 'Your debug log was published and is now availible at', |
46 | }, | 48 | }, |
47 | }); | 49 | }); |
48 | 50 | ||
49 | const styles = (theme) => ({ | 51 | const styles = theme => ({ |
50 | container: { | 52 | container: { |
51 | minWidth: '70vw', | 53 | minWidth: '70vw', |
52 | }, | 54 | }, |
@@ -69,7 +71,8 @@ const styles = (theme) => ({ | |||
69 | width: '100%', | 71 | width: '100%', |
70 | 72 | ||
71 | '& div': { | 73 | '& div': { |
72 | fontFamily: 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | 74 | fontFamily: |
75 | 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace', | ||
73 | }, | 76 | }, |
74 | 77 | ||
75 | '& input': { | 78 | '& input': { |
@@ -81,20 +84,19 @@ const styles = (theme) => ({ | |||
81 | }, | 84 | }, |
82 | }); | 85 | }); |
83 | 86 | ||
84 | export default @injectSheet(styles) @inject('stores', 'actions') @observer class PublishDebugLogModal extends Component { | 87 | @injectSheet(styles) |
88 | @inject('stores', 'actions') | ||
89 | @observer | ||
90 | class PublishDebugLogModal extends Component { | ||
85 | static propTypes = { | 91 | static propTypes = { |
86 | classes: PropTypes.object.isRequired, | 92 | classes: PropTypes.object.isRequired, |
87 | }; | 93 | }; |
88 | 94 | ||
89 | static contextTypes = { | ||
90 | intl: intlShape, | ||
91 | }; | ||
92 | |||
93 | state = { | 95 | state = { |
94 | log: null, | 96 | log: null, |
95 | error: false, | 97 | error: false, |
96 | isSendingLog: false, | 98 | isSendingLog: false, |
97 | } | 99 | }; |
98 | 100 | ||
99 | // Close this modal | 101 | // Close this modal |
100 | close() { | 102 | close() { |
@@ -109,12 +111,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
109 | 111 | ||
110 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); | 112 | const debugInfo = JSON.stringify(this.props.stores.app.debugInfo); |
111 | 113 | ||
112 | const request = await sendAuthRequest(`${DEBUG_API}/create`, { | 114 | const request = await sendAuthRequest( |
113 | method: 'POST', | 115 | `${DEBUG_API}/create`, |
114 | body: JSON.stringify({ | 116 | { |
115 | log: debugInfo, | 117 | method: 'POST', |
116 | }), | 118 | body: JSON.stringify({ |
117 | }, false); | 119 | log: debugInfo, |
120 | }), | ||
121 | }, | ||
122 | false, | ||
123 | ); | ||
118 | 124 | ||
119 | debug(`debugInfo: publishing status: ${request.status}`); | 125 | debug(`debugInfo: publishing status: ${request.status}`); |
120 | if (request.status === 200) { | 126 | if (request.status === 200) { |
@@ -140,17 +146,11 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
140 | render() { | 146 | render() { |
141 | const { isModalVisible } = ModalState; | 147 | const { isModalVisible } = ModalState; |
142 | 148 | ||
143 | const { | 149 | const { classes } = this.props; |
144 | classes, | ||
145 | } = this.props; | ||
146 | 150 | ||
147 | const { | 151 | const { log, error, isSendingLog } = this.state; |
148 | log, | ||
149 | error, | ||
150 | isSendingLog, | ||
151 | } = this.state; | ||
152 | 152 | ||
153 | const { intl } = this.context; | 153 | const { intl } = this.props; |
154 | 154 | ||
155 | return ( | 155 | return ( |
156 | <Modal | 156 | <Modal |
@@ -159,12 +159,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
159 | close={() => this.close()} | 159 | close={() => this.close()} |
160 | > | 160 | > |
161 | <div className={classes.container}> | 161 | <div className={classes.container}> |
162 | <H1> | 162 | <H1>{intl.formatMessage(messages.title)}</H1> |
163 | {intl.formatMessage(messages.title)} | 163 | {log && ( |
164 | </H1> | ||
165 | { log && ( | ||
166 | <> | 164 | <> |
167 | <p className={classes.info}>{intl.formatMessage(messages.published)}</p> | 165 | <p className={classes.info}> |
166 | {intl.formatMessage(messages.published)} | ||
167 | </p> | ||
168 | <Input | 168 | <Input |
169 | className={classes.url} | 169 | className={classes.url} |
170 | showLabel={false} | 170 | showLabel={false} |
@@ -184,12 +184,24 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
184 | 184 | ||
185 | {!log && !error && ( | 185 | {!log && !error && ( |
186 | <> | 186 | <> |
187 | <p className={classes.info}>{intl.formatMessage(messages.info)}</p> | 187 | <p className={classes.info}> |
188 | 188 | {intl.formatMessage(messages.info)} | |
189 | <a href={`${DEBUG_API}/privacy.html`} target="_blank" className={classes.link} rel="noreferrer"> | 189 | </p> |
190 | |||
191 | <a | ||
192 | href={`${DEBUG_API}/privacy.html`} | ||
193 | target="_blank" | ||
194 | className={classes.link} | ||
195 | rel="noreferrer" | ||
196 | > | ||
190 | {intl.formatMessage(messages.privacy)} | 197 | {intl.formatMessage(messages.privacy)} |
191 | </a> | 198 | </a> |
192 | <a href={`${DEBUG_API}/terms.html`} target="_blank" className={classes.link} rel="noreferrer"> | 199 | <a |
200 | href={`${DEBUG_API}/terms.html`} | ||
201 | target="_blank" | ||
202 | className={classes.link} | ||
203 | rel="noreferrer" | ||
204 | > | ||
193 | {intl.formatMessage(messages.terms)} | 205 | {intl.formatMessage(messages.terms)} |
194 | </a> | 206 | </a> |
195 | 207 | ||
@@ -216,3 +228,5 @@ PublishDebugLogModal.wrappedComponent.propTypes = { | |||
216 | service: PropTypes.instanceOf(ServicesStore).isRequired, | 228 | service: PropTypes.instanceOf(ServicesStore).isRequired, |
217 | }).isRequired, | 229 | }).isRequired, |
218 | }; | 230 | }; |
231 | |||
232 | export default injectIntl(PublishDebugLogModal); | ||
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index 78d5d94a0..df2bf968d 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; | |||
4 | import { observer, inject } from 'mobx-react'; | 4 | import { observer, inject } from 'mobx-react'; |
5 | import { reaction } from 'mobx'; | 5 | import { reaction } from 'mobx'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, injectIntl } from 'react-intl'; |
8 | import { Input } from '@meetfranz/forms'; | 8 | import { Input } from '@meetfranz/forms'; |
9 | import { H1 } from '@meetfranz/ui'; | 9 | import { H1 } from '@meetfranz/ui'; |
10 | 10 | ||
@@ -16,19 +16,20 @@ import ServicesStore from '../../stores/ServicesStore'; | |||
16 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
17 | title: { | 17 | title: { |
18 | id: 'feature.quickSwitch.title', | 18 | id: 'feature.quickSwitch.title', |
19 | defaultMessage: '!!!QuickSwitch', | 19 | defaultMessage: 'QuickSwitch', |
20 | }, | 20 | }, |
21 | search: { | 21 | search: { |
22 | id: 'feature.quickSwitch.search', | 22 | id: 'feature.quickSwitch.search', |
23 | defaultMessage: '!!!Search...', | 23 | defaultMessage: 'Search...', |
24 | }, | 24 | }, |
25 | info: { | 25 | info: { |
26 | id: 'feature.quickSwitch.info', | 26 | id: 'feature.quickSwitch.info', |
27 | defaultMessage: '!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.', | 27 | defaultMessage: |
28 | 'Select a service with TAB, ↑ and ↓. Open a service with ENTER.', | ||
28 | }, | 29 | }, |
29 | }); | 30 | }); |
30 | 31 | ||
31 | const styles = (theme) => ({ | 32 | const styles = theme => ({ |
32 | modal: { | 33 | modal: { |
33 | width: '80%', | 34 | width: '80%', |
34 | maxWidth: 600, | 35 | maxWidth: 600, |
@@ -80,20 +81,19 @@ const styles = (theme) => ({ | |||
80 | }, | 81 | }, |
81 | }); | 82 | }); |
82 | 83 | ||
83 | export default @injectSheet(styles) @inject('stores', 'actions') @observer class QuickSwitchModal extends Component { | 84 | @injectSheet(styles) |
85 | @inject('stores', 'actions') | ||
86 | @observer | ||
87 | class QuickSwitchModal extends Component { | ||
84 | static propTypes = { | 88 | static propTypes = { |
85 | classes: PropTypes.object.isRequired, | 89 | classes: PropTypes.object.isRequired, |
86 | }; | 90 | }; |
87 | 91 | ||
88 | static contextTypes = { | ||
89 | intl: intlShape, | ||
90 | }; | ||
91 | |||
92 | state = { | 92 | state = { |
93 | selected: 0, | 93 | selected: 0, |
94 | search: '', | 94 | search: '', |
95 | wasPrevVisible: false, | 95 | wasPrevVisible: false, |
96 | } | 96 | }; |
97 | 97 | ||
98 | ARROW_DOWN = 40; | 98 | ARROW_DOWN = 40; |
99 | 99 | ||
@@ -118,9 +118,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
118 | this.openService = this.openService.bind(this); | 118 | this.openService = this.openService.bind(this); |
119 | 119 | ||
120 | reaction( | 120 | reaction( |
121 | () => ( | 121 | () => ModalState.isModalVisible, |
122 | ModalState.isModalVisible | ||
123 | ), | ||
124 | () => { | 122 | () => { |
125 | this._handleVisibilityChange(); | 123 | this._handleVisibilityChange(); |
126 | }, | 124 | }, |
@@ -140,10 +138,17 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
140 | // Get currently shown services | 138 | // Get currently shown services |
141 | services() { | 139 | services() { |
142 | let services = []; | 140 | let services = []; |
143 | if (this.state.search && compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0) { | 141 | if ( |
142 | this.state.search && | ||
143 | compact(invoke(this.state.search, 'match', /^[a-z0-9]/i)).length > 0 | ||
144 | ) { | ||
144 | // Apply simple search algorythm to list of all services | 145 | // Apply simple search algorythm to list of all services |
145 | services = this.props.stores.services.allDisplayed; | 146 | services = this.props.stores.services.allDisplayed; |
146 | services = services.filter((service) => service.name.toLowerCase().search(this.state.search.toLowerCase()) !== -1); | 147 | services = services.filter( |
148 | service => | ||
149 | service.name.toLowerCase().search(this.state.search.toLowerCase()) !== | ||
150 | -1, | ||
151 | ); | ||
147 | } else { | 152 | } else { |
148 | // Add the currently active service first | 153 | // Add the currently active service first |
149 | const currentService = this.props.stores.services.active; | 154 | const currentService = this.props.stores.services.active; |
@@ -186,14 +191,14 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
186 | // Change the selected service | 191 | // Change the selected service |
187 | // factor should be -1 or 1 | 192 | // factor should be -1 or 1 |
188 | changeSelected(factor) { | 193 | changeSelected(factor) { |
189 | this.setState((state) => { | 194 | this.setState(state => { |
190 | let newSelected = state.selected + factor; | 195 | let newSelected = state.selected + factor; |
191 | const services = this.services().length; | 196 | const services = this.services().length; |
192 | 197 | ||
193 | // Roll around when on edge of list | 198 | // Roll around when on edge of list |
194 | if (state.selected < 1 && factor === -1) { | 199 | if (state.selected < 1 && factor === -1) { |
195 | newSelected = services - 1; | 200 | newSelected = services - 1; |
196 | } else if ((state.selected >= (services - 1)) && factor === 1) { | 201 | } else if (state.selected >= services - 1 && factor === 1) { |
197 | newSelected = 0; | 202 | newSelected = 0; |
198 | } | 203 | } |
199 | 204 | ||
@@ -286,17 +291,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
286 | render() { | 291 | render() { |
287 | const { isModalVisible } = ModalState; | 292 | const { isModalVisible } = ModalState; |
288 | 293 | ||
289 | const { | 294 | const { openService } = this; |
290 | openService, | ||
291 | } = this; | ||
292 | 295 | ||
293 | const { | 296 | const { classes } = this.props; |
294 | classes, | ||
295 | } = this.props; | ||
296 | 297 | ||
297 | const services = this.services(); | 298 | const services = this.services(); |
298 | 299 | ||
299 | const { intl } = this.context; | 300 | const { intl } = this.props; |
300 | 301 | ||
301 | return ( | 302 | return ( |
302 | <Modal | 303 | <Modal |
@@ -318,12 +319,16 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
318 | </div> | 319 | </div> |
319 | 320 | ||
320 | <div className={classes.services}> | 321 | <div className={classes.services}> |
321 | { services.map((service, index) => ( | 322 | {services.map((service, index) => ( |
322 | <div | 323 | <div |
323 | className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`} | 324 | className={`${classes.service} ${ |
325 | this.state.selected === index | ||
326 | ? `${classes.activeService} active` | ||
327 | : '' | ||
328 | } service`} | ||
324 | onClick={() => openService(index)} | 329 | onClick={() => openService(index)} |
325 | key={service.id} | 330 | key={service.id} |
326 | ref={(el) => { | 331 | ref={el => { |
327 | this.serviceElements[index] = el; | 332 | this.serviceElements[index] = el; |
328 | }} | 333 | }} |
329 | > | 334 | > |
@@ -332,9 +337,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
332 | className={classes.serviceIcon} | 337 | className={classes.serviceIcon} |
333 | alt={service.recipe.name} | 338 | alt={service.recipe.name} |
334 | /> | 339 | /> |
335 | <div> | 340 | <div>{service.name}</div> |
336 | { service.name } | ||
337 | </div> | ||
338 | </div> | 341 | </div> |
339 | ))} | 342 | ))} |
340 | </div> | 343 | </div> |
@@ -356,3 +359,5 @@ QuickSwitchModal.wrappedComponent.propTypes = { | |||
356 | service: PropTypes.instanceOf(ServicesStore).isRequired, | 359 | service: PropTypes.instanceOf(ServicesStore).isRequired, |
357 | }).isRequired, | 360 | }).isRequired, |
358 | }; | 361 | }; |
362 | |||
363 | export default injectIntl(QuickSwitchModal); | ||
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js index bebf52c08..97fa20dcc 100644 --- a/src/features/webControls/components/WebControls.js +++ b/src/features/webControls/components/WebControls.js | |||
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { Icon } from '@meetfranz/ui'; | 5 | import { Icon } from '@meetfranz/ui'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | 6 | import { defineMessages, injectIntl } from 'react-intl'; |
7 | 7 | ||
8 | import { | 8 | import { |
9 | mdiReload, | 9 | mdiReload, |
@@ -16,23 +16,23 @@ import { | |||
16 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
17 | goHome: { | 17 | goHome: { |
18 | id: 'webControls.goHome', | 18 | id: 'webControls.goHome', |
19 | defaultMessage: '!!!Home', | 19 | defaultMessage: 'Home', |
20 | }, | 20 | }, |
21 | openInBrowser: { | 21 | openInBrowser: { |
22 | id: 'webControls.openInBrowser', | 22 | id: 'webControls.openInBrowser', |
23 | defaultMessage: '!!!Open in Browser', | 23 | defaultMessage: 'Open in Browser', |
24 | }, | 24 | }, |
25 | back: { | 25 | back: { |
26 | id: 'webControls.back', | 26 | id: 'webControls.back', |
27 | defaultMessage: '!!!Back', | 27 | defaultMessage: 'Back', |
28 | }, | 28 | }, |
29 | forward: { | 29 | forward: { |
30 | id: 'webControls.forward', | 30 | id: 'webControls.forward', |
31 | defaultMessage: '!!!Forward', | 31 | defaultMessage: 'Forward', |
32 | }, | 32 | }, |
33 | reload: { | 33 | reload: { |
34 | id: 'webControls.reload', | 34 | id: 'webControls.reload', |
35 | defaultMessage: '!!!Reload', | 35 | defaultMessage: 'Reload', |
36 | }, | 36 | }, |
37 | }); | 37 | }); |
38 | 38 | ||
@@ -109,10 +109,6 @@ class WebControls extends Component { | |||
109 | navigate: PropTypes.func.isRequired, | 109 | navigate: PropTypes.func.isRequired, |
110 | }; | 110 | }; |
111 | 111 | ||
112 | static contextTypes = { | ||
113 | intl: intlShape, | ||
114 | }; | ||
115 | |||
116 | static getDerivedStateFromProps(props, state) { | 112 | static getDerivedStateFromProps(props, state) { |
117 | const { url } = props; | 113 | const { url } = props; |
118 | const { editUrl } = state; | 114 | const { editUrl } = state; |
@@ -148,7 +144,7 @@ class WebControls extends Component { | |||
148 | 144 | ||
149 | const { inputUrl, editUrl } = this.state; | 145 | const { inputUrl, editUrl } = this.state; |
150 | 146 | ||
151 | const { intl } = this.context; | 147 | const { intl } = this.props; |
152 | 148 | ||
153 | return ( | 149 | return ( |
154 | <div className={classes.root}> | 150 | <div className={classes.root}> |
@@ -241,4 +237,4 @@ class WebControls extends Component { | |||
241 | } | 237 | } |
242 | } | 238 | } |
243 | 239 | ||
244 | export default WebControls; | 240 | export default injectIntl(WebControls); |
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js index 15b97121d..c9b05b87f 100644 --- a/src/features/workspaces/components/CreateWorkspaceForm.js +++ b/src/features/workspaces/components/CreateWorkspaceForm.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Input, Button } from '@meetfranz/forms'; | 5 | import { Input, Button } from '@meetfranz/forms'; |
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
@@ -11,11 +11,11 @@ import { workspaceStore } from '../index'; | |||
11 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
12 | submitButton: { | 12 | submitButton: { |
13 | id: 'settings.workspace.add.form.submitButton', | 13 | id: 'settings.workspace.add.form.submitButton', |
14 | defaultMessage: '!!!Create workspace', | 14 | defaultMessage: 'Create workspace', |
15 | }, | 15 | }, |
16 | name: { | 16 | name: { |
17 | id: 'settings.workspace.add.form.name', | 17 | id: 'settings.workspace.add.form.name', |
18 | defaultMessage: '!!!Name', | 18 | defaultMessage: 'Name', |
19 | }, | 19 | }, |
20 | }); | 20 | }); |
21 | 21 | ||
@@ -32,12 +32,9 @@ const styles = () => ({ | |||
32 | }, | 32 | }, |
33 | }); | 33 | }); |
34 | 34 | ||
35 | @injectSheet(styles) @observer | 35 | @injectSheet(styles) |
36 | @observer | ||
36 | class CreateWorkspaceForm extends Component { | 37 | class CreateWorkspaceForm extends Component { |
37 | static contextTypes = { | ||
38 | intl: intlShape, | ||
39 | }; | ||
40 | |||
41 | static propTypes = { | 38 | static propTypes = { |
42 | classes: PropTypes.object.isRequired, | 39 | classes: PropTypes.object.isRequired, |
43 | isSubmitting: PropTypes.bool.isRequired, | 40 | isSubmitting: PropTypes.bool.isRequired, |
@@ -45,7 +42,7 @@ class CreateWorkspaceForm extends Component { | |||
45 | }; | 42 | }; |
46 | 43 | ||
47 | form = (() => { | 44 | form = (() => { |
48 | const { intl } = this.context; | 45 | const { intl } = this.props; |
49 | return new Form({ | 46 | return new Form({ |
50 | fields: { | 47 | fields: { |
51 | name: { | 48 | name: { |
@@ -61,7 +58,7 @@ class CreateWorkspaceForm extends Component { | |||
61 | submitForm() { | 58 | submitForm() { |
62 | const { form } = this; | 59 | const { form } = this; |
63 | form.submit({ | 60 | form.submit({ |
64 | onSuccess: async (f) => { | 61 | onSuccess: async f => { |
65 | const { onSubmit } = this.props; | 62 | const { onSubmit } = this.props; |
66 | const values = f.values(); | 63 | const values = f.values(); |
67 | onSubmit(values); | 64 | onSubmit(values); |
@@ -70,7 +67,7 @@ class CreateWorkspaceForm extends Component { | |||
70 | } | 67 | } |
71 | 68 | ||
72 | render() { | 69 | render() { |
73 | const { intl } = this.context; | 70 | const { intl } = this.props; |
74 | const { classes, isSubmitting } = this.props; | 71 | const { classes, isSubmitting } = this.props; |
75 | const { form } = this; | 72 | const { form } = this; |
76 | return ( | 73 | return ( |
@@ -95,4 +92,4 @@ class CreateWorkspaceForm extends Component { | |||
95 | } | 92 | } |
96 | } | 93 | } |
97 | 94 | ||
98 | export default CreateWorkspaceForm; | 95 | export default injectIntl(CreateWorkspaceForm); |
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index c97d4bd9c..cae95e9ed 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | import { Input, Button } from '@meetfranz/forms'; | 6 | import { Input, Button } from '@meetfranz/forms'; |
7 | import injectSheet from 'react-jss'; | 7 | import injectSheet from 'react-jss'; |
@@ -20,40 +20,40 @@ import Toggle from '../../../components/ui/Toggle'; | |||
20 | const messages = defineMessages({ | 20 | const messages = defineMessages({ |
21 | buttonDelete: { | 21 | buttonDelete: { |
22 | id: 'settings.workspace.form.buttonDelete', | 22 | id: 'settings.workspace.form.buttonDelete', |
23 | defaultMessage: '!!!Delete workspace', | 23 | defaultMessage: 'Delete workspace', |
24 | }, | 24 | }, |
25 | buttonSave: { | 25 | buttonSave: { |
26 | id: 'settings.workspace.form.buttonSave', | 26 | id: 'settings.workspace.form.buttonSave', |
27 | defaultMessage: '!!!Save workspace', | 27 | defaultMessage: 'Save workspace', |
28 | }, | 28 | }, |
29 | name: { | 29 | name: { |
30 | id: 'settings.workspace.form.name', | 30 | id: 'settings.workspace.form.name', |
31 | defaultMessage: '!!!Name', | 31 | defaultMessage: 'Name', |
32 | }, | 32 | }, |
33 | yourWorkspaces: { | 33 | yourWorkspaces: { |
34 | id: 'settings.workspace.form.yourWorkspaces', | 34 | id: 'settings.workspace.form.yourWorkspaces', |
35 | defaultMessage: '!!!Your workspaces', | 35 | defaultMessage: 'Your workspaces', |
36 | }, | 36 | }, |
37 | keepLoaded: { | 37 | keepLoaded: { |
38 | id: 'settings.workspace.form.keepLoaded', | 38 | id: 'settings.workspace.form.keepLoaded', |
39 | defaultMessage: '!!!Keep this workspace loaded*', | 39 | defaultMessage: 'Keep this workspace loaded*', |
40 | }, | 40 | }, |
41 | keepLoadedInfo: { | 41 | keepLoadedInfo: { |
42 | id: 'settings.workspace.form.keepLoadedInfo', | 42 | id: 'settings.workspace.form.keepLoadedInfo', |
43 | defaultMessage: | 43 | defaultMessage: |
44 | '!!!*This option will be overwritten by the global "Keep all workspaces loaded" option.', | 44 | '*This option will be overwritten by the global "Keep all workspaces loaded" option.', |
45 | }, | 45 | }, |
46 | servicesInWorkspaceHeadline: { | 46 | servicesInWorkspaceHeadline: { |
47 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | 47 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', |
48 | defaultMessage: '!!!Services in this Workspace', | 48 | defaultMessage: 'Services in this Workspace', |
49 | }, | 49 | }, |
50 | noServicesAdded: { | 50 | noServicesAdded: { |
51 | id: 'settings.services.noServicesAdded', | 51 | id: 'settings.services.noServicesAdded', |
52 | defaultMessage: '!!!Start by adding a service.', | 52 | defaultMessage: 'Start by adding a service.', |
53 | }, | 53 | }, |
54 | discoverServices: { | 54 | discoverServices: { |
55 | id: 'settings.services.discoverServices', | 55 | id: 'settings.services.discoverServices', |
56 | defaultMessage: '!!!Discover services', | 56 | defaultMessage: 'Discover services', |
57 | }, | 57 | }, |
58 | }); | 58 | }); |
59 | 59 | ||
@@ -72,10 +72,6 @@ const styles = () => ({ | |||
72 | @injectSheet(styles) | 72 | @injectSheet(styles) |
73 | @observer | 73 | @observer |
74 | class EditWorkspaceForm extends Component { | 74 | class EditWorkspaceForm extends Component { |
75 | static contextTypes = { | ||
76 | intl: intlShape, | ||
77 | }; | ||
78 | |||
79 | static propTypes = { | 75 | static propTypes = { |
80 | classes: PropTypes.object.isRequired, | 76 | classes: PropTypes.object.isRequired, |
81 | onDelete: PropTypes.func.isRequired, | 77 | onDelete: PropTypes.func.isRequired, |
@@ -97,7 +93,7 @@ class EditWorkspaceForm extends Component { | |||
97 | } | 93 | } |
98 | 94 | ||
99 | prepareWorkspaceForm(workspace) { | 95 | prepareWorkspaceForm(workspace) { |
100 | const { intl } = this.context; | 96 | const { intl } = this.props; |
101 | return new Form({ | 97 | return new Form({ |
102 | fields: { | 98 | fields: { |
103 | name: { | 99 | name: { |
@@ -120,7 +116,7 @@ class EditWorkspaceForm extends Component { | |||
120 | 116 | ||
121 | save(form) { | 117 | save(form) { |
122 | form.submit({ | 118 | form.submit({ |
123 | onSuccess: async (f) => { | 119 | onSuccess: async f => { |
124 | const { onSave } = this.props; | 120 | const { onSave } = this.props; |
125 | const values = f.values(); | 121 | const values = f.values(); |
126 | onSave(values); | 122 | onSave(values); |
@@ -146,7 +142,7 @@ class EditWorkspaceForm extends Component { | |||
146 | } | 142 | } |
147 | 143 | ||
148 | render() { | 144 | render() { |
149 | const { intl } = this.context; | 145 | const { intl } = this.props; |
150 | const { | 146 | const { |
151 | classes, | 147 | classes, |
152 | workspace, | 148 | workspace, |
@@ -194,7 +190,7 @@ class EditWorkspaceForm extends Component { | |||
194 | </div> | 190 | </div> |
195 | ) : ( | 191 | ) : ( |
196 | <> | 192 | <> |
197 | {services.map((s) => ( | 193 | {services.map(s => ( |
198 | <WorkspaceServiceListItem | 194 | <WorkspaceServiceListItem |
199 | key={s.id} | 195 | key={s.id} |
200 | service={s} | 196 | service={s} |
@@ -233,4 +229,4 @@ class EditWorkspaceForm extends Component { | |||
233 | } | 229 | } |
234 | } | 230 | } |
235 | 231 | ||
236 | export default EditWorkspaceForm; | 232 | export default injectIntl(EditWorkspaceForm); |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index 1138f23d7..03a829a64 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -2,7 +2,7 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import { H1, Icon } from '@meetfranz/ui'; | 6 | import { H1, Icon } from '@meetfranz/ui'; |
7 | import ReactTooltip from 'react-tooltip'; | 7 | import ReactTooltip from 'react-tooltip'; |
8 | 8 | ||
@@ -14,27 +14,27 @@ import { workspaceStore } from '../index'; | |||
14 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
15 | headline: { | 15 | headline: { |
16 | id: 'workspaceDrawer.headline', | 16 | id: 'workspaceDrawer.headline', |
17 | defaultMessage: '!!!Workspaces', | 17 | defaultMessage: 'Workspaces', |
18 | }, | 18 | }, |
19 | allServices: { | 19 | allServices: { |
20 | id: 'workspaceDrawer.allServices', | 20 | id: 'workspaceDrawer.allServices', |
21 | defaultMessage: '!!!All services', | 21 | defaultMessage: 'All services', |
22 | }, | 22 | }, |
23 | workspacesSettingsTooltip: { | 23 | workspacesSettingsTooltip: { |
24 | id: 'workspaceDrawer.workspacesSettingsTooltip', | 24 | id: 'workspaceDrawer.workspacesSettingsTooltip', |
25 | defaultMessage: '!!!Workspaces settings', | 25 | defaultMessage: 'Workspaces settings', |
26 | }, | 26 | }, |
27 | workspaceFeatureInfo: { | 27 | workspaceFeatureInfo: { |
28 | id: 'workspaceDrawer.workspaceFeatureInfo', | 28 | id: 'workspaceDrawer.workspaceFeatureInfo', |
29 | defaultMessage: '!!!Info about workspace feature', | 29 | defaultMessage: 'Info about workspace feature', |
30 | }, | 30 | }, |
31 | addNewWorkspaceLabel: { | 31 | addNewWorkspaceLabel: { |
32 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 32 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
33 | defaultMessage: '!!!add new workspace', | 33 | defaultMessage: 'add new workspace', |
34 | }, | 34 | }, |
35 | }); | 35 | }); |
36 | 36 | ||
37 | const styles = (theme) => ({ | 37 | const styles = theme => ({ |
38 | drawer: { | 38 | drawer: { |
39 | background: theme.workspaces.drawer.background, | 39 | background: theme.workspaces.drawer.background, |
40 | width: `${theme.workspaces.drawer.width}px`, | 40 | width: `${theme.workspaces.drawer.width}px`, |
@@ -85,34 +85,26 @@ const styles = (theme) => ({ | |||
85 | }, | 85 | }, |
86 | }); | 86 | }); |
87 | 87 | ||
88 | @injectSheet(styles) @observer | 88 | @injectSheet(styles) |
89 | @observer | ||
89 | class WorkspaceDrawer extends Component { | 90 | class WorkspaceDrawer extends Component { |
90 | static propTypes = { | 91 | static propTypes = { |
91 | classes: PropTypes.object.isRequired, | 92 | classes: PropTypes.object.isRequired, |
92 | getServicesForWorkspace: PropTypes.func.isRequired, | 93 | getServicesForWorkspace: PropTypes.func.isRequired, |
93 | }; | 94 | }; |
94 | 95 | ||
95 | static contextTypes = { | ||
96 | intl: intlShape, | ||
97 | }; | ||
98 | |||
99 | componentDidMount() { | 96 | componentDidMount() { |
100 | ReactTooltip.rebuild(); | 97 | ReactTooltip.rebuild(); |
101 | } | 98 | } |
102 | 99 | ||
103 | render() { | 100 | render() { |
104 | const { | 101 | const { classes, getServicesForWorkspace } = this.props; |
105 | classes, | 102 | const { intl } = this.props; |
106 | getServicesForWorkspace, | 103 | const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } = |
107 | } = this.props; | 104 | workspaceStore; |
108 | const { intl } = this.context; | 105 | const actualWorkspace = isSwitchingWorkspace |
109 | const { | 106 | ? nextWorkspace |
110 | activeWorkspace, | 107 | : activeWorkspace; |
111 | isSwitchingWorkspace, | ||
112 | nextWorkspace, | ||
113 | workspaces, | ||
114 | } = workspaceStore; | ||
115 | const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace; | ||
116 | return ( | 108 | return ( |
117 | <div className={`${classes.drawer} workspaces-drawer`}> | 109 | <div className={`${classes.drawer} workspaces-drawer`}> |
118 | <H1 className={classes.headline}> | 110 | <H1 className={classes.headline}> |
@@ -122,7 +114,9 @@ class WorkspaceDrawer extends Component { | |||
122 | onClick={() => { | 114 | onClick={() => { |
123 | workspaceActions.openWorkspaceSettings(); | 115 | workspaceActions.openWorkspaceSettings(); |
124 | }} | 116 | }} |
125 | data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`} | 117 | data-tip={`${intl.formatMessage( |
118 | messages.workspacesSettingsTooltip, | ||
119 | )}`} | ||
126 | > | 120 | > |
127 | <Icon | 121 | <Icon |
128 | icon={mdiSettings} | 122 | icon={mdiSettings} |
@@ -152,7 +146,9 @@ class WorkspaceDrawer extends Component { | |||
152 | workspaceActions.activate({ workspace }); | 146 | workspaceActions.activate({ workspace }); |
153 | workspaceActions.toggleWorkspaceDrawer(); | 147 | workspaceActions.toggleWorkspaceDrawer(); |
154 | }} | 148 | }} |
155 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} | 149 | onContextMenuEditClick={() => |
150 | workspaceActions.edit({ workspace }) | ||
151 | } | ||
156 | services={getServicesForWorkspace(workspace)} | 152 | services={getServicesForWorkspace(workspace)} |
157 | shortcutIndex={index + 1} | 153 | shortcutIndex={index + 1} |
158 | /> | 154 | /> |
@@ -168,9 +164,7 @@ class WorkspaceDrawer extends Component { | |||
168 | size={1} | 164 | size={1} |
169 | className={classes.workspacesSettingsButtonIcon} | 165 | className={classes.workspacesSettingsButtonIcon} |
170 | /> | 166 | /> |
171 | <span> | 167 | <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span> |
172 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
173 | </span> | ||
174 | </div> | 168 | </div> |
175 | </div> | 169 | </div> |
176 | <ReactTooltip place="right" type="dark" effect="solid" /> | 170 | <ReactTooltip place="right" type="dark" effect="solid" /> |
@@ -179,4 +173,4 @@ class WorkspaceDrawer extends Component { | |||
179 | } | 173 | } |
180 | } | 174 | } |
181 | 175 | ||
182 | export default WorkspaceDrawer; | 176 | export default injectIntl(WorkspaceDrawer); |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 252158364..82e1b81a4 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -4,17 +4,17 @@ import PropTypes from 'prop-types'; | |||
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, injectIntl } from 'react-intl'; |
8 | import { altKey, cmdOrCtrlShortcutKey } from '../../../environment'; | 8 | import { altKey, cmdOrCtrlShortcutKey } from '../../../environment'; |
9 | 9 | ||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | noServicesAddedYet: { | 11 | noServicesAddedYet: { |
12 | id: 'workspaceDrawer.item.noServicesAddedYet', | 12 | id: 'workspaceDrawer.item.noServicesAddedYet', |
13 | defaultMessage: '!!!No services added yet', | 13 | defaultMessage: 'No services added yet', |
14 | }, | 14 | }, |
15 | contextMenuEdit: { | 15 | contextMenuEdit: { |
16 | id: 'workspaceDrawer.item.contextMenuEdit', | 16 | id: 'workspaceDrawer.item.contextMenuEdit', |
17 | defaultMessage: '!!!edit', | 17 | defaultMessage: 'edit', |
18 | }, | 18 | }, |
19 | }); | 19 | }); |
20 | 20 | ||
@@ -82,10 +82,6 @@ class WorkspaceDrawerItem extends Component { | |||
82 | onContextMenuEditClick: null, | 82 | onContextMenuEditClick: null, |
83 | }; | 83 | }; |
84 | 84 | ||
85 | static contextTypes = { | ||
86 | intl: intlShape, | ||
87 | }; | ||
88 | |||
89 | render() { | 85 | render() { |
90 | const { | 86 | const { |
91 | classes, | 87 | classes, |
@@ -96,7 +92,8 @@ class WorkspaceDrawerItem extends Component { | |||
96 | services, | 92 | services, |
97 | shortcutIndex, | 93 | shortcutIndex, |
98 | } = this.props; | 94 | } = this.props; |
99 | const { intl } = this.context; | 95 | |
96 | const { intl } = this.props; | ||
100 | 97 | ||
101 | const contextMenuTemplate = [ | 98 | const contextMenuTemplate = [ |
102 | { | 99 | { |
@@ -125,7 +122,11 @@ class WorkspaceDrawerItem extends Component { | |||
125 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) | 122 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) |
126 | } | 123 | } |
127 | data-tip={`${ | 124 | data-tip={`${ |
128 | shortcutIndex <= 9 ? `(${cmdOrCtrlShortcutKey(false)}+${altKey(false)}+${shortcutIndex})` : '' | 125 | shortcutIndex <= 9 |
126 | ? `(${cmdOrCtrlShortcutKey(false)}+${altKey( | ||
127 | false, | ||
128 | )}+${shortcutIndex})` | ||
129 | : '' | ||
129 | }`} | 130 | }`} |
130 | > | 131 | > |
131 | <span | 132 | <span |
@@ -151,4 +152,4 @@ class WorkspaceDrawerItem extends Component { | |||
151 | } | 152 | } |
152 | } | 153 | } |
153 | 154 | ||
154 | export default WorkspaceDrawerItem; | 155 | export default injectIntl(WorkspaceDrawerItem); |
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js index 85fc02d51..ec7b19add 100644 --- a/src/features/workspaces/components/WorkspaceItem.js +++ b/src/features/workspaces/components/WorkspaceItem.js | |||
@@ -1,12 +1,11 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { intlShape } from 'react-intl'; | ||
4 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
5 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
6 | 5 | ||
7 | import Workspace from '../models/Workspace'; | 6 | import Workspace from '../models/Workspace'; |
8 | 7 | ||
9 | const styles = (theme) => ({ | 8 | const styles = theme => ({ |
10 | row: { | 9 | row: { |
11 | height: theme.workspaces.settings.listItems.height, | 10 | height: theme.workspaces.settings.listItems.height, |
12 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, | 11 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, |
@@ -17,7 +16,8 @@ const styles = (theme) => ({ | |||
17 | columnName: {}, | 16 | columnName: {}, |
18 | }); | 17 | }); |
19 | 18 | ||
20 | @injectSheet(styles) @observer | 19 | @injectSheet(styles) |
20 | @observer | ||
21 | class WorkspaceItem extends Component { | 21 | class WorkspaceItem extends Component { |
22 | static propTypes = { | 22 | static propTypes = { |
23 | classes: PropTypes.object.isRequired, | 23 | classes: PropTypes.object.isRequired, |
@@ -25,18 +25,12 @@ class WorkspaceItem extends Component { | |||
25 | onItemClick: PropTypes.func.isRequired, | 25 | onItemClick: PropTypes.func.isRequired, |
26 | }; | 26 | }; |
27 | 27 | ||
28 | static contextTypes = { | ||
29 | intl: intlShape, | ||
30 | }; | ||
31 | |||
32 | render() { | 28 | render() { |
33 | const { classes, workspace, onItemClick } = this.props; | 29 | const { classes, workspace, onItemClick } = this.props; |
34 | 30 | ||
35 | return ( | 31 | return ( |
36 | <tr className={classes.row}> | 32 | <tr className={classes.row}> |
37 | <td onClick={() => onItemClick(workspace)}> | 33 | <td onClick={() => onItemClick(workspace)}>{workspace.name}</td> |
38 | {workspace.name} | ||
39 | </td> | ||
40 | </tr> | 34 | </tr> |
41 | ); | 35 | ); |
42 | } | 36 | } |
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index c8ec0bc4c..33a82cf4b 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -4,14 +4,14 @@ import { observer } from 'mobx-react'; | |||
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { Loader } from '@meetfranz/ui'; | 6 | import { Loader } from '@meetfranz/ui'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, injectIntl } from 'react-intl'; |
8 | 8 | ||
9 | import { workspaceStore } from '../index'; | 9 | import { workspaceStore } from '../index'; |
10 | 10 | ||
11 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
12 | switchingTo: { | 12 | switchingTo: { |
13 | id: 'workspaces.switchingIndicator.switchingTo', | 13 | id: 'workspaces.switchingIndicator.switchingTo', |
14 | defaultMessage: '!!!Switching to', | 14 | defaultMessage: 'Switching to', |
15 | }, | 15 | }, |
16 | }); | 16 | }); |
17 | 17 | ||
@@ -61,13 +61,9 @@ class WorkspaceSwitchingIndicator extends Component { | |||
61 | theme: PropTypes.object.isRequired, | 61 | theme: PropTypes.object.isRequired, |
62 | }; | 62 | }; |
63 | 63 | ||
64 | static contextTypes = { | ||
65 | intl: intlShape, | ||
66 | }; | ||
67 | |||
68 | render() { | 64 | render() { |
69 | const { classes, theme } = this.props; | 65 | const { classes, theme } = this.props; |
70 | const { intl } = this.context; | 66 | const { intl } = this.props; |
71 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 67 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
72 | if (!isSwitchingWorkspace) return null; | 68 | if (!isSwitchingWorkspace) return null; |
73 | const nextWorkspaceName = nextWorkspace | 69 | const nextWorkspaceName = nextWorkspace |
@@ -89,4 +85,4 @@ class WorkspaceSwitchingIndicator extends Component { | |||
89 | } | 85 | } |
90 | } | 86 | } |
91 | 87 | ||
92 | export default WorkspaceSwitchingIndicator; | 88 | export default injectIntl(WorkspaceSwitchingIndicator); |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 5f34204f1..fd279f896 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox } from '@meetfranz/ui'; | 6 | import { Infobox } from '@meetfranz/ui'; |
7 | 7 | ||
@@ -16,35 +16,35 @@ import UIStore from '../../../stores/UIStore'; | |||
16 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
17 | headline: { | 17 | headline: { |
18 | id: 'settings.workspaces.headline', | 18 | id: 'settings.workspaces.headline', |
19 | defaultMessage: '!!!Your workspaces', | 19 | defaultMessage: 'Your workspaces', |
20 | }, | 20 | }, |
21 | noServicesAdded: { | 21 | noServicesAdded: { |
22 | id: 'settings.workspaces.noWorkspacesAdded', | 22 | id: 'settings.workspaces.noWorkspacesAdded', |
23 | defaultMessage: "!!!You haven't created any workspaces yet.", | 23 | defaultMessage: "You haven't created any workspaces yet.", |
24 | }, | 24 | }, |
25 | workspacesRequestFailed: { | 25 | workspacesRequestFailed: { |
26 | id: 'settings.workspaces.workspacesRequestFailed', | 26 | id: 'settings.workspaces.workspacesRequestFailed', |
27 | defaultMessage: '!!!Could not load your workspaces', | 27 | defaultMessage: 'Could not load your workspaces', |
28 | }, | 28 | }, |
29 | tryReloadWorkspaces: { | 29 | tryReloadWorkspaces: { |
30 | id: 'settings.workspaces.tryReloadWorkspaces', | 30 | id: 'settings.workspaces.tryReloadWorkspaces', |
31 | defaultMessage: '!!!Try again', | 31 | defaultMessage: 'Try again', |
32 | }, | 32 | }, |
33 | updatedInfo: { | 33 | updatedInfo: { |
34 | id: 'settings.workspaces.updatedInfo', | 34 | id: 'settings.workspaces.updatedInfo', |
35 | defaultMessage: '!!!Your changes have been saved', | 35 | defaultMessage: 'Your changes have been saved', |
36 | }, | 36 | }, |
37 | deletedInfo: { | 37 | deletedInfo: { |
38 | id: 'settings.workspaces.deletedInfo', | 38 | id: 'settings.workspaces.deletedInfo', |
39 | defaultMessage: '!!!Workspace has been deleted', | 39 | defaultMessage: 'Workspace has been deleted', |
40 | }, | 40 | }, |
41 | workspaceFeatureInfo: { | 41 | workspaceFeatureInfo: { |
42 | id: 'settings.workspaces.workspaceFeatureInfo', | 42 | id: 'settings.workspaces.workspaceFeatureInfo', |
43 | defaultMessage: '!!!Info about workspace feature', | 43 | defaultMessage: 'Info about workspace feature', |
44 | }, | 44 | }, |
45 | workspaceFeatureHeadline: { | 45 | workspaceFeatureHeadline: { |
46 | id: 'settings.workspaces.workspaceFeatureHeadline', | 46 | id: 'settings.workspaces.workspaceFeatureHeadline', |
47 | defaultMessage: '!!!Less is More: Introducing Ferdi Workspaces', | 47 | defaultMessage: 'Less is More: Introducing Ferdi Workspaces', |
48 | }, | 48 | }, |
49 | }); | 49 | }); |
50 | 50 | ||
@@ -83,10 +83,6 @@ class WorkspacesDashboard extends Component { | |||
83 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | 83 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, |
84 | }; | 84 | }; |
85 | 85 | ||
86 | static contextTypes = { | ||
87 | intl: intlShape, | ||
88 | }; | ||
89 | |||
90 | render() { | 86 | render() { |
91 | const { | 87 | const { |
92 | classes, | 88 | classes, |
@@ -99,7 +95,7 @@ class WorkspacesDashboard extends Component { | |||
99 | workspaces, | 95 | workspaces, |
100 | } = this.props; | 96 | } = this.props; |
101 | 97 | ||
102 | const { intl } = this.context; | 98 | const { intl } = this.props; |
103 | 99 | ||
104 | return ( | 100 | return ( |
105 | <div className="settings__main"> | 101 | <div className="settings__main"> |
@@ -193,7 +189,7 @@ class WorkspacesDashboard extends Component { | |||
193 | } | 189 | } |
194 | } | 190 | } |
195 | 191 | ||
196 | export default WorkspacesDashboard; | 192 | export default injectIntl(WorkspacesDashboard); |
197 | 193 | ||
198 | WorkspacesDashboard.wrappedComponent.propTypes = { | 194 | WorkspacesDashboard.wrappedComponent.propTypes = { |
199 | stores: PropTypes.shape({ | 195 | stores: PropTypes.shape({ |