Skip to content
Snippets Groups Projects
Unverified Commit f167bbd3 authored by Aditya's avatar Aditya Committed by GitHub
Browse files

fix: Responsiveness of New Integration (#27645) 


Co-authored-by: default avatarDouglas Fabris <27704687+dougfabris@users.noreply.github.com>
parent 04e518b1
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
apps/meteor/client/views/admin/integrations/IncomingWebhookForm.js
+ 206
− 211
View file @ f167bbd3
......@@ -44,226 +44,221 @@ export default function IncomingWebhookForm({ formValues, formHandlers, extraDat
const hilightedExampleJson = useHighlightedCode('json', JSON.stringify(exampleData, null, 2));
return (
<Page.ScrollableContentWithShadow
pb='x24'
mi='neg-x24'
is='form'
onSubmit={useCallback((e) => e.preventDefault(), [])}
qa-admin-user-edit='form'
{...props}
>
<Page.ScrollableContentWithShadow is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} qa-admin-user-edit='form' {...props}>
<Margins block='x16'>
<FieldGroup width='x600' alignSelf='center'>
{useMemo(
() => (
<Field>
<Field.Label display='flex' justifyContent='space-between' w='full'>
{t('Enabled')}
<ToggleSwitch checked={enabled} onChange={handleEnabled} />
</Field.Label>
</Field>
),
[enabled, handleEnabled, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Name_optional')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={name} onChange={handleName} />
</Field.Row>
<Field.Hint>{t('You_should_name_it_to_easily_manage_your_integrations')}</Field.Hint>
</Field>
),
[t, name, handleName],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Post_to_Channel')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={channel} onChange={handleChannel} addon={<Icon name='at' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here')}</Field.Hint>
<Field.Hint
dangerouslySetInnerHTML={{
__html: t('Start_with_s_for_user_or_s_for_channel_Eg_s_or_s', '@', '#', '@john', '#general'),
}}
/>
</Field>
),
[channel, handleChannel, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Post_as')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='user' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Choose_the_username_that_this_integration_will_post_as')}</Field.Hint>
<Field.Hint>{t('Should_exists_a_user_with_this_username')}</Field.Hint>
</Field>
),
[t, username, handleUsername],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Alias')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={alias} onChange={handleAlias} addon={<Icon name='edit' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Choose_the_alias_that_will_appear_before_the_username_in_messages')}</Field.Hint>
</Field>
),
[alias, handleAlias, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Avatar_URL')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={avatar}
onChange={handleAvatar}
addon={<Icon name='user-rounded' size='x20' alignSelf='center' />}
/>
</Field.Row>
<Field.Hint>{t('You_can_change_a_different_avatar_too')}</Field.Hint>
<Field.Hint>{t('Should_be_a_URL_of_an_image')}</Field.Hint>
</Field>
),
[avatar, handleAvatar, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Emoji')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={emoji}
onChange={handleEmoji}
addon={<Icon name='emoji' size='x20' alignSelf='center' />}
/>
</Field.Row>
<Field.Hint>{t('You_can_use_an_emoji_as_avatar')}</Field.Hint>
<Field.Hint dangerouslySetInnerHTML={{ __html: t('Example_s', ':ghost:') }} />
</Field>
),
[emoji, handleEmoji, t],
)}
{useMemo(
() => (
<Field>
<Field.Label display='flex' justifyContent='space-between' w='full'>
{t('Script_Enabled')}
<ToggleSwitch checked={scriptEnabled} onChange={handleScriptEnabled} />
</Field.Label>
</Field>
),
[t, scriptEnabled, handleScriptEnabled],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Script')}</Field.Label>
<Field.Row>
<TextAreaInput
rows={10}
flexGrow={1}
value={script}
onChange={handleScript}
addon={<Icon name='code' size='x20' alignSelf='center' />}
<Box maxWidth='x600' alignSelf='center' w='full'>
<FieldGroup>
{useMemo(
() => (
<Field>
<Field.Label display='flex' justifyContent='space-between' w='full'>
{t('Enabled')}
<ToggleSwitch checked={enabled} onChange={handleEnabled} />
</Field.Label>
</Field>
),
[enabled, handleEnabled, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Name_optional')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={name} onChange={handleName} />
</Field.Row>
<Field.Hint>{t('You_should_name_it_to_easily_manage_your_integrations')}</Field.Hint>
</Field>
),
[t, name, handleName],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Post_to_Channel')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={channel} onChange={handleChannel} addon={<Icon name='at' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here')}</Field.Hint>
<Field.Hint
dangerouslySetInnerHTML={{
__html: t('Start_with_s_for_user_or_s_for_channel_Eg_s_or_s', '@', '#', '@john', '#general'),
}}
/>
</Field.Row>
</Field>
),
[t, script, handleScript],
)}
{useMemo(
() =>
!extraData._id && (
<>
<Field>
<Field.Label>{t('Webhook_URL')}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={t('Will_be_available_here_after_saving')}
addon={<Icon name='permalink' size='x20' />}
disabled
/>
</Field.Row>
<Field.Hint>{t('Send_your_JSON_payloads_to_this_URL')}</Field.Hint>
</Field>
<Field>
<Field.Label>{t('Token')}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={t('Will_be_available_here_after_saving')}
addon={<Icon name='key' size='x20' />}
disabled
/>
</Field.Row>
</Field>
</>
</Field>
),
[extraData._id, t],
)}
{useMemo(
() =>
extraData._id && (
<>
<Field>
<Field.Label>{t('Webhook_URL')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={url} addon={<Icon name='permalink' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Send_your_JSON_payloads_to_this_URL')}</Field.Hint>
</Field>
<Field>
<Field.Label>{t('Token')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={`${extraData._id}/${extraData.token}`} addon={<Icon name='key' size='x20' />} />
</Field.Row>
</Field>
</>
[channel, handleChannel, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Post_as')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='user' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Choose_the_username_that_this_integration_will_post_as')}</Field.Hint>
<Field.Hint>{t('Should_exists_a_user_with_this_username')}</Field.Hint>
</Field>
),
[t, username, handleUsername],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Alias')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={alias} onChange={handleAlias} addon={<Icon name='edit' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Choose_the_alias_that_will_appear_before_the_username_in_messages')}</Field.Hint>
</Field>
),
[alias, handleAlias, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Avatar_URL')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={avatar}
onChange={handleAvatar}
addon={<Icon name='user-rounded' size='x20' alignSelf='center' />}
/>
</Field.Row>
<Field.Hint>{t('You_can_change_a_different_avatar_too')}</Field.Hint>
<Field.Hint>{t('Should_be_a_URL_of_an_image')}</Field.Hint>
</Field>
),
[avatar, handleAvatar, t],
)}
{useMemo(
() => (
<Field>
<Field.Label>{`${t('Emoji')} (${t('optional')})`}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={emoji}
onChange={handleEmoji}
addon={<Icon name='emoji' size='x20' alignSelf='center' />}
/>
</Field.Row>
<Field.Hint>{t('You_can_use_an_emoji_as_avatar')}</Field.Hint>
<Field.Hint dangerouslySetInnerHTML={{ __html: t('Example_s', ':ghost:') }} />
</Field>
),
[emoji, handleEmoji, t],
)}
{useMemo(
() => (
<Field>
<Field.Label display='flex' justifyContent='space-between' w='full'>
{t('Script_Enabled')}
<ToggleSwitch checked={scriptEnabled} onChange={handleScriptEnabled} />
</Field.Label>
</Field>
),
[extraData._id, extraData.token, t, url],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Example_payload')}</Field.Label>
<Field.Row>
<Box fontScale='p2' withRichContent flexGrow={1}>
<pre>
<code dangerouslySetInnerHTML={{ __html: hilightedExampleJson }}></code>
</pre>
</Box>
</Field.Row>
</Field>
),
[hilightedExampleJson, t],
)}
{useMemo(
() =>
extraData._id && (
[t, scriptEnabled, handleScriptEnabled],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Curl')}</Field.Label>
<Field.Label>{t('Script')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={curlData} addon={<Icon name='code' size='x20' />} />
<TextAreaInput
rows={10}
flexGrow={1}
value={script}
onChange={handleScript}
addon={<Icon name='code' size='x20' alignSelf='center' />}
/>
</Field.Row>
</Field>
),
[curlData, extraData._id, t],
)}
{append}
</FieldGroup>
[t, script, handleScript],
)}
{useMemo(
() =>
!extraData._id && (
<>
<Field>
<Field.Label>{t('Webhook_URL')}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={t('Will_be_available_here_after_saving')}
addon={<Icon name='permalink' size='x20' />}
disabled
/>
</Field.Row>
<Field.Hint>{t('Send_your_JSON_payloads_to_this_URL')}</Field.Hint>
</Field>
<Field>
<Field.Label>{t('Token')}</Field.Label>
<Field.Row>
<TextInput
flexGrow={1}
value={t('Will_be_available_here_after_saving')}
addon={<Icon name='key' size='x20' />}
disabled
/>
</Field.Row>
</Field>
</>
),
[extraData._id, t],
)}
{useMemo(
() =>
extraData._id && (
<>
<Field>
<Field.Label>{t('Webhook_URL')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={url} addon={<Icon name='permalink' size='x20' />} />
</Field.Row>
<Field.Hint>{t('Send_your_JSON_payloads_to_this_URL')}</Field.Hint>
</Field>
<Field>
<Field.Label>{t('Token')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={`${extraData._id}/${extraData.token}`} addon={<Icon name='key' size='x20' />} />
</Field.Row>
</Field>
</>
),
[extraData._id, extraData.token, t, url],
)}
{useMemo(
() => (
<Field>
<Field.Label>{t('Example_payload')}</Field.Label>
<Field.Row>
<Box fontScale='p2' withRichContent flexGrow={1}>
<pre>
<code dangerouslySetInnerHTML={{ __html: hilightedExampleJson }}></code>
</pre>
</Box>
</Field.Row>
</Field>
),
[hilightedExampleJson, t],
)}
{useMemo(
() =>
extraData._id && (
<Field>
<Field.Label>{t('Curl')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={curlData} addon={<Icon name='code' size='x20' />} />
</Field.Row>
</Field>
),
[curlData, extraData._id, t],
)}
{append}
</FieldGroup>
</Box>
</Margins>
</Page.ScrollableContentWithShadow>
);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment