fix: Fix command palette (#3777)

Author: akucharska

src/command-pallette/CommandPaletteProvider.tsx

@@ -6,7 +6,7 @@
   flex-grow: 1;
 }
 
-@media (max-width: 1040px) {
+@container (max-width: 1040px) {
   .command-palette-search-bar {
     width: 100% !important;
   }

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.scss

@@ -1,12 +1,14 @@
 import { useEffect, RefObject, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
+import { useRecoilValue } from 'recoil';
 import { Icon, Input } from '@ui5/webcomponents-react';
 import { K8sResource } from 'types';
+import { useEventListener } from 'hooks/useEventListener';
 import { useObjectState } from 'shared/useObjectState';
 import { CommandPaletteUI } from './CommandPaletteUI';
-import { useRecoilValue } from 'recoil';
 import { availableNodesSelector } from 'state/navigation/availableNodesSelector';
+import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
 import './CommandPaletteSearchBar.scss';
 
@@ -26,11 +28,15 @@ export function CommandPaletteSearchBar({
   useRecoilValue(availableNodesSelector); // preload the values to prevent page rerenders
   const { t } = useTranslation();
   const [open, setOpen] = useState(shouldFocus || false);
+  const [shellbarWidth, setShellbarWidth] = useState(window.innerWidth);
   const [resourceCache, updateResourceCache] = useObjectState<
     Record<string, K8sResource[]>
   >();
+  const showCompanion = useRecoilValue(showKymaCompanionState);
   const shouldShowDialog = shouldFocus ? shouldFocus : open;
 
+  const htmlWrapEl = document.getElementById('html-wrap');
+
   const setShowDialog = (value: boolean) => {
     const modalPresent =
       document.querySelector('ui5-dialog[open]') ||
@@ -41,6 +47,56 @@ export function CommandPaletteSearchBar({
     }
   };
 
+  const onKeyPress = (e: Event) => {
+    const { key, metaKey, ctrlKey } = e as KeyboardEvent;
+    // for (Edge, Chrome) || (Firefox, Safari)
+    const isMac = (
+      (navigator as any).userAgentData?.platform || navigator.platform
+    )
+      ?.toLowerCase()
+      ?.startsWith('mac');
+    const modifierKeyPressed = (isMac && metaKey) || (!isMac && ctrlKey);
+
+    if (
+      (key === 'k' || key === 'K') &&
+      modifierKeyPressed &&
+      window.location.pathname !== '/clusters'
+    ) {
+      setShowDialog(!shouldShowDialog);
+      // [on Firefox] prevent opening the browser search bar via CMD/CTRL+K
+      e.preventDefault();
+    }
+  };
+
+  useEventListener('keydown', onKeyPress, [shouldShowDialog]);
+
+  let timer: ReturnType<typeof setTimeout>;
+  function handleChangedWidth() {
+    clearTimeout(timer);
+
+    timer = setTimeout(() => {
+      setShellbarWidth(
+        showCompanion.show
+          ? shellbarRef?.current?.getBoundingClientRect().width || 0
+          : window.innerWidth,
+      );
+    }, 0);
+  }
+
+  useEffect(() => {
+    const elementObserver = new ResizeObserver(() => {
+      handleChangedWidth();
+    });
+
+    if (htmlWrapEl) {
+      elementObserver.observe(htmlWrapEl);
+    }
+    return () => {
+      elementObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showCompanion]);
+
   useEffect(() => {
     const shellbarCurr = shellbarRef?.current;
     const searchButton = shellbarCurr?.shadowRoot?.querySelector(
@@ -53,7 +109,7 @@ export function CommandPaletteSearchBar({
     if (
       searchButton &&
       searchField &&
-      window.innerWidth > SCREEN_SIZE_BREAKPOINT_M
+      shellbarWidth > SCREEN_SIZE_BREAKPOINT_M
     ) {
       searchButton.style.display = 'none';
 
@@ -65,7 +121,7 @@ export function CommandPaletteSearchBar({
       shellbarCurr?.removeAttribute('show-search-field');
       searchField.style.display = 'none';
     }
-  }, [window.innerWidth, shellbarRef?.current]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [shellbarRef?.current, shellbarWidth, shouldShowDialog]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <>
@@ -90,8 +146,9 @@ export function CommandPaletteSearchBar({
             }}
             resourceCache={resourceCache}
             updateResourceCache={updateResourceCache}
+            shellbarWidth={shellbarWidth}
           />,
-          document.body,
+          htmlWrapEl || document.body,
         )}
     </>
   );

src/command-pallette/CommandPalletteUI/CommandPaletteSearchBar.tsx

@@ -1,5 +1,5 @@
 .command-palette-ui {
-  position: fixed;
+  position: absolute;
   top: calc(var(--_ui5-v2-7-0_shellbar_root_height) + 0.5rem);
   width: 100%;
   height: 100%;
@@ -14,8 +14,8 @@
     display: flex;
     width: 60vw;
     max-width: 700px;
-    position: fixed;
-    top: 0.5rem;
+    position: absolute;
+    top: calc(var(--_ui5-v2-7-0_shellbar_root_height) * -1);
     opacity: 0%; //prevent visually jumping
   }
 
@@ -41,23 +41,37 @@
       display: none;
     }
   }
+
+  &__wrapper.full-size {
+    width: 100%;
+    max-width: unset;
+    height: 100%;
+    opacity: 100%;
+
+    .input-container {
+      .search-with-display-more {
+        margin-right: 2.5rem;
+      }
+
+      .input-back-button {
+        display: block;
+        padding: 0 0.25rem;
+        box-sizing: content-box;
+      }
+    }
+  }
 }
 
 @media (max-width: 1040px) {
   .command-palette-ui {
     &__wrapper {
-      width: 100vw;
+      width: 100%;
       max-width: unset;
-      top: 0;
       height: 100%;
       opacity: 100%;
     }
 
     .input-container {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
       .search-with-display-more {
         margin-right: 2.5rem;
       }

src/command-pallette/CommandPalletteUI/CommandPaletteUI.scss

@@ -16,6 +16,7 @@ import { Button, Icon, Input } from '@ui5/webcomponents-react';
 import './CommandPaletteUI.scss';
 import { handleActionIfFormOpen } from 'shared/components/UnsavedMessageBox/helpers';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
+import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { SCREEN_SIZE_BREAKPOINT_M } from './types';
 
@@ -46,13 +47,15 @@ type CommandPaletteProps = {
   hide: () => void;
   resourceCache: Record<string, K8sResource[]>;
   updateResourceCache: (key: string, resources: K8sResource[]) => void;
+  shellbarWidth: number;
 };
 
 export function CommandPaletteUI({
   showCommandPalette,
   hide,
   resourceCache,
   updateResourceCache,
+  shellbarWidth,
 }: CommandPaletteProps) {
   const namespace = useRecoilValue(activeNamespaceIdState);
   const [isResourceEdited, setIsResourceEdited] = useRecoilState(
@@ -69,6 +72,7 @@ export function CommandPaletteUI({
   const [activeResultIndex, setActiveResultIndex] = useState(0);
   const [isHistoryMode, setHistoryMode] = useState(false);
   const [historyIndex, setHistoryIndex] = useState(0);
+  const showCompanion = useRecoilValue(showKymaCompanionState);
 
   const commandPaletteRef = useRef<HTMLDivElement | null>(null);
 
@@ -110,18 +114,19 @@ export function CommandPaletteUI({
 
     //position Command Palette
     if (
-      window.innerWidth > SCREEN_SIZE_BREAKPOINT_M &&
+      shellbarWidth > SCREEN_SIZE_BREAKPOINT_M &&
       headerInput &&
       paletteCurrent
     ) {
       const shellbarRect = headerInput.getBoundingClientRect();
-      paletteCurrent.style.right = `${window.innerWidth -
-        shellbarRect.right}px`;
+      paletteCurrent.style.right = `${shellbarWidth - shellbarRect.right}px`;
+      paletteCurrent.style.left = 'unset';
       paletteCurrent.style.opacity = '100%'; //prevent visually jumping
     } else if (paletteCurrent) {
       paletteCurrent.style.right = '0px';
+      paletteCurrent.style.left = '0px';
     }
-  }, [showCommandPalette, window.innerWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [showCommandPalette, shellbarWidth]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const commandPaletteInput = document.getElementById('command-palette-search');
 
@@ -237,7 +242,11 @@ export function CommandPaletteUI({
   return (
     <Background hide={hide}>
       <div
-        className="command-palette-ui__wrapper"
+        className={`command-palette-ui__wrapper ${
+          showCompanion.show && shellbarWidth < SCREEN_SIZE_BREAKPOINT_M
+            ? 'full-size'
+            : ''
+        }`}
         role="dialog"
         ref={commandPaletteRef}
       >

src/command-pallette/CommandPalletteUI/CommandPaletteUI.tsx

@@ -6,6 +6,7 @@
 ui5-shellbar.header {
   padding: 0 !important;
   border-radius: 0.5rem;
+  container-type: inline-size;
 
   &::part(root) {
     padding-inline-start: 0.75rem;

src/header/Header.scss

@@ -9,7 +9,6 @@ import { savePreviousPath } from 'state/useAfterInitHook';
 
 import App from './components/App/App';
 import { Spinner } from 'shared/components/Spinner/Spinner';
-import { CommandPaletteProvider } from 'command-pallette/CommandPaletteProvider';
 import { NotificationProvider } from 'shared/contexts/NotificationContext';
 
 import { ThemeProvider } from '@ui5/webcomponents-react';
@@ -65,9 +64,7 @@ root.render(
       <BrowserRouter>
         <Suspense fallback={<Spinner />}>
           <NotificationProvider>
-            <CommandPaletteProvider>
-              <App />
-            </CommandPaletteProvider>
+            <App />
           </NotificationProvider>
         </Suspense>
       </BrowserRouter>