fix: show authorities in a MultiSelect rather than an input text field

src/components/route-creation/AuthoritiesSelect.tsx

@@ -0,0 +1,57 @@
+import i18n from '@dhis2/d2-i18n'
+import { Field, MultiSelect, MultiSelectOption } from '@dhis2/ui'
+import * as React from 'react'
+import { ApiRouteData, Authority } from '../../types/RouteInfo'
+
+type AuthoritiesSelectProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    route: ApiRouteData | {}
+    authorities: Authority[]
+    onSelect: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+const AuthoritiesSelect: React.FC<AuthoritiesSelectProps> = ({
+    route,
+    authorities,
+    onSelect,
+}) => {
+    const [selectedAuthorities, setSelectedAuthorities] = React.useState<
+        string[]
+    >(() => route.authorities ?? [])
+
+    const onChange = ({ selected }) => {
+        setSelectedAuthorities(selected)
+    }
+    const onBlur = () => {
+        onSelect(selectedAuthorities)
+    }
+    return (
+        <Field
+            label={i18n.t('Authorities')}
+            helpText={i18n.t('Restrict access to cerain authorities')}
+        >
+            <MultiSelect
+                filterPlaceholder={i18n.t('Select authorities')}
+                clearable
+                clearText={i18n.t('Clear')}
+                filterable
+                onChange={onChange}
+                selected={selectedAuthorities}
+                noMatchText={i18n.t('No authority found')}
+                onBlur={onBlur}
+            >
+                {authorities?.map((authority) => {
+                    return (
+                        <MultiSelectOption
+                            key={authority.id}
+                            label={`${authority.id} (${authority.name})`}
+                            value={authority.id}
+                        ></MultiSelectOption>
+                    )
+                })}
+            </MultiSelect>
+        </Field>
+    )
+}
+
+export default AuthoritiesSelect

src/components/route-creation/UpsertRoute.tsx

@@ -14,8 +14,10 @@ import classes from '../../App.module.css'
 import {
     ApiRouteCreationPayload,
     ApiRouteData,
+    Authority,
     RouteAuthConfig,
 } from '../../types/RouteInfo'
+import AuthoritiesSelect from './AuthoritiesSelect'
 import RouteAuthAdmin from './RouteAuthAdmin'
 
 const createRouteMutation = {
@@ -38,12 +40,14 @@ const updateRouteMutation = {
 }
 
 type UpsertRouteProps = {
+    authorities: Authority[]
     route: ApiRouteData
     closeModal: VoidFunction
     onSave: VoidFunction
 }
 
 const UpsertRoute: React.FC<UpsertRouteProps> = ({
+    authorities: allAuthorities = [],
     route = {},
     closeModal = () => {},
     onSave = () => {},
@@ -54,8 +58,8 @@ const UpsertRoute: React.FC<UpsertRouteProps> = ({
     const [authConfig, setAuthConfig] = useState<Partial<RouteAuthConfig>>(
         route.auth
     )
-    const [authorities, setAuthorities] = useState<string>(() =>
-        route.authorities?.join(',')
+    const [selectedAuthorities, setSelectedAuthorities] = useState<string[]>(
+        () => route.authorities ?? []
     )
     const [loading, setLoading] = useState(false)
 
@@ -122,8 +126,8 @@ const UpsertRoute: React.FC<UpsertRouteProps> = ({
                 data.auth = authConfig as RouteAuthConfig
             }
 
-            if (authorities) {
-                data.authorities = authorities?.split(/[\s,]/)
+            if (selectedAuthorities) {
+                data.authorities = selectedAuthorities
             }
 
             if (route?.id) {
@@ -141,7 +145,6 @@ const UpsertRoute: React.FC<UpsertRouteProps> = ({
                 onSave()
             }
         } catch (err) {
-            console.log('>>>eee', err)
             show({ type: 'error', message: err.message })
         } finally {
             setLoading(false)
@@ -194,16 +197,10 @@ const UpsertRoute: React.FC<UpsertRouteProps> = ({
                         authConfig={authConfig}
                         updateAuthConfig={updateAuthConfig}
                     />
-                    <InputField
-                        value={authorities}
-                        onChange={({ value }) => setAuthorities(value)}
-                        placeholder={i18n.t(
-                            'comma separated list of authorities i.e. MY_AUTHORITY_1,MY_AUTHORITY_2'
-                        )}
-                        label={i18n.t('Authorities')}
-                        helpText={i18n.t(
-                            'Restrict access to cerain authorities'
-                        )}
+                    <AuthoritiesSelect
+                        authorities={allAuthorities}
+                        route={route}
+                        onSelect={setSelectedAuthorities}
                     />
                 </div>
             </ModalContent>

src/components/route-list/RoutesList.tsx

@@ -27,6 +27,18 @@ const listRoutesQuery = {
             pageSize: 50,
         },
     },
+    authorities: {
+        resource: 'authorities',
+        params: {
+            fields: '*',
+            pageSize: -1,
+        },
+    },
+}
+
+type Authority = {
+    id: string
+    name: string
 }
 
 const RoutesList = () => {
@@ -58,6 +70,7 @@ const RoutesList = () => {
             critical: true,
         }
     )
+
     const updateFailAlert = useAlert(
         ({ error }) =>
             i18n.t(`Failed to update route {{message}}`, {
@@ -76,10 +89,13 @@ const RoutesList = () => {
 
     const engine = useDataEngine()
 
-    const { data: allRoutesList, refetch: refetchRoutesList } =
-        useDataQuery<WrapQueryResponse<ApiRouteData[], 'routes'>>(
-            listRoutesQuery
-        )
+    const { data, refetch: refetchRoutesList } = useDataQuery<
+        WrapQueryResponse<ApiRouteData[], 'routes'> &
+            WrapQueryResponse<Authority[], 'authorities', 'systemAuthorities'>
+    >(listRoutesQuery)
+
+    const routes = data?.routes?.routes
+    const authorities = data?.authorities.systemAuthorities
 
     const handleDeleteRoute = async (routeCode: string) => {
         confirmDeleteAlert.show({ id: routeCode })
@@ -156,6 +172,7 @@ const RoutesList = () => {
                     route={activeRoute}
                     closeModal={onCloseCreateRouteModal}
                     onSave={onSave}
+                    authorities={authorities}
                 />
             )}
 
@@ -180,7 +197,7 @@ const RoutesList = () => {
             </div>
 
             <RoutesTable
-                routes={allRoutesList?.routes?.routes}
+                routes={routes}
                 showEditRouteModal={handleEditRoute}
                 showTestRouteModal={handleShowTestModal}
                 showSharingDialog={handleShowSharingDialog}

src/components/route-list/RoutesTable.tsx

@@ -82,13 +82,16 @@ const RoutesTable: React.FC<RoutesTableProps> = ({
                                 )}
                             </DataTableCell>
                             <DataTableCell>
-                                {route.authorities?.length ? (
-                                    <pre>
-                                        {JSON.stringify(route.authorities)}
-                                    </pre>
-                                ) : (
-                                    'n/a'
-                                )}
+                                <ul
+                                    style={{
+                                        padding: 0,
+                                        listStyle: 'none',
+                                    }}
+                                >
+                                    {route.authorities?.map((auth) => {
+                                        return <li key={auth}>{auth}</li>
+                                    })}
+                                </ul>
                             </DataTableCell>
                             <DataTableCell
                                 align="right"

src/types/RouteInfo.ts

@@ -22,8 +22,17 @@ export type ApiRouteCreationPayload = Omit<ApiRouteData, 'id'> & {
     id?: string
 }
 
-export type WrapQueryResponse<T, S extends string = 'result'> = {
+export type Authority = {
+    id: string
+    name: string
+}
+
+export type WrapQueryResponse<
+    T,
+    S extends string = 'result',
+    R extends string = S
+> = {
     [K in S]: {
-        [K in S]: T
+        [K in R]: T
     }
 }