fix: [#9528] Unable to add two PVA bot skills through bot framework composer with the option connect to a skill

Composer/packages/client/src/pages/design/ManifestEditor.tsx

@@ -6,6 +6,8 @@ import { jsx, css } from '@emotion/react';
 import formatMessage from 'format-message';
 import ErrorBoundary from 'react-error-boundary';
 import React from 'react';
+import { useRecoilValue } from 'recoil';
+import { useShellApi } from '@bfc/extension-client';
 import { LoadingTimeout } from '@bfc/adaptive-form/lib/components/LoadingTimeout';
 import { FieldLabel } from '@bfc/adaptive-form/lib/components/FieldLabel';
 import ErrorInfo from '@bfc/adaptive-form/lib/components/ErrorInfo';
@@ -15,7 +17,8 @@ import { DetailsList, DetailsListLayoutMode, SelectionMode } from '@fluentui/rea
 import { Link } from '@fluentui/react/lib/Link';
 import get from 'lodash/get';
 
-import { SkillInfo } from '../../recoilModel';
+import { SkillInfo, skillNameIdentifierByProjectIdSelector } from '../../recoilModel';
+import { isExternalLink } from '../../utils/urlUtil';
 
 import { formEditor } from './styles';
 import { PropertyEditorHeader } from './PropertyEditorHeader';
@@ -82,6 +85,12 @@ export const ManifestEditor: React.FC<ManifestEditorProps> = (props) => {
   const { formData } = props;
   const { manifest } = formData;
 
+  const skillsByProjectId = useRecoilValue(skillNameIdentifierByProjectIdSelector);
+  const { shellApi } = useShellApi();
+
+  const skillNameIdentifier = skillsByProjectId[formData.id];
+  const { displayManifestModal } = shellApi;
+
   if (!manifest) {
     return (
       <LoadingTimeout timeout={2000}>
@@ -117,9 +126,13 @@ export const ManifestEditor: React.FC<ManifestEditorProps> = (props) => {
               label={formatMessage('Manifest URL')}
             />
             <p>
-              <Link aria-label={formData.location} href={formData.location} rel="noopener noreferrer" target="_blank">
-                {formData.location}
-              </Link>
+              {isExternalLink(formData.location) ? (
+                <Link aria-label={formData.location} href={formData.location} rel="noopener noreferrer" target="_blank">
+                  {formData.location}
+                </Link>
+              ) : (
+                <Link onClick={() => manifest && displayManifestModal(skillNameIdentifier)}>{formData.location}</Link>
+              )}
             </p>
           </section>
           <section css={styles.section}>

Composer/packages/client/src/pages/design/Modals.tsx

@@ -146,7 +146,7 @@ const Modals: React.FC<ModalsProps> = ({ projectId = '', rootBotId = '' }) => {
             await addRemoteSkillToBotProject(manifestUrl, endpointName, zipContent);
           }}
           addTriggerToRoot={async (dialogId, formData, skillId) => {
-            await createTriggerForRemoteSkill(projectId, dialogId, formData, skillId);
+            await createTriggerForRemoteSkill(rootBotId, dialogId, formData, skillId);
             commitChanges();
           }}
           projectId={rootBotId}

Composer/packages/client/src/pages/design/PropertyPanel.tsx

@@ -43,7 +43,7 @@ const PropertyPanel: React.FC<PropertyViewProps> = React.memo(({ projectId = '',
 
     const skillNameIdentifier = skillsByProjectId[projectId];
     return skills[skillNameIdentifier];
-  }, [skills, isSkill, skillsByProjectId]);
+  }, [projectId, skills, isSkill, skillsByProjectId]);
 
   const shellForPropertyEditor = useShell('PropertyEditor', projectId);
 

Composer/packages/client/src/recoilModel/dispatchers/botProjectFile.ts

@@ -8,14 +8,13 @@ import { CallbackInterface, useRecoilCallback } from 'recoil';
 import { produce } from 'immer';
 import { BotProjectFile, BotProjectSpaceSkill, Skill } from '@bfc/shared';
 
+import { isExternalLink } from '../../utils/urlUtil';
 import { botNameIdentifierState, botProjectFileState, dispatcherState, locationState, settingsState } from '../atoms';
 import { rootBotProjectIdSelector } from '../selectors';
 
 import { setRootBotSettingState } from './setting';
 import { addSkillFiles, deleteSkillFiles } from './utils/skills';
 
-const urlRegex = /^http[s]?:\/\/\w+/;
-
 export const botProjectFileDispatcher = () => {
   const addLocalSkill = useRecoilCallback(({ set, snapshot }: CallbackInterface) => async (skillId: string) => {
     const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
@@ -52,7 +51,7 @@ export const botProjectFileDispatcher = () => {
       }
       const botName = await snapshot.getPromise(botNameIdentifierState(skillId));
       let finalManifestUrl: string | undefined;
-      if (urlRegex.test(manifestUrl)) {
+      if (isExternalLink(manifestUrl)) {
         finalManifestUrl = manifestUrl;
       } else {
         const data = await addSkillFiles(rootBotProjectId, botName, manifestUrl, zipContent);

Composer/packages/client/src/recoilModel/dispatchers/project.ts

@@ -6,6 +6,7 @@ import formatMessage from 'format-message';
 import findIndex from 'lodash/findIndex';
 import { PublishTarget, QnABotTemplateId, RootBotManagedProperties } from '@bfc/shared';
 import get from 'lodash/get';
+import camelCase from 'lodash/camelCase';
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 
 import { BotStatus, CreationFlowStatus, FEEDVERSION } from '../../constants';
@@ -196,6 +197,11 @@ export const projectDispatcher = () => {
         if (!rootBotProjectId) return;
 
         const manifestFromZip = getManifestJsonFromZip(zipContent);
+        let botNameIdentifier;
+        if (manifestFromZip.content?.name) {
+          botNameIdentifier = camelCase(manifestFromZip.content.name);
+          manifestFromZip.name = `skills/${botNameIdentifier}/${manifestFromZip.name}`;
+        }
         const botExists = await checkIfBotExistsInBotProjectFile(
           callbackHelpers,
           manifestFromZip.name ? manifestFromZip.name : manifestUrl,
@@ -213,6 +219,7 @@ export const projectDispatcher = () => {
           manifestUrl,
           manifestFromZip,
           rootBotProjectId,
+          botNameIdentifier,
         });
         set(botProjectIdsState, (current) => [...current, projectId]);
         await dispatcher.addRemoteSkillToBotProjectFile(projectId, manifestUrl, zipContent, endpointName);

Composer/packages/client/src/recoilModel/utils/skill.ts

@@ -24,7 +24,7 @@ export const getManifestJsonFromZip = (zipContent) => {
   try {
     const manifestUrl = Object.keys(zipContent).find((key) => zipContent[key] && isManifestJson(zipContent[key]));
     return manifestUrl
-      ? { name: `skills/${manifestUrl}`, content: JSON.parse(zipContent[manifestUrl]) }
+      ? { name: manifestUrl, content: JSON.parse(zipContent[manifestUrl]) }
       : { name: '', content: null };
   } catch (e) {
     return { name: '', content: null };

Composer/packages/client/src/utils/urlUtil.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/* Returns true if the url is different than the local domain. */
+export const isExternalLink = (url: string): boolean => {
+  const { origin } = location;
+  const parsedUrl = new URL(url, origin);
+  return parsedUrl.origin !== origin;
+};

Composer/packages/server/src/models/utilities/__test__/util.test.ts

@@ -5,7 +5,7 @@ import { convertFolderNameToSkillName } from '../util';
 
 describe('Convert zip folder name to skill name', () => {
   it('should return path with skillName folder', () => {
-    const path = 'manifest/empty-manifest.json';
+    const path = 'manifest-folder/empty-manifest.json';
     const skillName = 'empty';
     expect(convertFolderNameToSkillName(path, skillName)).toEqual('empty/empty-manifest.json');
   });

Composer/packages/server/src/models/utilities/util.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { readFile } from 'fs';
 import { promisify } from 'util';
+import path from 'path';
 
 import axios from 'axios';
 
@@ -39,6 +40,9 @@ export const getRemoteFile = async (url): Promise<string> => {
 };
 
 // convert zip folder name to skill name
-export const convertFolderNameToSkillName = (path, skillName) => {
-  return path.replace(/(\w+)\//, `${skillName}/`);
+export const convertFolderNameToSkillName = (pathStr, skillName) => {
+  const folderName = path.parse(pathStr).dir;
+  const relativePath = path.relative(folderName, pathStr);
+
+  return path.join(skillName, relativePath).replace('\\', '/');
 };