fixed the url styling for webhooks to now use pure html instead of ma… (#30845)

* fixed the url styling for webhooks to now use pure html instead of markdown

* remove code styling from outgoing webhook token

* updated test snapshots

* added code styling to more integrations tokens

* update snapshots

* fixed translation strings for english and german

webapp/channels/src/components/integrations/__snapshots__/installed_command.test.tsx.snap

@@ -75,7 +75,9 @@ exports[`components/integrations/InstalledCommand should call onDelete function
           id="installed_integrations.token"
           values={
             Object {
-              "token": "testToken",
+              "token": <code>
+                testToken
+              </code>,
             }
           }
         />
@@ -187,7 +189,9 @@ exports[`components/integrations/InstalledCommand should call onRegenToken funct
           id="installed_integrations.token"
           values={
             Object {
-              "token": "testToken",
+              "token": <code>
+                testToken
+              </code>,
             }
           }
         />
@@ -269,7 +273,9 @@ exports[`components/integrations/InstalledCommand should match snapshot 1`] = `
           id="installed_integrations.token"
           values={
             Object {
-              "token": "testToken",
+              "token": <code>
+                testToken
+              </code>,
             }
           }
         />
@@ -349,7 +355,9 @@ exports[`components/integrations/InstalledCommand should match snapshot, not aut
           id="installed_integrations.token"
           values={
             Object {
-              "token": "testToken",
+              "token": <code>
+                testToken
+              </code>,
             }
           }
         />

webapp/channels/src/components/integrations/__snapshots__/installed_incoming_webhook.test.tsx.snap

@@ -58,7 +58,9 @@ exports[`components/integrations/InstalledIncomingWebhook should match snapshot
           id="installed_integrations.url"
           values={
             Object {
-              "url": "http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r",
+              "url": <code>
+                http://localhost:8065/hooks/9w96t4nhbfdiij64wfqors4i1r
+              </code>,
             }
           }
         />

webapp/channels/src/components/integrations/__snapshots__/installed_outgoing_webhook.test.tsx.snap

@@ -128,7 +128,9 @@ exports[`components/integrations/InstalledOutgoingWebhook should match snapshot
           id="installed_integrations.token"
           values={
             Object {
-              "token": "xoxz1z7c3tgi9xhrfudn638q9r",
+              "token": <code>
+                xoxz1z7c3tgi9xhrfudn638q9r
+              </code>,
             }
           }
         />

webapp/channels/src/components/integrations/confirm_integration/__snapshots__/confirm_integration.test.tsx.snap

@@ -52,7 +52,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, comma
         values={
           Object {
             "b": [Function],
-            "token": "jb6oyqh95irpbx8fo9zmndkp1r",
+            "token": <code>
+              jb6oyqh95irpbx8fo9zmndkp1r
+            </code>,
           }
         }
       />
@@ -135,7 +137,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, incom
         values={
           Object {
             "b": [Function],
-            "url": "\`http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic\`",
+            "url": <code>
+              http://localhost:8065/hooks/r5tpgt4iepf45jt768jz84djic
+            </code>,
           }
         }
       />
@@ -220,7 +224,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
         values={
           Object {
             "b": [Function],
-            "id": "r5tpgt4iepf45jt768jz84djic",
+            "id": <code>
+              r5tpgt4iepf45jt768jz84djic
+            </code>,
           }
         }
       />
@@ -240,7 +246,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, oauth
         values={
           Object {
             "b": [Function],
-            "secret": "<==secret==>",
+            "secret": <code>
+              &lt;==secret==&gt;
+            </code>,
           }
         }
       />
@@ -347,7 +355,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
         values={
           Object {
             "b": [Function],
-            "token": "jb6oyqh95irpbx8fo9zmndkp1r",
+            "token": <code>
+              jb6oyqh95irpbx8fo9zmndkp1r
+            </code>,
           }
         }
       />
@@ -432,7 +442,9 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
         values={
           Object {
             "b": [Function],
-            "id": "someid",
+            "id": <code>
+              someid
+            </code>,
           }
         }
       />
@@ -452,12 +464,14 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
       className="word-break--all"
     >
       <MemoizedFormattedMessage
-        defaultMessage="<b>Token URL</b>: \`{url}\`"
+        defaultMessage="<b>Token URL</b>: {url}"
         id="add_outgoing_oauth_connection.token_url"
         values={
           Object {
             "b": [Function],
-            "url": "https://tokenurl.com",
+            "url": <code>
+              https://tokenurl.com
+            </code>,
           }
         }
       />
@@ -466,12 +480,14 @@ exports[`components/integrations/ConfirmIntegration should match snapshot, outgo
       className="word-break--all"
     >
       <MemoizedFormattedMessage
-        defaultMessage="<b>Audience URL(s)</b>: \`{url}\`"
+        defaultMessage="<b>Audience URL(s)</b>: {url}"
         id="add_outgoing_oauth_connection.audience_urls"
         values={
           Object {
             "b": [Function],
-            "url": "https://myaudience.com",
+            "url": <code>
+              https://myaudience.com
+            </code>,
           }
         }
       />

webapp/channels/src/components/integrations/confirm_integration/confirm_integration.tsx

@@ -92,7 +92,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_command.token'
                     defaultMessage='<b>Token</b>: {token}'
                     values={{
-                        token: commandToken,
+                        token: <code>{commandToken}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -135,7 +135,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_incoming_webhook.url'
                     defaultMessage='<b>URL</b>: {url}'
                     values={{
-                        url: '`' + incomingHookToken + '`',
+                        url: <code>{incomingHookToken}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -178,7 +178,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_outgoing_webhook.token'
                     defaultMessage='<b>Token</b>: {token}'
                     values={{
-                        token: outgoingHookToken,
+                        token: <code>{outgoingHookToken}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -224,7 +224,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_oauth_app.clientId'
                     defaultMessage='<b>Client ID</b>: {id}'
                     values={{
-                        id: oauthAppToken,
+                        id: <code>{oauthAppToken}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -237,7 +237,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_oauth_app.clientSecret'
                     defaultMessage='<b>Client Secret</b>: {secret}'
                     values={{
-                        secret: oauthAppSecret,
+                        secret: <code>{oauthAppSecret}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -307,7 +307,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_outgoing_oauth_connection.clientId'
                     defaultMessage='<b>Client ID</b>: {id}'
                     values={{
-                        id: clientId,
+                        id: <code>{clientId}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
@@ -356,9 +356,9 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                 <p className='word-break--all'>
                     <FormattedMessage
                         id='add_outgoing_oauth_connection.token_url'
-                        defaultMessage='<b>Token URL</b>: `{url}`'
+                        defaultMessage='<b>Token URL</b>: {url}'
                         values={{
-                            url: outgoingOAuthConnection.oauth_token_url,
+                            url: <code>{outgoingOAuthConnection.oauth_token_url}</code>,
                             b: (chunks: string) => <b>{chunks}</b>,
                         }}
                     />
@@ -366,9 +366,9 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                 <p className='word-break--all'>
                     <FormattedMessage
                         id='add_outgoing_oauth_connection.audience_urls'
-                        defaultMessage='<b>Audience URL(s)</b>: `{url}`'
+                        defaultMessage='<b>Audience URL(s)</b>: {url}'
                         values={{
-                            url: outgoingOAuthConnection.audiences.join(', '),
+                            url: <code>{outgoingOAuthConnection.audiences.join(', ')}</code>,
                             b: (chunks: string) => <b>{chunks}</b>,
                         }}
                     />
@@ -410,7 +410,7 @@ const ConfirmIntegration = ({team, location, commands, oauthApps, incomingHooks,
                     id='add_outgoing_webhook.token'
                     defaultMessage='<b>Token</b>: {token}'
                     values={{
-                        token: botToken,
+                        token: <code>{botToken}</code>,
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />

webapp/channels/src/components/integrations/installed_command.tsx

@@ -166,7 +166,7 @@ export default class InstalledCommand extends React.PureComponent<Props> {
                                 id='installed_integrations.token'
                                 defaultMessage='Token: {token}'
                                 values={{
-                                    token: commandToken,
+                                    token: <code>{commandToken}</code>,
                                 }}
                             />
                             <CopyText

webapp/channels/src/components/integrations/installed_incoming_webhook.tsx

@@ -155,7 +155,7 @@ export default class InstalledIncomingWebhook extends React.PureComponent<Props>
                                 id='installed_integrations.url'
                                 defaultMessage='URL: {url}'
                                 values={{
-                                    url: incomingWebhookId,
+                                    url: <code>{incomingWebhookId}</code>,
                                 }}
                             />
                             <span>

webapp/channels/src/components/integrations/installed_outgoing_webhook.tsx

@@ -230,7 +230,7 @@ export default class InstalledOutgoingWebhook extends React.PureComponent<Props>
                                 id='installed_integrations.token'
                                 defaultMessage='Token: {token}'
                                 values={{
-                                    token: outgoingWebhook.token,
+                                    token: <code>{outgoingWebhook.token}</code>,
                                 }}
                             />
                             <CopyText

webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/installed_outgoing_oauth_connection.test.tsx.snap

@@ -62,7 +62,9 @@ exports[`components/integrations/InstalledOutgoingOAuthConnection should match s
           id="installed_integrations.client_id"
         />
         <strong>
-          someid
+          <code>
+            someid
+          </code>
         </strong>
       </span>
     </div>
@@ -89,7 +91,9 @@ exports[`components/integrations/InstalledOutgoingOAuthConnection should match s
           id="installed_integrations.audience_urls"
           values={
             Object {
-              "urls": "https://myaudience.com",
+              "urls": <code>
+                https://myaudience.com
+              </code>,
             }
           }
         />
@@ -106,7 +110,9 @@ exports[`components/integrations/InstalledOutgoingOAuthConnection should match s
           id="installed_integrations.token_url"
           values={
             Object {
-              "url": "https://tokenurl.com",
+              "url": <code>
+                https://tokenurl.com
+              </code>,
             }
           }
         />

webapp/channels/src/components/integrations/outgoing_oauth_connections/installed_outgoing_oauth_connection.tsx

@@ -63,7 +63,7 @@ const InstalledOutgoingOAuthConnection = (props: InstalledOutgoingOAuthConnectio
                         id='installed_integrations.audience_urls'
                         defaultMessage='Audience URLs: {urls}'
                         values={{
-                            urls: outgoingOAuthConnection.audiences.join(', '),
+                            urls: <code>{outgoingOAuthConnection.audiences.join(', ')}</code>,
                         }}
                     />
                 </span>
@@ -74,7 +74,7 @@ const InstalledOutgoingOAuthConnection = (props: InstalledOutgoingOAuthConnectio
                         id='installed_integrations.token_url'
                         defaultMessage='Token URL: {url}'
                         values={{
-                            url: outgoingOAuthConnection.oauth_token_url,
+                            url: <code>{outgoingOAuthConnection.oauth_token_url}</code>,
                         }}
                     />
                 </span>
@@ -124,7 +124,7 @@ const InstalledOutgoingOAuthConnection = (props: InstalledOutgoingOAuthConnectio
                         id='installed_integrations.client_id'
                         defaultMessage='Client ID: '
                     />
-                    <strong>{outgoingOAuthConnection.client_id}</strong>
+                    <strong><code>{outgoingOAuthConnection.client_id}</code></strong>
                 </span>
             </div>
             <div className='item-details__row'>

webapp/channels/src/i18n/en.json

@@ -165,7 +165,7 @@
   "add_oauth_app.trusted.help": "If true, the OAuth 2.0 application is considered trusted by the Mattermost server and does not require the user to accept authorization. If false, a window opens to ask the user to accept or deny the authorization.",
   "add_oauth_app.url": "<b>URL(s)</b>: {url}",
   "add_outgoing_oauth_connection.add": "Add",
-  "add_outgoing_oauth_connection.audience_urls": "<b>Audience URL(s)</b>: `{url}`",
+  "add_outgoing_oauth_connection.audience_urls": "<b>Audience URL(s)</b>: {url}",
   "add_outgoing_oauth_connection.audienceUrls.help": "The URLs which will receive requests with the OAuth token, e.g. your custom slash command handler endpoint. Must be a valid URL and start with http:// or https://.",
   "add_outgoing_oauth_connection.audienceUrls.label": "Audience URLs (One Per Line)",
   "add_outgoing_oauth_connection.audienceUrls.required": "One or more audience URLs are required.",
@@ -196,7 +196,7 @@
   "add_outgoing_oauth_connection.save_anyway": "Save anyway",
   "add_outgoing_oauth_connection.save_without_validation_warning": "This connection has not been validated, Do you want to save anyway?",
   "add_outgoing_oauth_connection.saving": "Saving...",
-  "add_outgoing_oauth_connection.token_url": "<b>Token URL</b>: `{url}`",
+  "add_outgoing_oauth_connection.token_url": "<b>Token URL</b>: {url}",
   "add_outgoing_oauth_connection.username": "<b>Username</b>: {username}",
   "add_outgoing_oauth_connection.validate": "Validate Connection",
   "add_outgoing_oauth_connection.validated_connection": "Validated connection",