fix: resolving getting started teaching callout not rendering

Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx

@@ -43,7 +43,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
   const readme = useRecoilValue(projectReadmeState(projectId));
   const [readmeHidden, setReadmeHidden] = useState<boolean>(true);
   const schemaDiagnostics = useRecoilValue(schemaDiagnosticsSelectorFamily(projectId));
-  const { setSettings, setQnASettings } = useRecoilValue(dispatcherState);
+  const { setSettings, setQnASettings, setShowGetStartedTeachingBubble } = useRecoilValue(dispatcherState);
   const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector) || '';
   const settings = useRecoilValue(settingsState(projectId));
   const mergedSettings = mergePropertiesManagedByRootBot(projectId, rootBotProjectId, settings);
@@ -402,6 +402,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             target="#luis"
             onDismiss={() => {
               setHighlightLUIS(false);
+              setShowGetStartedTeachingBubble(false);
             }}
           >
             {formatMessage('Continue setting up your development environment by adding LUIS keys.')}
@@ -415,6 +416,7 @@ export const GetStartedNextSteps: React.FC<GetStartedProps> = (props) => {
             target="#qna"
             onDismiss={() => {
               setHighlightQNA(false);
+              setShowGetStartedTeachingBubble(false);
             }}
           >
             {formatMessage('Just add a QnA key and you’ll be ready to talk to your bot.')}

Composer/packages/client/src/components/Header.tsx

@@ -13,7 +13,6 @@ import { NeutralColors, SharedColors, FontSizes, CommunicationColors } from '@ui
 import { useRecoilValue } from 'recoil';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 
-import { useLocation } from '../utils/hooks';
 import {
   dispatcherState,
   appUpdateState,
@@ -26,6 +25,7 @@ import {
   botProjectSpaceLoadedState,
   isWebChatPanelVisibleState,
   allRequiredRecognizersSelector,
+  showGetStartedTeachingBubbleState,
 } from '../recoilModel';
 import composerIcon from '../images/composerIcon.svg';
 import { AppUpdaterStatus } from '../constants';
@@ -141,8 +141,7 @@ export const Header = () => {
   const locale = useRecoilValue(localeState(projectId));
   const appUpdate = useRecoilValue(appUpdateState);
   const [teachingBubbleVisibility, setTeachingBubbleVisibility] = useState<boolean>();
-
-  const [showGetStartedTeachingBubble, setShowGetStartedTeachingBubble] = useState<boolean>(false);
+  const showGetStartedTeachingBubble = useRecoilValue(showGetStartedTeachingBubbleState);
   const settings = useRecoilValue(settingsState(projectId));
   const isWebChatPanelVisible = useRecoilValue(isWebChatPanelVisibleState);
   const botProjectSolutionLoaded = useRecoilValue(botProjectSpaceLoadedState);
@@ -151,16 +150,14 @@ export const Header = () => {
   const { showing, status } = appUpdate;
   const rootBotId = useRecoilValue(rootBotProjectIdSelector) ?? '';
   const webchatEssentials = useRecoilValue(webChatEssentialsSelector(rootBotId));
+  const { setWebChatPanelVisibility, setShowGetStartedTeachingBubble } = useRecoilValue(dispatcherState);
 
-  const { setWebChatPanelVisibility } = useRecoilValue(dispatcherState);
   const [hideBotController, hideBotStartController] = useState(true);
   const [showGetStarted, setShowGetStarted] = useState<boolean>(false);
   const [showTeachingBubble, setShowTeachingBubble] = useState<boolean>(false);
   const [requiresLUIS, setRequiresLUIS] = useState<boolean>(false);
   const [requiresQNA, setRequiresQNA] = useState<boolean>(false);
 
-  const { location } = useLocation();
-
   // These are needed to determine if the bot needs LUIS or QNA
   // this data is passed into the GetStarted widget
   // ... if the get started widget moves, this code should too!
@@ -191,18 +188,16 @@ export const Header = () => {
   };
   const toggleGetStarted = (newvalue) => {
     hideTeachingBubble();
+    setShowGetStartedTeachingBubble(false);
     setShowGetStarted(newvalue);
   };
 
   // pop out get started if #getstarted is in the URL
   useEffect(() => {
-    if (location.hash === '#getstarted') {
-      setShowGetStartedTeachingBubble(true);
+    if (showGetStartedTeachingBubble) {
       setShowGetStarted(true);
-    } else {
-      setShowGetStartedTeachingBubble(false);
     }
-  }, [location]);
+  }, [showGetStartedTeachingBubble]);
 
   useEffect(() => {
     if (isWebChatPanelVisible) {

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -364,3 +364,8 @@ export const warnAboutFunctionsState = atom<boolean>({
   key: getFullyQualifiedKey('warnAboutFunctionsState'),
   default: false,
 });
+
+export const showGetStartedTeachingBubbleState = atom<boolean>({
+  key: getFullyQualifiedKey('showGetStartedTeachingBubbleState'),
+  default: false,
+});

Composer/packages/client/src/recoilModel/dispatchers/application.ts

@@ -18,6 +18,7 @@ import {
   debugPanelActiveTabState,
   userHasNodeInstalledState,
   applicationErrorState,
+  showGetStartedTeachingBubbleState,
 } from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus, CreationFlowType } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
@@ -153,6 +154,10 @@ export const applicationDispatcher = () => {
     await flushExistingTasks(callbackHelpers);
   });
 
+  const setShowGetStartedTeachingBubble = useRecoilCallback((callbackHelpers: CallbackInterface) => (show: boolean) => {
+    callbackHelpers.set(showGetStartedTeachingBubbleState, show);
+  });
+
   return {
     checkNodeVersion,
     setAppUpdateStatus,
@@ -169,5 +174,6 @@ export const applicationDispatcher = () => {
     setPageElementState,
     setDebugPanelExpansion,
     setActiveTabInDebugPanel,
+    setShowGetStartedTeachingBubble,
   };
 };

Composer/packages/client/src/recoilModel/dispatchers/utils/project.ts

@@ -78,6 +78,7 @@ import {
   dispatcherState,
   warnAboutDotNetState,
   warnAboutFunctionsState,
+  showGetStartedTeachingBubbleState,
 } from '../../atoms';
 import * as botstates from '../../atoms/botState';
 import lgWorker from '../../parsers/lgWorker';
@@ -881,9 +882,9 @@ export const postRootBotCreation = async (
     newProfile && dispatcher.setPublishTargets([newProfile], projectId);
   }
   projectIdCache.set(projectId);
-
+  callbackHelpers.set(showGetStartedTeachingBubbleState, true);
   // navigate to the new get started section
-  navigateToBot(callbackHelpers, projectId, undefined, btoa('dialogs#getstarted'));
+  navigateToBot(callbackHelpers, projectId, undefined, btoa('dialogs'));
 };
 
 export const openRootBotAndSkillsByPath = async (callbackHelpers: CallbackInterface, path: string, storageId) => {