feat: appended provision with a profile

Composer/packages/client/__tests__/pages/botProjectsSettings/PublishTarget.test.tsx

@@ -8,11 +8,23 @@ import { act, fireEvent } from '@botframework-composer/test-utils';
 import { PublishTargets } from '../../../src/pages/botProject/PublishTargets';
 import { renderWithRecoilAndCustomDispatchers } from '../../testUtils';
 import { dispatcherState, publishTypesState } from '../../../src/recoilModel';
+import { isShowAuthDialog } from '../../../src/utils/auth';
+
+jest.mock('../../../src/utils/auth', () => ({
+  isShowAuthDialog: jest.fn(),
+  getTokenFromCache: jest.fn(),
+  isGetTokenFromUser: jest.fn(),
+}));
+
 const state = {
   projectId: 'test',
   publishTypes: [{ name: 'azureFunctionsPublish', description: 'Publish bot to Azure Functions (Preview)' }],
 };
+
 describe('Publish Target', () => {
+  beforeEach(() => {
+    (isShowAuthDialog as jest.Mock).mockReturnValue(false);
+  });
   const setPublishTargetsMock = jest.fn();
   const initRecoilState = ({ set }) => {
     set(dispatcherState, {
@@ -28,6 +40,7 @@ describe('Publish Target', () => {
       <PublishTargets projectId={state.projectId} />,
       initRecoilState
     );
+
     const addNewPublishProfile = getByTestId('addNewPublishProfile');
     act(() => {
       fireEvent.click(addNewPublishProfile);

Composer/packages/client/src/pages/botProject/PublishTargets.tsx

@@ -13,6 +13,8 @@ import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 
 import { dispatcherState, settingsState, publishTypesState } from '../../recoilModel';
 import { CollapsableWrapper } from '../../components/CollapsableWrapper';
+import { AuthDialog } from '../../components/Auth/AuthDialog';
+import { isShowAuthDialog } from '../../utils/auth';
 
 import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
 
@@ -106,6 +108,7 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (props) => {
   const publishTypes = useRecoilValue(publishTypesState(projectId));
 
   const [dialogHidden, setDialogHidden] = useState(true);
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
 
   const publishTargetsRef = React.useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useState<{ index: number; item: PublishTarget } | null>(null);
@@ -145,7 +148,11 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (props) => {
                     styles={editPublishProfile}
                     onClick={() => {
                       setCurrent({ item: p, index: index });
-                      setDialogHidden(false);
+                      if (isShowAuthDialog(true)) {
+                        setShowAuthDialog(true);
+                      } else {
+                        setDialogHidden(false);
+                      }
                     }}
                   >
                     {formatMessage('Edit')}
@@ -157,12 +164,29 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (props) => {
           <ActionButton
             data-testid={'addNewPublishProfile'}
             styles={addPublishProfile}
-            onClick={() => setDialogHidden(false)}
+            onClick={() => {
+              if (isShowAuthDialog(true)) {
+                setShowAuthDialog(true);
+              } else {
+                setDialogHidden(false);
+              }
+            }}
           >
             {formatMessage('Add new')}
           </ActionButton>
         </div>
       </CollapsableWrapper>
+      {showAuthDialog && (
+        <AuthDialog
+          needGraph
+          next={() => {
+            setDialogHidden(false);
+          }}
+          onDismiss={() => {
+            setShowAuthDialog(false);
+          }}
+        />
+      )}
       {!dialogHidden ? (
         <PublishProfileDialog
           closeDialog={() => {

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

@@ -19,21 +19,20 @@ 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 { isShowAuthDialog } from '../../../utils/auth';
-import { AuthDialog } from '../../../components/Auth/AuthDialog';
 import { PluginAPI } from '../../../plugins/api';
 import { dispatcherState } from '../../../recoilModel';
 import { AuthClient } from '../../../utils/authClient';
 import { getTokenFromCache, isGetTokenFromUser } from '../../../utils/auth';
 
-type AddProfileDialogProps = {
+type ProfileFormDialogProps = {
   onDismiss: () => void;
   targets: PublishTarget[];
   types: PublishType[];
   onNext: () => void;
   updateSettings: (name: string, type: string, configuration: string) => Promise<void>;
   projectId: string;
   setType: (value) => void;
+  current?: { index: number; item: PublishTarget } | null;
 };
 const labelContainer = css`
   display: flex;
@@ -72,12 +71,11 @@ const onRenderLabel = (props) => {
   );
 };
 
-export const AddProfileDialog: React.FC<AddProfileDialogProps> = (props) => {
-  const { onDismiss, targets, types, onNext, updateSettings, projectId, setType } = props;
-  const [name, setName] = useState('');
+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 [errorMessage, setErrorMsg] = useState('');
-  const [targetType, setTargetType] = useState<string>('');
-  const [showAuthDialog, setShowAuthDialog] = useState(false);
+  const [targetType, setTargetType] = useState<string>(current?.item.type || '');
   const { provisionToTarget } = useRecoilValue(dispatcherState);
 
   const updateName = (e, newName) => {
@@ -144,30 +142,20 @@ export const AddProfileDialog: React.FC<AddProfileDialogProps> = (props) => {
         arm = getTokenFromCache('accessToken');
         graph = getTokenFromCache('graphToken');
       }
-      provisionToTarget(fullConfig, config.type, projectId, arm, graph);
+      provisionToTarget(fullConfig, config.type, projectId, arm, graph, current?.item);
     };
   }, [name, targetType]);
 
   return (
     <Fragment>
-      {showAuthDialog && (
-        <AuthDialog
-          needGraph
-          next={() => {
-            onNext();
-          }}
-          onDismiss={() => {
-            setShowAuthDialog(false);
-          }}
-        />
-      )}
       <Fragment>
         <div style={{ width: '49%', minHeight: '430px' }}>
           <form>
             <TextField
               required
               ariaLabel={formatMessage('The name of your publishing file')}
               defaultValue={name}
+              disabled={current?.item.name ? true : false}
               errorMessage={errorMessage}
               label={formatMessage('Name')}
               placeholder={formatMessage('e.g. AzureBot')}
@@ -193,12 +181,8 @@ export const AddProfileDialog: React.FC<AddProfileDialogProps> = (props) => {
           <PrimaryButton
             disabled={saveDisabled}
             text={formatMessage('Next: Configure resources')}
-            onClick={async () => {
-              if (isShowAuthDialog(true)) {
-                setShowAuthDialog(true);
-              } else {
-                onNext();
-              }
+            onClick={() => {
+              onNext();
             }}
           />
         </DialogFooter>