feat(templates): Adding support to load custom templates from service for gallery (#7146)

* Adding support to load custom templates from service for gallery

* Updating the package version since its duplicate package exists

---------

Co-authored-by: Priti Sambandam <psamband@microsoft.com>

Author: preetriti1

Localize/lang/strings.json

@@ -3260,7 +3260,6 @@
   "_x+6ccf.comment": "Day of the week",
   "_x0or2o.comment": "Required collection parameter to apply length Function",
   "_x2JTW5.comment": "Label for description of the custom 'removeProperty' function",
-  "_x2z3kg.comment": "Error message when the workflow name is empty.",
   "_x3dWOL.comment": "Time zone value ",
   "_x7IYBg.comment": "The status message to show in monitoring view.",
   "_xBIh0S.comment": "Workflow type label",
@@ -4157,7 +4156,6 @@
   "x+6ccf": "Wednesday",
   "x0or2o": "Required. The collection for which to get the length.",
   "x2JTW5": "Returns an object with the specified property removed.",
-  "x2z3kg": "Workflow name is required.",
   "x3dWOL": "(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna",
   "x7IYBg": "Aborted",
   "xBIh0S": "Workflow type",
@@ -4231,7 +4229,6 @@
   "zCsGWP": "Enter value",
   "zIDVd9": "Required. The string that is converted to a native type value.",
   "zK5VPq": "Workflows in this Accelerator",
-  "zMKxg9": "Name can only contain letters, numbers, and '-', '(', ')', '_' or '.",
   "zNesUZ": "A retry policy applies to intermittent failures, characterized as HTTP status codes 408, 429, and 5xx, in addition to any connectivity exceptions. The default is an exponential interval policy set to retry 4 times.",
   "zOq84J": "Can't delete the last agent parameter.",
   "zOvGF8": "(UTC+02:00) Athens, Bucharest",

libs/designer/src/lib/core/actions/bjsworkflow/templates.ts

@@ -31,6 +31,7 @@ import { updateAllTemplateParameterDefinitions } from '../../state/templates/tem
 import { checkWorkflowNameWithRegex, getCurrentWorkflowNames } from '../../templates/utils/helper';
 import { loadGithubManifestNames, setavailableTemplates, setavailableTemplatesNames } from '../../state/templates/manifestSlice';
 import { clearConnectionCaches } from '../../queries/connections';
+import { getCustomTemplates } from '../../templates/utils/queries';
 
 export interface WorkflowTemplateData {
   id: string;
@@ -223,6 +224,26 @@ export const loadTemplate = createAsyncThunk(
   }
 );
 
+export const loadCustomTemplates = createAsyncThunk(
+  'loadCustomTemplates',
+  async (_, { getState }): Promise<Record<string, Template.TemplateManifest>> => {
+    try {
+      const { subscriptionId, resourceGroup } = (getState() as RootState).workflow;
+      const customTemplates = await getCustomTemplates(subscriptionId, resourceGroup);
+      return customTemplates.reduce((result: Record<string, Template.TemplateManifest>, template) => {
+        result[template.id.toLowerCase()] = {
+          ...template.manifest,
+        };
+
+        return result;
+      }, {});
+    } catch (ex) {
+      console.error(ex);
+      return {};
+    }
+  }
+);
+
 export const validateWorkflowsBasicInfo = createAsyncThunk(
   'validateWorkflowsBasicInfo',
   async (

libs/designer/src/lib/core/state/templates/manifestSlice.ts

@@ -3,7 +3,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 import type { FilterObject } from '@microsoft/designer-ui';
-import { loadManifestsFromPaths } from '../../actions/bjsworkflow/templates';
+import { loadCustomTemplates, loadManifestsFromPaths } from '../../actions/bjsworkflow/templates';
 import { resetTemplatesState } from '../global';
 
 export const templatesCountPerPage = 25;
@@ -121,6 +121,10 @@ export const manifestSlice = createSlice({
       state.availableTemplates = undefined;
     });
 
+    builder.addCase(loadCustomTemplates.fulfilled, (state, action) => {
+      state.availableTemplates = { ...state.availableTemplates, ...(action.payload ?? {}) };
+    });
+
     builder.addCase(lazyLoadGithubManifests.fulfilled, (state, action) => {
       state.availableTemplates = { ...state.availableTemplates, ...(action.payload ?? {}) };
     });

libs/designer/src/lib/core/templates/TemplatesDataProvider.tsx

@@ -11,7 +11,12 @@ import {
 } from '../state/templates/manifestSlice';
 import { type ResourceDetails, setInitialData } from '../state/templates/workflowSlice';
 import type { ConnectionReferences } from '../../common/models/workflow';
-import { initializeTemplateServices, initializeWorkflowMetadata, reloadTemplates } from '../actions/bjsworkflow/templates';
+import {
+  initializeTemplateServices,
+  initializeWorkflowMetadata,
+  loadCustomTemplates,
+  reloadTemplates,
+} from '../actions/bjsworkflow/templates';
 import { InitTemplateService, type Template } from '@microsoft/logic-apps-shared';
 import { setEnableResourceSelection, setViewTemplateDetails } from '../state/templates/templateOptionsSlice';
 import { changeCurrentTemplateName } from '../state/templates/templateSlice';
@@ -39,6 +44,7 @@ const DataProviderInner = ({ children, reload, services }: TemplatesDataProvider
 
   useEffect(() => {
     dispatch(loadGithubManifestNames());
+    dispatch(loadCustomTemplates());
   }, [dispatch]);
 
   useEffect(() => {

libs/designer/src/lib/core/templates/utils/queries.ts

@@ -2,7 +2,8 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import { getConnector, getOperation } from '../../queries/operation';
 import type { LogicAppResource, Resource } from '@microsoft/logic-apps-shared';
-import { ResourceService } from '@microsoft/logic-apps-shared';
+import { ResourceService, TemplateService } from '@microsoft/logic-apps-shared';
+import { getReactQueryClient } from '../../ReactQueryProvider';
 
 export interface ConnectorInfo {
   id: string;
@@ -118,3 +119,10 @@ export const useLogicApps = (
     }
   );
 };
+
+export const getCustomTemplates = async (subscriptionId: string, resourceGroup: string) => {
+  const queryClient = getReactQueryClient();
+  return queryClient.fetchQuery(['customtemplates', subscriptionId.toLowerCase(), resourceGroup.toLowerCase()], async () => {
+    return (await TemplateService()?.getCustomTemplates?.(subscriptionId, resourceGroup)) ?? [];
+  });
+};

libs/logic-apps-shared/src/designer-client-services/lib/template.ts

@@ -1,12 +1,20 @@
 import type { LogicAppsV2, Template } from '../../utils/src';
 import { AssertionErrorCode, AssertionException } from '../../utils/src';
 
+export interface CustomTemplateResource {
+  id: string;
+  name: string;
+  state: string;
+  manifest: Template.TemplateManifest;
+}
+
 export interface ITemplateService {
   getExistingWorkflowNames?: () => Promise<string[]>;
   isResourceAvailable?: (resourceId: string) => Promise<boolean>;
   openBladeAfterCreate?: (workflowName: string | undefined) => void;
   onAddBlankWorkflow?: () => Promise<void>;
   getAllTemplateNames: () => Promise<string[]>;
+  getCustomTemplates?: (subscrpitionId: string, resourceGroup: string) => Promise<CustomTemplateResource[]>;
   getResourceManifest: (resourcePath: string) => Promise<Template.TemplateManifest | Template.WorkflowManifest>;
   getWorkflowDefinition: (templateId: string, workflowId: string) => Promise<LogicAppsV2.WorkflowDefinition>;
   getContentPathUrl: (templatePath: string, resourcePath: string) => string;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/logicappsux",
-  "version": "5.94.1",
+  "version": "5.94.2",
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@eslint/eslintrc": "^3.0.2",