diff options
Diffstat (limited to 'src/components/settings/services/EditServiceForm.js')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 77 |
1 files changed, 60 insertions, 17 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 36cefe87c..4458c4c5a 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.', |
@@ -67,6 +71,18 @@ const messages = defineMessages({ | |||
67 | id: 'settings.service.form.isMutedInfo', | 71 | id: 'settings.service.form.isMutedInfo', |
68 | defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted', | 72 | defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted', |
69 | }, | 73 | }, |
74 | headlineNotifications: { | ||
75 | id: 'settings.service.form.headlineNotifications', | ||
76 | defaultMessage: '!!!Notifications', | ||
77 | }, | ||
78 | headlineBadges: { | ||
79 | id: 'settings.service.form.headlineBadges', | ||
80 | defaultMessage: '!!!Unread message dadges', | ||
81 | }, | ||
82 | headlineGeneral: { | ||
83 | id: 'settings.service.form.headlineGeneral', | ||
84 | defaultMessage: '!!!General', | ||
85 | }, | ||
70 | }); | 86 | }); |
71 | 87 | ||
72 | @observer | 88 | @observer |
@@ -108,7 +124,6 @@ export default class EditServiceForm extends Component { | |||
108 | this.props.form.submit({ | 124 | this.props.form.submit({ |
109 | onSuccess: async (form) => { | 125 | onSuccess: async (form) => { |
110 | const values = form.values(); | 126 | const values = form.values(); |
111 | |||
112 | let isValid = true; | 127 | let isValid = true; |
113 | 128 | ||
114 | if (recipe.validateUrl && values.customUrl) { | 129 | if (recipe.validateUrl && values.customUrl) { |
@@ -166,6 +181,13 @@ export default class EditServiceForm extends Component { | |||
166 | /> | 181 | /> |
167 | ); | 182 | ); |
168 | 183 | ||
184 | let activeTabIndex = 0; | ||
185 | if (recipe.hasHostedOption && service.team) { | ||
186 | activeTabIndex = 1; | ||
187 | } else if (recipe.hasHostedOption && service.customUrl) { | ||
188 | activeTabIndex = 2; | ||
189 | } | ||
190 | |||
169 | return ( | 191 | return ( |
170 | <div className="settings__main"> | 192 | <div className="settings__main"> |
171 | <div className="settings__header"> | 193 | <div className="settings__header"> |
@@ -198,11 +220,20 @@ export default class EditServiceForm extends Component { | |||
198 | <Input field={form.$('name')} focus /> | 220 | <Input field={form.$('name')} focus /> |
199 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 221 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
200 | <Tabs | 222 | <Tabs |
201 | active={service.customUrl ? 1 : 0} | 223 | active={activeTabIndex} |
202 | > | 224 | > |
225 | {recipe.hasHostedOption && ( | ||
226 | <TabItem title={recipe.name}> | ||
227 | {intl.formatMessage(messages.useHostedService, { name: recipe.name })} | ||
228 | </TabItem> | ||
229 | )} | ||
203 | {recipe.hasTeamId && ( | 230 | {recipe.hasTeamId && ( |
204 | <TabItem title={intl.formatMessage(messages.tabHosted)}> | 231 | <TabItem title={intl.formatMessage(messages.tabHosted)}> |
205 | <Input field={form.$('team')} suffix={recipe.urlInputSuffix} /> | 232 | <Input |
233 | field={form.$('team')} | ||
234 | prefix={recipe.urlInputPrefix} | ||
235 | suffix={recipe.urlInputSuffix} | ||
236 | /> | ||
206 | </TabItem> | 237 | </TabItem> |
207 | )} | 238 | )} |
208 | {recipe.hasCustomUrl && ( | 239 | {recipe.hasCustomUrl && ( |
@@ -231,20 +262,32 @@ export default class EditServiceForm extends Component { | |||
231 | </Tabs> | 262 | </Tabs> |
232 | )} | 263 | )} |
233 | <div className="settings__options"> | 264 | <div className="settings__options"> |
234 | <Toggle field={form.$('isNotificationEnabled')} /> | 265 | <div className="settings__settings-group"> |
235 | {recipe.hasIndirectMessages && ( | 266 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> |
236 | <div> | 267 | <Toggle field={form.$('isNotificationEnabled')} /> |
237 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 268 | <Toggle field={form.$('isMuted')} /> |
238 | <p className="settings__help"> | 269 | <p className="settings__help"> |
239 | {intl.formatMessage(messages.indirectMessageInfo)} | 270 | {intl.formatMessage(messages.isMutedInfo)} |
240 | </p> | 271 | </p> |
241 | </div> | 272 | </div> |
242 | )} | 273 | |
243 | <Toggle field={form.$('isMuted')} /> | 274 | <div className="settings__settings-group"> |
244 | <p className="settings__help"> | 275 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
245 | {intl.formatMessage(messages.isMutedInfo)} | 276 | <Toggle field={form.$('isBadgeEnabled')} /> |
246 | </p> | 277 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( |
247 | <Toggle field={form.$('isEnabled')} /> | 278 | <div> |
279 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | ||
280 | <p className="settings__help"> | ||
281 | {intl.formatMessage(messages.indirectMessageInfo)} | ||
282 | </p> | ||
283 | </div> | ||
284 | )} | ||
285 | </div> | ||
286 | |||
287 | <div className="settings__settings-group"> | ||
288 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | ||
289 | <Toggle field={form.$('isEnabled')} /> | ||
290 | </div> | ||
248 | </div> | 291 | </div> |
249 | {recipe.message && ( | 292 | {recipe.message && ( |
250 | <p className="settings__message"> | 293 | <p className="settings__message"> |