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