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

public/images/slack-integration/slackbot-difficulty-level-easy.svg

@@ -1,36 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
   <defs>
     <style>
-      .cls-1, .cls-4 {
-        fill: none;
-      }
-
       .cls-1 {
+        fill: #fff;
         stroke: #81d5b8;
         stroke-width: 3px;
       }
 
       .cls-2 {
-        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
-        font-size: 16px;
-        font-weight: 700;
         fill: #81d5b8;
       }
 
       .cls-3 {
         stroke: none;
       }
+
+      .cls-4 {
+        fill: none;
+      }
     </style>
   </defs>
-  <g id="Group_4361" data-name="Group 4361" transform="translate(-71.69 -49.04)">
-    <g id="Group_4358" data-name="Group 4358">
-      <g id="Group_4357" data-name="Group 4357">
-        <g id="Ellipse_97" data-name="Ellipse 97" class="cls-1" transform="translate(71.69 49.04)">
-          <circle class="cls-3" cx="30" cy="30" r="30"/>
-          <circle class="cls-4" cx="30" cy="30" r="28.5"/>
-        </g>
-        <text id="EASY" class="cls-2" transform="translate(83.884 89.632) rotate(-11)"><tspan x="0" y="0">EASY</tspan></text>
-      </g>
+  <g id="Group_4362" data-name="Group 4362" transform="translate(-538 -44)">
+    <g id="Ellipse_101" data-name="Ellipse 101" class="cls-1" transform="translate(538 44)">
+      <circle class="cls-3" cx="30" cy="30" r="30"/>
+      <circle class="cls-4" cx="30" cy="30" r="28.5"/>
     </g>
+    <path id="Path_708" data-name="Path 708" class="cls-2" d="M1.456,0H8.9V-1.984H3.824V-5.152h4.16V-7.136H3.824V-9.872h4.9V-11.84H1.456ZM13.52-4.88l.352-1.3c.352-1.232.7-2.576,1.008-3.872h.064c.352,1.28.672,2.64,1.04,3.872l.352,1.3ZM17.68,0h2.48L16.352-11.84H13.568L9.776,0h2.4l.832-3.04h3.84Zm7.408.224c2.736,0,4.352-1.648,4.352-3.584a3.271,3.271,0,0,0-2.384-3.216L25.5-7.232c-1.008-.4-1.856-.7-1.856-1.552,0-.784.672-1.248,1.712-1.248a3.777,3.777,0,0,1,2.512.976l1.2-1.488a5.254,5.254,0,0,0-3.712-1.52c-2.4,0-4.1,1.488-4.1,3.424a3.43,3.43,0,0,0,2.4,3.184l1.584.672c1.056.448,1.776.72,1.776,1.6,0,.832-.656,1.36-1.888,1.36a4.658,4.658,0,0,1-3.008-1.312L20.768-1.5A6.309,6.309,0,0,0,25.088.224ZM33.232,0H35.6V-4.336l3.568-7.5H36.7L35.52-8.96c-.336.88-.688,1.712-1.056,2.624H34.4c-.368-.912-.688-1.744-1.024-2.624l-1.184-2.88H29.68l3.552,7.5Z" transform="translate(549.872 85.316) rotate(-11)"/>
   </g>
 </svg>

public/images/slack-integration/slackbot-difficulty-level-hard.svg

@@ -1,32 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
   <defs>
     <style>
-      .cls-1, .cls-4 {
-        fill: none;
-      }
-
       .cls-1 {
+        fill: #fff;
         stroke: #ff8080;
         stroke-width: 3px;
       }
 
       .cls-2 {
         fill: #ff8080;
-        font-size: 16px;
-        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
-        font-weight: 700;
       }
 
       .cls-3 {
         stroke: none;
       }
+
+      .cls-4 {
+        fill: none;
+      }
     </style>
   </defs>
-  <g id="Group_4360" data-name="Group 4360" transform="translate(-303.305 -23.039)">
-    <g id="Ellipse_99" data-name="Ellipse 99" class="cls-1" transform="translate(303.305 23.039)">
+  <g id="Group_4364" data-name="Group 4364" transform="translate(-782.69 -44.039)">
+    <g id="Ellipse_103" data-name="Ellipse 103" class="cls-1" transform="translate(782.69 44.039)">
       <circle class="cls-3" cx="30" cy="30" r="30"/>
       <circle class="cls-4" cx="30" cy="30" r="28.5"/>
     </g>
-    <text id="HARD" class="cls-2" transform="translate(312.93 64.277) rotate(-11)"><tspan x="0" y="0">HARD</tspan></text>
+    <path id="Path_710" data-name="Path 710" class="cls-2" d="M1.456,0H3.824V-5.12H8.3V0h2.352V-11.84H8.3v4.656H3.824V-11.84H1.456ZM15.792-4.88l.352-1.3c.352-1.232.7-2.576,1.008-3.872h.064c.352,1.28.672,2.64,1.04,3.872l.352,1.3ZM19.952,0h2.48L18.624-11.84H15.84L12.048,0h2.4l.832-3.04h3.84Zm6.24-9.968h1.536c1.52,0,2.352.432,2.352,1.712,0,1.264-.832,1.9-2.352,1.9H26.192ZM32.912,0,30.144-4.848A3.389,3.389,0,0,0,32.4-8.256c0-2.72-1.968-3.584-4.448-3.584H23.824V0h2.368V-4.48H27.84L30.272,0Zm1.824,0h3.376C41.6,0,43.84-1.984,43.84-5.968c0-4-2.24-5.872-5.856-5.872H34.736ZM37.1-1.9V-9.952h.736c2.208,0,3.584,1.088,3.584,3.984,0,2.88-1.376,4.064-3.584,4.064Z" transform="translate(792.315 85.277) rotate(-11)"/>
   </g>
 </svg>

public/images/slack-integration/slackbot-difficulty-level-normal.svg

@@ -1,32 +1,30 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
   <defs>
     <style>
-      .cls-1, .cls-4 {
-        fill: none;
-      }
-
       .cls-1 {
+        fill: #fff;
         stroke: #ffce60;
         stroke-width: 3px;
       }
 
       .cls-2 {
         fill: #ffce60;
-        font-size: 11px;
-        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
-        font-weight: 700;
       }
 
       .cls-3 {
         stroke: none;
       }
+
+      .cls-4 {
+        fill: none;
+      }
     </style>
   </defs>
-  <g id="Group_4359" data-name="Group 4359" transform="translate(-163.69 -44.039)">
-    <g id="Ellipse_98" data-name="Ellipse 98" class="cls-1" transform="translate(163.69 44.039)">
+  <g id="Group_4363" data-name="Group 4363" transform="translate(-664.69 -44.039)">
+    <g id="Ellipse_102" data-name="Ellipse 102" class="cls-1" transform="translate(664.69 44.039)">
       <circle class="cls-3" cx="30" cy="30" r="30"/>
       <circle class="cls-4" cx="30" cy="30" r="28.5"/>
     </g>
-    <text id="NORMAL" class="cls-2" transform="translate(171.836 83.813) rotate(-11)"><tspan x="0" y="0">NORMAL</tspan></text>
+    <path id="Path_709" data-name="Path 709" class="cls-2" d="M1,0h1.54V-3.267c0-.935-.121-1.958-.2-2.838H2.4l.825,1.749L5.577,0h1.65V-8.14H5.687v3.245c0,.924.121,2,.209,2.849H5.841l-.814-1.76L2.662-8.14H1ZM12.474.154c2.156,0,3.641-1.617,3.641-4.257S14.63-8.294,12.474-8.294,8.833-6.754,8.833-4.1,10.318.154,12.474.154Zm0-1.408c-1.21,0-1.98-1.111-1.98-2.849s.77-2.794,1.98-2.794,1.98,1.045,1.98,2.794S13.684-1.254,12.474-1.254Zm6.864-5.6h1.056c1.045,0,1.617.3,1.617,1.177s-.572,1.309-1.617,1.309H19.338ZM23.958,0l-1.9-3.333a2.33,2.33,0,0,0,1.551-2.343c0-1.87-1.353-2.464-3.058-2.464H17.71V0h1.628V-3.08h1.133L22.143,0Zm1.254,0h1.463V-3.4c0-.77-.132-1.9-.209-2.673h.044l.649,1.914L28.424-.737h.935l1.254-3.421.66-1.914h.044c-.077.77-.2,1.9-.2,2.673V0H32.6V-8.14H30.8L29.447-4.334c-.176.506-.319,1.045-.5,1.573H28.9c-.165-.528-.319-1.067-.495-1.573L27.016-8.14h-1.8ZM36.135-3.355l.242-.891c.242-.847.484-1.771.693-2.662h.044c.242.88.462,1.815.715,2.662l.242.891ZM38.995,0H40.7L38.082-8.14H36.168L33.561,0h1.65l.572-2.09h2.64Zm2.662,0h4.928V-1.364h-3.3V-8.14H41.657Z" transform="translate(672.836 83.813) rotate(-11)"/>
   </g>
 </svg>

resource/locales/en_US/admin/admin.json

@@ -293,7 +293,9 @@
     "accordion": {
       "create_bot": "Create Bot",
       "how_to_create_a_bot": "How to create a bot",
+      "how_to_install": "How to install",
       "install_bot_to_slack": "Install Bot To Slack",
+      "install_now": "Install now",
       "select_install_your_app": "Select \"Install your app\".",
       "select_install_to_workspace": "Select \"Install to Workspace\".",
       "register_official_bot_proxy_service": "Issue Access Token / Register GROWI Official Bot Proxy Service",

resource/locales/ja_JP/admin/admin.json

@@ -290,7 +290,9 @@
     "accordion": {
       "create_bot": "Bot を作成する",
       "how_to_create_a_bot": "作成方法はこちら",
+      "how_to_install": "インストール方法はこちら",
       "install_bot_to_slack": "Bot を Slack にインストールする",
+      "install_now": "今すぐインストール",
       "select_install_your_app": "Install your app をクリックします。",
       "select_install_to_workspace": "Install to Workspace をクリックします。",
       "register_official_bot_proxy_service": "アクセストークンの発行 / GROWI Official Bot Proxy サービスへの登録",

resource/locales/zh_CN/admin/admin.json

@@ -300,7 +300,9 @@
     "accordion": {
       "create_bot": "创建 Bot",
       "how_to_create_a_bot": "如何创建一个 Bot",
+      "how_to_install": "点击这里查看安装说明",
       "install_bot_to_slack": "将 Bot 安装到 Slack",
+      "install_now": "现在安装",
       "select_install_your_app": "选择 \"Install your app\"。",
       "select_install_to_workspace": "选择 \"Install to Workspace\"。",
       "register_official_bot_proxy_service": "发行访问令牌 / 注册 GROWI 官方 Bot 代理服务",

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

@@ -1,19 +1,49 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import Accordion from '../Common/Accordion';
 
 const CustomBotWithProxySettingsAccordion = () => {
-
+  const { t } = useTranslation();
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       <Accordion
-        title={<><span className="mr-2">①</span>First Accordion</>}
+        title={<><span className="mr-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
       >
-        1
+        <div className="my-5 d-flex flex-column align-items-center">
+          <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+            {t('admin:slack_integration.accordion.create_bot')}
+            <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_create_a_bot')}
+                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+              </small>
+            </p>
+          </a>
+        </div>
       </Accordion>
       <Accordion
-        title={<><span className="mr-2">②</span>Second Accordion</>}
+        title={<><span className="mr-2">②</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
       >
-        2
+        <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')}>
+            {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>Third Accordion</>}

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

@@ -104,24 +104,20 @@ const CustomBotWithoutProxySettingsAccordion = ({
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CREATE_BOT)}
         title={<><span className="mr-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
       >
-        <div className="row my-5">
-          <div className="mx-auto">
-            <div>
-              <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
-                {t('admin:slack_integration.accordion.create_bot')}
+        <div className="my-5 d-flex flex-column align-items-center">
+          <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+            {t('admin:slack_integration.accordion.create_bot')}
+            <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_create_a_bot')}
                 <i className="fa fa-external-link ml-2" aria-hidden="true" />
-              </button>
-            </div>
-            {/* TODO: Insert DOCS link */}
-            <a href="#">
-              <p className="text-center mt-1">
-                <small>
-                  {t('admin:slack_integration.accordion.how_to_create_a_bot')}
-                  <i className="fa fa-external-link ml-2" aria-hidden="true" />
-                </small>
-              </p>
-            </a>
-          </div>
+              </small>
+            </p>
+          </a>
         </div>
       </Accordion>
       <Accordion
@@ -186,9 +182,9 @@ const CustomBotWithoutProxySettingsAccordion = ({
           </form>
         </div>
         {connectionErrorMessage != null
-        && <p className="text-danger text-center my-4">{t('admin:slack_integration.accordion.error_check_logs_below')}</p>}
+          && <p className="text-danger text-center my-4">{t('admin:slack_integration.accordion.error_check_logs_below')}</p>}
         {connectionSuccessMessage != null
-        && <p className="text-info text-center my-4">{t('admin:slack_integration.accordion.send_message_to_slack_work_space')}</p>}
+          && <p className="text-info text-center my-4">{t('admin:slack_integration.accordion.send_message_to_slack_work_space')}</p>}
         <form>
           <div className="row my-3 justify-content-center">
             <div className="form-group slack-connection-log w-25">