ambiser
/
strapi-plugin-config-sync
mirror of https://github.com/boazpoolman/strapi-plugin-config-sync
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update frontend

pull/1/head
Boaz Poolman 2021-03-24 18:41:03 +01:00
parent 8ca6317b74
commit 3986ade2c8
6 changed files with 37 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/src/components/ActionButtons/index.js
View File

@ -23,8 +23,8 @@ const ActionButtons = ({ diff }) => {
return ( return (
<ActionButtonsStyling> <ActionButtonsStyling>
<Button disabled={isEmpty(diff)} color="primary" label="Import" onClick={() => openModal('import')} /> <Button disabled={isEmpty(diff.diff)} color="primary" label="Import" onClick={() => openModal('import')} />
<Button disabled={isEmpty(diff)} color="primary" label="Export" onClick={() => openModal('export')} /> <Button disabled={isEmpty(diff.diff)} color="primary" label="Export" onClick={() => openModal('export')} />
<ConfirmModal <ConfirmModal
isOpen={modalIsOpen} isOpen={modalIsOpen}
onClose={closeModal} onClose={closeModal}

30
admin/src/components/ConfigList/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Table } from '@buffetjs/core'; import { Table } from '@buffetjs/core';
import { isEmpty } from 'lodash';
import ConfigDiff from '../ConfigDiff'; import ConfigDiff from '../ConfigDiff';
const headers = [ const headers = [
@ -8,8 +9,8 @@ const headers = [
value: 'config_name', value: 'config_name',
}, },
{ {
name: 'Database table', name: 'Config type',
value: 'table_name', value: 'config_type',
}, },
{ {
name: 'Change', name: 'Change',
@ -17,7 +18,7 @@ const headers = [
}, },
]; ];
const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => { const ConfigList = ({ diff, isLoading }) => {
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
const [originalConfig, setOriginalConfig] = useState({}); const [originalConfig, setOriginalConfig] = useState({});
const [newConfig, setNewConfig] = useState({}); const [newConfig, setNewConfig] = useState({});
@ -25,15 +26,22 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
const [rows, setRows] = useState([]); const [rows, setRows] = useState([]);
useEffect(() => { useEffect(() => {
if (isEmpty(diff)) {
return;
}
let formattedRows = []; let formattedRows = [];
Object.keys(diff).map((config) => { Object.keys(diff.fileConfig).map((configName) => {
// @TODO implement different config types, roles/permissions e.g. const type = configName.split('.')[0]; // Grab the first part of the filename.
const name = configName.split(/\.(.+)/)[1].split('.')[0] // Grab the rest of the filename minus the file extension.
formattedRows.push({ formattedRows.push({
config_name: config, config_name: name,
table_name: 'core_store', config_type: type,
change_type: '' change_type: ''
}); });
}); });
setRows(formattedRows); setRows(formattedRows);
}, [diff]); }, [diff]);
@ -56,10 +64,10 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
/> />
<Table <Table
headers={headers} headers={headers}
onClickRow={(e, data) => { onClickRow={(e, { config_type, config_name }) => {
setOriginalConfig(fileConfig.get(data.config_name)); setOriginalConfig(diff.fileConfig[`${config_type}.${config_name}`]);
setNewConfig(databaseConfig.get(data.config_name)); setNewConfig(diff.databaseConfig[`${config_type}.${config_name}`]);
setConfigName(data.config_name); setConfigName(`${config_type}.${config_name}`);
setOpenModal(true); setOpenModal(true);
}} }}
rows={!isLoading ? rows : []} rows={!isLoading ? rows : []}

14
admin/src/containers/ConfigPage/index.js
View File

@ -2,27 +2,23 @@ import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { Map } from 'immutable'; import { Map } from 'immutable';
import { getAllConfig } from '../../state/actions/Config'; import { getAllConfigDiff } from '../../state/actions/Config';
import ConfigList from '../../components/ConfigList'; import ConfigList from '../../components/ConfigList';
import ActionButtons from '../../components/ActionButtons'; import ActionButtons from '../../components/ActionButtons';
import difference from '../../helpers/getObjectDiff';
const ConfigPage = () => { const ConfigPage = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map()); const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map());
const fileConfig = useSelector((state) => state.getIn(['config', 'fileConfig']), Map()); const configDiff = useSelector((state) => state.getIn(['config', 'configDiff']), Map());
const databaseConfig = useSelector((state) => state.getIn(['config', 'databaseConfig']), Map());
useEffect(() => { useEffect(() => {
dispatch(getAllConfig()); dispatch(getAllConfigDiff());
}, []); }, []);
const diff = difference(fileConfig.toJS(), databaseConfig.toJS());
return ( return (
<div> <div>
<ActionButtons diff={diff} /> <ActionButtons diff={configDiff.toJS()} />
<ConfigList fileConfig={fileConfig} databaseConfig={databaseConfig} isLoading={isLoading} diff={diff} /> <ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
</div> </div>
); );
} }

22
admin/src/helpers/getObjectDiff.js
View File

@ -1,22 +0,0 @@
import { transform, isEqual, isArray, isObject } from 'lodash';
/**
* Find difference between two objects
* @param {object} origObj - Source object to compare newObj against
* @param {object} newObj - New object with potential changes
* @return {object} differences
*/
const difference = (origObj, newObj) => {
function changes(newObj, origObj) {
let arrayIndexCounter = 0
return transform(newObj, function (result, value, key) {
if (!isEqual(value, origObj[key])) {
let resultKey = isArray(origObj) ? arrayIndexCounter++ : key
result[resultKey] = (isObject(value) && isObject(origObj[key])) ? changes(value, origObj[key]) : value
}
})
}
return changes(newObj, origObj)
}
export default difference;

25
admin/src/state/actions/Config.js
View File

@ -7,14 +7,12 @@
import { request } from 'strapi-helper-plugin'; import { request } from 'strapi-helper-plugin';
import { Map } from 'immutable'; import { Map } from 'immutable';
export function getAllConfig() { export function getAllConfigDiff() {
return async function(dispatch) { return async function(dispatch) {
dispatch(setLoadingState(true)); dispatch(setLoadingState(true));
try { try {
const databaseConfig = await request('/config-sync/all/from-database', { method: 'GET' }); const configDiff = await request('/config-sync/diff', { method: 'GET' });
const fileConfig = await request('/config-sync/all/from-files', { method: 'GET' }); dispatch(setConfigDiffInState(configDiff));
dispatch(setFileConfigInState(fileConfig));
dispatch(setDatabaseConfigInState(databaseConfig));
dispatch(setLoadingState(false)); dispatch(setLoadingState(false));
} catch(err) { } catch(err) {
strapi.notification.error('notification.error'); strapi.notification.error('notification.error');
@ -23,18 +21,10 @@ export function getAllConfig() {
} }
} }
export const SET_DATABASE_CONFIG_IN_STATE = 'SET_DATABASE_CONFIG_IN_STATE'; export const SET_CONFIG_DIFF_IN_STATE = 'SET_CONFIG_DIFF_IN_STATE';
export function setDatabaseConfigInState(config) { export function setConfigDiffInState(config) {
return { return {
type: SET_DATABASE_CONFIG_IN_STATE, type: SET_CONFIG_DIFF_IN_STATE,
config,
};
}
export const SET_FILE_CONFIG_IN_STATE = 'SET_FILE_CONFIG_IN_STATE';
export function setFileConfigInState(config) {
return {
type: SET_FILE_CONFIG_IN_STATE,
config, config,
}; };
} }
@ -44,8 +34,7 @@ export function exportAllConfig() {
dispatch(setLoadingState(true)); dispatch(setLoadingState(true));
try { try {
const { message } = await request('/config-sync/export', { method: 'GET' }); const { message } = await request('/config-sync/export', { method: 'GET' });
dispatch(setFileConfigInState(Map({}))); dispatch(setConfigDiffInState(Map({})));
dispatch(setDatabaseConfigInState(Map({})));
strapi.notification.success(message); strapi.notification.success(message);
dispatch(setLoadingState(false)); dispatch(setLoadingState(false));

12
admin/src/state/reducers/Config/index.js
View File

@ -5,22 +5,18 @@
*/ */
import { fromJS, Map } from 'immutable'; import { fromJS, Map } from 'immutable';
import { SET_DATABASE_CONFIG_IN_STATE, SET_FILE_CONFIG_IN_STATE, SET_LOADING_STATE } from '../../actions/Config'; import { SET_CONFIG_DIFF_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
const initialState = fromJS({ const initialState = fromJS({
databaseConfig: Map({}), configDiff: Map({}),
fileConfig: Map({}),
isLoading: false, isLoading: false,
}); });
export default function configReducer(state = initialState, action) { export default function configReducer(state = initialState, action) {
switch (action.type) { switch (action.type) {
case SET_DATABASE_CONFIG_IN_STATE: case SET_CONFIG_DIFF_IN_STATE:
return state return state
.update('databaseConfig', () => fromJS(action.config)) .update('configDiff', () => fromJS(action.config))
case SET_FILE_CONFIG_IN_STATE:
return state
.update('fileConfig', () => fromJS(action.config))
case SET_LOADING_STATE: case SET_LOADING_STATE:
return state return state
.update('isLoading', () => fromJS(action.value)) .update('isLoading', () => fromJS(action.value))