fix(templates): Adding reload handler when resource changes to reload services (#6805)

* Adding a reset state action for templates

* fix(templates): Adding a reload handler when a resource changes and services to reload

* Adding CITs and also updated standard app template standalone

* chore(release): 5.53.1

* Revert "chore(release): 5.53.1"

This reverts commit 4fc648d.

* Calling handler on every resource change to track resource validity

---------

Co-authored-by: Priti Sambandam <[email protected]>
Co-authored-by: [email protected] <preetriti1>

Author: preetriti1

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/Services/WorkflowAndArtifacts.tsx

@@ -22,33 +22,31 @@ const hybridApiVersion = '2024-02-02-preview';
 const consumptionApiVersion = '2019-05-01';
 
 export const useConnectionsData = (appId?: string) => {
-  return useQuery(
-    ['getConnectionsData', appId],
-    async () => {
-      const uri = `${baseUrl}/${appId}/workflowsconfiguration/connections?api-version=2018-11-01`;
-      try {
-        const response = await axios.get(uri, {
-          headers: {
-            Authorization: `Bearer ${environment.armToken}`,
-          },
-        });
-        const { files, health } = response.data.properties;
-        if (equals(health.state, 'healthy')) {
-          return files['connections.json'];
-        }
-        const { error } = health;
-        throw new Error(error.message);
-      } catch {
-        return {};
-      }
-    },
-    {
-      enabled: !!appId,
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
+  return useQuery(['getConnectionsData', appId], async () => getConnectionsData(appId as string), {
+    enabled: !!appId,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const getConnectionsData = async (appId: string): Promise<ConnectionsData> => {
+  const uri = `${baseUrl}/${appId}/workflowsconfiguration/connections?api-version=2018-11-01`;
+  try {
+    const response = await axios.get(uri, {
+      headers: {
+        Authorization: `Bearer ${environment.armToken}`,
+      },
+    });
+    const { files, health } = response.data.properties;
+    if (equals(health.state, 'healthy')) {
+      return files['connections.json'];
     }
-  );
+    const { error } = health;
+    throw new Error(error.message);
+  } catch {
+    return {};
+  }
 };
 
 export const useWorkflowAndArtifactsStandard = (workflowId: string) => {
@@ -293,66 +291,67 @@ export const listCallbackUrl = async (
 };
 
 export const useWorkflowApp = (siteResourceId: string, hostingPlan: HostingPlanTypes) => {
-  return useQuery(
-    ['workflowApp', siteResourceId],
-    async () => {
-      const apiVersions = {
-        consumption: '2016-10-01',
-        standard: '2018-11-01',
-        hybrid: '2023-11-02-preview',
-      };
-      const uri = `${baseUrl}${siteResourceId}?api-version=${apiVersions[hostingPlan] || '2018-11-01'}`;
-      const response = await axios.get(uri, {
-        headers: {
-          Authorization: `Bearer ${environment.armToken}`,
-        },
-      });
+  return useQuery(['workflowApp', siteResourceId], async () => getWorkflowApp(siteResourceId, hostingPlan), {
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+};
 
-      return response.data;
+export const getWorkflowAppFromCache = async (siteResourceId: string, hostingPlan: HostingPlanTypes) => {
+  const queryClient = getReactQueryClient();
+  return queryClient.fetchQuery(['workflowApp', siteResourceId], async () => getWorkflowApp(siteResourceId, hostingPlan));
+};
+
+const getWorkflowApp = async (siteResourceId: string, hostingPlan: HostingPlanTypes) => {
+  const apiVersions = {
+    consumption: '2016-10-01',
+    standard: '2018-11-01',
+    hybrid: '2023-11-02-preview',
+  };
+  const uri = `${baseUrl}${siteResourceId}?api-version=${apiVersions[hostingPlan] || '2018-11-01'}`;
+  const response = await axios.get(uri, {
+    headers: {
+      Authorization: `Bearer ${environment.armToken}`,
     },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-    }
-  );
+  });
+
+  return response.data;
 };
 
 export const useAppSettings = (siteResourceId: string) => {
-  return useQuery(
-    ['appSettings', siteResourceId],
-    async () => {
-      if (HybridAppUtility.isHybridLogicApp(siteResourceId)) {
-        const containerAppInfo = (
-          await axios.get(`${baseUrl}${siteResourceId}?api-version=2024-02-02-preview`, {
-            headers: {
-              Authorization: `Bearer ${environment.armToken}`,
-            },
-          })
-        ).data;
-        containerAppInfo.properties = containerAppInfo.properties.template.containers[0].env;
-        containerAppInfo.properties = containerAppInfo.properties.reduce((acc: any, cur: any) => {
-          acc[cur.name] = cur.value;
-          return acc;
-        }, {});
-        return containerAppInfo;
-      }
+  return useQuery(['appSettings', siteResourceId], async () => getAppSettings(siteResourceId), {
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+  });
+};
 
-      const uri = `${baseUrl}${siteResourceId}/config/appsettings/list?api-version=2018-11-01`;
-      return (
-        await axios.post(uri, null, {
-          headers: {
-            Authorization: `Bearer ${environment.armToken}`,
-          },
-        })
-      ).data;
-    },
-    {
-      refetchOnMount: false,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-    }
-  );
+export const getAppSettings = async (siteResourceId: string) => {
+  if (HybridAppUtility.isHybridLogicApp(siteResourceId)) {
+    const containerAppInfo = (
+      await axios.get(`${baseUrl}${siteResourceId}?api-version=2024-02-02-preview`, {
+        headers: {
+          Authorization: `Bearer ${environment.armToken}`,
+        },
+      })
+    ).data;
+    containerAppInfo.properties = containerAppInfo.properties.template.containers[0].env;
+    containerAppInfo.properties = containerAppInfo.properties.reduce((acc: any, cur: any) => {
+      acc[cur.name] = cur.value;
+      return acc;
+    }, {});
+    return containerAppInfo;
+  }
+
+  const uri = `${baseUrl}${siteResourceId}/config/appsettings/list?api-version=2018-11-01`;
+  return (
+    await axios.post(uri, null, {
+      headers: {
+        Authorization: `Bearer ${environment.armToken}`,
+      },
+    })
+  ).data;
 };
 
 export const useCurrentTenantId = () => {

apps/Standalone/src/templates/app/LocalTemplates.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { TemplatesDataProvider, TemplatesView } from '@microsoft/logic-apps-designer';
 import type { RootState } from '../state/Store';
-import { TemplatesDesigner, TemplatesDesignerProvider } from '@microsoft/logic-apps-designer';
+import { TemplatesDesigner, TemplatesDesignerProvider, templateStore, resetStateOnResourceChange } from '@microsoft/logic-apps-designer';
 import { useSelector } from 'react-redux';
 import {
   BaseGatewayService,
@@ -20,10 +20,6 @@ import {
 } from '@microsoft/logic-apps-shared';
 import { HttpClient } from '../../designer/app/AzureLogicAppsDesigner/Services/HttpClient';
 
-const subscriptionId = 'one';
-const resourceGroup = 'SecondRG';
-const location = 'eastus';
-
 const loadLocalTemplateFromResourcePath = async (resourcePath: string, artifactType = 'manifest') => {
   const paths = resourcePath.split('/');
 
@@ -33,6 +29,9 @@ const loadLocalTemplateFromResourcePath = async (resourcePath: string, artifactT
 };
 
 const localTemplateManifestPaths = ['BasicWorkflowOnly', 'SimpleConnectionParameter', 'SimpleAccelerator', 'SimpleParametersOnly'];
+const defaultSubscriptionId = 'one';
+const defaultResourceGroup = 'SecondRG';
+const defaultLocation = 'eastus';
 
 export const LocalTemplates = () => {
   const { theme, templatesView } = useSelector((state: RootState) => ({
@@ -55,19 +54,23 @@ export const LocalTemplates = () => {
   }, [useEndpoint]);
 
   const services = useMemo(
-    () => getServices(isConsumption, !!useEndpoint),
+    () => getServices(defaultSubscriptionId, defaultResourceGroup, defaultLocation, isConsumption, !!useEndpoint),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isConsumption, useEndpoint]
   );
+  const onReloadServices = () => {
+    const { subscriptionId, resourceGroup, location } = templateStore.getState().workflow;
+    templateStore.dispatch(resetStateOnResourceChange(getResourceBasedServices(subscriptionId, resourceGroup, location, isConsumption)));
+  };
   const isSingleTemplateView = useMemo(() => templatesView !== 'gallery', [templatesView]);
 
   return (
     <TemplatesDesignerProvider locale="en-US" theme={theme}>
       <TemplatesDataProvider
         resourceDetails={{
-          subscriptionId,
-          resourceGroup,
-          location,
+          subscriptionId: defaultSubscriptionId,
+          resourceGroup: defaultResourceGroup,
+          location: defaultLocation,
           workflowAppName: 'app1',
         }}
         reload={reload}
@@ -76,6 +79,7 @@ export const LocalTemplates = () => {
         isConsumption={isConsumption}
         isCreateView={!isConsumption || !!isCreateView}
         enableResourceSelection={enableResourceSelection}
+        onResourceChange={onReloadServices}
         existingWorkflowName={undefined}
         viewTemplate={
           isSingleTemplateView
@@ -167,7 +171,13 @@ export const LocalTemplates = () => {
 
 const httpClient = new HttpClient();
 
-const getServices = (isConsumption: boolean, useEndpoint: boolean): any => {
+const getServices = (
+  subscriptionId: string,
+  resourceGroup: string,
+  location: string,
+  isConsumption: boolean,
+  useEndpoint: boolean
+): any => {
   const connectionService = isConsumption
     ? new ConsumptionConnectionService({
         apiVersion: '2018-07-01-preview',
@@ -276,6 +286,38 @@ const getServices = (isConsumption: boolean, useEndpoint: boolean): any => {
   };
 };
 
+const getResourceBasedServices = (subscriptionId: string, resourceGroup: string, location: string, isConsumption: boolean) => {
+  const connectionService = isConsumption
+    ? new ConsumptionConnectionService({
+        apiVersion: '2018-07-01-preview',
+        baseUrl: '/baseUrl',
+        subscriptionId,
+        resourceGroup,
+        location,
+        httpClient,
+      })
+    : new StandardConnectionService({
+        baseUrl: '/url',
+        apiVersion: '2018-11-01',
+        httpClient,
+        apiHubServiceDetails: {
+          apiVersion: '2018-07-01-preview',
+          baseUrl: '/baseUrl',
+          subscriptionId,
+          resourceGroup,
+          location,
+          httpClient,
+        },
+        workflowAppDetails: {
+          appName: 'app',
+          identity: { type: ResourceIdentityType.SYSTEM_ASSIGNED },
+        },
+        readConnections: () => Promise.resolve({}),
+      });
+
+  return { connectionService };
+};
+
 class LocalTemplateService extends StandardTemplateService {
   constructor(private readonly _options: any) {
     super(_options);