data-parent fix

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

@@ -1,14 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
 
-  const [currentOpenAccordionIndex, setCurrentOpenAccordionIndex] = useState(0);
-
   return (
-
-
     <div className="accordion my-5" id="withoutProxySettingsAccordion">
 
       <div className="card mb-0">
@@ -16,21 +12,17 @@ const CustomBotWithoutSettingsAccordion = () => {
         <div className="card-header" id="headingOne">
           <h2 className="mb-0">
             <button
-              className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
+              className="btn btn-link btn-block d-flex text-decoration-none"
               type="button"
-              onClick={() => setCurrentOpenAccordionIndex(0)}
               data-toggle="collapse"
-              data-target="#collapseOne"
+              data-target="#collapsibleMakeBotSection"
             >
               ① Botを作成する
-              {currentOpenAccordionIndex === 0
-                ? <i className="fa fa-chevron-down"></i>
-                : <i className="fa fa-chevron-up"></i>}
             </button>
           </h2>
         </div>
 
-        <div id="collapseOne" className={`collapse ${currentOpenAccordionIndex === 0 ? 'show' : ''}`}>
+        <div id="collapsibleMakeBotSection" className="collapse show" data-parent="#withoutProxySettingsAccordion">
           <div className="card-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
             dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
@@ -47,21 +39,71 @@ const CustomBotWithoutSettingsAccordion = () => {
         <div className="card-header" id="headingTwo">
           <h2 className="mb-0">
             <button
-              className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
+              className="btn btn-link btn-block d-flex text-decoration-none"
               type="button"
-              // onClick={() => setCurrentOpenAccordionIndex(1)}
               data-toggle="collapse"
-              data-target="#collapseTwo"
+              data-target="#collapsibleInstallBotSection"
             >
               ② BotをSlackにインストールする
-              {currentOpenAccordionIndex === 1
-                ? <i className="fa fa-chevron-down"></i>
-                : <i className="fa fa-chevron-up"></i>}
             </button>
           </h2>
         </div>
 
-        <div id="collapseTwo" className={`collapse ${currentOpenAccordionIndex === 1 ? 'show' : ''}`}>
+        <div id="collapsibleInstallBotSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
+          <div className="card-body">
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
+            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
+            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus
+            labore sustainable VHS.
+          </div>
+        </div>
+
+      </div>
+
+      <div className="card mb-0">
+
+        <div className="card-header" id="headingTwo">
+          <h2 className="mb-0">
+            <button
+              className="btn btn-link btn-block d-flex text-decoration-none"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapsibleSecretTokenSection"
+            >
+              ③ Signing Secret と Bot Token を登録する
+            </button>
+          </h2>
+        </div>
+
+        <div id="collapsibleSecretTokenSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
+          <div className="card-body">
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
+            dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+            assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
+            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus
+            labore sustainable VHS.
+          </div>
+        </div>
+
+      </div>
+
+      <div className="card mb-0">
+
+        <div className="card-header" id="headingTwo">
+          <h2 className="mb-0">
+            <button
+              className="btn btn-link btn-block d-flex text-decoration-none"
+              type="button"
+              data-toggle="collapse"
+              data-target="#collapsibleTestConnectionSection"
+            >
+              ④ 連携状況のテストをする
+            </button>
+          </h2>
+        </div>
+
+        <div id="collapsibleTestConnectionSection" className="collapse" data-parent="#withoutProxySettingsAccordion">
           <div className="card-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
             dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla