feat(Designer): Hybrid preload / active search

libs/designer-ui/src/lib/panel/recommendationpanel/searchResult.tsx

@@ -6,7 +6,7 @@ import { OperationSearchCard } from './operationSearchCard';
 import { OperationSearchGroup } from './operationSearchGroup';
 import { List, Text } from '@fluentui/react';
 import { Spinner } from '@fluentui/react-components';
-import type { DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
+import type { DiscoveryOpArray, DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
 import { isBuiltInConnector } from '@microsoft/logic-apps-shared';
 import type { PropsWithChildren } from 'react';
 import React, { useMemo } from 'react';
@@ -16,7 +16,7 @@ export type SearchResultsGridProps = {
   isLoadingMore: boolean;
   isLoadingSearch: boolean;
   searchTerm: string;
-  operationSearchResults: DiscoveryOperation<DiscoveryResultTypes>[];
+  operationSearchResults: DiscoveryOpArray;
   onConnectorClick: (connectorId: string) => void;
   onOperationClick: (operationId: string, apiId?: string) => void;
   displayRuntimeInfo: boolean;

libs/designer/src/lib/core/queries/browse.ts

@@ -24,31 +24,9 @@ const pagedOpts = {
 /// Operations ///
 
 export const useAllOperations = () => {
-  const {
-    data: azureOperations,
-    isLoading: azureLoading,
-    hasNextPage: azureHasNextPage,
-    fetchNextPage: fetchNextAzurePage,
-    isFetchingNextPage: isFetchingNextAzurePage,
-  } = useAzureOperationsLazyQuery();
-  useEffect(() => {
-    if (azureLoading || isFetchingNextAzurePage) return;
-    if (!azureHasNextPage) return;
-    fetchNextAzurePage();
-  }, [azureLoading, fetchNextAzurePage, azureHasNextPage, isFetchingNextAzurePage]);
+  const { data: azureOperations, isLoading: azureLoading, hasNextPage: azureHasNextPage } = useAzureOperationsLazyQuery();
 
-  const {
-    data: customOperations,
-    isLoading: customLoading,
-    hasNextPage: customHasNextPage,
-    fetchNextPage: fetchNextCustomPage,
-    isFetchingNextPage: isFetchingNextCustomPage,
-  } = useCustomOperationsLazyQuery();
-  useEffect(() => {
-    if (customLoading || isFetchingNextCustomPage) return;
-    if (!customHasNextPage) return;
-    fetchNextCustomPage();
-  }, [customLoading, fetchNextCustomPage, customHasNextPage, isFetchingNextCustomPage]);
+  const { data: customOperations, isLoading: customLoading, hasNextPage: customHasNextPage } = useCustomOperationsLazyQuery();
 
   const { data: builtinOperations, isLoading: builtinLoading } = useBuiltInOperationsQuery();
 
@@ -192,31 +170,9 @@ const useBuiltInOperationsQuery = () =>
 /// Connectors ///
 
 export const useAllConnectors = () => {
-  const {
-    data: azureData,
-    isLoading: azureLoading,
-    hasNextPage: azureHasNextPage,
-    fetchNextPage: fetchNextAzurePage,
-    isFetchingNextPage: isFetchingNextAzurePage,
-  } = useAzureConnectorsLazyQuery();
-  useEffect(() => {
-    if (azureLoading || isFetchingNextAzurePage) return;
-    if (!azureHasNextPage) return;
-    fetchNextAzurePage();
-  }, [azureLoading, fetchNextAzurePage, azureHasNextPage, isFetchingNextAzurePage]);
+  const { data: azureData, isLoading: azureLoading, hasNextPage: azureHasNextPage } = useAzureConnectorsLazyQuery();
 
-  const {
-    data: customData,
-    isLoading: customLoading,
-    hasNextPage: customHasNextPage,
-    fetchNextPage: fetchNextCustomPage,
-    isFetchingNextPage: isFetchingNextCustomPage,
-  } = useCustomConnectorsLazyQuery();
-  useEffect(() => {
-    if (customLoading || isFetchingNextCustomPage) return;
-    if (!customHasNextPage) return;
-    fetchNextCustomPage();
-  }, [customLoading, fetchNextCustomPage, customHasNextPage, isFetchingNextCustomPage]);
+  const { data: customData, isLoading: customLoading, hasNextPage: customHasNextPage } = useCustomConnectorsLazyQuery();
 
   const { data: builtinData, isLoading: builtinLoading } = useBuiltInConnectorsQuery();
 

libs/designer/src/lib/ui/Designer.tsx

@@ -215,7 +215,7 @@ export const Designer = (props: DesignerProps) => {
   };
 
   const isInitialized = useNodesInitialized();
-  const preloadSearch = useMemo(() => (isMonitoringView || isReadOnly) && isInitialized, [isMonitoringView, isReadOnly, isInitialized]);
+  const preloadSearch = useMemo(() => !(isMonitoringView || isReadOnly) && isInitialized, [isMonitoringView, isReadOnly, isInitialized]);
 
   // Adding recurrence interval to the query to access outside of functional components
   const recurrenceInterval = useHostOptions().recurrenceInterval;

libs/designer/src/lib/ui/panel/recommendation/operationGroupDetailView.tsx

@@ -1,11 +1,11 @@
 import type { OperationActionData } from '@microsoft/designer-ui';
 import { OperationActionDataFromOperation, OperationGroupDetailsPage } from '@microsoft/designer-ui';
-import type { Connector, DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
+import type { Connector, DiscoveryOpArray } from '@microsoft/logic-apps-shared';
 import { useCallback } from 'react';
 
 type OperationGroupDetailViewProps = {
   connector: Connector;
-  groupOperations: DiscoveryOperation<DiscoveryResultTypes>[];
+  groupOperations: DiscoveryOpArray;
   filters: Record<string, string>;
   onOperationClick: (id: string, apiId?: string) => void;
   isLoading: boolean;

libs/designer/src/lib/ui/panel/recommendation/recommendationPanelContext.tsx

@@ -20,9 +20,10 @@ import { bundleIcon, Dismiss24Filled, Dismiss24Regular } from '@fluentui/react-i
 import { SearchService } from '@microsoft/designer-client-services-logic-apps';
 import { OperationSearchHeader } from '@microsoft/designer-ui';
 import type { CommonPanelProps } from '@microsoft/designer-ui';
-import type { DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
+import type { DiscoveryOpArray, DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
 import { equals, guid, areApiIdsEqual } from '@microsoft/logic-apps-shared';
-import { useCallback, useEffect, useState } from 'react';
+import { useDebouncedEffect } from '@react-hookz/web';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
@@ -45,16 +46,47 @@ export const RecommendationPanelContext = (props: CommonPanelProps) => {
   const [filters, setFilters] = useState<Record<string, string>>({
     actionType: isTrigger ? 'triggers' : 'actions',
   });
-  const [allOperationsForGroup, setAllOperationsForGroup] = useState<DiscoveryOperation<DiscoveryResultTypes>[]>([]);
+  const [allOperationsForGroup, setAllOperationsForGroup] = useState<DiscoveryOpArray>([]);
 
   const [isGrouped, setIsGrouped] = useState(true);
 
   const [selectionState, setSelectionState] = useState<SelectionState>(SELECTION_STATES.SEARCH);
 
-  const { data: allOperations, isLoading: isLoadingOperations } = useAllOperations();
+  const { data: preloadedOperations, isLoading: isLoadingOperations } = useAllOperations();
   const [selectedOperation, setSelectedOperation] = useState<DiscoveryOperation<DiscoveryResultTypes> | undefined>(undefined);
   const [isLoadingOperationGroup, setIsLoadingOperationGroup] = useState<boolean>(false);
 
+  // Searched terms, so we don't search the same term twice
+  const [searchedTerms, setSearchedTerms] = useState(['']);
+  // Array of actively searched operations, to avoid duplicate data storage
+  const [activeSearchOperations, setActiveSearchOperations] = useState<DiscoveryOpArray>([]);
+
+  // Remove duplicates from allOperations and activeSearchOperations
+  const allOperations: DiscoveryOpArray = useMemo(
+    () => joinAndDeduplicateById(preloadedOperations, activeSearchOperations),
+    [preloadedOperations, activeSearchOperations]
+  );
+
+  // Active search
+  useDebouncedEffect(
+    () => {
+      // if preload is complete, no need to actively search
+      if (!isLoadingOperations) return;
+      if (searchedTerms.includes(searchTerm)) return;
+      // We are still preloading, perform active search
+      const activeSearchResults =
+        SearchService().getActiveSearchOperations?.(searchTerm, filters['actionType'], filters['runtime']) ??
+        Promise.resolve([] as DiscoveryOpArray);
+      // Store results
+      activeSearchResults.then((results) => {
+        setSearchedTerms([...searchedTerms, searchTerm]);
+        setActiveSearchOperations(joinAndDeduplicateById(results, activeSearchOperations));
+      });
+    },
+    [searchedTerms, isLoadingOperations, searchTerm, filters, activeSearchOperations],
+    300
+  );
+
   const selectedOperationGroupId = useSelectedSearchOperationGroupId();
   const { data: allConnectors } = useAllConnectors();
   const selectedConnector = allConnectors?.find((c) => c.id === selectedOperationGroupId);
@@ -212,6 +244,7 @@ export const RecommendationPanelContext = (props: CommonPanelProps) => {
                 <SearchView
                   searchTerm={searchTerm}
                   allOperations={allOperations ?? []}
+                  isLoadingOperations={isLoadingOperations}
                   groupByConnector={isGrouped}
                   isLoading={isLoadingOperations}
                   filters={filters}
@@ -228,3 +261,7 @@ export const RecommendationPanelContext = (props: CommonPanelProps) => {
     </>
   );
 };
+
+const joinAndDeduplicateById = (arr1: DiscoveryOpArray, arr2: DiscoveryOpArray) => [
+  ...new Map([...arr1, ...arr2].map((v) => [v.id, v])).values(),
+];

libs/designer/src/lib/ui/panel/recommendation/searchView.tsx

@@ -2,15 +2,17 @@ import type { AppDispatch } from '../../../core';
 import { selectOperationGroupId } from '../../../core/state/panel/panelSlice';
 import { SearchService, type ISearchService } from '@microsoft/designer-client-services-logic-apps';
 import { SearchResultsGrid } from '@microsoft/designer-ui';
-import { isBuiltInConnector, type DiscoveryOperation, type DiscoveryResultTypes, isCustomConnector } from '@microsoft/logic-apps-shared';
+import type { DiscoveryOpArray, DiscoveryOperation, DiscoveryResultTypes } from '@microsoft/logic-apps-shared';
+import { isBuiltInConnector, isCustomConnector } from '@microsoft/logic-apps-shared';
 import { useDebouncedEffect } from '@react-hookz/web';
 import Fuse from 'fuse.js';
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 type SearchViewProps = {
   searchTerm: string;
-  allOperations: DiscoveryOperation<DiscoveryResultTypes>[];
+  allOperations: DiscoveryOpArray;
+  isLoadingOperations?: boolean;
   groupByConnector: boolean;
   isLoading: boolean;
   filters: Record<string, string>;
@@ -23,7 +25,7 @@ export const SearchView: React.FC<SearchViewProps> = (props) => {
 
   const dispatch = useDispatch<AppDispatch>();
 
-  const [searchResults, setSearchResults] = useState<DiscoveryOperation<DiscoveryResultTypes>[]>([]);
+  const [searchResults, setSearchResults] = useState<DiscoveryOpArray>([]);
   const [isLoadingSearchResults, setIsLoadingSearchResults] = useState<boolean>(false);
 
   useEffect(() => {
@@ -44,7 +46,7 @@ export const SearchView: React.FC<SearchViewProps> = (props) => {
       });
     },
     [searchTerm, allOperations, filters],
-    300
+    200
   );
 
   const onConnectorClick = (connectorId: string) => {
@@ -66,7 +68,7 @@ export const SearchView: React.FC<SearchViewProps> = (props) => {
 };
 
 class DefaultSearchOperationsService implements Pick<ISearchService, 'searchOperations'> {
-  constructor(private allOperations: DiscoveryOperation<DiscoveryResultTypes>[]) {}
+  constructor(private allOperations: DiscoveryOpArray) {}
 
   private compareItems(
     a: Fuse.FuseResult<DiscoveryOperation<DiscoveryResultTypes>>,
@@ -120,7 +122,7 @@ class DefaultSearchOperationsService implements Pick<ISearchService, 'searchOper
     searchTerm: string,
     actionType?: string | undefined,
     runtimeFilter?: string | undefined
-  ): Promise<DiscoveryOperation<DiscoveryResultTypes>[]> {
+  ): Promise<DiscoveryOpArray> {
     type FuseSearchResult = Fuse.FuseResult<DiscoveryOperation<DiscoveryResultTypes>>;
 
     const filterItems = (searchResult: FuseSearchResult): boolean => {

libs/logic-apps-shared/src/utils/src/lib/mocks/operations.ts

@@ -1,7 +1,7 @@
 import type {
   BuiltInOperation,
+  DiscoveryOpArray,
   DiscoveryOperation,
-  DiscoveryResultTypes,
   SomeKindOfAzureOperationDiscovery,
 } from '../models/operationDiscoveryResults';
 
@@ -401,4 +401,4 @@ export const MockAzureOperation: DiscoveryOperation<SomeKindOfAzureOperationDisc
   },
 ];
 
-export const MockSearchOperations: DiscoveryOperation<DiscoveryResultTypes>[] = [...MockSearchOperationsBuiltIn, ...MockAzureOperation];
+export const MockSearchOperations: DiscoveryOpArray = [...MockSearchOperationsBuiltIn, ...MockAzureOperation];

libs/logic-apps-shared/src/utils/src/lib/models/operationDiscoveryResults.ts

@@ -110,3 +110,5 @@ export interface DiscoveryWorkflowTrigger {
   provisioningState?: string;
   workflow?: any;
 }
+
+export type DiscoveryOpArray = DiscoveryOperation<DiscoveryResultTypes>[];

libs/services/designer-client-services/src/lib/base/search.ts

@@ -11,15 +11,14 @@ import type {
   BuiltInOperation,
   Connector,
   DiscoveryOperation,
-  DiscoveryResultTypes,
+  DiscoveryOpArray,
   DiscoveryWorkflow,
   DiscoveryWorkflowTrigger,
   SomeKindOfAzureOperationDiscovery,
 } from '@microsoft/logic-apps-shared';
 import { equals, ArgumentException } from '@microsoft/logic-apps-shared';
 
 export type AzureOperationsFetchResponse = ContinuationTokenResponse<DiscoveryOperation<SomeKindOfAzureOperationDiscovery>[]>;
-export type DiscoveryOpArray = DiscoveryOperation<DiscoveryResultTypes>[];
 
 export interface BaseSearchServiceOptions {
   apiHubServiceDetails: {
@@ -260,6 +259,42 @@ export abstract class BaseSearchService implements ISearchService {
     const response = await httpClient.get<any>({ uri, queryParameters });
     return response?.value ?? [];
   }
+
+  /// Active search ///
+  ///   - This is called when making a search and we haven't finished preloading
+  ///   - Won't be a fuzzy search but if we haven't finished preloading it will get the user some data to work with
+  ///   - We're only searching Azure operations for now, built-in and custom both are quick to preload
+
+  public async getActiveSearchOperations?(searchTerm: string, actionType?: string): Promise<DiscoveryOpArray> {
+    const {
+      apiHubServiceDetails: { location, subscriptionId, apiVersion },
+    } = this.options;
+    if (this._isDev) return Promise.resolve([]);
+
+    const traceId = LoggerService().startTrace({
+      name: 'Get Active Search Operations',
+      action: 'getActiveSearchOperations',
+      source: 'connection.ts',
+    });
+
+    const uri = `/subscriptions/${subscriptionId}/providers/Microsoft.Web/locations/${location}/apiOperations`;
+    const filters = [
+      "type eq 'Microsoft.Web/locations/managedApis/apiOperations'",
+      'properties/integrationServiceEnvironmentResourceId eq null',
+      ...(actionType == 'trigger' ? [`properties/trigger ne null`] : []),
+      ...(actionType == 'action' ? [`properties/trigger eq null`] : []),
+    ];
+    const queryParameters: QueryParameters = {
+      $filter: filters.join(' and '),
+      $search: `"${searchTerm}"`,
+      'api-version': apiVersion,
+    };
+
+    const operations = await this.getAzureResourceRecursive(uri, queryParameters);
+
+    LoggerService().endTrace(traceId, { status: Status.Success });
+    return operations;
+  }
 }
 
 export function getClientBuiltInOperations(

libs/services/designer-client-services/src/lib/consumption/search.ts

@@ -1,10 +1,10 @@
 import { getClientBuiltInConnectors, getClientBuiltInOperations, BaseSearchService } from '../base';
 import * as ClientOperationsData from '../base/operations';
-import type { BaseSearchServiceOptions, DiscoveryOpArray } from '../base/search';
+import type { BaseSearchServiceOptions } from '../base/search';
 import type { ContinuationTokenResponse } from '../common/azure';
 import type { QueryParameters } from '../httpClient';
 import * as OperationsData from './operations';
-import type { Connector, DiscoveryOperation, DiscoveryResultTypes, SomeKindOfAzureOperationDiscovery } from '@microsoft/logic-apps-shared';
+import type { Connector, DiscoveryOpArray, SomeKindOfAzureOperationDiscovery } from '@microsoft/logic-apps-shared';
 
 const ISE_RESOURCE_ID = 'properties/integrationServiceEnvironmentResourceId';
 
@@ -36,7 +36,12 @@ export class ConsumptionSearchService extends BaseSearchService {
     return this._updateOperationsIfNeeded(azureOperations);
   }
 
-  public async getCustomOperationsByPage(page: number): Promise<DiscoveryOperation<DiscoveryResultTypes>[]> {
+  public override async getActiveSearchOperations?(searchTerm: string): Promise<DiscoveryOpArray> {
+    const activeSearchOperations = (await super.getActiveSearchOperations?.(searchTerm)) ?? [];
+    return this._updateOperationsIfNeeded(activeSearchOperations);
+  }
+
+  public async getCustomOperationsByPage(page: number): Promise<DiscoveryOpArray> {
     if (this._isDev) return Promise.resolve([]);
 
     try {

libs/services/designer-client-services/src/lib/search.ts

@@ -1,6 +1,7 @@
 import type {
   ArmResource,
   Connector,
+  DiscoveryOpArray,
   DiscoveryOperation,
   DiscoveryResultTypes,
   DiscoveryWorkflow,
@@ -18,18 +19,19 @@ export interface ISearchService {
   getAzureConnectorsByPage(page: number): Promise<Connector[]>;
   getCustomConnectorsByNextlink(nextlink?: string): Promise<{ nextlink?: string; value: Connector[] }>;
   getBuiltInConnectors(): Promise<Connector[]>;
-  getAllOperations(): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
+  getAllOperations(): Promise<DiscoveryOpArray>;
   getRequestWorkflows?(): Promise<ArmResource<DiscoveryWorkflow>[]>;
   getBatchWorkflows?(): Promise<ArmResource<DiscoveryWorkflow>[]>;
   getWorkflowTriggers?(workflowId: string): Promise<ArmResource<DiscoveryWorkflowTrigger>[]>;
-  getAzureOperationsByPage(page: number): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
-  getCustomOperationsByPage(page: number): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
-  getBuiltInOperations(): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
-  searchOperations?(searchTerm: string, actionType?: string, runtimeFilter?: string): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
+  getAzureOperationsByPage(page: number): Promise<DiscoveryOpArray>;
+  getCustomOperationsByPage(page: number): Promise<DiscoveryOpArray>;
+  getActiveSearchOperations?(searchTerm: string, actionType?: string, runtimeFilter?: string): Promise<DiscoveryOpArray>;
+  getBuiltInOperations(): Promise<DiscoveryOpArray>;
+  searchOperations?(searchTerm: string, actionType?: string, runtimeFilter?: string): Promise<DiscoveryOpArray>;
   getRuntimeCategories?(): OperationRuntimeCategory[];
   filterConnector?(connector: Connector, runtimeFilter: string): boolean;
   getOperationById?(operationId: string): Promise<DiscoveryOperation<DiscoveryResultTypes> | undefined>;
-  getOperationsByConnector?(connectorId: string, actionType?: string): Promise<DiscoveryOperation<DiscoveryResultTypes>[]>;
+  getOperationsByConnector?(connectorId: string, actionType?: string): Promise<DiscoveryOpArray>;
   sortConnectors?(connectors: Connector[]): Connector[];
 }
 
@@ -49,5 +51,5 @@ export const SearchService = (): ISearchService => {
 };
 
 export interface SearchResult {
-  searchOperations: DiscoveryOperation<DiscoveryResultTypes>[];
+  searchOperations: DiscoveryOpArray;
 }