feat: State management support for loading mutiple projects

Composer/packages/client/__tests__/components/skill.test.tsx

@@ -4,21 +4,23 @@
 import * as React from 'react';
 import { act, fireEvent, getByLabelText, getByTestId, getByText } from '@bfc/test-utils';
 import { Skill } from '@bfc/shared';
-import { act } from '@bfc/test-utils/lib/hooks';
 
 import httpClient from '../../src//utils/httpUtil';
 import SkillList from '../../src/pages/skills/skill-list';
 import { renderWithRecoil } from '../testUtils';
-import CreateSkillModal from '../../src/components/CreateSkillModal';
-import { settingsState, currentProjectIdState, botEndpointsState } from '../../src/recoilModel';
+import CreateSkillModal, {
+  validateEndpoint,
+  validateManifestUrl,
+  validateName,
+} from '../../src/components/CreateSkillModal';
+import { currentProjectIdState, settingsState, skillsState } from '../../src/recoilModel';
+import Skills from '../../src/pages/skills';
 
 jest.mock('../../src//utils/httpUtil');
 
 jest.mock('../../src/components/Modal/dialogStyle', () => ({}));
 
-const projectId = '12321.234234';
-
-const items: Skill[] = [
+const skills: Skill[] = [
   {
     manifestUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/manifest/manifest-1.0.json',
     name: 'Email-Skill',
@@ -41,36 +43,15 @@ const items: Skill[] = [
   },
 ];
 
-const recoilInitState = ({ set }) => {
-  set(currentProjectIdState, projectId);
-  set(botEndpointsState, {
-    projectId: 'http://localhost:3000/api/messages',
-  });
-  set(settingsState(projectId), {
-    luis: {
-      name: '',
-      authoringKey: '12345',
-      authoringEndpoint: 'testAuthoringEndpoint',
-      endpointKey: '12345',
-      endpoint: 'testEndpoint',
-      authoringRegion: 'westus',
-      defaultLanguage: 'en-us',
-      environment: 'composer',
-    },
-    qna: {
-      subscriptionKey: '12345',
-      qnaRegion: 'westus',
-      endpointKey: '',
-    },
-  });
-};
+let recoilInitState;
+const projectId = '123a.234';
 
 describe('Skill page', () => {
   beforeEach(() => {
     recoilInitState = ({ set }) => {
-      set(projectIdState, '243245');
-      set(skillsState, skills),
-        set(settingsState, {
+      set(currentProjectIdState, '243245');
+      set(skillsState(projectId), skills),
+        set(settingsState(projectId), {
           luis: {
             name: '',
             authoringKey: '12345',
@@ -90,10 +71,8 @@ describe('Skill page', () => {
     };
   });
 
-    const button = getByText('Connect to a new skill');
-    act(() => {
-      fireEvent.click(button);
-    });
+  it('can add a new skill', async () => {
+    const { baseElement } = renderWithRecoil(<Skills />, recoilInitState);
 
     const button = getByText(baseElement, 'Connect to a new skill');
     act(() => {
@@ -112,25 +91,10 @@ describe('Skill page', () => {
 
 describe('<SkillList />', () => {
   it('should render the SkillList', () => {
-    const { container } = renderWithRecoil(
-      <SkillList projectId={projectId} skills={items} onDelete={jest.fn()} onEdit={jest.fn()} />
-    );
-    expect(container).toHaveTextContent('Email Skill');
+    const { container } = renderWithRecoil(<SkillList projectId={'123'} />, recoilInitState);
+    expect(container).toHaveTextContent('Email-Skill');
     expect(container).toHaveTextContent('Point Of Interest Skill');
   });
-
-  it('can edit the skill', () => {
-    const onEdit = jest.fn();
-    const { getAllByTestId } = renderWithRecoil(
-      <SkillList projectId={projectId} skills={items} onDelete={jest.fn()} onEdit={onEdit} />
-    );
-
-    const editBtns = getAllByTestId('EditSkill');
-    editBtns.forEach((btn, i) => {
-      fireEvent.click(btn);
-      expect(onEdit).toHaveBeenCalledWith(i);
-    });
-  });
 });
 
 describe('<SkillForm />', () => {
@@ -142,14 +106,8 @@ describe('<SkillForm />', () => {
     const onDismiss = jest.fn();
     const onSubmit = jest.fn();
     const { getByLabelText, getByText } = renderWithRecoil(
-      <CreateSkillModal
-        isOpen
-        editIndex={0}
-        projectId={projectId}
-        skills={items}
-        onDismiss={onDismiss}
-        onSubmit={onSubmit}
-      />
+      <CreateSkillModal projectId={'123'} onDismiss={onDismiss} onSubmit={onSubmit} />,
+      recoilInitState
     );
 
     const urlInput = getByLabelText('Manifest url');

Composer/packages/client/src/components/CreateSkillModal.tsx

@@ -116,7 +116,7 @@ export const validateName = ({
 };
 
 export const CreateSkillModal: React.FC<CreateSkillModalProps> = ({ projectId, onSubmit, onDismiss }) => {
-  const skills = useRecoilValue(skillsState);
+  const skills = useRecoilValue(skillsState(projectId));
 
   const [formData, setFormData] = useState<Partial<Skill>>({});
   const [formDataErrors, setFormDataErrors] = useState<SkillFormDataErrors>({});

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

@@ -119,7 +119,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const focusPath = useRecoilValue(focusPathState(projectId));
   const showCreateDialogModal = useRecoilValue(showCreateDialogModalState(projectId));
   const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(projectId));
-  const skills = useRecoilValue(skillsState(projectId));
   const actionsSeed = useRecoilValue(actionsSeedState(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
@@ -129,7 +128,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const { undo, redo, canRedo, canUndo, commitChanges, clearUndo } = undoFunction;
   const visualEditorSelection = useRecoilValue(visualEditorSelectionState);
   const {
-    addSkill,
     removeDialog,
     updateDialog,
     createDialogCancel,
@@ -145,6 +143,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     exportToZip,
     onboardingAddCoachMarkRef,
     importQnAFromUrls,
+    addSkill,
   } = useRecoilValue(dispatcherState);
 
   const params = new URLSearchParams(location?.search);
@@ -675,9 +674,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         {showAddSkillDialogModal && (
           <CreateSkillModal
             projectId={projectId}
-            skills={skills}
             onDismiss={() => addSkillDialogCancel(projectId)}
-            onSubmit={handleAddSkillDialogSubmit}
+            onSubmit={(skill) => addSkill(projectId, skill)}
           />
         )}
         {exportSkillModalVisible && (

Composer/packages/client/src/pages/skills/index.tsx

@@ -9,7 +9,7 @@ import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { Skill } from '@bfc/shared';
 
-import { dispatcherState, settingsState, botNameState, skillsState } from '../../recoilModel';
+import { dispatcherState, settingsState, botNameState } from '../../recoilModel';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { TestController } from '../../components/TestController/TestController';
 import { CreateSkillModal } from '../../components/CreateSkillModal';
@@ -20,11 +20,11 @@ import SkillList from './skill-list';
 
 const Skills: React.FC<RouteComponentProps<{ projectId: string }>> = (props) => {
   const { projectId = '' } = props;
-  const [editIndex, setEditIndex] = useState<number | undefined>();
-  const skills = useRecoilValue(skillsState(projectId));
-  const settings = useRecoilValue(settingsState(projectId));
+  const [showAddSkillDialogModal, setShowAddSkillDialogModal] = useState(false);
+
   const botName = useRecoilValue(botNameState(projectId));
-  const { setSettings, updateSkill } = useRecoilValue(dispatcherState);
+  const settings = useRecoilValue(settingsState(projectId));
+  const { addSkill, setSettings } = useRecoilValue(dispatcherState);
 
   const toolbarItems: IToolbarItem[] = [
     {

Composer/packages/client/src/pages/skills/skill-list.tsx

@@ -121,7 +121,7 @@ interface SkillListProps {
 
 const SkillList: React.FC<SkillListProps> = ({ projectId }) => {
   const { removeSkill, updateSkill } = useRecoilValue(dispatcherState);
-  const skills = useRecoilValue(skillsState);
+  const skills = useRecoilValue(skillsState(projectId));
 
   const [selectedSkillUrl, setSelectedSkillUrl] = useState<string | null>(null);
 

Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx

@@ -135,7 +135,7 @@ describe('dialog dispatcher', () => {
     dispatcher = renderedComponent.current.currentDispatcher;
   });
 
-  fit('removes a dialog file', async () => {
+  it('removes a dialog file', async () => {
     await act(async () => {
       await dispatcher.createDialog({ id: '1', content: 'abcde', projectId });
     });

Composer/packages/client/src/recoilModel/dispatchers/__tests__/multilang.test.tsx

@@ -86,7 +86,7 @@ describe('Multilang dispatcher', () => {
     dispatcher = renderedComponent.current.currentDispatcher;
   });
 
-  fit('add language', async () => {
+  it('add language', async () => {
     await act(async () => {
       await dispatcher.addLanguages({
         languages: ['zh-cn'],

Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx

@@ -268,7 +268,7 @@ describe('navigation dispatcher', () => {
   });
 
   describe('selectAndFocus', () => {
-    fit('sets selection and focus with a valud search', async () => {
+    it('sets selection and focus with a valud search', async () => {
       mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
       await act(async () => {
         await dispatcher.selectAndFocus(projectId, 'dialogId', 'select', 'focus');

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

@@ -14,7 +14,6 @@ import {
   settingsState,
   showAddSkillDialogModalState,
   displaySkillManifestState,
-  projectIdState,
 } from '../../atoms/botState';
 import { dispatcherState } from '../../DispatcherWrapper';
 import { currentProjectIdState } from '../../atoms';
@@ -52,9 +51,10 @@ describe('skill dispatcher', () => {
     mockDialogComplete.mockClear();
 
     const useRecoilTestHook = () => {
+      const projectId = useRecoilValue(currentProjectIdState);
       const skillManifests = useRecoilValue(skillManifestsState(projectId));
       const onAddSkillDialogComplete = useRecoilValue(onAddSkillDialogCompleteState(projectId));
-      const skills = useRecoilValue(skillsState(projectId));
+      const skills: Skill[] = useRecoilValue(skillsState(projectId));
       const settings = useRecoilValue(settingsState(projectId));
       const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(projectId));
       const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
@@ -132,43 +132,30 @@ describe('skill dispatcher', () => {
     ]);
   });
 
-  describe('updateSkill', () => {
-    it('adds a skill', async () => {
-      await act(async () => {
-        dispatcher.updateSkill({
-          projectId,
-          targetId: -1,
-          skillData: makeTestSkill(3),
-        });
-      });
-      expect(renderedComponent.current.showAddSkillDialogModal).toBe(false);
-      expect(renderedComponent.current.onAddSkillDialogComplete.func).toBeUndefined();
-      expect(renderedComponent.current.skills).toContainEqual(makeTestSkill(3));
+  it('addsSkill', async () => {
+    await act(async () => {
+      dispatcher.addSkill('123', makeTestSkill(3));
     });
-    it('modifies a skill', async () => {
-      await act(async () => {
-        dispatcher.updateSkill({
-          projectId,
-          targetId: 0,
-          skillData: makeTestSkill(100),
-        });
+    expect(renderedComponent.current.showAddSkillDialogModal).toBe(false);
+    expect(renderedComponent.current.onAddSkillDialogComplete.func).toBeUndefined();
+    expect(renderedComponent.current.skills).toContainEqual(makeTestSkill(3));
+  });
+
+  it('updateSkill', async () => {
+    await act(async () => {
+      dispatcher.updateSkill('123', {
+        targetId: 0,
+        skillData: makeTestSkill(100),
       });
-      expect(renderedComponent.current.showAddSkillDialogModal).toBe(false);
-      expect(renderedComponent.current.onAddSkillDialogComplete.func).toBeUndefined();
-      expect(renderedComponent.current.skills).not.toContain(makeTestSkill(1));
-      expect(renderedComponent.current.skills).toContainEqual(makeTestSkill(100));
     });
-    it('deletes a skill', async () => {
-      await act(async () => {
-        dispatcher.updateSkill({
-          projectId,
-          targetId: 0,
-          skillData: {},
-        });
-      });
-      expect(renderedComponent.current.showAddSkillDialogModal).toBe(false);
-      expect(renderedComponent.current.onAddSkillDialogComplete.func).toBeUndefined();
-      expect(renderedComponent.current.skills).not.toContain(makeTestSkill(1));
+
+    expect(renderedComponent.current.skills).not.toContain(makeTestSkill(1));
+    expect(renderedComponent.current.skills).toContainEqual(makeTestSkill(100));
+  });
+
+  it('removeSkill', async () => {
+    await act(async () => {
+      dispatcher.removeSkill('123', makeTestSkill(1).manifestUrl);
     });
     expect(renderedComponent.current.skills).not.toContain(makeTestSkill(1));
   });