feat: Added configuration editor step

extensions/azurePublishNew/src/components/AzureProvisionWizard.tsx

@@ -4,10 +4,10 @@
 import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import { RecoilRoot } from 'recoil';
-import { usePublishApi, useLocalStorage } from '@bfc/extension-client';
+import { usePublishApi } from '@bfc/extension-client';
 
 import { ProvisionAction } from '../types';
-import { resourceConfigurationState } from '../recoilModel/atoms/resourceConfigurationState';
+import { usePublishProfileInitializer } from '../hooks/usePublishProfileInitializer';
 
 import { ChooseProvisionAction } from './ChooseProvisionAction';
 import { CreateResourcesWizard } from './provisioningWizards/CreateResourcesWizard';
@@ -25,8 +25,8 @@ const Root = styled.div`
 export const AzureProvisionWizard = () => {
   const [provisionAction, setProvisionAction] = useState<ProvisionAction>('create');
   const [activeStepIndex, setActiveStepIndex] = useState<number>(0);
-  const { setTitle, getName } = usePublishApi();
-  const { getItem } = useLocalStorage();
+  const { setTitle } = usePublishApi();
+  const initialize = usePublishProfileInitializer();
 
   const handleStepChange = (index, step) => {
     setActiveStepIndex(index);
@@ -45,14 +45,7 @@ export const AzureProvisionWizard = () => {
   }, [provisionAction]);
 
   return (
-    <RecoilRoot
-      initializeState={({ set }) => {
-        set(resourceConfigurationState, (currentState) => ({
-          ...currentState,
-          ...getItem(getName()),
-        }));
-      }}
-    >
+    <RecoilRoot initializeState={initialize}>
       <Root>
         {!activeStepIndex && (
           <ChooseProvisionAction

extensions/azurePublishNew/src/components/provisioningWizards/CreateResourcesWizard.tsx

@@ -10,7 +10,7 @@ import { Wizard, WizardStep } from '../shared/wizard/Wizard';
 import { useResourceConfiguration } from '../../hooks/useResourceConfiguration';
 import { userInfoState } from '../../recoilModel/atoms/resourceConfigurationState';
 
-import { WizardFooterWithUserPersona } from './footers/WizardFooterWithUserPersona';
+import { WizardFooter } from './footers/WizardFooter';
 import { CreateResourceInstructionsStep } from './steps/CreateResourceInstructionsStep';
 import { ResourceConfigurationStep } from './steps/ResourceConfigurationStep';
 import { ChooseResourcesStep } from './steps/ChooseResourcesStep';
@@ -30,8 +30,8 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
   const userInfo = useRecoilValue(userInfoState);
   const [steps, setSteps] = React.useState<WizardStep[]>([]);
   const [isValidResourceConfiguration, setIsValidResourceConfiguration] = useState<boolean>(false);
-  const { onBack } = usePublishApi();
-  const { persistResourceConfiguration } = useResourceConfiguration();
+  const { onBack, closeDialog: onCancel } = usePublishApi();
+  const { stashWizardState } = useResourceConfiguration();
 
   React.useEffect(() => {
     setSteps([
@@ -41,6 +41,7 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
         subTitle: formatMessage('How would you like to provision Azure resources to your publishing profile?'),
         onRenderContent: () => <CreateResourceInstructionsStep />,
         onBack,
+        onCancel,
       },
       {
         id: 'configure-resources',
@@ -49,7 +50,8 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
           <ResourceConfigurationStep onResourceConfigurationChange={setIsValidResourceConfiguration} />
         ),
         navigationState: { canGoNext: isValidResourceConfiguration },
-        onBack: () => persistResourceConfiguration(),
+        onBack: () => stashWizardState(),
+        onCancel,
       },
       {
         id: 'add-resources',
@@ -65,6 +67,7 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
           }
         ),
         onRenderContent: () => <ChooseResourcesStep />,
+        onCancel,
       },
       {
         id: 'review-resources',
@@ -74,6 +77,7 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
         ),
         onRenderContent: () => <ReviewResourcesStep />,
         navigationState: { nextText: formatMessage('Done') },
+        onCancel,
       },
     ]);
   }, [isValidResourceConfiguration, userInfo]);
@@ -82,7 +86,7 @@ export const CreateResourcesWizard = React.memo((props: Props) => {
     <Wizard
       firstStepId="create-resource-instructions"
       steps={steps}
-      onRenderFooter={(navState) => <WizardFooterWithUserPersona userInfo={userInfo} {...navState} />}
+      onRenderFooter={(navState) => <WizardFooter userInfo={userInfo} {...navState} />}
       onRenderHeader={() => <></>}
       onStepChange={(index, step) => onStepChange(index, step)}
     />

extensions/azurePublishNew/src/components/provisioningWizards/HandOffToAdminWizard.tsx

@@ -8,6 +8,7 @@ import formatMessage from 'format-message';
 import { WizardStep, Wizard } from '../shared/wizard';
 
 import { HandOffInstructionsStep } from './steps/HandOffInstructionsStep';
+import { WizardFooter } from './footers/WizardFooter';
 
 type Props = {
   onStepChange?: (stepIndex: number, stepId: string) => void;
@@ -17,7 +18,7 @@ type Props = {
 export const HandOffToAdminWizard = React.memo((props: Props) => {
   const { onStepChange } = props;
   const [steps, setSteps] = React.useState<WizardStep[]>([]);
-  const { setTitle, onBack } = usePublishApi();
+  const { setTitle, onBack, closeDialog: onCancel } = usePublishApi();
 
   const setDialogTitle = (step: WizardStep) => {
     step && setTitle({ title: step.title, subText: step.subTitle });
@@ -32,6 +33,7 @@ export const HandOffToAdminWizard = React.memo((props: Props) => {
         subTitle: formatMessage('How would you like to provision Azure resources to your publishing profile?'),
         onRenderContent: () => <HandOffInstructionsStep />,
         onBack,
+        onCancel,
       },
     ]);
   }, []);
@@ -40,6 +42,7 @@ export const HandOffToAdminWizard = React.memo((props: Props) => {
     <Wizard
       firstStepId="handoff-instructions"
       steps={steps}
+      onRenderFooter={(navState) => <WizardFooter {...navState} />}
       onRenderHeader={(step) => setDialogTitle(step)}
       onStepChange={(index, step) => onStepChange(index, step.id)}
     />

extensions/azurePublishNew/src/components/provisioningWizards/ImportResourcesWizard.tsx

@@ -4,10 +4,29 @@
 import * as React from 'react';
 import { usePublishApi } from '@bfc/extension-client';
 import formatMessage from 'format-message';
+import { useRecoilValue } from 'recoil';
 
 import { WizardStep, Wizard } from '../shared/wizard';
+import { importConfigurationState } from '../../recoilModel/atoms/importConfigurationState';
 
 import { ImportInstructionsStep } from './steps/ImportInstructionsStep';
+import { PublishConfigEditorStep } from './steps/PublishConfigEditorStep';
+import { WizardFooter } from './footers/WizardFooter';
+
+const removePlaceholder = (config: any) => {
+  try {
+    if (config) {
+      let str = JSON.stringify(config);
+      str = str.replace(/<[^>]*>/g, '');
+      const newConfig = JSON.parse(str);
+      return newConfig;
+    } else {
+      return undefined;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
 
 type Props = {
   onStepChange?: (stepIndex: number, step: WizardStep) => void;
@@ -17,7 +36,8 @@ type Props = {
 export const ImportResourcesWizard = React.memo((props: Props) => {
   const { onStepChange } = props;
   const [steps, setSteps] = React.useState<WizardStep[]>([]);
-  const { onBack } = usePublishApi();
+  const { onBack, savePublishConfig, closeDialog: onCancel } = usePublishApi();
+  const { config, isValidConfiguration } = useRecoilValue(importConfigurationState);
 
   React.useEffect(() => {
     setSteps([
@@ -27,14 +47,25 @@ export const ImportResourcesWizard = React.memo((props: Props) => {
         subTitle: formatMessage('How would you like to provision Azure resources to your publishing profile?'),
         onRenderContent: () => <ImportInstructionsStep />,
         onBack,
+        onCancel,
+      },
+      {
+        id: 'provide-configuration',
+        title: formatMessage('Import existing resources'),
+        subTitle: formatMessage('Please provide your Publish Configuration'),
+        onRenderContent: () => <PublishConfigEditorStep />,
+        navigationState: { nextText: formatMessage('Import'), canGoNext: config && isValidConfiguration },
+        onNext: () => savePublishConfig(removePlaceholder(config)),
+        onCancel,
       },
     ]);
-  }, []);
+  }, [config, config, isValidConfiguration]);
 
   return (
     <Wizard
       firstStepId="import-instructions"
       steps={steps}
+      onRenderFooter={(navState) => <WizardFooter {...navState} />}
       onRenderHeader={() => <></>} // Returning fragment to override the default header rendering behaviour
       onStepChange={(index, step) => onStepChange(index, step)}
     />

extensions/azurePublishNew/src/components/provisioningWizards/footers/WizardFooterWithUserPersona.tsx → extensions/azurePublishNew/src/components/provisioningWizards/footers/WizardFooter.tsx

@@ -6,9 +6,9 @@ import formatMessage from 'format-message';
 import styled from '@emotion/styled';
 import { DefaultButton, PersonaSize } from 'office-ui-fabric-react';
 
-import { UserInfo } from '../../../recoilModel/types';
 import { UserPersona } from '../../shared/userPersona/UserPersona';
 import { WizardStep } from '../../shared/wizard';
+import { UserInfo } from '../../../types';
 
 type ProvisonActionsStylingProps = {
   showSignout: boolean;
@@ -25,20 +25,19 @@ const FooterButton = styled(DefaultButton)`
 `;
 
 const ButtonContainer = styled.div`
-  & button:nth-last-child(1) {
+  & button:last-of-type {
     margin-right: 0px;
   }
 `;
 
-type Props = { userInfo: UserInfo } & WizardStep;
+type Props = { userInfo?: UserInfo } & WizardStep;
 
-export const WizardFooterWithUserPersona = (props: Props) => {
+export const WizardFooter = (props: Props) => {
   const { userInfo, navigationState: navigation } = props;
-  const isSignedIn = !!props.userInfo;
 
   return (
-    <ProvisonActions showSignout={isSignedIn}>
-      {isSignedIn ? (
+    <ProvisonActions showSignout={!!userInfo}>
+      {userInfo ? (
         <UserPersona secondaryText={formatMessage('Sign out')} size={PersonaSize.size40} text={userInfo?.name} />
       ) : null}
       <ButtonContainer>

extensions/azurePublishNew/src/components/provisioningWizards/steps/PublishConfigEditorStep.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import formatMessage from 'format-message';
+import { useRecoilValue } from 'recoil';
+
+import { useDispatcher } from '../../../hooks/useDispatcher';
+import { importConfigurationState } from '../../../recoilModel/atoms/importConfigurationState';
+import { JsonEditor } from '../../shared/jsonEditor/JsonEditor';
+
+export const PublishConfigEditorStep = () => {
+  const { setImportConfiguration } = useDispatcher();
+  const { config, isValidConfiguration } = useRecoilValue(importConfigurationState);
+
+  return (
+    <JsonEditor
+      errorMessage={isValidConfiguration ? '' : formatMessage('Invalid JSON')}
+      height={400}
+      value={config}
+      width="100vw"
+      onChange={setImportConfiguration}
+    />
+  );
+};

extensions/azurePublishNew/src/components/provisioningWizards/steps/ResourceConfigurationStep.tsx

@@ -245,11 +245,11 @@ export const ResourceConfigurationStep = (props: Props) => {
               textFieldProps={{
                 styles: autoCompleteTextFieldStyles,
                 onChange: (_, newValue) => {
-                  if (newValue.length === 0) handleLuisRegionChange('');
+                  if (newValue.length === 0) handleLuisRegionChange(undefined);
                 },
               }}
               value={luisRegion}
-              onClear={() => handleLuisRegionChange('')}
+              onClear={() => handleLuisRegionChange(undefined)}
               onLuisRegionChange={handleLuisRegionChange}
             />
           </Stack>

extensions/azurePublishNew/src/components/resourceConfiguration/TenantPicker.tsx

@@ -7,9 +7,9 @@ import formatMessage from 'format-message';
 import { usePublishApi, getTenants, getARMTokenForTenant } from '@bfc/extension-client';
 import jwtDecode from 'jwt-decode';
 
-import { UserInfo } from '../../recoilModel/types';
 import { SearchableDropdown, SearchableDropdownProps } from '../shared/searchableDropdown/SearchableDropdown';
 import { SearchableDropdownTextFieldProps } from '../shared/searchableDropdown/SearchableDropdownTextField';
+import { UserInfo } from '../../types';
 
 const { userShouldProvideTokens, getTokenFromCache, setTenantId } = usePublishApi();