Merge pull request #3633 from weseek/feat/GW-5646-show-workspace-name-for-growi-app

Feat/show workspace name for growi app

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

@@ -7,6 +7,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 import { toastError } from '../../../util/apiNotification';
 import SlackGrowiBridging from './SlackGrowiBridging';
 import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
+import GrowiLogo from '../../Icons/GrowiLogo';
 
 const CustomBotWithoutProxySettings = (props) => {
   const { appContainer } = props;
@@ -18,24 +19,22 @@ const CustomBotWithoutProxySettings = (props) => {
   // eslint-disable-next-line no-unused-vars
   const [siteName, setSiteName] = useState('');
 
-  // eslint-disable-next-line no-unused-vars
-  const [isSetupSlackBot, setIsSetupSlackBot] = useState(null);
+  const fetchSlackWorkSpaceName = async() => {
+    try {
+      const res = await appContainer.apiv3.get('/slack-integration/custom-bot-without-proxy/slack-workspace-name');
+      setSlackWSNameInWithoutProxy(res.data.slackWorkSpaceName);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
 
   useEffect(() => {
-    const getSlackWorkSpaceName = async() => {
-      try {
-        const res = await appContainer.apiv3.get('/slack-integration/custom-bot-without-proxy/slack-workspace-name');
-        setSlackWSNameInWithoutProxy(res.data.slackWorkSpaceName);
-      }
-      catch (err) {
-        toastError(err);
-      }
-    };
     setSlackWSNameInWithoutProxy(null);
-    if (props.isConnectedToSlack) {
-      getSlackWorkSpaceName();
+    if (props.isSetupSlackBot) {
+      fetchSlackWorkSpaceName();
     }
-  }, [appContainer, props.isConnectedToSlack]);
+  }, [appContainer, props.isSetupSlackBot]);
 
   return (
     <>
@@ -44,8 +43,21 @@ const CustomBotWithoutProxySettings = (props) => {
 
       <div className="d-flex justify-content-center my-5 bot-integration">
         <div className="card rounded shadow border-0 w-50 admin-bot-card">
-          <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
-          <div className="card-body p-4"></div>
+          <div className="row">
+            <h5 className="card-title font-weight-bold mt-3 ml-4 col">Slack</h5>
+            <div className="pull-right mt-3 mr-3">
+              <div className="icon-fw fa fa-repeat fa-2x" onClick={fetchSlackWorkSpaceName}></div>
+            </div>
+          </div>
+
+          <div className="card-body p-2 w-50 mx-auto"> { slackWSNameInWithoutProxy &&
+            <div className="card p-20 slack-work-space-name-card">
+              <div className="m-2 text-center">
+                <h5 className="font-weight-bold">{ slackWSNameInWithoutProxy }</h5>
+                <GrowiLogo></GrowiLogo>
+              </div>
+            </div> }
+          </div>
         </div>
 
         <div className="text-center w-25 mt-4">
@@ -56,8 +68,8 @@ const CustomBotWithoutProxySettings = (props) => {
 
         <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
           <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
-          <div className="card-body p-4 text-center">
-            <a className="btn btn-primary mb-5">WESEEK Inner Wiki</a>
+          <div className="card-body p-4 mb-5 text-center">
+            <div className="btn btn-primary">WESEEK Inner Wiki</div>
           </div>
         </div>
       </div>
@@ -91,6 +103,7 @@ CustomBotWithoutProxySettings.propTypes = {
   slackBotTokenEnv: PropTypes.string,
   isRgisterSlackCredentials: PropTypes.bool,
   isConnectedToSlack: PropTypes.bool,
+  isSetupSlackBot: PropTypes.bool,
 };
 
 export default CustomBotWithoutProxySettingsWrapper;

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

@@ -27,6 +27,7 @@ const SlackIntegration = (props) => {
   const [isConnectedToSlack, setIsConnectedToSlack] = useState(null);
   const [isRegisterSlackCredentials, setIsRegisterSlackCredentials] = useState(false);
   const [isSendTestMessage, setIsSendTestMessage] = useState(false);
+  const [isSetupSlackBot, setIsSetupSlackBot] = useState(false);
 
 
   const fetchData = useCallback(async() => {
@@ -34,7 +35,7 @@ const SlackIntegration = (props) => {
       const response = await appContainer.apiv3.get('slack-integration/');
       const { currentBotType, customBotWithoutProxySettings, accessToken } = response.data.slackBotSettingParams;
       const {
-        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars,
+        slackSigningSecret, slackBotToken, slackSigningSecretEnvVars, slackBotTokenEnvVars, isSetupSlackBot,
       } = customBotWithoutProxySettings;
 
       setCurrentBotType(currentBotType);
@@ -44,6 +45,7 @@ const SlackIntegration = (props) => {
       setSlackSigningSecretEnv(slackSigningSecretEnvVars);
       setSlackBotTokenEnv(slackBotTokenEnvVars);
       setIsConnectedToSlack(isConnectedToSlack);
+      setIsSetupSlackBot(isSetupSlackBot);
 
       if ((slackBotToken && slackSigningSecret) || (slackBotTokenEnv && slackSigningSecretEnv)) {
         setIsRegisterSlackCredentials(true);
@@ -135,6 +137,7 @@ const SlackIntegration = (props) => {
           setSlackBotToken={setSlackBotToken}
           setIsSendTestMessage={setIsSendTestMessage}
           setIsRegisterSlackCredentials={setIsRegisterSlackCredentials}
+          isSetupSlackBot={isSetupSlackBot}
         />
       );
       break;

src/client/styles/scss/_admin.scss

@@ -1,3 +1,6 @@
+$slack-work-space-name-card-background: #fff5ff;
+$slack-work-space-name-card-border: #efc1f6;
+
 .admin-page {
   .title {
     padding-top: 1rem;
@@ -130,6 +133,10 @@
       border: 13px solid;
       border-radius: 50%;
     }
+    .slack-work-space-name-card {
+      background-color: $slack-work-space-name-card-background;
+      border: 1px solid $slack-work-space-name-card-border;
+    }
   }
 
   //// TODO: migrate to Bootstrap 4