Merge branch 'main' of https://github.com/grafana/interactive-tutorials

Author: Jayclifford345

rca-demo/unstyled.html

@@ -60,41 +60,47 @@ <h2>Section 3: Orient to the RCA Workbench</h2>
             <ul>
                 <li class="interactive"
                     data-targetaction="highlight"
-                    data-reftarget="TODO-REPLACE:div[data-testid='rca-workbench-timeline']"
+                    data-reftarget="div.h-full.w-full.overflow-y-scroll.block"
                     data-requirements="exists-reftarget"
                     data-doit="false">
                     <span class="interactive-comment"><strong>Timeline</strong>: shows anomalies and state over time for selected entities.</span>
                     Examine the timeline visualization.
                 </li>
-                <!-- TODO: Replace selector above with the actual timeline container testid/selector. -->
 
                 <li class="interactive"
                     data-targetaction="highlight"
-                    data-reftarget="TODO-REPLACE:button[data-testid='rca-tab-graph']"
+                    data-reftarget="button[data-testid='data-testid Tab Graph']"
                     data-requirements="exists-reftarget"
                     data-doit="false">
                     <span class="interactive-comment"><strong>Graph tab</strong>: pivots to a service graph to understand relationships and blast radius.</span>
                     Inspect the Graph tab control.
                 </li>
-                <!-- TODO: Replace with the actual tab button selector for Graph. -->
 
                 <li class="interactive"
                     data-targetaction="highlight"
-                    data-reftarget="TODO-REPLACE:button[data-testid='rca-tab-timeline']"
+                    data-reftarget="button[data-testid='data-testid Tab Timeline']"
                     data-requirements="exists-reftarget"
                     data-doit="false">
                     <span class="interactive-comment"><strong>Timeline tab</strong>: returns to the timeline-centric view.</span>
                     Inspect the Timeline tab control.
                 </li>
-                <!-- TODO: Replace with the actual tab button selector for Timeline. -->
 
-                <li class="interactive"
+                <!-- <li class="interactive"
                     data-targetaction="highlight"
                     data-reftarget="TODO-REPLACE:button[data-testid='rca-kpi-icon']"
                     data-requirements="exists-reftarget"
                     data-doit="false">
                     <span class="interactive-comment"><strong>KPI icon</strong>: opens a drawer with service/database KPIs, properties, traces, and logs.</span>
                     Locate the KPI icon for a selected entity.
+                </li> -->
+
+                <li class="interactive"
+                    data-targetaction="hover"
+                    data-reftarget="div[data-cy='wb-list-item']:first-child"
+                    data-requirements="exists-reftarget"
+                    data-doit="false">
+                    <span class="interactive-comment"><strong>KPI icon</strong>: opens a drawer with service/database KPIs, properties, traces, and logs.</span>
+                    Hover over the first entry and click the KPI icon.
                 </li>
                 <!-- TODO: Replace with the actual selector for the KPI icon adjacent to an entity. -->
             </ul>
@@ -107,15 +113,17 @@ <h2>Section 4: Investigate the Initial Change</h2>
               data-targetaction="sequence"
               data-reftarget="span#initial-change">
             <ul>
+
+
                 <li class="interactive"
                     data-targetaction="highlight"
-                    data-reftarget="TODO-REPLACE:div[data-testid='rca-insight-item']:first-of-type"
+                    data-reftarget="div[data-intercom-target='wb-list'] > div.grid.wb-item"
                     data-requirements="exists-reftarget"
                     data-doit="false">
                     <span class="interactive-comment">Highlight the first <strong>insight</strong> for the incident, e.g. <em>productCatalogReadFromPostgres</em> feature flag state change.</span>
                     Examine the first insight.
                 </li>
-                <!-- NOTE: If demo data lacks this insight, this will remain a show-only explanation. Adjust when data is available. -->
+                <!-- NOTE: This opens the first drawer, assuming it is the right one... -->
             </ul>
         </span>