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

feat: Partial export/import in admin

pull/28/head
Boaz Poolman 2021-11-20 19:06:01 +01:00
parent 187a090866
commit 17c68c2c36
8 changed files with 111 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,18 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { isEmpty } from 'lodash';
import { Button } from '@strapi/design-system/Button';
import { Map } from 'immutable';
import ConfirmModal from '../ConfirmModal';
import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
const ActionButtons = ({ diff }) => {
const ActionButtons = () => {
const dispatch = useDispatch();
const [modalIsOpen, setModalIsOpen] = useState(false);
const [actionType, setActionType] = useState('');
const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
const closeModal = () => {
setActionType('');
@ -24,16 +26,16 @@ const ActionButtons = ({ diff }) => {
return (
<ActionButtonsStyling>
<Button disabled={isEmpty(diff.diff)} onClick={() => openModal('import')}>Import</Button>
<Button disabled={isEmpty(diff.diff)} onClick={() => openModal('export')}>Export</Button>
{!isEmpty(diff.diff) && (
<h4 style={{ display: 'inline' }}>{Object.keys(diff.diff).length} {Object.keys(diff.diff).length === 1 ? "config change" : "config changes"}</h4>
<Button disabled={isEmpty(partialDiff)} onClick={() => openModal('import')}>Import</Button>
<Button disabled={isEmpty(partialDiff)} onClick={() => openModal('export')}>Export</Button>
{!isEmpty(partialDiff) && (
<h4 style={{ display: 'inline' }}>{Object.keys(partialDiff).length} {Object.keys(partialDiff).length === 1 ? "config change" : "config changes"}</h4>
)}
<ConfirmModal
isOpen={modalIsOpen}
onClose={closeModal}
type={actionType}
onSubmit={() => actionType === 'import' ? dispatch(importAllConfig()) : dispatch(exportAllConfig())}
onSubmit={() => actionType === 'import' ? dispatch(importAllConfig(partialDiff)) : dispatch(exportAllConfig(partialDiff))}
/>
</ActionButtonsStyling>
);

16
admin/src/components/ConfigList/ConfigListRow/index.js
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Tr, Td } from '@strapi/design-system/Table';
import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
const CustomRow = ({ row }) => {
const CustomRow = ({ row, checked, updateValue }) => {
const { configName, configType, state, onClick } = row;
const stateStyle = (stateStr) => {
@ -34,9 +35,20 @@ const CustomRow = ({ row }) => {
return (
<Tr
onClick={() => onClick(configType, configName)}
onClick={(e) => {
if (e.target.type !== 'checkbox') {
onClick(configType, configName);
}
}}
style={{ cursor: 'pointer' }}
>
<Td>
<BaseCheckbox
aria-label={`Select ${configName}`}
value={checked}
onValueChange={updateValue}
/>
</Td>
<Td>
<p>{configName}</p>
</Td>

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

@ -1,13 +1,16 @@
import React, { useState, useEffect } from 'react';
import { isEmpty } from 'lodash';
import { useDispatch } from 'react-redux';
import { Table, Thead, Tbody, Tr, Th } from '@strapi/design-system/Table';
import { TableLabel } from '@strapi/design-system/Text';
import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
import ConfigDiff from '../ConfigDiff';
import FirstExport from '../FirstExport';
import NoChanges from '../NoChanges';
import ConfigListRow from './ConfigListRow';
import { setConfigPartialDiffInState } from '../../state/actions/Config';
const ConfigList = ({ diff, isLoading }) => {
const [openModal, setOpenModal] = useState(false);
@ -15,6 +18,8 @@ const ConfigList = ({ diff, isLoading }) => {
const [newConfig, setNewConfig] = useState({});
const [cName, setCname] = useState('');
const [rows, setRows] = useState([]);
const [checkedItems, setCheckedItems] = useState([]);
const dispatch = useDispatch();
const getConfigState = (configName) => {
if (
@ -46,6 +51,8 @@ const ConfigList = ({ diff, isLoading }) => {
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));
formattedRows.push({
configName: formattedName,
configType: type,
@ -62,6 +69,14 @@ const ConfigList = ({ diff, isLoading }) => {
setRows(formattedRows);
}, [diff]);
useEffect(() => {
const newPartialDiff = [];
checkedItems.map((item, index) => {
if (item && rows[index]) newPartialDiff.push(`${rows[index].configType}.${rows[index].configName}`);
});
dispatch(setConfigPartialDiffInState(newPartialDiff));
}, [checkedItems]);
const closeModal = () => {
setOriginalConfig({});
setNewConfig({});
@ -77,6 +92,9 @@ const ConfigList = ({ diff, isLoading }) => {
return <NoChanges />;
}
const allChecked = checkedItems && checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
return (
<div>
<ConfigDiff
@ -89,6 +107,14 @@ const ConfigList = ({ diff, isLoading }) => {
<Table colCount={4} rowCount={rows.length + 1}>
<Thead>
<Tr>
<Th>
<BaseCheckbox
aria-label="Select all entries"
indeterminate={isIndeterminate}
onValueChange={(value) => setCheckedItems(checkedItems.map(() => value))}
value={allChecked}
/>
</Th>
<Th>
<TableLabel>Config name</TableLabel>
</Th>
@ -101,8 +127,16 @@ const ConfigList = ({ diff, isLoading }) => {
</Tr>
</Thead>
<Tbody>
{rows.map((row) => (
<ConfigListRow key={row.configName} row={row} />
{rows.map((row, index) => (
<ConfigListRow
key={row.configName}
row={row}
checked={checkedItems[index]}
updateValue={() => {
checkedItems[index] = !checkedItems[index];
setCheckedItems([...checkedItems]);
}}
/>
))}
</Tbody>
</Table>

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

@ -18,7 +18,7 @@ const ConfigPage = () => {
return (
<Box paddingLeft={8} paddingRight={8}>
<ActionButtons diff={configDiff.toJS()} />
<ActionButtons />
<ConfigList isLoading={isLoading} diff={configDiff.toJS()} />
</Box>
);

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

@ -29,13 +29,22 @@ export function setConfigDiffInState(config) {
};
}
export function exportAllConfig() {
export const SET_CONFIG_PARTIAL_DIFF_IN_STATE = 'SET_CONFIG_PARTIAL_DIFF_IN_STATE';
export function setConfigPartialDiffInState(config) {
return {
type: SET_CONFIG_PARTIAL_DIFF_IN_STATE,
config,
};
}
export function exportAllConfig(partialDiff) {
return async function(dispatch, getState, toggleNotification) {
dispatch(setLoadingState(true));
try {
const { message } = await request('/config-sync/export', { method: 'GET' });
dispatch(setConfigDiffInState(Map({})));
const { message } = await request('/config-sync/export', {
method: 'POST',
body: partialDiff,
});
toggleNotification({ type: 'success', message });
dispatch(setLoadingState(false));
} catch (err) {
@ -45,13 +54,14 @@ export function exportAllConfig() {
};
}
export function importAllConfig() {
export function importAllConfig(partialDiff) {
return async function(dispatch, getState, toggleNotification) {
dispatch(setLoadingState(true));
try {
const { message } = await request('/config-sync/import', { method: 'GET' });
dispatch(setConfigDiffInState(Map({})));
const { message } = await request('/config-sync/import', {
method: 'POST',
body: partialDiff,
});
toggleNotification({ type: 'success', message });
dispatch(setLoadingState(false));
} catch (err) {

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

@ -4,11 +4,12 @@
*
*/
import { fromJS, Map } from 'immutable';
import { SET_CONFIG_DIFF_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
import { fromJS, Map, List } from 'immutable';
import { SET_CONFIG_DIFF_IN_STATE, SET_CONFIG_PARTIAL_DIFF_IN_STATE, SET_LOADING_STATE } from '../../actions/Config';
const initialState = fromJS({
configDiff: Map({}),
partialDiff: List([]),
isLoading: false,
});
@ -16,11 +17,14 @@ export default function configReducer(state = initialState, action) {
switch (action.type) {
case SET_CONFIG_DIFF_IN_STATE:
return state
.update('configDiff', () => fromJS(action.config))
.update('configDiff', () => fromJS(action.config));
case SET_CONFIG_PARTIAL_DIFF_IN_STATE:
return state
.update('partialDiff', () => fromJS(action.config));
case SET_LOADING_STATE:
return state
.update('isLoading', () => fromJS(action.value))
.update('isLoading', () => fromJS(action.value));
default:
return state;
}
}
}

24
server/controllers/config.js
View File

@ -14,7 +14,17 @@ module.exports = {
* @returns {void}
*/
exportAll: async (ctx) => {
await strapi.plugin('config-sync').service('main').exportAllConfig();
if (!ctx.request.body) {
ctx.send({
message: 'No config was specified for the export endpoint.',
});
return;
}
await Promise.all(ctx.request.body.map(async (configName) => {
await strapi.plugin('config-sync').service('main').exportSingleConfig(configName);
}));
ctx.send({
message: `Config was successfully exported to ${strapi.config.get('plugin.config-sync.destination')}.`,
@ -37,7 +47,17 @@ module.exports = {
return;
}
await strapi.plugin('config-sync').service('main').importAllConfig();
if (!ctx.request.body) {
ctx.send({
message: 'No config was specified for the export endpoint.',
});
return;
}
await Promise.all(ctx.request.body.map(async (configName) => {
await strapi.plugin('config-sync').service('main').importSingleConfig(configName);
}));
ctx.send({
message: 'Config was successfully imported.',

4
server/routes/admin.js
View File

@ -4,7 +4,7 @@ module.exports = {
type: 'admin',
routes: [
{
method: "GET",
method: "POST",
path: "/export",
handler: "config.exportAll",
config: {
@ -12,7 +12,7 @@ module.exports = {
},
},
{
method: "GET",
method: "POST",
path: "/import",
handler: "config.importAll",
config: {