Added default accordion state

src/client/js/components/Admin/Common/Accordion.jsx

@@ -1,36 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Collapse } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const Accordion = (props) => {
-  return (
-    <div className="card border-0 rounded-lg shadow overflow-hidden">
-      {props.children}
-    </div>
-  );
-};
-
-const AccordionItem = (props) => {
-  const onToggleAccordionHandler = () => {
-    if (props.onToggleAccordionHandler != null) {
-      props.onToggleAccordionHandler();
-    }
-  };
+  const [isActive, setIsActive] = useState(props.defaultIsActive);
 
   return (
     <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}
+        onClick={setIsActive(prevState => !prevState)}
       >
         <p className="mb-0 text-primary">{props.title}</p>
-        {props.isActive
+        {isActive
           ? <i className="fa fa-chevron-up" />
           : <i className="fa fa-chevron-down" />
         }
       </div>
-      <Collapse isOpen={props.isActive}>
+      <Collapse isOpen={isActive}>
         <div className="card-body">
           {props.children}
         </div>
@@ -39,21 +27,10 @@ const AccordionItem = (props) => {
   );
 };
 
-Accordion.Item = AccordionItem;
-
-AccordionItem.propTypes = {
-  title: PropTypes.node.isRequired,
-  onToggleAccordionHandler: PropTypes.func,
-  children: PropTypes.node.isRequired,
-  isActive: PropTypes.bool,
-};
-
-AccordionItem.defaultProps = {
-  isActive: true,
-};
-
 Accordion.propTypes = {
+  title: PropTypes.node.isRequired,
   children: PropTypes.node.isRequired,
+  defaultIsActive: PropTypes.bool,
 };
 
 export default Accordion;

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

@@ -26,7 +26,7 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
   const [slackBotTokenEnv, setSlackBotTokenEnv] = useState('');
   const currentBotType = 'custom-bot-without-proxy';
 
-  const fetchData = useCallback(async() => {
+  const fetchData = useCallback(async () => {
     try {
       await adminAppContainer.retrieveAppSettingsData();
       const res = await appContainer.apiv3.get('/slack-integration/');
@@ -58,7 +58,7 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
     setOpenAccordionIndexes(accordionIndexes);
   };
 
-  const updateSecretTokenHandler = async() => {
+  const updateSecretTokenHandler = async () => {
     try {
       await appContainer.apiv3.put('/slack-integration/custom-bot-without-proxy', {
         slackSigningSecret,
@@ -81,7 +81,7 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
     setSlackBotToken(botTokenInput);
   };
 
-  const onTestConnectionHandler = async() => {
+  const onTestConnectionHandler = async () => {
     setConnectionErrorCode(null);
     setConnectionErrorMessage(null);
     try {
@@ -97,7 +97,7 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
   };
 
   return (
-    <Accordion>
+    <div className="card border-0 rounded-lg shadow overflow-hidden">
       <Accordion.Item
         isActive={openAccordionIndexes.has(botInstallationStep.CREATE_BOT)}
         title={[<span className="mr-2">①</span>, t('slack_integration.without_proxy.create_bot')]}
@@ -179,7 +179,7 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
           </div>
         </div>
       </Accordion.Item>
-    </Accordion>
+    </div>
   );
 };