Filtering chips implement for ResourceModuleAdmin.Administer. Made us…

…e of shared component for KontrollAdmin when handling filtering of accessRoles
FINTLabs · May 23, 2024 · 6ae2907 · 6ae2907
1 parent b24a82b
commit 6ae2907
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 105 deletions.
diff --git a/app/components/common/ChipsFilters.tsx b/app/components/common/ChipsFilters.tsx
@@ -10,18 +10,22 @@ const ChipsFilters = () => {
     const [name, setName] = useState<string | undefined>()
     const [userType, setUserType] = useState<string | undefined>()
     const [search, setSearchName] = useState<string | undefined>()
+    const [orgUnitName, setOrgUnitName] = useState<string | undefined>()
 
     useEffect(() => {
         const orgsParam = searchParams.get("orgUnits")
         const accessRoleIdParam = searchParams.get("accessroleid")
         const nameParam = searchParams.get("name")
         const userTypeParam = searchParams.get("userType")
         const searchNameParam = searchParams.get("search")
+        const orgUnitName = searchParams.get("orgUnitName")
+
         orgsParam ? setOrgUnits(orgsParam) : setOrgUnits(undefined)
         accessRoleIdParam ? setAccessRoleId(accessRoleIdParam) : setAccessRoleId(undefined)
         nameParam ? setName(nameParam) : setName(undefined)
         userTypeParam ? setUserType(userTypeParam) : setUserType(undefined)
         searchNameParam ? setSearchName(searchNameParam) : setSearchName(undefined)
+        orgUnitName ? setOrgUnitName(orgUnitName) : setOrgUnitName(undefined)
     }, [searchParams]);
 
     const removeFilter = (filterToRemove: string) => {
@@ -42,6 +46,9 @@ const ChipsFilters = () => {
             case "searchName":
                 setSearchName(undefined)
                 return
+            case "orgUnitName":
+                setOrgUnitName(undefined)
+                return
             default:
                 setUserType(undefined)
                 return
@@ -90,6 +97,17 @@ const ChipsFilters = () => {
                     {search}
                 </Chips.Removable>
             }
+            {orgUnitName &&
+                <Chips.Removable
+                    onClick={() => {
+                        handleClearSearchFieldString(setSearchParams)
+                        removeFilter("orgUnitName")
+                    }}
+                    id="org-unit-name-chip"
+                >
+                    {`Søkenavn: ${orgUnitName}`}
+                </Chips.Removable>
+            }
         </Chips>
     )
 }

diff --git a/app/components/kontroll-admin/KontrollAccessRolesRadioGroup.tsx b/app/components/kontroll-admin/KontrollAccessRolesRadioGroup.tsx
@@ -0,0 +1,39 @@
+import {Radio, RadioGroup} from "@navikt/ds-react";
+import React, {useEffect} from "react";
+import {IRole} from "~/data/kontrollAdmin/types";
+import {useNavigate, useParams} from "@remix-run/react";
+
+interface AccessRolesRadioGroupProps {
+    roles: IRole[]
+}
+
+export default function KontrollAccessRolesRadioGroup ({roles}: AccessRolesRadioGroupProps) {
+    const params = useParams()
+
+    const roleProp = params.id
+    const navigate = useNavigate();
+
+    const handleChangeSelectedRole = (role: string) => {
+        navigate(role)
+    }
+
+    useEffect(() => {
+        !roleProp ? navigate(roles[0].accessRoleId) : ""
+    }, []);
+
+    return (
+        <div className={"radio-group-horizontal"}>
+            <RadioGroup
+                legend="Velg rolle"
+                onChange={(val: string) => handleChangeSelectedRole(val)}
+                value={roleProp ? roleProp : ""}
+            >
+                {roles.map((role, index) =>
+                    <Radio key={role.accessRoleId + index} value={role.accessRoleId}>
+                        {role.name}
+                    </Radio>)
+                }
+            </RadioGroup>
+        </div>
+    )
+}
diff --git a/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx b/app/components/resource-module-admin/ResourceModuleAdminUsersTable.tsx
@@ -40,7 +40,6 @@ const ResourceModuleAdminUsersTable = ({usersPage, orgUnitList, roles}: Resource
 
             <ResourceModuleToolbar orgUnitList={orgUnitList} roles={roles} />
 
-
             <ChipsFilters />
 
             <Table className={"users-table"} id="users-table">

diff --git a/app/components/resource-module-admin/ResourceModuleRoleFilter.tsx b/app/components/resource-module-admin/ResourceModuleRoleFilter.tsx
@@ -1,29 +1,45 @@
 import {Radio, RadioGroup} from "@navikt/ds-react";
-import {IResourceModuleAccessRole} from "~/data/resourceModuleAdmin/types";
+import {IResourceModuleAccessRole, IResourceModuleUserRole} from "~/data/resourceModuleAdmin/types";
 import {useSearchParams} from "@remix-run/react";
+import {filterResetPageParam} from "~/components/common/CommonFunctions";
 
 interface ResourceModuleRoleFilterProps {
-    roles: IResourceModuleAccessRole[]
+    roles: IResourceModuleAccessRole[] | IResourceModuleUserRole[]
 }
 
 const ResourceModuleRoleFilter = ({roles}: ResourceModuleRoleFilterProps) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const roleProp = searchParams.get("accessroleid")
+    const pageParam = searchParams.get("page")
 
     const handleFilterRole = (value: string) => {
         setSearchParams((prev) => {
-            prev.set("accessroleid", value)
+            value ? prev.set("accessroleid", value) : prev.delete("accessroleid")
             return prev
         })
+        filterResetPageParam(pageParam, setSearchParams)
     }
 
-    return (
-        <RadioGroup legend={"Filtrer på brukerns nåværende rolle"} onChange={handleFilterRole} value={roleProp ? roleProp : ""}>
-            {
-                roles.map((role) => <Radio key={role.accessRoleId} value={role.accessRoleId}>{role.name}</Radio>)
-            }
-        </RadioGroup>
-    )
+    // Check which type roles is of, to allow reusability of this component.
+    if (roles.every(role => typeof role === 'object' && 'accessRoleId' in role)) {
+        const newRoles: any = roles
+        return (
+            <RadioGroup legend={"Filtrer på brukerns rolle"} onChange={handleFilterRole} value={roleProp ? roleProp : ""}>
+                {
+                    newRoles.map((role: IResourceModuleAccessRole) => <Radio key={role.accessRoleId} value={role.accessRoleId}>{role.name}</Radio>)
+                }
+            </RadioGroup>
+        )
+    } else {
+        const newRoles: any = roles
+        return (
+            <RadioGroup legend={"Filtrer på brukerns rolle"} onChange={handleFilterRole} value={roleProp ? roleProp : ""}>
+                {
+                    newRoles.map((role: IResourceModuleUserRole) => <Radio key={role.roleId} value={role.roleId}>{role.roleName}</Radio>)
+                }
+            </RadioGroup>
+        )
+    }
 }
 
 export default ResourceModuleRoleFilter
diff --git a/app/components/resource-module-admin/administer/AdministerToolbar.tsx b/app/components/resource-module-admin/administer/AdministerToolbar.tsx
@@ -1,26 +1,33 @@
 import {HStack, Search, Select} from "@navikt/ds-react";
 import {useState} from "react";
 import {useSearchParams} from "@remix-run/react";
+import {filterResetPageParam} from "~/components/common/CommonFunctions";
 
 interface ToolbarProps {
     objectTypesForUser: string[]
 }
+
 const AdministerToolbar = ({objectTypesForUser}: ToolbarProps) => {
     const [searchValue, setSearchValue] = useState("")
-    const [, setSearchParams] = useSearchParams()
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const pageParam = searchParams.get("page")
 
     const setObjectTypeFilter = (val: string) => {
         setSearchParams(searchParams => {
             val ? searchParams.set("objectType", val) : searchParams.delete("objectType")
             return searchParams
         })
+        filterResetPageParam(pageParam, setSearchParams)
     }
 
     const handleSearch = () => {
         setSearchParams(searchParams => {
             searchValue ? searchParams.set("orgUnitName", searchValue) : searchParams.delete("orgUnitName")
             return searchParams
         })
+        setSearchValue("")
+        filterResetPageParam(pageParam, setSearchParams)
     }
 
     return (
@@ -38,7 +45,18 @@ const AdministerToolbar = ({objectTypesForUser}: ToolbarProps) => {
                 handleSearch()
                 event.preventDefault()
             }}>
-                <Search label="Søk på orgenhetsnavn" variant="secondary" hideLabel={false} onChange={event => setSearchValue(event)} />
+                <Search label="Søk på orgenhetsnavn"
+                        variant="secondary"
+                        hideLabel={false}
+                        onChange={event => setSearchValue(event)}
+                        value={searchValue}
+                        onClear={() => {
+                            setSearchParams(searchParameter => {
+                                searchParameter.delete("orgUnitName")
+                                return searchParameter
+                            })
+                        }}
+                />
             </form>
         </HStack>
     )

diff --git a/app/data/resourceModuleAdmin/resource-module-admin.ts b/app/data/resourceModuleAdmin/resource-module-admin.ts
@@ -26,8 +26,6 @@ export const postNewTildelingForUser = async (token: string | null, resourceId:
 
     const url = `${ACCESS_MANAGEMENT_API_URL}${BASE_PATH}/api/accessmanagement/v1/accessassignment`;
 
-    console.log(scopeId)
-
     const response = await fetch(url, {
         method: "POST",
         headers: ({

diff --git a/app/routes/kontroll-admin.define-role.tsx b/app/routes/kontroll-admin.define-role.tsx
@@ -12,6 +12,7 @@ import {json} from "@remix-run/node";
 import {fetchAccessRoles} from "~/data/kontrollAdmin/kontroll-admin-define-role";
 import React, {Suspense, useEffect} from "react";
 import {IRole} from "~/data/kontrollAdmin/types";
+import KontrollAccessRolesRadioGroup from "~/components/kontroll-admin/KontrollAccessRolesRadioGroup";
 
 
 export async function loader({request}: LoaderFunctionArgs) {
@@ -24,37 +25,11 @@ export default function KontrollAdminDefineRole() {
     const roles: IRole[] = useLoaderData<typeof loader>();
     const context = useOutletContext()
 
-    const params = useParams()
-
-    const roleProp = params.id
-    const navigate = useNavigate();
-
-    const handleChangeSelectedRole = (role: string) => {
-        navigate(role)
-    }
-
-    useEffect(() => {
-        !roleProp ? navigate(roles[0].accessRoleId) : ""
-    }, []);
-
     return (
         <section>
             <Tabs value={"define-role"}>
                 <Tabs.Panel value="define-role" className="h-24 w-full bg-gray-50 p-4">
-                    <div className={"radio-group-horizontal"}>
-                        <RadioGroup
-                            legend="Velg rolle"
-                            onChange={(val: string) => handleChangeSelectedRole(val)}
-                            value={roleProp ? roleProp : ""}
-                        >
-                            {roles.map((role, index) =>
-                                <Radio key={role.accessRoleId + index} value={role.accessRoleId}>
-                                    {role.name}
-                                </Radio>)
-                            }
-                        </RadioGroup>
-                    </div>
-
+                    <KontrollAccessRolesRadioGroup roles={roles} />
                     <Outlet context={context} />
                 </Tabs.Panel>
             </Tabs>

diff --git a/app/routes/kontroll-admin.features-to-role.tsx b/app/routes/kontroll-admin.features-to-role.tsx
@@ -5,6 +5,7 @@ import {LoaderFunctionArgs} from "@remix-run/router";
 import {fetchAccessRoles} from "~/data/kontrollAdmin/kontroll-admin-define-role";
 import {IResourceModuleAccessRole} from "~/data/resourceModuleAdmin/types";
 import styles from "../components/kontroll-admin/kontroll-admin.css?url";
+import KontrollAccessRolesRadioGroup from "~/components/kontroll-admin/KontrollAccessRolesRadioGroup";
 
 export function links() {
     return [{rel: 'stylesheet', href: styles}]
@@ -39,17 +40,7 @@ export default () => {
         <Tabs value={"features-to-role"}>
             <Tabs.Panel value="features-to-role" className="h-24 w-full bg-gray-50 p-4">
                 <div className={"radio-group-horizontal"}>
-                    <RadioGroup
-                        legend="Velg rolle"
-                        onChange={(val: string) => handleChangeSelectedRole(val)}
-                        value={roleProp ? roleProp : ""}
-                    >
-                        {accessRoles.map((role, index) =>
-                            <Radio key={role.accessRoleId + index} value={role.accessRoleId}>
-                                {role.name}
-                            </Radio>)
-                        }
-                    </RadioGroup>
+                    <KontrollAccessRolesRadioGroup roles={accessRoles} />
                 </div>
 
                 <Outlet/>