feat: appended provision with a profile

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

@@ -26,14 +26,15 @@ 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,11 +73,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 [targetType, setTargetType] = useState<string>(current?.item.type || '');
   const [showAuthDialog, setShowAuthDialog] = useState(false);
   const { provisionToTarget } = useRecoilValue(dispatcherState);
 
@@ -144,7 +145,7 @@ 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]);
 
@@ -168,6 +169,7 @@ export const AddProfileDialog: React.FC<AddProfileDialogProps> = (props) => {
               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')}

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

@@ -16,8 +16,7 @@ import { PluginHost } from '../../../components/PluginHost/PluginHost';
 import { defaultPublishSurface, pvaPublishSurface, azurePublishSurface } from '../../publish/styles';
 import TelemetryClient from '../../../telemetry/TelemetryClient';
 
-import { EditProfileDialog } from './EditProfileDialog';
-import { AddProfileDialog } from './AddProfileDialog';
+import { ProfileFormDialog } from './ProfileFormDialog';
 
 type PublishProfileDialogProps = {
   closeDialog: () => void;
@@ -28,19 +27,18 @@ type PublishProfileDialogProps = {
   setPublishTargets: (targets: PublishTarget[], projectId: string) => Promise<void>;
 };
 
-enum Page {
-  AddProfile = 'add',
-  EditProfile = 'edit',
-  ConfigProvision = 'config',
-}
+const Page = {
+  ProfileForm: Symbol('form'),
+  ConfigProvision: Symbol('config'),
+};
 
 export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props) => {
   const { current, types, projectId, closeDialog, targets, setPublishTargets } = props;
-  const [page, setPage] = useState(current ? Page.EditProfile : Page.AddProfile);
+  const [page, setPage] = useState(Page.ProfileForm);
   const [publishSurfaceStyles, setStyles] = useState(defaultPublishSurface);
 
   const [dialogTitle, setTitle] = useState({
-    title: formatMessage('Add a publishing profile'),
+    title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add a publishing profile'),
     subText: formatMessage('A publishing profile provides the secure connectivity required to publish your bot. '),
   });
 
@@ -72,7 +70,11 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
   useEffect(() => {
     PluginAPI.publish.closeDialog = closeDialog;
     PluginAPI.publish.onBack = () => {
-      setPage(Page.AddProfile);
+      setPage(Page.ProfileForm);
+      setTitle({
+        title: current ? formatMessage('Edit a publishing profile') : formatMessage('Add a publishing profile'),
+        subText: formatMessage('A publishing profile provides the secure connectivity required to publish your bot. '),
+      });
     };
     PluginAPI.publish.getTokenFromCache = () => {
       return {
@@ -90,33 +92,22 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
 
   // setup plugin APIs so that the provisioning plugin can initiate the process from inside the iframe
   useEffect(() => {
-    PluginAPI.publish.useConfigBeingEdited = () => [current ? JSON.parse(current.item.configuration) : undefined];
+    PluginAPI.publish.useConfigBeingEdited = () => (current ? JSON.parse(current.item.configuration) : undefined);
     PluginAPI.publish.currentProjectId = () => {
       return projectId;
     };
   }, [current, projectId]);
 
-  const updatePublishTarget = useCallback(
-    async (name: string, type: string, configuration: string, editTarget: any) => {
-      if (!editTarget) {
-        return;
-      }
-
-      const newTargets = targets ? [...targets] : [];
-      newTargets[editTarget.index] = {
-        name,
-        type,
-        configuration,
-      };
-
-      await setPublishTargets(newTargets, projectId);
-    },
-    [targets, projectId]
-  );
-
   const savePublishTarget = useCallback(
     async (name: string, type: string, configuration: string) => {
-      const newTargets = [...(targets || []), { name, type, configuration }];
+      // check exist
+      const newTargets = [...targets] || [];
+      const index = targets.findIndex((item) => item.name === name);
+      if (index >= 0) {
+        newTargets.splice(index, 1, { name, type, configuration });
+      } else {
+        newTargets.push({ name, type, configuration });
+      }
       await setPublishTargets(newTargets, projectId);
       TelemetryClient.track('NewPublishingProfileSaved', { type });
     },
@@ -125,55 +116,46 @@ export const PublishProfileDialog: React.FC<PublishProfileDialogProps> = (props)
 
   return (
     <Fragment>
-      {page === Page.EditProfile && (
-        <EditProfileDialog
-          current={props.current}
-          types={types}
-          updateSettings={updatePublishTarget}
-          onDismiss={closeDialog}
-        />
-      )}
-      {page != Page.EditProfile && (
-        <Dialog
-          dialogContentProps={{
-            title: dialogTitle.title,
-            subText: page !== Page.AddProfile ? dialogTitle.subText : '',
-          }}
-          hidden={false}
-          minWidth={960}
-          modalProps={{
-            isBlocking: true,
-          }}
-          onDismiss={closeDialog}
-        >
-          {page === Page.AddProfile && (
-            <div>
-              <div style={{ marginBottom: '16px' }}>
-                {dialogTitle.subText}
-                <Link href="https://aka.ms/bf-composer-docs-publish-bot" target="_blank">
-                  {formatMessage('Learn More.')}
-                </Link>
-              </div>
-              <AddProfileDialog
-                projectId={projectId}
-                setType={setSelectType}
-                targets={targets}
-                types={types}
-                updateSettings={savePublishTarget}
-                onDismiss={closeDialog}
-                onNext={() => {
-                  setPage(Page.ConfigProvision);
-                }}
-              />
-            </div>
-          )}
-          {page === Page.ConfigProvision && selectedType?.bundleId && (
-            <div css={publishSurfaceStyles}>
-              <PluginHost bundleId={selectedType.bundleId} pluginName={selectedType.extensionId} pluginType="publish" />
+      <Dialog
+        dialogContentProps={{
+          title: dialogTitle.title,
+          subText: '',
+        }}
+        hidden={false}
+        minWidth={960}
+        modalProps={{
+          isBlocking: true,
+        }}
+        onDismiss={closeDialog}
+      >
+        {page !== Page.ConfigProvision && (
+          <div>
+            <div style={{ marginBottom: '16px' }}>
+              {dialogTitle.subText}
+              <Link href="https://aka.ms/bf-composer-docs-publish-bot" target="_blank">
+                {formatMessage('Learn More.')}
+              </Link>
             </div>
-          )}
-        </Dialog>
-      )}
+            <ProfileFormDialog
+              current={current}
+              projectId={projectId}
+              setType={setSelectType}
+              targets={targets}
+              types={types}
+              updateSettings={savePublishTarget}
+              onDismiss={closeDialog}
+              onNext={() => {
+                setPage(Page.ConfigProvision);
+              }}
+            />
+          </div>
+        )}
+        {page === Page.ConfigProvision && selectedType?.bundleId && (
+          <div css={publishSurfaceStyles}>
+            <PluginHost bundleId={selectedType.bundleId} pluginName={selectedType.extensionId} pluginType="publish" />
+          </div>
+        )}
+      </Dialog>
     </Fragment>
   );
 };

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

@@ -22,7 +22,7 @@ interface AuthAPI {
 }
 
 interface PublishAPI {
-  useConfigBeingEdited?: (() => PublishConfig[]) | (() => void);
+  useConfigBeingEdited?: (() => PublishConfig) | (() => void);
   startProvision?: (config: any) => void;
   currentProjectId?: () => string;
   closeDialog?: () => void;