Merge branch 'feat/growi-bot' into feat/GW-5798-enable-display-mulutiple-ws-names-and-growi-app-names

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

@@ -33,7 +33,7 @@ const AccessTokenSettings = (props) => {
             {accessToken.length === 0 ? (
               <input className="form-control" type="text" value={accessToken} readOnly />
             ) : (
-              <CopyToClipboard text={accessToken} onCopy={() => toastSuccess(t('slack_integration.copied_to_clipboard'))}>
+              <CopyToClipboard text={accessToken} onCopy={() => toastSuccess(t('admin:slack_integration.copied_to_clipboard'))}>
                 <input className="form-control" type="text" value={accessToken} readOnly />
               </CopyToClipboard>
             )}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import AppContainer from '../../../services/AppContainer';
@@ -12,9 +12,22 @@ const CustomBotWithProxySettings = (props) => {
   const { appContainer, adminAppContainer } = props;
   const { t } = useTranslation();
 
+  // TODO: Multiple accordion logic
+  const [accordionComponentsCount, setAccordionComponentsCount] = useState(0);
+  const addAccordionHandler = () => {
+    setAccordionComponentsCount(
+      prevState => prevState + 1,
+    );
+  };
+  // TODO: Delete accordion logic
+  const deleteAccordionHandler = () => {
+    setAccordionComponentsCount(
+      prevState => prevState - 1,
+    );
+  };
+
   return (
     <>
-
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
       {/* TODO delete tmp props */}
@@ -25,17 +38,35 @@ const CustomBotWithProxySettings = (props) => {
       />
       <h2 className="admin-setting-header">{t('admin:slack_integration.cooperation_procedure')}</h2>
       <div className="mx-3">
-        <div className="d-flex flex-column pull-right">
+
+        {/* // TODO: Multiple accordion logic */}
+        {Array(...Array(accordionComponentsCount)).map(i => (
+          <>
+            <div className="d-flex justify-content-end">
+              <button
+                className="my-3 btn btn-outline-danger"
+                type="button"
+                onClick={deleteAccordionHandler}
+              >
+                <i className="icon-trash mr-1" />
+                {t('admin:slack_integration.delete')}
+              </button>
+            </div>
+            <CustomBotWithProxySettingsAccordion key={i} />
+          </>
+        ))}
+
+        {/* TODO: Disable button when integration is incomplete */}
+        {/* TODO: i18n */}
+        <div className="row justify-content-center my-5">
           <button
-            className="my-3 btn btn-outline-danger"
             type="button"
-          ><i className="icon-trash mr-1" />{t('admin:slack_integration.delete')}
+            className="btn btn-outline-primary"
+            onClick={addAccordionHandler}
+          >
+            + Slackワークスペースを追加
           </button>
         </div>
-
-        <div className="d-flex flex-column my-5 w-100">
-          <CustomBotWithProxySettingsAccordion />
-        </div>
       </div>
     </>
   );

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

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { withUnstatedContainers } from '../../UnstatedUtils';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Accordion from '../Common/Accordion';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import { toastSuccess } from '../../../util/apiNotification';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 
 const OfficialBotSettingsAccordion = (props) => {
+  // TODO: apply i18n by GW-5878
   const { t } = useTranslation();
   const { appContainer } = props;
   const growiUrl = appContainer.config.crowi.url;
@@ -67,12 +70,19 @@ const OfficialBotSettingsAccordion = (props) => {
           <div className="d-flex flex-column align-items-center">
             <ol className="p-0">
               <li><p className="ml-2">Slack上で`/growi register`と打つ</p></li>
-              {/* TODO: Copy to clipboard on click by GW5856 */}
               <li>
-                <p className="ml-2"><b>GROWI URL</b>には{growiUrl}
-                  <i className="fa fa-clipboard mx-1 text-secondary" aria-hidden="true"></i>
-                  を貼り付ける
-                </p>
+                <div className="input-group align-items-center ml-2 mb-3">
+                  <b> GROWI URL</b>には
+                  <div className="input-group-prepend mx-1">
+                    <input className="form-control" type="text" value={growiUrl} readOnly />
+                    <CopyToClipboard text={growiUrl} onCopy={() => toastSuccess(t('admin:slack_integration.copied_to_clipboard'))}>
+                      <div className="btn input-group-text">
+                        <i className="fa fa-clipboard mx-1" aria-hidden="true"></i>
+                      </div>
+                    </CopyToClipboard>
+                  </div>
+                    を貼り付ける
+                </div>
               </li>
               <li><p className="ml-2">上記で発行した<b>Access Token for GROWI と Access Token for Proxy</b>を入れる</p></li>
             </ol>