All files / client/components/Admin/Notification Instructions.tsx

0% Statements 0/3
100% Branches 0/0
0% Functions 0/1
0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                                                                                                                                                                                                                             
import React, { FC } from 'react'
import { useTranslation, Trans } from 'react-i18next'
 
interface Props {
  appUrl: string
}
 
const Instructions: FC<Props> = ({ appUrl }) => {
  const [t] = useTranslation()
 
  return (
    <>
      <h3>{t('admin.notification.instructions.basic.legend')}</h3>
      <p>{t('admin.notification.instructions.basic.description')}</p>
      <h4>{t('admin.notification.instructions.basic.steps.0.title')}</h4>
      <p>
        <Trans i18nKey="admin.notification.instructions.basic.steps.0.description">
          Create App from{' '}
          <strong>
            <a href="https://api.slack.com/applications/new">this link</a>
          </strong>
          , and fill the form out as below:
        </Trans>
      </p>
      <dl>
        <div className="row">
          <dt className="col-4">App Name</dt>
          <dd className="col-8">
            <code>Crowi</code>
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Icon</dt>
          <dd className="col-8">
            <p>Upload this image as the icon</p>
            <p>
              <a href="https://github.com/crowi/crowi/tree/master/resource/logo">Crowi Logo</a> (Free to download and use it)
            </p>
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Redirect URL</dt>
          <dd className="col-8">
            <code>{appUrl}/admin/notification/slackAuth</code> in <code>OAuth &amp; Permissions</code> tab.
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Short description</dt>
          <dd className="col-8">
            <code>Crowi&#39;s Slack Notification Integration</code>
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Long description</dt>
          <dd className="col-8">
            <code>Crowi&#39;s Slack Notification Integration</code>
          </dd>
        </div>
      </dl>
      <p>
        and <strong>Save</strong> it.
      </p>
 
      <h4>
        <Trans i18nKey="admin.notification.instructions.basic.steps.1.title">
          Get <code>clientId</code> and <code>clientSecret</code>
        </Trans>
      </h4>
      <h4>
        <Trans i18nKey="admin.notification.instructions.basic.steps.2.title">
          After <code>clientId</code> and <code>clientSecret</code> set, click &quot;Connect to Slack&quot; button to start OAuth process.
        </Trans>
      </h4>
      <p>{t('admin.notification.instructions.basic.steps.2.description')}</p>
      <h4>{t('admin.notification.instructions.basic.steps.3.title')}</h4>
 
      <h3>{t('admin.notification.instructions.unfurl.legend')}</h3>
      <h4>{t('admin.notification.instructions.unfurl.steps.0.title')}</h4>
      <p>
        <Trans i18nKey="admin.notification.instructions.unfurl.steps.0.description">
          Create App from{' '}
          <strong>
            <a href="https://api.slack.com/applications/new">this link</a>
          </strong>
          , and fill the form out as below:
        </Trans>
      </p>
      <dl>
        <div className="row">
          <dt className="col-4">Request URL</dt>
          <dd className="col-8">
            <code>{appUrl}</code>
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Workspace Events</dt>
          <dd className="col-8">
            <code>link_shared</code>
          </dd>
        </div>
        <div className="row">
          <dt className="col-4">Domains</dt>
          <dd className="col-8">Your crowi domains</dd>
        </div>
      </dl>
    </>
  )
}
 
export default Instructions