Raci is now working, and will be translated too.

public/locales/en/raci.json

@@ -0,0 +1,6 @@
+{
+  "Responsible": "Responsible",
+  "Accountable": "Accountable",
+  "Consulted": "Consulted",
+  "Informed": "Informed"
+}

src/components/pickers/RaciPicker.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState, useCallback } from "react";
+import Select from "../common/Select";
+import Option from "../common/option";
+import { useTranslation } from "react-i18next";
+import { Namespaces } from "../../i18n/i18n";
+
+interface RaciPickerProps {
+  name: string;
+  label: string;
+  error?: string;
+  value: any;
+  onChange?: (name: string, value: string) => void;
+  includeLabel?: boolean;
+}
+
+export default function RaciPicker({
+  name,
+  label,
+  error,
+  value,
+  onChange,
+  includeLabel = true,
+}: RaciPickerProps) {
+  const [options, setOptions] = useState<Option[] | undefined>(undefined);
+  const { t } = useTranslation(Namespaces.Raci);
+
+  useEffect(() => {
+    async function load() {
+      const opts: Option[] = [
+        { _id: "Responsible", name: t("Responsible") },
+        { _id: "Accountable", name: t("Accountable") },
+        { _id: "Consulted", name: t("Consulted") },
+        { _id: "Informed", name: t("Informed") },
+      ];
+
+      setOptions(opts);
+    }
+
+    load();
+  }, [t]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const input = e.currentTarget;
+
+      if (onChange) onChange(input.name, input.value);
+    },
+    [onChange],
+  );
+
+  return (
+    <Select
+      name={name}
+      label={label}
+      error={error}
+      value={String(value?.id)}
+      options={options}
+      includeBlankFirstEntry={false}
+      onChange={handleChange}
+      includeLabel={includeLabel}
+    />
+  );
+}

src/i18n/i18n.ts

@@ -10,6 +10,7 @@ export const Namespaces = {
   MailTypes: "mailTypes",
   HtmlIsland: "htmlIsland",
   TaskTypes: "taskTypes",
+  Raci: "raci",
 } as const;
 
 export type Namespace = (typeof Namespaces)[keyof typeof Namespaces];

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

@@ -15,24 +15,7 @@ import ValidationErrorIcon from "../../../../../components/validationErrorIcon";
 import ErrorBlock from "../../../../../components/common/ErrorBlock";
 import RolePicker from "../../../../../components/pickers/RolePicker";
 import { getCurrentUser } from "../../../../frame/services/authenticationService";
-
+import RaciPicker from "../../../../../components/pickers/RaciPicker";
-// TODO: Replace with your real RaciPicker
-const RaciPicker = (props: any) => (
-  <div className="form-group">
-    <div style={{ marginBottom: 8 }}>
-      <select
-        name={props.name}
-        value={props.value}
-        onChange={(e) => props.onChange(props.name, e.target.value)}
-      >
-        <option value="Responsible">Responsible</option>
-        <option value="Accountable">Accountable</option>
-        <option value="Consulted">Consulted</option>
-        <option value="Informed">Informed</option>
-      </select>
-    </div>
-  </div>
-);
 
 // ---------------------------
 // Domain Interfaces
@@ -146,6 +129,7 @@ export const AssigneesOfITaskAssigneeEditor: React.FC<CapabilityEditorProps> = (
               </td>
               <td>
                 <RaciPicker
+                  includeLabel={false}
                   name="raci"
                   label="RACI"
                   value={assignee.raci}