Merge branch 'pavolum/CreationUiFixes2' of https://github.com/microso…

…ft/BotFramework-Composer into pavolum/CreationUiFixes2

Composer/packages/client/src/Onboarding/content.tsx

@@ -151,6 +151,7 @@ export const getTeachingBubble = (id: string | undefined): TeachingBubble => {
           {
             a: ({ children }) => (
               <a
+                key="start-bot-help-url"
                 href="https://github.com/microsoft/BotFramework-Emulator/releases/latest"
                 rel="noopener noreferrer"
                 target="_blank"

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterModal.tsx

@@ -86,11 +86,11 @@ const AdapterModal = (props: Props) => {
               if (update != null) setValue({ ...update, $kind: adapterKey });
             }}
           />
-          <Text key="helptext">
+          <Text>
             {formatMessage.rich('To learn more about the { title }, <a>visit its documentation page</a>.', {
               title: schema.title,
               a: ({ children }) => (
-                <Link href={uiSchema.helpLink} target="_blank">
+                <Link key="adapter-help-text-url" href={uiSchema.helpLink} target="_blank">
                   {children}
                 </Link>
               ),

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx

@@ -56,10 +56,10 @@ const ExternalAdapterSettings = (props: Props) => {
 
   const externalServices = (schemas: (JSONSchema7 & { key: string; packageName?: string; firstTime?: boolean })[]) => (
     <div role="table">
-      <div key={'subtitle'} css={subtitle}>
+      <div css={subtitle}>
         {formatMessage.rich('Install more adapters in <a>the package manager</a>.', {
           a: ({ children }) => (
-            <Link key="link" href={packageManagerLink}>
+            <Link key="subtitle-link" href={packageManagerLink}>
               {children}
             </Link>
           ),

Composer/packages/client/src/pages/design/VisualEditor.tsx

@@ -47,7 +47,9 @@ function onRenderBlankVisual(isTriggerEmpty, onClickAddTrigger, isRemoteSkill) {
         ) : (
           <React.Fragment>
             <img alt={formatMessage('bot framework composer icon gray')} src={grayComposerIcon} />
-            {formatMessage.rich('Select a trigger in the left<br />navigation to see actions', { br: <br /> })}
+            {formatMessage.rich('Select a trigger in the left<br />navigation to see actions', {
+              br: <br key="break-icon-gray-alt" />,
+            })}
           </React.Fragment>
         )}
       </div>

Composer/packages/client/src/pages/design/VisualPanelHeader.tsx

@@ -91,7 +91,7 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
   const triggerIndex = parseTriggerId(selected);
   //make sure focusPath always valid
   const focusPath = getFocusPath(selected, focused);
-  const trigger = triggerIndex != null && dialogData.triggers[triggerIndex];
+  const trigger = triggerIndex != null && dialogData?.triggers[triggerIndex];
 
   const initialBreadcrumbArray: Array<BreadcrumbItem> = [];
 
@@ -118,7 +118,7 @@ const useBreadcrumbs = (projectId: string, pluginConfig?: PluginConfig) => {
     });
   }
 
-  // getDialogData returns whatever's at the end of the path, which could be a trigger or an action
+  // getDialogData returns whatever is at the end of the path, which could be a trigger or an action
   const possibleAction = getDialogData(dialogMap, dialogId, focusPath);
 
   if (encodedFocused) {

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

@@ -168,6 +168,7 @@ const Home: React.FC<RouteComponentProps> = () => {
                   {formatMessage.rich('You don’t have any bot yet. Start to <Link>create a new bot</Link>', {
                     Link: ({ children }) => (
                       <Link
+                        key="create-new-bot-link"
                         onClick={() => {
                           onClickNewBot();
                           TelemetryClient.track('ToolbarButtonClicked', { name: 'new' });

Composer/packages/client/src/pages/setting/app-settings/electronSettings.tsx

@@ -40,6 +40,7 @@ export const ElectronSettings: React.FC<RouteComponentProps> = () => {
             {
               a: (props) => {
                 <Link
+                  key="nightly-link-learn-more-link"
                   href="https://github.com/microsoft/BotFramework-Composer-Nightlies"
                   rel="noopener noreferrer"
                   styles={link}

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

@@ -66,22 +66,33 @@ export const useRouterCache = (to: string) => {
   const linksRef = useRef(topLinks.concat(bottomLinks));
   linksRef.current = topLinks.concat(bottomLinks);
 
+  // Tracks if the component is mounted.
+  const mountedRef = useRef(false);
+
   useEffect(() => {
     routerCache.cleanAll();
     setState({});
   }, [rootProjectId]);
 
   useEffect(() => {
+    mountedRef.current = true;
     globalHistory.listen(({ location }) => {
       const links = linksRef.current;
       const { href, origin } = location;
       const uri = replace(href, origin, '');
       const target = find(links, (link) => uri.startsWith(link.to));
       if (target) {
         routerCache.set(target.to, uri);
-        setState(routerCache.getAll());
+        // Only update local state if the component is still mounted.
+        if (mountedRef.current) {
+          setState(routerCache.getAll());
+        }
       }
     });
+
+    return () => {
+      mountedRef.current = false;
+    };
   }, []);
 
   return state[to] || to;