Merge branch 'benbrown/telem' of https://github.com/microsoft/BotFram…

…ework-Composer into benbrown/telem

Composer/packages/client/src/components/CreationFlow/v2/DefineConversation.tsx

@@ -337,9 +337,7 @@ const DefineConversationV2: React.FC<DefineConversationProps> = (props) => {
     );
   }, [focusedStorageFolder]);
   const dialogCopy = isImported ? DialogCreationCopy.IMPORT_BOT_PROJECT : DialogCreationCopy.DEFINE_BOT_PROJECT;
-
   return (
-    // TODO remove runtime language drop down prior to merging as that data is indicated by the tab chosen
     <Fragment>
       <DialogWrapper isOpen {...dialogCopy} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
         <form onSubmit={handleSubmit}>
@@ -359,7 +357,6 @@ const DefineConversationV2: React.FC<DefineConversationProps> = (props) => {
             </StackItem>
             <StackItem grow={0} styles={halfstack}>
               <TextField
-                multiline
                 label={formatMessage('Description')}
                 resizable={false}
                 styles={description}
@@ -368,7 +365,7 @@ const DefineConversationV2: React.FC<DefineConversationProps> = (props) => {
               />
             </StackItem>
           </Stack>
-          {!isImported ?? (
+          {!isImported && (
             <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
               <StackItem grow={0} styles={halfstack}>
                 <Dropdown

Composer/packages/client/src/pages/home/Home.tsx

@@ -68,11 +68,11 @@ const resources = [
 ];
 
 const Home: React.FC<RouteComponentProps> = () => {
-  const projectId = useRecoilValue(currentProjectIdState);
-  const botName = useRecoilValue(botDisplayNameState(projectId));
+  const projectId = useRecoilValue<string>(currentProjectIdState);
+  const botName = useRecoilValue<string>(botDisplayNameState(projectId));
   const recentProjects = useRecoilValue(recentProjectsState);
   const feed = useRecoilValue(feedState);
-  const templateId = useRecoilValue(templateIdState);
+  const templateId = useRecoilValue<string>(templateIdState);
   const { openProject, setCreationFlowStatus, setCreationFlowType, setWarnAboutDotNet } = useRecoilValue(
     dispatcherState
   );
@@ -208,7 +208,7 @@ const Home: React.FC<RouteComponentProps> = () => {
           </div>
           <div css={home.videosContainer}>
             <div css={home.rowContainer}>
-              <Pivot aria-label="Videos and articles" linkSize={PivotLinkSize.large}>
+              <Pivot aria-label="Videos and articles" css={home.pivotContainer} linkSize={PivotLinkSize.large}>
                 {feed.tabs.map((tab, index) => (
                   <PivotItem key={index} headerText={tab.title}>
                     {tab.viewAllLinkText && (

Composer/packages/client/src/pages/home/RecentBotList.tsx

@@ -38,10 +38,6 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       maxWidth: 200,
       isRowHeader: true,
       isResizable: true,
-      isSorted: true,
-      isSortedDescending: false,
-      sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
-      sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
       onRender: (item) => {
         return (
@@ -131,7 +127,7 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
         onRenderDetailsHeader={onRenderDetailsHeader}
       />
     );
-  }, []);
+  }, [recentProjects]);
 
   return (
     <div css={home.detailListContainer} data-is-scrollable="true">

Composer/packages/client/src/pages/home/styles.ts

@@ -27,21 +27,21 @@ export const page = css`
 
 export const leftPage = css`
   flex: 50%;
-  padding: 0 25px 25px 25px;
+  padding: 0 24px 24px 24px;
   display: flex;
   flex-direction: column;
 `;
 
 export const rightPage = css`
   flex: 1;
-  padding-right: 25px;
+  padding-right: 24px;
   display: flex;
   flex-direction: column;
 `;
 
 export const title = css`
   display: block;
-  padding: 25px 25px 0px 25px;
+  padding: 24px 24px 0px 24px;
   font-size: ${FontSizes.xxLarge};
   line-height: 36px;
   font-weight: ${FontWeights.semibold};
@@ -77,6 +77,15 @@ export const videosContainer = css`
   margin-top: 40px;
 `;
 
+export const pivotContainer = css`
+  button:first-of-type {
+    padding-left: 0;
+    :before {
+      left: 0;
+    }
+  }
+`;
+
 export const tabRowContainer = css`
   flex-wrap: wrap;
   display: flex;
@@ -176,6 +185,9 @@ export const cardItem = {
   container: css`
     font-size: ${fonts.medium.fontSize};
     margin: 12px 0 0 12px;
+    &:first-child {
+      margin-left: 0;
+    }
     padding: 12px;
     min-width: ${ImageCoverWidth}px;
     width: 17vw;
@@ -293,6 +305,9 @@ export const detailListContainer = css`
   .ms-DetailsHeader-cellName {
     font-weight: 400;
   }
+  .ms-DetailsHeader-cell:hover {
+    background: none;
+  }
 `;
 
 export const detailListScrollWrapper = css`
@@ -305,9 +320,9 @@ export const detailListScrollWrapper = css`
 export const whatsNewsContainer = css`
   position: relative;
   flex: 1;
-  padding: 20px 25px 25px 25px;
+  padding: 20px 24px 24px 24px;
   border-radius: 5px;
-  margin: 20px 0 25px 0;
+  margin: 20px 0 24px 0;
   background: #f6f6f6;
   @media (max-width: 1416px) {
     background: none;

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

@@ -350,10 +350,11 @@ export const loadProjectData = async (data) => {
 
 export const fetchProjectDataByPath = async (
   path: string,
-  storageId
+  storageId,
+  isRootBot: boolean
 ): Promise<{ botFiles: any; projectData: any; error: any }> => {
   try {
-    const response = await httpClient.put(`/projects/open`, { path, storageId });
+    const response = await httpClient.put(`/projects/open`, { path, storageId, isRootBot });
     const projectData = await loadProjectData(response.data);
     return projectData;
   } catch (ex) {
@@ -580,7 +581,7 @@ export const openRemoteSkill = async (
 
 export const openLocalSkill = async (callbackHelpers, pathToBot: string, storageId, botNameIdentifier: string) => {
   const { set } = callbackHelpers;
-  const { projectData, botFiles, error } = await fetchProjectDataByPath(pathToBot, storageId);
+  const { projectData, botFiles, error } = await fetchProjectDataByPath(pathToBot, storageId, false);
 
   if (error) {
     throw error;
@@ -801,7 +802,7 @@ export const postRootBotCreation = async (
 };
 
 export const openRootBotAndSkillsByPath = async (callbackHelpers: CallbackInterface, path: string, storageId) => {
-  const data = await fetchProjectDataByPath(path, storageId);
+  const data = await fetchProjectDataByPath(path, storageId, true);
   if (data.error) {
     throw data.error;
   }

Composer/packages/server/src/controllers/__tests__/project.test.ts

@@ -106,7 +106,7 @@ describe('get bot project', () => {
     const mockReq = {
       params: {},
       query: {},
-      body: { storageId: 'default', path: Path.resolve(__dirname, '../../__mocks__/samplebots/bot1') },
+      body: { storageId: 'default', path: Path.resolve(__dirname, '../../__mocks__/samplebots/bot1'), isRootBot: true },
     } as Request;
     await ProjectController.openProject(mockReq, mockRes);
     expect(mockRes.status).toHaveBeenCalledWith(200);
@@ -143,7 +143,7 @@ describe('open bot operation', () => {
     const mockReq = {
       params: {},
       query: {},
-      body: { storageId: 'default', path: Path.resolve(__dirname, '../../__mocks__/samplebots/bot1') },
+      body: { storageId: 'default', path: Path.resolve(__dirname, '../../__mocks__/samplebots/bot1'), isRootBot: true },
     } as Request;
     await ProjectController.openProject(mockReq, mockRes);
     expect(mockRes.status).toHaveBeenCalledWith(200);

Composer/packages/server/src/controllers/project.ts

@@ -49,7 +49,7 @@ async function createProject(req: Request, res: Response) {
     await BotProjectService.cleanProject(locationRef);
     const newProjRef = await getNewProjRef(templateDir, templateId, locationRef, user, locale);
 
-    const id = await BotProjectService.openProject(newProjRef, user);
+    const id = await BotProjectService.openProject(newProjRef, user, true);
     // in the case of a remote template, we need to update the eTag and alias used by the import mechanism
     BotProjectService.setProjectLocationData(id, { alias, eTag });
     const currentProject = await BotProjectService.getProjectById(id, user);
@@ -207,7 +207,7 @@ async function openProject(req: Request, res: Response) {
   };
 
   try {
-    const id = await BotProjectService.openProject(location, user);
+    const id = await BotProjectService.openProject(location, user, req.body.isRootBot);
     const currentProject = await BotProjectService.getProjectById(id, user);
     if (currentProject !== undefined) {
       await currentProject.init();