update scroll container selector for JumpLinks

opendatahub-io · Sep 18, 2023 · c79dd54 · c79dd54
1 parent e532f4d
commit c79dd54
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;