fix: make data entry app support RTL [DHIS2-16779] (#409)

.stylelintrc.js

@@ -0,0 +1,5 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+}

d2.config.js

@@ -17,6 +17,7 @@ const config = {
     entryPoints: {
         app: './src/app/app-wrapper.js',
     },
+    direction: 'auto',
 }
 
 module.exports = config

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: 2024-10-16T08:10:10.883Z\n"
-"PO-Revision-Date: 2024-10-16T08:10:10.883Z\n"
+"POT-Creation-Date: 2024-10-17T12:07:03.346Z\n"
+"PO-Revision-Date: 2024-10-17T12:07:03.347Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -572,6 +572,11 @@ msgstr "Type here to filter in this section"
 msgid "1 item hidden by filter"
 msgstr "1 item hidden by filter"
 
+msgid "{{count}} items hidden by filter"
+msgid_plural "{{count}} items hidden by filter"
+msgstr[0] "{{count}} items hidden by filter"
+msgstr[1] "{{count}} items hidden by filter"
+
 msgid "{{pendingMutations}} change saved locally"
 msgstr "{{pendingMutations}} change saved locally"
 

package.json

@@ -28,10 +28,11 @@
         "jgs:start": "BROWSER=none yarn start --proxy https://debug.dhis2.org/dev"
     },
     "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@badeball/cypress-cucumber-preprocessor": "^16.0.0",
         "@cypress/webpack-preprocessor": "^5.17.0",
-        "@dhis2/cli-app-scripts": "^10.4.0",
-        "@dhis2/cli-style": "10.5.1",
+        "@dhis2/cli-app-scripts": "^11.7.2",
+        "@dhis2/cli-style": "^10.7.4",
         "@dhis2/cypress-commands": "^10.0.1",
         "@dhis2/cypress-plugins": "^10.0.1",
         "@dhis2/d2-i18n": "1.1.3",
@@ -50,7 +51,7 @@
     "dependencies": {
         "@dhis2/app-runtime": "^3.10.2",
         "@dhis2/multi-calendar-dates": "^1.3.1",
-        "@dhis2/ui": "^9.2.0",
+        "@dhis2/ui": "^9.11.8",
         "@dhis2/ui-forms": "7.16.3",
         "@tanstack/react-query": "4.24.10",
         "@tanstack/react-query-devtools": "4.24.14",

src/app/app.css

@@ -5,32 +5,35 @@ body {
 @media print {
     /* This style is needed otherwise Chrome is printing only the visible part of a scrollable div, so we end up with one page of the form printed
     https://stackoverflow.com/questions/25187715/css-print-media-query-prints-only-first-page */
-    * { overflow: visible !important; } 
+    * {
+        overflow: visible !important;
+    }
     div {
         display: block !important; /* This is needed to get around issues with FireFox printing CSS grids: https://tosbourn.com/firefox-printing-issue-for-grid-css/ */
-        max-width: 100% !important;
+        max-inline-size: 100% !important;
         outline: none !important;
     }
-    .app-shell-adapter > header  {
+    .app-shell-adapter > header {
         display: none;
     }
 
     .hideForPrint {
         display: none !important;
     }
-    
+
     table {
-        max-width: 100% !important;
+        max-inline-size: 100% !important;
         page-break-after: always;
     }
-    
+
     table:last-child {
         page-break-after: avoid;
     }
-
-    tr, td {
+
+    tr,
+    td {
         break-inside: avoid;
-        page-break-inside: avoid;;
+        page-break-inside: avoid;
     }
 
     .form-cleared input,

src/app/layout/layout.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-    height: 100%;
+    block-size: 100%;
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: 1fr 0;

src/app/load-app.module.css

@@ -1,7 +1,8 @@
 .center {
-    margin-top: var(--spacers-dp48)
+    margin-block-start: var(--spacers-dp48);
 }
 
 .noticeBoxWrapper {
-    margin: var(--spacers-dp8) var(--spacers-dp12) var(--spacers-dp8) var(--spacers-dp12);
+    margin: var(--spacers-dp8) var(--spacers-dp12) var(--spacers-dp8)
+        var(--spacers-dp12);
 }

src/bottom-bar/bottom-bar.module.css

@@ -1,6 +1,5 @@
 .bottomBar {
-    box-shadow:
-        0px 0px 1px rgba(33,41,52,0.1),
-        0px -4px 6px -1px rgba(33,41,52,0.1),
-        0px -2px 4px -1px rgba(33,41,52,0.06);
+    box-shadow: 0px 0px 1px rgba(33, 41, 52, 0.1),
+        0px -4px 6px -1px rgba(33, 41, 52, 0.1),
+        0px -2px 4px -1px rgba(33, 41, 52, 0.06);
 }

src/bottom-bar/data-item-bar.module.css

@@ -2,12 +2,12 @@
     display: flex;
     padding: 4px 12px;
     align-items: center;
-    border-bottom: 1px solid var(--colors-grey400);
+    border-block-end: 1px solid var(--colors-grey400);
 }
 
 .name {
     display: block;
-    margin-right: 8px;
+    margin-inline-end: 8px;
     font-size: 13px;
     line-height: 15px;
     color: var(--colors-grey800);

src/bottom-bar/main-tool-bar.module.css

@@ -6,29 +6,31 @@
 
 .toolbarItem {
     display: flex;
-    margin-right: 12px;
+    margin-inline-end: 12px;
 }
 
 .toolbarItem:last-child {
     /*
      * This way we avoid a break/overflow when the
      * margin would "spill over" otherwise
      */
-    margin-right: 0;
+    margin-inline-end: 0;
 }
 
 .tooltipToolbarItem {
-    margin-right: 12px;
+    margin-inline-end: 12px;
 }
 
 .icon {
     display: block;
-    margin-right: 4px;
-    height: 16px;
-    width: 16px;
+    margin-inline-end: 4px;
+    block-size: 16px;
+    inline-size: 16px;
 }
 
-.goToInvalidValue, .goToErrorValue, .completionSummary {
+.goToInvalidValue,
+.goToErrorValue,
+.completionSummary {
     display: flex;
     align-items: center;
     border: 0;

src/bottom-bar/validation-results-sidebar/validation-comments-violations.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-    margin-top: 16px;
+    margin-block-start: 16px;
 }
 .title {
     color: var(--colors-grey900);
@@ -17,5 +17,5 @@
 }
 
 .commentViolationRule {
-    composes: priorityGroupBox info from "./validation-priority-group.module.css";
-}
+    composes: priorityGroupBox info from './validation-priority-group.module.css';
+}

src/bottom-bar/validation-results-sidebar/validation-priority-group.module.css

@@ -11,17 +11,16 @@
     display: inline-block;
 }
 .priorityGroupBox {
-    margin-bottom: 12px;
-    padding-top: 8px;
-    padding-bottom: 12px;
+    margin-block-end: 12px;
+    padding-block: 8px 12px;
     padding-inline-start: 12px;
     padding-inline-end: 8px;
     font-size: 14px;
     line-height: 19px;
     color: var(--colors-grey900);
 }
 .formula {
-    margin-top: 8px;
+    margin-block-start: 8px;
     font-size: 12px;
     line-height: 16px;
     color: var(--colors-grey700);
@@ -40,4 +39,4 @@
 .info {
     background-color: var(--colors-grey050);
     border-inline-start: 4px solid var(--colors-grey500);
-}
+}

src/bottom-bar/validation-results-sidebar/validation-results-sidebar.module.css

@@ -1,10 +1,10 @@
 .wrapper {
-    padding: var(--spacers-dp16)
+    padding: var(--spacers-dp16);
 }
 
 .buttons {
     display: flex;
-	gap: 4px;
+    gap: 4px;
 }
 
 .title {
@@ -39,5 +39,5 @@
 }
 
 .dataChangedNotice {
-    margin-bottom: 8px;
-}
+    margin-block-end: 8px;
+}

src/bottom-bar/validation-results-sidebar/validation-rule-expression.module.css

@@ -1,3 +1,3 @@
 .formulaValue {
     font-style: italic;
-}
+}

src/bottom-bar/validation-results-sidebar/validation-summary-box.module.css

@@ -1,19 +1,18 @@
 .summaryBox {
-    width: 30%;
+    inline-size: 30%;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    margin-bottom: 24px;
+    padding-block: 8px;
+    margin-block-end: 24px;
 }
 
 .summaryBox :global(svg) {
     margin-inline-end: 4px;
 }
 
 .summaryBox .title {
-    margin-bottom: 8px;
+    margin-block-end: 8px;
     font-size: 13px;
     font-weight: 500;
     display: flex;
@@ -49,4 +48,4 @@
 }
 .hideCounts .count {
     visibility: hidden;
-}
+}

src/context-selection/attribute-option-combo-selector-bar-item/categories-menu.module.css

@@ -1,20 +1,20 @@
 .container {
-    width: 400px;
+    inline-size: 400px;
     padding: 16px;
 }
 
 .inputs {
-    margin-bottom: 32px;
+    margin-block-end: 32px;
 }
 
 .input {
-    margin-bottom: 16px;
+    margin-block-end: 16px;
 }
 
 .input:last-child {
-    margin-bottom: 0;
+    margin-block-end: 0;
 }
 
 .noOptionsBox {
-    margin: var(--spacers-dp8)
-}
+    margin: var(--spacers-dp8);
+}

src/context-selection/context-selection/context-selection.module.css

@@ -1,5 +1,5 @@
 @media print {
     .hideForPrint {
-        composes: hideForPrint from '../../app/app.css'
-    }   
-}
+        composes: hideForPrint from '../../app/app.css';
+    }
+}

src/context-selection/context-selection/right-hand-side-content.module.css

@@ -1,5 +1,5 @@
 .container {
-    height: 40px;
+    block-size: 40px;
     display: flex;
     align-items: center;
     padding: 0 var(--spacers-dp8);

src/context-selection/contextual-help-sidebar/shortcuts.module.css

@@ -8,7 +8,8 @@
     padding: var(--spacers-dp12) 0;
 }
 
-.shortcut, .shortcutKey {
+.shortcut,
+.shortcutKey {
     font-family: monospace;
     font-size: 13px;
     line-height: 16px;

src/context-selection/menu-select/menu-select.module.css

@@ -1,6 +1,6 @@
 .menuSelect {
-    width: 400px;
-    max-height: 70vh;
+    inline-size: 400px;
+    max-block-size: 70vh;
     overflow: hidden;
     overflow-y: auto;
 }

src/context-selection/org-unit-selector-bar-item/org-unit-selector-bar-item.module.css

@@ -1,7 +1,7 @@
 .itemContentContainer {
-    min-width: 400px;
-    min-height: 280px;
-    max-height: 70vh;
+    min-inline-size: 400px;
+    min-block-size: 280px;
+    max-block-size: 70vh;
     display: flex;
     flex-direction: column;
 }
@@ -19,12 +19,12 @@
     flex-grow: 1;
     overflow: hidden;
     overflow-y: auto;
-    padding-left: var(--spacers-dp8);
+    padding-inline-start: var(--spacers-dp8);
 }
 
 .labelContentContainer {
     padding: var(--spacers-dp8);
-    margin-top: var(--spacers-dp4);
+    margin-block-start: var(--spacers-dp4);
     display: flex;
     align-items: center;
     color: var(--colors-grey600);
@@ -33,7 +33,7 @@
 .label {
     font-size: 13px;
     line-height: 16px;
-    padding-left: var(--spacers-dp4);
+    padding-inline-start: var(--spacers-dp4);
 }
 
 .disabled {

src/context-selection/org-unit-selector-bar-item/organisation-unit-tree/organisation-unit-node/label/iconized-checkbox.js

@@ -32,7 +32,7 @@ export const IconizedCheckbox = ({
             <style jsx>{`
                 span {
                     display: inline-block;
-                    margin-right: 4px;
+                    margin-inline-end: 4px;
                 }
             `}</style>
         </>