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 & Permissions</code> tab. </dd> </div> <div className="row"> <dt className="col-4">Short description</dt> <dd className="col-8"> <code>Crowi's Slack Notification Integration</code> </dd> </div> <div className="row"> <dt className="col-4">Long description</dt> <dd className="col-8"> <code>Crowi'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 "Connect to Slack" 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 |