@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/AttributesJSON/AttributesJSONView.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import { translatableTerm, Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import {
   ATTRIBUTES_JSON_FORMATS,
   AttributesJSONFormat,
@@ -32,6 +34,7 @@ export interface ComponentProps {
 const AttributesJSONView: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [format, setFormat] = useAttributesJSONFormat();
 
   const lines: Array<Array<JSONToken>> = useMemo(() => {
@@ -52,7 +55,7 @@ const AttributesJSONView: FunctionComponent<ComponentProps> = (
       <div className="flex items-center justify-between gap-2 border-b border-gray-100 bg-gray-50/80 px-2.5 py-1.5">
         <div
           role="group"
-          aria-label="JSON shape"
+          aria-label={translator.translateText("JSON shape")}
           className="inline-flex items-center gap-0.5"
         >
           {ATTRIBUTES_JSON_FORMATS.map(
@@ -74,7 +77,9 @@ const AttributesJSONView: FunctionComponent<ComponentProps> = (
                     setFormat(itemFormat);
                   }}
                 >
-                  {ATTRIBUTES_JSON_FORMAT_LABELS[itemFormat]}
+                  {translator.translateText(
+                    ATTRIBUTES_JSON_FORMAT_LABELS[itemFormat],
+                  )}
                 </button>
               );
             },
@@ -82,7 +87,9 @@ const AttributesJSONView: FunctionComponent<ComponentProps> = (
         </div>
         {/* The section header already counts the attributes; say what the shape means. */}
         <span className="min-w-0 truncate text-[10.5px] text-gray-400">
-          {ATTRIBUTES_JSON_FORMAT_DESCRIPTIONS[format]}
+          {translator.translateText(
+            ATTRIBUTES_JSON_FORMAT_DESCRIPTIONS[format],
+          )}
         </span>
       </div>
       <div
@@ -91,7 +98,14 @@ const AttributesJSONView: FunctionComponent<ComponentProps> = (
         <pre
           className="py-2 font-mono text-[12px] leading-5"
           data-json-format={format}
-          aria-label={`Attributes as ${format} JSON`}
+          aria-label={translator.translateTemplate(
+            "Attributes as {{format}} JSON",
+            {
+              format: translatableTerm(ATTRIBUTES_JSON_FORMAT_LABELS[format], {
+                inSentence: true,
+              }),
+            },
+          )}
         >
           <code className="block">
             {lines.map(

package/UI/Components/AttributesJSON/AttributesViewToggle.tsx

@@ -1,4 +1,10 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import {
+  translatableTerm,
+  Translator,
+  translationKey,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import IconProp from "../../../Types/Icon/IconProp";
 import Icon from "../Icon/Icon";
 import { AttributesView } from "./AttributesJSONPreferences";
@@ -19,7 +25,7 @@ interface ViewOption {
 }
 
 const OPTIONS: ReadonlyArray<ViewOption> = [
-  { view: "list", label: "List" },
+  { view: "list", label: translationKey("List") },
   { view: "json", label: "JSON" },
 ];
 
@@ -27,12 +33,15 @@ const OPTIONS: ReadonlyArray<ViewOption> = [
 const AttributesViewToggle: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const subject: string = props.subject || "attributes";
 
   return (
     <div
       role="group"
-      aria-label={`Show ${subject} as`}
+      aria-label={translator.translateTemplate("Show {{subject}} as", {
+        subject: translatableTerm(subject),
+      })}
       className={`inline-flex h-6 flex-none items-center rounded-md bg-gray-100 p-0.5 ring-1 ring-inset ring-gray-200 ${props.className || ""}`}
       data-testid={props.dataTestId}
     >
@@ -68,7 +77,7 @@ const AttributesViewToggle: FunctionComponent<ComponentProps> = (
                 />
               )}
             </span>
-            {option.label}
+            {translator.translateText(option.label)}
           </button>
         );
       })}

package/UI/Components/AttributesJSON/CopyAttributesAsJSONButton.tsx

@@ -8,6 +8,13 @@ import React, {
   useRef,
   useState,
 } from "react";
+import {
+  PluralTemplate,
+  translatableTerm,
+  Translator,
+  translationKey,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import IconProp from "../../../Types/Icon/IconProp";
 import {
   ATTRIBUTES_JSON_FORMATS,
@@ -56,13 +63,26 @@ type CopyStatus = "idle" | "copied" | "failed";
 
 const STATUS_RESET_MS: number = 1600;
 
-function pluralizeAttributes(count: number): string {
-  return `${count} ${count === 1 ? "attribute" : "attributes"}`;
-}
+// The attribute count and what copying them does, one sentence each.
+const ATTRIBUTE_COUNT: PluralTemplate = {
+  one: "{{count}} attribute",
+  other: "{{count}} attributes",
+};
+
+const COPY_ATTRIBUTES_TITLE: PluralTemplate = {
+  one: "Copy {{count}} attribute as {{format}} JSON",
+  other: "Copy {{count}} attributes as {{format}} JSON",
+};
+
+const COPIED_ATTRIBUTES_ANNOUNCEMENT: PluralTemplate = {
+  one: "Copied {{count}} attribute as {{format}} JSON",
+  other: "Copied {{count}} attributes as {{format}} JSON",
+};
 
 const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement | null => {
+  const translator: Translator = useTranslator();
   const [format, setFormat] = useAttributesJSONFormat();
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
   const [status, setStatus] = useState<CopyStatus>("idle");
@@ -82,8 +102,8 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
   const isMountedRef: React.MutableRefObject<boolean> = useRef<boolean>(true);
 
   const menuId: string = `${useId()}-json-format-menu`;
-  const label: string = props.label || "Copy JSON";
-  const subject: string = props.subject || "attributes";
+  const label: string = props.label || translationKey("Copy JSON");
+  const subject: string = props.subject || translationKey("attributes");
   const size: "xs" | "sm" = props.size || "xs";
   const menuAlign: "left" | "right" = props.menuAlign || "right";
 
@@ -178,8 +198,15 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
     showStatus(succeeded ? "copied" : "failed");
     setAnnouncement(
       succeeded
-        ? `Copied ${pluralizeAttributes(count)} as ${copyFormat} JSON`
-        : "Could not copy to the clipboard",
+        ? translator.translatePlural(COPIED_ATTRIBUTES_ANNOUNCEMENT, count, {
+            format: translatableTerm(
+              ATTRIBUTES_JSON_FORMAT_LABELS[copyFormat],
+              {
+                inSentence: true,
+              },
+            ),
+          })
+        : translator.translateText("Could not copy to the clipboard") || "",
     );
   };
 
@@ -318,13 +345,23 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
         : "text-gray-600 hover:bg-gray-50 hover:text-gray-900";
 
   const mainText: string =
-    status === "copied"
-      ? "Copied"
-      : status === "failed"
-        ? "Copy failed"
-        : label;
-
-  const mainTitle: string = `Copy ${pluralizeAttributes(count)} as ${format} JSON`;
+    translator.translateText(
+      status === "copied"
+        ? "Copied"
+        : status === "failed"
+          ? "Copy failed"
+          : label,
+    ) || label;
+
+  const mainTitle: string = translator.translatePlural(
+    COPY_ATTRIBUTES_TITLE,
+    count,
+    {
+      format: translatableTerm(ATTRIBUTES_JSON_FORMAT_LABELS[format], {
+        inSentence: true,
+      }),
+    },
+  );
 
   return (
     <div
@@ -341,7 +378,13 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
           type="button"
           className={`inline-flex items-center gap-1.5 rounded-l-[5px] font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 ${textClass} ${mainPaddingClass} ${mainStateClass}`}
           title={mainTitle}
-          aria-label={props.compact ? `Copy ${subject} as JSON` : undefined}
+          aria-label={
+            props.compact
+              ? translator.translateTemplate("Copy {{subject}} as JSON", {
+                  subject: translatableTerm(subject),
+                })
+              : undefined
+          }
           data-copy-format={format}
           onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
             event.preventDefault();
@@ -375,8 +418,8 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
           className={`inline-flex items-center rounded-r-[5px] px-1 text-gray-400 transition-colors duration-150 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 ${
             isMenuOpen ? "bg-gray-50 text-gray-700" : ""
           }`}
-          title="Choose JSON format"
-          aria-label="Choose JSON format"
+          title={translator.translateText("Choose JSON format")}
+          aria-label={translator.translateText("Choose JSON format")}
           aria-haspopup="menu"
           aria-expanded={isMenuOpen}
           aria-controls={isMenuOpen ? menuId : undefined}
@@ -399,7 +442,7 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
         <div
           id={menuId}
           role="menu"
-          aria-label="Copy attributes as"
+          aria-label={translator.translateText("Copy attributes as")}
           aria-orientation="vertical"
           className={`absolute top-full z-50 mt-1.5 w-72 rounded-lg bg-white p-1 text-left shadow-lg ring-1 ring-gray-900/10 ${
             menuAlign === "right"
@@ -408,7 +451,9 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
           }`}
         >
           <div className="px-2.5 pb-1 pt-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">
-            Copy {subject} as
+            {translator.translateTemplate("Copy {{subject}} as", {
+              subject: translatableTerm(subject),
+            })}
           </div>
           {ATTRIBUTES_JSON_FORMATS.map(
             (itemFormat: AttributesJSONFormat, index: number): ReactElement => {
@@ -449,7 +494,11 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
                   <span className="min-w-0 flex-1">
                     <span className="flex items-center justify-between gap-2">
                       <span className="text-xs font-semibold text-gray-900">
-                        {ATTRIBUTES_JSON_FORMAT_LABELS[itemFormat]} JSON
+                        {translator.translateTemplate("{{format}} JSON", {
+                          format: translatableTerm(
+                            ATTRIBUTES_JSON_FORMAT_LABELS[itemFormat],
+                          ),
+                        })}
                       </span>
                       {isSelected && (
                         <Icon
@@ -459,7 +508,9 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
                       )}
                     </span>
                     <span className="block text-[11px] leading-4 text-gray-500">
-                      {ATTRIBUTES_JSON_FORMAT_DESCRIPTIONS[itemFormat]}
+                      {translator.translateText(
+                        ATTRIBUTES_JSON_FORMAT_DESCRIPTIONS[itemFormat],
+                      )}
                     </span>
                     <code
                       className="mt-1.5 block truncate rounded bg-gray-50 px-1.5 py-1 font-mono text-[10.5px] leading-4 text-gray-600 ring-1 ring-inset ring-gray-100"
@@ -474,9 +525,11 @@ const CopyAttributesAsJSONButton: FunctionComponent<ComponentProps> = (
           )}
           <div className="mt-1 flex items-center justify-between gap-3 border-t border-gray-100 px-2.5 pb-1 pt-2 text-[10.5px] text-gray-400">
             <span className="whitespace-nowrap tabular-nums">
-              {pluralizeAttributes(count)}
+              {translator.translatePlural(ATTRIBUTE_COUNT, count)}
+            </span>
+            <span className="truncate">
+              {translator.translateText("Values keep their types")}
             </span>
-            <span className="truncate">Values keep their types</span>
           </div>
         </div>
       )}

package/UI/Components/AutocompleteTextInput/AutocompleteTextInput.tsx

@@ -9,6 +9,8 @@ import React, {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   value?: string;
@@ -138,6 +140,7 @@ export function getMenuPosition(
 const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [inputValue, setInputValue] = useState<string>(props.value || "");
   const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
@@ -413,7 +416,9 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
               d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
             ></path>
           </svg>
-          <span>{props.loadingMessage || "Loading..."}</span>
+          <span>
+            {translator.translateText(props.loadingMessage || "Loading...")}
+          </span>
         </div>
       )}
       {!isLoadingSuggestions &&
@@ -477,7 +482,7 @@ const AutocompleteTextInput: FunctionComponent<ComponentProps> = (
         onChange={handleInputChange}
         onFocus={handleInputFocus}
         onKeyDown={handleKeyDown}
-        placeholder={props.placeholder}
+        placeholder={translator.translateText(props.placeholder)}
         spellCheck={!props.disableSpellCheck}
         type="text"
         value={inputValue}

package/UI/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -16,7 +16,7 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
 }: ComponentProps): ReactElement => {
   const { translateString } = useTranslateValue();
   return (
-    <nav className="block" aria-label="Breadcrumb">
+    <nav className="block" aria-label={translateString("Breadcrumb")}>
       <ol role="list" className="flex flex-wrap items-center gap-x-1 gap-y-2">
         {links &&
           links.length > 0 &&

package/UI/Components/BulkUpdate/BulkOwnerActions.tsx

@@ -1,15 +1,13 @@
-import React, { ReactElement, useEffect, useMemo, useState } from "react";
+import React, { ReactElement, useState } from "react";
 
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
-import Team from "../../../Models/DatabaseModels/Team";
-import TeamMember from "../../../Models/DatabaseModels/TeamMember";
 import BadDataException from "../../../Types/Exception/BadDataException";
 import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject } from "../../../Types/JSON";
 import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
 import Includes from "../../../Types/BaseDatabase/Includes";
 import ListResult from "../../../Types/BaseDatabase/ListResult";
 import Query from "../../../Types/BaseDatabase/Query";
-import SortOrder from "../../../Types/BaseDatabase/SortOrder";
 import ObjectID from "../../../Types/ObjectID";
 import API from "../../Utils/API/API";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
@@ -19,9 +17,10 @@ import PermissionGate, {
   PermissionGateResult,
 } from "../../Utils/PermissionGate";
 import { ButtonStyleType } from "../Button/Button";
-import { DropdownOption, DropdownOptionGroup } from "../Dropdown/Dropdown";
 import BasicFormModal from "../FormModal/BasicFormModal";
-import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
+import Field from "../Forms/Types/Field";
+import getOwnersFormField from "../PeoplePicker/OwnersFormField";
+import { toPeoplePickerIds } from "../PeoplePicker/PeoplePickerTypes";
 import {
   BulkActionButtonSchema,
   BulkActionFailed,
@@ -43,8 +42,35 @@ export interface BulkOwnerActionsResult<T extends BaseModel> {
 
 type BulkOwnerMode = "add" | "remove";
 
-const USER_PREFIX: string = "user:";
-const TEAM_PREFIX: string = "team:";
+// The people and teams picked in the dialog, as ids.
+interface PickedOwners {
+  userIds: Array<string>;
+  teamIds: Array<string>;
+}
+
+/*
+ * The dialogs' one Owners field: the people picker every owners form uses,
+ * people and teams in one list, at least one required.
+ */
+const ownersField: (description: string) => Field<JSONObject> = (
+  description: string,
+): Field<JSONObject> => {
+  return getOwnersFormField<JSONObject>({
+    usersKey: "ownerUserIds",
+    teamsKey: "ownerTeamIds",
+    description: description,
+    required: true,
+  });
+};
+
+const readPickedOwners: (formData: JSONObject) => PickedOwners = (
+  formData: JSONObject,
+): PickedOwners => {
+  return {
+    userIds: toPeoplePickerIds(formData["ownerUserIds"]),
+    teamIds: toPeoplePickerIds(formData["ownerTeamIds"]),
+  };
+};
 
 /**
  * Reusable hook that provides "Add Owner" and "Remove Owner" bulk actions
@@ -64,100 +90,21 @@ const TEAM_PREFIX: string = "team:";
 function useBulkOwnerActions<T extends BaseModel>(
   config: BulkOwnerActionsConfig,
 ): BulkOwnerActionsResult<T> {
-  const [userOptions, setUserOptions] = useState<Array<DropdownOption>>([]);
-  const [teamOptions, setTeamOptions] = useState<Array<DropdownOption>>([]);
+  /*
+   * Owners are picked with the people picker, which searches the project's
+   * people and teams when its list opens - nothing is read up front, so a
+   * table that offers these actions costs no requests until they are used.
+   */
   const [showAddModal, setShowAddModal] = useState<boolean>(false);
   const [showRemoveModal, setShowRemoveModal] = useState<boolean>(false);
   const [bulkActionProps, setBulkActionProps] =
     useState<BulkActionOnClickProps<T> | null>(null);
 
-  useEffect(() => {
-    const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
-    if (!projectId) {
-      return;
-    }
-
-    const fetchOwners: () => Promise<void> = async (): Promise<void> => {
-      try {
-        const [teamMembersResult, teamsResult]: [
-          ListResult<TeamMember>,
-          ListResult<Team>,
-        ] = await Promise.all([
-          ModelAPI.getList<TeamMember>({
-            modelType: TeamMember,
-            query: { projectId: projectId },
-            limit: LIMIT_PER_PROJECT,
-            skip: 0,
-            select: {
-              _id: true,
-              user: {
-                _id: true,
-                name: true,
-                email: true,
-              },
-            },
-            sort: {},
-          }),
-          ModelAPI.getList<Team>({
-            modelType: Team,
-            query: { projectId: projectId },
-            limit: LIMIT_PER_PROJECT,
-            skip: 0,
-            select: {
-              _id: true,
-              name: true,
-            },
-            sort: {
-              name: SortOrder.Ascending,
-            },
-          }),
-        ]);
-
-        const seenUserIds: Set<string> = new Set<string>();
-        const users: Array<DropdownOption> = [];
-
-        for (const member of teamMembersResult.data) {
-          const userId: string = member.user?._id?.toString() || "";
-          if (!userId || seenUserIds.has(userId)) {
-            continue;
-          }
-          seenUserIds.add(userId);
-          users.push({
-            value: `${USER_PREFIX}${userId}`,
-            label:
-              member.user?.name?.toString() ||
-              member.user?.email?.toString() ||
-              "",
-          });
-        }
-
-        users.sort((a: DropdownOption, b: DropdownOption) => {
-          return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
-        });
-
-        setUserOptions(users);
-
-        setTeamOptions(
-          teamsResult.data.map((team: Team) => {
-            return {
-              value: `${TEAM_PREFIX}${team._id?.toString() || ""}`,
-              label: team.name?.toString() || "",
-            };
-          }),
-        );
-      } catch {
-        // dropdowns will remain empty; modal will show no options
-      }
-    };
-
-    void fetchOwners();
-  }, []);
-
   const applyOwners: (
-    selectedKeys: Array<string>,
+    picked: PickedOwners,
     mode: BulkOwnerMode,
   ) => Promise<void> = async (
-    selectedKeys: Array<string>,
+    picked: PickedOwners,
     mode: BulkOwnerMode,
   ): Promise<void> => {
     if (!bulkActionProps) {
@@ -171,22 +118,8 @@ function useBulkOwnerActions<T extends BaseModel>(
     setShowAddModal(false);
     setShowRemoveModal(false);
 
-    const userIds: Array<string> = [];
-    const teamIds: Array<string> = [];
-
-    for (const key of selectedKeys) {
-      if (key.startsWith(USER_PREFIX)) {
-        const id: string = key.slice(USER_PREFIX.length);
-        if (id) {
-          userIds.push(id);
-        }
-      } else if (key.startsWith(TEAM_PREFIX)) {
-        const id: string = key.slice(TEAM_PREFIX.length);
-        if (id) {
-          teamIds.push(id);
-        }
-      }
-    }
+    const userIds: Array<string> = picked.userIds;
+    const teamIds: Array<string> = picked.teamIds;
 
     const projectId: ObjectID | null = ProjectUtil.getCurrentProjectId();
 
@@ -403,18 +336,6 @@ function useBulkOwnerActions<T extends BaseModel>(
     setBulkActionProps(null);
   };
 
-  const groupedOwnerOptions: Array<DropdownOption | DropdownOptionGroup> =
-    useMemo((): Array<DropdownOption | DropdownOptionGroup> => {
-      const groups: Array<DropdownOptionGroup> = [];
-      if (userOptions.length > 0) {
-        groups.push({ label: "People", options: userOptions });
-      }
-      if (teamOptions.length > 0) {
-        groups.push({ label: "Teams", options: teamOptions });
-      }
-      return groups;
-    }, [userOptions, teamOptions]);
-
   /*
    * Bulk actions are handed straight to the table's action bar, which never
    * looks at permissions - so a viewer on an otherwise gated table could still
@@ -488,28 +409,20 @@ function useBulkOwnerActions<T extends BaseModel>(
       {showAddModal && (
         <BasicFormModal
           title="Add Owner"
-          description="Select users and/or teams to add as owners to the selected items. Existing owners will be preserved."
+          description="Pick the people and teams to add as owners of the selected items. Their existing owners are kept."
           onClose={() => {
             setShowAddModal(false);
             setBulkActionProps(null);
           }}
           submitButtonText="Add Owner"
-          onSubmit={async (formData: { ownerKeys: Array<string> }) => {
-            await applyOwners(formData.ownerKeys || [], "add");
+          onSubmit={async (formData: JSONObject) => {
+            await applyOwners(readPickedOwners(formData), "add");
           }}
           formProps={{
             fields: [
-              {
-                field: {
-                  ownerKeys: true,
-                },
-                title: "Select Owners",
-                description:
-                  "These users and teams will be added as owners to each selected item.",
-                fieldType: FormFieldSchemaType.MultiSelectDropdown,
-                required: true,
-                dropdownOptions: groupedOwnerOptions,
-              },
+              ownersField(
+                "These people and teams are added as owners of each selected item.",
+              ),
             ],
           }}
         />
@@ -518,29 +431,21 @@ function useBulkOwnerActions<T extends BaseModel>(
       {showRemoveModal && (
         <BasicFormModal
           title="Remove Owner"
-          description="Select users and/or teams to remove from the selected items. Items that do not have any of these owners will be skipped."
+          description="Pick the people and teams to remove as owners of the selected items. Items that have none of them are skipped."
           onClose={() => {
             setShowRemoveModal(false);
             setBulkActionProps(null);
           }}
           submitButtonText="Remove Owner"
           submitButtonStyleType={ButtonStyleType.DANGER}
-          onSubmit={async (formData: { ownerKeys: Array<string> }) => {
-            await applyOwners(formData.ownerKeys || [], "remove");
+          onSubmit={async (formData: JSONObject) => {
+            await applyOwners(readPickedOwners(formData), "remove");
           }}
           formProps={{
             fields: [
-              {
-                field: {
-                  ownerKeys: true,
-                },
-                title: "Select Owners",
-                description:
-                  "These users and teams will be removed as owners from each selected item.",
-                fieldType: FormFieldSchemaType.MultiSelectDropdown,
-                required: true,
-                dropdownOptions: groupedOwnerOptions,
-              },
+              ownersField(
+                "These people and teams are removed as owners of each selected item.",
+              ),
             ],
           }}
         />