diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 16:54:01 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-11 16:54:01 +0200 |
commit | 47c1c99d893517efc679ab29d675cc0bf44be8be (patch) | |
tree | 9cab9697096bef0ce56d8ee8709bc1c2c3a42deb /src/features/workspaces/components/CreateWorkspaceForm.js | |
parent | test package order (diff) | |
download | ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.gz ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.zst ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.zip |
feat(App): Added Workspaces for all your daily routines 🥳
* merge default and fetched feature configs
* ignore intellij project files
* basic setup for workspaces feature
* define workspaces as premium feature
* add workspaces menu item in settings dialog
* basic setup of workspaces settings screen
* fix eslint error
* assign react key prop to workspace items
* add styles for workspace table
* setup logic to display workspace edit page
* consolidate workspace feature for further development
* prepare basic workspace edit form
* add on enter key handler for form input component
* add form for creating workspaces
* small fixes
* adds flow for deleting workspaces
* stop tracking google analytics in components
* pin gulp-sass-variables version to 1.1.1
* fix merge conflict
* fix bug in form input library
* improve workspace form setup
* finish basic workspace settings
* finish workspaces mvp
* fix eslint issues
* remove dev logs
* detach service when underlying webview unmounts
* disable no-param-reassign eslint rule
* add workspace drawer
* change workspace switch shortcuts to start with zero
* add workspace drawer toggle menu item and shortcut
* improve workspace switching ux
* style add workspace icon in drawer like the sidebar icons
* improve workspace drawer layout
* add i18n messages for service loading and workspace switching
* small fixes
* add tooltip to add workspace button in drawer
* add workspaces count badge in settings navigation
* fix merge conflicts with latest develop
* refactor state management for workspace feature
* reset api requests when workspace feature is stopped
* hide workspace feature if it is disabled
* handle get workspaces request errors in the ui
* show infobox when updating workspaces
* indicate any server interaction with spinners and infoboxes
* add analytic events for workspace actions
* improve styling of workspace switch indicator
* add workspace premium notice to dashboard
* add workspace feature info in drawer for free users
* add workspace premium badge in settings nav
* fix premium workspace badge in settings menu for light theme
* fix active workspaces settings premium badge in light theme
* give upgrade account button a bit more padding
* add open last used workspace logic
* use mobx-localstorage directly in the store
* fix wrong workspace tooltip shortcut in sidebar
* fix bug in workspace feature initialization
* show workspaces intro in drawer when user has none yet
* fix issues for users that have workspace but downgraded to free
* border radius for premium intro in workspace settings
* close workspace drawer after clicking on a workspace
* add hover effect for drawer workspace items
* ensure drawer is open on workspace settings routes
* add small text label for adding new workspace to drawer
* make workspace settings list items taller
* refactor workspace table css away from legacy styles
* render workspace service list like services + toggle
* change plus icon in workspace drawer to settings icon
* autofocus create workspace input field
* add css transition to drawer workspace item hover
* fix drawer add workspace label styles
* refactors workspace theme vars into object structure
* improve contrast of workspace switching indicator
* added generic pro badge component for settings nav
* add premium badge to workspace drawer headline
* add context menu for workspace drawer items
* handle deleted services that are attached to workspaces
Diffstat (limited to 'src/features/workspaces/components/CreateWorkspaceForm.js')
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js new file mode 100644 index 000000000..2c00ea63c --- /dev/null +++ b/src/features/workspaces/components/CreateWorkspaceForm.js | |||
@@ -0,0 +1,100 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import { Input, Button } from '@meetfranz/forms'; | ||
6 | import injectSheet from 'react-jss'; | ||
7 | import Form from '../../../lib/Form'; | ||
8 | import { required } from '../../../helpers/validation-helpers'; | ||
9 | import { gaEvent } from '../../../lib/analytics'; | ||
10 | import { GA_CATEGORY_WORKSPACES } from '../index'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | submitButton: { | ||
14 | id: 'settings.workspace.add.form.submitButton', | ||
15 | defaultMessage: '!!!Create workspace', | ||
16 | }, | ||
17 | name: { | ||
18 | id: 'settings.workspace.add.form.name', | ||
19 | defaultMessage: '!!!Name', | ||
20 | }, | ||
21 | }); | ||
22 | |||
23 | const styles = () => ({ | ||
24 | form: { | ||
25 | display: 'flex', | ||
26 | }, | ||
27 | input: { | ||
28 | flexGrow: 1, | ||
29 | marginRight: '10px', | ||
30 | }, | ||
31 | submitButton: { | ||
32 | height: 'inherit', | ||
33 | }, | ||
34 | }); | ||
35 | |||
36 | @injectSheet(styles) @observer | ||
37 | class CreateWorkspaceForm extends Component { | ||
38 | static contextTypes = { | ||
39 | intl: intlShape, | ||
40 | }; | ||
41 | |||
42 | static propTypes = { | ||
43 | classes: PropTypes.object.isRequired, | ||
44 | isSubmitting: PropTypes.bool.isRequired, | ||
45 | onSubmit: PropTypes.func.isRequired, | ||
46 | }; | ||
47 | |||
48 | form = (() => { | ||
49 | const { intl } = this.context; | ||
50 | return new Form({ | ||
51 | fields: { | ||
52 | name: { | ||
53 | label: intl.formatMessage(messages.name), | ||
54 | placeholder: intl.formatMessage(messages.name), | ||
55 | value: '', | ||
56 | validators: [required], | ||
57 | }, | ||
58 | }, | ||
59 | }); | ||
60 | })(); | ||
61 | |||
62 | submitForm() { | ||
63 | const { form } = this; | ||
64 | form.submit({ | ||
65 | onSuccess: async (f) => { | ||
66 | const { onSubmit } = this.props; | ||
67 | const values = f.values(); | ||
68 | onSubmit(values); | ||
69 | gaEvent(GA_CATEGORY_WORKSPACES, 'create', values.name); | ||
70 | }, | ||
71 | }); | ||
72 | } | ||
73 | |||
74 | render() { | ||
75 | const { intl } = this.context; | ||
76 | const { classes, isSubmitting } = this.props; | ||
77 | const { form } = this; | ||
78 | return ( | ||
79 | <div className={classes.form}> | ||
80 | <Input | ||
81 | className={classes.input} | ||
82 | {...form.$('name').bind()} | ||
83 | showLabel={false} | ||
84 | onEnterKey={this.submitForm.bind(this, form)} | ||
85 | focus | ||
86 | /> | ||
87 | <Button | ||
88 | className={classes.submitButton} | ||
89 | type="submit" | ||
90 | label={intl.formatMessage(messages.submitButton)} | ||
91 | onClick={this.submitForm.bind(this, form)} | ||
92 | busy={isSubmitting} | ||
93 | buttonType={isSubmitting ? 'secondary' : 'primary'} | ||
94 | /> | ||
95 | </div> | ||
96 | ); | ||
97 | } | ||
98 | } | ||
99 | |||
100 | export default CreateWorkspaceForm; | ||