Merge branch 'development' into feature/import-export-migration

.github/workflows/main.yml

@@ -0,0 +1,47 @@
+name: Application testing
+on:
+    push:
+    workflow_dispatch:
+jobs:
+    unit-tests:
+        name: Unit tests
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v2
+
+            - name: Install apt libraries
+              run: sudo apt install gettext -y
+
+            - name: Setup Node
+              uses: actions/setup-node@v1
+              with:
+                  node-version: "16.14.0"
+
+            - name: Install yarn
+              run: npm install -g yarn
+
+            - name: Get yarn cache directory path
+              id: yarn-cache-dir-path
+              run: echo "::set-output name=dir::$(yarn cache dir)"
+
+            - name: Cache yarn dependencies
+              uses: actions/cache@v2
+              id: yarn-cache
+              with:
+                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-yarn-
+
+            - name: Install dependencies
+              run: yarn install --frozen-lockfile --silent
+
+            - name: Install translations
+              run: yarn localize
+
+            - name: Run jest tests
+              run: yarn test
+
+            - name: Run typescript tests
+              run: npx tsc

i18n/en.pot

@@ -110,25 +110,25 @@ msgstr ""
 msgid "Column"
 msgstr ""
 
-msgid "Replace"
+msgid "Copy in user: {{user}}"
 msgstr ""
 
-msgid "Merge"
+msgid "Select one toggle"
 msgstr ""
 
-msgid "Copy in user: {{user}}"
+msgid "Select at least one user"
 msgstr ""
 
-msgid "Select one toggle"
+msgid "Bulk update strategy: "
 msgstr ""
 
-msgid "Select at least one user"
+msgid "Merge"
 msgstr ""
 
-msgid "Bulk update strategy: {{strategy}}"
+msgid "Replace"
 msgstr ""
 
-msgid "Search by name"
+msgid "Search"
 msgstr ""
 
 msgid "User Groups"
@@ -200,15 +200,15 @@ msgstr ""
 msgid "Update strategy: "
 msgstr ""
 
-msgid "Search"
-msgstr ""
-
 msgid "Assign roles to {{usernames}}"
 msgstr ""
 
 msgid "Assign groups to {{usernames}}"
 msgstr ""
 
+msgid "Bulk update strategy: {{strategy}}"
+msgstr ""
+
 msgid "Back"
 msgstr ""
 

i18n/es.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-06-12T15:20:23.307Z\n"
+"POT-Creation-Date: 2024-06-06T07:49:29.380Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -111,12 +111,6 @@ msgstr "Columnas a mostrar en tabla"
 msgid "Column"
 msgstr "Columna"
 
-msgid "Replace"
-msgstr ""
-
-msgid "Merge"
-msgstr ""
-
 #, fuzzy
 msgid "Copy in user: {{user}}"
 msgstr "Copiar a usuario"
@@ -127,12 +121,19 @@ msgstr ""
 msgid "Select at least one user"
 msgstr ""
 
-msgid "Bulk update strategy: {{strategy}}"
+#, fuzzy
+msgid "Bulk update strategy: "
+msgstr "Estrategia de actualización: "
+
+msgid "Merge"
 msgstr ""
 
-msgid "Search by name"
+msgid "Replace"
 msgstr ""
 
+msgid "Search"
+msgstr "Buscar"
+
 msgid "User Groups"
 msgstr ""
 
@@ -203,15 +204,15 @@ msgstr "Guardando usuarios"
 msgid "Update strategy: "
 msgstr "Estrategia de actualización: "
 
-msgid "Search"
-msgstr "Buscar"
-
 msgid "Assign roles to {{usernames}}"
 msgstr "Asignar roles a {{usernames}}"
 
 msgid "Assign groups to {{usernames}}"
 msgstr "Asignar grupos a {{usernames}}"
 
+msgid "Bulk update strategy: {{strategy}}"
+msgstr ""
+
 msgid "Back"
 msgstr "Volver"
 

src/react-app-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react-scripts" />
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";

src/webapp/components/copy-in-user-dialog/CopyInUserDialog.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import i18n from "../../../locales";
-import { useAppContext } from "../../contexts/app-context";
+import _ from "lodash";
 import { User } from "../../../domain/entities/User";
 import { Id } from "../../../domain/entities/Ref";
 import { AccessElements, AccessElementsKeys, UpdateStrategy } from "../../../domain/repositories/UserRepository";
-import { ConfirmationDialog, MultiSelector } from "@eyeseetea/d2-ui-components";
-import { useSnackbar } from "@eyeseetea/d2-ui-components";
 import { Toggle } from "material-ui";
-import { Box, makeStyles } from "@material-ui/core";
+import { Box } from "@material-ui/core";
 import styled from "styled-components";
-import _ from "lodash";
+import { SegmentedControl, Transfer } from "@dhis2/ui";
+import { ConfirmationDialog, useSnackbar } from "@eyeseetea/d2-ui-components";
 
 export const CopyInUserDialog: React.FC<CopyInUserDialogProps> = props => {
-    const { d2 } = useAppContext();
     const { onCancel, onSave, user, visible, usersList } = props;
 
     const [selectedUsersIds, setSelectedUsersIds] = React.useState<Id[]>([]);
@@ -26,25 +24,16 @@ export const CopyInUserDialog: React.FC<CopyInUserDialogProps> = props => {
 
     const snackbar = useSnackbar();
 
-    // Overide TextInput width in MultiSelector
-    const useStyles = makeStyles(() => ({
-        searchFieldOverride: {
-            width: "initial",
-        },
-    }));
-
-    const isReplaceStrategy = updateStrategy === "replace";
-    const strategyLabel = isReplaceStrategy ? i18n.t("Replace") : i18n.t("Merge");
     const copyInUserTitle = i18n.t("Copy in user: {{user}}", {
         user: user.username,
         nsSeparator: false,
     });
 
-    const getOptions = (): Array<{ value: Id; text: string }> => {
+    const getOptions = (): Array<{ value: Id; label: string }> => {
         return _(usersList)
             .reject({ id: user.id }) // Remove user source from target users
             .map(({ id, name, username }) => ({
-                text: `${name} (${username})`,
+                label: `${name} (${username})`,
                 value: id,
             }))
             .value();
@@ -61,10 +50,6 @@ export const CopyInUserDialog: React.FC<CopyInUserDialogProps> = props => {
         }
     }, [onSave, selectedUsersIds, updateStrategy, accessElements, snackbar]);
 
-    const onToggleStrategy = React.useCallback((_event: React.MouseEvent<HTMLInputElement>, newValue: boolean) => {
-        setUpdateStrategy(newValue ? "replace" : "merge");
-    }, []);
-
     const onToggleAccessElements = (property: AccessElementsKeys, value: boolean) => {
         setAccessElements({ ...accessElements, [property]: value });
     };
@@ -79,53 +64,65 @@ export const CopyInUserDialog: React.FC<CopyInUserDialogProps> = props => {
             onSave={onDialogSave}
         >
             <Container>
-                <Toggle
-                    label={i18n.t("Bulk update strategy: {{strategy}}", {
-                        strategy: strategyLabel,
-                        nsSeparator: false,
-                    })}
-                    style={{ width: 280, float: "inline-end", marginBlockStart: 20, marginInlineStart: 15 }}
-                    toggled={isReplaceStrategy}
-                    onToggle={onToggleStrategy}
-                />
-                <MultiSelector
-                    d2={d2}
-                    height={300}
-                    onChange={setSelectedUsersIds}
-                    options={getOptions()}
-                    ordered={false}
-                    searchFilterLabel={i18n.t("Search by name")}
-                    classes={{
-                        searchField: useStyles().searchFieldOverride,
-                    }}
+                <Label>{i18n.t("Bulk update strategy: ", { nsSeparator: false })}</Label>
+
+                <SegmentedControl
+                    options={[
+                        {
+                            label: i18n.t("Merge"),
+                            value: "merge",
+                        },
+                        {
+                            label: i18n.t("Replace"),
+                            value: "replace",
+                        },
+                    ]}
+                    selected={updateStrategy}
+                    onChange={({ value }) => setUpdateStrategy(value ?? "merge")}
                 />
-                <Box display="flex">
-                    <ToggleContainer>
-                        <Toggle
-                            label={i18n.t("User Groups")}
-                            toggled={accessElements.userGroups}
-                            onToggle={(_, value) => onToggleAccessElements("userGroups", value)}
-                        />
-                        <Toggle
-                            label={i18n.t("OU Outputs")}
-                            toggled={accessElements.dataViewOrganisationUnits}
-                            onToggle={(_, value) => onToggleAccessElements("dataViewOrganisationUnits", value)}
-                        />
-                    </ToggleContainer>
-                    <ToggleContainer>
-                        <Toggle
-                            label={i18n.t("User Roles")}
-                            toggled={accessElements.userRoles}
-                            onToggle={(_, value) => onToggleAccessElements("userRoles", value)}
-                        />
-                        <Toggle
-                            label={i18n.t("OU Capture")}
-                            toggled={accessElements.organisationUnits}
-                            onToggle={(_, value) => onToggleAccessElements("organisationUnits", value)}
-                        />
-                    </ToggleContainer>
-                </Box>
             </Container>
+
+            <Transfer
+                options={getOptions()}
+                selected={selectedUsersIds}
+                onChange={({ selected }) => {
+                    setSelectedUsersIds(selected);
+                }}
+                filterable={true}
+                filterablePicked={true}
+                filterPlaceholder={i18n.t("Search")}
+                filterPlaceholderPicked={i18n.t("Search")}
+                selectedWidth="100%"
+                optionsWidth="100%"
+                height="400px"
+            />
+
+            <Box display="flex">
+                <ToggleContainer>
+                    <Toggle
+                        label={i18n.t("User Groups")}
+                        toggled={accessElements.userGroups}
+                        onToggle={(_, value) => onToggleAccessElements("userGroups", value)}
+                    />
+                    <Toggle
+                        label={i18n.t("OU Outputs")}
+                        toggled={accessElements.dataViewOrganisationUnits}
+                        onToggle={(_, value) => onToggleAccessElements("dataViewOrganisationUnits", value)}
+                    />
+                </ToggleContainer>
+                <ToggleContainer>
+                    <Toggle
+                        label={i18n.t("User Roles")}
+                        toggled={accessElements.userRoles}
+                        onToggle={(_, value) => onToggleAccessElements("userRoles", value)}
+                    />
+                    <Toggle
+                        label={i18n.t("OU Capture")}
+                        toggled={accessElements.organisationUnits}
+                        onToggle={(_, value) => onToggleAccessElements("organisationUnits", value)}
+                    />
+                </ToggleContainer>
+            </Box>
         </ConfirmationDialog>
     );
 };
@@ -139,7 +136,15 @@ export type CopyInUserDialogProps = {
 };
 
 const Container = styled.div`
-    padding: 1em;
+    display: flex;
+    justify-content: right;
+    margin-block-end: 1em;
+    align-items: center;
+`;
+
+const Label = styled.span`
+    margin-inline-end: 1em;
+    font-weight: bold;
 `;
 
 const ToggleContainer = styled.div`