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 (
<ActionButtonsStyling>
<Button disabled={isEmpty(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="Import" onClick={() => openModal('import')} />
<Button disabled={isEmpty(diff.diff)} color="primary" label="Export" onClick={() => openModal('export')} />
<ConfirmModal
isOpen={modalIsOpen}
onClose={closeModal}

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

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Table } from '@buffetjs/core';
import { isEmpty } from 'lodash';
import ConfigDiff from '../ConfigDiff';
const headers = [
@ -8,8 +9,8 @@ const headers = [
value: 'config_name',
},
{
name: 'Database table',
value: 'table_name',
name: 'Config type',
value: 'config_type',
},
{
name: 'Change',
@ -17,7 +18,7 @@ const headers = [
},
];
const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
const ConfigList = ({ diff, isLoading }) => {
const [openModal, setOpenModal] = useState(false);
const [originalConfig, setOriginalConfig] = useState({});
const [newConfig, setNewConfig] = useState({});
@ -25,15 +26,22 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
const [rows, setRows] = useState([]);
useEffect(() => {
if (isEmpty(diff)) {
return;
}
let formattedRows = [];
Object.keys(diff).map((config) => {
// @TODO implement different config types, roles/permissions e.g.
Object.keys(diff.fileConfig).map((configName) => {
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({
config_name: config,
table_name: 'core_store',
config_name: name,
config_type: type,
change_type: ''
});
});
setRows(formattedRows);
}, [diff]);
@ -56,10 +64,10 @@ const ConfigList = ({ fileConfig, databaseConfig, diff, isLoading }) => {
/>
<Table
headers={headers}
onClickRow={(e, data) => {
setOriginalConfig(fileConfig.get(data.config_name));
setNewConfig(databaseConfig.get(data.config_name));
setConfigName(data.config_name);
onClickRow={(e, { config_type, config_name }) => {
setOriginalConfig(diff.fileConfig[`${config_type}.${config_name}`]);
setNewConfig(diff.databaseConfig[`${config_type}.${config_name}`]);
setConfigName(`${config_type}.${config_name}`);
setOpenModal(true);
}}
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 { Map } from 'immutable';
import { getAllConfig } from '../../state/actions/Config';
import { getAllConfigDiff } from '../../state/actions/Config';
import ConfigList from '../../components/ConfigList';
import ActionButtons from '../../components/ActionButtons';
import difference from '../../helpers/getObjectDiff';
const ConfigPage = () => {
const dispatch = useDispatch();
const isLoading = useSelector((state) => state.getIn(['config', 'isLoading']), Map());
const fileConfig = useSelector((state) => state.getIn(['config', 'fileConfig']), Map());
const databaseConfig = useSelector((state) => state.getIn(['config', 'databaseConfig']), Map());
const configDiff = useSelector((state) => state.getIn(['config', 'configDiff']), Map());
useEffect(() => {
dispatch(getAllConfig());
dispatch(getAllConfigDiff());
}, []);
const diff = difference(fileConfig.toJS(), databaseConfig.toJS());
return (
<div>
<ActionButtons diff={diff} />
<ConfigList fileConfig={fileConfig} databaseConfig={databaseConfig} isLoading={isLoading} diff={diff} />
<ActionButtons diff={configDiff.toJS()} />
<ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
</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 { Map } from 'immutable';
export function getAllConfig() {
export function getAllConfigDiff() {
return async function(dispatch) {
dispatch(setLoadingState(true));
try {
const databaseConfig = await request('/config-sync/all/from-database', { method: 'GET' });
const fileConfig = await request('/config-sync/all/from-files', { method: 'GET' });
dispatch(setFileConfigInState(fileConfig));
dispatch(setDatabaseConfigInState(databaseConfig));
const configDiff = await request('/config-sync/diff', { method: 'GET' });
dispatch(setConfigDiffInState(configDiff));
dispatch(setLoadingState(false));
} catch(err) {
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 function setDatabaseConfigInState(config) {
export const SET_CONFIG_DIFF_IN_STATE = 'SET_CONFIG_DIFF_IN_STATE';
export function setConfigDiffInState(config) {
return {
type: SET_DATABASE_CONFIG_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,
type: SET_CONFIG_DIFF_IN_STATE,
config,
};
}
@ -44,8 +34,7 @@ export function exportAllConfig() {
dispatch(setLoadingState(true));
try {
const { message } = await request('/config-sync/export', { method: 'GET' });
dispatch(setFileConfigInState(Map({})));
dispatch(setDatabaseConfigInState(Map({})));
dispatch(setConfigDiffInState(Map({})));
strapi.notification.success(message);
dispatch(setLoadingState(false));

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

@ -5,22 +5,18 @@
*/
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({
databaseConfig: Map({}),
fileConfig: Map({}),
configDiff: Map({}),
isLoading: false,
});
export default function configReducer(state = initialState, action) {
switch (action.type) {
case SET_DATABASE_CONFIG_IN_STATE:
case SET_CONFIG_DIFF_IN_STATE:
return state
.update('databaseConfig', () => fromJS(action.config))
case SET_FILE_CONFIG_IN_STATE:
return state
.update('fileConfig', () => fromJS(action.config))
.update('configDiff', () => fromJS(action.config))
case SET_LOADING_STATE:
return state
.update('isLoading', () => fromJS(action.value))