Implement Sync Rules

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-06-13T06:24:14.176Z\n"
-"PO-Revision-Date: 2019-06-13T06:24:14.176Z\n"
+"POT-Creation-Date: 2019-06-28T16:11:03.901Z\n"
+"PO-Revision-Date: 2019-06-28T16:11:03.901Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -65,9 +65,6 @@ msgstr ""
 msgid "Ok"
 msgstr ""
 
-msgid "Help text"
-msgstr ""
-
 msgid "Saving..."
 msgstr ""
 
@@ -190,9 +187,111 @@ msgstr ""
 msgid "Back"
 msgstr ""
 
+msgid "General info"
+msgstr ""
+
+msgid "Metadata"
+msgstr ""
+
+msgid "Instance Selection"
+msgstr ""
+
+msgid "Summary"
+msgstr ""
+
+msgid "New synchronization rule"
+msgstr ""
+
+msgid "Edit synchronization rule"
+msgstr ""
+
+msgid "Cancel synchronization rule creation"
+msgstr ""
+
+msgid "Cancel synchronization rule editing"
+msgstr ""
+
+msgid "Name (*)"
+msgstr ""
+
+msgid "Name"
+msgstr ""
+
+msgid "Metadata Type"
+msgstr ""
+
+msgid "Last update"
+msgstr ""
+
+msgid "Selected {{difference}} elements"
+msgstr ""
+
+msgid "Removed {{difference}} elements"
+msgstr ""
+
+msgid "Metadata type"
+msgstr ""
+
+msgid "Last updated date"
+msgstr ""
+
+msgid "{{displayName}} Group"
+msgstr ""
+
+msgid "{{displayName}} Level"
+msgstr ""
+
+msgid "Only selected items"
+msgstr ""
+
+msgid "Cancel synchronization rule wizard"
+msgstr ""
+
+msgid ""
+"You are about to exit the Sync Rule Creation Wizard. All your changes will "
+"be lost. Are you sure you want to proceed?"
+msgstr ""
+
+msgid "Yes"
+msgstr ""
+
+msgid "Target instances [{{total}}]"
+msgstr ""
+
+msgid "Destination instances"
+msgstr ""
+
+msgid "Deleting Sync Rules"
+msgstr ""
+
+msgid "Failed to delete some rules"
+msgstr ""
+
+msgid "Successfully deleted {{count}} rules"
+msgid_plural "Successfully deleted {{count}} rules"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Synchronizing metadata"
 msgstr ""
 
+msgid "Failed to execute rule {{name}}"
+msgstr ""
+
+msgid "Execute"
+msgstr ""
+
+msgid "Destination Instance"
+msgstr ""
+
+msgid "Delete Rules?"
+msgstr ""
+
+msgid "Are you sure you want to delete {{count}} rules?"
+msgid_plural "Are you sure you want to delete {{count}} rules?"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "Synchronize Metadata"
 msgstr ""
 
@@ -229,9 +328,6 @@ msgstr ""
 msgid "Synchronization Results"
 msgstr ""
 
-msgid "Summary"
-msgstr ""
-
 msgid "Messages"
 msgstr ""
 
@@ -244,9 +340,6 @@ msgstr ""
 msgid "Please select at least one element from the table to synchronize"
 msgstr ""
 
-msgid "Last updated date"
-msgstr ""
-
 msgid "{{type}} Group"
 msgstr ""
 
@@ -289,12 +382,6 @@ msgstr ""
 msgid "Network error {{error}}, check if server is up and CORS is enabled"
 msgstr ""
 
-msgid "Name"
-msgstr ""
-
-msgid "Last update"
-msgstr ""
-
 msgid "Level"
 msgstr ""
 
@@ -315,3 +402,6 @@ msgstr ""
 
 msgid "This URL and username combination already exists"
 msgstr ""
+
+msgid "You need to select at least one element"
+msgstr ""

package.json

@@ -22,7 +22,7 @@
     "cryptr": "^4.0.2",
     "d2": "^31.1.1",
     "d2-manifest": "^1.0.0",
-    "d2-ui-components": "^0.0.18",
+    "d2-ui-components": "^0.0.19",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
@@ -31,7 +31,7 @@
     "jest": "^23.6.0",
     "lodash": "^4.17.11",
     "material-ui": "^0.20.2",
-    "nano-memoize": "^1.0.3",
+    "nano-memoize": "^1.1.5",
     "postcss-rtl": "^1.3.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",

src/components/app/App.css

@@ -8,6 +8,10 @@ body {
     margin: 0;
 }
 
+li {
+    line-height: 1.75;
+}
+
 .content {
     margin: 4rem 15px 15px;
 }

src/components/app/Root.jsx

@@ -10,6 +10,8 @@ import DataElementPage from "../synchronization-page/DataElementPage";
 import IndicatorPage from "../synchronization-page/IndicatorPage";
 import ValidationRulePage from "../synchronization-page/ValidationRulePage";
 import NotificationsPage from "../notification-list-page/NotificationsPage";
+import SyncRulesWizard from "../rules-creation-page/SyncRulesWizard";
+import SyncRulesConfigurator from "../rules-list-page/SyncRulesPage";
 
 class Root extends React.Component {
     static propTypes = {
@@ -56,6 +58,16 @@ class Root extends React.Component {
                     render={props => <NotificationsPage d2={d2} {...props} />}
                 />
 
+                <Route
+                    path={"/synchronization-rules/:action(new|edit)/:id?"}
+                    render={props => <SyncRulesWizard d2={d2} {...props} />}
+                />
+
+                <Route
+                    path="/synchronization-rules"
+                    render={props => <SyncRulesConfigurator d2={d2} {...props} />}
+                />
+
                 <Route render={() => <LandingPage d2={d2} />} />
             </Switch>
         );

src/components/dropdown/Dropdown.jsx

@@ -56,14 +56,24 @@ const getMaterialTheme = () =>
         },
     });
 
-export default function Dropdown({ items, value, onChange, label }) {
+export default function Dropdown({ items, value, onChange, label, hideEmpty }) {
     const materialTheme = getMaterialTheme();
     return (
         <MuiThemeProvider theme={materialTheme}>
             <FormControl>
                 <InputLabel>{label}</InputLabel>
-                <Select value={value} onChange={onChange}>
-                    <MenuItem value={""}>{i18n.t("<No value>")}</MenuItem>
+                <Select
+                    value={value}
+                    onChange={onChange}
+                    MenuProps={{
+                        getContentAnchorEl: null,
+                        anchorOrigin: {
+                            vertical: "bottom",
+                            horizontal: "left",
+                        },
+                    }}
+                >
+                    {!hideEmpty && <MenuItem value={""}>{i18n.t("<No value>")}</MenuItem>}
                     {items.map(i => (
                         <MenuItem key={i.id} value={i.id}>
                             {i.name}
@@ -80,4 +90,9 @@ Dropdown.propTypes = {
     onChange: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    hideEmpty: PropTypes.bool,
+};
+
+Dropdown.defaultProps = {
+    displayEmpty: true,
 };

src/components/instance-creation-page/InstanceCreationPage.jsx

@@ -68,11 +68,7 @@ class InstanceCreationPage extends React.Component {
                     saveText={i18n.t("Ok")}
                 />
 
-                <PageHeader
-                    title={title}
-                    onBackClick={this.cancelSave}
-                    helpText={i18n.t("Help text")}
-                />
+                <PageHeader title={title} onBackClick={this.cancelSave} helpText={undefined} />
 
                 <GeneralInfoForm
                     d2={d2}

src/components/notification-list-page/NotificationsPage.jsx

@@ -10,6 +10,7 @@ import PageHeader from "../page-header/PageHeader";
 import Dropdown from "../dropdown/Dropdown";
 import SyncReport from "../../models/syncReport";
 import SyncSummary from "../sync-summary/SyncSummary";
+import { getValueForCollection } from "../../utils/d2-ui-components";
 
 const styles = () => ({
     tableContainer: { marginTop: 10 },
@@ -136,24 +137,8 @@ class NotificationsPage extends React.Component {
         this.setState({ summaryOpen: false });
     };
 
-    // TODO: We should fix d2-ui-components instead
-    getValueForCollection = values => {
-        const namesToDisplay = _(values)
-            .map(value => value.displayName || value.name || value.id)
-            .compact()
-            .value();
-
-        return (
-            <ul>
-                {namesToDisplay.map(name => (
-                    <li key={name}>{name}</li>
-                ))}
-            </ul>
-        );
-    };
-
     getMetadataTypes = notification => {
-        return this.getValueForCollection(notification.types.map(type => ({ name: type })));
+        return getValueForCollection(notification.types.map(type => ({ name: type })));
     };
 
     detailsFields = [