Merge branch 'feat/growi-bot' into fix/margin-in-slack-integration

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

@@ -63,7 +63,7 @@ const CustomBotWithoutProxySettingsAccordion = ({
     }
   };
 
-  const onTestConnectionHandler = async() => {
+  const testConnection = async() => {
     setConnectionErrorCode(null);
     setConnectionErrorMessage(null);
     setConnectionSuccessMessage(null);
@@ -81,6 +81,11 @@ const CustomBotWithoutProxySettingsAccordion = ({
     }
   };
 
+  const submitForm = (e) => {
+    e.preventDefault();
+    testConnection();
+  };
+
   const inputTestChannelHandler = (channel) => {
     setTestChannel(channel);
   };
@@ -159,7 +164,7 @@ const CustomBotWithoutProxySettingsAccordion = ({
       >
         <p className="text-center m-4">{t('admin:slack_integration.without_proxy.test_connection_by_pressing_button')}</p>
         <div className="d-flex justify-content-center">
-          <form className="form-row align-items-center w-25">
+          <form className="form-row align-items-center w-25" onSubmit={e => submitForm(e)}>
             <div className="col-8 input-group-prepend">
               <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
               <input
@@ -172,10 +177,9 @@ const CustomBotWithoutProxySettingsAccordion = ({
             </div>
             <div className="col-4">
               <button
-                type="button"
+                type="submit"
                 className="btn btn-info mx-3 font-weight-bold"
                 disabled={testChannel.trim() === ''}
-                onClick={onTestConnectionHandler}
               >Test
               </button>
             </div>

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

@@ -147,7 +147,6 @@ const SlackIntegration = (props) => {
       break;
   }
 
-
   return (
     <>
       <ConfirmBotChangeModal
@@ -168,19 +167,19 @@ const SlackIntegration = (props) => {
 
         {t('admin:slack_integration.selecting_bot_types.selecting_bot_type')}
 
-        <div className="row my-5">
-          <div className="card-deck mx-auto">
-            {botTypes.map((botType) => {
-              return (
+        <div className="row my-5 flex-wrap-reverse justify-content-center">
+          {botTypes.map((botType) => {
+            return (
+              <div className="m-3">
                 <BotTypeCard
                   key={botType}
                   botType={botType}
                   isActive={currentBotType === botType}
                   handleBotTypeSelect={handleBotTypeSelect}
                 />
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
         </div>
       </div>
 

src/client/styles/scss/_admin.scss

@@ -101,6 +101,7 @@ $slack-work-space-name-card-border: #efc1f6;
     }
     .admin-bot-card {
       min-width: 280px;
+      max-width: 500px;
       border-radius: 8px !important;
     }
     .border-primary {
@@ -123,13 +124,13 @@ $slack-work-space-name-card-border: #efc1f6;
       border-radius: 8px !important;
     }
     .admin-border-danger {
-      border-style : dashed;
-      border-width : 2px;
+      border-style: dashed;
+      border-width: 2px;
     }
     .admin-border-success {
-      border-width : 3px;
+      border-width: 3px;
     }
-    .circle{
+    .circle {
       width: 100px;
       height: 100px;
       // background: #092c58;