refactor: manage list view

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: 2023-08-19T21:39:42.855Z\n"
-"PO-Revision-Date: 2023-08-19T21:39:42.855Z\n"
+"POT-Creation-Date: 2023-09-05T15:28:51.647Z\n"
+"PO-Revision-Date: 2023-09-05T15:28:51.647Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -81,15 +81,15 @@ msgstr "Type to filter options"
 msgid "No matches"
 msgstr "No matches"
 
+msgid "Data set"
+msgstr "Data set"
+
 msgid "Clear all filters"
 msgstr "Clear all filters"
 
 msgid "Search by name, code or ID"
 msgstr "Search by name, code or ID"
 
-msgid "Manage {{section}} table columns"
-msgstr "Manage {{section}} table columns"
-
 msgid "Available table columns"
 msgstr "Available table columns"
 
@@ -99,15 +99,15 @@ msgstr "Selected table columns"
 msgid "Reset to default columns"
 msgstr "Reset to default columns"
 
+msgid "Manage {{section}} table columns"
+msgstr "Manage {{section}} table columns"
+
 msgid "Cancel"
 msgstr "Cancel"
 
 msgid "Update table columns"
 msgstr "Update table columns"
 
-msgid "None"
-msgstr "None"
-
 msgid "Category"
 msgstr "Category"
 
@@ -162,9 +162,6 @@ msgstr "Data element group set"
 msgid "Data element group sets"
 msgstr "Data element group sets"
 
-msgid "Data set"
-msgstr "Data set"
-
 msgid "Data sets"
 msgstr "Data sets"
 
@@ -414,6 +411,9 @@ msgstr "Min (sum in org unit)"
 msgid "Max (sum in org unit)"
 msgstr "Max (sum in org unit)"
 
+msgid "None"
+msgstr "None"
+
 msgid "Custom"
 msgstr "Custom"
 

package.json

@@ -39,6 +39,7 @@
         "react-router-dom": "^6.11.2",
         "remeda": "^1.25.2",
         "use-query-params": "^2.2.1",
+        "zod": "^3.22.2",
         "zustand": "^4.3.8"
     }
 }

src/components/sectionList/SelectionListHeaderNormal.tsx

@@ -4,7 +4,7 @@ import { IconAdd24 } from '@dhis2/ui-icons'
 import React from 'react'
 import { Link } from 'react-router-dom'
 import { routePaths } from '../../app/routes/routePaths'
-import { ManageColumnsDialog } from './listView/ManageColumns'
+import { ManageListViewDialog } from './listView/ManageListViewDialog'
 import css from './SectionList.module.css'
 
 export const SelectionListHeader = () => {
@@ -22,7 +22,9 @@ export const SelectionListHeader = () => {
             <Button small onClick={() => setManageColumnsOpen((prev) => !prev)}>
                 {i18n.t('Manage Columns')}
             </Button>
-            {manageColumnsOpen && <ManageColumnsDialog onClose={handleClose} />}
+            {manageColumnsOpen && (
+                <ManageListViewDialog onClose={handleClose} />
+            )}
         </div>
     )
 }