Merge branch 'feat/growi-bot' into feat/GW-5841-enable-display-workspace-name-and-growi-app-name

packages/slackbot-proxy/docker-compose.dev.yml

@@ -11,6 +11,7 @@ services:
       - MYSQL_USER=growi-slackbot-proxy
       - MYSQL_PASSWORD=YrkUi7rCW46Z2N6EXSFUBwaQTUR8biCU
       - MYSQL_DATABASE=growi-slackbot-proxy
+    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
     volumes:
       - /data/db
 

packages/slackbot-proxy/src/controllers/slack.ts

@@ -79,23 +79,19 @@ export class SlackCtrl {
 
   @Post('/commands')
   @UseBefore(AuthorizeCommandMiddleware)
-  async handleCommand(@Req() req: AuthedReq, @Res() res: Res): Promise<void|string> {
+  async handleCommand(@Req() req: AuthedReq, @Res() res: Res): Promise<void|string|Res> {
     const { body, authorizeResult } = req;
 
     if (body.text == null) {
       return 'No text.';
     }
 
-    // Send response immediately to avoid opelation_timeout error
-    // See https://api.slack.com/apis/connections/events-api#the-events-api__responding-to-events
-    res.send();
-
     const growiCommand = parseSlashCommand(body);
 
     // register
     if (growiCommand.growiCommandType === 'register') {
       await this.registerService.process(growiCommand, authorizeResult, body as {[key:string]:string});
-      return;
+      return res.send();
     }
 
     /*
@@ -106,6 +102,19 @@ export class SlackCtrl {
     const installation = await this.installationRepository.findByTeamIdOrEnterpriseId(installationId!);
     const relations = await this.relationRepository.find({ installation: installation?.id });
 
+    if (relations.length === 0) {
+      return res.json({
+        blocks: [
+          generateMarkdownSectionBlock('*No relation found.*'),
+          generateMarkdownSectionBlock('Run `/growi register` first.'),
+        ],
+      });
+    }
+
+    // Send response immediately to avoid opelation_timeout error
+    // See https://api.slack.com/apis/connections/events-api#the-events-api__responding-to-events
+    res.send();
+
     const promises = relations.map((relation: Relation) => {
       // generate API URL
       const url = new URL('/_api/v3/slack-bot/commands', relation.growiUri);

src/client/js/components/Admin/SlackIntegration/OfficialbotSettingsAccordion.jsx

@@ -10,8 +10,22 @@ const OfficialBotSettingsAccordion = () => {
       <Accordion
         title={<><span className="mr-2">①</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
       >
-        {/* TODO: GW-5824 add accordion contents  */}
-        hoge
+        <div className="my-5 d-flex flex-column align-items-center">
+          {/* TODO: Insert install link */}
+          <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank', 'noreferrer')}>
+            {t('admin:slack_integration.accordion.install_now')}
+            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+          </button>
+          {/* TODO: Insert DOCS link */}
+          <a href="#">
+            <p className="text-center mt-1">
+              <small>
+                {t('admin:slack_integration.accordion.how_to_install')}
+                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+              </small>
+            </p>
+          </a>
+        </div>
       </Accordion>
       <Accordion
         title={<><span className="mr-2">②</span>{t('admin:slack_integration.accordion.register_official_bot_proxy_service')}</>}
@@ -28,8 +42,37 @@ const OfficialBotSettingsAccordion = () => {
       <Accordion
         title={<><span className="mr-2">④</span>{t('admin:slack_integration.accordion.test_connection')}</>}
       >
-        {/* TODO: GW-5824 add accordion contents  */}
-        hoge
+        <p className="text-center m-4">{t('admin:slack_integration.accordion.test_connection_by_pressing_button')}</p>
+        <div className="d-flex justify-content-center">
+          <form className="form-row align-items-center w-25">
+            <div className="col-8 input-group-prepend">
+              <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
+              <input
+                className="form-control w-100"
+                type="text"
+                placeholder="Slack Channel"
+              />
+            </div>
+            <div className="col-4">
+              <button
+                type="submit"
+                className="btn btn-info mx-3 font-weight-bold"
+              >Test
+              </button>
+            </div>
+          </form>
+        </div>
+        <form>
+          <div className="row my-3 justify-content-center">
+            <div className="form-group slack-connection-log w-25">
+              <label className="mb-1"><p className="border-info slack-connection-log-title pl-2">Logs</p></label>
+              <textarea
+                className="form-control card border-info slack-connection-log-body rounded-lg"
+                readOnly
+              />
+            </div>
+          </div>
+        </form>
       </Accordion>
     </div>
   );