a11y: remove extra Link stuff from settings Nav

Composer/packages/client/src/pages/setting/index.tsx

@@ -3,10 +3,10 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Fragment, useContext, useState } from 'react';
+import { Fragment, useContext } from 'react';
 import formatMessage from 'format-message';
-import { Nav } from 'office-ui-fabric-react/lib/Nav';
-import { Link, RouteComponentProps } from '@reach/router';
+import { Nav, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav';
+import { RouteComponentProps } from '@reach/router';
 
 import { StoreContext } from '../../store';
 import { ToolBar } from '../../components/ToolBar';
@@ -18,7 +18,7 @@ import { MainContent } from '../../components/MainContent/index';
 import { TestController } from '../../TestController';
 
 import Routes from './router';
-import { title, fileList, contentEditor, linkItem } from './styles';
+import { title, fileList, contentEditor } from './styles';
 
 const settingLabels = {
   title: formatMessage('Configuration'),
@@ -41,30 +41,11 @@ const links = [
 ];
 
 const SettingPage: React.FC<RouteComponentProps> = () => {
-  const [active, setActive] = useState();
   const { state } = useContext(StoreContext);
   const { projectId } = state;
   const makeProjectLink = (id, path) => {
     return `/bot/${id}${path}`;
   };
-  function onRenderLink(link) {
-    return (
-      <Link
-        to={link.key}
-        css={linkItem(link.disabled)}
-        tabIndex={-1}
-        getProps={linkProps => {
-          if (linkProps.isCurrent && active !== link.key) {
-            setActive(link.key);
-          }
-          return {};
-        }}
-        onClick={() => {}}
-      >
-        {link.name}
-      </Link>
-    );
-  }
 
   const toolbarItems = [
     {
@@ -74,26 +55,29 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
     },
   ];
 
+  const _onRenderGroupHeader = (group: INavLinkGroup | undefined) => {
+    return <div css={title}>{group?.name}</div>;
+  };
+
   return (
     <Fragment>
       <ToolBar toolbarItems={toolbarItems} />
       <MainContent>
         <Fragment>
           <div css={fileList}>
             <Tree variant="large">
-              <div>
-                <div css={title}>{settingLabels.title}</div>
-                <Nav
-                  groups={[{ links }]}
-                  onRenderLink={onRenderLink}
-                  selectedKey={active}
-                  onLinkClick={(e, item) => {
-                    if (item && item.key) {
-                      navigateTo(makeProjectLink(projectId, item.key));
-                    }
-                  }}
-                />
-              </div>
+              <Nav
+                onRenderGroupHeader={_onRenderGroupHeader}
+                groups={[
+                  {
+                    name: settingLabels.title,
+                    links,
+                  },
+                ]}
+                onLinkClick={(e, item) => {
+                  navigateTo(makeProjectLink(projectId, item?.key));
+                }}
+              />
             </Tree>
           </div>
           <Conversation css={contentEditor}>

Composer/packages/client/src/store/action/navigation.ts

@@ -23,8 +23,6 @@ export const navTo: ActionCreator = ({ getState }, dialogId, breadcrumb = []) =>
   const state = getState();
   const currentUri = `/bot/${state.projectId}/dialogs/${dialogId}`;
 
-  console.log('NAV TO ', currentUri);
-
   if (checkUrl(currentUri, state.designPageLocation)) return;
   //if dialog change we should flush some debounced functions
   debouncedUpdateDialog.flush();
@@ -38,7 +36,6 @@ export const selectTo: ActionCreator = ({ getState }, selectPath) => {
   const { dialogId, projectId } = state.designPageLocation;
   const { breadcrumb } = state;
   let currentUri = `/bot/${projectId}/dialogs/${dialogId}`;
-  console.log('select to ', currentUri);
 
   currentUri = `${currentUri}?selected=${selectPath}`;
 
@@ -52,7 +49,6 @@ export const focusTo: ActionCreator = ({ getState }, focusPath, fragment) => {
   let { breadcrumb } = state;
 
   let currentUri = `/bot/${projectId}/dialogs/${dialogId}`;
-  console.log('focus to ', currentUri);
 
   if (focusPath) {
     const targetSelected = getSelected(focusPath);
@@ -78,7 +74,6 @@ export const setectAndfocus: ActionCreator = (store, dialogId, selectPath, focus
   const search = getUrlSearch(selectPath, focusPath);
   if (search) {
     const currentUri = `/bot/${store.getState().projectId}/dialogs/${dialogId}${getUrlSearch(selectPath, focusPath)}`;
-    console.log('setectandfocus', currentUri);
 
     if (checkUrl(currentUri, store.getState().designPageLocation)) return;
     navigateTo(currentUri, { state: { breadcrumb } });

Composer/packages/client/src/utils/navigation.ts

@@ -126,6 +126,5 @@ export function toUrlUtil(projectId: string, path: string): string {
 
 export function navigateTo(to: string, navigateOpts: NavigateOptions<NavigationState> = {}) {
   const mapNavPath = resolveToBasePath(BASEPATH, to);
-  console.log('ABOUT TO Navigate to ', mapNavPath, navigateOpts);
   navigate(mapNavPath, navigateOpts);
 }