diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/services/EditServiceForm.tsx (renamed from src/components/settings/services/EditServiceForm.js) | 94 |
1 files changed, 49 insertions, 45 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.tsx index eb18b57eb..b594fcd40 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.tsx | |||
@@ -1,25 +1,24 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, FormEvent, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Link } from 'react-router-dom'; | 3 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import normalizeUrl from 'normalize-url'; | 5 | import normalizeUrl from 'normalize-url'; |
7 | import { mdiInformation } from '@mdi/js'; | 6 | import { mdiInformation } from '@mdi/js'; |
8 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
9 | import Recipe from '../../../models/Recipe'; | ||
10 | import Service from '../../../models/Service'; | ||
11 | import Tabs from '../../ui/Tabs/Tabs'; | 8 | import Tabs from '../../ui/Tabs/Tabs'; |
12 | import TabItem from '../../ui/Tabs/TabItem'; | 9 | import TabItem from '../../ui/Tabs/TabItem'; |
13 | import Input from '../../ui/input/index'; | 10 | import Input from '../../ui/input/index'; |
14 | import Toggle from '../../ui/toggle'; | 11 | import Toggle from '../../ui/toggle'; |
15 | import Slider from '../../ui/Slider'; | 12 | import Slider from '../../ui/Slider'; |
16 | import Button from '../../ui/button'; | 13 | import Button from '../../ui/button'; |
17 | import ImageUpload from '../../ui/ImageUpload'; | 14 | import ImageUpload from '../../ui/imageUpload'; |
18 | import Select from '../../ui/Select'; | 15 | import Select from '../../ui/Select'; |
19 | import { isMac } from '../../../environment'; | 16 | import { isMac } from '../../../environment'; |
20 | import globalMessages from '../../../i18n/globalMessages'; | 17 | import globalMessages from '../../../i18n/globalMessages'; |
21 | import Icon from '../../ui/icon'; | 18 | import Icon from '../../ui/icon'; |
22 | import { H3 } from '../../ui/headline'; | 19 | import { H3 } from '../../ui/headline'; |
20 | import { IRecipe } from '../../../models/Recipe'; | ||
21 | import Service from '../../../models/Service'; | ||
23 | 22 | ||
24 | const messages = defineMessages({ | 23 | const messages = defineMessages({ |
25 | saveService: { | 24 | saveService: { |
@@ -149,36 +148,34 @@ const messages = defineMessages({ | |||
149 | }, | 148 | }, |
150 | }); | 149 | }); |
151 | 150 | ||
152 | class EditServiceForm extends Component { | 151 | interface IProps extends WrappedComponentProps { |
153 | static propTypes = { | 152 | recipe: IRecipe; |
154 | recipe: PropTypes.instanceOf(Recipe).isRequired, | 153 | service: Service | null; |
155 | service(props, propName) { | 154 | action?: string; |
156 | if (props.action === 'edit' && !(props[propName] instanceof Service)) { | 155 | form: Form; |
157 | return new Error(`'${propName}'' is expected to be of type 'Service' | 156 | onSubmit: (...args: any[]) => void; |
158 | when editing a Service`); | 157 | onDelete: () => void; |
159 | } | 158 | openRecipeFile: (recipeFile: string) => void; |
159 | isSaving: boolean; | ||
160 | isDeleting: boolean; | ||
161 | isProxyFeatureEnabled: boolean; | ||
162 | } | ||
160 | 163 | ||
161 | return null; | 164 | interface IState { |
162 | }, | 165 | isValidatingCustomUrl: boolean; |
163 | action: PropTypes.string.isRequired, | 166 | } |
164 | form: PropTypes.instanceOf(Form).isRequired, | ||
165 | onSubmit: PropTypes.func.isRequired, | ||
166 | onDelete: PropTypes.func.isRequired, | ||
167 | openRecipeFile: PropTypes.func.isRequired, | ||
168 | isSaving: PropTypes.bool.isRequired, | ||
169 | isDeleting: PropTypes.bool.isRequired, | ||
170 | isProxyFeatureEnabled: PropTypes.bool.isRequired, | ||
171 | }; | ||
172 | 167 | ||
173 | static defaultProps = { | 168 | @observer |
174 | service: {}, | 169 | class EditServiceForm extends Component<IProps, IState> { |
175 | }; | 170 | constructor(props: IProps) { |
171 | super(props); | ||
176 | 172 | ||
177 | state = { | 173 | this.state = { |
178 | isValidatingCustomUrl: false, | 174 | isValidatingCustomUrl: false, |
179 | }; | 175 | }; |
176 | } | ||
180 | 177 | ||
181 | submit(e) { | 178 | submit(e: FormEvent): void { |
182 | const { recipe } = this.props; | 179 | const { recipe } = this.props; |
183 | 180 | ||
184 | e.preventDefault(); | 181 | e.preventDefault(); |
@@ -189,7 +186,8 @@ class EditServiceForm extends Component { | |||
189 | 186 | ||
190 | const { files } = form.$('customIcon'); | 187 | const { files } = form.$('customIcon'); |
191 | if (files) { | 188 | if (files) { |
192 | values.iconFile = files[0]; | 189 | const [iconFile] = files; |
190 | values.iconFile = iconFile; | ||
193 | } | 191 | } |
194 | 192 | ||
195 | if (recipe.validateUrl && values.customUrl) { | 193 | if (recipe.validateUrl && values.customUrl) { |
@@ -219,20 +217,19 @@ class EditServiceForm extends Component { | |||
219 | }); | 217 | }); |
220 | } | 218 | } |
221 | 219 | ||
222 | render() { | 220 | render(): ReactElement { |
223 | const { | 221 | const { |
224 | recipe, | 222 | recipe, |
225 | service, | 223 | service = {} as Service, |
226 | action, | 224 | action = '', |
227 | form, | 225 | form, |
228 | isSaving, | 226 | isSaving, |
229 | isDeleting, | 227 | isDeleting, |
230 | onDelete, | 228 | onDelete, |
231 | openRecipeFile, | 229 | openRecipeFile, |
232 | isProxyFeatureEnabled, | 230 | isProxyFeatureEnabled, |
231 | intl, | ||
233 | } = this.props; | 232 | } = this.props; |
234 | const { intl } = this.props; | ||
235 | |||
236 | const { isValidatingCustomUrl } = this.state; | 233 | const { isValidatingCustomUrl } = this.state; |
237 | 234 | ||
238 | const deleteButton = isDeleting ? ( | 235 | const deleteButton = isDeleting ? ( |
@@ -283,7 +280,8 @@ class EditServiceForm extends Component { | |||
283 | name: recipe.name, | 280 | name: recipe.name, |
284 | }) | 281 | }) |
285 | : intl.formatMessage(messages.editServiceHeadline, { | 282 | : intl.formatMessage(messages.editServiceHeadline, { |
286 | name: service.name !== '' ? service.name : recipe.name, | 283 | name: |
284 | service && service.name !== '' ? service.name : recipe.name, | ||
287 | })} | 285 | })} |
288 | </span> | 286 | </span> |
289 | </div> | 287 | </div> |
@@ -295,23 +293,29 @@ class EditServiceForm extends Component { | |||
295 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 293 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
296 | <Tabs active={activeTabIndex}> | 294 | <Tabs active={activeTabIndex}> |
297 | {recipe.hasHostedOption && ( | 295 | {recipe.hasHostedOption && ( |
298 | <TabItem title={recipe.name}> | 296 | <TabItem |
297 | // title={recipe.name} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
298 | > | ||
299 | {intl.formatMessage(messages.useHostedService, { | 299 | {intl.formatMessage(messages.useHostedService, { |
300 | name: recipe.name, | 300 | name: recipe.name, |
301 | })} | 301 | })} |
302 | </TabItem> | 302 | </TabItem> |
303 | )} | 303 | )} |
304 | {recipe.hasTeamId && ( | 304 | {recipe.hasTeamId && ( |
305 | <TabItem title={intl.formatMessage(messages.tabHosted)}> | 305 | <TabItem |
306 | // title={intl.formatMessage(messages.tabHosted)} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
307 | > | ||
306 | <Input | 308 | <Input |
307 | field={form.$('team')} | 309 | {...form.$('team').bind()} |
308 | prefix={recipe.urlInputPrefix} | 310 | prefix={recipe.urlInputPrefix} |
309 | suffix={recipe.urlInputSuffix} | 311 | suffix={recipe.urlInputSuffix} |
310 | /> | 312 | /> |
311 | </TabItem> | 313 | </TabItem> |
312 | )} | 314 | )} |
313 | {recipe.hasCustomUrl && ( | 315 | {recipe.hasCustomUrl && ( |
314 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> | 316 | <TabItem |
317 | // title={intl.formatMessage(messages.tabOnPremise)} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
318 | > | ||
315 | <Input {...form.$('customUrl').bind()} /> | 319 | <Input {...form.$('customUrl').bind()} /> |
316 | {form.error === 'url-validation-error' && ( | 320 | {form.error === 'url-validation-error' && ( |
317 | <p className="franz-form__error"> | 321 | <p className="franz-form__error"> |
@@ -404,7 +408,7 @@ class EditServiceForm extends Component { | |||
404 | </div> | 408 | </div> |
405 | <div className="service-icon"> | 409 | <div className="service-icon"> |
406 | <ImageUpload | 410 | <ImageUpload |
407 | field={form.$('customIcon')} | 411 | {...form.$('customIcon').bind()} |
408 | textDelete={intl.formatMessage(messages.iconDelete)} | 412 | textDelete={intl.formatMessage(messages.iconDelete)} |
409 | textUpload={intl.formatMessage(messages.iconUpload)} | 413 | textUpload={intl.formatMessage(messages.iconUpload)} |
410 | maxSize={2_097_152} | 414 | maxSize={2_097_152} |
@@ -533,4 +537,4 @@ class EditServiceForm extends Component { | |||
533 | } | 537 | } |
534 | } | 538 | } |
535 | 539 | ||
536 | export default injectIntl(observer(EditServiceForm)); | 540 | export default injectIntl(EditServiceForm); |