fix: Bugs in admin

admin/src/components/ActionButtons/index.js

@@ -4,12 +4,14 @@ import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import { Button } from '@strapi/design-system/Button';
 import { Map } from 'immutable';
+import { useNotification } from '@strapi/helper-plugin';
 
 import ConfirmModal from '../ConfirmModal';
 import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
 
 const ActionButtons = () => {
   const dispatch = useDispatch();
+  const toggleNotification = useNotification();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [actionType, setActionType] = useState('');
   const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
@@ -35,7 +37,7 @@ const ActionButtons = () => {
         isOpen={modalIsOpen}
         onClose={closeModal}
         type={actionType}
-        onSubmit={() => actionType === 'import' ? dispatch(importAllConfig(partialDiff)) : dispatch(exportAllConfig(partialDiff))}
+        onSubmit={() => actionType === 'import' ? dispatch(importAllConfig(partialDiff, toggleNotification)) : dispatch(exportAllConfig(partialDiff, toggleNotification))}
       />
     </ActionButtonsStyling>
   );

admin/src/components/ConfigList/index.js

@@ -47,11 +47,12 @@ const ConfigList = ({ diff, isLoading }) => {
     }
 
     const formattedRows = [];
+    const newCheckedItems = [];
     Object.keys(diff.diff).map((name) => {
       const type = name.split('.')[0]; // Grab the first part of the filename.
       const formattedName = name.split(/\.(.+)/)[1]; // Grab the rest of the filename minus the file extension.
 
-      setCheckedItems(checkedItems.concat(true));
+      newCheckedItems.push(true);
 
       formattedRows.push({
         configName: formattedName,
@@ -65,6 +66,7 @@ const ConfigList = ({ diff, isLoading }) => {
         },
       });
     });
+    setCheckedItems(newCheckedItems);
 
     setRows(formattedRows);
   }, [diff]);

admin/src/containers/App/index.js

@@ -7,19 +7,17 @@
 
 import React from 'react';
 import { Provider } from 'react-redux';
-import { CheckPagePermissions, useNotification } from '@strapi/helper-plugin';
+import { CheckPagePermissions } from '@strapi/helper-plugin';
 
 import pluginPermissions from '../../permissions';
 import Header from '../../components/Header';
-import store from "../../helpers/configureStore";
+import { store } from "../../helpers/configureStore";
 import ConfigPage from '../ConfigPage';
 
 const App = () => {
-  const toggleNotification = useNotification();
-
   return (
     <CheckPagePermissions permissions={pluginPermissions.settings}>
-      <Provider store={store(toggleNotification)}>
+      <Provider store={store}>
         <Header />
         <ConfigPage />
       </Provider>

admin/src/containers/ConfigPage/index.js

@@ -2,18 +2,20 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Map } from 'immutable';
 import { Box } from '@strapi/design-system/Box';
+import { useNotification } from '@strapi/helper-plugin';
 
 import { getAllConfigDiff } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
 import ActionButtons from '../../components/ActionButtons';
 
 const ConfigPage = () => {
+  const toggleNotification = useNotification();
   const dispatch = useDispatch();
   const isLoading = useSelector((state) => state.getIn(['config', 'isLoading'], Map({})));
   const configDiff = useSelector((state) => state.getIn(['config', 'configDiff'], Map({})));
 
   useEffect(() => {
-    dispatch(getAllConfigDiff());
+    dispatch(getAllConfigDiff(toggleNotification));
   }, []);
 
   return (

admin/src/helpers/configureStore.js

@@ -5,12 +5,12 @@ import { Map } from 'immutable';
 import rootReducer from '../state/reducers';
 import { __DEBUG__ } from '../config/constants';
 
-const configureStore = (toggleNotification) => {
+const configureStore = () => {
   const initialStoreState = Map();
 
   const enhancers = [];
   const middlewares = [
-    thunkMiddleware.withExtraArgument(toggleNotification),
+    thunkMiddleware,
   ];
 
   let devtools;
@@ -43,3 +43,5 @@ const configureStore = (toggleNotification) => {
 };
 
 export default configureStore;
+
+export const store = configureStore();

admin/src/state/actions/Config.js

@@ -5,13 +5,13 @@
  */
 
 import { request } from '@strapi/helper-plugin';
-import { Map } from 'immutable';
 
-export function getAllConfigDiff() {
+export function getAllConfigDiff(toggleNotification) {
-  return async function(dispatch, getState, toggleNotification) {
+  return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
       const configDiff = await request('/config-sync/diff', { method: 'GET' });
+      dispatch(setConfigPartialDiffInState([]));
       dispatch(setConfigDiffInState(configDiff));
       dispatch(setLoadingState(false));
     } catch (err) {
@@ -37,8 +37,8 @@ export function setConfigPartialDiffInState(config) {
   };
 }
 
-export function exportAllConfig(partialDiff) {
+export function exportAllConfig(partialDiff, toggleNotification) {
-  return async function(dispatch, getState, toggleNotification) {
+  return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config-sync/export', {
@@ -46,6 +46,7 @@ export function exportAllConfig(partialDiff) {
         body: partialDiff,
       });
       toggleNotification({ type: 'success', message });
+      dispatch(getAllConfigDiff(toggleNotification));
       dispatch(setLoadingState(false));
     } catch (err) {
       toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
@@ -54,8 +55,8 @@ export function exportAllConfig(partialDiff) {
   };
 }
 
-export function importAllConfig(partialDiff) {
+export function importAllConfig(partialDiff, toggleNotification) {
-  return async function(dispatch, getState, toggleNotification) {
+  return async function(dispatch) {
     dispatch(setLoadingState(true));
     try {
       const { message } = await request('/config-sync/import', {
@@ -63,6 +64,7 @@ export function importAllConfig(partialDiff) {
         body: partialDiff,
       });
       toggleNotification({ type: 'success', message });
+      dispatch(getAllConfigDiff(toggleNotification));
       dispatch(setLoadingState(false));
     } catch (err) {
       toggleNotification({ type: 'warning', message: { id: 'notification.error' } });