From a44f718c0904a2887e7d243c740075b8b1ae1671 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Fri, 18 Oct 2024 15:27:04 +0200
Subject: [PATCH] SingleTopNav: align `Command Palette` to the input (#94614)

---
 .../src/selectors/components.ts               |  1 +
 .../TopSearchBarCommandPaletteTrigger.tsx     |  3 ++-
 .../commandPalette/CommandPalette.tsx         | 25 +++++++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index bb6bd78a7b9..ddb683bf22c 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/components.ts
@@ -381,6 +381,7 @@ export const Components = {
   },
   NavToolbar: {
     container: 'data-testid Nav toolbar',
+    commandPaletteTrigger: 'data-testid Command palette trigger',
     shareDashboard: 'data-testid Share dashboard',
     markAsFavorite: 'data-testid Mark as favorite',
     editDashboard: {
diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
index 40092260310..8e94ab7bed9 100644
--- a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
@@ -3,6 +3,7 @@ import { useKBar, VisualState } from 'kbar';
 import { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { focusCss } from '@grafana/ui/src/themes/mixins';
@@ -60,7 +61,7 @@ function PretendTextInput({ onClick }: PretendTextInputProps) {
   // action. You don't actually type into it.
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} data-testid={selectors.components.NavToolbar.commandPaletteTrigger}>
       <div className={styles.inputWrapper}>
         <div className={styles.prefix}>
           <Icon name="search" />
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index 783f6c06a81..1125ce7ae6d 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -15,7 +15,8 @@ import {
 import { useEffect, useMemo, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { selectors } from '@grafana/e2e-selectors';
+import { config, reportInteraction } from '@grafana/runtime';
 import { EmptyState, Icon, LoadingBar, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
@@ -146,7 +147,18 @@ const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResults
   );
 };
 
+const getCommandPalettePosition = () => {
+  const input = document.querySelector(`[data-testid="${selectors.components.NavToolbar.commandPaletteTrigger}"]`);
+  const inputRightPosition = input?.getBoundingClientRect().right ?? 0;
+  const screenWidth = document.body.clientWidth;
+  const lateralSpace = screenWidth - inputRightPosition;
+  return lateralSpace;
+};
+
 const getSearchStyles = (theme: GrafanaTheme2) => {
+  const lateralSpace = getCommandPalettePosition();
+  const isSingleTopNav = config.featureToggles.singleTopNav;
+
   return {
     positioner: css({
       zIndex: theme.zIndex.portal,
@@ -164,14 +176,23 @@ const getSearchStyles = (theme: GrafanaTheme2) => {
       },
     }),
     animator: css({
-      maxWidth: theme.breakpoints.values.md,
       width: '100%',
+      maxWidth: theme.breakpoints.values.md,
       background: theme.colors.background.primary,
       color: theme.colors.text.primary,
       borderRadius: theme.shape.radius.default,
       border: `1px solid ${theme.colors.border.weak}`,
       overflow: 'hidden',
       boxShadow: theme.shadows.z3,
+      ...(isSingleTopNav && {
+        [theme.breakpoints.up('lg')]: {
+          position: 'fixed',
+          right: lateralSpace,
+          left: lateralSpace,
+          maxWidth: 'unset',
+          width: 'unset',
+        },
+      }),
     }),
     loadingBarContainer: css({
       position: 'absolute',