Add 'Is managed by' tab to OTP tokens sub-page

Add the "Is managed by" tab section to the
OTP tokens sub-page, allowing users to view and
manage which users can manage a given OTP token.

Changes:
- Create `ManagedByUsers` reusable component
in src/components/ManagedBy/
- Create `OtpTokensManagedBy` wrapper with
`TabLayout` and badge count
- Add `otptoken_add_managedby` /
`otptoken_remove_managedby` RPC mutations
- Update `OtpToken.managedby_user` type from
`string` to `string[]`
- Add `managedby_user` route in `AppRoutes.tsx`

Assisted-by: Claude <noreply@anthropic.com>
Signed-off-by: Carla Martinez <carlmart@redhat.com>

Author: carma12

src/components/ManagedBy/ManagedByUsers.tsx

@@ -0,0 +1,327 @@
+import React from "react";
+// PatternFly
+import { Pagination, PaginationVariant } from "@patternfly/react-core";
+// Components
+import MemberOfToolbar from "../MemberOf/MemberOfToolbar";
+import MemberOfAddModal, { AvailableItems } from "../MemberOf/MemberOfAddModal";
+import MemberOfDeleteModal from "../MemberOf/MemberOfDeleteModal";
+import MemberTable from "src/components/tables/MembershipTable";
+// Data types
+import { OtpToken, User } from "src/utils/datatypes/globalDataTypes";
+// Redux
+import { useAppDispatch } from "src/store/hooks";
+// Hooks
+import { addAlert } from "src/store/Global/alerts-slice";
+import useListPageSearchParams from "src/hooks/useListPageSearchParams";
+import { toggleHelpPanel } from "src/store/Global/contextual-help-slice";
+// Utils
+import { API_VERSION_BACKUP, paginate } from "src/utils/utils";
+import { apiToUser } from "src/utils/userUtils";
+// RPC
+import { ErrorResult } from "src/services/rpc";
+import {
+  useGetUsersInfoByUidQuery,
+  useGettingActiveUserQuery,
+} from "src/services/rpcUsers";
+import {
+  OtpTokenManagedByPayload,
+  useAddManagedByOtpTokenMutation,
+  useRemoveManagedByOtpTokenMutation,
+} from "src/services/rpcOtpTokens";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { SerializedError } from "@reduxjs/toolkit";
+
+interface ManagedByUsersProps {
+  entity: Partial<OtpToken>;
+  id: string;
+  from: string;
+  isDataLoading: boolean;
+  onRefreshData: () => void;
+}
+
+const ManagedByUsers = (props: ManagedByUsersProps) => {
+  const dispatch = useAppDispatch();
+
+  // Get parameters from URL
+  const { page, setPage, perPage, setPerPage, searchValue, setSearchValue } =
+    useListPageSearchParams();
+
+  // Other states
+  const [usersSelected, setUsersSelected] = React.useState<string[]>([]);
+
+  const managedby_user = props.entity.managedby_user || [];
+
+  const filteredUsers = React.useMemo(() => {
+    let toLoad = [...managedby_user].sort();
+
+    if (searchValue) {
+      const q = searchValue.toLowerCase();
+      toLoad = toLoad.filter((name) => name.toLowerCase().includes(q));
+    }
+
+    return toLoad;
+  }, [props.entity.managedby_user, searchValue]);
+
+  const userNamesToLoad = React.useMemo(
+    () => paginate(filteredUsers, page, perPage),
+    [filteredUsers, page, perPage]
+  );
+
+  const fullUsersQuery = useGetUsersInfoByUidQuery({
+    uidsList: userNamesToLoad,
+    noMembers: true,
+  });
+
+  const users = React.useMemo<User[]>(
+    () => fullUsersQuery.data ?? [],
+    [fullUsersQuery.data]
+  );
+
+  const updateSearchValue = (value: string) => {
+    setPage(1);
+    setSearchValue(value);
+  };
+
+  const submitSearchValue = () => {
+    setPage(1);
+  };
+
+  // Computed "states"
+  const someItemSelected = usersSelected.length > 0;
+  const showTableRows = users.length > 0;
+  const userColumnNames = ["User login", "First name", "Last name", "Status"];
+  const userProperties = ["uid", "givenname", "sn", "nsaccountlock"];
+
+  // Dialogs and actions
+  const [showAddModal, setShowAddModal] = React.useState(false);
+  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
+  const [spinning, setSpinning] = React.useState(false);
+
+  // Buttons functionality
+  const isRefreshButtonEnabled =
+    !fullUsersQuery.isFetching && !props.isDataLoading;
+  const isDeleteEnabled = someItemSelected;
+  const isAddButtonEnabled = isRefreshButtonEnabled;
+
+  // API calls
+  const [addManagedBy] = useAddManagedByOtpTokenMutation();
+  const [removeManagedBy] = useRemoveManagedByOtpTokenMutation();
+
+  const [adderSearchValue, setAdderSearchValue] = React.useState("");
+  const [availableUsers, setAvailableUsers] = React.useState<User[]>([]);
+  const [availableItems, setAvailableItems] = React.useState<AvailableItems[]>(
+    []
+  );
+
+  // Load available Users
+  const usersQuery = useGettingActiveUserQuery({
+    search: adderSearchValue,
+    apiVersion: API_VERSION_BACKUP,
+    sizelimit: 100,
+    startIdx: 0,
+    stopIdx: 100,
+  });
+
+  // Trigger available Users search
+  React.useEffect(() => {
+    if (showAddModal) {
+      usersQuery.refetch();
+    }
+  }, [showAddModal, adderSearchValue, props.entity]);
+
+  // Update available Users
+  React.useEffect(() => {
+    if (usersQuery.data && !usersQuery.isFetching) {
+      const count = usersQuery.data.result.count;
+      const results = usersQuery.data.result.results;
+      let items: AvailableItems[] = [];
+      const avalUsers: User[] = [];
+      for (let i = 0; i < count; i++) {
+        const user = apiToUser(results[i].result);
+        avalUsers.push(user);
+        items.push({
+          key: user.uid,
+          title: user.uid,
+        });
+      }
+      items = items.filter((item) => !managedby_user.includes(item.key));
+
+      setAvailableUsers(avalUsers);
+      setAvailableItems(items);
+    }
+  }, [usersQuery.data, usersQuery.isFetching, managedby_user]);
+
+  // Add
+  const onAddUser = (items: AvailableItems[]) => {
+    const newUserNames = items.map((item) => item.key);
+    if (props.id === undefined || newUserNames.length === 0) {
+      return;
+    }
+
+    const payload: OtpTokenManagedByPayload = {
+      otpTokenId: props.id,
+      users: newUserNames,
+    };
+
+    setSpinning(true);
+    addManagedBy(payload).then(
+      (
+        response:
+          | { data: { result?: unknown; error?: unknown } }
+          | { error: FetchBaseQueryError | SerializedError }
+      ) => {
+        if ("data" in response) {
+          if (response.data?.result) {
+            dispatch(
+              addAlert({
+                name: "add-managedby-success",
+                title: "Assigned new managers to OTP token '" + props.id + "'",
+                variant: "success",
+              })
+            );
+            props.onRefreshData();
+            setShowAddModal(false);
+          } else if (response.data?.error) {
+            const errorMessage = response.data.error as unknown as ErrorResult;
+            dispatch(
+              addAlert({
+                name: "add-managedby-error",
+                title: errorMessage.message,
+                variant: "danger",
+              })
+            );
+          }
+        } else if ("error" in response) {
+          dispatch(
+            addAlert({
+              name: "add-managedby-error",
+              title: "Failed to assign managers",
+              variant: "danger",
+            })
+          );
+        }
+        setSpinning(false);
+      }
+    );
+  };
+
+  // Delete
+  const onDeleteUser = () => {
+    if (props.id === undefined) return;
+
+    const payload: OtpTokenManagedByPayload = {
+      otpTokenId: props.id,
+      users: usersSelected,
+    };
+
+    setSpinning(true);
+    removeManagedBy(payload).then(
+      (
+        response:
+          | { data: unknown }
+          | { error: FetchBaseQueryError | SerializedError }
+      ) => {
+        if ("data" in response) {
+          dispatch(
+            addAlert({
+              name: "remove-managedby-success",
+              title: "Removed managers from OTP token '" + props.id + "'",
+              variant: "success",
+            })
+          );
+          props.onRefreshData();
+          setUsersSelected([]);
+          setShowDeleteModal(false);
+        } else if ("error" in response) {
+          dispatch(
+            addAlert({
+              name: "remove-managedby-error",
+              title: "Failed to remove managers",
+              variant: "danger",
+            })
+          );
+        }
+        setSpinning(false);
+      }
+    );
+  };
+
+  return (
+    <>
+      <MemberOfToolbar
+        searchText={searchValue}
+        onSearchTextChange={updateSearchValue}
+        onSearch={submitSearchValue}
+        searchPlaceholder="Search users"
+        searchAriaLabel="Search users"
+        refreshButtonEnabled={isRefreshButtonEnabled}
+        onRefreshButtonClick={props.onRefreshData}
+        deleteButtonEnabled={isDeleteEnabled}
+        onDeleteButtonClick={() => setShowDeleteModal(true)}
+        addButtonEnabled={isAddButtonEnabled}
+        onAddButtonClick={() => setShowAddModal(true)}
+        helpIconEnabled={true}
+        onHelpIconClick={() => dispatch(toggleHelpPanel())}
+        totalItems={filteredUsers.length}
+        perPage={perPage}
+        page={page}
+        onPerPageChange={setPerPage}
+        onPageChange={setPage}
+      />
+      <MemberTable
+        entityList={users}
+        idKey="uid"
+        from="active-users"
+        columnNamesToShow={userColumnNames}
+        propertiesToShow={userProperties}
+        checkedItems={usersSelected}
+        onCheckItemsChange={setUsersSelected}
+        showTableRows={showTableRows}
+      />
+      <Pagination
+        className="pf-v6-u-pb-0 pf-v6-u-pr-md"
+        itemCount={filteredUsers.length}
+        widgetId="pagination-options-menu-bottom"
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={(_e, page) => setPage(page)}
+        onPerPageSelect={(_e, perPage) => setPerPage(perPage)}
+      />
+      {showAddModal && (
+        <MemberOfAddModal
+          showModal={showAddModal}
+          onCloseModal={() => setShowAddModal(false)}
+          availableItems={availableItems}
+          onAdd={onAddUser}
+          onSearchTextChange={setAdderSearchValue}
+          title={`Assign users managing OTP token: ${props.id}`}
+          ariaLabel="Add managed by user modal"
+          spinning={spinning}
+        />
+      )}
+      {showDeleteModal && someItemSelected && (
+        <MemberOfDeleteModal
+          showModal={showDeleteModal}
+          onCloseModal={() => setShowDeleteModal(false)}
+          title={`Remove managers from OTP token: ${props.id}`}
+          onDelete={onDeleteUser}
+          spinning={spinning}
+        >
+          <MemberTable
+            entityList={availableUsers.filter((user) =>
+              usersSelected.includes(user.uid)
+            )}
+            from="active-users"
+            idKey="uid"
+            columnNamesToShow={userColumnNames}
+            propertiesToShow={userProperties}
+            showTableRows
+          />
+        </MemberOfDeleteModal>
+      )}
+    </>
+  );
+};
+
+export default ManagedByUsers;

src/navigation/AppRoutes.tsx

@@ -464,6 +464,10 @@ export const AppRoutes = ({ isInitialDataLoaded }): React.ReactElement => {
                     path=""
                     element={<OtpTokensTabs section="settings" />}
                   />
+                  <Route
+                    path="managedby_user"
+                    element={<OtpTokensTabs section="managedby_user" />}
+                  />
                 </Route>
               </Route>
               <Route path="identity-provider-references">