feat: new skill manifest creation experience

Composer/packages/client/src/components/ProjectTree/ProjectHeader.tsx

@@ -113,7 +113,7 @@ export const ProjectHeader = (props: ProjectHeaderProps) => {
         onClick: () => {},
       },
       {
-        label: formatMessage('Create/edit skill manifest'),
+        label: formatMessage('Share as a skill'),
         onClick: () => {
           onBotEditManifest(projectId);
         },

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

@@ -0,0 +1,109 @@
+// 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 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 { dispatcherState, settingsState, publishTypesState } from '../../recoilModel';
+import { AuthDialog } from '../../components/Auth/AuthDialog';
+import { isShowAuthDialog } from '../../utils/auth';
+
+import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
+import { actionButton } from './styles';
+
+// -------------------- CreatePublishProfileDialog -------------------- //
+
+type CreatePublishProfileDialogProps = {
+  projectId: string;
+};
+
+export const CreatePublishProfileDialog: React.FC<CreatePublishProfileDialogProps> = (props) => {
+  const { projectId } = props;
+  const { publishTargets } = useRecoilValue(settingsState(projectId));
+  const { getPublishTargetTypes, setPublishTargets } = useRecoilValue(dispatcherState);
+  const publishTypes = useRecoilValue(publishTypesState(projectId));
+
+  const [dialogHidden, setDialogHidden] = useState(true);
+  const [showAuthDialog, setShowAuthDialog] = useState(false);
+  const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(false);
+
+  const dialogTitle = {
+    title: formatMessage('Create a publish profile to continue'),
+    subText: formatMessage(
+      '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>
+      <Dialog
+        dialogContentProps={{
+          title: dialogTitle.title,
+          subText: dialogTitle.subText,
+        }}
+        hidden={hideDialog}
+        minWidth={960}
+        modalProps={{
+          isBlocking: true,
+        }}
+        onDismiss={toggleHideDialog}
+      >
+        <div css={{ height: '430px' }}>
+          <ActionButton
+            data-testid={'addNewPublishProfile'}
+            styles={actionButton}
+            onClick={() => {
+              isShowAuthDialog(true) ? setShowAuthDialog(true) : setDialogHidden(false);
+              toggleHideDialog();
+            }}
+          >
+            {formatMessage('Create new publish profile')}
+          </ActionButton>
+        </div>
+        <DialogFooter>
+          <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}
+        />
+      ) : null}
+    </Fragment>
+  );
+};

Composer/packages/client/src/pages/design/exportSkillModal/__tests__/generateSkillManifest.test.ts

@@ -11,6 +11,14 @@ import {
   generateDispatchModels,
 } from '../generateSkillManifest';
 
+const projectId = '42345.23432';
+const currentTarget = {
+  configuration:
+    '{\n  "name": "test",\n  "environment": "composer",\n  "tenantId": "aaa",\n  "subscriptionId": "aaa",\n  "resourceGroup": "testGroup",\n  "botName": "test",\n  "hostname": "test",\n  "luisResource": "test",\n  "runtimeIdentifier": "win-x64",\n  "region": "westus",\n  "settings": {\n    "applicationInsights": {},\n    "luis": {"authoringKey":"aaa",      "endpointKey": "aaa",\n      "endpoint": "https://westus.api.cognitive.microsoft.com/"\n    },\n    "qna": {},\n    "MicrosoftAppId": "aaa",\n    "MicrosoftAppPassword": "aaa"\n  }\n}',
+  name: 'test',
+  type: 'azurePublish',
+  lastPublished: new Date('2021-04-08T08:38:17.566Z'),
+};
 const dialogSchema = {
   id: 'test',
   content: {
@@ -188,7 +196,15 @@ describe('generateDispatchModels', () => {
     const selectedTriggers = [];
     const luFiles = [];
     const qnaFiles = [];
-    const result = generateDispatchModels(schema, dialogs, selectedTriggers, luFiles, qnaFiles);
+    const result = generateDispatchModels(
+      schema,
+      dialogs,
+      selectedTriggers,
+      luFiles,
+      qnaFiles,
+      currentTarget,
+      projectId
+    );
     expect(result).toEqual({});
   });
 
@@ -201,7 +217,15 @@ describe('generateDispatchModels', () => {
       { id: 'test.fr-FR', empty: false },
     ];
     const qnaFiles = [];
-    const result = generateDispatchModels(schema, dialogs, selectedTriggers, luFiles, qnaFiles);
+    const result = generateDispatchModels(
+      schema,
+      dialogs,
+      selectedTriggers,
+      luFiles,
+      qnaFiles,
+      currentTarget,
+      projectId
+    );
     expect(result).toEqual({});
   });
 
@@ -214,7 +238,15 @@ describe('generateDispatchModels', () => {
       { id: 'test.fr-FR', empty: false },
     ];
     const qnaFiles = [];
-    const result = generateDispatchModels(schema, dialogs, selectedTriggers, luFiles, qnaFiles);
+    const result = generateDispatchModels(
+      schema,
+      dialogs,
+      selectedTriggers,
+      luFiles,
+      qnaFiles,
+      currentTarget,
+      projectId
+    );
     expect(result).toEqual({});
   });
 
@@ -227,37 +259,45 @@ describe('generateDispatchModels', () => {
       { id: 'test.fr-FR', empty: false },
     ];
     const qnaFiles: any = [{ id: 'test.es-es', empty: false }];
-    const result = generateDispatchModels(schema, dialogs, selectedTriggers, luFiles, qnaFiles);
+    const result = generateDispatchModels(
+      schema,
+      dialogs,
+      selectedTriggers,
+      luFiles,
+      qnaFiles,
+      currentTarget,
+      projectId
+    );
     expect(result).toEqual(
       expect.objectContaining({
         dispatchModels: {
+          intents: ['testIntent'],
           languages: {
             'en-us': [
               {
-                name: 'test',
                 contentType: 'application/lu',
-                url: `<test.en-us.lu url>`,
                 description: '<description>',
+                name: 'test',
+                url: 'https://test.azurewebsites.net/manifests/skill-test.en-us.lu',
               },
             ],
-            'fr-FR': [
+            'es-es': [
               {
-                name: 'test',
-                contentType: 'application/lu',
-                url: `<test.fr-FR.lu url>`,
+                contentType: 'application/qna',
                 description: '<description>',
+                name: 'test',
+                url: 'https://test.azurewebsites.net/manifests/skill-test.es-es.qna',
               },
             ],
-            'es-es': [
+            'fr-FR': [
               {
-                name: 'test',
-                contentType: 'application/qna',
-                url: `<test.es-es.qna url>`,
+                contentType: 'application/lu',
                 description: '<description>',
+                name: 'test',
+                url: 'https://test.azurewebsites.net/manifests/skill-test.fr-FR.lu',
               },
             ],
           },
-          intents: ['testIntent'],
         },
       })
     );