be able to copy to clipboard

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

@@ -1,11 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Accordion from '../Common/Accordion';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+import { toastSuccess } from '../../../util/apiNotification';
 
 const growiUrl = window.location.host;
 
 const OfficialBotSettingsAccordion = () => {
+  // TODO: apply i18n by GW-5878
   const { t } = useTranslation();
 
   return (
@@ -63,12 +66,19 @@ const OfficialBotSettingsAccordion = () => {
           <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">
+                  <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('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>