refactor SamlSecuritySetting

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import { toastSuccess, toastError } from '../../../util/apiNotification';
@@ -11,15 +10,13 @@ import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminSamlSecurityContainer from '../../../services/AdminSamlSecurityContainer';
 
-const logger = loggerFactory('growi:security:AdminSamlSecurityContainer');
-
 class SamlSecurityManagement extends React.Component {
 
   constructor(props) {
     super(props);
 
     this.state = {
-      retrieveError: null,
+      isRetrieving: true,
       envEntryPoint: '',
       envIssuer: '',
       envCert: '',
@@ -51,9 +48,8 @@ class SamlSecurityManagement extends React.Component {
     }
     catch (err) {
       toastError(err);
-      this.setState({ retrieveError: err.message });
-      logger.error(err);
     }
+    this.setState({ isRetrieving: false });
   }
 
   async onClickSubmit() {
@@ -65,7 +61,6 @@ class SamlSecurityManagement extends React.Component {
     }
     catch (err) {
       toastError(err);
-      logger.error(err);
     }
   }
 
@@ -73,6 +68,9 @@ class SamlSecurityManagement extends React.Component {
     const { t, adminGeneralSecurityContainer, adminSamlSecurityContainer } = this.props;
     const { useOnlyEnvVars } = adminSamlSecurityContainer.state;
 
+    if (this.state.isRetrieving) {
+      return null;
+    }
     return (
       <React.Fragment>
 
@@ -80,12 +78,6 @@ class SamlSecurityManagement extends React.Component {
           {t('security_setting.SAML.name')} {t('security_setting.configuration')}
         </h2>
 
-        {this.state.retrieveError != null && (
-          <div className="alert alert-danger">
-            <p>{t('Error occurred')} : {this.state.err}</p>
-          </div>
-        )}
-
         {useOnlyEnvVars && (
           <p
             className="alert alert-info"
@@ -219,7 +211,7 @@ class SamlSecurityManagement extends React.Component {
                       rows="5"
                       name="samlCert"
                       readOnly={useOnlyEnvVars}
-                      value={adminSamlSecurityContainer.state.samlCert}
+                      defaultValue={adminSamlSecurityContainer.state.samlCert}
                       onChange={e => adminSamlSecurityContainer.changeSamlCert(e.target.value)}
                     />
                     <p className="help-block">
@@ -467,7 +459,9 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
         <div className="row my-3">
           <div className="col-xs-offset-3 col-xs-5">
-            <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{t('Update')}</button>
+            <button type="button" className="btn btn-primary" disabled={adminSamlSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
+              {t('Update')}
+            </button>
           </div>
         </div>
 

src/client/js/services/AdminSamlSecurityContainer.js

@@ -1,9 +1,13 @@
 import { Container } from 'unstated';
 
+import loggerFactory from '@alias/logger';
+
 import { pathUtils } from 'growi-commons';
 import urljoin from 'url-join';
 import removeNullPropertyFromObject from '../../../lib/util/removeNullPropertyFromObject';
 
+const logger = loggerFactory('growi:security:AdminSamlSecurityContainer');
+
 /**
  * Service container for admin security page (SecuritySamlSetting.jsx)
  * @extends {Container} unstated Container
@@ -16,6 +20,7 @@ export default class AdminSamlSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      retrieveError: null,
       useOnlyEnvVars: false,
       callbackUrl: urljoin(pathUtils.removeTrailingSlash(appContainer.config.crowi.url), '/passport/saml/callback'),
       missingMandatoryConfigKeys: [],
@@ -37,22 +42,28 @@ export default class AdminSamlSecurityContainer extends Container {
    * retrieve security data
    */
   async retrieveSecurityData() {
-    const response = await this.appContainer.apiv3.get('/security-setting/');
-    const { samlAuth } = response.data.securityParams;
-    this.setState({
-      missingMandatoryConfigKeys: samlAuth.missingMandatoryConfigKeys,
-      samlEntryPoint: samlAuth.samlEntryPoint,
-      samlIssuer: samlAuth.samlIssuer,
-      samlCert: samlAuth.samlCert,
-      samlAttrMapId: samlAuth.samlAttrMapId,
-      samlAttrMapUserName: samlAuth.samlAttrMapUserName,
-      samlAttrMapMail: samlAuth.samlAttrMapMail,
-      samlAttrMapFirstName: samlAuth.samlAttrMapFirstName,
-      samlAttrMapLastName: samlAuth.samlAttrMapLastName,
-      isSameUsernameTreatedAsIdenticalUser: samlAuth.isSameUsernameTreatedAsIdenticalUser,
-      isSameEmailTreatedAsIdenticalUser: samlAuth.isSameEmailTreatedAsIdenticalUser,
-    });
-    return samlAuth;
+    try {
+      const response = await this.appContainer.apiv3.get('/security-setting/');
+      const { samlAuth } = response.data.securityParams;
+      this.setState({
+        missingMandatoryConfigKeys: samlAuth.missingMandatoryConfigKeys,
+        samlEntryPoint: samlAuth.samlEntryPoint,
+        samlIssuer: samlAuth.samlIssuer,
+        samlCert: samlAuth.samlCert,
+        samlAttrMapId: samlAuth.samlAttrMapId,
+        samlAttrMapUserName: samlAuth.samlAttrMapUserName,
+        samlAttrMapMail: samlAuth.samlAttrMapMail,
+        samlAttrMapFirstName: samlAuth.samlAttrMapFirstName,
+        samlAttrMapLastName: samlAuth.samlAttrMapLastName,
+        isSameUsernameTreatedAsIdenticalUser: samlAuth.isSameUsernameTreatedAsIdenticalUser,
+        isSameEmailTreatedAsIdenticalUser: samlAuth.isSameEmailTreatedAsIdenticalUser,
+      });
+    }
+    catch (err) {
+      this.setState({ retrieveError: err });
+      logger.error(err);
+      throw new Error('Failed to fetch data');
+    }
   }
 
   /**