chore: update lu/lg all up view

Composer/cypress/integration/LGPage.spec.ts

@@ -29,6 +29,8 @@ context('LG Page', () => {
     cy.get('@switchButton').click();
 
     // nav to Main dialog
-    cy.get('.dialogNavTree a[title="__TestTodoSample.Main"]').click();
+    cy.findByTestId('LGEditor').within(() => {
+      cy.findByText('__TestTodoSample.Main').click();
+    });
   });
 });

Composer/cypress/integration/LUPage.spec.ts

@@ -25,7 +25,9 @@ context('LU Page', () => {
       .should('exist');
 
     // nav to ToDoBotWithLuisSample.main dialog
-    cy.get('[name="__TestToDoBotWithLuisSample.Main"]').click({ multiple: true });
+    cy.findByTestId('LUEditor').within(() => {
+      cy.findByText('__TestToDoBotWithLuisSample.Main').click();
+    });
 
     // goto edit-mode
     cy.get('@switchButton').click();
@@ -34,7 +36,9 @@ context('LU Page', () => {
       .should('exist');
 
     // back to all table view
-    cy.get('[name="All"]').click();
+    cy.findByTestId('LUEditor').within(() => {
+      cy.findByText('All').click();
+    });
     cy.findByTestId('LUEditor')
       .findByTestId('table-view')
       .should('exist');

Composer/cypress/integration/NotificationPage.spec.ts

@@ -30,7 +30,9 @@ context('Notification Page', () => {
   it('can show lu syntax error ', () => {
     cy.visitPage('User Input');
 
-    cy.get('[name="__TestToDoBotWithLuisSample.Main"]').click({ multiple: true });
+    cy.findByTestId('LUEditor').within(() => {
+      cy.findByText('__TestToDoBotWithLuisSample.Main').click();
+    });
 
     cy.get('.toggleEditMode button').click();
     cy.get('textarea').type('test lu syntax error');

Composer/packages/client/src/components/NavLinks/index.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
+
+import { dialogItem } from '../../pages/language-understanding/styles';
+
+interface NavLinksProps {
+  navLinks: any[];
+  fileId: string;
+  onSelect: (dialogId: string) => void;
+}
+
+export const NavLinks: React.FC<NavLinksProps> = props => {
+  const { navLinks, fileId, onSelect } = props;
+
+  return (
+    <Fragment>
+      {navLinks.map(dialog => {
+        return (
+          <div
+            css={dialogItem(fileId === dialog.id)}
+            key={dialog.id}
+            onClick={() => {
+              onSelect(dialog.id);
+            }}
+          >
+            {dialog.name}
+          </div>
+        );
+      })}
+    </Fragment>
+  );
+};

Composer/packages/client/src/pages/design/styles.js

@@ -23,6 +23,7 @@ export const projectContainer = css`
   flex-grow: 0;
   flex-shrink: 0;
   width: 255px;
+  border-right: 1px solid #c4c4c4;
 `;
 
 //remove TODO

Composer/packages/client/src/pages/language-generation/index.tsx

@@ -6,7 +6,6 @@ import { jsx } from '@emotion/core';
 import React, { useContext, Fragment, useMemo, useCallback, Suspense } from 'react';
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Nav, INavLinkGroup, INavLink } from 'office-ui-fabric-react/lib/Nav';
 import { RouteComponentProps, Router } from '@reach/router';
 
 import { LoadingSpinner } from '../../components/LoadingSpinner';
@@ -18,14 +17,13 @@ import {
   actionButton,
   contentEditor,
 } from '../language-understanding/styles';
-import { projectContainer, projectTree, projectWrapper } from '../design/styles';
+import { projectContainer } from '../design/styles';
 import { navigateTo } from '../../utils';
+import { NavLinks } from '../../components/NavLinks';
 
-import { Tree } from './../../components/Tree';
 import TableView from './table-view';
 import { ToolBar } from './../../components/ToolBar/index';
 import { TestController } from './../../TestController';
-
 const CodeEditor = React.lazy(() => import('./code-editor'));
 
 interface LGPageProps extends RouteComponentProps<{}> {
@@ -35,47 +33,28 @@ interface LGPageProps extends RouteComponentProps<{}> {
 const LGPage: React.FC<LGPageProps> = props => {
   const { state } = useContext(StoreContext);
   const { lgFiles, dialogs } = state;
+
   const path = props.location?.pathname ?? '';
   const { fileId = 'common' } = props;
-  const edit = /edit(\/)*$/.test(path);
+  const edit = /\/edit(\/)?$/.test(path);
   const file = lgFiles.find(({ id }) => id === 'common');
+  const navLinks = useMemo(() => {
+    const newDialogLinks = dialogs.map(dialog => {
+      return { id: dialog.id, url: dialog.id, key: dialog.id, name: dialog.displayName };
+    });
+    const mainDialogIndex = newDialogLinks.findIndex(link => link.id === 'Main');
 
-  const navLinks = useMemo<INavLinkGroup[]>(() => {
-    const subLinks = dialogs.reduce<INavLink>((result, file) => {
-      const item = {
-        id: file.id,
-        key: file.id,
-        name: file.displayName,
-        url: file.id,
-      };
-
-      if (file.isRoot) {
-        result = {
-          ...result,
-          ...item,
-          isExpanded: true,
-        };
-      } else {
-        result.links = result.links || [];
-        result.links.push(item);
-      }
-      return result;
-    }, {} as INavLink);
-
-    return [
-      {
-        links: [
-          {
-            id: 'common',
-            key: 'common',
-            name: 'All',
-            url: '',
-            isExpanded: true,
-            links: [subLinks],
-          },
-        ],
-      },
-    ];
+    if (mainDialogIndex > -1) {
+      const mainDialog = newDialogLinks.splice(mainDialogIndex, 1)[0];
+      newDialogLinks.splice(0, 0, mainDialog);
+    }
+    newDialogLinks.splice(0, 0, {
+      id: 'common',
+      key: 'common',
+      name: 'All',
+      url: '',
+    });
+    return newDialogLinks;
   }, [dialogs]);
 
   const onSelect = useCallback(
@@ -123,35 +102,7 @@ const LGPage: React.FC<LGPageProps> = props => {
       </div>
       <div css={ContentStyle} data-testid="LGEditor">
         <div css={projectContainer}>
-          <Tree variant="large" css={projectTree}>
-            <div css={projectWrapper}>
-              <Nav
-                onLinkClick={(ev, item) => {
-                  if (ev && item) {
-                    onSelect(item.id);
-                    ev.preventDefault();
-                  }
-                }}
-                styles={{
-                  root: {
-                    /* override dulplicate selected mark bellow All*/
-                    selectors: {
-                      'ul>li>ul button.ms-Nav-chevronButton:after': {
-                        borderLeft: 'none',
-                      },
-                    },
-                  },
-                  chevronButton: {
-                    backgroundColor: 'transparent',
-                  },
-                }}
-                selectedKey={fileId}
-                groups={navLinks}
-                className={'dialogNavTree'}
-                data-testid={'dialogNavTree'}
-              />
-            </div>
-          </Tree>
+          <NavLinks navLinks={navLinks} onSelect={onSelect} fileId={fileId} />
         </div>
         {file && (
           <div css={contentEditor}>

Composer/packages/client/src/pages/language-understanding/index.tsx

@@ -5,19 +5,17 @@ import { jsx } from '@emotion/core';
 import React, { useContext, Fragment, useEffect, useState, useMemo, Suspense } from 'react';
 import formatMessage from 'format-message';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Nav, INavLinkGroup, INavLink } from 'office-ui-fabric-react/lib/Nav';
 
 import { StoreContext } from '../../store';
-import { projectContainer, projectTree, projectWrapper } from '../design/styles';
+import { projectContainer } from '../design/styles';
 import { navigateTo } from '../../utils';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { Tree } from '../../components/Tree';
 import { ToolBar } from '../../components/ToolBar/index';
 import { TestController } from '../../TestController';
+import { NavLinks } from '../../components/NavLinks';
 
 import TableView from './table-view';
-import { ContentHeaderStyle, ContentStyle, flexContent, actionButton, contentEditor } from './styles';
-
+import { ContentHeaderStyle, ContentStyle, flexContent, actionButton, contentEditor, dialogItem } from './styles';
 const CodeEditor = React.lazy(() => import('./code-editor'));
 
 interface DefineConversationProps {
@@ -29,57 +27,23 @@ const LUPage: React.FC<DefineConversationProps> = props => {
   const { luFiles, dialogs } = state;
   const [editMode, setEditMode] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
-
-  const subPath = props['*'];
-  const isRoot = subPath === '';
-  const activeDialog = dialogs.find(item => item.id === subPath);
+  const fileId = props['*'];
+  const isRoot = fileId === '';
+  const activeDialog = dialogs.find(item => item.id === fileId);
 
   const luFile = luFiles.length && activeDialog ? luFiles.find(luFile => luFile.id === activeDialog.id) : null;
 
-  const navLinks: INavLinkGroup[] = useMemo(() => {
-    const subLinks = dialogs.reduce((result: INavLink[], file) => {
-      if (result.length === 0) {
-        result = [
-          {
-            links: [],
-            name: '',
-            url: '',
-          },
-        ];
-      }
-      const item = {
-        id: file.id,
-        url: file.id,
-        key: file.id,
-        name: file.displayName,
-      };
-
-      if (file.isRoot) {
-        result[0] = {
-          ...result[0],
-          ...item,
-          isExpanded: true,
-        };
-      } else {
-        result[0].links && result[0].links.push(item);
-      }
-      return result;
-    }, []);
-
-    return [
-      {
-        links: [
-          {
-            id: '_all',
-            key: '_all',
-            name: 'All',
-            url: '_all',
-            isExpanded: true,
-            links: subLinks,
-          },
-        ],
-      },
-    ];
+  const navLinks = useMemo(() => {
+    const newDialogLinks = dialogs.map(dialog => {
+      return { id: dialog.id, url: dialog.id, key: dialog.id, name: dialog.displayName };
+    });
+    const mainDialogIndex = newDialogLinks.findIndex(link => link.id === 'Main');
+
+    if (mainDialogIndex > -1) {
+      const mainDialog = newDialogLinks.splice(mainDialogIndex, 1)[0];
+      newDialogLinks.splice(0, 0, mainDialog);
+    }
+    return newDialogLinks;
   }, [dialogs]);
 
   useEffect(() => {
@@ -92,7 +56,7 @@ const LUPage: React.FC<DefineConversationProps> = props => {
     if (!isRoot && !activeDialog && dialogs.length) {
       navigateTo('/language-understanding');
     }
-  }, [subPath, dialogs]);
+  }, [fileId, dialogs]);
 
   useEffect(() => {
     setErrorMsg('');
@@ -154,33 +118,16 @@ const LUPage: React.FC<DefineConversationProps> = props => {
       </div>
       <div css={ContentStyle} data-testid="LUEditor">
         <div css={projectContainer}>
-          <Tree variant="large" css={projectTree}>
-            <div css={projectWrapper}>
-              <Nav
-                onLinkClick={(ev, item) => {
-                  item && onSelect(item.id);
-                  ev && ev.preventDefault();
-                }}
-                styles={{
-                  root: {
-                    /* override dulplicate selected mark bellow All*/
-                    selectors: {
-                      'ul>li>ul button.ms-Nav-chevronButton:after': {
-                        borderLeft: 'none',
-                      },
-                    },
-                  },
-                  chevronButton: {
-                    backgroundColor: 'transparent',
-                  },
-                }}
-                selectedKey={isRoot ? '_all' : subPath}
-                groups={navLinks}
-                className={'dialogNavTree'}
-                data-testid={'dialogNavTree'}
-              />
-            </div>
-          </Tree>
+          <div
+            css={dialogItem(!activeDialog)}
+            key={'_all'}
+            onClick={() => {
+              onSelect('_all');
+            }}
+          >
+            {'All'}
+          </div>
+          <NavLinks navLinks={navLinks} onSelect={onSelect} fileId={fileId} />
         </div>
         <div css={contentEditor}>
           {editMode ? (

Composer/packages/client/src/pages/language-understanding/styles.js

@@ -3,7 +3,7 @@
 
 import { css } from '@emotion/core';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
-
+import { NeutralColors } from '@uifabric/fluent-theme';
 export const actionButton = css`
   font-size: 16px;
   margin: 0;
@@ -125,3 +125,15 @@ export const consoleStyle = css`
   padding: 15px;
   margin-bottom: 20px;
 `;
+
+export const dialogItem = selected => css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: ${selected ? NeutralColors.gray20 : NeutralColors.white};
+  font-weight: ${selected ? FontWeights.semibold : FontWeights.semilight};
+  height: 32px;
+  font-size: ${FontSizes.small};
+  padding-left: 18px;
+  cursor: pointer;
+`;