Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: resolving getting started teaching callout not rendering #7884

Merged
pavolum merged 3 commits into from
May 21, 2021
Merged

fix: resolving getting started teaching callout not rendering #7884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b637e3
-Adding getstarted teach bubble to app state
pavolum May 21, 2021
23b73b1
setting state value to show teaching bubble as opposed to hash routing
pavolum May 21, 2021
9ce40a8
adding onclick state changing to manage state for teaching button dis…
pavolum May 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion Composer/packages/client/src/components/GetStarted/GetStartedNextSteps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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.')}
Expand All @@ -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.')}
Expand Down
17 changes: 6 additions & 11 deletions Composer/packages/client/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -26,6 +25,7 @@ import {
botProjectSpaceLoadedState,
isWebChatPanelVisibleState,
allRequiredRecognizersSelector,
showGetStartedTeachingBubbleState,
} from '../recoilModel';
import composerIcon from '../images/composerIcon.svg';
import { AppUpdaterStatus } from '../constants';
Expand Down Expand Up @@ -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);
Expand All @@ -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!
Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions Composer/packages/client/src/recoilModel/atoms/appState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,3 +364,8 @@ export const warnAboutFunctionsState = atom<boolean>({
key: getFullyQualifiedKey('warnAboutFunctionsState'),
default: false,
});

export const showGetStartedTeachingBubbleState = atom<boolean>({
key: getFullyQualifiedKey('showGetStartedTeachingBubbleState'),
default: false,
});
6 changes: 6 additions & 0 deletions Composer/packages/client/src/recoilModel/dispatchers/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
debugPanelActiveTabState,
userHasNodeInstalledState,
applicationErrorState,
showGetStartedTeachingBubbleState,
} from '../atoms/appState';
import { AppUpdaterStatus, CreationFlowStatus, CreationFlowType } from '../../constants';
import OnboardingState from '../../utils/onboardingStorage';
Expand Down Expand Up @@ -153,6 +154,10 @@ export const applicationDispatcher = () => {
await flushExistingTasks(callbackHelpers);
});

const setShowGetStartedTeachingBubble = useRecoilCallback((callbackHelpers: CallbackInterface) => (show: boolean) => {
callbackHelpers.set(showGetStartedTeachingBubbleState, show);
});

return {
checkNodeVersion,
setAppUpdateStatus,
Expand All @@ -169,5 +174,6 @@ export const applicationDispatcher = () => {
setPageElementState,
setDebugPanelExpansion,
setActiveTabInDebugPanel,
setShowGetStartedTeachingBubble,
};
};
5 changes: 3 additions & 2 deletions Composer/packages/client/src/recoilModel/dispatchers/utils/project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ import {
dispatcherState,
warnAboutDotNetState,
warnAboutFunctionsState,
showGetStartedTeachingBubbleState,
} from '../../atoms';
import * as botstates from '../../atoms/botState';
import lgWorker from '../../parsers/lgWorker';
Expand Down Expand Up @@ -879,9 +880,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) => {
Expand Down