From c79dd541a8452b46af5902db8a82b516d10dfb6f Mon Sep 17 00:00:00 2001
From: Christian Vogt <cvogt@redhat.com>
Date: Mon, 18 Sep 2023 11:19:14 -0400
Subject: [PATCH] update scroll container selector for JumpLinks

---
 frontend/src/app/App.tsx                   | 4 ++--
 frontend/src/components/GenericSidebar.tsx | 4 ++--
 frontend/src/utilities/const.ts            | 6 +++++-
 frontend/src/utilities/utils.ts            | 4 ++--
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index c42d128ec2..2d8e49dfdf 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -15,7 +15,7 @@ import ErrorBoundary from '~/components/error/ErrorBoundary';
 import ToastNotifications from '~/components/ToastNotifications';
 import { useWatchBuildStatus } from '~/utilities/useWatchBuildStatus';
 import { useUser } from '~/redux/selectors';
-import { DASHBOARD_MAIN_CONTAINER_SELECTOR } from '~/utilities/const';
+import { DASHBOARD_MAIN_CONTAINER_ID } from '~/utilities/const';
 import useDetectUser from '~/utilities/useDetectUser';
 import ProjectsContextProvider from '~/concepts/projects/ProjectsContext';
 import Header from './Header';
@@ -96,7 +96,7 @@ const App: React.FC = () => {
         sidebar={isAllowed ? <NavSidebar /> : undefined}
         notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
         isNotificationDrawerExpanded={notificationsOpen}
-        mainContainerId={DASHBOARD_MAIN_CONTAINER_SELECTOR}
+        mainContainerId={DASHBOARD_MAIN_CONTAINER_ID}
       >
         <ErrorBoundary>
           <ProjectsContextProvider>
diff --git a/frontend/src/components/GenericSidebar.tsx b/frontend/src/components/GenericSidebar.tsx
index 2a4a268bde..b6ab8ca090 100644
--- a/frontend/src/components/GenericSidebar.tsx
+++ b/frontend/src/components/GenericSidebar.tsx
@@ -6,7 +6,7 @@ import {
   SidebarContent,
   SidebarPanel,
 } from '@patternfly/react-core';
-import { DASHBOARD_MAIN_CONTAINER_SELECTOR } from '~/utilities/const';
+import { DASHBOARD_SCROLL_CONTAINER_SELECTOR } from '~/utilities/const';
 
 type GenericSidebarProps = {
   sections: string[];
@@ -20,7 +20,7 @@ const GenericSidebar: React.FC<GenericSidebarProps> = ({
   children,
   sections,
   titles,
-  scrollableSelector = `#${DASHBOARD_MAIN_CONTAINER_SELECTOR}`,
+  scrollableSelector = DASHBOARD_SCROLL_CONTAINER_SELECTOR,
   maxWidth,
 }) => (
   <Sidebar hasGutter>
diff --git a/frontend/src/utilities/const.ts b/frontend/src/utilities/const.ts
index 8379731c07..1589247229 100644
--- a/frontend/src/utilities/const.ts
+++ b/frontend/src/utilities/const.ts
@@ -46,4 +46,8 @@ export const DEFAULT_CONTEXT_DATA: ContextResourceData<never> = {
 export const REPOSITORY_URL_REGEX =
   /^([\w.\-_]+((?::\d+|)(?=\/[a-z0-9._-]+\/[a-z0-9._-]+))|)(?:\/|)([a-z0-9.\-_]+(?:\/[a-z0-9.\-_]+|))(?::([\w.\-_]{1,127})|)/;
 
-export const DASHBOARD_MAIN_CONTAINER_SELECTOR = 'dashboard-page-main';
+export const DASHBOARD_MAIN_CONTAINER_ID = 'dashboard-page-main';
+
+// Quick starts drawer creates a new scroll container within its DrawerContentBody.
+// Not an ideal selector but components such as JumpLinks require the use of a selector instead of a direct node reference.
+export const DASHBOARD_SCROLL_CONTAINER_SELECTOR = `#${DASHBOARD_MAIN_CONTAINER_ID} > .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__content`;
diff --git a/frontend/src/utilities/utils.ts b/frontend/src/utilities/utils.ts
index 5a81adceee..eff87fc7bd 100644
--- a/frontend/src/utilities/utils.ts
+++ b/frontend/src/utilities/utils.ts
@@ -1,5 +1,5 @@
 import { OdhApplication, OdhDocument, OdhDocumentType } from '~/types';
-import { CATEGORY_ANNOTATION, DASHBOARD_MAIN_CONTAINER_SELECTOR, ODH_PRODUCT_NAME } from './const';
+import { CATEGORY_ANNOTATION, DASHBOARD_MAIN_CONTAINER_ID, ODH_PRODUCT_NAME } from './const';
 
 /**
  * Feature flags are required in the config -- but upgrades can be mixed and omission of the property
@@ -144,7 +144,7 @@ export const isGroupEmpty = <T extends { enabled: boolean }>(groupList: Array<T>
   groupList.filter((element) => element.enabled).length === 0;
 
 export const getDashboardMainContainer = (): HTMLElement =>
-  document.getElementById(DASHBOARD_MAIN_CONTAINER_SELECTOR) || document.body;
+  document.getElementById(DASHBOARD_MAIN_CONTAINER_ID) || document.body;
 
 export const isHTMLInputElement = (object: unknown): object is HTMLInputElement =>
   (object as HTMLInputElement).value !== undefined;