From 6b514f679f25c6f8c2c8b7be93d2d0e444ba19fc Mon Sep 17 00:00:00 2001
From: Julian Rojas Valvo <jrojasvalvo@gmail.com>
Date: Mon, 14 Aug 2023 14:56:26 -0700
Subject: [PATCH] fix: UI Tutorial 8-11 now focuses on page components (#148)
 (#1310)

* fix: UI Tutorial 8-11 now focuses on page components

* fix: resolved comments

Co-authored-by: Julian Rojas Valvo <jvalvo@expediagroup.com>
---
 querybook/webapp/components/Search/SearchContainer.tsx     | 1 +
 .../webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx  | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/querybook/webapp/components/Search/SearchContainer.tsx b/querybook/webapp/components/Search/SearchContainer.tsx
index 69cd5db8f..7c209f0f1 100644
--- a/querybook/webapp/components/Search/SearchContainer.tsx
+++ b/querybook/webapp/components/Search/SearchContainer.tsx
@@ -18,6 +18,7 @@ export const SearchContainer: React.FC = () => {
 
     return (
         <IconButton
+            className="SearchContainer"
             icon="Search"
             tooltipPos="right"
             tooltip="Search Queries, Docs, Tables, and Boards"
diff --git a/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx b/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx
index c85d0ca5f..64bbd6409 100644
--- a/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx
+++ b/querybook/webapp/components/UIGuide/QuerybookSidebarUIGuide.tsx
@@ -130,8 +130,7 @@ function getQuerybookSidebarTourSteps() {
             ),
         },
         {
-            selector:
-                '.EntitySidebar .sidebar-footer [aria-label="Search Docs/Tables"]',
+            selector: '.EntitySidebar .apps-list .SearchContainer',
             content: (
                 <>
                     <p>This is the Advanced Search for DataDocs and Tables.</p>
@@ -145,7 +144,7 @@ function getQuerybookSidebarTourSteps() {
             ),
         },
         {
-            selector: '.EntitySidebar .sidebar-footer .UserMenu',
+            selector: '.EntitySidebar .apps-list .UserMenu',
             content: (
                 <>
                     <p>
@@ -161,7 +160,7 @@ function getQuerybookSidebarTourSteps() {
             ),
         },
         {
-            selector: '.EntitySidebar .sidebar-footer .QueryEngineStatusButton',
+            selector: '.EntitySidebar .apps-list .QueryEngineStatusButton',
             content: (
                 <>
                     <p>