Update FE config to fail the build for ts errors

packages/react-ui/project.json

@@ -5,6 +5,12 @@
   "projectType": "application",
   "tags": [],
   "targets": {
+    "build": {
+      "dependsOn": ["typecheck", "^build"]
+    },
+    "serve": {
+      "dependsOn": ["typecheck"]
+    },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],

packages/react-ui/src/app/common/hooks/flags-hooks.ts

@@ -60,7 +60,7 @@ export const flagsHooks = {
 
     // Fetch cloud templates when cloud connection page is disabled
     // OR when federated login is enabled
-    return !cloudConnectionPageEnabled || federatedLoginEnabled;
+    return Boolean(!cloudConnectionPageEnabled || federatedLoginEnabled);
   },
 
   useShouldShowCloudUserInMenu: () => {

packages/react-ui/src/app/common/hooks/project-hooks.ts

@@ -39,7 +39,7 @@
           cursor: undefined,
           limit: 100,
         });
-        return results.data;
+        return results.data as Project[];
       },
     });
   },

packages/react-ui/src/app/features/ai/lib/assistant-ui-chat-hook.ts

@@ -298,7 +298,10 @@
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chatId, isLoading, openChatResponse?.messages]);
 
-  const runtime = useAISDKRuntime(chat);
+  // Cast needed: root `ai` package version may differ from @assistant-ui/react-ai-sdk's nested copy.
+  const runtime = useAISDKRuntime(
+    chat as Parameters<typeof useAISDKRuntime>[0],
+  );
   runtimeRef.current = runtime;
 
   const lastConnectionRef = useRef<string | undefined>(undefined);

packages/react-ui/src/app/features/ai/lib/types.ts

@@ -1,5 +1,5 @@
-import { UIMessage } from '@ai-sdk/ui-utils'; // Fix this
 import { OpenChatResponse } from '@openops/shared';
+import { UIMessage } from 'ai';
 
 export type ServerMessage = NonNullable<OpenChatResponse['messages']>[number];
 export type MessageType = ServerMessage | UIMessage;

packages/react-ui/src/app/features/benchmark/components/benchmark-wizard.tsx

@@ -18,7 +18,11 @@ import { useNavigate } from 'react-router-dom';
 import { DynamicFormValidationProvider } from '@/app/features/builder/dynamic-form-validation/dynamic-form-validation-context';
 import { CreateOrEditConnectionDialog } from '@/app/features/connections/components/create-edit-connection-dialog';
 
-import { CloudProvider, getProviderByValue } from '../cloud-providers';
+import {
+  CloudProvider,
+  CloudProviderValue,
+  getProviderByValue,
+} from '../cloud-providers';
 import { useBenchmarkRun } from '../use-benchmark-run';
 import { useBenchmarkWizardNavigation } from '../use-benchmark-wizard-navigation';
 import { useProviderConnections } from '../use-provider-connections';
@@ -94,8 +98,12 @@ export const BenchmarkWizard = ({
     lastRunId,
   } = useBenchmarkRun(benchmarkCreateResult);
 
-  const connectingProviderConfig = getProviderByValue(connectingProvider);
-  const selectedProviderConfig = getProviderByValue(selectedProvider ?? null);
+  const connectingProviderConfig = getProviderByValue(
+    connectingProvider as CloudProviderValue | null,
+  );
+  const selectedProviderConfig = getProviderByValue(
+    (selectedProvider ?? null) as CloudProviderValue | null,
+  );
   const providerName = selectedProviderConfig?.name ?? '';
 
   const handleConnectionSaved = async () => {

packages/react-ui/src/app/features/blocks/components/block-operations-suggestions.tsx

@@ -1,5 +1,6 @@
 import {
   BlockSelectorOperation,
+  BlockStepMetadataWithSuggestions,
   CardListItem,
   ItemListMetadata,
   StepMetadata,
@@ -24,15 +25,16 @@ const BlockOperationSuggestions = ({
   handleSelectOperationSuggestion,
   operation,
 }: BlockOperationSuggestionsProps) => {
+  const blockSuggestions = blockMetadata as BlockStepMetadataWithSuggestions;
   const suggestions =
     operation.type === FlowOperationType.UPDATE_TRIGGER
-      ? blockMetadata.suggestedTriggers
-      : blockMetadata.suggestedActions;
+      ? blockSuggestions.suggestedTriggers
+      : blockSuggestions.suggestedActions;
 
   return (
     <>
       <div className="mt-0.5" />
-      {suggestions?.map((suggestion) => (
+      {suggestions?.map((suggestion: ItemListMetadata) => (
         <CardListItem
           className="p-2 px-0 text-sm gap-2 items-start transition-transform duration-200 ease-in-out hover:scale-105 hover:font-bold"
           key={suggestion.name}

packages/react-ui/src/app/features/blocks/components/install-block-dialog.tsx

@@ -1,4 +1,11 @@
-const InstallBlockDialog = () => {
+import { BlockScope } from '@openops/shared';
+
+type InstallBlockDialogProps = {
+  onInstallBlock: () => void;
+  scope: BlockScope;
+};
+
+const InstallBlockDialog = (_props: InstallBlockDialogProps) => {
   return null;
 };
 

packages/react-ui/src/app/features/blocks/lib/blocks-hook.ts

@@ -15,6 +15,7 @@
   SuggestionType,
   Trigger,
   TriggerType,
+  TriggerWithOptionalId,
 } from '@openops/shared';
 
 import {
@@ -31,7 +32,8 @@
   version?: string;
   enabled?: boolean;
 };
-type Step = Action | Trigger;
+
+type Step = Action | Trigger | TriggerWithOptionalId;
 
 type UseStepsMetadata = Step[];
 
@@ -40,7 +42,7 @@
 };
 
 type UseBlockMetadata = {
-  step: Action | Trigger | undefined;
+  step: Step | undefined;
   enabled?: boolean;
 };
 
@@ -84,7 +86,7 @@
     const blockVersion = step?.settings?.blockVersion;
     const query = useQuery<StepMetadata, Error>({
       queryKey: [QueryKeys.block, step?.type, blockName, blockVersion],
-      queryFn: () => blocksApi.getMetadata(step!),
+      queryFn: () => blocksApi.getMetadata(step! as Action | Trigger),
       staleTime: Infinity,
       enabled: enabled && !isNil(step),
     });
@@ -220,7 +222,7 @@
   const blockVersion = isBlockStep ? step.settings.blockVersion : undefined;
   return {
     queryKey: [QueryKeys.block, step.type, blockName, blockVersion],
-    queryFn: () => blocksApi.getMetadata(step),
+    queryFn: () => blocksApi.getMetadata(step as Action | Trigger),
     staleTime: Infinity,
   };
 }

packages/react-ui/src/app/features/builder/block-properties/dynamic-block-property.tsx

@@ -92,7 +92,9 @@ const DynamicProperties = React.memo((props: DynamicPropertiesProps) => {
     const input: Record<string, unknown> = {};
     newRefreshers.forEach((refresher, index) => {
       input[refresher] = refresherValues[index];
-      input.auth = form.getValues('settings.input.auth');
+      input.auth = (form.getValues as (name: string) => unknown)(
+        'settings.input.auth',
+      );
     });
 
     mutate(
@@ -120,7 +122,7 @@ const DynamicProperties = React.memo((props: DynamicPropertiesProps) => {
     allowDynamicValues,
     props.propertyName,
     props.inputName,
-  ).map((input) => form.watch(input));
+  ).map((input) => (form.watch as (field: string) => unknown)(input));
 
   useEffect(() => {
     if (

packages/react-ui/src/app/features/builder/block-properties/dynamic-dropdown-block-property.tsx

@@ -112,13 +112,15 @@ const DynamicDropdownBlockProperty = React.memo(
       allowDynamicValues,
       props.propertyName,
       props.inputName,
-    ).map((input) => form.watch(input));
+    ).map((input) => (form.watch as (field: string) => unknown)(input));
 
     const refresh = () => {
       const input: Record<string, unknown> = {};
       newRefreshers.forEach((refresher, index) => {
         input[refresher] = refresherValues[index];
-        input.auth = form.getValues('settings.input.auth');
+        input.auth = (form.getValues as (name: string) => unknown)(
+          'settings.input.auth',
+        );
       });
 
       mutate(

packages/react-ui/src/app/features/builder/block-properties/text-input-with-mentions/index.tsx

@@ -1,7 +1,7 @@
 import Document from '@tiptap/extension-document';
 import HardBreak from '@tiptap/extension-hard-break';
 import History from '@tiptap/extension-history';
-import Mention, { MentionNodeAttrs } from '@tiptap/extension-mention';
+import Mention from '@tiptap/extension-mention';
 import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
 import Text from '@tiptap/extension-text';
@@ -17,7 +17,7 @@
 import { useBuilderStateContext } from '../../builder-hooks';
 
 import { useEffect } from 'react';
-import { textMentionUtils } from './text-input-utils';
+import { MentionNodeAttrs, textMentionUtils } from './text-input-utils';
 
 type TextInputWithMentionsProps = {
   className?: string;
@@ -45,7 +45,7 @@
       deleteTriggerWithBackspace: true,
       renderHTML({ node }) {
         const mentionAttrs: MentionNodeAttrs =
           node.attrs as unknown as MentionNodeAttrs;
         return textMentionUtils.generateMentionHtmlElement(mentionAttrs);
       },
     }),

packages/react-ui/src/app/features/builder/block-properties/text-input-with-mentions/text-input-utils.ts

@@ -1,14 +1,16 @@
-import { MentionNodeAttrs } from '@tiptap/extension-mention';
-import { DOMOutputSpec } from '@tiptap/pm/model';
 import { JSONContent } from '@tiptap/react';
 
 import { StepMetadata } from '@openops/components/ui';
 import {
   Action,
   Trigger,
+  TriggerWithOptionalId,
   assertNotNullOrUndefined,
   isNil,
 } from '@openops/shared';
+import { DOMOutputSpec } from '@tiptap/pm/model';
+
+type FlowStep = Action | Trigger | TriggerWithOptionalId;
 
 const removeIntroplationBrackets = (text: string) => {
   return text.slice(2, text.length - 2);
@@ -31,7 +33,9 @@ const keysWithinPath = (path: string) => {
     .map((key) => removeQuotes(key));
 };
 
-type MentionNodeAttrs = {
+export type MentionNodeAttrs = {
+  id?: string;
+  label?: string;
   logoUrl?: string;
   displayText: string;
   serverValue: string;
@@ -92,7 +96,7 @@ function parseMentionNodeFromText(request: ParseMentionNodeFromText) {
 type StepMetadataWithDisplayName = StepMetadata & { stepDisplayName: string };
 const getStepMetadataFromPath = (
   path: string,
-  steps: (Action | Trigger)[],
+  steps: FlowStep[],
   stepsMetadata: (StepMetadataWithDisplayName | undefined)[],
 ) => {
   const stepPath = removeIntroplationBrackets(path);
@@ -106,7 +110,7 @@ const getStepMetadataFromPath = (
 
 function convertTextToTipTapJsonContent(
   userInputText: string,
-  steps: (Action | Trigger)[],
+  steps: FlowStep[],
   stepsMetadata: (StepMetadataWithDisplayName | undefined)[],
 ): {
   type: TipTapNodeTypes.paragraph;
@@ -150,7 +154,7 @@ function convertTextToTipTapJsonContent(
 
 function createMentionNodeFromText(
   mention: string,
-  steps: (Action | Trigger)[],
+  steps: FlowStep[],
   stepsMetadata: (StepMetadataWithDisplayName | undefined)[],
 ) {
   const { stepMetadata, dfsIndex } = getStepMetadataFromPath(
@@ -222,9 +226,14 @@ const generateMentionHtmlElement = (
       { src: apMentionNodeAttrs.logoUrl, class: 'object-fit w-4 h-4' },
     ]);
   }
-  children.push(apMentionNodeAttrs.displayText);
 
-  return ['span', attrs, ...children];
+  // Text nodes are valid DOMOutputSpec children; newer @tiptap/pm types omit `string`.
+  return [
+    'span',
+    attrs,
+    ...children,
+    apMentionNodeAttrs.displayText,
+  ] as DOMOutputSpec;
 };
 
 const inputThatUsesMentionClass = 'ap-text-with-mentions';

packages/react-ui/src/app/features/builder/builder-hooks.ts

@@ -538,7 +538,7 @@
         showAiChat: true,
         aiContainerSize: AI_CHAT_CONTAINER_SIZES.DOCKED,
         dataSelectorSize: DataSelectorSizeState.COLLAPSED,
-        aiChatProperty: action.property,
+        aiChatProperty: action.property as MidpanelState['aiChatProperty'],
       };
       break;
     case 'ADD_CODE_TO_INJECT':

packages/react-ui/src/app/features/builder/data-selector/data-selector-utils.ts

@@ -6,6 +6,7 @@ import {
   StepOutputWithData,
   StepWithIndex,
   Trigger,
+  TriggerWithOptionalId,
 } from '@openops/shared';
 
 export type MentionTreeNode = {
@@ -189,7 +190,9 @@ const getAllStepsMentions = (
   });
 };
 
-const hasStepSampleData = (step: Action | Trigger | undefined) => {
+const hasStepSampleData = (
+  step: Action | Trigger | TriggerWithOptionalId | undefined,
+) => {
   const sampleData = step?.settings?.inputUiInfo?.sampleData;
   return (
     !isNil(sampleData) &&

packages/react-ui/src/app/features/builder/flow-canvas/flow-drag-layer.tsx

@@ -12,7 +12,12 @@
 import { Edge, UNSAVED_CHANGES_TOAST, useToast } from '@openops/components/ui';
 import { t } from 'i18next';
 
-import { flowHelper, FlowOperationType } from '@openops/shared';
+import {
+  Action,
+  flowHelper,
+  FlowOperationType,
+  Trigger,
+} from '@openops/shared';
 
 import { useBuilderStateContext } from '../builder-hooks';
 
@@ -92,7 +97,7 @@
       const edgeData: Edge['data'] = e.over.data.current as Edge['data'];
       if (edgeData && edgeData.parentStep && draggedStep) {
         const isPartOfInnerFlow = flowHelper.isPartOfInnerFlow({
-          parentStep: draggedStep,
+          parentStep: draggedStep as Action | Trigger,
           childName: edgeData.parentStep,
         });
         if (isPartOfInnerFlow) {
@@ -143,7 +148,7 @@
       </DndContext>
       {draggedStep && (
         <StepDragOverlay
-          step={draggedStep}
+          step={draggedStep as Action | Trigger}
           cursorPosition={cursorPosition}
         ></StepDragOverlay>
       )}

packages/react-ui/src/app/features/builder/flow-version-undo-redo/hooks/apply-operation-and-push-to-history.ts

@@ -15,6 +15,7 @@ const getSpotlightStepName = (
     case FlowOperationType.DUPLICATE_ACTION:
       return request.stepName;
     case FlowOperationType.ADD_ACTION:
+    case FlowOperationType.PASTE_ACTIONS:
       return request.parentStep;
     default:
       return request.name;

packages/react-ui/src/app/features/builder/flow-version-undo-redo/push-flow-version-to-version-history.ts

@@ -1,10 +1,18 @@
-import { BuilderState } from '@/app/features/builder/builder-types';
+import { FlowVersionUndoRedoHistoryItem } from '@/app/features/builder/flow-version-undo-redo/types';
+import { FlowVersion } from '@openops/shared';
 
+type UndoRedoStack = {
+  clear: () => void;
+  push: (item: FlowVersionUndoRedoHistoryItem) => void;
+};
+
+/** @deprecated Use useFlowVersionUndoRedo().addToUndoHistory instead. */
 export const pushFlowVersionToVersionHistory = (
-  currentState: Pick<
-    BuilderState,
-    'flowVersion' | 'undoFlowVersionHistory' | 'redoFlowVersionHistory'
-  >,
+  currentState: {
+    flowVersion: { id: string; trigger: FlowVersion['trigger'] };
+    undoFlowVersionHistory: UndoRedoStack;
+    redoFlowVersionHistory: UndoRedoStack;
+  },
   spotlightStepName?: string,
 ) => {
   const { flowVersion, undoFlowVersionHistory, redoFlowVersionHistory } =