fix: click show skill manifest no response in form editor (#4979)

* refactor displaySkillManifestState

* clean

* clean up

Co-authored-by: Dong Lei <donglei@microsoft.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

Composer/packages/client/src/components/Modal/DisplayManifestModal.tsx

@@ -16,7 +16,7 @@ import { IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
 import { IModalStyles } from 'office-ui-fabric-react/lib/Modal';
 import { useRecoilValue } from 'recoil';
 
-import { skillNameIdentifierByProjectIdSelector, skillsStateSelector, userSettingsState } from '../../recoilModel';
+import { skillsStateSelector, userSettingsState } from '../../recoilModel';
 
 // -------------------- Styles -------------------- //
 
@@ -53,21 +53,18 @@ const dragOptions: IDragOptions = {
 interface DisplayManifestModalProps {
   isDraggable?: boolean;
   isModeless?: boolean;
-  skillNameIdentifier?: string | null;
+  skillNameIdentifier: string;
   onDismiss: () => void;
-  projectId: string;
 }
 
 export const DisplayManifestModal: React.FC<DisplayManifestModalProps> = ({
   isDraggable = true,
   isModeless = true,
-  projectId,
+  skillNameIdentifier,
   onDismiss,
 }) => {
   const skills = useRecoilValue(skillsStateSelector);
   const userSettings = useRecoilValue(userSettingsState);
-  const skillsByProjectId = useRecoilValue(skillNameIdentifierByProjectIdSelector);
-  const skillNameIdentifier = skillsByProjectId[projectId];
   useEffect(() => onDismiss, []);
 
   const selectedSkill = useMemo(() => {

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

@@ -44,7 +44,7 @@ import {
   skillNameIdentifierByProjectIdSelector,
   SkillInfo,
   projectMetaDataState,
-  displayManifestModalOnProjectIdSelector,
+  displaySkillManifestState,
 } from '../../recoilModel';
 import { CreateQnAModal } from '../../components/QnA';
 import { triggerNotSupported } from '../../utils/dialogValidator';
@@ -133,7 +133,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const schemas = useRecoilValue(schemasState(skillId ?? projectId));
   const dialogs = useRecoilValue(validateDialogsSelectorFamily(skillId ?? projectId));
   const skills = useRecoilValue(skillsStateSelector);
-  const displaySkillManifestOnProjectId = useRecoilValue(displayManifestModalOnProjectIdSelector);
+  const displaySkillManifestNameIdentifier = useRecoilValue(displaySkillManifestState);
   const skillsByProjectId = useRecoilValue(skillNameIdentifierByProjectIdSelector);
   const projectDialogsMap = useRecoilValue(projectDialogsMapSelector);
   const { startSingleBot, stopSingleBot } = useBotOperations();
@@ -697,7 +697,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
     const skillNameIdentifier = skillsByProjectId[skillId];
     if (!skillNameIdentifier) return;
-    displayManifestModal(skillNameIdentifier, skillId);
+    displayManifestModal(skillNameIdentifier);
   };
 
   const handleErrorClick = (projectId: string, skillId: string, diagnostic: Diagnostic) => {
@@ -864,10 +864,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           onSubmit={handleCreateQnA}
         />
 
-        {displaySkillManifestOnProjectId && (
+        {displaySkillManifestNameIdentifier && (
           <DisplayManifestModal
-            projectId={displaySkillManifestOnProjectId}
-            onDismiss={() => dismissManifestModal(displaySkillManifestOnProjectId)}
+            skillNameIdentifier={displaySkillManifestNameIdentifier}
+            onDismiss={() => dismissManifestModal()}
           />
         )}
         {brokenSkillInfo && (

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -264,3 +264,8 @@ export const exportSkillModalInfoState = atom<undefined | string>({
   key: getFullyQualifiedKey('exportSkillModalInfo'),
   default: undefined,
 });
+
+export const displaySkillManifestState = atom<undefined | string>({
+  key: getFullyQualifiedKey('displaySkillManifest'),
+  default: undefined,
+});

Composer/packages/client/src/recoilModel/atoms/botState.ts

@@ -226,11 +226,6 @@ export const onAddSkillDialogCompleteState = atomFamily<any, string>({
   default: { func: undefined },
 });
 
-export const displaySkillManifestState = atomFamily<any, string>({
-  key: getFullyQualifiedKey('displaySkillManifest'),
-  default: undefined,
-});
-
 export const showAddLanguageModalState = atomFamily<boolean, string>({
   key: getFullyQualifiedKey('showAddLanguageModal'),
   default: false,

Composer/packages/client/src/recoilModel/dispatchers/__tests__/skill.test.ts

@@ -12,15 +12,14 @@ import {
   onAddSkillDialogCompleteState,
   settingsState,
   showAddSkillDialogModalState,
-  displaySkillManifestState,
   botProjectFileState,
   botNameIdentifierState,
   locationState,
   projectMetaDataState,
   botDisplayNameState,
 } from '../../atoms/botState';
 import { dispatcherState } from '../../DispatcherWrapper';
-import { botEndpointsState, botProjectIdsState, currentProjectIdState } from '../../atoms';
+import { botEndpointsState, botProjectIdsState, currentProjectIdState, displaySkillManifestState } from '../../atoms';
 import { Dispatcher } from '..';
 import { skillsStateSelector } from '../../selectors';
 
@@ -71,7 +70,7 @@ describe('skill dispatcher', () => {
       const onAddSkillDialogComplete = useRecoilValue(onAddSkillDialogCompleteState(projectId));
       const settings = useRecoilValue(settingsState(projectId));
       const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(projectId));
-      const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
+      const displaySkillManifest = useRecoilValue(displaySkillManifestState);
       const skills = useRecoilValue(skillsStateSelector);
       const [botEndpoints, setBotEndpoints] = useRecoilState(botEndpointsState);
       const currentDispatcher = useRecoilValue(dispatcherState);
@@ -111,7 +110,7 @@ describe('skill dispatcher', () => {
         { recoilState: onAddSkillDialogCompleteState(projectId), initialValue: { func: undefined } },
         { recoilState: settingsState(projectId), initialValue: {} },
         { recoilState: showAddSkillDialogModalState(projectId), initialValue: false },
-        { recoilState: displaySkillManifestState(projectId), initialValue: undefined },
+        { recoilState: displaySkillManifestState, initialValue: undefined },
         { recoilState: currentProjectIdState, initialValue: projectId },
         { recoilState: botProjectIdsState, initialValue: [projectId, ...skillIds] },
         { recoilState: settingsState(projectId), initialValue: {} },
@@ -171,14 +170,14 @@ describe('skill dispatcher', () => {
 
   it('displayManifestModal', async () => {
     await act(async () => {
-      dispatcher.displayManifestModal('foo', projectId);
+      dispatcher.displayManifestModal('foo');
     });
     expect(renderedComponent.current.displaySkillManifest).toEqual('foo');
   });
 
   it('dismissManifestModal', async () => {
     await act(async () => {
-      dispatcher.dismissManifestModal(projectId);
+      dispatcher.dismissManifestModal();
     });
     expect(renderedComponent.current.displaySkillManifest).toBeUndefined();
   });

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

@@ -103,12 +103,12 @@ export const skillDispatcher = () => {
     }
   );
 
-  const displayManifestModal = useRecoilCallback(({ set }: CallbackInterface) => (id: string, projectId: string) => {
-    set(displaySkillManifestState(projectId), id);
+  const displayManifestModal = useRecoilCallback(({ set }: CallbackInterface) => (id: string) => {
+    set(displaySkillManifestState, id);
   });
 
-  const dismissManifestModal = useRecoilCallback(({ set }: CallbackInterface) => (projectId: string) => {
-    set(displaySkillManifestState(projectId), undefined);
+  const dismissManifestModal = useRecoilCallback(({ set }: CallbackInterface) => () => {
+    set(displaySkillManifestState, undefined);
   });
 
   return {

Composer/packages/client/src/recoilModel/selectors/skills.ts

@@ -12,7 +12,6 @@ import {
   projectMetaDataState,
   locationState,
   botProjectIdsState,
-  displaySkillManifestState,
 } from '../atoms';
 
 export const skillsProjectIdSelector = selector({
@@ -80,15 +79,3 @@ export const skillNameIdentifierByProjectIdSelector = selector({
     return skills;
   },
 });
-
-// Display manifest modal if return is projectId
-export const displayManifestModalOnProjectIdSelector = selector({
-  key: 'displayManifestModalOnProjectIdSelector',
-  get: ({ get }) => {
-    const botProjects = get(botProjectIdsState);
-    const displaySkillManifestOnProjects = botProjects.filter((projectId) => {
-      return get(displaySkillManifestState(projectId));
-    });
-    return displaySkillManifestOnProjects[0];
-  },
-});

Composer/packages/client/src/shell/useShell.ts

@@ -236,7 +236,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
     undo,
     redo,
     commitChanges,
-    displayManifestModal: (skillId) => displayManifestModal(skillId, projectId),
+    displayManifestModal: (skillId) => displayManifestModal(skillId),
     isFeatureEnabled: (featureFlagKey: FeatureFlagKey): boolean => featureFlags?.[featureFlagKey]?.enabled ?? false,
     updateDialogSchema: async (dialogSchema: DialogSchemaFile) => {
       updateDialogSchema(dialogSchema, projectId);