Merge branch 'master' into support/use-jotai

apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -16,8 +16,8 @@ import GrowiArchiveSection from './GrowiArchiveSection';
 const logger = loggerFactory('growi:importer');
 
 const ImportDataPageContents = ({ t, adminImportContainer }) => {
-  const { register: registerEsa, reset: resetEsa } = useForm();
-  const { register: registerQiita, reset: resetQiita } = useForm();
+  const { register: registerEsa, reset: resetEsa, handleSubmit: handleSubmitEsa } = useForm();
+  const { register: registerQiita, reset: resetQiita, handleSubmit: handleSubmitQiita } = useForm();
 
   useEffect(() => {
     resetEsa({
@@ -41,6 +41,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
         className="mt-5"
         id="importerSettingFormEsa"
         role="form"
+        onSubmit={handleSubmitEsa(adminImportContainer.esaHandleSubmitUpdate)}
       >
         <fieldset>
           <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'esa.io' })}</h2>
@@ -118,7 +119,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                 onClick={adminImportContainer.esaHandleSubmit}
                 value={t('importer_management.import')}
               />
-              <input type="button" className="btn btn-secondary" onClick={adminImportContainer.esaHandleSubmitUpdate} value={t('Update')} />
+              <input type="submit" className="btn btn-secondary" value={t('Update')} />
               <span className="offset-0 offset-sm-1">
                 <input
                   id="importFromEsa"
@@ -129,7 +130,6 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                   value={t('importer_management.esa_settings.test_connection')}
                 />
               </span>
-
             </div>
           </div>
         </fieldset>
@@ -139,6 +139,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
         className="mt-5"
         id="importerSettingFormQiita"
         role="form"
+        onSubmit={handleSubmitQiita(adminImportContainer.qiitaHandleSubmitUpdate)}
       >
         <fieldset>
           <h2 className="admin-setting-header">{t('importer_management.import_from', { from: 'Qiita:Team' })}</h2>
@@ -219,7 +220,7 @@ const ImportDataPageContents = ({ t, adminImportContainer }) => {
                 onClick={adminImportContainer.qiitaHandleSubmit}
                 value={t('importer_management.import')}
               />
-              <input type="button" className="btn btn-secondary" onClick={adminImportContainer.qiitaHandleSubmitUpdate} value={t('Update')} />
+              <input type="submit" className="btn btn-secondary" value={t('Update')} />
               <span className="offset-0 offset-sm-1">
                 <input
                   name="Qiita"

apps/app/src/client/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -135,7 +135,10 @@ const SlackConfiguration = (props) => {
           )
         }
 
-        <AdminUpdateButtonRow disabled={retrieveError != null} />
+        <AdminUpdateButtonRow
+          disabled={retrieveError != null}
+          onClick={handleSubmit(onClickSubmit)}
+        />
 
         <hr />
 
@@ -149,7 +152,7 @@ const SlackConfiguration = (props) => {
             {t('notification_settings.how_to.workspace')}
             <ol>
               {/* eslint-disable-next-line react/no-danger */}
-              <li dangerouslySetInnerHTML={{ __html:  t('notification_settings.how_to.workspace_desc1') }} />
+              <li dangerouslySetInnerHTML={{ __html: t('notification_settings.how_to.workspace_desc1') }} />
               <li>{t('notification_settings.how_to.workspace_desc2')}</li>
               <li>{t('notification_settings.how_to.workspace_desc3')}</li>
             </ol>

apps/app/src/client/components/Admin/MarkdownSetting/XssForm.jsx

@@ -37,8 +37,8 @@ const XssForm = (props) => {
 
   const onClickSubmit = useCallback(async(data) => {
     try {
-      await adminMarkDownContainer.changeTagWhitelist(data.tagWhitelist ?? '');
-      await adminMarkDownContainer.changeAttrWhitelist(data.attrWhitelist ?? '');
+      await adminMarkDownContainer.setState({ tagWhitelist: data.tagWhitelist ?? '' });
+      await adminMarkDownContainer.setState({ attrWhitelist: data.attrWhitelist ?? '' });
       await adminMarkDownContainer.updateXssSetting();
       toastSuccess(t('toaster.update_successed', { target: t('markdown_settings.xss_header'), ns: 'commons' }));
     }
@@ -148,7 +148,10 @@ const XssForm = (props) => {
             {isEnabledXss && xssOptions()}
           </div>
         </fieldset>
-        <AdminUpdateButtonRow disabled={retrieveError != null} />
+        <AdminUpdateButtonRow
+          disabled={retrieveError != null}
+          onClick={handleSubmit(onClickSubmit)}
+        />
       </React.Fragment>
     </form>
   );

apps/app/src/client/services/AdminImportContainer.js

@@ -73,11 +73,7 @@ export default class AdminImportContainer extends Container {
 
   async esaHandleSubmit() {
     try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await apiPost('/admin/import/esa', params);
+      await apiPost('/admin/import/esa');
       toastSuccess('Import posts from esa success.');
     }
     catch (err) {
@@ -88,11 +84,7 @@ export default class AdminImportContainer extends Container {
 
   async esaHandleSubmitTest() {
     try {
-      const params = {
-        'importer:esa:team_name': this.state.esaTeamName,
-        'importer:esa:access_token': this.state.esaAccessToken,
-      };
-      await apiPost('/admin/import/testEsaAPI', params);
+      await apiPost('/admin/import/testEsaAPI');
       toastSuccess('Test connection to esa success.');
     }
     catch (error) {
@@ -100,10 +92,10 @@ export default class AdminImportContainer extends Container {
     }
   }
 
-  async esaHandleSubmitUpdate() {
+  async esaHandleSubmitUpdate(formData) {
     const params = {
-      'importer:esa:team_name': this.state.esaTeamName,
-      'importer:esa:access_token': this.state.esaAccessToken,
+      'importer:esa:team_name': formData.esaTeamName,
+      'importer:esa:access_token': formData.esaAccessToken,
     };
     try {
       await apiPost('/admin/settings/importerEsa', params);
@@ -117,11 +109,7 @@ export default class AdminImportContainer extends Container {
 
   async qiitaHandleSubmit() {
     try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await apiPost('/admin/import/qiita', params);
+      await apiPost('/admin/import/qiita');
       toastSuccess('Import posts from qiita:team success.');
     }
     catch (err) {
@@ -133,11 +121,7 @@ export default class AdminImportContainer extends Container {
 
   async qiitaHandleSubmitTest() {
     try {
-      const params = {
-        'importer:qiita:team_name': this.state.qiitaTeamName,
-        'importer:qiita:access_token': this.state.qiitaAccessToken,
-      };
-      await apiPost('/admin/import/testQiitaAPI', params);
+      await apiPost('/admin/import/testQiitaAPI');
       toastSuccess('Test connection to qiita:team success.');
     }
     catch (err) {
@@ -146,10 +130,10 @@ export default class AdminImportContainer extends Container {
     }
   }
 
-  async qiitaHandleSubmitUpdate() {
+  async qiitaHandleSubmitUpdate(formData) {
     const params = {
-      'importer:qiita:team_name': this.state.qiitaTeamName,
-      'importer:qiita:access_token': this.state.qiitaAccessToken,
+      'importer:qiita:team_name': formData.qiitaTeamName,
+      'importer:qiita:access_token': formData.qiitaAccessToken,
     };
     try {
       await apiPost('/admin/settings/importerQiita', params);

apps/app/src/client/services/AdminMarkDownContainer.js

@@ -101,8 +101,8 @@ export default class AdminMarkDownContainer extends Container {
    * Update Xss Setting
    */
   async updateXssSetting() {
-    let { tagWhitelist } = this.state;
-    const { attrWhitelist } = this.state;
+    let { tagWhitelist = '' } = this.state;
+    const { attrWhitelist = '{}' } = this.state;
 
     tagWhitelist = Array.isArray(tagWhitelist) ? tagWhitelist : tagWhitelist.split(',');
 
@@ -111,14 +111,14 @@ export default class AdminMarkDownContainer extends Container {
       JSON.parse(attrWhitelist);
     }
     catch (err) {
-      throw Error(err);
+      throw Error(`attrWhitelist parsing error occured: ${err.message}`);
     }
 
     await apiv3Put('/markdown-setting/xss', {
       isEnabledXss: this.state.isEnabledXss,
       xssOption: this.state.xssOption,
       tagWhitelist,
-      attrWhitelist: attrWhitelist ?? '{}',
+      attrWhitelist,
     });
   }
 

apps/app/src/server/routes/index.js

@@ -1,5 +1,4 @@
 import { SCOPE } from '@growi/core/dist/interfaces';
-import csrf from 'csurf';
 import express from 'express';
 
 import { middlewareFactory as rateLimiterFactory } from '~/features/rate-limiter';
@@ -26,8 +25,6 @@ import * as userActivation from './user-activation';
 const multer = require('multer');
 const autoReap = require('multer-autoreap');
 
-const csrfProtection = csrf({ cookie: false });
-
 autoReap.options.reapOnError = true; // continue reaping the file even if an error occurs
 
 /** @param {import('~/server/crowi').default} crowi Crowi instance */
@@ -105,12 +102,12 @@ module.exports = function(crowi, app) {
   app.post('/_api/login/testLdap'    ,  accessTokenParser([SCOPE.WRITE.USER_SETTINGS.EXTERNAL_ACCOUNT]), loginRequiredStrictly , loginFormValidator.loginRules() , loginFormValidator.loginValidation , loginPassport.testLdapCredentials);
 
   // importer management for admin
-  app.post('/_api/admin/settings/importerEsa'   , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.importer.api.validators.importer.esa(),admin.api.importerSettingEsa);
-  app.post('/_api/admin/settings/importerQiita' , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.importer.api.validators.importer.qiita(), admin.api.importerSettingQiita);
-  app.post('/_api/admin/import/esa'             , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.api.importDataFromEsa);
-  app.post('/_api/admin/import/testEsaAPI'      , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.api.testEsaAPI);
-  app.post('/_api/admin/import/qiita'           , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.api.importDataFromQiita);
-  app.post('/_api/admin/import/testQiitaAPI'    , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , csrfProtection, addActivity, admin.api.testQiitaAPI);
+  app.post('/_api/admin/settings/importerEsa'   , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.importer.api.validators.importer.esa(),admin.api.importerSettingEsa);
+  app.post('/_api/admin/settings/importerQiita' , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.importer.api.validators.importer.qiita(), admin.api.importerSettingQiita);
+  app.post('/_api/admin/import/esa'             , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.api.importDataFromEsa);
+  app.post('/_api/admin/import/testEsaAPI'      , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.api.testEsaAPI);
+  app.post('/_api/admin/import/qiita'           , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.api.importDataFromQiita);
+  app.post('/_api/admin/import/testQiitaAPI'    , accessTokenParser([SCOPE.WRITE.ADMIN.IMPORT_DATA]), loginRequiredStrictly , adminRequired , addActivity, admin.api.testQiitaAPI);
 
   // brand logo
   app.use('/attachment', attachment.getBrandLogoRouterFactory(crowi));

apps/app/src/states/global/global.ts

@@ -1,15 +1,6 @@
 import type { ColorScheme, IUserHasId } from '@growi/core';
 import { atom, useAtomValue } from 'jotai';
 
-/**
- * CSRF Token atom
- */
-const csrfTokenAtom = atom<string>('');
-/**
- * CSRF Token atom setter
- */
-export const useCsrfToken = () => useAtomValue(csrfTokenAtom);
-
 /**
  * App current pathname atom
  */