Merge pull request #16318 from overleaf/jdt-fix-multiple-popups

Show only one editor notification at a time

GitOrigin-RevId: 88a0309da121e9545136cd718ed24710a9d25363

services/web/frontend/js/features/source-editor/components/table-generator/promotion/popover.tsx

@@ -30,14 +30,16 @@ const GRAMMARLY_CUTOFF_TIME = new Date(2023, 9, 10).getTime()
 const editorContextPropTypes = {
   inactiveTutorials: PropTypes.arrayOf(PropTypes.string).isRequired,
   deactivateTutorial: PropTypes.func.isRequired,
+  currentPopup: PropTypes.string,
+  setCurrentPopup: PropTypes.func.isRequired,
 }
 
 export const PromotionOverlay: FC = ({ children }) => {
   const ref = useRef<HTMLSpanElement>(null)
 
-  const { inactiveTutorials }: EditorTutorials = useEditorContext(
-    editorContextPropTypes
-  )
+  const { inactiveTutorials, currentPopup, setCurrentPopup }: EditorTutorials =
+    useEditorContext(editorContextPropTypes)
+
   const {
     splitTestVariants,
   }: { splitTestVariants: Record<string, string | undefined> } =
@@ -54,11 +56,21 @@ export const PromotionOverlay: FC = ({ children }) => {
   const hideBecauseNewUser =
     !userRegistrationTime || userRegistrationTime > NEW_USER_CUTOFF_TIME
 
+  const popupPresent =
+    currentPopup && currentPopup !== 'table-generator-promotion'
+
   const showPromotion =
     splitTestVariants['table-generator-promotion'] === 'enabled' &&
+    !popupPresent &&
     !inactiveTutorials.includes('table-generator-promotion') &&
     !hideBecauseNewUser
 
+  useEffect(() => {
+    if (showPromotion) {
+      setCurrentPopup('table-generator-promotion')
+    }
+  }, [showPromotion, setCurrentPopup])
+
   if (!showPromotion) {
     return <>{children}</>
   }

services/web/frontend/js/shared/context/editor-context.jsx

@@ -91,6 +91,8 @@ export function EditorProvider({ children }) {
     getMeta('ol-inactiveTutorials', [])
   )
 
+  const [currentPopup, setCurrentPopup] = useState(null)
+
   const deactivateTutorial = useCallback(
     tutorialKey => {
       setInactiveTutorials([...inactiveTutorials, tutorialKey])
@@ -173,6 +175,8 @@ export function EditorProvider({ children }) {
       insertSymbol,
       inactiveTutorials,
       deactivateTutorial,
+      currentPopup,
+      setCurrentPopup,
     }),
     [
       cobranding,
@@ -188,6 +192,8 @@ export function EditorProvider({ children }) {
       insertSymbol,
       inactiveTutorials,
       deactivateTutorial,
+      currentPopup,
+      setCurrentPopup,
     ]
   )
 

services/web/types/tutorial.ts

@@ -2,4 +2,6 @@
 export type EditorTutorials = {
   inactiveTutorials: [string]
   deactivateTutorial: (key: string) => void
+  currentPopup: string
+  setCurrentPopup: (id: string) => void
 }