diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-17 05:45:39 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-17 00:15:39 +0000 |
commit | d9502c7516bc2d4ae467c6ea8a2e4816b0885f37 (patch) | |
tree | b339c587a5529ac26d52cfc12d9972a8a00255e6 /src/features | |
parent | Transform JSX components to TSX (#755) (diff) | |
download | ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.gz ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.zst ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.zip |
Transfrom workspace components to ts (#775)
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/components/CreateWorkspaceForm.tsx (renamed from src/features/workspaces/components/CreateWorkspaceForm.js) | 54 | ||||
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.tsx (renamed from src/features/workspaces/components/EditWorkspaceForm.js) | 67 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.tsx | 7 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.tsx (renamed from src/features/workspaces/components/WorkspaceDrawerItem.js) | 64 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceItem.tsx | 28 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceServiceListItem.tsx | 5 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.tsx (renamed from src/features/workspaces/components/WorkspacesDashboard.js) | 54 | ||||
-rw-r--r-- | src/features/workspaces/containers/WorkspacesScreen.tsx | 13 |
8 files changed, 150 insertions, 142 deletions
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.tsx index fac84bed0..eafe9f36a 100644 --- a/src/features/workspaces/components/CreateWorkspaceForm.js +++ b/src/features/workspaces/components/CreateWorkspaceForm.tsx | |||
@@ -1,9 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 4 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | |||
7 | import Input from '../../../components/ui/input/index'; | 5 | import Input from '../../../components/ui/input/index'; |
8 | import Button from '../../../components/ui/button'; | 6 | import Button from '../../../components/ui/button'; |
9 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
@@ -34,47 +32,49 @@ const styles = { | |||
34 | }, | 32 | }, |
35 | }; | 33 | }; |
36 | 34 | ||
37 | class CreateWorkspaceForm extends Component { | 35 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
38 | static propTypes = { | 36 | isSubmitting: boolean; |
39 | classes: PropTypes.object.isRequired, | 37 | onSubmit: (...args: any[]) => void; |
40 | isSubmitting: PropTypes.bool.isRequired, | 38 | } |
41 | onSubmit: PropTypes.func.isRequired, | 39 | |
42 | }; | 40 | @observer |
41 | class CreateWorkspaceForm extends Component<IProps> { | ||
42 | form: Form; | ||
43 | 43 | ||
44 | form = (() => { | 44 | constructor(props: IProps) { |
45 | const { intl } = this.props; | 45 | super(props); |
46 | return new Form({ | 46 | |
47 | this.form = new Form({ | ||
47 | fields: { | 48 | fields: { |
48 | name: { | 49 | name: { |
49 | label: intl.formatMessage(messages.name), | 50 | label: this.props.intl.formatMessage(messages.name), |
50 | placeholder: intl.formatMessage(messages.name), | 51 | placeholder: this.props.intl.formatMessage(messages.name), |
51 | value: '', | 52 | value: '', |
52 | validators: [required], | 53 | validators: [required], |
53 | }, | 54 | }, |
54 | }, | 55 | }, |
55 | }); | 56 | }); |
56 | })(); | 57 | } |
57 | 58 | ||
58 | submitForm() { | 59 | submitForm(): void { |
59 | const { form } = this; | 60 | this.form.submit({ |
60 | form.submit({ | 61 | onSuccess: async form => { |
61 | onSuccess: async f => { | ||
62 | const { onSubmit } = this.props; | 62 | const { onSubmit } = this.props; |
63 | const values = f.values(); | 63 | const values = form.values(); |
64 | onSubmit(values); | 64 | onSubmit(values); |
65 | }, | 65 | }, |
66 | }); | 66 | }); |
67 | } | 67 | } |
68 | 68 | ||
69 | render() { | 69 | render(): ReactElement { |
70 | const { intl } = this.props; | 70 | const { classes, isSubmitting, intl } = this.props; |
71 | const { classes, isSubmitting } = this.props; | ||
72 | const { form } = this; | 71 | const { form } = this; |
72 | |||
73 | return ( | 73 | return ( |
74 | <div className={classes.form}> | 74 | <div className={classes.form}> |
75 | <Input | 75 | <Input |
76 | className={classes.input} | ||
77 | {...form.$('name').bind()} | 76 | {...form.$('name').bind()} |
77 | className={classes.input} | ||
78 | showLabel={false} | 78 | showLabel={false} |
79 | onEnterKey={this.submitForm.bind(this, form)} | 79 | onEnterKey={this.submitForm.bind(this, form)} |
80 | focus={workspaceStore.isUserAllowedToUseFeature} | 80 | focus={workspaceStore.isUserAllowedToUseFeature} |
@@ -93,5 +93,5 @@ class CreateWorkspaceForm extends Component { | |||
93 | } | 93 | } |
94 | 94 | ||
95 | export default injectIntl( | 95 | export default injectIntl( |
96 | injectSheet(styles, { injectTheme: true })(observer(CreateWorkspaceForm)), | 96 | withStyles(styles, { injectTheme: true })(CreateWorkspaceForm), |
97 | ); | 97 | ); |
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.tsx index ff4e71260..a860ac2e8 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.tsx | |||
@@ -1,11 +1,10 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, injectIntl } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { Link } from 'react-router-dom'; | 4 | import { Link } from 'react-router-dom'; |
6 | import injectSheet from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
7 | import Infobox from '../../../components/ui/infobox/index'; | 6 | import Infobox from '../../../components/ui/infobox/index'; |
8 | import Input from '../../../components/ui/input/index'; | 7 | import Input from '../../../components/ui/input'; |
9 | import Button from '../../../components/ui/button'; | 8 | import Button from '../../../components/ui/button'; |
10 | import Workspace from '../models/Workspace'; | 9 | import Workspace from '../models/Workspace'; |
11 | import Service from '../../../models/Service'; | 10 | import Service from '../../../models/Service'; |
@@ -69,30 +68,36 @@ const styles = { | |||
69 | }, | 68 | }, |
70 | }; | 69 | }; |
71 | 70 | ||
72 | class EditWorkspaceForm extends Component { | 71 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
73 | static propTypes = { | 72 | onDelete: () => void; |
74 | classes: PropTypes.object.isRequired, | 73 | onSave: (...args: any[]) => void; |
75 | onDelete: PropTypes.func.isRequired, | 74 | services: Service[]; |
76 | onSave: PropTypes.func.isRequired, | 75 | workspace: Workspace; |
77 | services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired, | 76 | updateWorkspaceRequest: Request; |
78 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 77 | deleteWorkspaceRequest: Request; |
79 | updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | 78 | } |
80 | deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | 79 | |
81 | }; | 80 | @observer |
81 | class EditWorkspaceForm extends Component<IProps> { | ||
82 | form: Form; | ||
83 | |||
84 | constructor(props: IProps) { | ||
85 | super(props); | ||
82 | 86 | ||
83 | form = this.prepareWorkspaceForm(this.props.workspace); | 87 | this.form = this.prepareWorkspaceForm(this.props.workspace); |
88 | } | ||
84 | 89 | ||
85 | // eslint-disable-next-line react/no-deprecated | 90 | UNSAFE_componentWillReceiveProps(nextProps): void { |
86 | componentWillReceiveProps(nextProps) { | ||
87 | const { workspace } = this.props; | 91 | const { workspace } = this.props; |
88 | if (workspace.id !== nextProps.workspace.id) { | 92 | if (workspace.id !== nextProps.workspace.id) { |
89 | this.form = this.prepareWorkspaceForm(nextProps.workspace); | 93 | this.form = this.prepareWorkspaceForm(nextProps.workspace); |
90 | } | 94 | } |
91 | } | 95 | } |
92 | 96 | ||
93 | prepareWorkspaceForm(workspace) { | 97 | prepareWorkspaceForm(workspace: Workspace): Form { |
94 | const { intl, updateWorkspaceRequest } = this.props; | 98 | const { intl, updateWorkspaceRequest } = this.props; |
95 | updateWorkspaceRequest.reset(); | 99 | updateWorkspaceRequest.reset(); |
100 | |||
96 | return new Form({ | 101 | return new Form({ |
97 | fields: { | 102 | fields: { |
98 | name: { | 103 | name: { |
@@ -105,6 +110,7 @@ class EditWorkspaceForm extends Component { | |||
105 | label: intl.formatMessage(messages.keepLoaded), | 110 | label: intl.formatMessage(messages.keepLoaded), |
106 | value: workspace.services.includes(KEEP_WS_LOADED_USID), | 111 | value: workspace.services.includes(KEEP_WS_LOADED_USID), |
107 | default: false, | 112 | default: false, |
113 | type: 'checkbox', | ||
108 | }, | 114 | }, |
109 | services: { | 115 | services: { |
110 | value: [...workspace.services], | 116 | value: [...workspace.services], |
@@ -113,7 +119,7 @@ class EditWorkspaceForm extends Component { | |||
113 | }); | 119 | }); |
114 | } | 120 | } |
115 | 121 | ||
116 | save(form) { | 122 | save(form): void { |
117 | this.props.updateWorkspaceRequest.reset(); | 123 | this.props.updateWorkspaceRequest.reset(); |
118 | form.submit({ | 124 | form.submit({ |
119 | onSuccess: async f => { | 125 | onSuccess: async f => { |
@@ -125,12 +131,12 @@ class EditWorkspaceForm extends Component { | |||
125 | }); | 131 | }); |
126 | } | 132 | } |
127 | 133 | ||
128 | delete() { | 134 | delete(): void { |
129 | const { onDelete } = this.props; | 135 | const { onDelete } = this.props; |
130 | onDelete(); | 136 | onDelete(); |
131 | } | 137 | } |
132 | 138 | ||
133 | toggleService(service) { | 139 | toggleService(service: Service): void { |
134 | const servicesField = this.form.$('services'); | 140 | const servicesField = this.form.$('services'); |
135 | const serviceIds = servicesField.value; | 141 | const serviceIds = servicesField.value; |
136 | if (serviceIds.includes(service.id)) { | 142 | if (serviceIds.includes(service.id)) { |
@@ -141,19 +147,20 @@ class EditWorkspaceForm extends Component { | |||
141 | servicesField.set(serviceIds); | 147 | servicesField.set(serviceIds); |
142 | } | 148 | } |
143 | 149 | ||
144 | render() { | 150 | render(): ReactElement { |
145 | const { intl } = this.props; | ||
146 | const { | 151 | const { |
147 | classes, | 152 | classes, |
148 | workspace, | 153 | workspace, |
149 | services, | 154 | services, |
150 | deleteWorkspaceRequest, | 155 | deleteWorkspaceRequest, |
151 | updateWorkspaceRequest, | 156 | updateWorkspaceRequest, |
157 | intl, | ||
152 | } = this.props; | 158 | } = this.props; |
153 | const { form } = this; | 159 | const { form } = this; |
154 | const workspaceServices = form.$('services').value; | 160 | const workspaceServices = form.$('services').value; |
155 | const isDeleting = deleteWorkspaceRequest.isExecuting; | 161 | const isDeleting = deleteWorkspaceRequest.isExecuting; |
156 | const isSaving = updateWorkspaceRequest.isExecuting; | 162 | const isSaving = updateWorkspaceRequest.isExecuting; |
163 | |||
157 | return ( | 164 | return ( |
158 | <div className="settings__main"> | 165 | <div className="settings__main"> |
159 | <div className="settings__header"> | 166 | <div className="settings__header"> |
@@ -195,12 +202,12 @@ class EditWorkspaceForm extends Component { | |||
195 | </div> | 202 | </div> |
196 | ) : ( | 203 | ) : ( |
197 | <> | 204 | <> |
198 | {services.map(s => ( | 205 | {services.map(service => ( |
199 | <WorkspaceServiceListItem | 206 | <WorkspaceServiceListItem |
200 | key={s.id} | 207 | key={service.id} |
201 | service={s} | 208 | service={service} |
202 | isInWorkspace={workspaceServices.includes(s.id)} | 209 | isInWorkspace={workspaceServices.includes(service.id)} |
203 | onToggle={() => this.toggleService(s)} | 210 | onToggle={() => this.toggleService(service)} |
204 | /> | 211 | /> |
205 | ))} | 212 | ))} |
206 | </> | 213 | </> |
@@ -236,5 +243,5 @@ class EditWorkspaceForm extends Component { | |||
236 | } | 243 | } |
237 | 244 | ||
238 | export default injectIntl( | 245 | export default injectIntl( |
239 | injectSheet(styles, { injectTheme: true })(observer(EditWorkspaceForm)), | 246 | withStyles(styles, { injectTheme: true })(EditWorkspaceForm), |
240 | ); | 247 | ); |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx index bdbebdb0a..61284d81a 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.tsx +++ b/src/features/workspaces/components/WorkspaceDrawer.tsx | |||
@@ -11,7 +11,6 @@ import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | |||
11 | import workspaceActions from '../actions'; | 11 | import workspaceActions from '../actions'; |
12 | import { workspaceStore } from '../index'; | 12 | import { workspaceStore } from '../index'; |
13 | import { getUserWorkspacesRequest } from '../api'; | 13 | import { getUserWorkspacesRequest } from '../api'; |
14 | import Service from '../../../models/Service'; | ||
15 | import Workspace from '../models/Workspace'; | 14 | import Workspace from '../models/Workspace'; |
16 | 15 | ||
17 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
@@ -90,7 +89,7 @@ const styles = theme => ({ | |||
90 | }); | 89 | }); |
91 | 90 | ||
92 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | 91 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
93 | getServicesForWorkspace: (workspace: Workspace | null) => Service[]; | 92 | getServicesForWorkspace: (workspace: Workspace | null) => string[]; |
94 | } | 93 | } |
95 | 94 | ||
96 | @observer | 95 | @observer |
@@ -150,7 +149,9 @@ class WorkspaceDrawer extends Component<IProps> { | |||
150 | name={workspace.name} | 149 | name={workspace.name} |
151 | isActive={actualWorkspace === workspace} | 150 | isActive={actualWorkspace === workspace} |
152 | onClick={() => { | 151 | onClick={() => { |
153 | if (actualWorkspace === workspace) return; | 152 | if (actualWorkspace === workspace) { |
153 | return; | ||
154 | } | ||
154 | workspaceActions.activate({ workspace }); | 155 | workspaceActions.activate({ workspace }); |
155 | workspaceActions.toggleWorkspaceDrawer(); | 156 | workspaceActions.toggleWorkspaceDrawer(); |
156 | }} | 157 | }} |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.tsx index 22c0a39d9..0ad56d1ae 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx | |||
@@ -1,10 +1,11 @@ | |||
1 | import { Menu } from '@electron/remote'; | 1 | import { Component, MouseEventHandler, ReactElement } from 'react'; |
2 | import { Component } from 'react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
5 | import injectSheet from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
7 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import { noop } from 'lodash'; | ||
7 | import { Menu } from '@electron/remote'; | ||
8 | import { MenuItemConstructorOptions } from 'electron'; | ||
8 | import { altKey, cmdOrCtrlShortcutKey } from '../../../environment'; | 9 | import { altKey, cmdOrCtrlShortcutKey } from '../../../environment'; |
9 | 10 | ||
10 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
@@ -18,11 +19,10 @@ const messages = defineMessages({ | |||
18 | }, | 19 | }, |
19 | }); | 20 | }); |
20 | 21 | ||
21 | let itemTransition = 'none'; | 22 | const itemTransition = |
22 | 23 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
23 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 24 | ? 'background-color 300ms ease-out' |
24 | itemTransition = 'background-color 300ms ease-out'; | 25 | : 'none'; |
25 | } | ||
26 | 26 | ||
27 | const styles = theme => ({ | 27 | const styles = theme => ({ |
28 | item: { | 28 | item: { |
@@ -65,35 +65,30 @@ const styles = theme => ({ | |||
65 | }, | 65 | }, |
66 | }); | 66 | }); |
67 | 67 | ||
68 | class WorkspaceDrawerItem extends Component { | 68 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
69 | static propTypes = { | 69 | isActive: boolean; |
70 | classes: PropTypes.object.isRequired, | 70 | name: string; |
71 | isActive: PropTypes.bool.isRequired, | 71 | onClick: MouseEventHandler<HTMLInputElement>; |
72 | name: PropTypes.string.isRequired, | 72 | services: string[]; |
73 | onClick: PropTypes.func.isRequired, | 73 | onContextMenuEditClick?: () => void | null; |
74 | services: PropTypes.arrayOf(PropTypes.string).isRequired, | 74 | shortcutIndex: number; |
75 | onContextMenuEditClick: PropTypes.func, | 75 | } |
76 | shortcutIndex: PropTypes.number.isRequired, | ||
77 | }; | ||
78 | |||
79 | static defaultProps = { | ||
80 | onContextMenuEditClick: null, | ||
81 | }; | ||
82 | 76 | ||
83 | render() { | 77 | @observer |
78 | class WorkspaceDrawerItem extends Component<IProps> { | ||
79 | render(): ReactElement { | ||
84 | const { | 80 | const { |
85 | classes, | 81 | classes, |
86 | isActive, | 82 | isActive, |
87 | name, | 83 | name, |
88 | onClick, | 84 | onClick, |
89 | onContextMenuEditClick, | 85 | onContextMenuEditClick = null, |
90 | services, | 86 | services, |
91 | shortcutIndex, | 87 | shortcutIndex, |
88 | intl, | ||
92 | } = this.props; | 89 | } = this.props; |
93 | 90 | ||
94 | const { intl } = this.props; | 91 | const contextMenuTemplate: MenuItemConstructorOptions[] = [ |
95 | |||
96 | const contextMenuTemplate = [ | ||
97 | { | 92 | { |
98 | label: name, | 93 | label: name, |
99 | enabled: false, | 94 | enabled: false, |
@@ -103,7 +98,7 @@ class WorkspaceDrawerItem extends Component { | |||
103 | }, | 98 | }, |
104 | { | 99 | { |
105 | label: intl.formatMessage(messages.contextMenuEdit), | 100 | label: intl.formatMessage(messages.contextMenuEdit), |
106 | click: onContextMenuEditClick, | 101 | click: onContextMenuEditClick || noop, |
107 | }, | 102 | }, |
108 | ]; | 103 | ]; |
109 | 104 | ||
@@ -116,7 +111,12 @@ class WorkspaceDrawerItem extends Component { | |||
116 | isActive ? classes.isActiveItem : null, | 111 | isActive ? classes.isActiveItem : null, |
117 | ])} | 112 | ])} |
118 | onClick={onClick} | 113 | onClick={onClick} |
119 | onContextMenu={() => onContextMenuEditClick && contextMenu.popup()} | 114 | onContextMenu={() => { |
115 | if (onContextMenuEditClick) { | ||
116 | contextMenu.popup(); | ||
117 | } | ||
118 | }} | ||
119 | onKeyDown={noop} | ||
120 | data-tip={`${ | 120 | data-tip={`${ |
121 | shortcutIndex <= 9 | 121 | shortcutIndex <= 9 |
122 | ? `(${cmdOrCtrlShortcutKey(false)}+${altKey( | 122 | ? `(${cmdOrCtrlShortcutKey(false)}+${altKey( |
@@ -149,5 +149,5 @@ class WorkspaceDrawerItem extends Component { | |||
149 | } | 149 | } |
150 | 150 | ||
151 | export default injectIntl( | 151 | export default injectIntl( |
152 | injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawerItem)), | 152 | withStyles(styles, { injectTheme: true })(WorkspaceDrawerItem), |
153 | ); | 153 | ); |
diff --git a/src/features/workspaces/components/WorkspaceItem.tsx b/src/features/workspaces/components/WorkspaceItem.tsx index eb33a0376..b097a8298 100644 --- a/src/features/workspaces/components/WorkspaceItem.tsx +++ b/src/features/workspaces/components/WorkspaceItem.tsx | |||
@@ -1,6 +1,8 @@ | |||
1 | import { Component } from 'react'; | 1 | /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ // TODO - [TS DEBT] Need to check and remove it |
2 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
3 | import injectSheet from 'react-jss'; | 4 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | import { noop } from 'lodash'; | ||
4 | import Workspace from '../models/Workspace'; | 6 | import Workspace from '../models/Workspace'; |
5 | 7 | ||
6 | const styles = theme => ({ | 8 | const styles = theme => ({ |
@@ -14,24 +16,24 @@ const styles = theme => ({ | |||
14 | columnName: {}, | 16 | columnName: {}, |
15 | }); | 17 | }); |
16 | 18 | ||
17 | type Props = { | 19 | interface IProps extends WithStylesProps<typeof styles> { |
18 | classes: any; | 20 | workspace: Workspace; |
19 | workspace: typeof Workspace; | 21 | onItemClick: (workspace: Workspace) => void; |
20 | onItemClick: (workspace) => void; | 22 | } |
21 | }; | ||
22 | 23 | ||
23 | class WorkspaceItem extends Component<Props> { | 24 | @observer |
24 | render() { | 25 | class WorkspaceItem extends Component<IProps> { |
26 | render(): ReactElement { | ||
25 | const { classes, workspace, onItemClick } = this.props; | 27 | const { classes, workspace, onItemClick } = this.props; |
26 | 28 | ||
27 | return ( | 29 | return ( |
28 | <tr className={classes.row}> | 30 | <tr className={classes.row}> |
29 | <td onClick={() => onItemClick(workspace)}>{workspace.name}</td> | 31 | <td onClick={() => onItemClick(workspace)} onKeyDown={noop}> |
32 | {workspace.name} | ||
33 | </td> | ||
30 | </tr> | 34 | </tr> |
31 | ); | 35 | ); |
32 | } | 36 | } |
33 | } | 37 | } |
34 | 38 | ||
35 | export default injectSheet(styles, { injectTheme: true })( | 39 | export default withStyles(styles, { injectTheme: true })(WorkspaceItem); |
36 | observer(WorkspaceItem), | ||
37 | ); | ||
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx index e708d5cdf..9034be37c 100644 --- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx +++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx | |||
@@ -2,6 +2,7 @@ import { Component, ReactElement } from 'react'; | |||
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import withStyles, { WithStylesProps } from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import { noop } from 'lodash'; | ||
5 | import Toggle from '../../../components/ui/toggle'; | 6 | import Toggle from '../../../components/ui/toggle'; |
6 | import ServiceIcon from '../../../components/ui/ServiceIcon'; | 7 | import ServiceIcon from '../../../components/ui/ServiceIcon'; |
7 | import Service from '../../../models/Service'; | 8 | import Service from '../../../models/Service'; |
@@ -39,9 +40,9 @@ interface IProps extends WithStylesProps<typeof styles> { | |||
39 | class WorkspaceServiceListItem extends Component<IProps> { | 40 | class WorkspaceServiceListItem extends Component<IProps> { |
40 | render(): ReactElement { | 41 | render(): ReactElement { |
41 | const { classes, isInWorkspace, onToggle, service } = this.props; | 42 | const { classes, isInWorkspace, onToggle, service } = this.props; |
42 | |||
43 | return ( | 43 | return ( |
44 | <div className={classes.listItem}> | 44 | // onclick in below div used to fix bug raised under toggle duplicate component removal |
45 | <div className={classes.listItem} onClick={onToggle} onKeyDown={noop}> | ||
45 | <ServiceIcon className={classes.serviceIcon} service={service} /> | 46 | <ServiceIcon className={classes.serviceIcon} service={service} /> |
46 | <span | 47 | <span |
47 | className={classnames([ | 48 | className={classnames([ |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.tsx index 87ba06a2d..60fc7a0ce 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.tsx | |||
@@ -1,18 +1,16 @@ | |||
1 | /* eslint-disable react/jsx-no-useless-fragment */ | 1 | /* eslint-disable react/jsx-no-useless-fragment */ |
2 | import { Component } from 'react'; | 2 | import { Component, ReactElement } from 'react'; |
3 | import PropTypes from 'prop-types'; | 3 | import { observer } from 'mobx-react'; |
4 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | import injectSheet from 'react-jss'; | ||
7 | |||
8 | import Infobox from '../../../components/ui/infobox/index'; | 6 | import Infobox from '../../../components/ui/infobox/index'; |
9 | import Loader from '../../../components/ui/Loader'; | 7 | import Loader from '../../../components/ui/Loader'; |
10 | import WorkspaceItem from './WorkspaceItem'; | 8 | import WorkspaceItem from './WorkspaceItem'; |
11 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 9 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
12 | import Request from '../../../stores/lib/Request'; | 10 | import Request from '../../../stores/lib/Request'; |
13 | import Appear from '../../../components/ui/effects/Appear'; | 11 | import Appear from '../../../components/ui/effects/Appear'; |
14 | import UIStore from '../../../stores/UIStore'; | ||
15 | import { H1 } from '../../../components/ui/headline'; | 12 | import { H1 } from '../../../components/ui/headline'; |
13 | import Workspace from '../models/Workspace'; | ||
16 | 14 | ||
17 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
18 | headline: { | 16 | headline: { |
@@ -70,19 +68,19 @@ const styles = { | |||
70 | }, | 68 | }, |
71 | }; | 69 | }; |
72 | 70 | ||
73 | class WorkspacesDashboard extends Component { | 71 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { |
74 | static propTypes = { | 72 | getUserWorkspacesRequest: Request; |
75 | classes: PropTypes.object.isRequired, | 73 | createWorkspaceRequest: Request; |
76 | getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, | 74 | deleteWorkspaceRequest: Request; |
77 | createWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | 75 | updateWorkspaceRequest: Request; |
78 | deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | 76 | onCreateWorkspaceSubmit: (workspace: Workspace) => void; |
79 | updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | 77 | onWorkspaceClick: (workspace: Workspace) => void; |
80 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, | 78 | workspaces: Workspace[]; |
81 | onWorkspaceClick: PropTypes.func.isRequired, | 79 | } |
82 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | ||
83 | }; | ||
84 | 80 | ||
85 | render() { | 81 | @observer |
82 | class WorkspacesDashboard extends Component<IProps> { | ||
83 | render(): ReactElement { | ||
86 | const { | 84 | const { |
87 | classes, | 85 | classes, |
88 | getUserWorkspacesRequest, | 86 | getUserWorkspacesRequest, |
@@ -108,7 +106,7 @@ class WorkspacesDashboard extends Component { | |||
108 | <Infobox | 106 | <Infobox |
109 | type="success" | 107 | type="success" |
110 | icon="checkbox-marked-circle-outline" | 108 | icon="checkbox-marked-circle-outline" |
111 | dismissable | 109 | dismissible |
112 | onUnmount={updateWorkspaceRequest.reset} | 110 | onUnmount={updateWorkspaceRequest.reset} |
113 | > | 111 | > |
114 | {intl.formatMessage(messages.updatedInfo)} | 112 | {intl.formatMessage(messages.updatedInfo)} |
@@ -122,7 +120,7 @@ class WorkspacesDashboard extends Component { | |||
122 | <Infobox | 120 | <Infobox |
123 | type="success" | 121 | type="success" |
124 | icon="checkbox-marked-circle-outline" | 122 | icon="checkbox-marked-circle-outline" |
125 | dismissable | 123 | dismissible |
126 | onUnmount={deleteWorkspaceRequest.reset} | 124 | onUnmount={deleteWorkspaceRequest.reset} |
127 | > | 125 | > |
128 | {intl.formatMessage(messages.deletedInfo)} | 126 | {intl.formatMessage(messages.deletedInfo)} |
@@ -147,7 +145,7 @@ class WorkspacesDashboard extends Component { | |||
147 | icon="alert" | 145 | icon="alert" |
148 | type="danger" | 146 | type="danger" |
149 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | 147 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} |
150 | ctaLoading={getUserWorkspacesRequest.isExecuting} | 148 | // ctaLoading={getUserWorkspacesRequest.isExecuting} // TODO - [TECH DEBT][PROP NOT USED IN COMPONENT] need to check and update |
151 | ctaOnClick={getUserWorkspacesRequest.retry} | 149 | ctaOnClick={getUserWorkspacesRequest.retry} |
152 | > | 150 | > |
153 | {intl.formatMessage(messages.workspacesRequestFailed)} | 151 | {intl.formatMessage(messages.workspacesRequestFailed)} |
@@ -165,7 +163,7 @@ class WorkspacesDashboard extends Component { | |||
165 | </p> | 163 | </p> |
166 | </div> | 164 | </div> |
167 | ) : ( | 165 | ) : ( |
168 | <table className={classes.table}> | 166 | <table className={classes.table} role="grid"> |
169 | {/* ===== Workspaces list ===== */} | 167 | {/* ===== Workspaces list ===== */} |
170 | <tbody> | 168 | <tbody> |
171 | {workspaces.map(workspace => ( | 169 | {workspaces.map(workspace => ( |
@@ -189,13 +187,5 @@ class WorkspacesDashboard extends Component { | |||
189 | } | 187 | } |
190 | 188 | ||
191 | export default injectIntl( | 189 | export default injectIntl( |
192 | inject('stores')( | 190 | withStyles(styles, { injectTheme: true })(WorkspacesDashboard), |
193 | injectSheet(styles, { injectTheme: true })(observer(WorkspacesDashboard)), | ||
194 | ), | ||
195 | ); | 191 | ); |
196 | |||
197 | WorkspacesDashboard.propTypes = { | ||
198 | stores: PropTypes.shape({ | ||
199 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
200 | }).isRequired, | ||
201 | }; | ||
diff --git a/src/features/workspaces/containers/WorkspacesScreen.tsx b/src/features/workspaces/containers/WorkspacesScreen.tsx index d43dc5efa..39f19935f 100644 --- a/src/features/workspaces/containers/WorkspacesScreen.tsx +++ b/src/features/workspaces/containers/WorkspacesScreen.tsx | |||
@@ -10,8 +10,13 @@ import { | |||
10 | getUserWorkspacesRequest, | 10 | getUserWorkspacesRequest, |
11 | updateWorkspaceRequest, | 11 | updateWorkspaceRequest, |
12 | } from '../api'; | 12 | } from '../api'; |
13 | import Workspace from '../models/Workspace'; | ||
13 | 14 | ||
14 | class WorkspacesScreen extends Component<StoresProps> { | 15 | interface IProps extends StoresProps {} |
16 | |||
17 | @inject('stores', 'actions') | ||
18 | @observer | ||
19 | class WorkspacesScreen extends Component<IProps> { | ||
15 | render() { | 20 | render() { |
16 | const { actions } = this.props; | 21 | const { actions } = this.props; |
17 | return ( | 22 | return ( |
@@ -23,11 +28,13 @@ class WorkspacesScreen extends Component<StoresProps> { | |||
23 | deleteWorkspaceRequest={deleteWorkspaceRequest} | 28 | deleteWorkspaceRequest={deleteWorkspaceRequest} |
24 | updateWorkspaceRequest={updateWorkspaceRequest} | 29 | updateWorkspaceRequest={updateWorkspaceRequest} |
25 | onCreateWorkspaceSubmit={data => actions.workspaces.create(data)} | 30 | onCreateWorkspaceSubmit={data => actions.workspaces.create(data)} |
26 | onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })} | 31 | onWorkspaceClick={(workspace: Workspace) => |
32 | actions.workspaces.edit({ workspace }) | ||
33 | } | ||
27 | /> | 34 | /> |
28 | </ErrorBoundary> | 35 | </ErrorBoundary> |
29 | ); | 36 | ); |
30 | } | 37 | } |
31 | } | 38 | } |
32 | 39 | ||
33 | export default inject('stores', 'actions')(observer(WorkspacesScreen)); | 40 | export default WorkspacesScreen; |