Merge branch 'feat/5569-without-proxy-accordion' into feat/5613-accordion-component

resource/locales/ja_JP/admin/admin.json

@@ -271,7 +271,7 @@
       "install_bot_to_slack": "Bot を Slackにインストールする",
       "register_secret_and_token": "Signing Secret と Bot Token を登録する",
       "test_connection": "連携状況のテストをする",
-      "how_to_create_a_bot": "Bot の作り方"
+      "how_to_create_a_bot": "作成方法はこちら"
     }
   },
   "user_management": {

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

@@ -1,34 +1,39 @@
 import React from 'react';
 import { Collapse } from 'reactstrap';
+import PropTypes from 'prop'
 
 const Group = ({children}) => (
   <div className="card border-0 rounded-lg mb-0">{children}</div>
 )
 
 const Header = ({children}) => (
-  // <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
-  <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
-    <p className="mb-0 text-primary">{children}</p>
-    {/* {currentlyOpenAccordionIndex === 0
+  <div
+    className="card-header font-weight-normal py-3 d-flex justify-content-between"
+    role="button"
+    onClick={() => onToggleAccordionHandler(0)}
+  >
+    <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
+    {currentlyOpenAccordionIndexes.includes(0)
       ? <i className="fa fa-chevron-up" />
       : <i className="fa fa-chevron-down" />
-    } */}
+    }
   </div>
 )
 
 const Body = ({children}) => (
-  // <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
-  <Collapse isOpen={true}>
+  <Collapse isOpen={currentlyOpenAccordionIndexes.includes(0)}>
     <div className="card-body">
       {children}
     </div>
   </Collapse>
 )
 
-const BotSettingsAccordion = (props) => {
+const BotSettingsAccordion = ({children, currentlyOpenAccordionIndexes}) => {
+
+
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
-      {props.children}
+      {children}
     </div>
   )
 

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

@@ -5,18 +5,20 @@ import BotSettingsAccordion from './BotSettingsAccordion';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
-  const [currentlyOpenAccordionIndex, setCurrentlyOpenAccordionIndex] = useState(null);
+  const [currentlyOpenAccordionIndexes, setCurrentlyOpenAccordionIndexes] = useState([]);
   const onToggleAccordionHandler = (i) => {
-    if (currentlyOpenAccordionIndex === i) {
-      setCurrentlyOpenAccordionIndex(null);
+    if (currentlyOpenAccordionIndexes.includes(i)) {
+      setCurrentlyOpenAccordionIndexes(currentlyOpenAccordionIndexes.filter(n => n !== i));
       return;
     }
-    setCurrentlyOpenAccordionIndex(i);
+    setCurrentlyOpenAccordionIndexes([...currentlyOpenAccordionIndexes, i]);
   };
 
   return (
 
-    <BotSettingsAccordion>
+    <BotSettingsAccordion
+      currentlyOpenAccordionIndexes={currentlyOpenAccordionIndexes}
+    >
 
       <BotSettingsAccordion.Group>
         <BotSettingsAccordion.Header>
@@ -38,87 +40,105 @@ const CustomBotWithoutSettingsAccordion = () => {
       
     </BotSettingsAccordion>
 
-    // <div className="card border-0 rounded-lg shadow overflow-hidden" id="customBotWithoutProxySettingsAccordion">
-
-    //   <div className="card border-0 rounded-lg mb-0">
-    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(0)}>
-    //       <p className="mb-0 text-primary">{`① ${t('slack_integration.without_proxy.create_bot')}`}</p>
-    //       {currentlyOpenAccordionIndex === 0
-    //         ? <i className="fa fa-chevron-up" />
-    //         : <i className="fa fa-chevron-down" />
-    //       }
-    //     </div>
-    //     <Collapse isOpen={currentlyOpenAccordionIndex === 0}>
-    //       <div className="card-body">
-
-    //         <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('slack_integration.without_proxy.create_bot')}
-    //                 <i className="fa fa-external-link ml-2" aria-hidden="true" />
-    //               </button>
-    //             </div>
-    //             <a href="#">
-    //               <p className="text-center mt-1">
-    //                 <small>
-    //                   {t('slack_integration.without_proxy.how_to_create_a_bot')}
-    //                   <i className="fa fa-external-link ml-2" aria-hidden="true" />
-    //                 </small>
-    //               </p>
-    //             </a>
-    //           </div>
-    //         </div>
-    //       </div>
-    //     </Collapse>
-    //   </div>
-
-    //   <div className="card border-0 rounded-lg mb-0">
-    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(1)}>
-    //       <p className="mb-0 text-primary">{`② ${t('slack_integration.without_proxy.install_bot_to_slack')}`}</p>
-    //       {currentlyOpenAccordionIndex === 1
-    //         ? <i className="fa fa-chevron-up" />
-    //         : <i className="fa fa-chevron-down" />
-    //       }
-    //     </div>
-    //     <Collapse isOpen={currentlyOpenAccordionIndex === 1}>
-    //       <div className="card-body">
-    //         BODY2
-    //       </div>
-    //     </Collapse>
-    //   </div>
-
-    //   <div className="card border-0 rounded-lg mb-0">
-    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(2)}>
-    //       <p className="mb-0 text-primary">{`③ ${t('slack_integration.without_proxy.register_secret_and_token')}`}</p>
-    //       {currentlyOpenAccordionIndex === 2
-    //         ? <i className="fa fa-chevron-up" />
-    //         : <i className="fa fa-chevron-down" />
-    //       }
-    //     </div>
-    //     <Collapse isOpen={currentlyOpenAccordionIndex === 2}>
-    //       <div className="card-body">
-    //         BODY 3
-    //       </div>
-    //     </Collapse>
-    //   </div>
-
-    //   <div className="card border-0 rounded-lg mb-0">
-    //     <div className="card-header clickable py-3 d-flex justify-content-between" onClick={() => onToggleAccordionHandler(3)}>
-    //       <p className="mb-0 text-primary">{`④ ${t('slack_integration.without_proxy.test_connection')}`}</p>
-    //       {currentlyOpenAccordionIndex === 3
-    //         ? <i className="fa fa-chevron-up" />
-    //         : <i className="fa fa-chevron-down" />
-    //       }
-    //     </div>
-    //     <Collapse isOpen={currentlyOpenAccordionIndex === 3}>
-    //       <div className="card-body">
-    //         BODY 4
-    //       </div>
-    //     </Collapse>
-    //   </div>
-
-    // </div>
+    <div className="card border-0 rounded-lg shadow overflow-hidden">
+
+      <div className="card border-0 rounded-lg mb-0">
+        <div
+          className="card-header font-weight-normal py-3 d-flex justify-content-between"
+          role="button"
+          onClick={() => onToggleAccordionHandler(0)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">①</span>{t('slack_integration.without_proxy.create_bot')}</p>
+          {currentlyOpenAccordionIndexes.includes(0)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(0)}>
+          <div className="card-body">
+
+            <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('slack_integration.without_proxy.create_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('slack_integration.without_proxy.how_to_create_a_bot')}
+                      <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                    </small>
+                  </p>
+                </a>
+              </div>
+            </div>
+          </div>
+        </Collapse>
+      </div>
+
+      <div className="card border-0 rounded-lg mb-0">
+        <div
+          className="card-header font-weight-normal py-3 d-flex justify-content-between"
+          role="button"
+          onClick={() => onToggleAccordionHandler(1)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">②</span>{t('slack_integration.without_proxy.install_bot_to_slack')}</p>
+          {currentlyOpenAccordionIndexes.includes(1)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(1)}>
+          <div className="card-body">
+            BODY2
+          </div>
+        </Collapse>
+      </div>
+
+      <div className="card border-0 rounded-lg mb-0">
+        <div
+          className="card-header font-weight-normal py-3 d-flex justify-content-between"
+          role="button"
+          onClick={() => onToggleAccordionHandler(2)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">③</span>{t('slack_integration.without_proxy.register_secret_and_token')}</p>
+          {currentlyOpenAccordionIndexes.includes(2)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(2)}>
+          <div className="card-body">
+            BODY 3
+          </div>
+        </Collapse>
+      </div>
+
+      <div className="card border-0 rounded-lg mb-0">
+        <div
+          className="card-header font-weight-normal py-3 d-flex justify-content-between"
+          role="button"
+          onClick={() => onToggleAccordionHandler(3)}
+        >
+          <p className="mb-0 text-primary"><span className="mr-2">④</span>{t('slack_integration.without_proxy.test_connection')}</p>
+          {currentlyOpenAccordionIndexes.includes(3)
+            ? <i className="fa fa-chevron-up" />
+            : <i className="fa fa-chevron-down" />
+          }
+        </div>
+        <Collapse isOpen={currentlyOpenAccordionIndexes.includes(3)}>
+          <div className="card-body">
+            BODY 4
+          </div>
+        </Collapse>
+      </div>
+
+    </div>
+
 
   );
 

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

@@ -121,7 +121,8 @@ const SlackIntegration = (props) => {
         <div className="card-deck mx-auto">
 
           <div
-            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}
+            className={`card mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}
+            role="button"
             onClick={() => handleBotTypeSelect('official-bot')}
           >
             <div className="card-body">
@@ -131,7 +132,8 @@ const SlackIntegration = (props) => {
           </div>
 
           <div
-            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
+            className={`card mx-3 py-5 rounded ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
+            role="button"
             onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
           >
             <div className="card-body">
@@ -141,7 +143,8 @@ const SlackIntegration = (props) => {
           </div>
 
           <div
-            className={`card clickable mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
+            className={`card mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
+            role="button"
             onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
           >
             <div className="card-body">

src/client/styles/scss/_admin.scss

@@ -83,14 +83,6 @@
     }
   }
 
-  .clickable {
-    cursor: pointer;
-  }
-
-  #customBotWithoutProxySettingsAccordion .card-header {
-    font-weight: 300;
-  }
-
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches