feat: State management support for loading mutiple projects

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -76,7 +76,8 @@ describe('<CreationFlow/>', () => {
       '',
       expect.stringMatching(/(\/|\\)test-folder(\/|\\)Desktop/),
       '',
-      'en-US'
+      'en-US',
+      undefined
     );
   });
 });

Composer/packages/client/__tests__/components/TestController/publish-luis-modal.test.tsx

@@ -4,10 +4,11 @@ import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
 import { PublishDialog } from '../../../src/components/TestController/publishDialog';
-import { projectIdState, botNameState, settingsState, dispatcherState } from '../../../src/recoilModel';
+import { botNameState, settingsState, dispatcherState, currentProjectIdState } from '../../../src/recoilModel';
 import { renderWithRecoil } from '../../testUtils';
 jest.useFakeTimers();
 
+const projectId = '12abvc.as324';
 const luisConfig = {
   name: '',
   authoringKey: '12345',
@@ -29,15 +30,22 @@ describe('<PublishDialog />', () => {
       set(dispatcherState, {
         setSettings: setSettingsMock,
       });
-      set(projectIdState, '12345');
-      set(botNameState, 'sampleBot0');
-      set(settingsState, {
+      set(currentProjectIdState, projectId);
+      set(botNameState(projectId), 'sampleBot0');
+      set(settingsState(projectId), {
         luis: luisConfig,
         qna: qnaConfig,
       });
     };
     const { getByText } = renderWithRecoil(
-      <PublishDialog isOpen botName={'sampleBot0'} config={config} onDismiss={onDismiss} onPublish={onPublish} />,
+      <PublishDialog
+        isOpen
+        botName={'sampleBot0'}
+        config={config}
+        projectId={projectId}
+        onDismiss={onDismiss}
+        onPublish={onPublish}
+      />,
       recoilInitState
     );
 

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

@@ -11,12 +11,13 @@ import { showCreateDialogModalState } from '../../src/recoilModel';
 describe('<CreateDialogModal/>', () => {
   const onSubmitMock = jest.fn();
   const onDismissMock = jest.fn();
+  const projectId = 'test-create-dialog';
 
   function renderComponent() {
     return renderWithRecoil(
-      <CreateDialogModal isOpen onDismiss={onDismissMock} onSubmit={onSubmitMock} />,
+      <CreateDialogModal isOpen projectId={projectId} onDismiss={onDismissMock} onSubmit={onSubmitMock} />,
       ({ set }) => {
-        set(showCreateDialogModalState, true);
+        set(showCreateDialogModalState(projectId), true);
       }
     );
   }

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

@@ -16,6 +16,7 @@ jest.mock('@bfc/code-editor', () => {
     LuEditor: () => <div></div>,
   };
 });
+const projectId = '1234a-324234';
 
 describe('<ProjectTree/>', () => {
   it('should render the ProjectTree', async () => {
@@ -46,7 +47,7 @@ describe('<ProjectTree/>', () => {
     });
     const handleSubmit = jest.fn(() => {});
     const { getByText } = renderWithRecoil(
-      <CreateDialogModal isOpen={isOpen} onDismiss={handleDismiss} onSubmit={handleSubmit} />
+      <CreateDialogModal isOpen={isOpen} projectId={projectId} onDismiss={handleDismiss} onSubmit={handleSubmit} />
     );
     const cancelButton = getByText('Cancel');
     fireEvent.click(cancelButton);
@@ -60,7 +61,13 @@ describe('<ProjectTree/>', () => {
     });
     const handleSubmit = jest.fn(() => {});
     const { getByText } = renderWithRecoil(
-      <TriggerCreationModal dialogId={'todobot'} isOpen={isOpen} onDismiss={handleDismiss} onSubmit={handleSubmit} />
+      <TriggerCreationModal
+        dialogId={'todobot'}
+        isOpen={isOpen}
+        projectId={projectId}
+        onDismiss={handleDismiss}
+        onSubmit={handleSubmit}
+      />
     );
     const cancelButton = getByText('Cancel');
     fireEvent.click(cancelButton);

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

@@ -13,7 +13,7 @@ import CreateSkillModal, {
   validateManifestUrl,
   validateName,
 } from '../../src/components/CreateSkillModal';
-import { settingsState, projectIdState, skillsState } from '../../src/recoilModel';
+import { currentProjectIdState, settingsState, skillsState } from '../../src/recoilModel';
 import Skills from '../../src/pages/skills';
 
 jest.mock('../../src//utils/httpUtil');
@@ -44,13 +44,14 @@ const skills: Skill[] = [
 ];
 
 let recoilInitState;
+const projectId = '123a.234';
 
 describe('Skill page', () => {
   beforeEach(() => {
     recoilInitState = ({ set }) => {
-      set(projectIdState, '243245');
-      set(skillsState, skills),
-        set(settingsState, {
+      set(currentProjectIdState, projectId);
+      set(skillsState(projectId), skills),
+        set(settingsState(projectId), {
           luis: {
             name: '',
             authoringKey: '12345',
@@ -90,7 +91,7 @@ describe('Skill page', () => {
 
 describe('<SkillList />', () => {
   it('should render the SkillList', () => {
-    const { container } = renderWithRecoil(<SkillList projectId={'123'} />, recoilInitState);
+    const { container } = renderWithRecoil(<SkillList projectId={projectId} />, recoilInitState);
     expect(container).toHaveTextContent('Email-Skill');
     expect(container).toHaveTextContent('Point Of Interest Skill');
   });
@@ -105,7 +106,7 @@ describe('<SkillForm />', () => {
     const onDismiss = jest.fn();
     const onSubmit = jest.fn();
     const { getByLabelText, getByText } = renderWithRecoil(
-      <CreateSkillModal projectId={'123'} onDismiss={onDismiss} onSubmit={onSubmit} />,
+      <CreateSkillModal projectId={projectId} onDismiss={onDismiss} onSubmit={onSubmit} />,
       recoilInitState
     );
 
@@ -120,20 +121,17 @@ describe('<SkillForm />', () => {
     act(() => {
       fireEvent.click(submitButton);
     });
-
     expect(onSubmit).not.toBeCalled();
   });
 
   let formDataErrors;
-  let projectId;
   let validationState;
   let setFormDataErrors;
   let setSkillManifest;
   let setValidationState;
 
   beforeEach(() => {
     formDataErrors = {};
-    projectId = '123';
     validationState = {};
     setFormDataErrors = jest.fn();
     setSkillManifest = jest.fn();
@@ -225,7 +223,7 @@ describe('<SkillForm />', () => {
           manifestUrl: 'Validating',
         })
       );
-      expect(httpClient.post).toBeCalledWith('/projects/123/skill/check', { url: formData.manifestUrl });
+      expect(httpClient.post).toBeCalledWith(`/projects/${projectId}/skill/check`, { url: formData.manifestUrl });
       expect(setSkillManifest).toBeCalledWith('skill manifest');
       expect(setValidationState).toBeCalledWith(
         expect.objectContaining({
@@ -259,7 +257,7 @@ describe('<SkillForm />', () => {
           manifestUrl: 'Validating',
         })
       );
-      expect(httpClient.post).toBeCalledWith('/projects/123/skill/check', { url: formData.manifestUrl });
+      expect(httpClient.post).toBeCalledWith(`/projects/${projectId}/skill/check`, { url: formData.manifestUrl });
       expect(setSkillManifest).not.toBeCalled();
       expect(setValidationState).toBeCalledWith(
         expect.objectContaining({

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

@@ -7,13 +7,21 @@ import { fireEvent, waitFor } from '@bfc/test-utils';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { renderWithRecoil } from '../testUtils';
 
+const projectId = '123a-bv3c4';
+
 describe('<TriggerCreationModal/>', () => {
   const onSubmitMock = jest.fn();
   const onDismissMock = jest.fn();
 
   function renderComponent() {
     return renderWithRecoil(
-      <TriggerCreationModal isOpen dialogId={'todobot'} onDismiss={onDismissMock} onSubmit={onSubmitMock} />
+      <TriggerCreationModal
+        isOpen
+        dialogId={'todobot'}
+        projectId={projectId}
+        onDismiss={onDismissMock}
+        onSubmit={onSubmitMock}
+      />
     );
   }
 

Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx

@@ -7,13 +7,13 @@ import TableView from '../../../src/pages/knowledge-base/table-view';
 import CodeEditor from '../../../src/pages/knowledge-base/code-editor';
 import { renderWithRecoil } from '../../testUtils';
 import {
-  projectIdState,
   localeState,
   dialogsState,
   qnaFilesState,
   settingsState,
   schemasState,
   dispatcherState,
+  currentProjectIdState,
 } from '../../../src/recoilModel';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
@@ -50,26 +50,29 @@ const state = {
 const updateQnAFileMock = jest.fn();
 
 const initRecoilState = ({ set }) => {
-  set(projectIdState, state.projectId);
-  set(localeState, state.locale);
-  set(dialogsState, state.dialogs);
-  set(qnaFilesState, state.qnaFiles);
-  set(settingsState, state.settings);
-  set(schemasState, mockProjectResponse.schemas);
+  set(currentProjectIdState, state.projectId);
+  set(localeState(state.projectId), state.locale);
+  set(dialogsState(state.projectId), state.dialogs);
+  set(qnaFilesState(state.projectId), state.qnaFiles);
+  set(settingsState(state.projectId), state.settings);
+  set(schemasState(state.projectId), mockProjectResponse.schemas);
   set(dispatcherState, {
     updateQnAFile: updateQnAFileMock,
   });
 };
 
 describe('QnA page all up view', () => {
   it('should render QnA page table view', () => {
-    const { getByText, getByTestId } = renderWithRecoil(<TableView dialogId={'a'} />, initRecoilState);
+    const { getByText, getByTestId } = renderWithRecoil(
+      <TableView dialogId={'a'} projectId={state.projectId} />,
+      initRecoilState
+    );
     getByTestId('table-view');
     getByText('question (1)');
     getByText('answer');
   });
 
   it('should render QnA page code editor', () => {
-    renderWithRecoil(<CodeEditor dialogId={'a'} />, initRecoilState);
+    renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
 });

Composer/packages/client/__tests__/pages/language-generation/LGPage.test.tsx

@@ -7,13 +7,13 @@ import { renderWithRecoil } from '../../testUtils';
 import TableView from '../../../src/pages/language-generation/table-view';
 import CodeEditor from '../../../src/pages/language-generation/code-editor';
 import {
-  projectIdState,
   localeState,
   luFilesState,
   lgFilesState,
   settingsState,
   schemasState,
   dialogsState,
+  currentProjectIdState,
 } from '../../../src/recoilModel';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
@@ -48,23 +48,26 @@ const state = {
 };
 
 const initRecoilState = ({ set }) => {
-  set(projectIdState, state.projectId);
-  set(localeState, state.locale);
-  set(dialogsState, state.dialogs);
-  set(luFilesState, state.luFiles);
-  set(lgFilesState, state.lgFiles);
-  set(settingsState, state.settings);
-  set(schemasState, mockProjectResponse.schemas);
+  set(currentProjectIdState, state.projectId);
+  set(localeState(state.projectId), state.locale);
+  set(dialogsState(state.projectId), state.dialogs);
+  set(luFilesState(state.projectId), state.luFiles);
+  set(lgFilesState(state.projectId), state.lgFiles);
+  set(settingsState(state.projectId), state.settings);
+  set(schemasState(state.projectId), mockProjectResponse.schemas);
 };
 
 describe('LG page all up view', () => {
   it('should render lg page table view', () => {
-    const { getByText, getByTestId } = renderWithRecoil(<TableView dialogId={'a'} />, initRecoilState);
+    const { getByText, getByTestId } = renderWithRecoil(
+      <TableView dialogId={'a'} projectId={state.projectId} />,
+      initRecoilState
+    );
     getByTestId('table-view');
     getByText('Name');
   });
 
   it('should render lg page code editor', () => {
-    renderWithRecoil(<CodeEditor dialogId={'a'} />, initRecoilState);
+    renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
 });

Composer/packages/client/__tests__/pages/language-understanding/LUPage.test.tsx

@@ -7,13 +7,13 @@ import TableView from '../../../src/pages/language-understanding/table-view';
 import CodeEditor from '../../../src/pages/language-understanding/code-editor';
 import { renderWithRecoil } from '../../testUtils';
 import {
-  projectIdState,
   localeState,
   dialogsState,
   luFilesState,
   lgFilesState,
   settingsState,
   schemasState,
+  currentProjectIdState,
 } from '../../../src/recoilModel';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
@@ -41,23 +41,26 @@ const state = {
 };
 
 const initRecoilState = ({ set }) => {
-  set(projectIdState, state.projectId);
-  set(localeState, state.locale);
-  set(dialogsState, state.dialogs);
-  set(luFilesState, state.luFiles);
-  set(lgFilesState, state.lgFiles);
-  set(settingsState, state.settings);
-  set(schemasState, mockProjectResponse.schemas);
+  set(currentProjectIdState, state.projectId);
+  set(localeState(state.projectId), state.locale);
+  set(dialogsState(state.projectId), state.dialogs);
+  set(luFilesState(state.projectId), state.luFiles);
+  set(lgFilesState(state.projectId), state.lgFiles);
+  set(settingsState(state.projectId), state.settings);
+  set(schemasState(state.projectId), mockProjectResponse.schemas);
 };
 
 describe('LU page all up view', () => {
   it('should render lu page table view', () => {
-    const { getByText, getByTestId } = renderWithRecoil(<TableView dialogId={'a'} />, initRecoilState);
+    const { getByText, getByTestId } = renderWithRecoil(
+      <TableView dialogId={'a'} projectId={state.projectId} />,
+      initRecoilState
+    );
     getByTestId('table-view');
     getByText('Intent');
   });
 
   it('should render lu page code editor', () => {
-    renderWithRecoil(<CodeEditor dialogId={'a'} />, initRecoilState);
+    renderWithRecoil(<CodeEditor dialogId={'a'} projectId={state.projectId} />, initRecoilState);
   });
 });