aboutsummaryrefslogtreecommitdiffstats
path: root/src/features/workspaces/components/EditWorkspaceForm.js
diff options
context:
space:
mode:
authorLibravatar muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>2022-11-17 05:45:39 +0530
committerLibravatar GitHub <noreply@github.com>2022-11-17 00:15:39 +0000
commitd9502c7516bc2d4ae467c6ea8a2e4816b0885f37 (patch)
treeb339c587a5529ac26d52cfc12d9972a8a00255e6 /src/features/workspaces/components/EditWorkspaceForm.js
parentTransform JSX components to TSX (#755) (diff)
downloadferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.gz
ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.zst
ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.zip
Transfrom workspace components to ts (#775)
Diffstat (limited to 'src/features/workspaces/components/EditWorkspaceForm.js')
-rw-r--r--src/features/workspaces/components/EditWorkspaceForm.js240
1 files changed, 0 insertions, 240 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
deleted file mode 100644
index ff4e71260..000000000
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ /dev/null
@@ -1,240 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import { defineMessages, injectIntl } from 'react-intl';
5import { Link } from 'react-router-dom';
6import injectSheet from 'react-jss';
7import Infobox from '../../../components/ui/infobox/index';
8import Input from '../../../components/ui/input/index';
9import Button from '../../../components/ui/button';
10import Workspace from '../models/Workspace';
11import Service from '../../../models/Service';
12import Form from '../../../lib/Form';
13import { required } from '../../../helpers/validation-helpers';
14import WorkspaceServiceListItem from './WorkspaceServiceListItem';
15import Request from '../../../stores/lib/Request';
16import { KEEP_WS_LOADED_USID } from '../../../config';
17import Toggle from '../../../components/ui/toggle';
18import { H2 } from '../../../components/ui/headline';
19
20const messages = defineMessages({
21 buttonDelete: {
22 id: 'settings.workspace.form.buttonDelete',
23 defaultMessage: 'Delete workspace',
24 },
25 buttonSave: {
26 id: 'settings.workspace.form.buttonSave',
27 defaultMessage: 'Save workspace',
28 },
29 name: {
30 id: 'settings.workspace.form.name',
31 defaultMessage: 'Name',
32 },
33 yourWorkspaces: {
34 id: 'settings.workspace.form.yourWorkspaces',
35 defaultMessage: 'Your workspaces',
36 },
37 keepLoaded: {
38 id: 'settings.workspace.form.keepLoaded',
39 defaultMessage: 'Keep this workspace loaded*',
40 },
41 keepLoadedInfo: {
42 id: 'settings.workspace.form.keepLoadedInfo',
43 defaultMessage:
44 '*This option will be overwritten by the global "Keep all workspaces loaded" option.',
45 },
46 servicesInWorkspaceHeadline: {
47 id: 'settings.workspace.form.servicesInWorkspaceHeadline',
48 defaultMessage: 'Services in this Workspace',
49 },
50 noServicesAdded: {
51 id: 'settings.services.noServicesAdded',
52 defaultMessage: 'Start by adding a service.',
53 },
54 discoverServices: {
55 id: 'settings.services.discoverServices',
56 defaultMessage: 'Discover services',
57 },
58});
59
60const styles = {
61 nameInput: {
62 height: 'auto',
63 },
64 serviceList: {
65 height: 'auto',
66 },
67 keepLoadedInfo: {
68 marginBottom: '2rem !important',
69 },
70};
71
72class EditWorkspaceForm extends Component {
73 static propTypes = {
74 classes: PropTypes.object.isRequired,
75 onDelete: PropTypes.func.isRequired,
76 onSave: PropTypes.func.isRequired,
77 services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
78 workspace: PropTypes.instanceOf(Workspace).isRequired,
79 updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
80 deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
81 };
82
83 form = this.prepareWorkspaceForm(this.props.workspace);
84
85 // eslint-disable-next-line react/no-deprecated
86 componentWillReceiveProps(nextProps) {
87 const { workspace } = this.props;
88 if (workspace.id !== nextProps.workspace.id) {
89 this.form = this.prepareWorkspaceForm(nextProps.workspace);
90 }
91 }
92
93 prepareWorkspaceForm(workspace) {
94 const { intl, updateWorkspaceRequest } = this.props;
95 updateWorkspaceRequest.reset();
96 return new Form({
97 fields: {
98 name: {
99 label: intl.formatMessage(messages.name),
100 placeholder: intl.formatMessage(messages.name),
101 value: workspace.name,
102 validators: [required],
103 },
104 keepLoaded: {
105 label: intl.formatMessage(messages.keepLoaded),
106 value: workspace.services.includes(KEEP_WS_LOADED_USID),
107 default: false,
108 },
109 services: {
110 value: [...workspace.services],
111 },
112 },
113 });
114 }
115
116 save(form) {
117 this.props.updateWorkspaceRequest.reset();
118 form.submit({
119 onSuccess: async f => {
120 const { onSave } = this.props;
121 const values = f.values();
122 onSave(values);
123 },
124 onError: async () => {},
125 });
126 }
127
128 delete() {
129 const { onDelete } = this.props;
130 onDelete();
131 }
132
133 toggleService(service) {
134 const servicesField = this.form.$('services');
135 const serviceIds = servicesField.value;
136 if (serviceIds.includes(service.id)) {
137 serviceIds.splice(serviceIds.indexOf(service.id), 1);
138 } else {
139 serviceIds.push(service.id);
140 }
141 servicesField.set(serviceIds);
142 }
143
144 render() {
145 const { intl } = this.props;
146 const {
147 classes,
148 workspace,
149 services,
150 deleteWorkspaceRequest,
151 updateWorkspaceRequest,
152 } = this.props;
153 const { form } = this;
154 const workspaceServices = form.$('services').value;
155 const isDeleting = deleteWorkspaceRequest.isExecuting;
156 const isSaving = updateWorkspaceRequest.isExecuting;
157 return (
158 <div className="settings__main">
159 <div className="settings__header">
160 <span className="settings__header-item">
161 <Link to="/settings/workspaces">
162 {intl.formatMessage(messages.yourWorkspaces)}
163 </Link>
164 </span>
165 <span className="separator" />
166 <span className="settings__header-item">{workspace.name}</span>
167 </div>
168 <div className="settings__body">
169 {updateWorkspaceRequest.error && (
170 <Infobox icon="alert" type="danger">
171 Error while saving workspace
172 </Infobox>
173 )}
174 <div className={classes.nameInput}>
175 <Input {...form.$('name').bind()} />
176 <Toggle {...form.$('keepLoaded').bind()} />
177 <p className={`${classes.keepLoadedInfo} franz-form__label`}>
178 {intl.formatMessage(messages.keepLoadedInfo)}
179 </p>
180 </div>
181 <H2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</H2>
182 <div className={classes.serviceList}>
183 {services.length === 0 ? (
184 <div className="align-middle settings__empty-state">
185 {/* ===== Empty state ===== */}
186 <p className="settings__empty-text">
187 <span className="emoji">
188 <img src="./assets/images/emoji/sad.png" alt="" />
189 </span>
190 {intl.formatMessage(messages.noServicesAdded)}
191 </p>
192 <Link to="/settings/recipes" className="button">
193 {intl.formatMessage(messages.discoverServices)}
194 </Link>
195 </div>
196 ) : (
197 <>
198 {services.map(s => (
199 <WorkspaceServiceListItem
200 key={s.id}
201 service={s}
202 isInWorkspace={workspaceServices.includes(s.id)}
203 onToggle={() => this.toggleService(s)}
204 />
205 ))}
206 </>
207 )}
208 </div>
209 </div>
210 <div className="settings__controls">
211 {/* ===== Delete Button ===== */}
212 <Button
213 label={intl.formatMessage(messages.buttonDelete)}
214 loaded={false}
215 busy={isDeleting}
216 buttonType={isDeleting ? 'secondary' : 'danger'}
217 className="settings__delete-button"
218 disabled={isDeleting}
219 onClick={this.delete.bind(this)}
220 />
221 {/* ===== Save Button ===== */}
222 <Button
223 type="submit"
224 label={intl.formatMessage(messages.buttonSave)}
225 busy={isSaving}
226 className="franz-form__button"
227 buttonType={isSaving ? 'secondary' : 'primary'}
228 onClick={this.save.bind(this, form)}
229 // TODO: Need to disable if no services have been added to this workspace
230 disabled={isSaving}
231 />
232 </div>
233 </div>
234 );
235 }
236}
237
238export default injectIntl(
239 injectSheet(styles, { injectTheme: true })(observer(EditWorkspaceForm)),
240);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-10 14:21:35 +0000