Merge pull request #3804 from weseek/fix/GW-6084-fix-appearance-for-with-proxy

fix appearance for with proxy

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

@@ -61,18 +61,9 @@ const CustomBotWithProxyIntegrationCard = (props) => {
             <a className="icon-fw fa fa-repeat fa-2x"></a>
           </div>
         </div>
-        <div className="card-body p-4 mb-5 text-center">
-          <div className="btn-group-vertical w-50">
-            {props.growiApps.map((growiApp) => {
-              return (
-                <button
-                  type="button"
-                  key={growiApp.name}
-                  className={growiApp.active ? 'btn btn-primary mb-3' : 'btn btn-outline-primary mb-3'}
-                >{growiApp.name}
-                </button>
-              );
-            })}
+        <div className="card-body text-center">
+          <div className="mt-5 border p-2 mx-3 bg-primary text-light">
+            {props.siteName}
           </div>
         </div>
       </div>
@@ -81,7 +72,7 @@ const CustomBotWithProxyIntegrationCard = (props) => {
 };
 
 CustomBotWithProxyIntegrationCard.propTypes = {
-  growiApps: PropTypes.array.isRequired,
+  siteName: PropTypes.string.isRequired,
   slackWorkSpaces: PropTypes.array,
   isSlackScopeSet: PropTypes.bool,
 };

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

@@ -17,6 +17,7 @@ const CustomBotWithProxySettings = (props) => {
   } = props;
   const [newProxyServerUri, setNewProxyServerUri] = useState();
   const [integrationIdToDelete, setIntegrationIdToDelete] = useState(null);
+  const [siteName, setSiteName] = useState('');
   const { t } = useTranslation();
 
   const workspaceNameObjects = Object.values(connectionStatuses);
@@ -78,19 +79,18 @@ const CustomBotWithProxySettings = (props) => {
     }
   };
 
+  useEffect(() => {
+    const siteName = appContainer.config.crowi.title;
+    setSiteName(siteName);
+  }, [appContainer]);
+
   return (
     <>
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}</h2>
 
       {/* TODO delete tmp props */}
       <CustomBotWithProxyIntegrationCard
-        growiApps={
-          [
-            { name: 'siteName1', active: true },
-            { name: 'siteName2', active: false },
-            { name: 'siteName3', active: false },
-          ]
-        }
+        siteName={siteName}
         slackWorkSpaces={
           [
             { name: 'wsName1', active: true },

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

@@ -15,6 +15,7 @@ const OfficialBotSettings = (props) => {
   const {
     appContainer, slackAppIntegrations, proxyServerUri, onClickAddSlackWorkspaceBtn,
   } = props;
+  const [siteName, setSiteName] = useState('');
   const [isDeleteConfirmModalShown, setIsDeleteConfirmModalShown] = useState(false);
   const { t } = useTranslation();
 
@@ -77,18 +78,17 @@ const OfficialBotSettings = (props) => {
     }
   };
 
+  useEffect(() => {
+    const siteName = appContainer.config.crowi.title;
+    setSiteName(siteName);
+  }, [appContainer]);
+
   return (
     <>
       <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}</h2>
       {/* TODO delete tmp props */}
       <CustomBotWithProxyIntegrationCard
-        growiApps={
-          [
-            { name: 'siteName1', active: true },
-            { name: 'siteName2', active: false },
-            { name: 'siteName3', active: false },
-          ]
-        }
+        siteName={siteName}
         slackWorkSpaces={
           [
             { name: 'wsName1', active: true },