From dba7d896672f7ac97270ab7152467d504a9a1690 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Wed, 12 Jun 2019 20:16:53 +0200
Subject: [PATCH 01/21] Add basic Sync Rules Landing page and Wizard

---
 i18n/en.pot                                   |  47 ++++-
 src/components/app/Root.jsx                   |  12 ++
 .../rules-creation-page/SyncRulesWizard.jsx   | 111 ++++++++++++
 .../rules-list-page/SyncRulesConfigurator.jsx | 165 ++++++++++++++++++
 src/models/syncRule.ts                        |  58 ++++++
 src/types/synchronization.d.ts                |   9 +
 6 files changed, 397 insertions(+), 5 deletions(-)
 create mode 100644 src/components/rules-creation-page/SyncRulesWizard.jsx
 create mode 100644 src/components/rules-list-page/SyncRulesConfigurator.jsx
 create mode 100644 src/models/syncRule.ts

diff --git a/i18n/en.pot b/i18n/en.pot
index 13a603ff8..6dc7e6ede 100644
--- a/i18n/en.pot
+++ b/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-13T06:37:16.186Z\n"
+"PO-Revision-Date: 2019-06-13T06:37:16.186Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -190,6 +190,46 @@ msgstr ""
 msgid "Back"
 msgstr ""
 
+msgid "General info"
+msgstr ""
+
+msgid "New Sync Rule"
+msgstr ""
+
+msgid "Edit Sync Rule"
+msgstr ""
+
+msgid "Cancel Sync Rule Creation"
+msgstr ""
+
+msgid "Cancel Sync Rule Editing"
+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 "Name"
+msgstr ""
+
+msgid "Execute"
+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 "Synchronizing metadata"
 msgstr ""
 
@@ -289,9 +329,6 @@ msgstr ""
 msgid "Network error {{error}}, check if server is up and CORS is enabled"
 msgstr ""
 
-msgid "Name"
-msgstr ""
-
 msgid "Last update"
 msgstr ""
 
diff --git a/src/components/app/Root.jsx b/src/components/app/Root.jsx
index 61be702d1..fa97869d6 100644
--- a/src/components/app/Root.jsx
+++ b/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/SyncRulesConfigurator";
 
 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>
         );
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
new file mode 100644
index 000000000..900fec5f4
--- /dev/null
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -0,0 +1,111 @@
+import React from "react";
+import PropTypes from "prop-types";
+import i18n from "@dhis2/d2-i18n";
+import { withRouter } from "react-router-dom";
+import { ConfirmationDialog, Wizard } from "d2-ui-components";
+
+import Instance from "../../models/instance";
+
+import PageHeader from "../page-header/PageHeader";
+
+class SyncRulesWizard extends React.Component {
+    static propTypes = {
+        d2: PropTypes.object.isRequired,
+        history: PropTypes.object.isRequired,
+    };
+
+    state = {
+        dialogOpen: false,
+        instance: Instance.create(),
+    };
+
+    id = this.props.match.params.id;
+    isEdit = this.props.match.params.action === "edit" && this.id;
+
+    static getStepsBaseInfo() {
+        return [
+            {
+                key: "general-info",
+                label: i18n.t("General info"),
+                component: () => <p>Test</p>,
+                validationKeys: [],
+                description: i18n.t(`Description`),
+                help: i18n.t(`Help`),
+            },
+        ];
+    }
+
+    componentDidMount = async () => {
+        if (this.isEdit) {
+            const instance = await Instance.get(this.props.d2, this.id);
+            this.setState({ instance });
+        }
+    };
+
+    cancelSave = () => {
+        this.setState({ dialogOpen: true });
+    };
+
+    handleConfirm = () => {
+        this.setState({ dialogOpen: false });
+        this.props.history.push("/synchronization-rules");
+    };
+
+    handleDialogCancel = () => {
+        this.setState({ dialogOpen: false });
+    };
+
+    onChange = instance => {
+        this.setState({ instance });
+    };
+
+    switchStep = () => {};
+
+    render() {
+        const { dialogOpen, instance } = this.state;
+        const { d2 } = this.props;
+
+        const title = !this.isEdit ? i18n.t("New Sync Rule") : i18n.t("Edit Sync Rule");
+
+        const cancel = !this.isEdit
+            ? i18n.t("Cancel Sync Rule Creation")
+            : i18n.t("Cancel Sync Rule Editing");
+
+        const steps = SyncRulesWizard.getStepsBaseInfo().map(step => ({
+            ...step,
+            props: {
+                d2,
+                instance,
+                //onChange: this.onChange(step),
+                onCancel: this.handleConfirm,
+            },
+        }));
+
+        return (
+            <React.Fragment>
+                <ConfirmationDialog
+                    isOpen={dialogOpen}
+                    onSave={this.handleConfirm}
+                    onCancel={this.handleDialogCancel}
+                    title={cancel}
+                    description={i18n.t("All your changes will be lost. Are you sure?")}
+                    saveText={i18n.t("Ok")}
+                />
+
+                <PageHeader
+                    title={title}
+                    onBackClick={this.cancelSave}
+                    helpText={i18n.t("Help text")}
+                />
+
+                <Wizard
+                    onStepChangeRequest={this.switchStep}
+                    initialStepKey={steps[0].key}
+                    steps={steps}
+                />
+            </React.Fragment>
+        );
+    }
+}
+
+export default withRouter(SyncRulesWizard);
diff --git a/src/components/rules-list-page/SyncRulesConfigurator.jsx b/src/components/rules-list-page/SyncRulesConfigurator.jsx
new file mode 100644
index 000000000..5d1f7c03f
--- /dev/null
+++ b/src/components/rules-list-page/SyncRulesConfigurator.jsx
@@ -0,0 +1,165 @@
+import React from "react";
+import PropTypes from "prop-types";
+import _ from "lodash";
+import i18n from "@dhis2/d2-i18n";
+import { ConfirmationDialog, ObjectsTable, withLoading, withSnackbar } from "d2-ui-components";
+import { withRouter } from "react-router-dom";
+import { withStyles } from "@material-ui/core/styles";
+
+import PageHeader from "../page-header/PageHeader";
+import SyncRule from "../../models/syncRule";
+
+const styles = () => ({
+    tableContainer: { marginTop: -10 },
+});
+
+class SyncRulesConfigurator extends React.Component {
+    static propTypes = {
+        d2: PropTypes.object.isRequired,
+        snackbar: PropTypes.object.isRequired,
+        history: PropTypes.object.isRequired,
+        loading: PropTypes.object.isRequired,
+    };
+    static model = {
+        modelValidations: {
+            // TODO: Update model validations
+        },
+    };
+
+    state = {
+        tableKey: Math.random(),
+        toDelete: null,
+    };
+
+    columns = [
+        { name: "name", text: i18n.t("Name"), sortable: true },
+        // TODO: Add description, origin and destination
+    ];
+
+    initialSorting = ["name", "asc"];
+
+    detailsFields = [
+        { name: "name", text: i18n.t("Name") },
+        { name: "description", text: i18n.t("Description") },
+        // TODO: Add origin, destination
+    ];
+
+    backHome = () => {
+        this.props.history.push("/");
+    };
+
+    deleteSyncRules = rules => {
+        this.setState({ toDelete: rules });
+    };
+
+    cancelDelete = () => {
+        this.setState({ toDelete: null });
+    };
+
+    confirmDelete = async () => {
+        const { loading, d2 } = this.props;
+        const { toDelete } = this.state;
+
+        loading.show(true, i18n.t("Deleting Sync Rules"));
+        const rules = toDelete.map(data => new SyncRule(data));
+
+        const results = [];
+        for (const rule of rules) {
+            results.push(await rule.remove(d2));
+        }
+
+        loading.reset();
+        this.setState({ tableKey: Math.random(), toDelete: null });
+
+        if (_.some(results, ["status", false])) {
+            this.props.snackbar.error(i18n.t("Failed to delete some rules"));
+        } else {
+            this.props.snackbar.success(
+                i18n.t("Successfully deleted {{count}} rules", { count: toDelete.length })
+            );
+        }
+    };
+
+    createRule = () => {
+        this.props.history.push("/synchronization-rules/new");
+    };
+
+    editRule = rule => {
+        this.props.history.push(`/synchronization-rules/edit/${rule.id}`);
+    };
+
+    executeRule = _rule => {
+        // TODO
+    };
+
+    actions = [
+        {
+            name: "edit",
+            text: i18n.t("Edit"),
+            multiple: false,
+            onClick: this.editInstance,
+        },
+        {
+            name: "details",
+            text: i18n.t("Details"),
+            multiple: false,
+            type: "details",
+        },
+        {
+            name: "delete",
+            text: i18n.t("Delete"),
+            multiple: true,
+            onClick: this.deleteSyncRules,
+        },
+        {
+            name: "execute",
+            text: i18n.t("Execute"),
+            multiple: false,
+            onClick: this.executeRule,
+            icon: "settings_input_antenna",
+        },
+    ];
+
+    render() {
+        const { tableKey, toDelete } = this.state;
+        const { d2, classes } = this.props;
+
+        return (
+            <React.Fragment>
+                <PageHeader title={i18n.t("Synchronization Rules")} onBackClick={this.backHome} />
+                <div className={classes.tableContainer}>
+                    <ObjectsTable
+                        key={tableKey}
+                        d2={d2}
+                        model={SyncRulesConfigurator.model}
+                        columns={this.columns}
+                        detailsFields={this.detailsFields}
+                        pageSize={10}
+                        initialSorting={this.initialSorting}
+                        actions={this.actions}
+                        list={SyncRule.list}
+                        hideSearchBox={true}
+                        onButtonClick={this.createRule}
+                    />
+                </div>
+
+                <ConfirmationDialog
+                    isOpen={!!toDelete}
+                    onSave={this.confirmDelete}
+                    onCancel={this.cancelDelete}
+                    title={i18n.t("Delete Rules?")}
+                    description={
+                        toDelete
+                            ? i18n.t("Are you sure you want to delete {{count}} rules?", {
+                                  count: toDelete.length,
+                              })
+                            : ""
+                    }
+                    saveText={i18n.t("Ok")}
+                />
+            </React.Fragment>
+        );
+    }
+}
+
+export default withLoading(withSnackbar(withRouter(withStyles(styles)(SyncRulesConfigurator))));
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
new file mode 100644
index 000000000..22f51c39f
--- /dev/null
+++ b/src/models/syncRule.ts
@@ -0,0 +1,58 @@
+import _ from "lodash";
+import { generateUid } from "d2/uid";
+
+import { deleteData, getDataById, getPaginatedData } from "./dataStore";
+import { D2 } from "../types/d2";
+import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
+import { SynchronizationRule } from "../types/synchronization";
+import Instance from "./instance";
+
+const dataStoreKey = "rules";
+
+export default class SyncRule {
+    private readonly syncRule: SynchronizationRule;
+
+    constructor(syncRule: SynchronizationRule) {
+        this.syncRule = {
+            id: generateUid(),
+            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder"]),
+        };
+    }
+
+    public static create(): SyncRule {
+        return new SyncRule({
+            id: "",
+            name: "",
+            originInstance: Instance.create(),
+            builder: {
+                targetInstances: [],
+                metadata: {},
+            },
+        });
+    }
+
+    public static build(syncRule: SynchronizationRule | undefined): SyncRule {
+        return syncRule ? new SyncRule(syncRule) : this.create();
+    }
+
+    public static async get(d2: D2, id: string): Promise<SyncRule> {
+        const data = await getDataById(d2, dataStoreKey, id);
+        return this.build(data);
+    }
+
+    public static async list(
+        d2: D2,
+        filters: TableFilters,
+        pagination: TablePagination
+    ): Promise<TableList> {
+        return getPaginatedData(d2, dataStoreKey, filters, pagination);
+    }
+
+    public async save(_d2: D2): Promise<void> {
+        // TODO
+    }
+
+    public async remove(d2: D2): Promise<void> {
+        await deleteData(d2, dataStoreKey, this.syncRule);
+    }
+}
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index fa53cf6ac..197473a3a 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -1,5 +1,6 @@
 import { MetadataImportResponse, MetadataImportStats } from "./d2";
 import SyncReport from "../models/syncReport";
+import Instance from "../models/instance";
 
 export interface SynchronizationBuilder {
     targetInstances: string[];
@@ -51,3 +52,11 @@ export interface SynchronizationState {
     syncReport?: SyncReport;
     done?: boolean;
 }
+
+export interface SynchronizationRule {
+    id?: string;
+    name: string;
+    description?: string;
+    originInstance: Instance;
+    builder: SynchronizationBuilder;
+}

From b61dc87502212ae2fcc355c0c26fdeffd25cde9c Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 18 Jun 2019 11:03:45 +0200
Subject: [PATCH 02/21] Add sync rule wizard steps

---
 i18n/en.pot                                   |  60 +++--
 src/components/dropdown/Dropdown.jsx          |   9 +-
 .../rules-creation-page/SyncRulesWizard.jsx   |  59 +++--
 .../steps/GeneralInfoStep.jsx                 |  58 +++++
 .../steps/InstanceSelectionStep.jsx           |  50 ++++
 .../steps/MetadataStep.jsx                    | 245 ++++++++++++++++++
 .../rules-creation-page/steps/SaveStep.jsx    |  62 +++++
 src/logic/metadata.ts                         |  49 ++++
 src/models/d2Model.ts                         |  11 +
 src/models/syncRule.ts                        |  43 ++-
 src/types/synchronization.d.ts                |   1 +
 src/utils/synchronization.ts                  |   8 +-
 12 files changed, 615 insertions(+), 40 deletions(-)
 create mode 100644 src/components/rules-creation-page/steps/GeneralInfoStep.jsx
 create mode 100644 src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
 create mode 100644 src/components/rules-creation-page/steps/MetadataStep.jsx
 create mode 100644 src/components/rules-creation-page/steps/SaveStep.jsx
 create mode 100644 src/logic/metadata.ts

diff --git a/i18n/en.pot b/i18n/en.pot
index 6dc7e6ede..ced985a8f 100644
--- a/i18n/en.pot
+++ b/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:37:16.186Z\n"
-"PO-Revision-Date: 2019-06-13T06:37:16.186Z\n"
+"POT-Creation-Date: 2019-06-18T09:02:36.522Z\n"
+"PO-Revision-Date: 2019-06-18T09:02:36.522Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -193,16 +193,52 @@ msgstr ""
 msgid "General info"
 msgstr ""
 
-msgid "New Sync Rule"
+msgid "Metadata"
 msgstr ""
 
-msgid "Edit Sync Rule"
+msgid "Instance Selection"
 msgstr ""
 
-msgid "Cancel Sync Rule Creation"
+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 elements"
+msgstr ""
+
+msgid "Metadata type"
+msgstr ""
+
+msgid "Last updated date"
+msgstr ""
+
+msgid "{{displayName}} Group"
 msgstr ""
 
-msgid "Cancel Sync Rule Editing"
+msgid "{{displayName}} Level"
 msgstr ""
 
 msgid "Deleting Sync Rules"
@@ -216,9 +252,6 @@ msgid_plural "Successfully deleted {{count}} rules"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Name"
-msgstr ""
-
 msgid "Execute"
 msgstr ""
 
@@ -269,9 +302,6 @@ msgstr ""
 msgid "Synchronization Results"
 msgstr ""
 
-msgid "Summary"
-msgstr ""
-
 msgid "Messages"
 msgstr ""
 
@@ -284,9 +314,6 @@ msgstr ""
 msgid "Please select at least one element from the table to synchronize"
 msgstr ""
 
-msgid "Last updated date"
-msgstr ""
-
 msgid "{{type}} Group"
 msgstr ""
 
@@ -329,9 +356,6 @@ msgstr ""
 msgid "Network error {{error}}, check if server is up and CORS is enabled"
 msgstr ""
 
-msgid "Last update"
-msgstr ""
-
 msgid "Level"
 msgstr ""
 
diff --git a/src/components/dropdown/Dropdown.jsx b/src/components/dropdown/Dropdown.jsx
index 47ae13121..21af78951 100644
--- a/src/components/dropdown/Dropdown.jsx
+++ b/src/components/dropdown/Dropdown.jsx
@@ -56,14 +56,14 @@ 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>
+                    {!hideEmpty && <MenuItem value={""}>{i18n.t("<No value>")}</MenuItem>}
                     {items.map(i => (
                         <MenuItem key={i.id} value={i.id}>
                             {i.name}
@@ -80,4 +80,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,
 };
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index 900fec5f4..1f579f580 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -4,9 +4,12 @@ import i18n from "@dhis2/d2-i18n";
 import { withRouter } from "react-router-dom";
 import { ConfirmationDialog, Wizard } from "d2-ui-components";
 
-import Instance from "../../models/instance";
-
 import PageHeader from "../page-header/PageHeader";
+import GeneralInfoStep from "./steps/GeneralInfoStep";
+import SyncRule from "../../models/syncRule";
+import MetadataStep from "./steps/MetadataStep";
+import InstanceSelectionStep from "./steps/InstanceSelectionStep";
+import SaveStep from "./steps/SaveStep";
 
 class SyncRulesWizard extends React.Component {
     static propTypes = {
@@ -16,7 +19,7 @@ class SyncRulesWizard extends React.Component {
 
     state = {
         dialogOpen: false,
-        instance: Instance.create(),
+        syncRule: SyncRule.create(),
     };
 
     id = this.props.match.params.id;
@@ -27,17 +30,41 @@ class SyncRulesWizard extends React.Component {
             {
                 key: "general-info",
                 label: i18n.t("General info"),
-                component: () => <p>Test</p>,
+                component: GeneralInfoStep,
+                validationKeys: ["name"],
+                description: undefined,
+                help: undefined,
+            },
+            {
+                key: "metadata",
+                label: i18n.t("Metadata"),
+                component: MetadataStep,
+                validationKeys: ["selectedIds"],
+                description: undefined,
+                help: undefined,
+            },
+            {
+                key: "instance-selection",
+                label: i18n.t("Instance Selection"),
+                component: InstanceSelectionStep,
+                validationKeys: ["targetInstances"],
+                description: undefined,
+                help: undefined,
+            },
+            {
+                key: "summary",
+                label: i18n.t("Summary"),
+                component: SaveStep,
                 validationKeys: [],
-                description: i18n.t(`Description`),
-                help: i18n.t(`Help`),
+                description: undefined,
+                help: undefined,
             },
         ];
     }
 
     componentDidMount = async () => {
         if (this.isEdit) {
-            const instance = await Instance.get(this.props.d2, this.id);
+            const instance = await SyncRule.get(this.props.d2, this.id);
             this.setState({ instance });
         }
     };
@@ -62,20 +89,22 @@ class SyncRulesWizard extends React.Component {
     switchStep = () => {};
 
     render() {
-        const { dialogOpen, instance } = this.state;
+        const { dialogOpen, syncRule } = this.state;
         const { d2 } = this.props;
 
-        const title = !this.isEdit ? i18n.t("New Sync Rule") : i18n.t("Edit Sync Rule");
+        const title = !this.isEdit
+            ? i18n.t("New synchronization rule")
+            : i18n.t("Edit synchronization rule");
 
         const cancel = !this.isEdit
-            ? i18n.t("Cancel Sync Rule Creation")
-            : i18n.t("Cancel Sync Rule Editing");
+            ? i18n.t("Cancel synchronization rule creation")
+            : i18n.t("Cancel synchronization rule editing");
 
         const steps = SyncRulesWizard.getStepsBaseInfo().map(step => ({
             ...step,
             props: {
                 d2,
-                instance,
+                syncRule,
                 //onChange: this.onChange(step),
                 onCancel: this.handleConfirm,
             },
@@ -92,11 +121,7 @@ class SyncRulesWizard extends React.Component {
                     saveText={i18n.t("Ok")}
                 />
 
-                <PageHeader
-                    title={title}
-                    onBackClick={this.cancelSave}
-                    helpText={i18n.t("Help text")}
-                />
+                <PageHeader title={title} onBackClick={this.cancelSave} />
 
                 <Wizard
                     onStepChangeRequest={this.switchStep}
diff --git a/src/components/rules-creation-page/steps/GeneralInfoStep.jsx b/src/components/rules-creation-page/steps/GeneralInfoStep.jsx
new file mode 100644
index 000000000..6eb257572
--- /dev/null
+++ b/src/components/rules-creation-page/steps/GeneralInfoStep.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { FormBuilder, Validators } from "@dhis2/d2-ui-forms";
+import { TextField } from "@dhis2/d2-ui-core";
+import i18n from "@dhis2/d2-i18n";
+
+const GeneralInfoStep = props => {
+    const { syncRule } = props;
+    const [, setFormReference] = useState(); // TODO: Form reference will be used for validations
+
+    const fields = [
+        {
+            name: "name",
+            value: syncRule.name,
+            component: TextField,
+            props: {
+                floatingLabelText: i18n.t("Name (*)"),
+                style: { width: "100%" },
+                changeEvent: "onBlur",
+                "data-test": "name",
+            },
+            validators: [
+                {
+                    message: i18n.t("Field cannot be blank"),
+                    validator(value) {
+                        return Validators.isRequired(value);
+                    },
+                },
+            ],
+        },
+        {
+            name: "description",
+            value: syncRule.description,
+            component: TextField,
+            props: {
+                floatingLabelText: i18n.t("Description"),
+                style: { width: "100%" },
+                changeEvent: "onBlur",
+                "data-test": "description",
+            },
+            validators: [],
+        },
+    ];
+
+    const updateFields = (field, value) => {
+        props.syncRule[field] = value;
+    };
+
+    return <FormBuilder fields={fields} onUpdateField={updateFields} ref={setFormReference} />;
+};
+
+GeneralInfoStep.propTypes = {
+    syncRule: PropTypes.object.isRequired,
+};
+
+GeneralInfoStep.defaultProps = {};
+
+export default GeneralInfoStep;
diff --git a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
new file mode 100644
index 000000000..a06628a96
--- /dev/null
+++ b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import memoize from "nano-memoize";
+import { MultiSelector } from "d2-ui-components";
+import Instance from "../../../models/instance";
+
+const getInstances = memoize(async d2 => {
+    const instances = await Instance.list(
+        d2,
+        { search: "" },
+        { page: 1, pageSize: 100, sorting: [] }
+    );
+    return instances.objects.map(instance => ({
+        value: instance.id,
+        text: `${instance.name} (${instance.url} with user ${instance.username})`,
+    }));
+});
+
+const InstanceSelectionStep = props => {
+    const { d2, syncRule } = props;
+    const [instanceOptions, setInstanceOptions] = useState();
+    const [selectedOptions, setSelectedOptions] = useState(syncRule.targetInstances);
+
+    const changeInstances = instances => {
+        setSelectedOptions(instances);
+        syncRule.targetInstances = instances;
+    };
+
+    useEffect(() => {
+        (async () => setInstanceOptions(await getInstances(d2)))();
+    }, [d2]);
+
+    return (
+        <MultiSelector
+            d2={d2}
+            height={300}
+            onChange={changeInstances}
+            options={instanceOptions}
+            selected={selectedOptions}
+        />
+    );
+};
+
+InstanceSelectionStep.propTypes = {
+    syncRule: PropTypes.object.isRequired,
+};
+
+InstanceSelectionStep.defaultProps = {};
+
+export default InstanceSelectionStep;
diff --git a/src/components/rules-creation-page/steps/MetadataStep.jsx b/src/components/rules-creation-page/steps/MetadataStep.jsx
new file mode 100644
index 000000000..283aa10fe
--- /dev/null
+++ b/src/components/rules-creation-page/steps/MetadataStep.jsx
@@ -0,0 +1,245 @@
+import React from "react";
+import PropTypes from "prop-types";
+import i18n from "@dhis2/d2-i18n";
+import memoize from "nano-memoize";
+import { DatePicker, ObjectsTable } from "d2-ui-components";
+
+import Dropdown from "../../dropdown/Dropdown";
+import { d2ModelFactory } from "../../../models/d2ModelFactory";
+import { listByIds } from "../../../logic/metadata";
+import { d2BaseModelDetails } from "../../../utils/d2";
+
+class MetadataStep extends React.Component {
+    static propTypes = {
+        d2: PropTypes.object.isRequired,
+        syncRule: PropTypes.object.isRequired,
+    };
+
+    defaultModel = {
+        getInitialSorting: () => [],
+        getColumns: () => [
+            { name: "displayName", text: i18n.t("Name"), sortable: true },
+            {
+                name: "metadataType",
+                text: i18n.t("Metadata Type"),
+                sortable: true,
+                getValue: element => {
+                    const model = this.props.d2.models[element.metadataType];
+                    return model ? model.displayName : element.metadataType;
+                },
+            },
+            { name: "lastUpdated", text: i18n.t("Last update"), sortable: true },
+        ],
+        getDetails: () => d2BaseModelDetails,
+        getGroupFilterName: () => null,
+        getLevelFilterName: () => null,
+        getMetadataType: () => "selected",
+        getD2Model: () => ({
+            displayName: "Selected elements",
+            modelValidations: {
+                lastUpdated: { type: "DATE" },
+            },
+        }),
+    };
+
+    state = {
+        model: this.defaultModel,
+        filters: {
+            lastUpdatedDate: null,
+            groupFilter: null,
+            levelFilter: null,
+        },
+        groupFilterData: [],
+        levelFilterData: [],
+        selectedIds: this.props.syncRule.selectedIds,
+    };
+
+    models = [
+        {
+            name: i18n.t("Selected elements"),
+            id: this.defaultModel.getMetadataType(),
+        },
+        {
+            name: this.props.d2.models["organisationUnit"].displayName,
+            id: this.props.d2.models["organisationUnit"].name,
+        },
+        {
+            name: this.props.d2.models["validationRule"].displayName,
+            id: this.props.d2.models["validationRule"].name,
+        },
+        {
+            name: this.props.d2.models["indicator"].displayName,
+            id: this.props.d2.models["indicator"].name,
+        },
+        {
+            name: this.props.d2.models["dataElement"].displayName,
+            id: this.props.d2.models["dataElement"].name,
+        },
+    ];
+
+    actions = [
+        {
+            name: "details",
+            text: i18n.t("Details"),
+            multiple: false,
+            type: "details",
+        },
+    ];
+    updateFilterData = memoize(async model => {
+        const { d2 } = this.props;
+        const newState = {};
+
+        if (model && model.getGroupFilterName()) {
+            const groupClass = d2ModelFactory(d2, model.getGroupFilterName());
+            const groupList = await groupClass.listMethod(
+                d2,
+                { customFields: ["id", "name"] },
+                { paging: false }
+            );
+            newState.groupFilterData = groupList.objects;
+        }
+
+        if (model && model.getLevelFilterName()) {
+            const orgUnitLevelsClass = d2ModelFactory(d2, model.getLevelFilterName());
+            const orgUnitLevelsList = await orgUnitLevelsClass.listMethod(
+                d2,
+                { customFields: ["level", "name"] },
+                { paging: false, sorting: ["level", "asc"] }
+            );
+            newState.levelFilterData = orgUnitLevelsList.objects.map(e => ({
+                id: e.level,
+                name: `${e.level}. ${e.name}`,
+            }));
+        }
+
+        return newState;
+    });
+
+    componentDidUpdate = async (prevProps, prevState) => {
+        const { model, filters } = this.state;
+
+        if (prevState.model !== model) {
+            this.setState({
+                ...(await this.updateFilterData(model)),
+                filters: {
+                    ...filters,
+                    groupFilter: null,
+                    levelFilter: null,
+                },
+            });
+        }
+    };
+
+    changeSelection = selectedIds => {
+        this.props.syncRule.selectedIds = selectedIds;
+        this.setState({ selectedIds });
+    };
+
+    changeModelName = event => {
+        const { d2 } = this.props;
+        this.setState({
+            model:
+                event.target.value !== "selected"
+                    ? d2ModelFactory(d2, event.target.value)
+                    : this.defaultModel,
+        });
+    };
+
+    changeDateFilter = value => {
+        const { filters } = this.state;
+        this.setState({ filters: { ...filters, lastUpdatedDate: value } });
+    };
+
+    changeGroupFilter = event => {
+        const { filters } = this.state;
+        this.setState({ filters: { ...filters, groupFilter: event.target.value } });
+    };
+
+    changeLevelFilter = event => {
+        const { filters } = this.state;
+        this.setState({ filters: { ...filters, levelFilter: event.target.value } });
+    };
+
+    renderCustomFilters = () => {
+        const { d2 } = this.props;
+        const { model, groupFilterData, levelFilterData, filters } = this.state;
+        const { lastUpdatedDate, groupFilter, levelFilter } = filters;
+        const displayName = model.getD2Model(d2).displayName;
+
+        return (
+            <React.Fragment>
+                <Dropdown
+                    key={"model-filter"}
+                    items={this.models}
+                    onChange={this.changeModelName}
+                    value={model.getMetadataType()}
+                    label={i18n.t("Metadata type")}
+                    hideEmpty
+                />
+
+                {model !== this.defaultModel && (
+                    <DatePicker
+                        key={"date-filter"}
+                        placeholder={i18n.t("Last updated date")}
+                        value={lastUpdatedDate}
+                        onChange={this.changeDateFilter}
+                        isFilter
+                    />
+                )}
+
+                {model && model.getGroupFilterName() && (
+                    <Dropdown
+                        key={"group-filter"}
+                        items={groupFilterData || []}
+                        onChange={this.changeGroupFilter}
+                        value={groupFilter || ""}
+                        label={i18n.t("{{displayName}} Group", { displayName })}
+                    />
+                )}
+
+                {model && model.getLevelFilterName() && (
+                    <Dropdown
+                        key={"level-filter"}
+                        items={levelFilterData || []}
+                        onChange={this.changeLevelFilter}
+                        value={levelFilter || ""}
+                        label={i18n.t("{{displayName}} Level", { displayName })}
+                    />
+                )}
+            </React.Fragment>
+        );
+    };
+
+    list = (...params) => {
+        const { model, selectedIds } = this.state;
+        if (model.listMethod) {
+            return model.listMethod(...params);
+        } else {
+            return listByIds(...params, selectedIds);
+        }
+    };
+
+    render() {
+        const { d2, syncRule } = this.props;
+        const { model, filters } = this.state;
+
+        return (
+            <ObjectsTable
+                d2={d2}
+                model={model.getD2Model(d2)}
+                columns={model.getColumns()}
+                detailsFields={model.getDetails()}
+                pageSize={10}
+                initialSorting={model.getInitialSorting()}
+                actions={this.actions}
+                list={this.list}
+                onSelectionChange={this.changeSelection}
+                customFiltersComponent={this.renderCustomFilters}
+                customFilters={filters}
+                initialSelection={syncRule.selectedIds}
+            />
+        );
+    }
+}
+
+export default MetadataStep;
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
new file mode 100644
index 000000000..992d88a5b
--- /dev/null
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, LinearProgress, withStyles } from "@material-ui/core";
+import i18n from "@dhis2/d2-i18n";
+
+const LiEntry = ({ label, value, children }) => {
+    return (
+        <li key={label}>
+            {label}
+            {value || children ? ": " : ""}
+            {value}
+            {children}
+        </li>
+    );
+};
+
+const styles = () => ({
+    saveButton: {
+        margin: 10,
+        backgroundColor: "#2b98f0",
+        color: "white",
+    },
+});
+
+const SaveStep = props => {
+    const { syncRule, classes } = props;
+    const [isSaving, setSaving] = useState(false);
+    const [errorMessage, setErrorMessage] = useState();
+
+    const cancel = () => {};
+    const save = () => {};
+
+    return (
+        <React.Fragment>
+            <ul>
+                <LiEntry label={i18n.t("Name")} value={syncRule.name} />
+
+                <LiEntry label={i18n.t("Description")} value={syncRule.description} />
+            </ul>
+
+            <Button onClick={cancel} variant="contained">
+                {i18n.t("Cancel")}
+            </Button>
+            <Button className={classes.saveButton} onClick={save} variant="contained">
+                {i18n.t("Save")}
+            </Button>
+
+            {isSaving && <LinearProgress />}
+
+            <pre>{errorMessage}</pre>
+        </React.Fragment>
+    );
+};
+
+SaveStep.propTypes = {
+    syncRule: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired,
+};
+
+SaveStep.defaultProps = {};
+
+export default withStyles(styles)(SaveStep);
diff --git a/src/logic/metadata.ts b/src/logic/metadata.ts
new file mode 100644
index 000000000..97c3ccf27
--- /dev/null
+++ b/src/logic/metadata.ts
@@ -0,0 +1,49 @@
+import _ from "lodash";
+
+import { D2 } from "../types/d2";
+import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
+import { getMetadata } from "../utils/synchronization";
+import { d2BaseModelDetails } from "../utils/d2";
+
+export async function listByIds(
+    d2: D2,
+    filters: TableFilters,
+    pagination: TablePagination,
+    ids: string[]
+): Promise<TableList> {
+    const { page = 1, pageSize = 20, sorting = ["id", "asc"] } = pagination || {};
+    const [field, direction] = sorting;
+
+    const metadata = await getMetadata(
+        d2,
+        ids,
+        filters.fields ? filters.fields.join(",") : d2BaseModelDetails.map(e => e.name).join(",")
+    );
+
+    if (metadata.system) delete metadata.system;
+    const objects = _(metadata)
+        .mapValues((obj, key) => obj.map((el: any) => ({ ...el, metadataType: key })))
+        .values()
+        .flatten()
+        .value();
+
+    const { search = null } = filters || {};
+    const filteredData = _.filter(objects, (o: any) =>
+        _(o)
+            .keys()
+            .some(k => o[k].toLowerCase().includes(search ? search.toLowerCase() : ""))
+    );
+
+    const sortedData = _.orderBy(
+        filteredData,
+        [(data: any) => (data[field] ? data[field].toLowerCase() : "")],
+        [direction as "asc" | "desc"]
+    );
+
+    const currentlyShown = (page - 1) * pageSize;
+    const pageCount = Math.ceil(sortedData.length / pageSize);
+    const total = sortedData.length;
+    const paginatedData = _.slice(sortedData, currentlyShown, currentlyShown + pageSize);
+
+    return { objects: paginatedData, pager: { page, pageCount, total } };
+}
diff --git a/src/models/d2Model.ts b/src/models/d2Model.ts
index 4d8a07a8a..f64a13da7 100644
--- a/src/models/d2Model.ts
+++ b/src/models/d2Model.ts
@@ -21,6 +21,8 @@ export abstract class D2Model {
     // Metadata Type should be defined on subclasses
     protected static metadataType: string;
     protected static groupFilterName: string;
+    protected static levelFilterName: string;
+
     protected static excludeRules: string[] = [];
     protected static includeRules: string[] = [];
 
@@ -94,11 +96,20 @@ export abstract class D2Model {
     public static getInitialSorting(): string[] {
         return this.initialSorting;
     }
+
+    public static getGroupFilterName(): string {
+        return this.groupFilterName;
+    }
+
+    public static getLevelFilterName(): string {
+        return this.levelFilterName;
+    }
 }
 
 export class OrganisationUnitModel extends D2Model {
     protected static metadataType = "organisationUnit";
     protected static groupFilterName = "organisationUnitGroups";
+    protected static levelFilterName = "organisationUnitLevels";
 
     protected static excludeRules = [
         "legendSets",
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 22f51c39f..7feb1d4f6 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -15,7 +15,14 @@ export default class SyncRule {
     constructor(syncRule: SynchronizationRule) {
         this.syncRule = {
             id: generateUid(),
-            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder"]),
+            ..._.pick(syncRule, [
+                "id",
+                "name",
+                "description",
+                "originInstance",
+                "builder",
+                "selectedIds",
+            ]),
         };
     }
 
@@ -23,11 +30,13 @@ export default class SyncRule {
         return new SyncRule({
             id: "",
             name: "",
+            description: "",
             originInstance: Instance.create(),
             builder: {
                 targetInstances: [],
                 metadata: {},
             },
+            selectedIds: [],
         });
     }
 
@@ -48,6 +57,38 @@ export default class SyncRule {
         return getPaginatedData(d2, dataStoreKey, filters, pagination);
     }
 
+    public set targetInstances(instances: string[]) {
+        this.syncRule.builder.targetInstances = instances;
+    }
+
+    public get targetInstances(): string[] {
+        return this.syncRule.builder.targetInstances;
+    }
+
+    public set selectedIds(selectedIds: string[]) {
+        this.syncRule.selectedIds = selectedIds;
+    }
+
+    public get selectedIds(): string[] {
+        return this.syncRule.selectedIds;
+    }
+
+    public set name(name: string) {
+        this.syncRule.name = name;
+    }
+
+    public get name(): string {
+        return this.syncRule.name;
+    }
+
+    public get description(): string {
+        return this.syncRule.description || "";
+    }
+
+    public set description(description: string) {
+        this.syncRule.description = description;
+    }
+
     public async save(_d2: D2): Promise<void> {
         // TODO
     }
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index 197473a3a..62e7f5ece 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -59,4 +59,5 @@ export interface SynchronizationRule {
     description?: string;
     originInstance: Instance;
     builder: SynchronizationBuilder;
+    selectedIds: string[];
 }
diff --git a/src/utils/synchronization.ts b/src/utils/synchronization.ts
index 98373a703..caa8409a9 100644
--- a/src/utils/synchronization.ts
+++ b/src/utils/synchronization.ts
@@ -38,7 +38,11 @@ export function cleanReferences(
     return _.intersection(_.keys(references), rules);
 }
 
-export async function getMetadata(d2: D2, elements: string[]): Promise<MetadataPackage> {
+export async function getMetadata(
+    d2: D2,
+    elements: string[],
+    fields: string = ":all"
+): Promise<MetadataPackage> {
     const promises = [];
     for (let i = 0; i < elements.length; i += 100) {
         const requestUrl = d2.Api.getApi().baseUrl + "/metadata.json";
@@ -47,7 +51,7 @@ export async function getMetadata(d2: D2, elements: string[]): Promise<MetadataP
             axios.get(requestUrl, {
                 withCredentials: true,
                 params: {
-                    fields: ":all",
+                    fields: fields,
                     filter: "id:in:[" + requestElements + "]",
                     defaults: "EXCLUDE",
                 },

From 5e7c28850c33c81b0095c14df4a3703529998cf9 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 11:10:32 +0200
Subject: [PATCH 03/21] Add selected elements checkbox

---
 i18n/en.pot                                   | 10 +--
 .../steps/MetadataStep.jsx                    | 67 +++++++++++++------
 .../rules-creation-page/steps/SaveStep.jsx    |  4 +-
 src/logic/metadata.ts                         |  7 +-
 src/types/d2-ui-components.d.ts               |  1 +
 5 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index ced985a8f..d3ba2a42d 100644
--- a/i18n/en.pot
+++ b/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-18T09:02:36.522Z\n"
-"PO-Revision-Date: 2019-06-18T09:02:36.522Z\n"
+"POT-Creation-Date: 2019-06-25T09:11:14.872Z\n"
+"PO-Revision-Date: 2019-06-25T09:11:14.872Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -226,9 +226,6 @@ msgstr ""
 msgid "Last update"
 msgstr ""
 
-msgid "Selected elements"
-msgstr ""
-
 msgid "Metadata type"
 msgstr ""
 
@@ -241,6 +238,9 @@ msgstr ""
 msgid "{{displayName}} Level"
 msgstr ""
 
+msgid "Only selected items"
+msgstr ""
+
 msgid "Deleting Sync Rules"
 msgstr ""
 
diff --git a/src/components/rules-creation-page/steps/MetadataStep.jsx b/src/components/rules-creation-page/steps/MetadataStep.jsx
index 283aa10fe..5da84ccca 100644
--- a/src/components/rules-creation-page/steps/MetadataStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataStep.jsx
@@ -3,16 +3,24 @@ import PropTypes from "prop-types";
 import i18n from "@dhis2/d2-i18n";
 import memoize from "nano-memoize";
 import { DatePicker, ObjectsTable } from "d2-ui-components";
+import { Checkbox, FormControlLabel, withStyles } from "@material-ui/core";
 
 import Dropdown from "../../dropdown/Dropdown";
 import { d2ModelFactory } from "../../../models/d2ModelFactory";
 import { listByIds } from "../../../logic/metadata";
 import { d2BaseModelDetails } from "../../../utils/d2";
 
+const styles = {
+    checkbox: {
+        paddingLeft: 30,
+    },
+};
+
 class MetadataStep extends React.Component {
     static propTypes = {
         d2: PropTypes.object.isRequired,
         syncRule: PropTypes.object.isRequired,
+        classes: PropTypes.object.isRequired,
     };
 
     defaultModel = {
@@ -33,7 +41,7 @@ class MetadataStep extends React.Component {
         getDetails: () => d2BaseModelDetails,
         getGroupFilterName: () => null,
         getLevelFilterName: () => null,
-        getMetadataType: () => "selected",
+        getMetadataType: () => "",
         getD2Model: () => ({
             displayName: "Selected elements",
             modelValidations: {
@@ -48,6 +56,8 @@ class MetadataStep extends React.Component {
             lastUpdatedDate: null,
             groupFilter: null,
             levelFilter: null,
+            showOnlySelectedItems: this.props.syncRule.selectedIds.length > 0,
+            metadataType: "",
         },
         groupFilterData: [],
         levelFilterData: [],
@@ -55,10 +65,6 @@ class MetadataStep extends React.Component {
     };
 
     models = [
-        {
-            name: i18n.t("Selected elements"),
-            id: this.defaultModel.getMetadataType(),
-        },
         {
             name: this.props.d2.models["organisationUnit"].displayName,
             id: this.props.d2.models["organisationUnit"].name,
@@ -137,11 +143,13 @@ class MetadataStep extends React.Component {
 
     changeModelName = event => {
         const { d2 } = this.props;
+        const { filters } = this.state;
         this.setState({
-            model:
-                event.target.value !== "selected"
-                    ? d2ModelFactory(d2, event.target.value)
-                    : this.defaultModel,
+            model: event.target.value ? d2ModelFactory(d2, event.target.value) : this.defaultModel,
+            filters: {
+                ...filters,
+                metadataType: event.target.value,
+            },
         });
     };
 
@@ -160,10 +168,15 @@ class MetadataStep extends React.Component {
         this.setState({ filters: { ...filters, levelFilter: event.target.value } });
     };
 
+    showSelectedItems = event => {
+        const { filters } = this.state;
+        this.setState({ filters: { ...filters, showOnlySelectedItems: event.target.checked } });
+    };
+
     renderCustomFilters = () => {
-        const { d2 } = this.props;
+        const { d2, classes } = this.props;
         const { model, groupFilterData, levelFilterData, filters } = this.state;
-        const { lastUpdatedDate, groupFilter, levelFilter } = filters;
+        const { lastUpdatedDate, groupFilter, levelFilter, showOnlySelectedItems } = filters;
         const displayName = model.getD2Model(d2).displayName;
 
         return (
@@ -174,10 +187,9 @@ class MetadataStep extends React.Component {
                     onChange={this.changeModelName}
                     value={model.getMetadataType()}
                     label={i18n.t("Metadata type")}
-                    hideEmpty
                 />
 
-                {model !== this.defaultModel && (
+                {!showOnlySelectedItems && (
                     <DatePicker
                         key={"date-filter"}
                         placeholder={i18n.t("Last updated date")}
@@ -187,7 +199,7 @@ class MetadataStep extends React.Component {
                     />
                 )}
 
-                {model && model.getGroupFilterName() && (
+                {!showOnlySelectedItems && model && model.getGroupFilterName() && (
                     <Dropdown
                         key={"group-filter"}
                         items={groupFilterData || []}
@@ -197,7 +209,7 @@ class MetadataStep extends React.Component {
                     />
                 )}
 
-                {model && model.getLevelFilterName() && (
+                {!showOnlySelectedItems && model && model.getLevelFilterName() && (
                     <Dropdown
                         key={"level-filter"}
                         items={levelFilterData || []}
@@ -206,16 +218,29 @@ class MetadataStep extends React.Component {
                         label={i18n.t("{{displayName}} Level", { displayName })}
                     />
                 )}
+
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            className={classes.checkbox}
+                            checked={showOnlySelectedItems}
+                            data-test="show-only-selected-items"
+                            onChange={this.showSelectedItems}
+                        />
+                    }
+                    label={i18n.t("Only selected items")}
+                />
             </React.Fragment>
         );
     };
 
     list = (...params) => {
-        const { model, selectedIds } = this.state;
-        if (model.listMethod) {
-            return model.listMethod(...params);
-        } else {
+        const { model, selectedIds, filters } = this.state;
+        const { showOnlySelectedItems } = filters;
+        if (!model.listMethod || showOnlySelectedItems) {
             return listByIds(...params, selectedIds);
+        } else {
+            return model.listMethod(...params);
         }
     };
 
@@ -229,7 +254,7 @@ class MetadataStep extends React.Component {
                 model={model.getD2Model(d2)}
                 columns={model.getColumns()}
                 detailsFields={model.getDetails()}
-                pageSize={10}
+                pageSize={20}
                 initialSorting={model.getInitialSorting()}
                 actions={this.actions}
                 list={this.list}
@@ -242,4 +267,4 @@ class MetadataStep extends React.Component {
     }
 }
 
-export default MetadataStep;
+export default withStyles(styles)(MetadataStep);
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index 992d88a5b..a219dd940 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -24,8 +24,8 @@ const styles = () => ({
 
 const SaveStep = props => {
     const { syncRule, classes } = props;
-    const [isSaving, setSaving] = useState(false);
-    const [errorMessage, setErrorMessage] = useState();
+    const [isSaving] = useState(false);
+    const [errorMessage] = useState();
 
     const cancel = () => {};
     const save = () => {};
diff --git a/src/logic/metadata.ts b/src/logic/metadata.ts
index 97c3ccf27..233d86d96 100644
--- a/src/logic/metadata.ts
+++ b/src/logic/metadata.ts
@@ -12,12 +12,13 @@ export async function listByIds(
     ids: string[]
 ): Promise<TableList> {
     const { page = 1, pageSize = 20, sorting = ["id", "asc"] } = pagination || {};
+    const { metadataType, fields, search = null } = filters;
     const [field, direction] = sorting;
 
     const metadata = await getMetadata(
         d2,
         ids,
-        filters.fields ? filters.fields.join(",") : d2BaseModelDetails.map(e => e.name).join(",")
+        fields ? fields.join(",") : d2BaseModelDetails.map(e => e.name).join(",")
     );
 
     if (metadata.system) delete metadata.system;
@@ -25,9 +26,11 @@ export async function listByIds(
         .mapValues((obj, key) => obj.map((el: any) => ({ ...el, metadataType: key })))
         .values()
         .flatten()
+        .filter((el: any) =>
+            metadataType ? d2.models[el.metadataType].name === metadataType : true
+        )
         .value();
 
-    const { search = null } = filters || {};
     const filteredData = _.filter(objects, (o: any) =>
         _(o)
             .keys()
diff --git a/src/types/d2-ui-components.d.ts b/src/types/d2-ui-components.d.ts
index 2158a43ad..95494ee78 100644
--- a/src/types/d2-ui-components.d.ts
+++ b/src/types/d2-ui-components.d.ts
@@ -16,6 +16,7 @@ export interface TableFilters {
     groupFilter?: string;
     customFilters?: string[];
     customFields?: string[];
+    metadataType?: string;
 }
 
 export interface OrganisationUnitTableFilters extends TableFilters {

From 53296f60f2f1e4c0af2f3cd0eb73f5b274b70f0a Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 11:20:40 +0200
Subject: [PATCH 04/21] Add snackbar feedback on selection

---
 i18n/en.pot                                   | 10 ++++++++--
 .../steps/MetadataStep.jsx                    | 19 ++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index d3ba2a42d..e34d1ad08 100644
--- a/i18n/en.pot
+++ b/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-25T09:11:14.872Z\n"
-"PO-Revision-Date: 2019-06-25T09:11:14.872Z\n"
+"POT-Creation-Date: 2019-06-25T09:20:27.053Z\n"
+"PO-Revision-Date: 2019-06-25T09:20:27.053Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -226,6 +226,12 @@ msgstr ""
 msgid "Last update"
 msgstr ""
 
+msgid "Selected {{difference}} elements"
+msgstr ""
+
+msgid "Removed {{difference}} elements"
+msgstr ""
+
 msgid "Metadata type"
 msgstr ""
 
diff --git a/src/components/rules-creation-page/steps/MetadataStep.jsx b/src/components/rules-creation-page/steps/MetadataStep.jsx
index 5da84ccca..6c672e9d7 100644
--- a/src/components/rules-creation-page/steps/MetadataStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataStep.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import i18n from "@dhis2/d2-i18n";
 import memoize from "nano-memoize";
-import { DatePicker, ObjectsTable } from "d2-ui-components";
+import { DatePicker, ObjectsTable, withSnackbar } from "d2-ui-components";
 import { Checkbox, FormControlLabel, withStyles } from "@material-ui/core";
 
 import Dropdown from "../../dropdown/Dropdown";
@@ -21,6 +21,7 @@ class MetadataStep extends React.Component {
         d2: PropTypes.object.isRequired,
         syncRule: PropTypes.object.isRequired,
         classes: PropTypes.object.isRequired,
+        snackbar: PropTypes.object.isRequired,
     };
 
     defaultModel = {
@@ -137,7 +138,19 @@ class MetadataStep extends React.Component {
     };
 
     changeSelection = selectedIds => {
-        this.props.syncRule.selectedIds = selectedIds;
+        const { selectedIds: oldSelection } = this.state;
+        const { snackbar, syncRule } = this.props;
+
+        const difference = selectedIds.length - oldSelection.length;
+        if (difference > 0) {
+            snackbar.info(i18n.t("Selected {{difference}} elements", { difference }));
+        } else if (difference < 0) {
+            snackbar.info(
+                i18n.t("Removed {{difference}} elements", { difference: Math.abs(difference) })
+            );
+        }
+
+        syncRule.selectedIds = selectedIds;
         this.setState({ selectedIds });
     };
 
@@ -267,4 +280,4 @@ class MetadataStep extends React.Component {
     }
 }
 
-export default withStyles(styles)(MetadataStep);
+export default withSnackbar(withStyles(styles)(MetadataStep));

From cdeef6b372bf8ed8a5aa34844ec4d246ec103fc7 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 11:48:18 +0200
Subject: [PATCH 05/21] Add cancel option in SaveStep

---
 i18n/en.pot                                   | 15 ++++++--
 .../rules-creation-page/SyncRulesWizard.jsx   |  2 +-
 .../steps/InstanceSelectionStep.jsx           |  2 +-
 ...dataStep.jsx => MetadataSelectionStep.jsx} |  4 +--
 .../rules-creation-page/steps/SaveStep.jsx    | 36 ++++++++++++++++---
 src/logic/metadata.ts                         |  1 -
 src/models/syncRule.ts                        | 10 +++++-
 src/utils/synchronization.ts                  |  6 ++--
 8 files changed, 61 insertions(+), 15 deletions(-)
 rename src/components/rules-creation-page/steps/{MetadataStep.jsx => MetadataSelectionStep.jsx} (98%)

diff --git a/i18n/en.pot b/i18n/en.pot
index e34d1ad08..8216ff92e 100644
--- a/i18n/en.pot
+++ b/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-25T09:20:27.053Z\n"
-"PO-Revision-Date: 2019-06-25T09:20:27.053Z\n"
+"POT-Creation-Date: 2019-06-25T09:40:48.702Z\n"
+"PO-Revision-Date: 2019-06-25T09:40:48.702Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -247,6 +247,17 @@ msgstr ""
 msgid "Only selected items"
 msgstr ""
 
+msgid "Cancel Sync Rule Creation?"
+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 "Deleting Sync Rules"
 msgstr ""
 
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index 1f579f580..ace313345 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -7,7 +7,7 @@ import { ConfirmationDialog, Wizard } from "d2-ui-components";
 import PageHeader from "../page-header/PageHeader";
 import GeneralInfoStep from "./steps/GeneralInfoStep";
 import SyncRule from "../../models/syncRule";
-import MetadataStep from "./steps/MetadataStep";
+import MetadataStep from "./steps/MetadataSelectionStep";
 import InstanceSelectionStep from "./steps/InstanceSelectionStep";
 import SaveStep from "./steps/SaveStep";
 
diff --git a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
index a06628a96..e0d8e3bee 100644
--- a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
@@ -18,7 +18,7 @@ const getInstances = memoize(async d2 => {
 
 const InstanceSelectionStep = props => {
     const { d2, syncRule } = props;
-    const [instanceOptions, setInstanceOptions] = useState();
+    const [instanceOptions, setInstanceOptions] = useState([]);
     const [selectedOptions, setSelectedOptions] = useState(syncRule.targetInstances);
 
     const changeInstances = instances => {
diff --git a/src/components/rules-creation-page/steps/MetadataStep.jsx b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
similarity index 98%
rename from src/components/rules-creation-page/steps/MetadataStep.jsx
rename to src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
index 6c672e9d7..2785312a1 100644
--- a/src/components/rules-creation-page/steps/MetadataStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
@@ -16,7 +16,7 @@ const styles = {
     },
 };
 
-class MetadataStep extends React.Component {
+class MetadataSelectionStep extends React.Component {
     static propTypes = {
         d2: PropTypes.object.isRequired,
         syncRule: PropTypes.object.isRequired,
@@ -280,4 +280,4 @@ class MetadataStep extends React.Component {
     }
 }
 
-export default withSnackbar(withStyles(styles)(MetadataStep));
+export default withSnackbar(withStyles(styles)(MetadataSelectionStep));
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index a219dd940..847bfbf5c 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -1,8 +1,12 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Button, LinearProgress, withStyles } from "@material-ui/core";
+import { ConfirmationDialog } from "d2-ui-components";
+import { withRouter } from "react-router-dom";
 import i18n from "@dhis2/d2-i18n";
 
+import { getMetadata } from "../../../utils/synchronization";
+
 const LiEntry = ({ label, value, children }) => {
     return (
         <li key={label}>
@@ -23,22 +27,43 @@ const styles = () => ({
 });
 
 const SaveStep = props => {
-    const { syncRule, classes } = props;
+    const { d2, syncRule, classes, history } = props;
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
     const [isSaving] = useState(false);
     const [errorMessage] = useState();
 
-    const cancel = () => {};
-    const save = () => {};
+    const openCancelDialog = () => setCancelDialogOpen(true);
+
+    const closeCancelDialog = () => setCancelDialogOpen(false);
+
+    const cancel = () => history.push("/synchronization-rules");
+
+    const save = async () => {
+        syncRule.metadata = await getMetadata(d2, syncRule.selectedIds, "id");
+        await syncRule.save(d2);
+        cancel();
+    };
 
     return (
         <React.Fragment>
+            <ConfirmationDialog
+                isOpen={cancelDialogOpen}
+                onSave={cancel}
+                onCancel={closeCancelDialog}
+                title={i18n.t("Cancel Sync Rule Creation?")}
+                description={i18n.t(
+                    "You are about to exit the Sync Rule Creation Wizard. All your changes will be lost. Are you sure you want to proceed?"
+                )}
+                saveText={i18n.t("Yes")}
+            />
+
             <ul>
                 <LiEntry label={i18n.t("Name")} value={syncRule.name} />
 
                 <LiEntry label={i18n.t("Description")} value={syncRule.description} />
             </ul>
 
-            <Button onClick={cancel} variant="contained">
+            <Button onClick={openCancelDialog} variant="contained">
                 {i18n.t("Cancel")}
             </Button>
             <Button className={classes.saveButton} onClick={save} variant="contained">
@@ -55,8 +80,9 @@ const SaveStep = props => {
 SaveStep.propTypes = {
     syncRule: PropTypes.object.isRequired,
     classes: PropTypes.object.isRequired,
+    history: PropTypes.object.isRequired,
 };
 
 SaveStep.defaultProps = {};
 
-export default withStyles(styles)(SaveStep);
+export default withRouter(withStyles(styles)(SaveStep));
diff --git a/src/logic/metadata.ts b/src/logic/metadata.ts
index 233d86d96..df8f3f2e0 100644
--- a/src/logic/metadata.ts
+++ b/src/logic/metadata.ts
@@ -21,7 +21,6 @@ export async function listByIds(
         fields ? fields.join(",") : d2BaseModelDetails.map(e => e.name).join(",")
     );
 
-    if (metadata.system) delete metadata.system;
     const objects = _(metadata)
         .mapValues((obj, key) => obj.map((el: any) => ({ ...el, metadataType: key })))
         .values()
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 7feb1d4f6..875e16f2d 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -4,7 +4,7 @@ import { generateUid } from "d2/uid";
 import { deleteData, getDataById, getPaginatedData } from "./dataStore";
 import { D2 } from "../types/d2";
 import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
-import { SynchronizationRule } from "../types/synchronization";
+import { MetadataPackage, SynchronizationRule } from "../types/synchronization";
 import Instance from "./instance";
 
 const dataStoreKey = "rules";
@@ -89,6 +89,14 @@ export default class SyncRule {
         this.syncRule.description = description;
     }
 
+    public get metadata(): MetadataPackage {
+        return this.syncRule.builder.metadata || {};
+    }
+
+    public set metadata(metadata: MetadataPackage) {
+        this.syncRule.builder.metadata = metadata;
+    }
+
     public async save(_d2: D2): Promise<void> {
         // TODO
     }
diff --git a/src/utils/synchronization.ts b/src/utils/synchronization.ts
index caa8409a9..ef47a553c 100644
--- a/src/utils/synchronization.ts
+++ b/src/utils/synchronization.ts
@@ -58,8 +58,10 @@ export async function getMetadata(
             })
         );
     }
-    const result = await Promise.all(promises);
-    return _.deepMerge({}, ...result.map(result => result.data));
+    const response = await Promise.all(promises);
+    const results = _.deepMerge({}, ...response.map(result => result.data));
+    if (results.system) delete results.system;
+    return results;
 }
 
 export async function postMetadata(

From 3c403560ec24795cf7ccbf50ca8ac236f15dca9c Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 11:51:14 +0200
Subject: [PATCH 06/21] Add save method to sync rule model

---
 src/models/syncRule.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 875e16f2d..3f92fe43e 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -1,7 +1,7 @@
 import _ from "lodash";
 import { generateUid } from "d2/uid";
 
-import { deleteData, getDataById, getPaginatedData } from "./dataStore";
+import { deleteData, getDataById, getPaginatedData, saveData } from "./dataStore";
 import { D2 } from "../types/d2";
 import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
 import { MetadataPackage, SynchronizationRule } from "../types/synchronization";
@@ -97,8 +97,15 @@ export default class SyncRule {
         this.syncRule.builder.metadata = metadata;
     }
 
-    public async save(_d2: D2): Promise<void> {
-        // TODO
+    public async save(d2: D2): Promise<void> {
+        console.debug("Start saving SyncReport to dataStore");
+        const exists = this.syncRule.id;
+        const element = exists ? this.syncRule : { ...this.syncRule, id: generateUid() };
+
+        if (exists) await this.remove(d2);
+        await saveData(d2, dataStoreKey, element);
+
+        console.debug("Finish saving SyncReport to dataStore", element);
     }
 
     public async remove(d2: D2): Promise<void> {

From 034bc4baf351b01d13e27010897ef856bdc0d4ff Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 12:01:46 +0200
Subject: [PATCH 07/21] Clean up code and fix sync rule edit

---
 i18n/en.pot                                               | 6 +++---
 src/components/app/Root.jsx                               | 2 +-
 src/components/rules-creation-page/SyncRulesWizard.jsx    | 4 ++--
 src/components/rules-creation-page/steps/SaveStep.jsx     | 2 +-
 .../{SyncRulesConfigurator.jsx => SyncRulesPage.jsx}      | 8 ++++----
 src/models/syncReport.ts                                  | 3 ---
 src/models/syncRule.ts                                    | 3 ---
 7 files changed, 11 insertions(+), 17 deletions(-)
 rename src/components/rules-list-page/{SyncRulesConfigurator.jsx => SyncRulesPage.jsx} (96%)

diff --git a/i18n/en.pot b/i18n/en.pot
index 8216ff92e..7359ce4eb 100644
--- a/i18n/en.pot
+++ b/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-25T09:40:48.702Z\n"
-"PO-Revision-Date: 2019-06-25T09:40:48.702Z\n"
+"POT-Creation-Date: 2019-06-25T09:54:15.635Z\n"
+"PO-Revision-Date: 2019-06-25T09:54:15.635Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -247,7 +247,7 @@ msgstr ""
 msgid "Only selected items"
 msgstr ""
 
-msgid "Cancel Sync Rule Creation?"
+msgid "Cancel synchronization rule wizard"
 msgstr ""
 
 msgid ""
diff --git a/src/components/app/Root.jsx b/src/components/app/Root.jsx
index fa97869d6..729056bca 100644
--- a/src/components/app/Root.jsx
+++ b/src/components/app/Root.jsx
@@ -11,7 +11,7 @@ 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/SyncRulesConfigurator";
+import SyncRulesConfigurator from "../rules-list-page/SyncRulesPage";
 
 class Root extends React.Component {
     static propTypes = {
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index ace313345..b2f722847 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -64,8 +64,8 @@ class SyncRulesWizard extends React.Component {
 
     componentDidMount = async () => {
         if (this.isEdit) {
-            const instance = await SyncRule.get(this.props.d2, this.id);
-            this.setState({ instance });
+            const syncRule = await SyncRule.get(this.props.d2, this.id);
+            this.setState({ syncRule });
         }
     };
 
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index 847bfbf5c..5a6df9b6a 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -50,7 +50,7 @@ const SaveStep = props => {
                 isOpen={cancelDialogOpen}
                 onSave={cancel}
                 onCancel={closeCancelDialog}
-                title={i18n.t("Cancel Sync Rule Creation?")}
+                title={i18n.t("Cancel synchronization rule wizard")}
                 description={i18n.t(
                     "You are about to exit the Sync Rule Creation Wizard. All your changes will be lost. Are you sure you want to proceed?"
                 )}
diff --git a/src/components/rules-list-page/SyncRulesConfigurator.jsx b/src/components/rules-list-page/SyncRulesPage.jsx
similarity index 96%
rename from src/components/rules-list-page/SyncRulesConfigurator.jsx
rename to src/components/rules-list-page/SyncRulesPage.jsx
index 5d1f7c03f..837dc6156 100644
--- a/src/components/rules-list-page/SyncRulesConfigurator.jsx
+++ b/src/components/rules-list-page/SyncRulesPage.jsx
@@ -13,7 +13,7 @@ const styles = () => ({
     tableContainer: { marginTop: -10 },
 });
 
-class SyncRulesConfigurator extends React.Component {
+class SyncRulesPage extends React.Component {
     static propTypes = {
         d2: PropTypes.object.isRequired,
         snackbar: PropTypes.object.isRequired,
@@ -97,7 +97,7 @@ class SyncRulesConfigurator extends React.Component {
             name: "edit",
             text: i18n.t("Edit"),
             multiple: false,
-            onClick: this.editInstance,
+            onClick: this.editRule,
         },
         {
             name: "details",
@@ -131,7 +131,7 @@ class SyncRulesConfigurator extends React.Component {
                     <ObjectsTable
                         key={tableKey}
                         d2={d2}
-                        model={SyncRulesConfigurator.model}
+                        model={SyncRulesPage.model}
                         columns={this.columns}
                         detailsFields={this.detailsFields}
                         pageSize={10}
@@ -162,4 +162,4 @@ class SyncRulesConfigurator extends React.Component {
     }
 }
 
-export default withLoading(withSnackbar(withRouter(withStyles(styles)(SyncRulesConfigurator))));
+export default withLoading(withSnackbar(withRouter(withStyles(styles)(SyncRulesPage))));
diff --git a/src/models/syncReport.ts b/src/models/syncReport.ts
index 7cb189461..c23099609 100644
--- a/src/models/syncReport.ts
+++ b/src/models/syncReport.ts
@@ -64,15 +64,12 @@ export default class SyncReport {
     }
 
     public async save(d2: D2): Promise<void> {
-        console.debug("Start saving SyncReport to dataStore");
         const exists = this.syncReport.id;
         const element = exists ? this.syncReport : { ...this.syncReport, id: generateUid() };
 
         if (exists) await this.remove(d2);
         await saveDataStore(d2, `${dataStoreKey}-${element.id}`, this.results);
         await saveData(d2, dataStoreKey, element);
-
-        console.debug("Finish saving SyncReport to dataStore", element);
     }
 
     public async remove(d2: D2): Promise<void> {
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 3f92fe43e..9013b9fde 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -98,14 +98,11 @@ export default class SyncRule {
     }
 
     public async save(d2: D2): Promise<void> {
-        console.debug("Start saving SyncReport to dataStore");
         const exists = this.syncRule.id;
         const element = exists ? this.syncRule : { ...this.syncRule, id: generateUid() };
 
         if (exists) await this.remove(d2);
         await saveData(d2, dataStoreKey, element);
-
-        console.debug("Finish saving SyncReport to dataStore", element);
     }
 
     public async remove(d2: D2): Promise<void> {

From 80f865cce149bcc68401254bdd5738326edb2aa8 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 14:58:11 +0200
Subject: [PATCH 08/21] Add summary to save step

---
 src/components/app/App.css                    |  4 ++
 .../steps/InstanceSelectionStep.jsx           |  9 ++-
 .../rules-creation-page/steps/SaveStep.jsx    | 55 +++++++++++++++++--
 3 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/src/components/app/App.css b/src/components/app/App.css
index 2aff3195c..b8088861a 100644
--- a/src/components/app/App.css
+++ b/src/components/app/App.css
@@ -8,6 +8,10 @@ body {
     margin: 0;
 }
 
+li {
+    line-height: 1.75;
+}
+
 .content {
     margin: 4rem 15px 15px;
 }
diff --git a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
index e0d8e3bee..68a0fd675 100644
--- a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
@@ -4,7 +4,7 @@ import memoize from "nano-memoize";
 import { MultiSelector } from "d2-ui-components";
 import Instance from "../../../models/instance";
 
-const getInstances = memoize(async d2 => {
+export const getInstances = memoize(async d2 => {
     const instances = await Instance.list(
         d2,
         { search: "" },
@@ -26,8 +26,13 @@ const InstanceSelectionStep = props => {
         syncRule.targetInstances = instances;
     };
 
+    const parseInstances = async () => {
+        const instances = await getInstances(d2);
+        setInstanceOptions(instances);
+    };
+
     useEffect(() => {
-        (async () => setInstanceOptions(await getInstances(d2)))();
+        parseInstances();
     }, [d2]);
 
     return (
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index 5a6df9b6a..953b4bb8f 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import _ from "lodash";
 import PropTypes from "prop-types";
 import { Button, LinearProgress, withStyles } from "@material-ui/core";
 import { ConfirmationDialog } from "d2-ui-components";
 import { withRouter } from "react-router-dom";
 import i18n from "@dhis2/d2-i18n";
 
+import { getInstances } from "./InstanceSelectionStep";
 import { getMetadata } from "../../../utils/synchronization";
 
 const LiEntry = ({ label, value, children }) => {
@@ -29,8 +31,15 @@ const styles = () => ({
 const SaveStep = props => {
     const { d2, syncRule, classes, history } = props;
     const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
-    const [isSaving] = useState(false);
-    const [errorMessage] = useState();
+    const [isSaving, setIsSaving] = useState(false);
+    const [metadata, updateMetadata] = useState({});
+    const [instanceOptions, setInstanceOptions] = useState([]);
+
+    const parseMetadata = async () => {
+        const metadata = await getMetadata(d2, syncRule.selectedIds, "id,name");
+        updateMetadata(metadata);
+        return metadata;
+    };
 
     const openCancelDialog = () => setCancelDialogOpen(true);
 
@@ -39,11 +48,25 @@ const SaveStep = props => {
     const cancel = () => history.push("/synchronization-rules");
 
     const save = async () => {
-        syncRule.metadata = await getMetadata(d2, syncRule.selectedIds, "id");
+        setIsSaving(true);
+
+        syncRule.metadata = metadata || (await parseMetadata());
         await syncRule.save(d2);
+
+        setIsSaving(false);
         cancel();
     };
 
+    const parseInstances = async () => {
+        const instances = await getInstances(d2);
+        setInstanceOptions(instances);
+    };
+
+    useEffect(() => {
+        parseMetadata();
+        parseInstances();
+    }, [syncRule]);
+
     return (
         <React.Fragment>
             <ConfirmationDialog
@@ -61,6 +84,28 @@ const SaveStep = props => {
                 <LiEntry label={i18n.t("Name")} value={syncRule.name} />
 
                 <LiEntry label={i18n.t("Description")} value={syncRule.description} />
+
+                {_.keys(metadata).map(metadataType => (
+                    <LiEntry key={metadataType} label={metadataType}>
+                        [{metadata[metadataType].length}]
+                        <ul>
+                            {metadata[metadataType].map(({ id, name }) => (
+                                <LiEntry key={id} label={`${name} (${id})`} />
+                            ))}
+                        </ul>
+                    </LiEntry>
+                ))}
+
+                <LiEntry label={i18n.t("Target instances [{{total}}]", { total: syncRule.targetInstances.length})}>
+                    <ul>
+                        {syncRule.targetInstances.map(id => {
+                            const instance = instanceOptions.find(e => e.value === id);
+                            return instance ? (
+                                <LiEntry key={instance.value} label={instance.text} />
+                            ) : null;
+                        })}
+                    </ul>
+                </LiEntry>
             </ul>
 
             <Button onClick={openCancelDialog} variant="contained">
@@ -71,8 +116,6 @@ const SaveStep = props => {
             </Button>
 
             {isSaving && <LinearProgress />}
-
-            <pre>{errorMessage}</pre>
         </React.Fragment>
     );
 };

From 9c51f26ffe95146f12aedbb08f320bfe2616695a Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Tue, 25 Jun 2019 15:41:25 +0200
Subject: [PATCH 09/21] Update translation strings

---
 i18n/en.pot                                          |  7 +++++--
 .../rules-creation-page/steps/SaveStep.jsx           | 12 +++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 7359ce4eb..fca9fa034 100644
--- a/i18n/en.pot
+++ b/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-25T09:54:15.635Z\n"
-"PO-Revision-Date: 2019-06-25T09:54:15.635Z\n"
+"POT-Creation-Date: 2019-06-25T13:40:41.166Z\n"
+"PO-Revision-Date: 2019-06-25T13:40:41.166Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -258,6 +258,9 @@ msgstr ""
 msgid "Yes"
 msgstr ""
 
+msgid "Target instances [{{total}}]"
+msgstr ""
+
 msgid "Deleting Sync Rules"
 msgstr ""
 
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index 953b4bb8f..df00f75ae 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -86,8 +86,10 @@ const SaveStep = props => {
                 <LiEntry label={i18n.t("Description")} value={syncRule.description} />
 
                 {_.keys(metadata).map(metadataType => (
-                    <LiEntry key={metadataType} label={metadataType}>
-                        [{metadata[metadataType].length}]
+                    <LiEntry
+                        key={metadataType}
+                        label={`${metadataType} [${metadata[metadataType].length}]`}
+                    >
                         <ul>
                             {metadata[metadataType].map(({ id, name }) => (
                                 <LiEntry key={id} label={`${name} (${id})`} />
@@ -96,7 +98,11 @@ const SaveStep = props => {
                     </LiEntry>
                 ))}
 
-                <LiEntry label={i18n.t("Target instances [{{total}}]", { total: syncRule.targetInstances.length})}>
+                <LiEntry
+                    label={i18n.t("Target instances [{{total}}]", {
+                        total: syncRule.targetInstances.length,
+                    })}
+                >
                     <ul>
                         {syncRule.targetInstances.map(id => {
                             const instance = instanceOptions.find(e => e.value === id);

From e7ce199b03f00f1c0887204a5be2779d8643e080 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 10:05:16 +0200
Subject: [PATCH 10/21] Updates to the synchronization rules page

---
 i18n/en.pot                                   | 16 +++--
 .../NotificationsPage.jsx                     | 19 +-----
 .../steps/MetadataSelectionStep.jsx           |  7 +-
 .../rules-creation-page/steps/SaveStep.jsx    |  4 +-
 .../rules-list-page/SyncRulesPage.jsx         | 67 +++++++++++++++++--
 src/components/sync-dialog/SyncDialog.jsx     |  5 +-
 src/models/syncRule.ts                        | 57 +++++++---------
 src/types/synchronization.d.ts                |  3 +-
 src/utils/d2-ui-components.tsx                | 17 +++++
 9 files changed, 127 insertions(+), 68 deletions(-)
 create mode 100644 src/utils/d2-ui-components.tsx

diff --git a/i18n/en.pot b/i18n/en.pot
index fca9fa034..326d0a8e6 100644
--- a/i18n/en.pot
+++ b/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-25T13:40:41.166Z\n"
-"PO-Revision-Date: 2019-06-25T13:40:41.166Z\n"
+"POT-Creation-Date: 2019-06-27T08:03:01.520Z\n"
+"PO-Revision-Date: 2019-06-27T08:03:01.520Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -261,6 +261,9 @@ msgstr ""
 msgid "Target instances [{{total}}]"
 msgstr ""
 
+msgid "Destination instances"
+msgstr ""
+
 msgid "Deleting Sync Rules"
 msgstr ""
 
@@ -272,6 +275,12 @@ msgid_plural "Successfully deleted {{count}} rules"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Synchronizing metadata"
+msgstr ""
+
+msgid "Failed to execute rule {{name}}"
+msgstr ""
+
 msgid "Execute"
 msgstr ""
 
@@ -283,9 +292,6 @@ msgid_plural "Are you sure you want to delete {{count}} rules?"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Synchronizing metadata"
-msgstr ""
-
 msgid "Synchronize Metadata"
 msgstr ""
 
diff --git a/src/components/notification-list-page/NotificationsPage.jsx b/src/components/notification-list-page/NotificationsPage.jsx
index 16d935854..c7f169dc3 100644
--- a/src/components/notification-list-page/NotificationsPage.jsx
+++ b/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 = [
diff --git a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
index 2785312a1..6863e5a8e 100644
--- a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
@@ -143,10 +143,13 @@ class MetadataSelectionStep extends React.Component {
 
         const difference = selectedIds.length - oldSelection.length;
         if (difference > 0) {
-            snackbar.info(i18n.t("Selected {{difference}} elements", { difference }));
+            snackbar.info(i18n.t("Selected {{difference}} elements", { difference }), {
+                autoHideDuration: 1000,
+            });
         } else if (difference < 0) {
             snackbar.info(
-                i18n.t("Removed {{difference}} elements", { difference: Math.abs(difference) })
+                i18n.t("Removed {{difference}} elements", { difference: Math.abs(difference) }),
+                { autoHideDuration: 1000 }
             );
         }
 
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index df00f75ae..91a0c02fa 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -88,7 +88,9 @@ const SaveStep = props => {
                 {_.keys(metadata).map(metadataType => (
                     <LiEntry
                         key={metadataType}
-                        label={`${metadataType} [${metadata[metadataType].length}]`}
+                        label={`${d2.models[metadataType].displayName} [${
+                            metadata[metadataType].length
+                        }]`}
                     >
                         <ul>
                             {metadata[metadataType].map(({ id, name }) => (
diff --git a/src/components/rules-list-page/SyncRulesPage.jsx b/src/components/rules-list-page/SyncRulesPage.jsx
index 837dc6156..e780af430 100644
--- a/src/components/rules-list-page/SyncRulesPage.jsx
+++ b/src/components/rules-list-page/SyncRulesPage.jsx
@@ -8,6 +8,11 @@ import { withStyles } from "@material-ui/core/styles";
 
 import PageHeader from "../page-header/PageHeader";
 import SyncRule from "../../models/syncRule";
+import Instance from "../../models/instance";
+import { getValueForCollection } from "../../utils/d2-ui-components";
+import { startSynchronization } from "../../logic/synchronization";
+import SyncReport from "../../models/syncReport";
+import SyncSummary from "../sync-summary/SyncSummary";
 
 const styles = () => ({
     tableContainer: { marginTop: -10 },
@@ -29,11 +34,29 @@ class SyncRulesPage extends React.Component {
     state = {
         tableKey: Math.random(),
         toDelete: null,
+        allInstances: [],
+        syncReport: SyncReport.create(),
+        syncSummaryOpen: false,
+    };
+
+    getValueForTargetInstances = ruleData => {
+        const { allInstances } = this.state;
+        const rule = SyncRule.build(ruleData);
+        return getValueForCollection(
+            rule.targetInstances
+                .map(id => allInstances.find(instance => instance.id === id))
+                .map(({ name }) => ({ name }))
+        );
     };
 
     columns = [
         { name: "name", text: i18n.t("Name"), sortable: true },
-        // TODO: Add description, origin and destination
+        {
+            name: "targetInstances",
+            text: i18n.t("Destination instances"),
+            sortable: false,
+            getValue: this.getValueForTargetInstances,
+        },
     ];
 
     initialSorting = ["name", "asc"];
@@ -41,9 +64,20 @@ class SyncRulesPage extends React.Component {
     detailsFields = [
         { name: "name", text: i18n.t("Name") },
         { name: "description", text: i18n.t("Description") },
-        // TODO: Add origin, destination
+        {
+            name: "targetInstances",
+            text: i18n.t("Destination instances"),
+            sortable: true,
+            getValue: this.getValueForTargetInstances,
+        },
     ];
 
+    async componentDidMount() {
+        const { d2 } = this.props;
+        const { objects: allInstances } = await Instance.list(d2, null, null);
+        this.setState({ allInstances });
+    }
+
     backHome = () => {
         this.props.history.push("/");
     };
@@ -88,10 +122,26 @@ class SyncRulesPage extends React.Component {
         this.props.history.push(`/synchronization-rules/edit/${rule.id}`);
     };
 
-    executeRule = _rule => {
-        // TODO
+    executeRule = async ({ builder, name }) => {
+        const { d2, loading } = this.props;
+        loading.show(true, i18n.t("Synchronizing metadata"));
+        try {
+            for await (const { message, syncReport, done } of startSynchronization(d2, builder)) {
+                if (message) loading.show(true, message);
+                if (syncReport) await syncReport.save(d2);
+                if (done && syncReport) {
+                    this.setState({ syncSummaryOpen: true, syncReport });
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            this.props.snackbar.error(i18n.t("Failed to execute rule {{name}}", { name }));
+        }
+        loading.reset();
     };
 
+    closeSummary = () => this.setState({ syncSummaryOpen: false });
+
     actions = [
         {
             name: "edit",
@@ -121,7 +171,7 @@ class SyncRulesPage extends React.Component {
     ];
 
     render() {
-        const { tableKey, toDelete } = this.state;
+        const { tableKey, toDelete, syncSummaryOpen, syncReport } = this.state;
         const { d2, classes } = this.props;
 
         return (
@@ -157,6 +207,13 @@ class SyncRulesPage extends React.Component {
                     }
                     saveText={i18n.t("Ok")}
                 />
+
+                <SyncSummary
+                    d2={d2}
+                    response={syncReport}
+                    isOpen={syncSummaryOpen}
+                    handleClose={this.closeSummary}
+                />
             </React.Fragment>
         );
     }
diff --git a/src/components/sync-dialog/SyncDialog.jsx b/src/components/sync-dialog/SyncDialog.jsx
index f697548bc..8aaf65182 100644
--- a/src/components/sync-dialog/SyncDialog.jsx
+++ b/src/components/sync-dialog/SyncDialog.jsx
@@ -45,10 +45,7 @@ class SyncDialog extends React.Component {
         loading.show(true, i18n.t("Synchronizing metadata"));
 
         try {
-            const builder = {
-                metadata: metadata,
-                targetInstances: targetInstances,
-            };
+            const builder = { metadata, targetInstances };
             for await (const { message, syncReport, done } of startSynchronization(d2, builder)) {
                 if (message) loading.show(true, message);
                 if (syncReport) await syncReport.save(d2);
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 9013b9fde..1b0d61256 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -5,24 +5,18 @@ import { deleteData, getDataById, getPaginatedData, saveData } from "./dataStore
 import { D2 } from "../types/d2";
 import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
 import { MetadataPackage, SynchronizationRule } from "../types/synchronization";
-import Instance from "./instance";
 
 const dataStoreKey = "rules";
 
 export default class SyncRule {
-    private readonly syncRule: SynchronizationRule;
+    private readonly _syncRule: SynchronizationRule;
+    private _selectedIds: string[];
 
     constructor(syncRule: SynchronizationRule) {
-        this.syncRule = {
+        this._selectedIds = [];
+        this._syncRule = {
             id: generateUid(),
-            ..._.pick(syncRule, [
-                "id",
-                "name",
-                "description",
-                "originInstance",
-                "builder",
-                "selectedIds",
-            ]),
+            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder"]),
         };
     }
 
@@ -31,12 +25,11 @@ export default class SyncRule {
             id: "",
             name: "",
             description: "",
-            originInstance: Instance.create(),
+            originInstance: "",
             builder: {
                 targetInstances: [],
                 metadata: {},
             },
-            selectedIds: [],
         });
     }
 
@@ -58,54 +51,54 @@ export default class SyncRule {
     }
 
     public set targetInstances(instances: string[]) {
-        this.syncRule.builder.targetInstances = instances;
+        this._syncRule.builder.targetInstances = instances;
     }
 
     public get targetInstances(): string[] {
-        return this.syncRule.builder.targetInstances;
-    }
-
-    public set selectedIds(selectedIds: string[]) {
-        this.syncRule.selectedIds = selectedIds;
-    }
-
-    public get selectedIds(): string[] {
-        return this.syncRule.selectedIds;
+        return this._syncRule.builder.targetInstances;
     }
 
     public set name(name: string) {
-        this.syncRule.name = name;
+        this._syncRule.name = name;
     }
 
     public get name(): string {
-        return this.syncRule.name;
+        return this._syncRule.name;
     }
 
     public get description(): string {
-        return this.syncRule.description || "";
+        return this._syncRule.description || "";
     }
 
     public set description(description: string) {
-        this.syncRule.description = description;
+        this._syncRule.description = description;
     }
 
     public get metadata(): MetadataPackage {
-        return this.syncRule.builder.metadata || {};
+        return this._syncRule.builder.metadata || {};
     }
 
     public set metadata(metadata: MetadataPackage) {
-        this.syncRule.builder.metadata = metadata;
+        this._syncRule.builder.metadata = metadata;
+    }
+
+    public get selectedIds(): string[] {
+        return this._selectedIds;
+    }
+
+    public set selectedIds(value: string[]) {
+        this._selectedIds = value;
     }
 
     public async save(d2: D2): Promise<void> {
-        const exists = this.syncRule.id;
-        const element = exists ? this.syncRule : { ...this.syncRule, id: generateUid() };
+        const exists = this._syncRule.id;
+        const element = exists ? this._syncRule : { ...this._syncRule, id: generateUid() };
 
         if (exists) await this.remove(d2);
         await saveData(d2, dataStoreKey, element);
     }
 
     public async remove(d2: D2): Promise<void> {
-        await deleteData(d2, dataStoreKey, this.syncRule);
+        await deleteData(d2, dataStoreKey, this._syncRule);
     }
 }
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index 62e7f5ece..579c128f8 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -57,7 +57,6 @@ export interface SynchronizationRule {
     id?: string;
     name: string;
     description?: string;
-    originInstance: Instance;
+    originInstance: string;
     builder: SynchronizationBuilder;
-    selectedIds: string[];
 }
diff --git a/src/utils/d2-ui-components.tsx b/src/utils/d2-ui-components.tsx
new file mode 100644
index 000000000..5a6bfed83
--- /dev/null
+++ b/src/utils/d2-ui-components.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+import _ from "lodash";
+
+export const getValueForCollection = (values: any): ReactNode => {
+    const namesToDisplay = _(values)
+        .map(value => value.displayName || value.name || value.id)
+        .compact()
+        .value();
+
+    return (
+        <ul>
+            {namesToDisplay.map(name => (
+                <li key={name}>{name}</li>
+            ))}
+        </ul>
+    );
+};

From f055e8088d16f1fb696dfdcae1ac57de43b89d79 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 10:15:55 +0200
Subject: [PATCH 11/21] Allow searching in sync rules table

---
 src/components/rules-list-page/SyncRulesPage.jsx | 5 +++--
 src/models/dataStore.ts                          | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/rules-list-page/SyncRulesPage.jsx b/src/components/rules-list-page/SyncRulesPage.jsx
index e780af430..c540fac1e 100644
--- a/src/components/rules-list-page/SyncRulesPage.jsx
+++ b/src/components/rules-list-page/SyncRulesPage.jsx
@@ -27,7 +27,9 @@ class SyncRulesPage extends React.Component {
     };
     static model = {
         modelValidations: {
-            // TODO: Update model validations
+            name: { type: "TEXT" },
+            description: { type: "TEXT" },
+            targetInstances: { type: "COLLECTION" },
         },
     };
 
@@ -188,7 +190,6 @@ class SyncRulesPage extends React.Component {
                         initialSorting={this.initialSorting}
                         actions={this.actions}
                         list={SyncRule.list}
-                        hideSearchBox={true}
                         onButtonClick={this.createRule}
                     />
                 </div>
diff --git a/src/models/dataStore.ts b/src/models/dataStore.ts
index 47c73c7ab..a31dea579 100644
--- a/src/models/dataStore.ts
+++ b/src/models/dataStore.ts
@@ -80,6 +80,7 @@ export async function getPaginatedData(
     const filteredData = _.filter(rawData, o =>
         _(o)
             .keys()
+            .filter(k => typeof o[k] === "string")
             .some(k => o[k].toLowerCase().includes(search ? search.toLowerCase() : ""))
     );
 

From f913eb1f3ef6fe21124f59d0bff3d5693d69477b Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 10:35:34 +0200
Subject: [PATCH 12/21] Allow filtering by target instance

---
 i18n/en.pot                                   |  7 +-
 src/components/dropdown/Dropdown.jsx          | 12 ++-
 .../rules-list-page/SyncRulesPage.jsx         | 40 ++++++++--
 src/models/syncRule.ts                        | 79 +++++++++++--------
 src/types/d2-ui-components.d.ts               |  4 +
 src/types/synchronization.d.ts                |  1 -
 6 files changed, 98 insertions(+), 45 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 326d0a8e6..3e18eda4d 100644
--- a/i18n/en.pot
+++ b/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-27T08:03:01.520Z\n"
-"PO-Revision-Date: 2019-06-27T08:03:01.520Z\n"
+"POT-Creation-Date: 2019-06-27T08:35:21.448Z\n"
+"PO-Revision-Date: 2019-06-27T08:35:21.448Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -284,6 +284,9 @@ msgstr ""
 msgid "Execute"
 msgstr ""
 
+msgid "Destination Instance"
+msgstr ""
+
 msgid "Delete Rules?"
 msgstr ""
 
diff --git a/src/components/dropdown/Dropdown.jsx b/src/components/dropdown/Dropdown.jsx
index 21af78951..5f6115fb9 100644
--- a/src/components/dropdown/Dropdown.jsx
+++ b/src/components/dropdown/Dropdown.jsx
@@ -62,7 +62,17 @@ export default function Dropdown({ items, value, onChange, label, hideEmpty }) {
         <MuiThemeProvider theme={materialTheme}>
             <FormControl>
                 <InputLabel>{label}</InputLabel>
-                <Select value={value} onChange={onChange}>
+                <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}>
diff --git a/src/components/rules-list-page/SyncRulesPage.jsx b/src/components/rules-list-page/SyncRulesPage.jsx
index c540fac1e..2a9ae7e77 100644
--- a/src/components/rules-list-page/SyncRulesPage.jsx
+++ b/src/components/rules-list-page/SyncRulesPage.jsx
@@ -13,6 +13,7 @@ import { getValueForCollection } from "../../utils/d2-ui-components";
 import { startSynchronization } from "../../logic/synchronization";
 import SyncReport from "../../models/syncReport";
 import SyncSummary from "../sync-summary/SyncSummary";
+import Dropdown from "../dropdown/Dropdown";
 
 const styles = () => ({
     tableContainer: { marginTop: -10 },
@@ -37,9 +38,11 @@ class SyncRulesPage extends React.Component {
         tableKey: Math.random(),
         toDelete: null,
         allInstances: [],
+        targetInstanceFilter: "",
         syncReport: SyncReport.create(),
         syncSummaryOpen: false,
     };
+    initialSorting = ["name", "asc"];
 
     getValueForTargetInstances = ruleData => {
         const { allInstances } = this.state;
@@ -60,9 +63,6 @@ class SyncRulesPage extends React.Component {
             getValue: this.getValueForTargetInstances,
         },
     ];
-
-    initialSorting = ["name", "asc"];
-
     detailsFields = [
         { name: "name", text: i18n.t("Name") },
         { name: "description", text: i18n.t("Description") },
@@ -142,8 +142,6 @@ class SyncRulesPage extends React.Component {
         loading.reset();
     };
 
-    closeSummary = () => this.setState({ syncSummaryOpen: false });
-
     actions = [
         {
             name: "edit",
@@ -172,8 +170,36 @@ class SyncRulesPage extends React.Component {
         },
     ];
 
+    closeSummary = () => this.setState({ syncSummaryOpen: false });
+
+    changeInstanceFilter = event => this.setState({ targetInstanceFilter: event.target.value });
+
+    renderCustomFilters = () => {
+        const { allInstances, targetInstanceFilter } = this.state;
+
+        console.log(targetInstanceFilter);
+
+        return (
+            <React.Fragment>
+                <Dropdown
+                    key={"target-instance-filter"}
+                    items={allInstances}
+                    onChange={this.changeInstanceFilter}
+                    value={targetInstanceFilter}
+                    label={i18n.t("Destination Instance")}
+                />
+            </React.Fragment>
+        );
+    };
+
     render() {
-        const { tableKey, toDelete, syncSummaryOpen, syncReport } = this.state;
+        const {
+            tableKey,
+            toDelete,
+            syncSummaryOpen,
+            syncReport,
+            targetInstanceFilter,
+        } = this.state;
         const { d2, classes } = this.props;
 
         return (
@@ -191,6 +217,8 @@ class SyncRulesPage extends React.Component {
                         actions={this.actions}
                         list={SyncRule.list}
                         onButtonClick={this.createRule}
+                        customFiltersComponent={this.renderCustomFilters}
+                        customFilters={{ targetInstanceFilter }}
                     />
                 </div>
 
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 1b0d61256..f827d84b4 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -3,7 +3,7 @@ import { generateUid } from "d2/uid";
 
 import { deleteData, getDataById, getPaginatedData, saveData } from "./dataStore";
 import { D2 } from "../types/d2";
-import { TableFilters, TableList, TablePagination } from "../types/d2-ui-components";
+import { SyncRuleTableFilters, TableList, TablePagination } from "../types/d2-ui-components";
 import { MetadataPackage, SynchronizationRule } from "../types/synchronization";
 
 const dataStoreKey = "rules";
@@ -20,52 +20,30 @@ export default class SyncRule {
         };
     }
 
-    public static create(): SyncRule {
-        return new SyncRule({
-            id: "",
-            name: "",
-            description: "",
-            originInstance: "",
-            builder: {
-                targetInstances: [],
-                metadata: {},
-            },
-        });
-    }
-
-    public static build(syncRule: SynchronizationRule | undefined): SyncRule {
-        return syncRule ? new SyncRule(syncRule) : this.create();
+    public get selectedIds(): string[] {
+        return this._selectedIds;
     }
 
-    public static async get(d2: D2, id: string): Promise<SyncRule> {
-        const data = await getDataById(d2, dataStoreKey, id);
-        return this.build(data);
+    public set selectedIds(value: string[]) {
+        this._selectedIds = value;
     }
 
-    public static async list(
-        d2: D2,
-        filters: TableFilters,
-        pagination: TablePagination
-    ): Promise<TableList> {
-        return getPaginatedData(d2, dataStoreKey, filters, pagination);
+    public get targetInstances(): string[] {
+        return this._syncRule.builder.targetInstances;
     }
 
     public set targetInstances(instances: string[]) {
         this._syncRule.builder.targetInstances = instances;
     }
 
-    public get targetInstances(): string[] {
-        return this._syncRule.builder.targetInstances;
+    public get name(): string {
+        return this._syncRule.name;
     }
 
     public set name(name: string) {
         this._syncRule.name = name;
     }
 
-    public get name(): string {
-        return this._syncRule.name;
-    }
-
     public get description(): string {
         return this._syncRule.description || "";
     }
@@ -82,12 +60,43 @@ export default class SyncRule {
         this._syncRule.builder.metadata = metadata;
     }
 
-    public get selectedIds(): string[] {
-        return this._selectedIds;
+    public static create(): SyncRule {
+        return new SyncRule({
+            id: "",
+            name: "",
+            description: "",
+            originInstance: "",
+            builder: {
+                targetInstances: [],
+                metadata: {},
+            },
+        });
     }
 
-    public set selectedIds(value: string[]) {
-        this._selectedIds = value;
+    public static build(syncRule: SynchronizationRule | undefined): SyncRule {
+        return syncRule ? new SyncRule(syncRule) : this.create();
+    }
+
+    public static async get(d2: D2, id: string): Promise<SyncRule> {
+        const data = await getDataById(d2, dataStoreKey, id);
+        return this.build(data);
+    }
+
+    public static async list(
+        d2: D2,
+        filters: SyncRuleTableFilters,
+        pagination: TablePagination
+    ): Promise<TableList> {
+        const { targetInstanceFilter } = filters;
+        const data = await getPaginatedData(d2, dataStoreKey, filters, pagination);
+        return targetInstanceFilter
+            ? {
+                  ...data,
+                  objects: _.filter(data.objects, e =>
+                      e.builder.targetInstances.includes(targetInstanceFilter)
+                  ),
+              }
+            : data;
     }
 
     public async save(d2: D2): Promise<void> {
diff --git a/src/types/d2-ui-components.d.ts b/src/types/d2-ui-components.d.ts
index 95494ee78..21400f9cd 100644
--- a/src/types/d2-ui-components.d.ts
+++ b/src/types/d2-ui-components.d.ts
@@ -27,6 +27,10 @@ export interface SyncReportTableFilters extends TableFilters {
     statusFilter?: string;
 }
 
+export interface SyncRuleTableFilters extends TableFilters {
+    targetInstanceFilter?: string;
+}
+
 export interface TablePagination {
     page?: number;
     pageSize?: number;
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index 579c128f8..c28b6788c 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -1,6 +1,5 @@
 import { MetadataImportResponse, MetadataImportStats } from "./d2";
 import SyncReport from "../models/syncReport";
-import Instance from "../models/instance";
 
 export interface SynchronizationBuilder {
     targetInstances: string[];

From e253b31d8d01639279efac942217fd0212660bf8 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 10:49:44 +0200
Subject: [PATCH 13/21] Remove debug string

---
 src/components/rules-list-page/SyncRulesPage.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/rules-list-page/SyncRulesPage.jsx b/src/components/rules-list-page/SyncRulesPage.jsx
index 2a9ae7e77..21fb9814c 100644
--- a/src/components/rules-list-page/SyncRulesPage.jsx
+++ b/src/components/rules-list-page/SyncRulesPage.jsx
@@ -177,8 +177,6 @@ class SyncRulesPage extends React.Component {
     renderCustomFilters = () => {
         const { allInstances, targetInstanceFilter } = this.state;
 
-        console.log(targetInstanceFilter);
-
         return (
             <React.Fragment>
                 <Dropdown

From 0dc04a3580178ea1a1a92666974f3fa8f4910254 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 11:09:28 +0200
Subject: [PATCH 14/21] Add validation rules

---
 i18n/en.pot                                   |  7 +++--
 .../rules-creation-page/SyncRulesWizard.jsx   | 13 ++++++--
 .../steps/GeneralInfoStep.jsx                 |  5 ++--
 src/models/syncRule.ts                        | 30 +++++++++++++++++++
 src/utils/validations.js                      |  5 ++--
 5 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 3e18eda4d..88c557a4b 100644
--- a/i18n/en.pot
+++ b/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-27T08:35:21.448Z\n"
-"PO-Revision-Date: 2019-06-27T08:35:21.448Z\n"
+"POT-Creation-Date: 2019-06-27T09:09:40.635Z\n"
+"PO-Revision-Date: 2019-06-27T09:09:40.635Z\n"
 
 msgid "<No value>"
 msgstr ""
@@ -405,3 +405,6 @@ msgstr ""
 
 msgid "This URL and username combination already exists"
 msgstr ""
+
+msgid "You need to select at least one element"
+msgstr ""
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index b2f722847..fa56da5fd 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -10,6 +10,7 @@ import SyncRule from "../../models/syncRule";
 import MetadataStep from "./steps/MetadataSelectionStep";
 import InstanceSelectionStep from "./steps/InstanceSelectionStep";
 import SaveStep from "./steps/SaveStep";
+import { getValidationMessages } from "../../utils/validations";
 
 class SyncRulesWizard extends React.Component {
     static propTypes = {
@@ -86,7 +87,13 @@ class SyncRulesWizard extends React.Component {
         this.setState({ instance });
     };
 
-    switchStep = () => {};
+    onStepChangeRequest = async currentStep => {
+        return getValidationMessages(
+            this.props.d2,
+            this.state.syncRule,
+            currentStep.validationKeys
+        );
+    };
 
     render() {
         const { dialogOpen, syncRule } = this.state;
@@ -105,7 +112,6 @@ class SyncRulesWizard extends React.Component {
             props: {
                 d2,
                 syncRule,
-                //onChange: this.onChange(step),
                 onCancel: this.handleConfirm,
             },
         }));
@@ -124,7 +130,8 @@ class SyncRulesWizard extends React.Component {
                 <PageHeader title={title} onBackClick={this.cancelSave} />
 
                 <Wizard
-                    onStepChangeRequest={this.switchStep}
+                    useSnackFeedback={true}
+                    onStepChangeRequest={this.onStepChangeRequest}
                     initialStepKey={steps[0].key}
                     steps={steps}
                 />
diff --git a/src/components/rules-creation-page/steps/GeneralInfoStep.jsx b/src/components/rules-creation-page/steps/GeneralInfoStep.jsx
index 6eb257572..fd5d52c56 100644
--- a/src/components/rules-creation-page/steps/GeneralInfoStep.jsx
+++ b/src/components/rules-creation-page/steps/GeneralInfoStep.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { FormBuilder, Validators } from "@dhis2/d2-ui-forms";
 import { TextField } from "@dhis2/d2-ui-core";
@@ -6,7 +6,6 @@ import i18n from "@dhis2/d2-i18n";
 
 const GeneralInfoStep = props => {
     const { syncRule } = props;
-    const [, setFormReference] = useState(); // TODO: Form reference will be used for validations
 
     const fields = [
         {
@@ -46,7 +45,7 @@ const GeneralInfoStep = props => {
         props.syncRule[field] = value;
     };
 
-    return <FormBuilder fields={fields} onUpdateField={updateFields} ref={setFormReference} />;
+    return <FormBuilder fields={fields} onUpdateField={updateFields} />;
 };
 
 GeneralInfoStep.propTypes = {
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index f827d84b4..83f9dc91c 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -5,6 +5,7 @@ import { deleteData, getDataById, getPaginatedData, saveData } from "./dataStore
 import { D2 } from "../types/d2";
 import { SyncRuleTableFilters, TableList, TablePagination } from "../types/d2-ui-components";
 import { MetadataPackage, SynchronizationRule } from "../types/synchronization";
+import { Validation } from "../types/validations";
 
 const dataStoreKey = "rules";
 
@@ -110,4 +111,33 @@ export default class SyncRule {
     public async remove(d2: D2): Promise<void> {
         await deleteData(d2, dataStoreKey, this._syncRule);
     }
+
+    public async validate(): Promise<Validation> {
+        return _.pickBy({
+            name: _.compact([
+                !this.name.trim()
+                    ? {
+                          key: "cannot_be_blank",
+                          namespace: { field: "name" },
+                      }
+                    : null,
+            ]),
+            selectedIds: _.compact([
+                this._selectedIds.length === 0
+                    ? {
+                          key: "cannot_be_empty",
+                          namespace: {},
+                      }
+                    : null,
+            ]),
+            targetInstances: _.compact([
+                this.targetInstances.length === 0
+                    ? {
+                          key: "cannot_be_empty",
+                          namespace: {},
+                      }
+                    : null,
+            ]),
+        });
+    }
 }
diff --git a/src/utils/validations.js b/src/utils/validations.js
index 01e649e3e..6999e0d0c 100644
--- a/src/utils/validations.js
+++ b/src/utils/validations.js
@@ -5,10 +5,11 @@ const translations = {
     cannot_be_blank: namespace => i18n.t("Field {{field}} cannot be blank", namespace),
     url_username_combo_already_exists: () =>
         i18n.t("This URL and username combination already exists"),
+    cannot_be_empty: () => i18n.t("You need to select at least one element"),
 };
 
-export async function getValidationMessages(d2, instance, validationKeys) {
-    const validationObj = await instance.validate(d2);
+export async function getValidationMessages(d2, model, validationKeys) {
+    const validationObj = await model.validate(d2);
 
     return _(validationObj)
         .at(validationKeys)

From 3cd123c8a767f8346f01752d665d050f2a881d6e Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 13:13:56 +0200
Subject: [PATCH 15/21] Add back selectedIds to syncRule

---
 src/models/syncRule.ts         | 37 +++++++++++++++++-----------------
 src/types/synchronization.d.ts |  1 +
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 83f9dc91c..364d8543d 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -10,55 +10,53 @@ import { Validation } from "../types/validations";
 const dataStoreKey = "rules";
 
 export default class SyncRule {
-    private readonly _syncRule: SynchronizationRule;
-    private _selectedIds: string[];
+    private readonly syncRule: SynchronizationRule;
 
     constructor(syncRule: SynchronizationRule) {
-        this._selectedIds = [];
-        this._syncRule = {
+        this.syncRule = {
             id: generateUid(),
-            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder"]),
+            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder", "selectedIds"]),
         };
     }
 
     public get selectedIds(): string[] {
-        return this._selectedIds;
+        return this.syncRule.selectedIds;
     }
 
     public set selectedIds(value: string[]) {
-        this._selectedIds = value;
+        this.syncRule.selectedIds = value;
     }
 
     public get targetInstances(): string[] {
-        return this._syncRule.builder.targetInstances;
+        return this.syncRule.builder.targetInstances;
     }
 
     public set targetInstances(instances: string[]) {
-        this._syncRule.builder.targetInstances = instances;
+        this.syncRule.builder.targetInstances = instances;
     }
 
     public get name(): string {
-        return this._syncRule.name;
+        return this.syncRule.name;
     }
 
     public set name(name: string) {
-        this._syncRule.name = name;
+        this.syncRule.name = name;
     }
 
     public get description(): string {
-        return this._syncRule.description || "";
+        return this.syncRule.description || "";
     }
 
     public set description(description: string) {
-        this._syncRule.description = description;
+        this.syncRule.description = description;
     }
 
     public get metadata(): MetadataPackage {
-        return this._syncRule.builder.metadata || {};
+        return this.syncRule.builder.metadata || {};
     }
 
     public set metadata(metadata: MetadataPackage) {
-        this._syncRule.builder.metadata = metadata;
+        this.syncRule.builder.metadata = metadata;
     }
 
     public static create(): SyncRule {
@@ -71,6 +69,7 @@ export default class SyncRule {
                 targetInstances: [],
                 metadata: {},
             },
+            selectedIds: []
         });
     }
 
@@ -101,15 +100,15 @@ export default class SyncRule {
     }
 
     public async save(d2: D2): Promise<void> {
-        const exists = this._syncRule.id;
-        const element = exists ? this._syncRule : { ...this._syncRule, id: generateUid() };
+        const exists = this.syncRule.id;
+        const element = exists ? this.syncRule : { ...this.syncRule, id: generateUid() };
 
         if (exists) await this.remove(d2);
         await saveData(d2, dataStoreKey, element);
     }
 
     public async remove(d2: D2): Promise<void> {
-        await deleteData(d2, dataStoreKey, this._syncRule);
+        await deleteData(d2, dataStoreKey, this.syncRule);
     }
 
     public async validate(): Promise<Validation> {
@@ -123,7 +122,7 @@ export default class SyncRule {
                     : null,
             ]),
             selectedIds: _.compact([
-                this._selectedIds.length === 0
+                this.selectedIds.length === 0
                     ? {
                           key: "cannot_be_empty",
                           namespace: {},
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index c28b6788c..9659668ba 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -58,4 +58,5 @@ export interface SynchronizationRule {
     description?: string;
     originInstance: string;
     builder: SynchronizationBuilder;
+    selectedIds: string[];
 }

From 5ce28168ddf299c7e9822c74a8059c5f6b5ae0c1 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Thu, 27 Jun 2019 13:52:49 +0200
Subject: [PATCH 16/21] Add stepper links

---
 .../rules-creation-page/SyncRulesWizard.jsx           | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index fa56da5fd..f3a7093b7 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -97,7 +97,7 @@ class SyncRulesWizard extends React.Component {
 
     render() {
         const { dialogOpen, syncRule } = this.state;
-        const { d2 } = this.props;
+        const { d2, location } = this.props;
 
         const title = !this.isEdit
             ? i18n.t("New synchronization rule")
@@ -116,6 +116,12 @@ class SyncRulesWizard extends React.Component {
             },
         }));
 
+        const urlHash = location.hash.slice(1);
+        const stepExists = steps.find(step => step.key === urlHash);
+        const firstStepKey = steps.map(step => step.key)[0];
+        const initialStepKey = stepExists ? urlHash : firstStepKey;
+        const lastClickableStepIndex = this.isEdit ? steps.length - 1 : 0;
+
         return (
             <React.Fragment>
                 <ConfirmationDialog
@@ -132,7 +138,8 @@ class SyncRulesWizard extends React.Component {
                 <Wizard
                     useSnackFeedback={true}
                     onStepChangeRequest={this.onStepChangeRequest}
-                    initialStepKey={steps[0].key}
+                    initialStepKey={initialStepKey}
+                    lastClickableStepIndex={lastClickableStepIndex}
                     steps={steps}
                 />
             </React.Fragment>

From aa2a26cb75a85a46133b4982c0e06771ff5963bb Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Fri, 28 Jun 2019 09:51:53 +0200
Subject: [PATCH 17/21] Update nano-memoize to 1.1.4 (fixes string cache bug in
 1.1.3)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 81ec759bf..81779dc8b 100644
--- a/package.json
+++ b/package.json
@@ -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.4",
     "postcss-rtl": "^1.3.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
diff --git a/yarn.lock b/yarn.lock
index f2f6e1c06..e2f65e016 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9267,10 +9267,10 @@ nan@^2.12.1, nan@^2.13.2, nan@^2.9.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nano-memoize@^1.0.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.3.tgz#3ce885f76898384ac78d39fe185b6419f71f8e12"
-  integrity sha512-+0yGTtwV70h7GourgGsy/AlxrQxqIvJdJjMCuBln+v9lc+u+STuEAscPc4YLgT7uVc+Su/osREG1Do9C/L5OVA==
+nano-memoize@1.1.4, nano-memoize@^1.0.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.4.tgz#3b3898e1796894e1f6c1e1ceb53c15c31e59ac3b"
+  integrity sha512-UxbdOzIrAvFJbUp9MKYGG0mmHBHBVoSn7BFNkwVL3cE6F351exdbwcG6gTxN5JSQ0heGMQm+QLkqcyI8oqQp3w==
 
 nanomatch@^1.2.9:
   version "1.2.13"

From 42d75dd7669908a377a1a1c837cbbf44fcdda56f Mon Sep 17 00:00:00 2001
From: Arnau Sanchez <pyarnau@gmail.com>
Date: Fri, 28 Jun 2019 10:53:35 +0200
Subject: [PATCH 18/21] Run prettier

---
 src/models/syncRule.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 364d8543d..d80d15434 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -15,7 +15,14 @@ export default class SyncRule {
     constructor(syncRule: SynchronizationRule) {
         this.syncRule = {
             id: generateUid(),
-            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder", "selectedIds"]),
+            ..._.pick(syncRule, [
+                "id",
+                "name",
+                "description",
+                "originInstance",
+                "builder",
+                "selectedIds",
+            ]),
         };
     }
 
@@ -69,7 +76,7 @@ export default class SyncRule {
                 targetInstances: [],
                 metadata: {},
             },
-            selectedIds: []
+            selectedIds: [],
         });
     }
 

From bfeeffaa411088f0db005e11d2943477e3c8c6f3 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Fri, 28 Jun 2019 18:42:43 +0200
Subject: [PATCH 19/21] Fixes from code review

---
 i18n/en.pot                                   |  7 +-
 package.json                                  |  2 +-
 .../InstanceCreationPage.jsx                  |  6 +-
 .../rules-creation-page/SyncRulesWizard.jsx   | 72 +++++++++----------
 .../steps/InstanceSelectionStep.jsx           |  7 +-
 .../steps/MetadataSelectionStep.jsx           | 64 +++++++++++------
 .../rules-creation-page/steps/SaveStep.jsx    | 16 ++---
 .../OrganisationUnitPage.jsx                  |  2 +-
 src/models/d2Model.ts                         |  4 +-
 src/models/instance.ts                        |  2 +-
 src/models/syncReport.ts                      |  2 +-
 src/models/syncRule.ts                        | 56 +++++++--------
 src/types/d2-ui-components.d.ts               |  2 +-
 src/types/synchronization.d.ts                |  1 -
 yarn.lock                                     |  7 +-
 15 files changed, 131 insertions(+), 119 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 88c557a4b..3d40ab88f 100644
--- a/i18n/en.pot
+++ b/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-27T09:09:40.635Z\n"
-"PO-Revision-Date: 2019-06-27T09:09:40.635Z\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 ""
 
diff --git a/package.json b/package.json
index 81779dc8b..da1ddd8d3 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "jest": "^23.6.0",
     "lodash": "^4.17.11",
     "material-ui": "^0.20.2",
-    "nano-memoize": "1.1.4",
+    "nano-memoize": "^1.1.5",
     "postcss-rtl": "^1.3.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
diff --git a/src/components/instance-creation-page/InstanceCreationPage.jsx b/src/components/instance-creation-page/InstanceCreationPage.jsx
index 3ad89af80..e110618ba 100644
--- a/src/components/instance-creation-page/InstanceCreationPage.jsx
+++ b/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}
diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index f3a7093b7..8c57d99b9 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -26,42 +26,40 @@ class SyncRulesWizard extends React.Component {
     id = this.props.match.params.id;
     isEdit = this.props.match.params.action === "edit" && this.id;
 
-    static getStepsBaseInfo() {
-        return [
-            {
-                key: "general-info",
-                label: i18n.t("General info"),
-                component: GeneralInfoStep,
-                validationKeys: ["name"],
-                description: undefined,
-                help: undefined,
-            },
-            {
-                key: "metadata",
-                label: i18n.t("Metadata"),
-                component: MetadataStep,
-                validationKeys: ["selectedIds"],
-                description: undefined,
-                help: undefined,
-            },
-            {
-                key: "instance-selection",
-                label: i18n.t("Instance Selection"),
-                component: InstanceSelectionStep,
-                validationKeys: ["targetInstances"],
-                description: undefined,
-                help: undefined,
-            },
-            {
-                key: "summary",
-                label: i18n.t("Summary"),
-                component: SaveStep,
-                validationKeys: [],
-                description: undefined,
-                help: undefined,
-            },
-        ];
-    }
+    static getStepsBaseInfo = [
+        {
+            key: "general-info",
+            label: i18n.t("General info"),
+            component: GeneralInfoStep,
+            validationKeys: ["name"],
+            description: undefined,
+            help: undefined,
+        },
+        {
+            key: "metadata",
+            label: i18n.t("Metadata"),
+            component: MetadataStep,
+            validationKeys: ["selectedIds"],
+            description: undefined,
+            help: undefined,
+        },
+        {
+            key: "instance-selection",
+            label: i18n.t("Instance Selection"),
+            component: InstanceSelectionStep,
+            validationKeys: ["targetInstances"],
+            description: undefined,
+            help: undefined,
+        },
+        {
+            key: "summary",
+            label: i18n.t("Summary"),
+            component: SaveStep,
+            validationKeys: [],
+            description: undefined,
+            help: undefined,
+        },
+    ];
 
     componentDidMount = async () => {
         if (this.isEdit) {
@@ -107,7 +105,7 @@ class SyncRulesWizard extends React.Component {
             ? i18n.t("Cancel synchronization rule creation")
             : i18n.t("Cancel synchronization rule editing");
 
-        const steps = SyncRulesWizard.getStepsBaseInfo().map(step => ({
+        const steps = SyncRulesWizard.getStepsBaseInfo.map(step => ({
             ...step,
             props: {
                 d2,
diff --git a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
index 68a0fd675..e22ea3dd1 100644
--- a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import memoize from "nano-memoize";
 import { MultiSelector } from "d2-ui-components";
 import Instance from "../../../models/instance";
 
-export const getInstances = memoize(async d2 => {
+export const getInstances = async d2 => {
     const instances = await Instance.list(
         d2,
         { search: "" },
@@ -14,7 +13,7 @@ export const getInstances = memoize(async d2 => {
         value: instance.id,
         text: `${instance.name} (${instance.url} with user ${instance.username})`,
     }));
-});
+};
 
 const InstanceSelectionStep = props => {
     const { d2, syncRule } = props;
@@ -23,7 +22,7 @@ const InstanceSelectionStep = props => {
 
     const changeInstances = instances => {
         setSelectedOptions(instances);
-        syncRule.targetInstances = instances;
+        syncRule.updateTargetInstances(instances);
     };
 
     const parseInstances = async () => {
diff --git a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
index 6863e5a8e..3e19b0f91 100644
--- a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import i18n from "@dhis2/d2-i18n";
 import memoize from "nano-memoize";
+import _ from "lodash";
 import { DatePicker, ObjectsTable, withSnackbar } from "d2-ui-components";
 import { Checkbox, FormControlLabel, withStyles } from "@material-ui/core";
 
@@ -57,12 +58,13 @@ class MetadataSelectionStep extends React.Component {
             lastUpdatedDate: null,
             groupFilter: null,
             levelFilter: null,
-            showOnlySelectedItems: this.props.syncRule.selectedIds.length > 0,
             metadataType: "",
         },
         groupFilterData: [],
         levelFilterData: [],
-        selectedIds: this.props.syncRule.selectedIds,
+        selectedIds: [],
+        showOnlySelectedItems: false,
+        tableKey: Math.random(),
     };
 
     models = [
@@ -92,6 +94,7 @@ class MetadataSelectionStep extends React.Component {
             type: "details",
         },
     ];
+
     updateFilterData = memoize(async model => {
         const { d2 } = this.props;
         const newState = {};
@@ -122,6 +125,11 @@ class MetadataSelectionStep extends React.Component {
         return newState;
     });
 
+    componentDidMount() {
+        const { selectedIds } = this.props.syncRule;
+        this.setState({ selectedIds, showOnlySelectedItems: selectedIds.length > 0 });
+    }
+
     componentDidUpdate = async (prevProps, prevState) => {
         const { model, filters } = this.state;
 
@@ -138,22 +146,32 @@ class MetadataSelectionStep extends React.Component {
     };
 
     changeSelection = selectedIds => {
-        const { selectedIds: oldSelection } = this.state;
-        const { snackbar, syncRule } = this.props;
+        const { selectedIds: oldSelection, model } = this.state;
+        const { d2, snackbar, syncRule } = this.props;
+        const type = model.getD2Model(d2).plural;
 
-        const difference = selectedIds.length - oldSelection.length;
-        if (difference > 0) {
-            snackbar.info(i18n.t("Selected {{difference}} elements", { difference }), {
-                autoHideDuration: 1000,
-            });
-        } else if (difference < 0) {
+        const additions = _.difference(selectedIds, oldSelection);
+        if (additions.length > 0) {
+            syncRule.addMetadataIds(type, additions);
+            snackbar.info(
+                i18n.t("Selected {{difference}} elements", { difference: additions.length }),
+                {
+                    autoHideDuration: 1000,
+                }
+            );
+        }
+
+        const removals = _.difference(oldSelection, selectedIds);
+        if (removals.length > 0) {
+            syncRule.removeMetadataIds(removals);
             snackbar.info(
-                i18n.t("Removed {{difference}} elements", { difference: Math.abs(difference) }),
+                i18n.t("Removed {{difference}} elements", {
+                    difference: Math.abs(removals.length),
+                }),
                 { autoHideDuration: 1000 }
             );
         }
 
-        syncRule.selectedIds = selectedIds;
         this.setState({ selectedIds });
     };
 
@@ -185,14 +203,19 @@ class MetadataSelectionStep extends React.Component {
     };
 
     showSelectedItems = event => {
-        const { filters } = this.state;
-        this.setState({ filters: { ...filters, showOnlySelectedItems: event.target.checked } });
+        this.setState({ showOnlySelectedItems: event.target.checked, tableKey: Math.random() });
     };
 
     renderCustomFilters = () => {
         const { d2, classes } = this.props;
-        const { model, groupFilterData, levelFilterData, filters } = this.state;
-        const { lastUpdatedDate, groupFilter, levelFilter, showOnlySelectedItems } = filters;
+        const {
+            model,
+            groupFilterData,
+            levelFilterData,
+            filters,
+            showOnlySelectedItems,
+        } = this.state;
+        const { lastUpdatedDate, groupFilter, levelFilter } = filters;
         const displayName = model.getD2Model(d2).displayName;
 
         return (
@@ -251,10 +274,10 @@ class MetadataSelectionStep extends React.Component {
     };
 
     list = (...params) => {
-        const { model, selectedIds, filters } = this.state;
-        const { showOnlySelectedItems } = filters;
+        const { syncRule } = this.props;
+        const { model, showOnlySelectedItems } = this.state;
         if (!model.listMethod || showOnlySelectedItems) {
-            return listByIds(...params, selectedIds);
+            return listByIds(...params, syncRule.selectedIds);
         } else {
             return model.listMethod(...params);
         }
@@ -262,10 +285,11 @@ class MetadataSelectionStep extends React.Component {
 
     render() {
         const { d2, syncRule } = this.props;
-        const { model, filters } = this.state;
+        const { model, filters, tableKey } = this.state;
 
         return (
             <ObjectsTable
+                key={tableKey}
                 d2={d2}
                 model={model.getD2Model(d2)}
                 columns={model.getColumns()}
diff --git a/src/components/rules-creation-page/steps/SaveStep.jsx b/src/components/rules-creation-page/steps/SaveStep.jsx
index 91a0c02fa..8eb6f459f 100644
--- a/src/components/rules-creation-page/steps/SaveStep.jsx
+++ b/src/components/rules-creation-page/steps/SaveStep.jsx
@@ -3,7 +3,6 @@ import _ from "lodash";
 import PropTypes from "prop-types";
 import { Button, LinearProgress, withStyles } from "@material-ui/core";
 import { ConfirmationDialog } from "d2-ui-components";
-import { withRouter } from "react-router-dom";
 import i18n from "@dhis2/d2-i18n";
 
 import { getInstances } from "./InstanceSelectionStep";
@@ -29,7 +28,7 @@ const styles = () => ({
 });
 
 const SaveStep = props => {
-    const { d2, syncRule, classes, history } = props;
+    const { d2, syncRule, classes, onCancel } = props;
     const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [metadata, updateMetadata] = useState({});
@@ -45,16 +44,11 @@ const SaveStep = props => {
 
     const closeCancelDialog = () => setCancelDialogOpen(false);
 
-    const cancel = () => history.push("/synchronization-rules");
-
     const save = async () => {
         setIsSaving(true);
-
-        syncRule.metadata = metadata || (await parseMetadata());
         await syncRule.save(d2);
-
         setIsSaving(false);
-        cancel();
+        onCancel();
     };
 
     const parseInstances = async () => {
@@ -71,7 +65,7 @@ const SaveStep = props => {
         <React.Fragment>
             <ConfirmationDialog
                 isOpen={cancelDialogOpen}
-                onSave={cancel}
+                onSave={onCancel}
                 onCancel={closeCancelDialog}
                 title={i18n.t("Cancel synchronization rule wizard")}
                 description={i18n.t(
@@ -131,9 +125,9 @@ const SaveStep = props => {
 SaveStep.propTypes = {
     syncRule: PropTypes.object.isRequired,
     classes: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired,
+    onCancel: PropTypes.func.isRequired,
 };
 
 SaveStep.defaultProps = {};
 
-export default withRouter(withStyles(styles)(SaveStep));
+export default withStyles(styles)(SaveStep);
diff --git a/src/components/synchronization-page/OrganisationUnitPage.jsx b/src/components/synchronization-page/OrganisationUnitPage.jsx
index 92d147c2e..f01b09821 100644
--- a/src/components/synchronization-page/OrganisationUnitPage.jsx
+++ b/src/components/synchronization-page/OrganisationUnitPage.jsx
@@ -20,7 +20,7 @@ export default class OrganisationUnitPage extends React.Component {
     };
 
     getExtraFilterState = memoize(orgUnitLevelFilterValue => ({
-        orgUnitLevel: orgUnitLevelFilterValue,
+        levelFilter: orgUnitLevelFilterValue,
     }));
 
     componentDidMount() {
diff --git a/src/models/d2Model.ts b/src/models/d2Model.ts
index f64a13da7..84c8d3ad2 100644
--- a/src/models/d2Model.ts
+++ b/src/models/d2Model.ts
@@ -141,10 +141,10 @@ export class OrganisationUnitModel extends D2Model {
         filters: OrganisationUnitTableFilters,
         pagination: TablePagination
     ): Promise<TableList> {
-        const { orgUnitLevel = null } = filters || {};
+        const { levelFilter = null } = filters || {};
         const newFilters = {
             ...filters,
-            customFilters: _.compact([orgUnitLevel ? `level:eq:${orgUnitLevel}` : null]),
+            customFilters: _.compact([levelFilter ? `level:eq:${levelFilter}` : null]),
         };
         return super.listMethod(d2, newFilters, pagination);
     }
diff --git a/src/models/instance.ts b/src/models/instance.ts
index 2dbf773ec..ab4f8b58e 100644
--- a/src/models/instance.ts
+++ b/src/models/instance.ts
@@ -90,7 +90,7 @@ export default class Instance {
 
     public async save(d2: D2): Promise<Response> {
         const instance = await this.encryptPassword();
-        const exists = instance.data.id;
+        const exists = !!instance.data.id;
         const element = exists ? instance.data : { ...instance.data, id: generateUid() };
 
         if (exists) await instance.remove(d2);
diff --git a/src/models/syncReport.ts b/src/models/syncReport.ts
index c23099609..0914c58a2 100644
--- a/src/models/syncReport.ts
+++ b/src/models/syncReport.ts
@@ -64,7 +64,7 @@ export default class SyncReport {
     }
 
     public async save(d2: D2): Promise<void> {
-        const exists = this.syncReport.id;
+        const exists = !!this.syncReport.id;
         const element = exists ? this.syncReport : { ...this.syncReport, id: generateUid() };
 
         if (exists) await this.remove(d2);
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index d80d15434..2f1464069 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -15,33 +15,10 @@ export default class SyncRule {
     constructor(syncRule: SynchronizationRule) {
         this.syncRule = {
             id: generateUid(),
-            ..._.pick(syncRule, [
-                "id",
-                "name",
-                "description",
-                "originInstance",
-                "builder",
-                "selectedIds",
-            ]),
+            ..._.pick(syncRule, ["id", "name", "description", "originInstance", "builder"]),
         };
     }
 
-    public get selectedIds(): string[] {
-        return this.syncRule.selectedIds;
-    }
-
-    public set selectedIds(value: string[]) {
-        this.syncRule.selectedIds = value;
-    }
-
-    public get targetInstances(): string[] {
-        return this.syncRule.builder.targetInstances;
-    }
-
-    public set targetInstances(instances: string[]) {
-        this.syncRule.builder.targetInstances = instances;
-    }
-
     public get name(): string {
         return this.syncRule.name;
     }
@@ -58,12 +35,36 @@ export default class SyncRule {
         this.syncRule.description = description;
     }
 
+    public addMetadataIds(type: string, ids: string[]): void {
+        const original = this.syncRule.builder.metadata[type];
+        this.syncRule.builder.metadata[type] = original ? [...original, ...ids] : [...ids];
+    }
+
+    public removeMetadataIds(ids: string[]): void {
+        for (const type in this.syncRule.builder.metadata) {
+            _.pullAll(this.syncRule.builder.metadata[type], ids);
+        }
+    }
+
     public get metadata(): MetadataPackage {
         return this.syncRule.builder.metadata || {};
     }
 
-    public set metadata(metadata: MetadataPackage) {
-        this.syncRule.builder.metadata = metadata;
+    public get selectedIds(): string[] {
+        return (
+            _(this.syncRule.builder.metadata)
+                .values()
+                .flatten()
+                .value() || []
+        );
+    }
+
+    public updateTargetInstances(instances: string[]): void {
+        this.syncRule.builder.targetInstances = instances;
+    }
+
+    public get targetInstances(): string[] {
+        return this.syncRule.builder.targetInstances;
     }
 
     public static create(): SyncRule {
@@ -76,7 +77,6 @@ export default class SyncRule {
                 targetInstances: [],
                 metadata: {},
             },
-            selectedIds: [],
         });
     }
 
@@ -107,7 +107,7 @@ export default class SyncRule {
     }
 
     public async save(d2: D2): Promise<void> {
-        const exists = this.syncRule.id;
+        const exists = !!this.syncRule.id;
         const element = exists ? this.syncRule : { ...this.syncRule, id: generateUid() };
 
         if (exists) await this.remove(d2);
diff --git a/src/types/d2-ui-components.d.ts b/src/types/d2-ui-components.d.ts
index 21400f9cd..3f5edfd9e 100644
--- a/src/types/d2-ui-components.d.ts
+++ b/src/types/d2-ui-components.d.ts
@@ -20,7 +20,7 @@ export interface TableFilters {
 }
 
 export interface OrganisationUnitTableFilters extends TableFilters {
-    orgUnitLevel?: string;
+    levelFilter?: string;
 }
 
 export interface SyncReportTableFilters extends TableFilters {
diff --git a/src/types/synchronization.d.ts b/src/types/synchronization.d.ts
index 9659668ba..c28b6788c 100644
--- a/src/types/synchronization.d.ts
+++ b/src/types/synchronization.d.ts
@@ -58,5 +58,4 @@ export interface SynchronizationRule {
     description?: string;
     originInstance: string;
     builder: SynchronizationBuilder;
-    selectedIds: string[];
 }
diff --git a/yarn.lock b/yarn.lock
index e2f65e016..61072066a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9267,11 +9267,16 @@ nan@^2.12.1, nan@^2.13.2, nan@^2.9.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nano-memoize@1.1.4, nano-memoize@^1.0.3:
+nano-memoize@^1.0.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.4.tgz#3b3898e1796894e1f6c1e1ceb53c15c31e59ac3b"
   integrity sha512-UxbdOzIrAvFJbUp9MKYGG0mmHBHBVoSn7BFNkwVL3cE6F351exdbwcG6gTxN5JSQ0heGMQm+QLkqcyI8oqQp3w==
 
+nano-memoize@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.5.tgz#70de03b987a0435d5bd7be9425cce8c74ac440bc"
+  integrity sha512-AV4GIsQBJU8jpYWMClIm9cxSWRXZtgbkkaSXz9mSpTrJFLkMN3eXkTJDeO4SykHomjckiYE4Ba7UELto7KRMpA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"

From db05ceb41c63dcb7aaea24eab80ca564773c2592 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Fri, 28 Jun 2019 22:40:05 +0200
Subject: [PATCH 20/21] Make syncRules fully immutable

---
 .../rules-creation-page/SyncRulesWizard.jsx   |  5 ++-
 .../steps/InstanceSelectionStep.jsx           |  5 ++-
 .../steps/MetadataSelectionStep.jsx           |  7 ++--
 src/models/syncRule.ts                        | 38 +++++++++++++++----
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/rules-creation-page/SyncRulesWizard.jsx b/src/components/rules-creation-page/SyncRulesWizard.jsx
index 8c57d99b9..1524f9a40 100644
--- a/src/components/rules-creation-page/SyncRulesWizard.jsx
+++ b/src/components/rules-creation-page/SyncRulesWizard.jsx
@@ -81,8 +81,8 @@ class SyncRulesWizard extends React.Component {
         this.setState({ dialogOpen: false });
     };
 
-    onChange = instance => {
-        this.setState({ instance });
+    onChange = syncRule => {
+        this.setState({ syncRule });
     };
 
     onStepChangeRequest = async currentStep => {
@@ -111,6 +111,7 @@ class SyncRulesWizard extends React.Component {
                 d2,
                 syncRule,
                 onCancel: this.handleConfirm,
+                onChange: this.onChange,
             },
         }));
 
diff --git a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
index e22ea3dd1..ee942458c 100644
--- a/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/InstanceSelectionStep.jsx
@@ -16,13 +16,13 @@ export const getInstances = async d2 => {
 };
 
 const InstanceSelectionStep = props => {
-    const { d2, syncRule } = props;
+    const { d2, syncRule, onChange } = props;
     const [instanceOptions, setInstanceOptions] = useState([]);
     const [selectedOptions, setSelectedOptions] = useState(syncRule.targetInstances);
 
     const changeInstances = instances => {
         setSelectedOptions(instances);
-        syncRule.updateTargetInstances(instances);
+        onChange(syncRule.updateTargetInstances(instances));
     };
 
     const parseInstances = async () => {
@@ -47,6 +47,7 @@ const InstanceSelectionStep = props => {
 
 InstanceSelectionStep.propTypes = {
     syncRule: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
 };
 
 InstanceSelectionStep.defaultProps = {};
diff --git a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
index 3e19b0f91..8eb3c915a 100644
--- a/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
+++ b/src/components/rules-creation-page/steps/MetadataSelectionStep.jsx
@@ -23,6 +23,7 @@ class MetadataSelectionStep extends React.Component {
         syncRule: PropTypes.object.isRequired,
         classes: PropTypes.object.isRequired,
         snackbar: PropTypes.object.isRequired,
+        onChange: PropTypes.func.isRequired,
     };
 
     defaultModel = {
@@ -147,12 +148,12 @@ class MetadataSelectionStep extends React.Component {
 
     changeSelection = selectedIds => {
         const { selectedIds: oldSelection, model } = this.state;
-        const { d2, snackbar, syncRule } = this.props;
+        const { d2, snackbar, syncRule, onChange } = this.props;
         const type = model.getD2Model(d2).plural;
 
         const additions = _.difference(selectedIds, oldSelection);
         if (additions.length > 0) {
-            syncRule.addMetadataIds(type, additions);
+            onChange(syncRule.addMetadataIds(type, additions));
             snackbar.info(
                 i18n.t("Selected {{difference}} elements", { difference: additions.length }),
                 {
@@ -163,7 +164,7 @@ class MetadataSelectionStep extends React.Component {
 
         const removals = _.difference(oldSelection, selectedIds);
         if (removals.length > 0) {
-            syncRule.removeMetadataIds(removals);
+            onChange(syncRule.removeMetadataIds(removals));
             snackbar.info(
                 i18n.t("Removed {{difference}} elements", {
                     difference: Math.abs(removals.length),
diff --git a/src/models/syncRule.ts b/src/models/syncRule.ts
index 2f1464069..943f40679 100644
--- a/src/models/syncRule.ts
+++ b/src/models/syncRule.ts
@@ -35,15 +35,31 @@ export default class SyncRule {
         this.syncRule.description = description;
     }
 
-    public addMetadataIds(type: string, ids: string[]): void {
+    public addMetadataIds(type: string, ids: string[]): SyncRule {
         const original = this.syncRule.builder.metadata[type];
-        this.syncRule.builder.metadata[type] = original ? [...original, ...ids] : [...ids];
+        const updated = original ? [...original, ...ids] : [...ids];
+        return SyncRule.build({
+            ...this.syncRule,
+            builder: {
+                ...this.syncRule.builder,
+                metadata: {
+                    ...this.syncRule.builder.metadata,
+                    [type]: updated,
+                },
+            },
+        });
     }
 
-    public removeMetadataIds(ids: string[]): void {
-        for (const type in this.syncRule.builder.metadata) {
-            _.pullAll(this.syncRule.builder.metadata[type], ids);
-        }
+    public removeMetadataIds(ids: string[]): SyncRule {
+        const metadata = _.clone(this.syncRule.builder.metadata);
+        for (const type in metadata) _.pullAll(metadata[type], ids);
+        return SyncRule.build({
+            ...this.syncRule,
+            builder: {
+                ...this.syncRule.builder,
+                metadata,
+            },
+        });
     }
 
     public get metadata(): MetadataPackage {
@@ -59,8 +75,14 @@ export default class SyncRule {
         );
     }
 
-    public updateTargetInstances(instances: string[]): void {
-        this.syncRule.builder.targetInstances = instances;
+    public updateTargetInstances(targetInstances: string[]): SyncRule {
+        return SyncRule.build({
+            ...this.syncRule,
+            builder: {
+                ...this.syncRule.builder,
+                targetInstances,
+            },
+        });
     }
 
     public get targetInstances(): string[] {

From 8badd99d50c61d7ce2050d3ea358993706ffd0db Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Mon, 1 Jul 2019 09:49:51 +0200
Subject: [PATCH 21/21] Update d2-ui-components version

---
 package.json |  2 +-
 yarn.lock    | 15 +++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index da1ddd8d3..9f2824e7f 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 61072066a..10d4ccac6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3952,10 +3952,10 @@ d2-manifest@^1.0.0:
     minimist "^1.1.0"
     readline-sync "^1.4.1"
 
-d2-ui-components@^0.0.18:
-  version "0.0.18"
-  resolved "https://registry.yarnpkg.com/d2-ui-components/-/d2-ui-components-0.0.18.tgz#81d985ca0c914d965021bc3913dcc91584f2d6a3"
-  integrity sha512-KE7J6t4XIz+bU0x4nH9AwsWUK2Laqc6ckZwdRVsrdTRaSe/zE3YLOoMJixfwE+TuHaZU8AGrRuQSlt80xdmvNA==
+d2-ui-components@^0.0.19:
+  version "0.0.19"
+  resolved "https://registry.yarnpkg.com/d2-ui-components/-/d2-ui-components-0.0.19.tgz#80f8613811934433d24b0afb990f6029e3ff6640"
+  integrity sha512-zOnxhrdjR8IjnJcxpsmN7uT3mVNMkdk6Lr7oB1hGoMD6Bh1/BzuMEIFl0bGyPbSRFGvOWSj3ZNpAkUp2lZZMow==
   dependencies:
     "@date-io/moment" "^1.0.2"
     "@dhis2/d2-i18n" "^1.0.3"
@@ -3969,7 +3969,7 @@ d2-ui-components@^0.0.18:
     lodash "^4.17.11"
     material-ui-pickers "^2.1.2"
     moment "^2.22.2"
-    nano-memoize "^1.0.3"
+    nano-memoize "^1.1.5"
     node-sass "^4.11.0"
     throttle-debounce "^2.1.0"
 
@@ -9267,11 +9267,6 @@ nan@^2.12.1, nan@^2.13.2, nan@^2.9.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nano-memoize@^1.0.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.4.tgz#3b3898e1796894e1f6c1e1ceb53c15c31e59ac3b"
-  integrity sha512-UxbdOzIrAvFJbUp9MKYGG0mmHBHBVoSn7BFNkwVL3cE6F351exdbwcG6gTxN5JSQ0heGMQm+QLkqcyI8oqQp3w==
-
 nano-memoize@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/nano-memoize/-/nano-memoize-1.1.5.tgz#70de03b987a0435d5bd7be9425cce8c74ac440bc"