diff options
-rw-r--r-- | src/components/settings/services/EditServiceForm.tsx | 12 | ||||
-rw-r--r-- | src/components/ui/Tabs/TabItem.tsx | 20 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.tsx (renamed from src/components/ui/Tabs/Tabs.js) | 50 | ||||
-rw-r--r-- | src/containers/settings/EditServiceScreen.tsx | 132 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.tsx | 1 |
5 files changed, 107 insertions, 108 deletions
diff --git a/src/components/settings/services/EditServiceForm.tsx b/src/components/settings/services/EditServiceForm.tsx index b594fcd40..112e5a452 100644 --- a/src/components/settings/services/EditServiceForm.tsx +++ b/src/components/settings/services/EditServiceForm.tsx | |||
@@ -293,18 +293,14 @@ class EditServiceForm extends Component<IProps, IState> { | |||
293 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 293 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
294 | <Tabs active={activeTabIndex}> | 294 | <Tabs active={activeTabIndex}> |
295 | {recipe.hasHostedOption && ( | 295 | {recipe.hasHostedOption && ( |
296 | <TabItem | 296 | <TabItem title={recipe.name}> |
297 | // title={recipe.name} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
298 | > | ||
299 | {intl.formatMessage(messages.useHostedService, { | 297 | {intl.formatMessage(messages.useHostedService, { |
300 | name: recipe.name, | 298 | name: recipe.name, |
301 | })} | 299 | })} |
302 | </TabItem> | 300 | </TabItem> |
303 | )} | 301 | )} |
304 | {recipe.hasTeamId && ( | 302 | {recipe.hasTeamId && ( |
305 | <TabItem | 303 | <TabItem title={intl.formatMessage(messages.tabHosted)}> |
306 | // title={intl.formatMessage(messages.tabHosted)} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
307 | > | ||
308 | <Input | 304 | <Input |
309 | {...form.$('team').bind()} | 305 | {...form.$('team').bind()} |
310 | prefix={recipe.urlInputPrefix} | 306 | prefix={recipe.urlInputPrefix} |
@@ -313,9 +309,7 @@ class EditServiceForm extends Component<IProps, IState> { | |||
313 | </TabItem> | 309 | </TabItem> |
314 | )} | 310 | )} |
315 | {recipe.hasCustomUrl && ( | 311 | {recipe.hasCustomUrl && ( |
316 | <TabItem | 312 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> |
317 | // title={intl.formatMessage(messages.tabOnPremise)} // TODO - [TS DEBT] property not used inside TabItem need to check it | ||
318 | > | ||
319 | <Input {...form.$('customUrl').bind()} /> | 313 | <Input {...form.$('customUrl').bind()} /> |
320 | {form.error === 'url-validation-error' && ( | 314 | {form.error === 'url-validation-error' && ( |
321 | <p className="franz-form__error"> | 315 | <p className="franz-form__error"> |
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx index 631586d62..815dced8c 100644 --- a/src/components/ui/Tabs/TabItem.tsx +++ b/src/components/ui/Tabs/TabItem.tsx | |||
@@ -1 +1,19 @@ | |||
1 | export default ({ children }) => <>{children}</>; | 1 | import { Fragment, ReactElement } from 'react'; |
2 | |||
3 | export interface IProps { | ||
4 | children: | ||
5 | | string | ||
6 | | ReactElement<HTMLInputElement> | ||
7 | | ( | ||
8 | | boolean | ||
9 | | ReactElement<HTMLInputElement> | ||
10 | | ReactElement<HTMLParagraphElement> | ||
11 | )[]; | ||
12 | title?: string; // it is used on Tabs.tsx | ||
13 | } | ||
14 | |||
15 | function TabItem({ children, title = '' }: IProps): ReactElement { | ||
16 | return <Fragment key={title}>{children}</Fragment>; | ||
17 | } | ||
18 | |||
19 | export default TabItem; | ||
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.tsx index 5d2da6293..2c34d7e24 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.tsx | |||
@@ -1,32 +1,36 @@ | |||
1 | import { Children, Component } from 'react'; | 1 | import { Children, Component, ReactElement, ReactPortal } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { IProps as TabItemProps } from './TabItem'; | ||
5 | 5 | ||
6 | import { oneOrManyChildElements } from '../../../prop-types'; | 6 | interface IProps { |
7 | children: | ||
8 | | ReactElement<TabItemProps> | ||
9 | | (boolean | ReactElement<TabItemProps>)[]; | ||
10 | active?: number; | ||
11 | } | ||
7 | 12 | ||
8 | class Tab extends Component { | 13 | interface IState { |
9 | constructor(props) { | 14 | active: number; |
10 | super(props); | 15 | } |
11 | this.state = { active: this.props.active }; | ||
12 | } | ||
13 | 16 | ||
14 | static propTypes = { | 17 | @observer |
15 | children: oneOrManyChildElements.isRequired, | 18 | class Tab extends Component<IProps, IState> { |
16 | active: PropTypes.number, | 19 | constructor(props: IProps) { |
17 | }; | 20 | super(props); |
18 | 21 | ||
19 | static defaultProps = { | 22 | this.state = { |
20 | active: 0, | 23 | active: this.props.active || 0, |
21 | }; | 24 | }; |
25 | } | ||
22 | 26 | ||
23 | switchTab(index) { | 27 | switchTab(index: number): void { |
24 | this.setState({ active: index }); | 28 | this.setState({ active: index }); |
25 | } | 29 | } |
26 | 30 | ||
27 | render() { | 31 | render(): ReactElement { |
28 | const { children: childElements } = this.props; | 32 | const { children: childElements } = this.props; |
29 | const children = childElements.filter(c => !!c); | 33 | const children = Children.toArray(childElements); // removes all null values |
30 | 34 | ||
31 | if (children.length === 1) { | 35 | if (children.length === 1) { |
32 | return <div>{children}</div>; | 36 | return <div>{children}</div>; |
@@ -37,7 +41,7 @@ class Tab extends Component { | |||
37 | <div className="content-tabs__tabs"> | 41 | <div className="content-tabs__tabs"> |
38 | {Children.map(children, (child, i) => ( | 42 | {Children.map(children, (child, i) => ( |
39 | <button | 43 | <button |
40 | key="{i}" | 44 | key={i} |
41 | className={classnames({ | 45 | className={classnames({ |
42 | 'content-tabs__item': true, | 46 | 'content-tabs__item': true, |
43 | 'is-active': this.state.active === i, | 47 | 'is-active': this.state.active === i, |
@@ -45,19 +49,19 @@ class Tab extends Component { | |||
45 | onClick={() => this.switchTab(i)} | 49 | onClick={() => this.switchTab(i)} |
46 | type="button" | 50 | type="button" |
47 | > | 51 | > |
48 | {child.props.title} | 52 | {(child as ReactPortal).props.title} |
49 | </button> | 53 | </button> |
50 | ))} | 54 | ))} |
51 | </div> | 55 | </div> |
52 | <div className="content-tabs__content"> | 56 | <div className="content-tabs__content"> |
53 | {Children.map(children, (child, i) => ( | 57 | {Children.map(children, (child, i) => ( |
54 | <div | 58 | <div |
55 | key="{i}" | 59 | key={i} |
56 | className={classnames({ | 60 | className={classnames({ |
57 | 'content-tabs__item': true, | 61 | 'content-tabs__item': true, |
58 | 'is-active': this.state.active === i, | 62 | 'is-active': this.state.active === i, |
59 | })} | 63 | })} |
60 | type="button" | 64 | // type="button" |
61 | > | 65 | > |
62 | {child} | 66 | {child} |
63 | </div> | 67 | </div> |
@@ -68,4 +72,4 @@ class Tab extends Component { | |||
68 | } | 72 | } |
69 | } | 73 | } |
70 | 74 | ||
71 | export default observer(Tab); | 75 | export default Tab; |
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx index 09dd19925..05375d352 100644 --- a/src/containers/settings/EditServiceScreen.tsx +++ b/src/containers/settings/EditServiceScreen.tsx | |||
@@ -288,27 +288,20 @@ class EditServiceScreen extends Component<IProps> { | |||
288 | }; | 288 | }; |
289 | 289 | ||
290 | if (recipe.hasTeamId) { | 290 | if (recipe.hasTeamId) { |
291 | config.fields = { | 291 | config.fields.team = { |
292 | ...config.fields, | 292 | label: intl.formatMessage(messages.team), |
293 | 293 | placeholder: intl.formatMessage(messages.team), | |
294 | team: { | 294 | value: service?.team, |
295 | label: intl.formatMessage(messages.team), | 295 | validators: [required], |
296 | placeholder: intl.formatMessage(messages.team), | ||
297 | value: service?.team, | ||
298 | validators: [required], | ||
299 | }, | ||
300 | }; | 296 | }; |
301 | } | 297 | } |
302 | 298 | ||
303 | if (recipe.hasCustomUrl) { | 299 | if (recipe.hasCustomUrl) { |
304 | config.fields = { | 300 | config.fields.customUrl = { |
305 | ...config.fields, | 301 | label: intl.formatMessage(messages.customUrl), |
306 | customUrl: { | 302 | placeholder: "'http://' or 'https://' or 'file:///'", |
307 | label: intl.formatMessage(messages.customUrl), | 303 | value: service?.customUrl || recipe.serviceURL, |
308 | placeholder: "'http://' or 'https://' or 'file:///'", | 304 | validators: [required, url], |
309 | value: service?.customUrl || recipe.serviceURL, | ||
310 | validators: [required, url], | ||
311 | }, | ||
312 | }; | 305 | }; |
313 | } | 306 | } |
314 | 307 | ||
@@ -332,82 +325,71 @@ class EditServiceScreen extends Component<IProps> { | |||
332 | } | 325 | } |
333 | 326 | ||
334 | if (recipe.hasIndirectMessages) { | 327 | if (recipe.hasIndirectMessages) { |
335 | config.fields = { | 328 | config.fields.isIndirectMessageBadgeEnabled = { |
336 | ...config.fields, | 329 | label: intl.formatMessage(messages.indirectMessages), |
337 | isIndirectMessageBadgeEnabled: { | 330 | value: service?.isIndirectMessageBadgeEnabled, |
338 | label: intl.formatMessage(messages.indirectMessages), | 331 | default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages, |
339 | value: service?.isIndirectMessageBadgeEnabled, | 332 | type: 'checkbox', |
340 | default: DEFAULT_SERVICE_SETTINGS.hasIndirectMessages, | ||
341 | type: 'checkbox', | ||
342 | }, | ||
343 | }; | 333 | }; |
344 | } | 334 | } |
345 | 335 | ||
346 | if (recipe.allowFavoritesDelineationInUnreadCount) { | 336 | if (recipe.allowFavoritesDelineationInUnreadCount) { |
347 | config.fields = { | 337 | config.fields.onlyShowFavoritesInUnreadCount = { |
348 | ...config.fields, | 338 | label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount), |
349 | onlyShowFavoritesInUnreadCount: { | 339 | value: service?.onlyShowFavoritesInUnreadCount, |
350 | label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount), | 340 | default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount, |
351 | value: service?.onlyShowFavoritesInUnreadCount, | 341 | type: 'checkbox', |
352 | default: DEFAULT_APP_SETTINGS.onlyShowFavoritesInUnreadCount, | ||
353 | type: 'checkbox', | ||
354 | }, | ||
355 | }; | 342 | }; |
356 | } | 343 | } |
357 | 344 | ||
358 | if (proxy.isEnabled) { | 345 | if (proxy.isEnabled) { |
359 | let serviceProxyConfig: IProxyConfig = {}; | 346 | const serviceProxyConfig: IProxyConfig = service |
360 | if (service) { | 347 | ? stores.settings.proxy[service.id] |
361 | serviceProxyConfig = stores.settings.proxy[service.id] || {}; | 348 | : {}; |
362 | } | 349 | |
363 | 350 | config.fields.proxy = { | |
364 | config.fields = { | 351 | name: 'proxy', |
365 | ...config.fields, | 352 | label: 'proxy', |
366 | proxy: { | 353 | fields: { |
367 | name: 'proxy', | 354 | isEnabled: { |
368 | label: 'proxy', | 355 | label: intl.formatMessage(messages.enableProxy), |
369 | fields: { | 356 | value: serviceProxyConfig.isEnabled, |
370 | isEnabled: { | 357 | default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled, |
371 | label: intl.formatMessage(messages.enableProxy), | 358 | type: 'checkbox', |
372 | value: serviceProxyConfig.isEnabled, | 359 | }, |
373 | default: DEFAULT_APP_SETTINGS.proxyFeatureEnabled, | 360 | host: { |
374 | type: 'checkbox', | 361 | label: intl.formatMessage(messages.proxyHost), |
375 | }, | 362 | value: serviceProxyConfig.host, |
376 | host: { | 363 | default: '', |
377 | label: intl.formatMessage(messages.proxyHost), | 364 | }, |
378 | value: serviceProxyConfig.host, | 365 | port: { |
379 | default: '', | 366 | label: intl.formatMessage(messages.proxyPort), |
380 | }, | 367 | value: serviceProxyConfig.port, |
381 | port: { | 368 | default: '', |
382 | label: intl.formatMessage(messages.proxyPort), | 369 | }, |
383 | value: serviceProxyConfig.port, | 370 | user: { |
384 | default: '', | 371 | label: intl.formatMessage(messages.proxyUser), |
385 | }, | 372 | value: serviceProxyConfig.user, |
386 | user: { | 373 | default: '', |
387 | label: intl.formatMessage(messages.proxyUser), | 374 | }, |
388 | value: serviceProxyConfig.user, | 375 | password: { |
389 | default: '', | 376 | label: intl.formatMessage(messages.proxyPassword), |
390 | }, | 377 | value: serviceProxyConfig.password, |
391 | password: { | 378 | default: '', |
392 | label: intl.formatMessage(messages.proxyPassword), | 379 | type: 'password', |
393 | value: serviceProxyConfig.password, | ||
394 | default: '', | ||
395 | type: 'password', | ||
396 | }, | ||
397 | }, | 380 | }, |
398 | }, | 381 | }, |
399 | }; | 382 | }; |
400 | } | 383 | } |
401 | 384 | ||
402 | // @ts-ignore: Remove this ignore once mobx-react-form v4 with typescript | ||
403 | return new Form(config); | 385 | return new Form(config); |
404 | } | 386 | } |
405 | 387 | ||
406 | deleteService(): void { | 388 | deleteService(): void { |
407 | const { deleteService } = this.props.actions.service; | ||
408 | const { action } = this.props.params; | 389 | const { action } = this.props.params; |
409 | 390 | ||
410 | if (action === 'edit') { | 391 | if (action === 'edit') { |
392 | const { deleteService } = this.props.actions.service; | ||
411 | const { activeSettings: service } = this.props.stores.services; | 393 | const { activeSettings: service } = this.props.stores.services; |
412 | deleteService({ | 394 | deleteService({ |
413 | serviceId: service?.id, | 395 | serviceId: service?.id, |
@@ -437,8 +419,8 @@ class EditServiceScreen extends Component<IProps> { | |||
437 | } = this.props.stores; | 419 | } = this.props.stores; |
438 | const { action } = this.props.params; | 420 | const { action } = this.props.params; |
439 | 421 | ||
440 | let recipe: null | IRecipe = null; | 422 | let recipe: IRecipe | null = null; |
441 | let service: null | Service = null; | 423 | let service: Service | null = null; |
442 | let isLoading = false; | 424 | let isLoading = false; |
443 | 425 | ||
444 | if (action === 'add') { | 426 | if (action === 'add') { |
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx index f18eb24a7..2dbd8d2be 100644 --- a/src/containers/settings/EditSettingsScreen.tsx +++ b/src/containers/settings/EditSettingsScreen.tsx | |||
@@ -933,6 +933,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> { | |||
933 | label: intl.formatMessage(messages.beta), | 933 | label: intl.formatMessage(messages.beta), |
934 | value: user.data.beta, | 934 | value: user.data.beta, |
935 | default: DEFAULT_APP_SETTINGS.beta, | 935 | default: DEFAULT_APP_SETTINGS.beta, |
936 | type: 'checkbox', | ||
936 | }, | 937 | }, |
937 | automaticUpdates: { | 938 | automaticUpdates: { |
938 | label: intl.formatMessage(messages.automaticUpdates), | 939 | label: intl.formatMessage(messages.automaticUpdates), |