Role picker is now present and seems to be working.

src/components/pickers/RolePicker.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState, useCallback } from "react";
+import Select from "../common/Select";
+import Option from "../common/option";
+import { GeneralIdRef } from "../../utils/GeneralIdRef";
+import roleService from "../../modules/manager/domains/serrvices/rolesService";
+
+interface RolePickerProps {
+  name: string;
+  label: string;
+  error?: string;
+  value: any;
+  domain: GeneralIdRef;
+  onChange?: (name: string, value: GeneralIdRef) => void;
+  includeLabel?: boolean;
+}
+
+export default function RolePicker({
+  name,
+  label,
+  error,
+  value,
+  domain,
+  onChange,
+  includeLabel = true,
+}: RolePickerProps) {
+  const [options, setOptions] = useState<Option[] | undefined>(undefined);
+
+  useEffect(() => {
+    async function load() {
+      const pagedData = await roleService.getRoles(0, 10, "name", true, domain);
+      if (pagedData) {
+        const opts: Option[] = (pagedData.data as any[]).map((x) => ({
+          _id: x.id,
+          name: x.name,
+        }));
+        setOptions(opts);
+      }
+    }
+
+    load();
+  }, []);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const input = e.currentTarget;
+      const generalIdRef: GeneralIdRef = {
+        id: BigInt(input.value),
+      };
+
+      if (onChange) onChange(input.name, generalIdRef);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      name={name}
+      label={label}
+      error={error}
+      value={String(value?.id)}
+      options={options}
+      includeBlankFirstEntry={true}
+      onChange={handleChange}
+      includeLabel={includeLabel}
+    />
+  );
+}

src/modules/manager/workflowTemplates/components/CapabilityEditors/AssigneesOfITaskAssigneeEditor.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import UserPicker from "../../../../../components/pickers/UserPicker";
-import { GeneralIdRef } from "../../../../../utils/GeneralIdRef";
+import {
+  GeneralIdRef,
+  MakeGeneralIdRef,
+} from "../../../../../utils/GeneralIdRef";
 import { TaskDefinition } from "../../services/WorkflowTemplateService";
 import {
   CapabilityEditorProps,
@@ -10,23 +13,10 @@ import {
 import Button, { ButtonType } from "../../../../../components/common/Button";
 import ValidationErrorIcon from "../../../../../components/validationErrorIcon";
 import ErrorBlock from "../../../../../components/common/ErrorBlock";
+import RolePicker from "../../../../../components/pickers/RolePicker";
+import { getCurrentUser } from "../../../../frame/services/authenticationService";
 
-// TODO: Replace with your real RolePicker and RaciPicker
+// TODO: Replace with your real RaciPicker
-const RolePicker = (props: any) => (
-  <div className="form-group">
-    <div style={{ marginBottom: 8 }}>
-      <input
-        type="text"
-        name={props.name}
-        value={props.value?.id ?? ""}
-        onChange={(e) =>
-          props.onChange(props.name, { id: BigInt(e.target.value) })
-        }
-      />
-    </div>
-  </div>
-);
-
 const RaciPicker = (props: any) => (
   <div className="form-group">
     <div style={{ marginBottom: 8 }}>
@@ -97,6 +87,8 @@ export const AssigneesOfITaskAssigneeEditor: React.FC<CapabilityEditorProps> = (
 
   const guid = task.config.guid as string;
 
+  const domain = MakeGeneralIdRef(getCurrentUser()?.domainid);
+
   return (
     <div>
       Select assigness (you can select either a role or a contact)
@@ -128,9 +120,11 @@ export const AssigneesOfITaskAssigneeEditor: React.FC<CapabilityEditorProps> = (
               </td>
               <td>
                 <RolePicker
+                  includeLabel={false}
                   name="role"
                   label="Role"
                   value={assignee.role}
+                  domain={domain}
                   error={fieldErrors?.[`${guid}.assignees[${index}].role`]}
                   onChange={(name: string, val: GeneralIdRef | null) =>
                     updateAssignee(index, { ...assignee, role: val })
@@ -143,6 +137,7 @@ export const AssigneesOfITaskAssigneeEditor: React.FC<CapabilityEditorProps> = (
                   name="contact"
                   label="Contact"
                   value={assignee.contact}
+                  domain={domain}
                   error={fieldErrors?.[`${guid}.assignees[${index}].contact`]}
                   onChange={(name: string, val: GeneralIdRef | null) =>
                     updateAssignee(index, { ...assignee, contact: val })
@@ -204,16 +199,24 @@ const runValidation = (
 
   assignees.forEach((a, i) => {
     const noContactSelected = !a.contact || a.contact?.id === BigInt(0);
+    const noRoleSelected = !a.role || a.role?.id === BigInt(0);
 
+    if (!noContactSelected && !noRoleSelected) {
+      errors[`${guid}.assignees[${i}].contact`] =
+        "Cannot select both a contact and a role.";
+      errors[`${guid}.assignees[${i}].role`] =
+        "Cannot select both a contact and a role.";
+    } else {
+      if (!(!noContactSelected || !noRoleSelected)) {
         if (noContactSelected) {
-      errors[`${guid}.assignees[${i}].contact`] = "A contact must be selected.";
+          errors[`${guid}.assignees[${i}].contact`] =
+            "A contact must be selected.";
         }
 
-    if (!a.role && noContactSelected) {
+        if (noRoleSelected) {
-      errors[`${guid}.assignees[${i}].role`] =
+          errors[`${guid}.assignees[${i}].role`] = "A role must be selected.";
-        "Either role or contact must be selected.";
+        }
-      errors[`${guid}.assignees[${i}].contact`] =
+      }
-        "Either role or contact must be selected.";
     }
 
     if (!a.raci) {