diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-21 20:31:49 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-21 20:31:49 +0530 |
commit | 009813cbc40bfd186037ccb7f327225357ef34e9 (patch) | |
tree | 1fcbee64b0b10256d694ba0cf687d968ae7d8da1 /src/components | |
parent | 6.2.1-nightly.48 [skip ci] (diff) | |
download | ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.tar.gz ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.tar.zst ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.zip |
Fix for services self hosted url / Team Id / Include pre-releases not updating (#785)
* fix: self hosted team/url options not working properly in edit service form
* fix: Include pre-releases toggle not working
Diffstat (limited to 'src/components')
-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 |
3 files changed, 49 insertions, 33 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; |