From e86d007f6fe59584f60f677a144d8cd511754a78 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Apr 2021 12:02:00 -0700
Subject: [PATCH 1/3] use router-based links to project manager

---
 .../src/pages/botProject/adapters/AdapterSection.tsx   | 10 ++++------
 .../botProject/adapters/ExternalAdapterSettings.tsx    |  7 +++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
index b2845ee773..4002f7fabf 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx
@@ -6,9 +6,9 @@ import { useEffect, useRef } from 'react';
 import formatMessage from 'format-message';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 
 import { title, subtitle, subtext } from '../styles';
-import { navigateTo } from '../../../utils/navigation';
 
 import ExternalAdapterSettings from './ExternalAdapterSettings';
 import ABSChannels from './ABSChannels';
@@ -54,14 +54,12 @@ const AdapterSection = ({ projectId, scrollToSectionId }: Props) => {
             'Find and install more external services to your bot project in <a>package manager</a>. For further guidance, see documentation for <a2>adding external connections.</a2>',
             {
               a: ({ children }) => (
-                <Link
+                <RouterLink
                   key="package-adapter-settings-page"
-                  onClick={() => {
-                    navigateTo(`/bot/${projectId}/plugin/package-manager/package-manager`);
-                  }}
+                  to={`/bot/${projectId}/plugin/package-manager/package-manager`}
                 >
                   {children}
-                </Link>
+                </RouterLink>
               ),
               a2: ({ children }) => (
                 <Link
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
index 4d8c88423e..3e6553e59c 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
@@ -8,11 +8,11 @@ import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { BotSchemas, DialogSetting } from '@bfc/shared';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { JSONSchema7 } from '@botframework-composer/types';
 import { AdapterRecord } from '@botframework-composer/types/src';
 
-import { useRouterCache } from '../../../utils/hooks';
 import { schemasState, settingsState, dispatcherState } from '../../../recoilModel';
 import { subtitle, tableHeaderRow, tableRow, tableRowItem, tableColumnHeader, columnSizes } from '../styles';
 
@@ -35,7 +35,6 @@ const ExternalAdapterSettings = (props: Props) => {
   const schemas = useRecoilValue<BotSchemas>(schemasState(projectId));
   const currentSettings = useRecoilValue<DialogSetting>(settingsState(projectId));
   const { setSettings } = useRecoilValue(dispatcherState);
-  const packageManagerLink = useRouterCache('plugin/package-manager/package-manager');
 
   const adapters: AdapterRecord[] = currentSettings.runtimeSettings?.adapters ?? [];
 
@@ -132,9 +131,9 @@ const ExternalAdapterSettings = (props: Props) => {
       <div key={'subtitle'} css={subtitle}>
         {formatMessage.rich('<a>Add from package manager</a>.', {
           a: ({ children }) => (
-            <Link key="link" href={packageManagerLink}>
+            <RouterLink key="link" to={`/bot/${projectId}/plugin/package-manager/package-manager`}>
               {children}
-            </Link>
+            </RouterLink>
           ),
         })}
       </div>

From 3c3077d0be4bf8be09e6137cf93abcdabdba9d44 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Apr 2021 14:21:41 -0700
Subject: [PATCH 2/3] fix unit test

---
 .../pages/botProjectsSettings/AdapterSettings.test.tsx        | 4 +++-
 .../src/pages/botProject/adapters/ExternalAdapterSettings.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
index 5d9ee98620..c76a5501a9 100644
--- a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
+++ b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
@@ -87,7 +87,9 @@ describe('ExternalAdapterSettings', () => {
 
     const link = getByText(/from package manager/);
 
-    expect(link.attributes.getNamedItem('href')?.value).toEqual('plugin/package-manager/package-manager');
+    console.log(link);
+
+    expect(link.attributes.getNamedItem('href')?.value).toContain('plugin/package-manager/package-manager');
   });
 
   it('brings up the modal', () => {
diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
index 3e6553e59c..8da8d4ed86 100644
--- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
+++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx
@@ -129,7 +129,7 @@ const ExternalAdapterSettings = (props: Props) => {
     <Fragment>
       <div data-testid="adapterSettings">{externalServices(adapterSchemas)}</div>
       <div key={'subtitle'} css={subtitle}>
-        {formatMessage.rich('<a>Add from package manager</a>.', {
+        {formatMessage.rich('<a>Add from package manager</a>', {
           a: ({ children }) => (
             <RouterLink key="link" to={`/bot/${projectId}/plugin/package-manager/package-manager`}>
               {children}

From 3b7db05157e1fad2a855588b487be7293c2ab3cc Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Apr 2021 14:54:51 -0700
Subject: [PATCH 3/3] Update AdapterSettings.test.tsx

---
 .../pages/botProjectsSettings/AdapterSettings.test.tsx          | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
index c76a5501a9..e91d6792c9 100644
--- a/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
+++ b/Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx
@@ -87,8 +87,6 @@ describe('ExternalAdapterSettings', () => {
 
     const link = getByText(/from package manager/);
 
-    console.log(link);
-
     expect(link.attributes.getNamedItem('href')?.value).toContain('plugin/package-manager/package-manager');
   });