fix: invalid profile case

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

@@ -2,28 +2,19 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/core';
-import { useRecoilValue } from 'recoil';
-import { PublishTarget } from '@bfc/shared';
 import formatMessage from 'format-message';
 import { ActionButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { useBoolean } from '@uifabric/react-hooks';
 import Dialog, { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { SharedColors } from '@uifabric/fluent-theme';
 import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
 
-import { dispatcherState, settingsState, publishTypesState } from '../../recoilModel';
-import { AuthDialog } from '../../components/Auth/AuthDialog';
-import { isShowAuthDialog } from '../../utils/auth';
-
-import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
-
 // -------------------- CreatePublishProfileDialog -------------------- //
 
 type CreatePublishProfileDialogProps = {
-  projectId: string;
-  onUpdateIsCreateProfileFromSkill: (isCreateProfileFromSkill: boolean) => void;
+  onShowPublishProfileWrapperDialog: () => void;
 };
 
 // -------------------- Style -------------------- //
@@ -38,13 +29,8 @@ const actionButton = {
 };
 
 export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProps> = (props) => {
-  const { projectId, onUpdateIsCreateProfileFromSkill } = props;
-  const { publishTargets } = useRecoilValue(settingsState(projectId));
-  const { getPublishTargetTypes, setPublishTargets } = useRecoilValue(dispatcherState);
-  const publishTypes = useRecoilValue(publishTypesState(projectId));
+  const { onShowPublishProfileWrapperDialog } = props;
 
-  const [dialogHidden, setDialogHidden] = useState(true);
-  const [showAuthDialog, setShowAuthDialog] = useState(false);
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
 
   const dialogTitle = {
@@ -53,15 +39,6 @@ export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProp
       'To make your bot available as a remote skill you will need to provision Azure resources . This process may take a few minutes depending on the resources you select.'
     ),
   };
-  const [currentPublishProfile, setCurrentPublishProfile] = useState<{ index: number; item: PublishTarget } | null>(
-    null
-  );
-
-  useEffect(() => {
-    if (projectId) {
-      getPublishTargetTypes(projectId);
-    }
-  }, [projectId]);
 
   return (
     <Fragment>
@@ -83,8 +60,8 @@ export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProp
             data-testid={'addNewPublishProfile'}
             styles={actionButton}
             onClick={() => {
-              isShowAuthDialog(true) ? setShowAuthDialog(true) : setDialogHidden(false);
               toggleHideDialog();
+              onShowPublishProfileWrapperDialog();
             }}
           >
             {formatMessage('Create new publish profile')}
@@ -94,31 +71,6 @@ export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProp
           <DefaultButton text={formatMessage('Cancel')} onClick={toggleHideDialog} />
         </DialogFooter>
       </Dialog>
-      {showAuthDialog && (
-        <AuthDialog
-          needGraph
-          next={() => {
-            setDialogHidden(false);
-          }}
-          onDismiss={() => {
-            setShowAuthDialog(false);
-          }}
-        />
-      )}
-      {!dialogHidden ? (
-        <PublishProfileDialog
-          closeDialog={() => {
-            setDialogHidden(true);
-            setCurrentPublishProfile(null);
-          }}
-          current={currentPublishProfile}
-          projectId={projectId}
-          setPublishTargets={setPublishTargets}
-          targets={publishTargets || []}
-          types={publishTypes}
-          onUpdateIsCreateProfileFromSkill={onUpdateIsCreateProfileFromSkill}
-        />
-      ) : null}
     </Fragment>
   );
 };

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

@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import React, { Fragment, useState, useEffect } from 'react';
+import { jsx } from '@emotion/core';
+import { useRecoilValue } from 'recoil';
+import { PublishTarget } from '@bfc/shared';
+
+import { dispatcherState, settingsState, publishTypesState } from '../../recoilModel';
+import { AuthDialog } from '../../components/Auth/AuthDialog';
+import { isShowAuthDialog } from '../../utils/auth';
+
+import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
+
+// -------------------- CreatePublishProfileDialog -------------------- //
+
+type PublishProfileWrapperDialogProps = {
+  projectId: string;
+  onClose: () => void;
+  onOpen: () => void;
+  onUpdateIsCreateProfileFromSkill: (isCreateProfileFromSkill: boolean) => void;
+};
+
+export const PublishProfileWrapperDialog: React.FC<PublishProfileWrapperDialogProps> = (props) => {
+  const { projectId, onClose, onOpen, onUpdateIsCreateProfileFromSkill } = props;
+  const { publishTargets } = useRecoilValue(settingsState(projectId));
+  const { getPublishTargetTypes, setPublishTargets } = useRecoilValue(dispatcherState);
+  const publishTypes = useRecoilValue(publishTypesState(projectId));
+
+  const [showPublishProfileDialog, setShowPublishProfileDialog] = useState(false);
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
+
+  const [currentPublishProfile, setCurrentPublishProfile] = useState<{ index: number; item: PublishTarget } | null>(
+    null
+  );
+
+  useEffect(() => {
+    isShowAuthDialog(true) ? setShowAuthDialog(true) : setShowPublishProfileDialog(true);
+  });
+
+  useEffect(() => {
+    if (projectId) {
+      getPublishTargetTypes(projectId);
+    }
+  }, [projectId]);
+
+  return (
+    <Fragment>
+      {showAuthDialog && (
+        <AuthDialog
+          needGraph
+          next={() => {
+            setShowPublishProfileDialog(true);
+            onOpen();
+          }}
+          onDismiss={() => {
+            setShowAuthDialog(false);
+            onClose();
+          }}
+        />
+      )}
+      {showPublishProfileDialog ? (
+        <PublishProfileDialog
+          closeDialog={() => {
+            setShowPublishProfileDialog(false);
+            setCurrentPublishProfile(null);
+            onClose();
+          }}
+          current={currentPublishProfile}
+          projectId={projectId}
+          setPublishTargets={setPublishTargets}
+          targets={publishTargets || []}
+          types={publishTypes}
+          onUpdateIsCreateProfileFromSkill={onUpdateIsCreateProfileFromSkill}
+        />
+      ) : null}
+    </Fragment>
+  );
+};

Composer/packages/client/src/pages/design/exportSkillModal/constants.tsx

@@ -192,19 +192,15 @@ export const editorSteps: { [key in ManifestEditorSteps]: EditorStep } = {
       cancelButton,
       backButton,
       {
-        disabled: ({ publishTargets }) => {
+        disabled: ({ publishTarget }) => {
           try {
-            return (
-              publishTargets.findIndex((item) => {
-                const config = JSON.parse(item.configuration);
-                return (
-                  config.settings &&
-                  config.settings.MicrosoftAppId &&
-                  config.hostname &&
-                  config.settings.MicrosoftAppId.length > 0 &&
-                  config.hostname.length > 0
-                );
-              }) < 0
+            const config = JSON.parse(publishTarget.configuration);
+            return !(
+              config.settings &&
+              config.settings.MicrosoftAppId &&
+              config.hostname &&
+              config.settings.MicrosoftAppId.length > 0 &&
+              config.hostname.length > 0
             );
           } catch (err) {
             console.log(err.message);