@@ -20,16 +23,22 @@ function TeamFilter() {
return (
- setFilterValue({ name: "teamId", value: event.target.value })
- }
+ value={useTeamName ? teamName : teamId}
+ onChange={(event) => {
+ return setFilterValue({
+ name: useTeamName ? "teamName" : "teamId",
+ value: event.target.value,
+ });
+ }}
>
- {topicTeams.map((team) => (
-
))}
diff --git a/coral/src/app/features/components/filters/useFiltersContext.tsx b/coral/src/app/features/components/filters/useFiltersContext.tsx
index da0a29a86f..710b17a8d6 100644
--- 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,
diff --git a/coral/src/app/features/configuration/users/Users.test.tsx b/coral/src/app/features/configuration/users/Users.test.tsx
new file mode 100644
index 0000000000..1ddc3ac056
--- /dev/null
+++ b/coral/src/app/features/configuration/users/Users.test.tsx
@@ -0,0 +1,461 @@
+import {
+ cleanup,
+ screen,
+ waitFor,
+ waitForElementToBeRemoved,
+ within,
+} from "@testing-library/react";
+import { customRender } from "src/services/test-utils/render-with-wrappers";
+import { KlawApiError } from "src/services/api";
+import { mockIntersectionObserver } from "src/services/test-utils/mock-intersection-observer";
+import { getUserList, User } from "src/domain/user";
+import { Users } from "src/app/features/configuration/users/Users";
+import { userEvent } from "@testing-library/user-event";
+import { getTeams, Team } from "src/domain/team";
+
+jest.mock("src/domain/user/user-api");
+jest.mock("src/domain/team/team-api.ts");
+
+const mockGetUsers = getUserList as jest.MockedFunction;
+const mockGetTeams = getTeams as jest.MockedFunction;
+
+const userOne: User = {
+ fullname: "Jean-Luc Picard",
+ mailid: "jlpicard@ufp.org",
+ role: "CAPTAIN",
+ switchTeams: false,
+ team: "Enterprise",
+ teamId: 1,
+ tenantId: 0,
+ username: "js-picard",
+};
+
+const userTwo: User = {
+ fullname: "Chris Pike",
+ mailid: "cpike@ufp.org",
+ role: "SUPERADMIN",
+ switchAllowedTeamIds: [1, 2],
+ switchAllowedTeamNames: ["Enterprise", "Discovery"],
+ switchTeams: true,
+ team: "Discovery",
+ teamId: 2,
+ tenantId: 0,
+ username: "c-pike",
+};
+
+const mockUsers = [userOne, userTwo];
+
+const teamOne: Team = {
+ app: "",
+ contactperson: "Picard",
+ envList: [],
+ serviceAccounts: {},
+ showDeleteTeam: false,
+ teamId: 1111,
+ teammail: "",
+ teamname: "NCC-1701-D",
+ teamphone: "12345",
+ tenantId: 0,
+ tenantName: "UFP",
+};
+const teamTwo: Team = {
+ contactperson: "Pike",
+ showDeleteTeam: false,
+ teamId: 2222,
+ teamname: "NCC-1701",
+ teamphone: "67890",
+ tenantId: 0,
+ tenantName: "default",
+};
+
+const mockedTeams = [teamOne, teamTwo];
+
+describe("Users.tsx", () => {
+ const user = userEvent.setup();
+
+ describe("handles loading state", () => {
+ beforeAll(() => {
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 1,
+ totalPages: 1,
+ entries: [],
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ });
+
+ afterAll(() => {
+ cleanup();
+ jest.resetAllMocks();
+ });
+
+ it("shows a loading information", () => {
+ const loadingAnimation = screen.getByTestId("skeleton-table");
+ expect(loadingAnimation).toBeVisible();
+ });
+ });
+
+ describe("handles empty state", () => {
+ beforeAll(async () => {
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 1,
+ totalPages: 1,
+ entries: [],
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterAll(() => {
+ cleanup();
+ jest.resetAllMocks();
+ });
+
+ it("does not render the table", () => {
+ const table = screen.queryByRole("table");
+ expect(table).not.toBeInTheDocument();
+ });
+
+ it("shows information about the empty state", () => {
+ const heading = screen.getByRole("heading", { name: "No users" });
+ expect(heading).toBeVisible();
+ });
+ });
+
+ describe("handles error state", () => {
+ const testError: KlawApiError = {
+ message: "OH NO ðŸ˜",
+ success: false,
+ };
+
+ const originalConsoleError = console.error;
+
+ beforeAll(async () => {
+ console.error = jest.fn();
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockRejectedValue(testError);
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterAll(() => {
+ cleanup();
+ jest.resetAllMocks();
+ console.error = originalConsoleError;
+ });
+
+ it("does not render the table", () => {
+ const table = screen.queryByRole("table");
+ expect(table).not.toBeInTheDocument();
+
+ expect(console.error).toHaveBeenCalled();
+ });
+
+ it("shows an error alert", () => {
+ const error = screen.getByRole("alert");
+
+ expect(error).toBeVisible();
+ expect(error).toHaveTextContent(testError.message);
+ expect(console.error).toHaveBeenCalledWith(testError);
+ });
+ });
+
+ describe("handles successful response with one page", () => {
+ beforeAll(async () => {
+ mockIntersectionObserver();
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 1,
+ totalPages: 1,
+ entries: mockUsers,
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterAll(() => {
+ cleanup();
+ jest.resetAllMocks();
+ });
+
+ it("shows a table with user overview", () => {
+ const table = screen.getByRole("table", {
+ name: "Users overview, page 1 of 1",
+ });
+
+ expect(table).toBeVisible();
+ });
+
+ it("does not render the pagination", () => {
+ const pagination = screen.queryByRole("navigation", {
+ name: /Pagination/,
+ });
+
+ expect(pagination).not.toBeInTheDocument();
+ });
+
+ it("shows select element for teams with All teams as default", () => {
+ const select = screen.getByRole("combobox", { name: "Filter by team" });
+
+ expect(select).toBeEnabled();
+ expect(select).toHaveDisplayValue("All teams");
+ });
+
+ mockUsers.forEach((user) => {
+ it(`renders the user name "${user.username}"`, () => {
+ const table = screen.getByRole("table", {
+ name: /Users overview/,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.username,
+ });
+
+ expect(cell).toBeVisible();
+ });
+ });
+ });
+
+ describe("handles successful response with 3 pages", () => {
+ beforeAll(async () => {
+ mockIntersectionObserver();
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 2,
+ totalPages: 4,
+ entries: mockUsers,
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterAll(() => {
+ cleanup();
+ jest.resetAllMocks();
+ });
+
+ it("shows a table with user overview", () => {
+ const table = screen.getByRole("table", {
+ name: "Users overview, page 2 of 4",
+ });
+
+ expect(table).toBeVisible();
+ });
+
+ it("does the pagination with current and all pages", () => {
+ const pagination = screen.getByRole("navigation", {
+ name: "Pagination navigation, you're on page 2 of 4",
+ });
+
+ expect(pagination).toBeVisible();
+ });
+
+ mockUsers.forEach((user) => {
+ it(`renders the user name "${user.username}"`, () => {
+ const table = screen.getByRole("table", {
+ name: /Users overview/,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.username,
+ });
+
+ expect(cell).toBeVisible();
+ });
+ });
+ });
+
+ describe("handles user stepping through pagination", () => {
+ beforeEach(async () => {
+ mockIntersectionObserver();
+ mockGetTeams.mockResolvedValue([]);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 3,
+ totalPages: 5,
+ entries: mockUsers,
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ cleanup();
+ });
+
+ it("shows page 3 as currently active page and the total page number", () => {
+ const pagination = screen.getByRole("navigation", {
+ name: /Pagination/,
+ });
+
+ expect(pagination).toHaveAccessibleName(
+ "Pagination navigation, you're on page 3 of 5"
+ );
+ });
+
+ it("fetches new data when user clicks on next page", async () => {
+ const pageTwoButton = screen.getByRole("button", {
+ name: "Go to next page, page 4",
+ });
+
+ await user.click(pageTwoButton);
+
+ expect(mockGetUsers).toHaveBeenNthCalledWith(2, {
+ pageNo: "4",
+ });
+ });
+ });
+
+ describe("enables user to filter by team", () => {
+ beforeEach(async () => {
+ mockIntersectionObserver();
+ mockGetTeams.mockResolvedValue(mockedTeams);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 3,
+ totalPages: 5,
+ entries: mockUsers,
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ cleanup();
+ });
+
+ it("renders a select with all teams fetched from the endpoint", () => {
+ const select = screen.getByRole("combobox", {
+ name: "Filter by team",
+ });
+
+ const options = within(select).getAllByRole("option");
+
+ // one option for "All teams"
+ expect(options).toHaveLength(mockedTeams.length + 1);
+ expect(options[0]).toHaveValue("ALL");
+ expect(options[1]).toHaveValue(mockedTeams[0].teamname);
+ expect(options[2]).toHaveValue(mockedTeams[1].teamname);
+ });
+
+ it("fetches new data when user filters by a team", async () => {
+ const teamToSelect = mockedTeams[0].teamname;
+
+ const select = screen.getByRole("combobox", {
+ name: "Filter by team",
+ });
+
+ const option = within(select).getByRole("option", { name: teamToSelect });
+
+ await user.selectOptions(select, option);
+
+ //first call on load
+ expect(mockGetUsers).toHaveBeenNthCalledWith(2, {
+ pageNo: "1",
+ teamName: "NCC-1701-D",
+ });
+ });
+
+ it("removes teamName as url param when user chooses All teams", async () => {
+ const teamToSelect = mockedTeams[0].teamname;
+ const select = screen.getByRole("combobox", {
+ name: "Filter by team",
+ });
+ const optionOne = within(select).getByRole("option", {
+ name: teamToSelect,
+ });
+
+ await user.selectOptions(select, optionOne);
+
+ //first call on load
+ expect(mockGetUsers).toHaveBeenNthCalledWith(2, {
+ pageNo: "1",
+ teamName: "NCC-1701-D",
+ });
+
+ const optionTwo = within(select).getByRole("option", {
+ name: "All teams",
+ });
+
+ await user.selectOptions(select, optionTwo);
+
+ //first call on load, second for the first filter
+ expect(mockGetUsers).toHaveBeenNthCalledWith(3, {
+ pageNo: "1",
+ });
+ });
+ });
+
+ describe("enables user to search for user name", () => {
+ beforeEach(async () => {
+ mockIntersectionObserver();
+ mockGetTeams.mockResolvedValue(mockedTeams);
+ mockGetUsers.mockResolvedValue({
+ currentPage: 3,
+ totalPages: 5,
+ entries: mockUsers,
+ });
+ customRender(, { queryClient: true, memoryRouter: true });
+ await waitForElementToBeRemoved(screen.getByTestId("skeleton-table"));
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ cleanup();
+ });
+
+ it("renders a search field for username", () => {
+ const search = screen.getByRole("search", {
+ name: "Search username",
+ });
+
+ expect(search).toBeEnabled();
+ expect(search).toHaveAccessibleDescription(
+ 'Partial match for user name Searching starts automatically with a little delay while typing. Press "Escape" to delete all your input.'
+ );
+ });
+
+ it("fetches new data when user searches for username", async () => {
+ const usernameSearch = "myname";
+
+ const search = screen.getByRole("search", {
+ name: "Search username",
+ });
+
+ await user.type(search, usernameSearch);
+
+ await waitFor(() => {
+ expect(mockGetUsers).toHaveBeenCalledWith({
+ pageNo: "1",
+ searchUserParam: usernameSearch,
+ });
+ });
+ });
+
+ it("removes username search as url param when user deletes input", async () => {
+ const usernameSearch = "myname";
+
+ const search = screen.getByRole("search", {
+ name: "Search username",
+ });
+
+ await user.type(search, usernameSearch);
+
+ await waitFor(() => {
+ // first call is on load
+ expect(mockGetUsers).toHaveBeenNthCalledWith(2, {
+ pageNo: "1",
+ searchUserParam: usernameSearch,
+ });
+ });
+
+ await user.clear(search);
+
+ await waitFor(() => {
+ // first call is on load, second for search
+ expect(mockGetUsers).toHaveBeenNthCalledWith(3, {
+ pageNo: "1",
+ });
+ });
+ });
+ });
+});
diff --git a/coral/src/app/features/configuration/users/Users.tsx b/coral/src/app/features/configuration/users/Users.tsx
new file mode 100644
index 0000000000..0862a3e9ae
--- /dev/null
+++ b/coral/src/app/features/configuration/users/Users.tsx
@@ -0,0 +1,85 @@
+import { TableLayout } from "src/app/features/components/layouts/TableLayout";
+import { useQuery } from "@tanstack/react-query";
+import { getUserList } from "src/domain/user";
+import { UsersTable } from "src/app/features/configuration/users/components/UsersTable";
+import { Pagination } from "src/app/components/Pagination";
+import { useSearchParams } from "react-router-dom";
+import {
+ useFiltersContext,
+ withFiltersContext,
+} from "src/app/features/components/filters/useFiltersContext";
+import TeamFilter from "src/app/features/components/filters/TeamFilter";
+import { SearchFilter } from "src/app/features/components/filters/SearchFilter";
+
+function UsersWithoutFilterContext() {
+ const [searchParams, setSearchParams] = useSearchParams();
+ const { teamName, search } = useFiltersContext();
+
+ const currentPage = searchParams.get("page")
+ ? Number(searchParams.get("page"))
+ : 1;
+
+ const {
+ data: users,
+ isLoading,
+ isError,
+ error,
+ } = useQuery(["getUserList", currentPage, teamName, search], {
+ queryFn: () =>
+ getUserList({
+ pageNo: String(currentPage),
+ teamName: teamName === "ALL" ? undefined : teamName,
+ searchUserParam: search.length === 0 ? undefined : search,
+ }),
+ keepPreviousData: true,
+ });
+
+ function handleChangePage(page: number) {
+ searchParams.set("page", page.toString());
+ setSearchParams(searchParams);
+ }
+
+ const pagination =
+ users && users.totalPages > 1 ? (
+
+ ) : undefined;
+
+ const table = (
+
+ );
+
+ return (
+ ,
+ ,
+ ]}
+ table={table}
+ pagination={pagination}
+ isLoading={isLoading}
+ isErrorLoading={isError}
+ errorMessage={error}
+ />
+ );
+}
+
+const Users = withFiltersContext({
+ element: ,
+});
+
+export { Users };
diff --git a/coral/src/app/features/configuration/users/components/UsersTable.test.tsx b/coral/src/app/features/configuration/users/components/UsersTable.test.tsx
new file mode 100644
index 0000000000..61d0f790b1
--- /dev/null
+++ b/coral/src/app/features/configuration/users/components/UsersTable.test.tsx
@@ -0,0 +1,173 @@
+import { cleanup, screen, render, within } from "@testing-library/react";
+import { UsersTable } from "src/app/features/configuration/users/components/UsersTable";
+import { mockIntersectionObserver } from "src/services/test-utils/mock-intersection-observer";
+import { User } from "src/domain/user";
+
+const userOne: User = {
+ fullname: "Jean-Luc Picard",
+ mailid: "jlpicard@ufp.org",
+ role: "CAPTAIN",
+ switchTeams: false,
+ team: "Enterprise",
+ teamId: 1,
+ tenantId: 0,
+ username: "js-picard",
+};
+
+const userTwo: User = {
+ fullname: "Chris Pike",
+ mailid: "cpike@ufp.org",
+ role: "SUPERADMIN",
+ switchAllowedTeamIds: [1, 2],
+ switchAllowedTeamNames: ["Enterprise", "Discovery"],
+ switchTeams: true,
+ team: "Discovery",
+ teamId: 2,
+ tenantId: 0,
+ username: "c-pike",
+};
+
+const mockUsers = [userOne, userTwo];
+
+const tableRowHeader = [
+ "Username",
+ "Name",
+ "Role",
+ "Team",
+ "Email ID",
+ "Switch teams",
+ "Switch between teams",
+];
+
+const testLabel = "Users overview, page 1 of 1";
+describe("UsersTable.tsx", () => {
+ describe("handles empty state", () => {
+ beforeAll(() => {
+ render();
+ });
+ afterAll(cleanup);
+
+ it("show empty state when there is no data", () => {
+ const heading = screen.getByRole("heading", { name: "No users" });
+ expect(heading).toBeVisible();
+ });
+
+ it("show additional information when there is no data", () => {
+ const text = screen.getByText("There are no users data available.");
+ expect(text).toBeVisible();
+ });
+ });
+
+ describe("shows all users as a table", () => {
+ beforeAll(() => {
+ mockIntersectionObserver();
+ render();
+ });
+
+ afterAll(cleanup);
+
+ it("renders a users table", async () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+
+ expect(table).toBeVisible();
+ });
+
+ tableRowHeader.forEach((header) => {
+ it(`renders a column header for ${header}`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+ const colHeader = within(table).getByRole("columnheader", {
+ name: header,
+ });
+
+ expect(colHeader).toBeVisible();
+ });
+ });
+
+ mockUsers.forEach((user) => {
+ it(`renders the user name "${user.username}"`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.username,
+ });
+
+ expect(cell).toBeVisible();
+ });
+
+ it(`renders the users full name "${user.fullname}"`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.fullname,
+ });
+
+ expect(cell).toBeVisible();
+ });
+
+ it(`renders the users team "${user.team}"`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.team,
+ });
+
+ expect(cell).toBeVisible();
+ });
+
+ it(`renders the users email ID "${user.mailid}"`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+ const cell = within(table).getByRole("cell", {
+ name: user.mailid,
+ });
+
+ expect(cell).toBeVisible();
+ });
+
+ it(`renders indicator that user can switch team`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+
+ const row = within(table).getByRole("row", {
+ name: new RegExp(`${user.username}`, "i"),
+ });
+ const cell = within(row).getAllByRole("cell");
+
+ const positionOfSwitchTeamRow = tableRowHeader.indexOf("Switch teams");
+ expect(cell[positionOfSwitchTeamRow]).toHaveTextContent(
+ user.switchTeams ? "enabled" : "false"
+ );
+ });
+
+ if (user.switchAllowedTeamNames) {
+ it(`renders all teams a user can switch between if its enabled for them`, () => {
+ const table = screen.getByRole("table", {
+ name: testLabel,
+ });
+
+ const row = within(table).getByRole("row", {
+ name: new RegExp(`${user.username}`, "i"),
+ });
+ const cell = within(row).getAllByRole("cell");
+
+ const positionOfTeamsToSwitch = tableRowHeader.indexOf(
+ "Switch between teams"
+ );
+
+ user.switchAllowedTeamNames?.forEach((name) => {
+ expect(cell[positionOfTeamsToSwitch]).toHaveTextContent(name);
+ });
+ });
+ }
+ });
+ });
+});
diff --git a/coral/src/app/features/configuration/users/components/UsersTable.tsx b/coral/src/app/features/configuration/users/components/UsersTable.tsx
new file mode 100644
index 0000000000..30295474d1
--- /dev/null
+++ b/coral/src/app/features/configuration/users/components/UsersTable.tsx
@@ -0,0 +1,116 @@
+import { Box, DataTable, DataTableColumn, EmptyState } from "@aivenio/aquarium";
+import { User } from "src/domain/user";
+import uniqueId from "lodash/uniqueId";
+
+type UsersProps = {
+ users: User[];
+ ariaLabel: string;
+};
+
+interface UsersRow {
+ id: string;
+ username: User["username"];
+ fullname: User["fullname"];
+ role: User["role"];
+ team: User["team"];
+ mailid: User["mailid"];
+ switchTeams: User["switchTeams"];
+ switchAllowedTeamNames: User["switchAllowedTeamNames"];
+}
+
+const UsersTable = ({ users, ariaLabel }: UsersProps) => {
+ const columns: Array> = [
+ {
+ type: "text",
+ field: "username",
+ headerName: "Username",
+ },
+ {
+ type: "text",
+ field: "fullname",
+ headerName: "Name",
+ },
+ {
+ type: "status",
+ headerName: "Role",
+ status: ({ role }) => ({
+ status: role === "SUPERADMIN" ? "info" : "neutral",
+ text: role,
+ }),
+ },
+ {
+ type: "text",
+ field: "team",
+ headerName: "Team",
+ },
+ {
+ type: "text",
+ field: "mailid",
+ headerName: "Email ID",
+ },
+ {
+ type: "status",
+ headerName: "Switch teams",
+ status: ({ switchTeams }) => ({
+ status: switchTeams ? "success" : "neutral",
+ text: switchTeams ? "enabled" : "false",
+ }),
+ },
+ {
+ type: "custom",
+ width: 200,
+ headerName: "Switch between teams",
+ UNSAFE_render: ({ switchAllowedTeamNames }) => {
+ if (switchAllowedTeamNames) {
+ return (
+
+ {switchAllowedTeamNames.map((team, index) => (
+
+ {team}
+ {index === switchAllowedTeamNames.length - 1 ? "" : ","}
+
+ ))}
+
+ );
+ }
+ },
+ },
+ ];
+
+ const rows: UsersRow[] = users.map((user) => {
+ return {
+ id: uniqueId(),
+ username: user.username,
+ fullname: user.fullname,
+ role: user.role,
+ team: user.team,
+ mailid: user.mailid,
+ switchTeams: user.switchTeams,
+ switchAllowedTeamNames: user.switchAllowedTeamNames,
+ };
+ });
+
+ if (rows.length === 0) {
+ return (
+
+ There are no users data available.
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+export { UsersTable };
diff --git a/coral/src/app/layout/main-navigation/MainNavigation.test.tsx b/coral/src/app/layout/main-navigation/MainNavigation.test.tsx
index 4beeb5149c..a1934b7fc7 100644
--- a/coral/src/app/layout/main-navigation/MainNavigation.test.tsx
+++ b/coral/src/app/layout/main-navigation/MainNavigation.test.tsx
@@ -189,6 +189,53 @@ describe("MainNavigation.tsx", () => {
});
});
+ describe("renders links to users behind feature flag", () => {
+ afterEach(() => {
+ cleanup();
+ jest.resetAllMocks();
+ });
+
+ it("renders a link to the old UI when feature flag is false", async () => {
+ isFeatureFlagActiveMock.mockReturnValueOnce(false);
+ customRender(, {
+ memoryRouter: true,
+ queryClient: true,
+ });
+
+ const button = screen.getByRole("button", {
+ name: new RegExp("Configuration", "i"),
+ });
+ await userEvent.click(button);
+ const list = screen.getByRole("list", {
+ name: `Configuration submenu`,
+ });
+
+ const link = within(list).getByRole("link", { name: "Users" });
+ expect(link).toBeVisible();
+ expect(link).toHaveAttribute("href", "/users");
+ });
+
+ it("renders a link to the users page when feature flag is true", async () => {
+ isFeatureFlagActiveMock.mockReturnValueOnce(true);
+ customRender(, {
+ memoryRouter: true,
+ queryClient: true,
+ });
+
+ const button = screen.getByRole("button", {
+ name: new RegExp("Configuration", "i"),
+ });
+ await userEvent.click(button);
+ const list = screen.getByRole("list", {
+ name: `Configuration submenu`,
+ });
+
+ const link = within(list).getByRole("link", { name: "Users" });
+ expect(link).toBeVisible();
+ expect(link).toHaveAttribute("href", "/configuration/users");
+ });
+ });
+
describe("user can open submenus and see more links", () => {
beforeEach(() => {
customRender(, {
diff --git a/coral/src/app/layout/main-navigation/MainNavigation.tsx b/coral/src/app/layout/main-navigation/MainNavigation.tsx
index 2361813ddb..3e014e3016 100644
--- a/coral/src/app/layout/main-navigation/MainNavigation.tsx
+++ b/coral/src/app/layout/main-navigation/MainNavigation.tsx
@@ -97,7 +97,11 @@ function MainNavigation() {
text={"Configuration"}
defaultExpanded={pathname.startsWith(Routes.CONFIGURATION)}
>
-
+
{
+ return (
+ <>
+
+
+
+ );
+};
+
+export { UsersPage };
diff --git a/coral/src/app/router.tsx b/coral/src/app/router.tsx
index ccaf94ca4a..4a8e167958 100644
--- a/coral/src/app/router.tsx
+++ b/coral/src/app/router.tsx
@@ -56,6 +56,7 @@ import { getRouterBasename } from "src/config";
import { createRouteBehindFeatureFlag } from "src/services/feature-flags/route-utils";
import { FeatureFlag } from "src/services/feature-flags/types";
import { TeamsPage } from "src/app/pages/configuration/teams";
+import { UsersPage } from "src/app/pages/configuration/users";
const routes: Array = [
{
@@ -239,6 +240,12 @@ const routes: Array = [
redirectRouteWithoutFeatureFlag: Routes.TOPICS,
element: ,
}),
+ createRouteBehindFeatureFlag({
+ path: Routes.USERS,
+ featureFlag: FeatureFlag.FEATURE_FLAG_USER_TEAMS,
+ redirectRouteWithoutFeatureFlag: Routes.TOPICS,
+ element: ,
+ }),
],
},
],
diff --git a/coral/src/app/router_utils.ts b/coral/src/app/router_utils.ts
index 4f9888d1a7..f5d5868d18 100644
--- a/coral/src/app/router_utils.ts
+++ b/coral/src/app/router_utils.ts
@@ -20,6 +20,7 @@ enum Routes {
CONFIGURATION = "/configuration",
ENVIRONMENTS = "/configuration/environments",
TEAMS = "/configuration/teams",
+ USERS = "/configuration/users",
}
enum EnvironmentsTabEnum {
diff --git a/coral/src/domain/user/index.ts b/coral/src/domain/user/index.ts
new file mode 100644
index 0000000000..0a1d3f4617
--- /dev/null
+++ b/coral/src/domain/user/index.ts
@@ -0,0 +1,5 @@
+import { getUserList } from "src/domain/user/user-api";
+import { User } from "src/domain/user/user-types";
+
+export { getUserList };
+export type { User };
diff --git a/coral/src/domain/user/user-api.ts b/coral/src/domain/user/user-api.ts
new file mode 100644
index 0000000000..83f3fbf9e5
--- /dev/null
+++ b/coral/src/domain/user/user-api.ts
@@ -0,0 +1,29 @@
+import { KlawApiRequestQueryParameters, KlawApiResponse } from "types/utils";
+import api, { API_PATHS } from "src/services/api";
+import { transformUserListApiResponse } from "src/domain/user/user-transformer";
+import { UserListApiResponse } from "src/domain/user/user-types";
+import { convertQueryValuesToString } from "src/services/api-helper";
+
+async function getUserList(
+ params: KlawApiRequestQueryParameters<"showUsers">
+): Promise {
+ const queryParams = convertQueryValuesToString({
+ ...params,
+ ...(params?.teamName && { teamName: params.teamName }),
+ ...(params?.searchUserParam && { searchUserParam: params.searchUserParam }),
+ });
+
+ return api
+ .get>(
+ API_PATHS.showUsers,
+ new URLSearchParams(queryParams)
+ )
+ .then((response) =>
+ transformUserListApiResponse({
+ apiResponse: response,
+ currentPage: Number(params?.pageNo) || 1,
+ })
+ );
+}
+
+export { getUserList };
diff --git a/coral/src/domain/user/user-transformer.ts b/coral/src/domain/user/user-transformer.ts
new file mode 100644
index 0000000000..3e8bcc8c33
--- /dev/null
+++ b/coral/src/domain/user/user-transformer.ts
@@ -0,0 +1,26 @@
+import { KlawApiResponse } from "types/utils";
+import { UserListApiResponse } from "src/domain/user/user-types";
+
+function transformUserListApiResponse({
+ apiResponse,
+ currentPage,
+}: {
+ apiResponse: KlawApiResponse<"showUsers">;
+ currentPage: number;
+}): UserListApiResponse {
+ if (apiResponse.length === 0) {
+ return {
+ totalPages: 0,
+ currentPage,
+ entries: [],
+ };
+ }
+
+ return {
+ totalPages: Number(apiResponse[0].totalNoPages),
+ currentPage,
+ entries: apiResponse,
+ };
+}
+
+export { transformUserListApiResponse };
diff --git a/coral/src/domain/user/user-types.ts b/coral/src/domain/user/user-types.ts
new file mode 100644
index 0000000000..f88b5a402e
--- /dev/null
+++ b/coral/src/domain/user/user-types.ts
@@ -0,0 +1,7 @@
+import { KlawApiModel, Paginated, ResolveIntersectionTypes } from "types/utils";
+
+type UserListApiResponse = ResolveIntersectionTypes>;
+
+type User = KlawApiModel<"UserInfoModelResponse">;
+
+export type { User, UserListApiResponse };
diff --git a/coral/vite.config.ts b/coral/vite.config.ts
index 491060fe1c..141d48c556 100644
--- a/coral/vite.config.ts
+++ b/coral/vite.config.ts
@@ -125,6 +125,7 @@ export default defineConfig(({ mode }) => {
const environment = loadEnv(mode, process.cwd(), "");
const usesNodeProxy = mode === "local-api";
+ console.log("mode", mode);
return {
plugins: getPlugins(environment),
define: {