fix: save extension state

Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx

@@ -6,8 +6,7 @@ import { jsx, css } from '@emotion/core';
 import formatMessage from 'format-message';
 import { SharedColors } from '@uifabric/fluent-theme';
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { useState, useMemo, useCallback, Fragment, useEffect } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useState, useMemo, useCallback, Fragment } from 'react';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Separator } from 'office-ui-fabric-react/lib/Separator';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
@@ -17,21 +16,18 @@ import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 import { separator } from '../../publish/styles';
-import { armScopes, graphScopes } from '../../../constants';
 import { PublishType } from '../../../recoilModel/types';
-import { PluginAPI } from '../../../plugins/api';
-import { dispatcherState } from '../../../recoilModel';
-import { AuthClient } from '../../../utils/authClient';
-import { getTokenFromCache, isGetTokenFromUser } from '../../../utils/auth';
 
 type ProfileFormDialogProps = {
   onDismiss: () => void;
   targets: PublishTarget[];
   types: PublishType[];
   onNext: () => void;
-  updateSettings: (name: string, type: string, configuration: string) => Promise<void>;
-  projectId: string;
   setType: (value) => void;
+  name: string;
+  targetType: string;
+  setName: (value: string) => void;
+  setTargetType: (value: string) => void;
   current?: { index: number; item: PublishTarget } | null;
 };
 const labelContainer = css`
@@ -72,11 +68,8 @@ const onRenderLabel = (props) => {
 };
 
 export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
-  const { onDismiss, targets, types, onNext, updateSettings, projectId, setType, current } = props;
-  const [name, setName] = useState(current?.item.name || '');
+  const { name, setName, targetType, setTargetType, onDismiss, targets, types, onNext, setType, current } = props;
   const [errorMessage, setErrorMsg] = useState('');
-  const [targetType, setTargetType] = useState<string>(current?.item.type || '');
-  const { provisionToTarget } = useRecoilValue(dispatcherState);
 
   const updateName = (e, newName) => {
     setName(newName);
@@ -116,36 +109,6 @@ export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
     return !targetType || !name || !!errorMessage;
   }, [errorMessage, name, targetType]);
 
-  // pass functions to extensions
-  useEffect(() => {
-    PluginAPI.publish.getType = () => {
-      return targetType;
-    };
-    PluginAPI.publish.getSchema = () => {
-      return types.find((t) => t.name === targetType)?.schema;
-    };
-    PluginAPI.publish.savePublishConfig = (config) => {
-      updateSettings(name, targetType, JSON.stringify(config) || '{}');
-    };
-  }, [targetType, name, types, updateSettings]);
-
-  useEffect(() => {
-    PluginAPI.publish.startProvision = async (config) => {
-      const fullConfig = { ...config, name: name, type: targetType };
-      let arm, graph;
-      if (!isGetTokenFromUser()) {
-        // login or get token implicit
-        arm = await AuthClient.getAccessToken(armScopes);
-        graph = await AuthClient.getAccessToken(graphScopes);
-      } else {
-        // get token from cache
-        arm = getTokenFromCache('accessToken');
-        graph = getTokenFromCache('graphToken');
-      }
-      provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
-    };
-  }, [name, targetType]);
-
   return (
     <Fragment>
       <Fragment>

Composer/packages/client/src/pages/botProject/create-publish-profile/PublishProfileDialog.tsx

@@ -31,13 +31,30 @@ type PublishProfileDialogProps = {
   setPublishTargets: (targets: PublishTarget[], projectId: string) => Promise<void>;
 };
 
+type ExtensionState = AzureExtensionState; // can expand to pva like | PVAExtensionState
+
+type AzureExtensionState = {
+  subscriptionId: string;
+  resourceGroup: string;
+  hostName: string;
+  location: string;
+  luisLocation: string;
+  enableResources: any;
+  requireResources: any;
+  choice: any;
+};
+
 const Page = {
   ProfileForm: Symbol('form'),
   ConfigProvision: Symbol('config'),
 };
 
 export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props) => {
   const { current, types, projectId, closeDialog, targets, setPublishTargets } = props;
+  const [name, setName] = useState(current?.item.name || '');
+  const [targetType, setTargetType] = useState<string>(current?.item.type || '');
+  const [extensionState, setExtensionState] = useState<ExtensionState | undefined>();
+
   const [page, setPage] = useState(Page.ProfileForm);
   const [publishSurfaceStyles, setStyles] = useState(defaultPublishSurface);
   const { provisionToTarget } = useRecoilValue(dispatcherState);
@@ -93,6 +110,9 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
     PluginAPI.publish.setTitle = (value) => {
       setTitle(value);
     };
+    PluginAPI.publish.setExtensionState = (value) => {
+      setExtensionState(value);
+    };
   }, []);
 
   // setup plugin APIs so that the provisioning plugin can initiate the process from inside the iframe
@@ -101,12 +121,15 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
     PluginAPI.publish.currentProjectId = () => {
       return projectId;
     };
+    PluginAPI.publish.getExtensionState = () => {
+      return extensionState;
+    };
     if (current?.item.type) {
       setPage(Page.ConfigProvision);
     } else {
       setPage(Page.ProfileForm);
     }
-  }, [current, projectId]);
+  }, [current, projectId, extensionState]);
 
   const savePublishTarget = useCallback(
     async (name: string, type: string, configuration: string) => {
@@ -125,32 +148,34 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
   );
 
   useEffect(() => {
-    if (current?.item?.type) {
-      PluginAPI.publish.getType = () => {
-        return current?.item?.type;
-      };
-      PluginAPI.publish.getSchema = () => {
-        return types.find((t) => t.name === current?.item?.type)?.schema;
-      };
-      PluginAPI.publish.savePublishConfig = (config) => {
-        savePublishTarget(current?.item.name, current?.item?.type, JSON.stringify(config) || '{}');
-      };
-      PluginAPI.publish.startProvision = async (config) => {
-        const fullConfig = { ...config, name: current.item.name, type: current.item.type };
-        let arm, graph;
-        if (!isGetTokenFromUser()) {
-          // login or get token implicit
-          arm = await AuthClient.getAccessToken(armScopes);
-          graph = await AuthClient.getAccessToken(graphScopes);
-        } else {
-          // get token from cache
-          arm = getTokenFromCache('accessToken');
-          graph = getTokenFromCache('graphToken');
-        }
-        provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
-      };
-    }
-  }, [current, types, savePublishTarget]);
+    PluginAPI.publish.startProvision = async (config) => {
+      const fullConfig = { ...config, name: name, type: targetType };
+      let arm, graph;
+      if (!isGetTokenFromUser()) {
+        // login or get token implicit
+        arm = await AuthClient.getAccessToken(armScopes);
+        graph = await AuthClient.getAccessToken(graphScopes);
+      } else {
+        // get token from cache
+        arm = getTokenFromCache('accessToken');
+        graph = getTokenFromCache('graphToken');
+      }
+      provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
+    };
+  }, [name, targetType, projectId]);
+
+  // pass functions to extensions
+  useEffect(() => {
+    PluginAPI.publish.getType = () => {
+      return targetType;
+    };
+    PluginAPI.publish.getSchema = () => {
+      return types.find((t) => t.name === targetType)?.schema;
+    };
+    PluginAPI.publish.savePublishConfig = (config) => {
+      savePublishTarget(name, targetType, JSON.stringify(config) || '{}');
+    };
+  }, [targetType, name, types, savePublishTarget]);
 
   return (
     <Fragment>
@@ -176,11 +201,13 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
             </div>
             <ProfileFormDialog
               current={current}
-              projectId={projectId}
+              name={name}
+              setName={setName}
+              setTargetType={setTargetType}
               setType={setSelectType}
               targets={targets}
+              targetType={targetType}
               types={types}
-              updateSettings={savePublishTarget}
               onDismiss={closeDialog}
               onNext={() => {
                 setPage(Page.ConfigProvision);

Composer/packages/client/src/plugins/api.ts

@@ -35,6 +35,8 @@ interface PublishAPI {
   savePublishConfig?: (config: PublishConfig) => void;
   getTokenFromCache?: () => { accessToken: string; graphToken: string };
   isGetTokenFromUser?: () => boolean;
+  getExtensionState?: () => any;
+  setExtensionState?: (value: any) => void;
 }
 
 class API implements IAPI {
@@ -59,6 +61,8 @@ class API implements IAPI {
       savePublishConfig: undefined,
       getTokenFromCache: undefined,
       isGetTokenFromUser: undefined,
+      getExtensionState: undefined,
+      setExtensionState: undefined,
     };
   }
 }

Composer/packages/extension-client/src/hooks/usePublishApi.ts

@@ -49,7 +49,12 @@ export function usePublishApi() {
   function isGetTokenFromUser(): boolean {
     return window[ComposerGlobalName].isGetTokenFromUser();
   }
-
+  function getExtensionState(): any {
+    return window[ComposerGlobalName].getExtensionState();
+  }
+  function setExtensionState(value: any) {
+    return window[ComposerGlobalName].setExtensionState(value);
+  }
   return {
     publishConfig: getPublishConfig(),
     startProvision,
@@ -62,5 +67,7 @@ export function usePublishApi() {
     savePublishConfig,
     getTokenFromCache,
     isGetTokenFromUser,
+    getExtensionState,
+    setExtensionState,
   };
 }

extensions/azurePublish/src/components/azureProvisionDialog.tsx

@@ -38,7 +38,6 @@ import { AzureResourceTypes, ResourcesItem, authConfig } from '../types';
 import {
   getResourceList,
   getSubscriptions,
-  getResourceGroups,
   getDeployLocations,
   getPreview,
   getLuisAuthoringRegions,
@@ -306,10 +305,13 @@ export const AzureProvisionDialog: React.FC = () => {
     getType,
     getTokenFromCache,
     isGetTokenFromUser,
+    setExtensionState,
+    getExtensionState,
   } = usePublishApi();
   // set type of publish - azurePublish or azureFunctionsPublish
   const publishType = getType();
   const currentConfig = removePlaceholder(publishConfig);
+  const extensionState = getExtensionState();
 
   const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
   const [deployLocations, setDeployLocations] = useState<DeployLocation[]>([]);
@@ -318,17 +320,19 @@ export const AzureProvisionDialog: React.FC = () => {
   const [token, setToken] = useState<string>();
   const [currentUser, setCurrentUser] = useState<any>();
 
-  const [choice, setChoice] = useState(choiceOptions[0]);
-  const [currentSubscription, setSubscription] = useState<string>('');
-  const [currentResourceGroup, setResourceGroup] = useState<string>('');
-  const [currentHostName, setHostName] = useState('');
+  const [choice, setChoice] = useState(extensionState?.choice || choiceOptions[0]);
+  const [currentSubscription, setSubscription] = useState<string>(extensionState?.subscriptionId || '');
+  const [currentResourceGroup, setResourceGroup] = useState<string>(extensionState?.resourceGroup || '');
+  const [currentHostName, setHostName] = useState(extensionState?.hostName || '');
   const [errorHostName, setErrorHostName] = useState('');
   const [errorResourceGroupName, setErrorResourceGroupName] = useState('');
-  const [currentLocation, setLocation] = useState<string>(currentConfig?.region);
-  const [currentLuisLocation, setCurrentLuisLocation] = useState<string>(currentConfig?.settings?.luis?.region);
+  const [currentLocation, setLocation] = useState<string>(extensionState?.location || currentConfig?.region);
+  const [currentLuisLocation, setCurrentLuisLocation] = useState<string>(
+    extensionState?.luisLocation || currentConfig?.settings?.luis?.region
+  );
   const [extensionResourceOptions, setExtensionResourceOptions] = useState<ResourcesItem[]>([]);
-  const [enabledResources, setEnabledResources] = useState<ResourcesItem[]>([]); // create from optional list
-  const [requireResources, setRequireResources] = useState<ResourcesItem[]>([]);
+  const [enabledResources, setEnabledResources] = useState<ResourcesItem[]>(extensionState?.enableResources || []); // create from optional list
+  const [requireResources, setRequireResources] = useState<ResourcesItem[]>(extensionState?.requireResources || []);
 
   const [isEditorError, setEditorError] = useState(false);
   const [importConfig, setImportConfig] = useState<any>();
@@ -624,7 +628,7 @@ export const AzureProvisionDialog: React.FC = () => {
 
   const PageFormConfig = (
     <Fragment>
-      <ChoiceGroup defaultSelectedKey="create" options={choiceOptions} style={{}} onChange={updateChoice} />
+      <ChoiceGroup defaultSelectedKey={choice.key} options={choiceOptions} style={{}} onChange={updateChoice} />
       {subscriptionOption?.length > 0 && choice.key === 'create' && (
         <form style={{ width: '50%', marginTop: '16px' }}>
           <Dropdown
@@ -814,7 +818,24 @@ export const AzureProvisionDialog: React.FC = () => {
             />
           ) : null}
           <div>
-            <DefaultButton style={{ margin: '0 4px' }} text={'Back'} onClick={onBack} />
+            <DefaultButton
+              style={{ margin: '0 4px' }}
+              text={'Back'}
+              onClick={() => {
+                // setExtensionState
+                setExtensionState({
+                  subscriptionId: currentSubscription,
+                  resourceGroup: currentResourceGroup,
+                  hostName: currentHostName,
+                  location: currentLocation,
+                  luisLocation: currentLuisLocation,
+                  enableResources: enabledResources,
+                  requireResources: requireResources,
+                  choice: choice,
+                });
+                onBack();
+              }}
+            />
             {choice.key === 'create' ? (
               <PrimaryButton
                 disabled={isDisAble}