Bug 1908135: move quick search modal inside topology container

frontend/packages/console-shared/src/hooks/useIsMobile.ts

@@ -13,10 +13,21 @@ export const useIsMobile = () => {
       setIsMobile(e.matches);
     };
 
-    mobileResolutionMatch.addEventListener('change', updateIsMobile);
+    // support safari with fallback to addListener / removeListener
+    if (mobileResolutionMatch.addEventListener) {
+      mobileResolutionMatch.addEventListener('change', updateIsMobile);
+    } else {
+      mobileResolutionMatch.addListener(updateIsMobile);
+    }
 
     // Remove event listener on cleanup
-    return () => mobileResolutionMatch.removeEventListener('change', updateIsMobile);
+    return () => {
+      if (mobileResolutionMatch.removeEventListener) {
+        mobileResolutionMatch.removeEventListener('change', updateIsMobile);
+      } else {
+        mobileResolutionMatch.removeListener(updateIsMobile);
+      }
+    };
   }, []); // Empty array ensures that effect is only run on mount
 
   return isMobile;

frontend/packages/topology/src/components/page/TopologyView.scss

@@ -15,7 +15,7 @@
     left: 0;
     right: 0;
   }
-  &__hint-background{
+  &__hint-background {
     background: var(--pf-global--Color--light-100);
     border: 1px solid var(--pf-global--BorderColor--light-100);
     border-radius: 8px;
@@ -99,4 +99,9 @@
       min-height: initial;
     }
   }
+
+  .pf-c-backdrop {
+    position: absolute;
+    background: none;
+  }
 }

frontend/packages/topology/src/components/page/TopologyView.tsx

@@ -66,6 +66,7 @@ export const ConnectedTopologyView: React.FC<ComponentProps> = ({
   onSupportedFiltersChange,
   onSupportedKindsChange,
 }) => {
+  const [viewContainer, setViewContainer] = React.useState<HTMLElement>(null);
   const { setTopologyFilters: onFiltersChange } = React.useContext(FilterContext);
   const [filteredModel, setFilteredModel] = React.useState<Model>();
   const [selectedEntity, setSelectedEntity] = React.useState<GraphElement>(null);
@@ -236,11 +237,6 @@ export const ConnectedTopologyView: React.FC<ComponentProps> = ({
     [filteredModel, namespace, onSelect, viewType],
   );
 
-  const topologyFilterBar = React.useMemo(
-    () => <TopologyFilterBar viewType={viewType} visualization={visualization} />,
-    [viewType, visualization],
-  );
-
   const topologySideBar = React.useMemo(
     () => getTopologySideBar(visualization, selectedEntity, () => onSelect()),
     [onSelect, selectedEntity, visualization],
@@ -258,9 +254,17 @@ export const ConnectedTopologyView: React.FC<ComponentProps> = ({
   return (
     <div className="odc-topology">
       <Stack>
-        <StackItem isFilled={false}>{topologyFilterBar}</StackItem>
+        <StackItem isFilled={false}>
+          <TopologyFilterBar
+            viewType={viewType}
+            visualization={visualization}
+            viewContainer={viewContainer}
+          />
+        </StackItem>
         <StackItem isFilled className={containerClasses}>
-          <div className="pf-topology-content">{viewContent}</div>
+          <div ref={setViewContainer} className="pf-topology-content">
+            {viewContent}
+          </div>
           {topologySideBar.sidebar}
         </StackItem>
       </Stack>

frontend/packages/topology/src/components/quick-search/QuickSearch.tsx

@@ -6,16 +6,19 @@ import QuickSearchController from './QuickSearchController';
 
 interface QuickSearchProps {
   namespace: string;
+  viewContainer?: HTMLElement;
 }
 
-const QuickSearch: React.FC<QuickSearchProps> = ({ namespace }) => {
-  return (
-    <CatalogServiceProvider namespace={namespace}>
-      {(catalogService: CatalogService) => (
-        <QuickSearchController {...catalogService} namespace={namespace} />
-      )}
-    </CatalogServiceProvider>
-  );
-};
+const QuickSearch: React.FC<QuickSearchProps> = ({ namespace, viewContainer }) => (
+  <CatalogServiceProvider namespace={namespace}>
+    {(catalogService: CatalogService) => (
+      <QuickSearchController
+        {...catalogService}
+        namespace={namespace}
+        viewContainer={viewContainer}
+      />
+    )}
+  </CatalogServiceProvider>
+);
 
-export default QuickSearch;
+export default React.memo(QuickSearch);

frontend/packages/topology/src/components/quick-search/QuickSearchController.tsx

@@ -5,12 +5,14 @@ import QuickSearchModal from './QuickSearchModal';
 
 type QuickSearchControllerProps = CatalogService & {
   namespace: string;
+  viewContainer?: HTMLElement;
 };
 
 const QuickSearchController: React.FC<QuickSearchControllerProps> = ({
   namespace,
   searchCatalog,
   loaded,
+  viewContainer,
 }) => {
   const [isQuickSearchActive, setIsQuickSearchActive] = React.useState<boolean>(false);
 
@@ -43,6 +45,7 @@ const QuickSearchController: React.FC<QuickSearchControllerProps> = ({
         namespace={namespace}
         allCatalogItemsLoaded={loaded}
         searchCatalog={searchCatalog}
+        viewContainer={viewContainer}
       />
     </>
   );

frontend/packages/topology/src/components/quick-search/QuickSearchModal.tsx

@@ -10,6 +10,7 @@ interface QuickSearchModalProps {
   closeModal: () => void;
   allCatalogItemsLoaded: boolean;
   searchCatalog: (query: string) => CatalogItem[];
+  viewContainer?: HTMLElement;
 }
 
 const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
@@ -18,18 +19,20 @@ const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
   closeModal,
   searchCatalog,
   allCatalogItemsLoaded,
+  viewContainer,
 }) => {
   const { t } = useTranslation();
 
-  return (
+  return viewContainer ? (
     <Modal
       variant={ModalVariant.medium}
       aria-label={t('topology~Quick search')}
       isOpen={isOpen}
       showClose={false}
       position="top"
-      positionOffset="30%"
+      positionOffset="15%"
       hasNoBodyWrapper
+      appendTo={viewContainer}
     >
       <QuickSearchModalBody
         allCatalogItemsLoaded={allCatalogItemsLoaded}
@@ -38,7 +41,7 @@ const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
         closeModal={closeModal}
       />
     </Modal>
-  );
+  ) : null;
 };
 
 export default QuickSearchModal;

frontend/packages/topology/src/filters/TopologyFilterBar.tsx

@@ -43,6 +43,7 @@ type StateProps = {
 type OwnProps = {
   visualization?: Visualization;
   viewType: TopologyViewType;
+  viewContainer?: HTMLElement;
 };
 
 type TopologyFilterBarProps = StateProps & OwnProps;
@@ -53,6 +54,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
   visualization,
   viewType,
   namespace,
+  viewContainer,
 }) => {
   const { t } = useTranslation();
   const { filters, setTopologyFilters: onFiltersChange } = React.useContext(FilterContext);
@@ -74,7 +76,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
     <Toolbar className="co-namespace-bar odc-topology-filter-bar">
       <ToolbarContent>
         <ToolbarItem>
-          <QuickSearch namespace={namespace} />
+          <QuickSearch namespace={namespace} viewContainer={viewContainer} />
         </ToolbarItem>
         <ToolbarGroup variant={ToolbarGroupVariant['filter-group']}>
           <ToolbarItem>