diff options
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 19 | ||||
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 11 | ||||
-rw-r--r-- | src/models/Recipe.js | 2 | ||||
-rw-r--r-- | src/styles/content-tabs.scss | 12 | ||||
-rw-r--r-- | src/styles/input.scss | 4 |
5 files changed, 41 insertions, 7 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index a7d296460..f689dd5c4 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -47,6 +47,10 @@ const messages = defineMessages({ | |||
47 | id: 'settings.service.form.tabOnPremise', | 47 | id: 'settings.service.form.tabOnPremise', |
48 | defaultMessage: '!!!Self hosted ⭐️', | 48 | defaultMessage: '!!!Self hosted ⭐️', |
49 | }, | 49 | }, |
50 | useHostedService: { | ||
51 | id: 'settings.service.form.useHostedService', | ||
52 | defaultMessage: '!!!Use the hosted {name} service.', | ||
53 | }, | ||
50 | customUrlValidationError: { | 54 | customUrlValidationError: { |
51 | id: 'settings.service.form.customUrlValidationError', | 55 | id: 'settings.service.form.customUrlValidationError', |
52 | defaultMessage: '!!!Could not validate custom {name} server.', | 56 | defaultMessage: '!!!Could not validate custom {name} server.', |
@@ -108,7 +112,6 @@ export default class EditServiceForm extends Component { | |||
108 | this.props.form.submit({ | 112 | this.props.form.submit({ |
109 | onSuccess: async (form) => { | 113 | onSuccess: async (form) => { |
110 | const values = form.values(); | 114 | const values = form.values(); |
111 | |||
112 | let isValid = true; | 115 | let isValid = true; |
113 | 116 | ||
114 | if (recipe.validateUrl && values.customUrl) { | 117 | if (recipe.validateUrl && values.customUrl) { |
@@ -166,6 +169,13 @@ export default class EditServiceForm extends Component { | |||
166 | /> | 169 | /> |
167 | ); | 170 | ); |
168 | 171 | ||
172 | let activeTabIndex = 0; | ||
173 | if (recipe.hasHostedOption && service.team) { | ||
174 | activeTabIndex = 1; | ||
175 | } else if (recipe.hasHostedOption && service.customUrl) { | ||
176 | activeTabIndex = 2; | ||
177 | } | ||
178 | |||
169 | return ( | 179 | return ( |
170 | <div className="settings__main"> | 180 | <div className="settings__main"> |
171 | <div className="settings__header"> | 181 | <div className="settings__header"> |
@@ -198,8 +208,13 @@ export default class EditServiceForm extends Component { | |||
198 | <Input field={form.$('name')} focus /> | 208 | <Input field={form.$('name')} focus /> |
199 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 209 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
200 | <Tabs | 210 | <Tabs |
201 | active={service.customUrl ? 1 : 0} | 211 | active={activeTabIndex} |
202 | > | 212 | > |
213 | {recipe.hasHostedOption && ( | ||
214 | <TabItem title={recipe.name}> | ||
215 | {intl.formatMessage(messages.useHostedService, { name: recipe.name })} | ||
216 | </TabItem> | ||
217 | )} | ||
203 | {recipe.hasTeamId && ( | 218 | {recipe.hasTeamId && ( |
204 | <TabItem title={intl.formatMessage(messages.tabHosted)}> | 219 | <TabItem title={intl.formatMessage(messages.tabHosted)}> |
205 | <Input | 220 | <Input |
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 191ef447b..c4228ec03 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js | |||
@@ -118,11 +118,22 @@ export default class EditServiceScreen extends Component { | |||
118 | }); | 118 | }); |
119 | } | 119 | } |
120 | 120 | ||
121 | // More fine grained and use case specific validation rules | ||
121 | if (recipe.hasTeamId && recipe.hasCustomUrl) { | 122 | if (recipe.hasTeamId && recipe.hasCustomUrl) { |
122 | config.fields.team.validate = [oneRequired(['team', 'customUrl'])]; | 123 | config.fields.team.validate = [oneRequired(['team', 'customUrl'])]; |
123 | config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])]; | 124 | config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])]; |
124 | } | 125 | } |
125 | 126 | ||
127 | // If a service can be hosted and has a teamId or customUrl | ||
128 | if (recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl)) { | ||
129 | if (config.fields.team) { | ||
130 | config.fields.team.validate = []; | ||
131 | } | ||
132 | if (config.fields.customUrl) { | ||
133 | config.fields.customUrl.validate = [url]; | ||
134 | } | ||
135 | } | ||
136 | |||
126 | if (recipe.hasIndirectMessages) { | 137 | if (recipe.hasIndirectMessages) { |
127 | Object.assign(config.fields, { | 138 | Object.assign(config.fields, { |
128 | isIndirectMessageBadgeEnabled: { | 139 | isIndirectMessageBadgeEnabled: { |
diff --git a/src/models/Recipe.js b/src/models/Recipe.js index 9971df77c..036d6d216 100644 --- a/src/models/Recipe.js +++ b/src/models/Recipe.js | |||
@@ -15,6 +15,7 @@ export default class Recipe { | |||
15 | hasTeamId = false; | 15 | hasTeamId = false; |
16 | hasPredefinedUrl = false; | 16 | hasPredefinedUrl = false; |
17 | hasCustomUrl = false; | 17 | hasCustomUrl = false; |
18 | hasHostedOption = false; | ||
18 | urlInputPrefix = ''; | 19 | urlInputPrefix = ''; |
19 | urlInputSuffix = ''; | 20 | urlInputSuffix = ''; |
20 | 21 | ||
@@ -45,6 +46,7 @@ export default class Recipe { | |||
45 | this.hasTeamId = data.config.hasTeamId || this.hasTeamId; | 46 | this.hasTeamId = data.config.hasTeamId || this.hasTeamId; |
46 | this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl; | 47 | this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl; |
47 | this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl; | 48 | this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl; |
49 | this.hasHostedOption = data.config.hasHostedOption || this.hasHostedOption; | ||
48 | 50 | ||
49 | this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix; | 51 | this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix; |
50 | this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix; | 52 | this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix; |
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index aa3c8594b..47dfea2c4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -12,15 +12,17 @@ | |||
12 | flex: 1; | 12 | flex: 1; |
13 | // border: 1px solid $theme-gray-lightest; | 13 | // border: 1px solid $theme-gray-lightest; |
14 | color: $theme-gray-dark; | 14 | color: $theme-gray-dark; |
15 | background: $theme-gray-lightest; | 15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-bottom: 1px solid $theme-gray-lighter; | 16 | border-right: 1px solid $theme-gray-lighter; |
17 | box-shadow: inset 0px -3px 10px rgba(black, 0.05); | 17 | transition: background $theme-transition-time; |
18 | transition: all $theme-transition-time; | 18 | |
19 | &:last-of-type { | ||
20 | border-right: 0; | ||
21 | } | ||
19 | 22 | ||
20 | &.is-active { | 23 | &.is-active { |
21 | background: $theme-brand-primary; | 24 | background: $theme-brand-primary; |
22 | color: #FFF; | 25 | color: #FFF; |
23 | border-bottom: 1px solid $theme-brand-primary; | ||
24 | box-shadow: none; | 26 | box-shadow: none; |
25 | } | 27 | } |
26 | } | 28 | } |
diff --git a/src/styles/input.scss b/src/styles/input.scss index 814dce5f8..7042f56e8 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -47,6 +47,10 @@ | |||
47 | padding: 8px; | 47 | padding: 8px; |
48 | // font-size: 18px; | 48 | // font-size: 18px; |
49 | color: $theme-gray; | 49 | color: $theme-gray; |
50 | |||
51 | &::placeholder { | ||
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
50 | } | 54 | } |
51 | 55 | ||
52 | .franz-form__input-prefix, | 56 | .franz-form__input-prefix, |