feat(coral): View users (#1971)

* Add feature flag for teams and users Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Add users page, link to it and route behind ff. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Introduce user domain with getUserList endpoint Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Add user table. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Add user component with pagination. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Extend TeamFilter to optional handle TeamName Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Extend useFilterContext to use teamName Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Enable user to filter by team. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Remove browser x for webkit browsers in search inputs Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Enable user to search for username Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Refine tests. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Remove ununsed import after rebase. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Remove unnecessary field prop. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Update query key for user list. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> * Comment in search bar fix. Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io> --------- Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>
Aiven-Open · Nov 20, 2023 · 88a7235 · 88a7235
1 parent 98508eb
commit 88a7235
Show file tree

Hide file tree

Showing 18 changed files with 1,268 additions and 112 deletions.
diff --git a/coral/src/app/features/components/filters/TeamFilter.test.tsx b/coral/src/app/features/components/filters/TeamFilter.test.tsx
diff --git a/coral/src/app/features/components/filters/TeamFilter.tsx b/coral/src/app/features/components/filters/TeamFilter.tsx
@@ -3,14 +3,17 @@ import { useQuery } from "@tanstack/react-query";
 import { useFiltersContext } from "src/app/features/components/filters/useFiltersContext";
 import { getTeams } from "src/domain/team/team-api";
 
-function TeamFilter() {
-  const { data: topicTeams } = useQuery(["get-teams"], {
+type TeamFilterProps = {
+  useTeamName?: boolean;
+};
+function TeamFilter({ useTeamName }: TeamFilterProps) {
+  const { data: teams } = useQuery(["get-teams"], {
     queryFn: () => getTeams(),
   });
 
-  const { teamId, setFilterValue } = useFiltersContext();
+  const { teamId, teamName, setFilterValue } = useFiltersContext();
 
-  if (!topicTeams) {
+  if (!teams) {
     return (
       <div data-testid={"select-team-loading"}>
         <NativeSelect.Skeleton />
@@ -20,16 +23,22 @@ function TeamFilter() {
     return (
       <NativeSelect
         labelText="Filter by team"
-        value={teamId}
-        onChange={(event) =>
-          setFilterValue({ name: "teamId", value: event.target.value })
-        }
+        value={useTeamName ? teamName : teamId}
+        onChange={(event) => {
+          return setFilterValue({
+            name: useTeamName ? "teamName" : "teamId",
+            value: event.target.value,
+          });
+        }}
       >
         <Option key={"ALL"} value={"ALL"}>
           All teams
         </Option>
-        {topicTeams.map((team) => (
-          <Option key={team.teamId} value={team.teamId}>
+        {teams.map((team) => (
+          <Option
+            key={team.teamId}
+            value={useTeamName ? team.teamname : team.teamId}
+          >
             {team.teamname}
           </Option>
         ))}

diff --git a/coral/src/app/features/components/filters/useFiltersContext.tsx b/coral/src/app/features/components/filters/useFiltersContext.tsx
@@ -13,7 +13,8 @@ type SetFiltersParams =
   | { name: "teamId"; value: string }
   | { name: "showOnlyMyRequests"; value: boolean }
   | { name: "requestType"; value: RequestOperationType }
-  | { name: "search"; value: string };
+  | { name: "search"; value: string }
+  | { name: "teamName"; value: string };
 
 interface UseFiltersDefaultValues {
   environment: string;
@@ -24,6 +25,7 @@ interface UseFiltersDefaultValues {
   requestType: RequestOperationType;
   search: string;
   paginated: boolean;
+  teamName: string;
 }
 
 interface UseFiltersReturnedValues
@@ -36,6 +38,7 @@ const emptyValues: UseFiltersDefaultValues = {
   aclType: "ALL",
   status: "ALL",
   teamId: "ALL",
+  teamName: "ALL",
   showOnlyMyRequests: false,
   requestType: "ALL",
   search: "",
@@ -73,6 +76,7 @@ const FiltersProvider = ({
     initialValues.requestType;
   const search = searchParams.get("search") ?? initialValues.search;
   const paginated = initialValues.paginated;
+  const teamName = searchParams.get("teamName") ?? initialValues.teamName;
 
   const setFilterValue = ({ name, value }: SetFiltersParams) => {
     const parsedValue = typeof value === "boolean" ? String(value) : value;
@@ -94,6 +98,7 @@ const FiltersProvider = ({
     aclType,
     status,
     teamId,
+    teamName,
     showOnlyMyRequests,
     requestType,
     search,