Moved to Common

src/client/js/components/Admin/SlackIntegration/BotSettingsAccordion.jsx → src/client/js/components/Admin/Common/Accordion.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Collapse } from 'reactstrap';
 import PropTypes from 'prop-types';
 
-const BotSettingsAccordion = (props) => {
+const Accordion = (props) => {
   return (
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       {props.children}
@@ -10,7 +10,7 @@ const BotSettingsAccordion = (props) => {
   );
 };
 
-const BotSettingsAccordionItem = (props) => {
+const AccordionItem = (props) => {
   const onToggleAccordionHandler = () => {
     if (props.onToggleAccordionHandler != null) {
       props.onToggleAccordionHandler();
@@ -24,7 +24,7 @@ const BotSettingsAccordionItem = (props) => {
         role="button"
         onClick={onToggleAccordionHandler}
       >
-        <p className="mb-0 text-primary"><span className="mr-2">{props.itemNumber}</span>{props.title}</p>
+        <p className="mb-0 text-primary">{props.title}</p>
         {props.isActive
           ? <i className="fa fa-chevron-up" />
           : <i className="fa fa-chevron-down" />
@@ -39,18 +39,17 @@ const BotSettingsAccordionItem = (props) => {
   );
 };
 
-BotSettingsAccordion.Item = BotSettingsAccordionItem;
+Accordion.Item = AccordionItem;
 
-BotSettingsAccordionItem.propTypes = {
+AccordionItem.propTypes = {
   isActive: PropTypes.bool,
-  itemNumber: PropTypes.string,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.node.isRequired,
   onToggleAccordionHandler: PropTypes.func,
   children: PropTypes.node.isRequired,
 };
 
-BotSettingsAccordion.propTypes = {
+Accordion.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default BotSettingsAccordion;
+export default Accordion;

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
-import BotSettingsAccordion from './BotSettingsAccordion';
+import Accordion from '../common/Accordion';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
 import CustomBotWithoutProxySecretTokenSection from './CustomBotWithoutProxySecretTokenSection';
 
@@ -97,11 +97,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
   };
 
   return (
-    <BotSettingsAccordion>
-      <BotSettingsAccordion.Item
+    <Accordion>
+      <Accordion.Item
         isActive={openAccordionIndexes.has(botInstallationStep.CREATE_BOT)}
-        itemNumber="①"
-        title={t('slack_integration.without_proxy.create_bot')}
+        title={`<span className="mr-2">①</span>${t('slack_integration.without_proxy.create_bot')}`}
         onToggleAccordionHandler={() => onToggleAccordionHandler(botInstallationStep.CREATE_BOT)}
       >
         <div className="row my-5">
@@ -123,11 +122,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
             </a>
           </div>
         </div>
-      </BotSettingsAccordion.Item>
-      <BotSettingsAccordion.Item
+      </Accordion.Item>
+      <Accordion.Item
         isActive={openAccordionIndexes.has(botInstallationStep.INSTALL_BOT)}
-        itemNumber="②"
-        title={t('slack_integration.without_proxy.install_bot_to_slack')}
+        title={`<span className="mr-2">②</span>${t('slack_integration.without_proxy.install_bot_to_slack')}`}
         onToggleAccordionHandler={() => onToggleAccordionHandler(botInstallationStep.INSTALL_BOT)}
       >
         <div className="container w-75 py-5">
@@ -143,11 +141,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
           <img src="/images/slack-integration/slack-bot-install-to-workspace-joined-bot.png" className="border border-light img-fluid mb-1" />
           <img src="/images/slack-integration/slack-bot-install-your-app-introduction-to-channel.png" className="border border-light img-fluid" />
         </div>
-      </BotSettingsAccordion.Item>
-      <BotSettingsAccordion.Item
+      </Accordion.Item>
+      <Accordion.Item
         isActive={openAccordionIndexes.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
-        itemNumber="③"
-        title={t('slack_integration.without_proxy.register_secret_and_token')}
+        title={`<span className="mr-2">{③</span>${t('slack_integration.without_proxy.register_secret_and_token')}`}
         onToggleAccordionHandler={() => onToggleAccordionHandler(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
       >
         <CustomBotWithoutProxySecretTokenSection
@@ -159,11 +156,10 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
           slackBotToken={slackBotToken}
           slackBotTokenEnv={slackBotTokenEnv}
         />
-      </BotSettingsAccordion.Item>
-      <BotSettingsAccordion.Item
+      </Accordion.Item>
+      <Accordion.Item
         isActive={openAccordionIndexes.has(botInstallationStep.CONNECTION_TEST)}
-        itemNumber="④"
-        title={t('slack_integration.without_proxy.test_connection')}
+        title={`<span className="mr-2">④</span>${t('slack_integration.without_proxy.test_connection')}`}
         onToggleAccordionHandler={() => onToggleAccordionHandler(botInstallationStep.CONNECTION_TEST)}
       >
         <p className="text-center m-4">以下のテストボタンを押して、Slack連携が完了しているかの確認をしましょう</p>
@@ -182,8 +178,8 @@ const CustomBotWithoutProxySettingsAccordion = ({ appContainer, adminAppContaine
             </div>
           </div>
         </div>
-      </BotSettingsAccordion.Item>
-    </BotSettingsAccordion>
+      </Accordion.Item>
+    </Accordion>
   );
 };