Add UI for human in the loop operators

airflow-core/src/airflow/api_fastapi/common/types.py

@@ -88,6 +88,7 @@ class ExtraMenuItem:
 class MenuItem(Enum):
     """Define all menu items defined in the menu."""
 
+    REQUIRED_ACTIONS = "Required Actions"
     ASSETS = "Assets"
     AUDIT_LOG = "Audit Log"
     CONFIG = "Config"

airflow-core/src/airflow/api_fastapi/core_api/openapi/_private_ui.yaml

@@ -1872,6 +1872,7 @@ components:
     MenuItem:
       type: string
       enum:
+      - Required Actions
       - Assets
       - Audit Log
       - Config

airflow-core/src/airflow/security/permissions.py

@@ -49,6 +49,7 @@
 RESOURCE_ASSET_ALIAS = "Asset Aliases"
 RESOURCE_DOCS = "Documentation"
 RESOURCE_DOCS_MENU = "Docs"
+RESOURCE_HITL_DETAIL = "HITL Detail"
 RESOURCE_IMPORT_ERROR = "ImportError"
 RESOURCE_JOB = "Jobs"
 RESOURCE_MY_PASSWORD = "My Password"

airflow-core/src/airflow/ui/openapi-gen/requests/schemas.gen.ts

@@ -7152,7 +7152,7 @@ export const $LightGridTaskInstanceSummary = {
 
 export const $MenuItem = {
     type: 'string',
-    enum: ['Assets', 'Audit Log', 'Config', 'Connections', 'Dags', 'Docs', 'Plugins', 'Pools', 'Providers', 'Variables', 'XComs'],
+    enum: ['Required Actions', 'Assets', 'Audit Log', 'Config', 'Connections', 'Dags', 'Docs', 'Plugins', 'Pools', 'Providers', 'Variables', 'XComs'],
     title: 'MenuItem',
     description: 'Define all menu items defined in the menu.'
 } as const;

airflow-core/src/airflow/ui/openapi-gen/requests/types.gen.ts

@@ -1849,7 +1849,7 @@ export type LightGridTaskInstanceSummary = {
 /**
  * Define all menu items defined in the menu.
  */
-export type MenuItem = 'Assets' | 'Audit Log' | 'Config' | 'Connections' | 'Dags' | 'Docs' | 'Plugins' | 'Pools' | 'Providers' | 'Variables' | 'XComs';
+export type MenuItem = 'Required Actions' | 'Assets' | 'Audit Log' | 'Config' | 'Connections' | 'Dags' | 'Docs' | 'Plugins' | 'Pools' | 'Providers' | 'Variables' | 'XComs';
 
 /**
  * Menu Item Collection serializer for responses.

airflow-core/src/airflow/ui/public/i18n/locales/en/common.json

@@ -15,6 +15,7 @@
   "backfill_other": "Backfills",
   "browse": {
     "auditLog": "Audit Log",
+    "requiredActions": "Required Actions",
     "xcoms": "XComs"
   },
   "collapseDetailsPanel": "Collapse Details Panel",

airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json

@@ -103,6 +103,7 @@
     "mappedTaskInstances_other": "Task Instances [{{count}}]",
     "overview": "Overview",
     "renderedTemplates": "Rendered Templates",
+    "requiredActions": "Required Actions",
     "runs": "Runs",
     "taskInstances": "Task Instances",
     "tasks": "Tasks",

airflow-core/src/airflow/ui/public/i18n/locales/en/dashboard.json

@@ -36,6 +36,7 @@
     "activeDags": "Active Dags",
     "failedDags": "Failed Dags",
     "queuedDags": "Queued Dags",
+    "requiredActions": "Required Actions",
     "runningDags": "Running Dags",
     "stats": "Stats"
   },

airflow-core/src/airflow/ui/public/i18n/locales/en/hitl.json

@@ -0,0 +1,23 @@
+{
+  "requiredAction_one": "Required Action",
+  "requiredAction_other": "Required Actions",
+  "requiredActionState": "Required Action State",
+  "response": {
+    "error": "Response failed",
+    "optionsDescription": "Choose your options for this task instance",
+    "optionsLabel": "Options",
+    "received": "Response received at ",
+    "respond": "Respond",
+    "success": "{{taskId}} response successful",
+    "title": "Human Task Instance - {{taskId}}"
+  },
+  "state": {
+    "approvalReceived": "Approval Received",
+    "approvalRequired": "Approval Required",
+    "choiceReceived": "Choice Received",
+    "choiceRequired": "Choice Required",
+    "rejectionReceived": "Rejection Received",
+    "responseReceived": "Response Received",
+    "responseRequired": "Response Required"
+  }
+}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldAdvancedArray.tsx

@@ -25,7 +25,7 @@ import { JsonEditor } from "../JsonEditor";
 
 export const FieldAdvancedArray = ({ name, onUpdate }: FlexibleFormElementProps) => {
   const { t: translate } = useTranslation("components");
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   // Determine the expected type based on schema
   const expectedType = param.schema.items?.type ?? "object";
@@ -71,6 +71,7 @@ export const FieldAdvancedArray = ({ name, onUpdate }: FlexibleFormElementProps)
 
   return (
     <JsonEditor
+      editable={!Boolean(disabled)}
       id={`element_${name}`}
       onChange={handleChange}
       value={JSON.stringify(param.value ?? [], undefined, 2)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldBool.tsx

@@ -22,7 +22,7 @@ import type { FlexibleFormElementProps } from ".";
 import { Switch } from "../ui";
 
 export const FieldBool = ({ name }: FlexibleFormElementProps) => {
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   const onCheck = (value: boolean) => {
     if (paramsDict[name]) {
@@ -36,6 +36,7 @@ export const FieldBool = ({ name }: FlexibleFormElementProps) => {
     <Switch
       checked={Boolean(param.value)}
       colorPalette="blue"
+      disabled={disabled}
       id={`element_${name}`}
       name={`element_${name}`}
       onCheckedChange={(event) => onCheck(event.checked)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldDateTime.tsx

@@ -24,7 +24,7 @@ import type { FlexibleFormElementProps } from ".";
 import { DateTimeInput } from "../DateTimeInput";
 
 export const FieldDateTime = ({ name, onUpdate, ...rest }: FlexibleFormElementProps & InputProps) => {
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   const handleChange = (value: string) => {
     if (paramsDict[name]) {
@@ -46,6 +46,7 @@ export const FieldDateTime = ({ name, onUpdate, ...rest }: FlexibleFormElementPr
   if (rest.type === "datetime-local") {
     return (
       <DateTimeInput
+        disabled={disabled}
         id={`element_${name}`}
         name={`element_${name}`}
         onChange={(event) => handleChange(event.target.value)}
@@ -57,6 +58,7 @@ export const FieldDateTime = ({ name, onUpdate, ...rest }: FlexibleFormElementPr
 
   return (
     <Input
+      disabled={disabled}
       id={`element_${name}`}
       name={`element_${name}`}
       onChange={(event) => handleChange(event.target.value)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldDropdown.tsx

@@ -36,7 +36,7 @@ const enumTypes = ["string", "number", "integer"];
 
 export const FieldDropdown = ({ name, onUpdate }: FlexibleFormElementProps) => {
   const { t: translate } = useTranslation("components");
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
 
   const selectOptions = createListCollection({
@@ -63,6 +63,7 @@ export const FieldDropdown = ({ name, onUpdate }: FlexibleFormElementProps) => {
   return (
     <Select.Root
       collection={selectOptions}
+      disabled={disabled}
       id={`element_${name}`}
       name={`element_${name}`}
       onValueChange={(event) => handleChange(event.value)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldMultiSelect.tsx

@@ -34,7 +34,7 @@ const labelLookup = (key: string, valuesDisplay: Record<string, string> | undefi
 
 export const FieldMultiSelect = ({ name, onUpdate }: FlexibleFormElementProps) => {
   const { t: translate } = useTranslation("components");
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
 
   // Initialize `selectedOptions` directly from `paramsDict`
@@ -74,11 +74,12 @@ export const FieldMultiSelect = ({ name, onUpdate }: FlexibleFormElementProps) =
       aria-label={translate("flexibleForm.placeholderMulti")}
       id={`element_${name}`}
       isClearable
+      isDisabled={disabled}
       isMulti
       name={`element_${name}`}
       onChange={handleChange}
       options={
-        param.schema.examples?.map((value) => ({
+        (param.schema.examples ?? param.schema.enum)?.map((value) => ({
           label: labelLookup(value, param.schema.values_display),
           value,
         })) ?? []

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldMultilineText.tsx

@@ -23,7 +23,7 @@ import { paramPlaceholder, useParamStore } from "src/queries/useParamStore";
 import type { FlexibleFormElementProps } from ".";
 
 export const FieldMultilineText = ({ name, onUpdate }: FlexibleFormElementProps) => {
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   const handleChange = (value: string) => {
     if (paramsDict[name]) {
@@ -38,6 +38,7 @@ export const FieldMultilineText = ({ name, onUpdate }: FlexibleFormElementProps)
 
   return (
     <Textarea
+      disabled={disabled}
       id={`element_${name}`}
       name={`element_${name}`}
       onChange={(event) => handleChange(event.target.value)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldNumber.tsx

@@ -22,7 +22,7 @@ import type { FlexibleFormElementProps } from ".";
 import { NumberInputField, NumberInputRoot } from "../ui/NumberInput";
 
 export const FieldNumber = ({ name, onUpdate }: FlexibleFormElementProps) => {
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   const handleChange = (value: string) => {
     if (value === "") {
@@ -46,6 +46,7 @@ export const FieldNumber = ({ name, onUpdate }: FlexibleFormElementProps) => {
   return (
     <NumberInputRoot
       allowMouseWheel
+      disabled={disabled}
       id={`element_${name}`}
       max={param.schema.maximum ?? undefined}
       min={param.schema.minimum ?? undefined}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldObject.tsx

@@ -22,7 +22,7 @@ import type { FlexibleFormElementProps } from ".";
 import { JsonEditor } from "../JsonEditor";
 
 export const FieldObject = ({ name, onUpdate }: FlexibleFormElementProps) => {
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
 
   const handleChange = (value: string) => {
@@ -44,6 +44,7 @@ export const FieldObject = ({ name, onUpdate }: FlexibleFormElementProps) => {
 
   return (
     <JsonEditor
+      editable={!disabled}
       id={`element_${name}`}
       onChange={handleChange}
       value={JSON.stringify(param.value ?? [], undefined, 2)}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldSelector.tsx

@@ -70,7 +70,7 @@ const isFieldMultilineText = (fieldType: string, fieldSchema: ParamSchema) =>
   fieldType === "string" && fieldSchema.format === "multiline";
 
 const isFieldMultiSelect = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "array" && Array.isArray(fieldSchema.examples);
+  fieldType === "array" && (Array.isArray(fieldSchema.examples) || Array.isArray(fieldSchema.enum));
 
 const isFieldNumber = (fieldType: string) => {
   const numberTypes = ["integer", "number"];

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldString.tsx

@@ -25,7 +25,7 @@ import type { FlexibleFormElementProps } from ".";
 
 export const FieldString = ({ name, onUpdate }: FlexibleFormElementProps) => {
   const { t: translate } = useTranslation("components");
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
   const handleChange = (value: string) => {
     if (paramsDict[name]) {
@@ -41,6 +41,7 @@ export const FieldString = ({ name, onUpdate }: FlexibleFormElementProps) => {
   return (
     <>
       <Input
+        disabled={disabled}
         id={`element_${name}`}
         list={param.schema.examples ? `list_${name}` : undefined}
         maxLength={param.schema.maxLength ?? undefined}

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldStringArray.tsx

@@ -25,7 +25,7 @@ import type { FlexibleFormElementProps } from ".";
 
 export const FieldStringArray = ({ name, onUpdate }: FlexibleFormElementProps) => {
   const { t: translate } = useTranslation("components");
-  const { paramsDict, setParamsDict } = useParamStore();
+  const { disabled, paramsDict, setParamsDict } = useParamStore();
   const param = paramsDict[name] ?? paramPlaceholder;
 
   const handleChange = (newValue: string) => {
@@ -57,6 +57,7 @@ export const FieldStringArray = ({ name, onUpdate }: FlexibleFormElementProps) =
 
   return (
     <Textarea
+      disabled={disabled}
       id={`element_${name}`}
       name={`element_${name}`}
       onBlur={handleBlur}