Skip to content

Commit f42a8a5

Browse files
committed
chore(components): allow to disable guide cues completely via provider props
But keep the actual state around so that we can show it when the value changes
1 parent 3b82613 commit f42a8a5

File tree

4 files changed

+17
-39
lines changed

4 files changed

+17
-39
lines changed

packages/compass-components/src/components/compass-components-provider.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,11 @@ type CompassComponentsProviderProps = {
4444
* Set to disable context menus in the application.
4545
*/
4646
disableContextMenus?: boolean;
47+
48+
/**
49+
* Set to disable guide cues in the application
50+
*/
51+
disableGuideCues?: boolean;
4752
} & {
4853
onNextGuideGue?: GuideCueProviderProps['onNext'];
4954
onNextGuideCueGroup?: GuideCueProviderProps['onNextGroup'];
@@ -129,6 +134,7 @@ export const CompassComponentsProvider = ({
129134
stackedElementsZIndex,
130135
popoverPortalContainer: _popoverPortalContainer,
131136
disableContextMenus,
137+
disableGuideCues,
132138
...signalHooksProviderProps
133139
}: CompassComponentsProviderProps) => {
134140
const darkMode = useDarkMode(_darkMode);
@@ -166,6 +172,7 @@ export const CompassComponentsProvider = ({
166172
<GuideCueProvider
167173
onNext={onNextGuideGue}
168174
onNextGroup={onNextGuideCueGroup}
175+
disabled={disableGuideCues}
169176
>
170177
<SignalHooksProvider {...signalHooksProviderProps}>
171178
<ConfirmationModalArea>

packages/compass-components/src/components/guide-cue/guide-cue-service.spec.ts

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -602,38 +602,4 @@ describe('GuideCueService', function () {
602602
expect(onNextSpy.callCount).to.equal(1);
603603
});
604604
});
605-
606-
context('when disabled', function () {
607-
const initialValue = process.env.DISABLE_GUIDE_CUES;
608-
before(function () {
609-
process.env.DISABLE_GUIDE_CUES = 'true';
610-
611-
guideCueService.addCue({ cueId: '1', isIntersecting: true, step: 1 });
612-
guideCueService.addCue({
613-
cueId: '3',
614-
groupId: 'abc',
615-
isIntersecting: true,
616-
step: 1,
617-
});
618-
guideCueService.addCue({
619-
cueId: '4',
620-
groupId: 'abc',
621-
isIntersecting: true,
622-
step: 2,
623-
});
624-
});
625-
626-
after(function () {
627-
process.env.DISABLE_GUIDE_CUES = initialValue;
628-
});
629-
630-
it('does not add a cue', function () {
631-
expect((guideCueService as any)._cues.length).to.equal(0);
632-
});
633-
634-
it('returns undefined on onNext', function () {
635-
const next = guideCueService.onNext();
636-
expect(next).to.be.undefined;
637-
});
638-
});
639605
});

packages/compass-components/src/components/guide-cue/guide-cue-service.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,6 @@ export class GuideCueService extends EventTarget {
4343
}
4444

4545
addCue(cue: Omit<Cue, 'isVisited'>) {
46-
if (process.env.DISABLE_GUIDE_CUES === 'true') {
47-
return;
48-
}
4946
const cueIndex = this.getCueIndex(cue.cueId, cue.groupId);
5047
if (cueIndex !== -1) {
5148
// eslint-disable-next-line no-console

packages/compass-components/src/components/guide-cue/guide-cue.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,14 @@ export type GroupCue = Cue & {
3333
type GuideCueContextValue = {
3434
onNext?: (cue: Cue) => void;
3535
onNextGroup?: (groupCue: GroupCue) => void;
36+
disabled?: boolean;
3637
};
38+
3739
const GuideCueContext = React.createContext<GuideCueContextValue>({});
40+
3841
export const GuideCueProvider: React.FC<GuideCueContextValue> = ({
3942
children,
43+
disabled = false,
4044
...callbacks
4145
}) => {
4246
const callbacksRef = useRef(callbacks);
@@ -49,8 +53,9 @@ export const GuideCueProvider: React.FC<GuideCueContextValue> = ({
4953
onNextGroup(groupCue: GroupCue) {
5054
callbacksRef.current.onNextGroup?.(groupCue);
5155
},
56+
disabled,
5257
}),
53-
[]
58+
[disabled]
5459
);
5560
return (
5661
<GuideCueContext.Provider value={value}>
@@ -251,12 +256,15 @@ export const GuideCue = <T extends HTMLElement>({
251256
};
252257
}, [isCueOpen, cueData, onNext, setOpen]);
253258

259+
const isCueDisabled =
260+
context.disabled || process.env.DISABLE_GUIDE_CUES === 'true';
261+
254262
return (
255263
<>
256264
{readyToRender && (
257265
<LGGuideCue
258266
{...restOfCueProps}
259-
open={isCueOpen}
267+
open={!isCueDisabled && isCueOpen}
260268
numberOfSteps={guideCueService.getCountOfSteps(cueData.groupId)}
261269
onDismiss={() => {
262270
onDismiss?.();

0 commit comments

Comments
 (0)