fix: export display name and sort order for templates outside of Comp…

…oser (#6936) * Adding template sort order json * Moving templates.json * Cleaning up routing to no longer use old creation experience * Removing unneeded fetchTemplate param * Adding logic to attmpt to get template order and display name from git hub with shipped sort order as back up * Adding ben and patrick as Composer dir code owners * fixing unit test * Making PR changes * Fixing references with extra param * Fix unused props lint error * Remove unneeded fetch template call * Fixing unit test * Adding correct mocks for unit test * Adding route to support older paths * fixing unit test for new creation routing Co-authored-by: Soroush <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
microsoft · Apr 15, 2021 · 6a80368 · 6a80368
1 parent e02efce
commit 6a80368
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 26 deletions.
diff --git a/Composer/cypress/integration/NavigateUrls.spec.ts b/Composer/cypress/integration/NavigateUrls.spec.ts
@@ -12,7 +12,7 @@ context('Navigate Url', () => {
   });
 
   it('should open Define Conversations window from a url', () => {
-    cy.visit('/projects/create/TodoSample');
+    cy.visit('/projects/create/dotnet/conversationalCore');
     cy.get('[data-testid="NewDialogName"]').should('be.visible');
   });
 

diff --git a/Composer/packages/client/__tests__/components/CreationFlowV2/CreateOptions/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlowV2/CreateOptions/index.test.tsx
@@ -12,7 +12,6 @@ describe('<CreateOptionsV2/>', () => {
   const handleCreateNextMock = jest.fn();
   const handleJumpToOpenModal = jest.fn();
   const handleFetchReadMeMock = jest.fn();
-  const handleFetchTemplatesMock = jest.fn();
 
   const templates = [
     {
@@ -34,7 +33,6 @@ describe('<CreateOptionsV2/>', () => {
     return renderWithRecoil(
       <CreateOptionsV2
         fetchReadMe={handleFetchReadMeMock}
-        fetchTemplates={handleFetchTemplatesMock}
         path="create"
         templates={templates}
         onDismiss={handleDismissMock}

diff --git a/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
@@ -27,9 +27,7 @@ import { CreateOptions } from './CreateOptions';
 import { OpenProject } from './OpenProject';
 import DefineConversation from './DefineConversation';
 
-type CreationFlowProps = RouteComponentProps<{}>;
-
-const CreationFlow: React.FC<CreationFlowProps> = (props: CreationFlowProps) => {
+const CreationFlow: React.FC<RouteComponentProps> = () => {
   const {
     fetchTemplatesV2,
     fetchRecentProjects,

diff --git a/Composer/packages/client/src/components/CreationFlow/v2/CreateBot.tsx b/Composer/packages/client/src/components/CreationFlow/v2/CreateBot.tsx
@@ -118,7 +118,6 @@ type CreateBotProps = {
   location?: WindowLocation | undefined;
   onDismiss: () => void;
   onNext: (templateName: string, templateLanguage: string, urlData?: string) => void;
-  fetchTemplates: (feedUrls?: string[]) => Promise<void>;
   fetchReadMe: (moduleName: string) => {};
 };
 

diff --git a/Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx b/Composer/packages/client/src/components/CreationFlow/v2/CreateOptions.tsx
@@ -30,15 +30,14 @@ type CreateOptionsProps = {
   onDismiss: () => void;
   onNext: (templateName: string, templateLanguage: string, urlData?: string) => void;
   onJumpToOpenModal: (search?: string) => void;
-  fetchTemplates: (feedUrls?: string[]) => Promise<void>;
   fetchReadMe: (moduleName: string) => {};
 } & RouteComponentProps<{}>;
 
 export function CreateOptionsV2(props: CreateOptionsProps) {
   const [isOpenOptionsModal, setIsOpenOptionsModal] = useState(false);
   const [option, setOption] = useState('Create');
   const [isOpenCreateModal, setIsOpenCreateModal] = useState(false);
-  const { templates, onDismiss, onNext, onJumpToOpenModal, fetchTemplates, fetchReadMe } = props;
+  const { templates, onDismiss, onNext, onJumpToOpenModal, fetchReadMe } = props;
   const [showNodeModal, setShowNodeModal] = useState(false);
   const userHasNode = useRecoilValue(userHasNodeInstalledState);
 
@@ -128,7 +127,6 @@ export function CreateOptionsV2(props: CreateOptionsProps) {
       </DialogWrapper>
       <CreateBotV2
         fetchReadMe={fetchReadMe}
-        fetchTemplates={fetchTemplates}
         isOpen={isOpenCreateModal}
         location={props.location}
         templates={templates}

diff --git a/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx b/Composer/packages/client/src/components/CreationFlow/v2/CreationFlow.tsx
@@ -186,7 +186,6 @@ const CreationFlowV2: React.FC<CreationFlowProps> = () => {
         />
         <CreateOptionsV2
           fetchReadMe={fetchReadMe}
-          fetchTemplates={fetchTemplatesV2}
           path="create"
           templates={templateProjects}
           onDismiss={handleDismiss}

diff --git a/Composer/packages/client/src/pages/design/creationModal.tsx b/Composer/packages/client/src/pages/design/creationModal.tsx
@@ -39,7 +39,6 @@ export const CreationModal: React.FC<CreationModalProps> = (props) => {
     createNewBotV2,
     openProject,
     addExistingSkillToBotProject,
-    fetchTemplatesV2,
     fetchReadMe,
   } = useRecoilValue(dispatcherState);
 
@@ -65,7 +64,6 @@ export const CreationModal: React.FC<CreationModalProps> = (props) => {
 
   const fetchResources = async () => {
     await fetchStorages();
-    fetchTemplatesV2();
   };
 
   useEffect(() => {
@@ -169,7 +167,6 @@ export const CreationModal: React.FC<CreationModalProps> = (props) => {
       <CreateBotV2
         isOpen
         fetchReadMe={fetchReadMe}
-        fetchTemplates={fetchTemplatesV2}
         templates={templateProjects}
         onDismiss={handleDismiss}
         onNext={handleCreateNext}

diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
@@ -38,7 +38,7 @@ const BotProjectSettings = React.lazy(() => import('./pages/botProject/BotProjec
 const Diagnostics = React.lazy(() => import('./pages/diagnostics/Diagnostics'));
 const ExtensionsPage = React.lazy(() => import('./pages/extensions/ExtensionsPage'));
 const Publish = React.lazy(() => import('./pages/publish/Publish'));
-const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow/CreationFlow'));
+// const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow/CreationFlow'));
 const BotCreationFlowRouterV2 = React.lazy(() => import('./components/CreationFlow/v2/CreationFlow'));
 const FormDialogPage = React.lazy(() => import('./pages/form-dialog/FormDialogPage'));
 
@@ -102,9 +102,9 @@ const Routes = (props) => {
           </ProjectRouter>
           <SettingPage path="settings/*" />
           <ExtensionsPage path="extensions/*" />
-          <BotCreationFlowRouter path="projects/*" />
+          <BotCreationFlowRouterV2 path="projects/*" />
           <BotCreationFlowRouterV2 path="v2/projects/*" />
-          <BotCreationFlowRouter path="home" />
+          <BotCreationFlowRouterV2 path="home" />
           <NotFound default />
         </Router>
       </Suspense>

diff --git a/Composer/packages/server/src/controllers/asset.ts b/Composer/packages/server/src/controllers/asset.ts
@@ -62,7 +62,7 @@ export async function getProjTemplatesV2(req: any, res: any) {
       templates = templates.concat(await getNpmTemplates());
     }
 
-    const sortedTemplateList = sortTemplates(templates);
+    const sortedTemplateList = await sortTemplates(templates);
 
     // return templates
     res.status(200).json(sortedTemplateList);

diff --git a/Composer/packages/server/src/utility/__tests__/creation.test.ts b/Composer/packages/server/src/utility/__tests__/creation.test.ts
@@ -3,7 +3,12 @@
 
 import { BotTemplate } from '@bfc/shared';
 
-import { sortTemplates, templateSortOrder } from '../creation';
+import { sortTemplates, defaultSortOrder } from '../creation';
+
+jest.mock('../../models/asset/assetManager', () => ({
+  getRawGithubFileContent: jest.fn(),
+  AssetManager: jest.fn(),
+}));
 
 describe('templateSort', () => {
   const templates: BotTemplate[] = [
@@ -82,8 +87,8 @@ describe('templateSort', () => {
 
   it('should return sorted templates per sortOrder obj', async () => {
     // note - the list in templates has to include all the same items in creation.ts
-    const sortedTemplateList = sortTemplates(templates);
-    templateSortOrder.forEach((templateSortEntry, index) => {
+    const sortedTemplateList = await sortTemplates(templates);
+    defaultSortOrder.forEach((templateSortEntry, index) => {
       if (
         templates.findIndex((temp) => {
           temp.id === templateSortEntry.generatorName;

diff --git a/Composer/packages/server/src/utility/creation.ts b/Composer/packages/server/src/utility/creation.ts
@@ -4,21 +4,36 @@
 import { BotTemplate, QnABotTemplateId } from '@bfc/shared';
 import union from 'lodash/union';
 
-export const templateSortOrder = [
+import logger from '../logger';
+import AssetService from '../services/asset';
+
+export const defaultSortOrder = [
   { generatorName: '@microsoft/generator-bot-empty', displayName: 'Blank bot' },
-  { generatorName: '@microsoft/generator-bot-conversational-core', displayName: 'Basic conversational bot' },
+  { generatorName: '@microsoft/generator-bot-conversational-core', displayName: 'Basic bot' },
   { generatorName: '@microsoft/generator-bot-assistant-core', displayName: 'Basic assistant' },
   { generatorName: '@microsoft/generator-bot-enterprise-assistant', displayName: 'Enterprise assistant' },
   { generatorName: '@microsoft/generator-bot-people', displayName: 'People' },
   { generatorName: '@microsoft/generator-bot-calendar', displayName: 'Calendar' },
   { generatorName: QnABotTemplateId, displayName: 'QnAMaker bot' },
 ];
 
-export const sortTemplates = (templates: BotTemplate[]): BotTemplate[] => {
+export const sortTemplates = async (templates: BotTemplate[]): Promise<BotTemplate[]> => {
   let sortedTemplateList: BotTemplate[] = [];
+  let sortOrder = defaultSortOrder;
+  try {
+    const templateSortOrder = await AssetService.manager.getRawGithubFileContent(
+      'microsoft',
+      'BotFramework-Composer',
+      'main',
+      'templates.json'
+    );
+    const templateSortOrderObj = JSON.parse(templateSortOrder);
+    sortOrder = templateSortOrderObj && templateSortOrderObj?.length > 0 ? templateSortOrderObj : defaultSortOrder;
+  } catch (err) {
+    logger(JSON.stringify(err, Object.getOwnPropertyNames(err)));
+  }
 
-  // Sort incoming template array and reassign display name based on sort list
-  templateSortOrder.forEach((tempSortEntry, index) => {
+  sortOrder.forEach((tempSortEntry) => {
     const templateIndex = templates.findIndex((template) => {
       return template.id === tempSortEntry.generatorName;
     });

diff --git a/templates.json b/templates.json
@@ -0,0 +1,9 @@
+[
+  { "generatorName": "@microsoft/generator-bot-empty", "displayName": "Blank bot" },
+  { "generatorName": "@microsoft/generator-bot-conversational-core", "displayName": "Basic conversational bot" },
+  { "generatorName": "@microsoft/generator-bot-assistant-core", "displayName": "Basic assistant" },
+  { "generatorName": "@microsoft/generator-bot-enterprise-assistant", "displayName": "Enterprise assistant" },
+  { "generatorName": "@microsoft/generator-bot-people", "displayName": "People" },
+  { "generatorName": "@microsoft/generator-bot-calendar", "displayName": "Calendar" },
+  { "generatorName": "QnASample", "displayName": "QnAMaker bot" }
+]