ref(assistant): Allow guide steps that wait for anchors to appear (#33335)

static/app/components/assistant/types.tsx

@@ -3,6 +3,11 @@ export type GuideStep = {
    * The main body of the step
    */
   description: React.ReactNode;
+  /**
+   * Step is tied to an anchor target. If the anchor doesn't exist, the step
+   * will not be shown.
+   */
+  target: string;
   /**
    * Disables dismissal
    */
@@ -16,13 +21,6 @@ export type GuideStep = {
    * Label for the next button
    */
   nextText?: string;
-  /**
-   * Step is tied to an anchor target. If the anchor doesn't exist, the step
-   * will not be shown. If the anchor exists but is of type "invisible", it will
-   * not be pinged but will be scrolled to. Otherwise the anchor will be pinged
-   * and scrolled to.
-   */
-  target?: string;
   /**
    * The main title of the step
    */
@@ -41,6 +39,12 @@ type BaseGuide = {
    * Show the guide to users who've joined before the date threshold
    */
   dateThreshold?: Date;
+  /**
+   * Anchors that are expected to appear when the step is reached. This may be
+   * useful when a previous step triggers an element which includes the next
+   * anchor.
+   */
+  expectedTargets?: string[];
   /**
    * When dismissing a guide on the same page, all subsequent guides
    * will be marked as seen.

static/app/stores/guideStore.tsx

@@ -266,12 +266,16 @@ const storeConfig: GuideStoreDefinition = {
       });
     }
 
+    // Remove steps that are missing anchors, unless the anchor is included in
+    // the expectedTargets and will appear at the step.
     const nextGuide =
       guideOptions.length > 0
         ? {
             ...guideOptions[0],
             steps: guideOptions[0].steps.filter(
-              step => step.target && anchors.has(step.target)
+              step =>
+                anchors.has(step.target) ||
+                guideOptions[0]?.expectedTargets?.includes(step.target)
             ),
           }
         : null;