Align the shell UI to design (microsoft#750)

Composer/cypress/integration/Breadcrumb.spec.js

@@ -9,7 +9,7 @@ context('breadcrumb', () => {
   it('can show dialog name in breadcrumb', () => {
     cy.getByTestId('Breadcrumb')
       .invoke('text')
-      .should('equal', 'ToDoBot');
+      .should('equal', 'ToDoBot.Main');
 
     cy.get('[data-testid="ProjectTree"]').within(() => {
       cy.getByText('AddToDo').click();
@@ -20,7 +20,7 @@ context('breadcrumb', () => {
       .should('equal', 'AddToDo');
 
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('ToDoBot').click();
+      cy.getByText('ToDoBot.Main').click();
     });
 
     cy.withinEditor('VisualEditor', () => {

Composer/cypress/integration/CreateNewBot.spec.js

@@ -13,7 +13,7 @@ context('Creating a new bot', () => {
     cy.get('input[data-testid="NewDialogName"]').type('__TestNewProject');
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('__TestNewProject').should('exist');
+      cy.getByText('__TestNewProject.Main').should('exist');
     });
   });
 
@@ -25,7 +25,7 @@ context('Creating a new bot', () => {
     cy.get('input[data-testid="NewDialogName"]').type('__TestNewProject');
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('__TestNewProject').should('exist');
+      cy.getByText('__TestNewProject.Main').should('exist');
       cy.getByText('AddToDo').should('exist');
       cy.getByText('ClearToDos').should('exist');
       cy.getByText('DeleteToDo').should('exist');

Composer/cypress/integration/LGPage.spec.js

@@ -9,7 +9,7 @@ context('check language generation page', () => {
   it('can open language generation page', () => {
     cy.get('[data-testid="LeftNav-CommandBarButtonBot Says"]').click();
     // left nav tree
-    cy.contains('ToDoBot');
+    cy.contains('ToDoBot.Main');
     cy.contains('All');
 
     cy.get('.toggleEditMode button').as('switchButton');
@@ -24,7 +24,7 @@ context('check language generation page', () => {
     cy.get('@switchButton').click();
 
     // nav to Main dialog
-    cy.get('.dialogNavTree button[title="ToDoBot"]').click();
+    cy.get('.dialogNavTree button[title="ToDoBot.Main"]').click();
     cy.wait(300);
 
     // dialog filter, edit mode button is disabled.

Composer/cypress/integration/LUPage.spec.js

@@ -10,7 +10,7 @@ context('check language understanding page', () => {
     cy.get('[data-testid="LeftNav-CommandBarButtonUser Says"]').click();
 
     // left nav tree
-    cy.contains('ToDoLuisBot');
+    cy.contains('ToDoLuisBot.Main');
     cy.contains('All');
 
     cy.get('.toggleEditMode button').as('switchButton');
@@ -22,7 +22,7 @@ context('check language understanding page', () => {
     cy.get('[data-testid="LUEditor"] [data-testid="table-view"]').should('exist');
 
     // nav to ToDoLuisBot.main dialog
-    cy.get('.dialogNavTree button[title="ToDoLuisBot"]').click({ multiple: true });
+    cy.get('.dialogNavTree button[title="ToDoLuisBot.Main"]').click({ multiple: true });
     cy.wait(300);
 
     // goto edit-mode

Composer/cypress/integration/LuisDeploy.spec.js

@@ -13,7 +13,7 @@ context('Luis Deploy', () => {
   it('can deploy luis success', () => {
     cy.get('[data-testid="LeftNav-CommandBarButtonUser Says"]').click();
     cy.get('[data-testid="LUEditor"]').within(() => {
-      cy.getAllByText('ToDoLuisBot').should('exist');
+      cy.getAllByText('ToDoLuisBot.Main').should('exist');
     });
 
     cy.route('POST', '/api/projects/opened/luFiles/publish', 'fixture:luPublish/success').as('publish');

Composer/cypress/integration/NewDialog.spec.js

@@ -17,7 +17,7 @@ context('Creating a new Dialog', () => {
   });
 
   it('can create a new dialog from project tree', () => {
-    cy.getByText('Add ..').click();
+    cy.getByText('New Dialog ..').click();
     cy.get('input[data-testid="NewDialogName"]').type('__TestNewDialog2');
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
     cy.get('[data-testid="ProjectTree"]').within(() => {

Composer/cypress/integration/SaveAs.spec.js

@@ -14,7 +14,7 @@ context('Saving As', () => {
     cy.get('input[data-testid="NewDialogName"]').type('{enter}');
 
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.getByText('__TestSaveAs').should('exist');
+      cy.getByText('__TestSaveAs.Main').should('exist');
       cy.getByText('ShowItems').should('exist');
     });
   });

Composer/cypress/integration/ToDoBot.spec.js

@@ -11,13 +11,13 @@ context('ToDo Bot', () => {
       cy.getByText('Events (8)').should('exist');
     });
     cy.withinEditor('FormEditor', () => {
-      cy.getByText('ToDoBot').should('exist');
+      cy.getByText('ToDoBot.Main').should('exist');
     });
   });
 
   it('can open the AddToDo dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.get('[title="AddToDo"]').click();
+      cy.getByText('AddToDo').click();
     });
     cy.withinEditor('FormEditor', () => {
       cy.getByText('AddToDo').should('exist');
@@ -33,7 +33,7 @@ context('ToDo Bot', () => {
 
   it('can open the ClearToDos dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.get('[title="ClearToDos"]').click();
+      cy.getByText('ClearToDos').click();
     });
     cy.withinEditor('FormEditor', () => {
       cy.getByText('ClearToDos').should('exist');
@@ -49,7 +49,7 @@ context('ToDo Bot', () => {
 
   it('can open the DeleteToDo dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.get('[title="DeleteToDo"]').click();
+      cy.getByText('DeleteToDo').click();
     });
     cy.withinEditor('FormEditor', () => {
       cy.getByText('DeleteToDo').should('exist');
@@ -65,7 +65,7 @@ context('ToDo Bot', () => {
 
   it('can open the ShowToDos dialog', () => {
     cy.get('[data-testid="ProjectTree"]').within(() => {
-      cy.get('[title="ShowToDos"]').click();
+      cy.getByText('ShowToDos').click();
     });
     cy.withinEditor('FormEditor', () => {
       cy.getByText('ShowToDos').should('exist');

Composer/packages/client/__tests__/components/projecttree.test.js

@@ -6,16 +6,16 @@ import { ProjectTree } from '../../src/components/ProjectTree/index.js';
 
 describe('<ProjectTree/>', () => {
   it('should render the projecttree', async () => {
-    const { findByText } = render(<ProjectTree files={dialogs} />);
+    const { findByText } = render(<ProjectTree dialogs={dialogs} />);
 
     await findByText('ToDoBot');
   });
 
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
-    const { findByTitle } = render(<ProjectTree files={dialogs} onSelect={mockFileSelect} />);
+    const { findByText } = render(<ProjectTree dialogs={dialogs} onSelect={mockFileSelect} />);
 
-    const node = await findByTitle('AddToDo');
+    const node = await findByText('AddToDo');
     fireEvent.click(node);
     expect(mockFileSelect).toHaveBeenCalledTimes(1);
   });

Composer/packages/client/__tests__/routers.test.js

@@ -6,7 +6,7 @@ import { StoreProvider } from '../src/store';
 
 import { App } from './../src/App';
 
-function renderWithRouter(ui, { route = '/dialogs/Main', history = createHistory(createMemorySource(route)) } = {}) {
+function renderWithRouter(ui, { route = '/dialogs/home', history = createHistory(createMemorySource(route)) } = {}) {
   return {
     ...render(<LocationProvider history={history}>{ui}</LocationProvider>),
     history,
@@ -27,9 +27,9 @@ describe('<Router/> router test', () => {
     } = renderWithRouter(<AppTest />);
 
     const appContainer = container;
-    expect(appContainer.innerHTML).toMatch('Dialogs');
+    expect(appContainer.innerHTML).toMatch('Bot Framework Composer');
 
-    await navigate('/setting');
+    await navigate('/language-understanding');
     expect(appContainer.innerHTML).toMatch('Setting');
   });
 

Composer/packages/client/src/components/Header/styles.js

@@ -1,17 +1,17 @@
 import { css } from '@emotion/core';
-import { SharedColors } from '@uifabric/fluent-theme';
+import { NeutralColors } from '@uifabric/fluent-theme';
 import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
 
 export const headerContainer = css`
   position: relative;
-  background: ${SharedColors.cyanBlue10};
+  background: ${NeutralColors.black};
   height: 50px;
   line-height: 50px;
 `;
 
 export const title = css`
   position: relative;
-  margin-left: 50px;
+  margin-left: 56px;
   font-weight: ${FontWeights.semibold};
   font-size: 16px;
   color: #fff;
@@ -23,7 +23,7 @@ export const title = css`
     bottom: 0px;
     width: 0px;
     height: 24px;
-    border-right: 1px solid #005292;
+    border: 1px solid #979797;
     border-image: initial;
     outline: none;
   }

Composer/packages/client/src/components/NavItem/index.js

@@ -6,7 +6,7 @@ import { CommandBarButton, FocusZone } from 'office-ui-fabric-react';
 import { link, outer, commandBarButton } from './styles';
 
 export const NavItem = props => {
-  const { to, exact, labelHide, iconName, labelName, targetUrl, underTest } = props;
+  const { to, exact, iconName, labelName, targetUrl, underTest } = props;
   const [active, setActive] = useState(false);
 
   const isPartial = (targetUrl, currentUrl) => {
@@ -34,7 +34,7 @@ export const NavItem = props => {
               iconName,
             }}
             text={labelName}
-            styles={commandBarButton(!labelHide)}
+            styles={commandBarButton(active)}
             disabled={underTest}
             ariaHidden
           />

Composer/packages/client/src/components/NavItem/styles.js

@@ -19,7 +19,7 @@ export const link = (active, underTest) => css`
     }
 
     &:hover {
-      background-color: ${NeutralColors.gray30};
+      background-color: ${active ? NeutralColors.gray40 : NeutralColors.gray30};
     }
 
     &:focus {
@@ -36,9 +36,6 @@ export const link = (active, underTest) => css`
 
     ${active &&
       `background-color: ${NeutralColors.gray40};
-      &:hover {
-        background-color: ${NeutralColors.gray50} !important;
-      }
 
       &::after {
         border-left: 3px solid ${CommunicationColors.primary};
@@ -52,9 +49,9 @@ export const outer = css`
   background-color: transparent;
 `;
 
-export const commandBarButton = () => ({
+export const commandBarButton = active => ({
   root: {
-    color: '#000000',
+    color: active ? '#000' : '#4f4f4f',
     height: '36px',
     width: '220px',
     fontSize: `${FontSizes.size14}`,
@@ -64,7 +61,7 @@ export const commandBarButton = () => ({
     backgroundColor: 'transparent',
   },
   icon: {
-    color: '#000000',
+    color: active ? '#000' : '#4f4f4f',
     padding: '0 13px',
     marginLeft: '0px',
     boxSizing: 'border-box',

Composer/packages/client/src/components/ProjectTree/index.js

@@ -1,61 +1,43 @@
 import React, { useMemo } from 'react';
 import { PropTypes } from 'prop-types';
-import { Nav, Link } from 'office-ui-fabric-react';
+import { ActionButton } from 'office-ui-fabric-react';
 import formatMessage from 'format-message';
+import { cloneDeep, find, filter } from 'lodash';
 
-import { nav, addButton } from './styles';
+import { addButton, root } from './styles';
 import { TreeItem } from './treeItem';
 
-const onRenderLink = (link, render) => {
-  return <TreeItem link={link} render={render} />;
-};
-
 export const ProjectTree = props => {
-  const { files, onSelect, activeNode, onAdd, onDelete } = props;
+  const { dialogs, onAdd, activeNode, onSelect, onDelete } = props;
 
   const links = useMemo(() => {
-    const links = files.reduce((result, file) => {
-      if (result.length === 0) {
-        result = [{ links: [] }];
-      }
-      const item = { key: file.id, ...file, forceAnchor: true, onDelete: onDelete };
-
-      item.name = file.displayName;
-
-      if (file.isRoot) {
-        result[0] = { ...result[0], ...item, isExpanded: true, hiddenMore: true };
-      } else {
-        result[0].links.push(item);
-      }
-      return result;
-    }, []);
-    return links;
-  }, [files]);
+    if (dialogs.length === 0) return [];
+    let links = cloneDeep(dialogs);
+    const root = find(dialogs, dialog => dialog.isRoot);
+    links = filter(dialogs, dialog => !dialog.isRoot);
+    return [root, ...links];
+  }, [dialogs]);
 
   return (
-    <div>
-      <Nav
-        onLinkClick={(ev, item) => {
-          onSelect(item.id || files[0].id);
-          ev.preventDefault();
-        }}
-        onLinkExpandClick={(ev, item) => {
-          onSelect(item.id || files[0].id);
-        }}
-        groups={[{ links: links }]}
-        selectedKey={activeNode}
-        styles={nav}
-        onRenderLink={onRenderLink}
-      />
-      <Link css={addButton} onClick={onAdd}>
-        {formatMessage('Add ..')}
-      </Link>
+    <div css={root} data-testid="ProjectTree">
+      <ul>
+        {links.map(link => {
+          return (
+            <li key={link.id}>
+              <TreeItem link={link} activeNode={activeNode} onSelect={onSelect} onDelete={onDelete} />
+            </li>
+          );
+        })}
+      </ul>
+      <ActionButton iconProps={{ iconName: 'CircleAddition' }} css={addButton} onClick={onAdd}>
+        {formatMessage('New Dialog ..')}
+      </ActionButton>
     </div>
   );
 };
 
 ProjectTree.propTypes = {
-  files: PropTypes.array,
+  dialogs: PropTypes.array,
   activeNode: PropTypes.string,
   onSelect: PropTypes.func,
   onAdd: PropTypes.func,