Feat/add global spotlight menu

e2e/tests/consumer_groups.list.spec.ts

@@ -47,6 +47,7 @@ const consumerGroups: APISIXType['ConsumerGroupPut'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllConsumerGroups(e2eReq);
     await Promise.all(

e2e/tests/consumers.list.spec.ts

@@ -49,6 +49,7 @@ const consumers: APISIXType['ConsumerPut'][] = Array.from({ length: 11 }, (_, i)
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllConsumers(e2eReq);
     await Promise.all(consumers.map((d) => putConsumerReq(e2eReq, d)));

e2e/tests/hot-path.upstream-service-route.spec.ts

@@ -61,6 +61,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
     scheme: 'https',
     nodes: [{ host: 'httpbin.org', port: 443 }],
   };
+
   await test.step('create upstream', async () => {
     // Navigate to the upstream list page
     await upstreamsPom.toIndex(page);
@@ -158,6 +159,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
       },
     },
   } satisfies Partial<APISIXType['Service']>;
+
   await test.step('create service', async () => {
     // upstream id should be set
     expect(service.upstream_id).not.toBeUndefined();
@@ -275,6 +277,7 @@ test('can create upstream -> service -> route', async ({ page }) => {
       },
     },
   };
+
   await test.step('create route', async () => {
     // service id should be set
     expect(route.service_id).not.toBeUndefined();

e2e/tests/plugin_configs.list.spec.ts

@@ -67,6 +67,7 @@ const pluginConfigs: APISIXType['PluginConfigPut'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllPluginConfigs(e2eReq);
     await Promise.all(pluginConfigs.map((d) => putPluginConfigReq(e2eReq, d)));

e2e/tests/protos.list.spec.ts

@@ -55,6 +55,7 @@ message TestMessage${i + 1} {
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     // Delete all existing protos
     const existingProtos = await e2eReq

e2e/tests/routes.list.spec.ts

@@ -63,6 +63,7 @@ const routes: APISIXType['Route'][] = Array.from({ length: 11 }, (_, i) => ({
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllRoutes(e2eReq);
     await Promise.all(routes.map((d) => putRouteReq(e2eReq, d)));

e2e/tests/services.crud-required-fields.spec.ts

@@ -41,6 +41,7 @@ test('should CRUD service with required fields', async ({ page }) => {
 
   await servicesPom.getAddServiceBtn(page).click();
   await servicesPom.isAddPage(page);
+
   await test.step('submit with required fields', async () => {
     await uiFillServiceRequiredFields(page, {
       name: serviceName,

e2e/tests/services.list.spec.ts

@@ -55,6 +55,7 @@ const services: APISIXType['Service'][] = Array.from({ length: 11 }, (_, i) => (
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllServices(e2eReq);
     await Promise.all(

e2e/tests/stream_routes.list.spec.ts

@@ -58,6 +58,7 @@ const streamRoutes: APISIXType['StreamRoute'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllStreamRoutes(e2eReq);
     await Promise.all(

e2e/tests/upstreams.list.spec.ts

@@ -60,6 +60,7 @@ const upstreams: APISIXType['Upstream'][] = Array.from(
 
 test.describe('page and page_size should work correctly', () => {
   test.describe.configure({ mode: 'serial' });
+
   test.beforeAll(async () => {
     await deleteAllUpstreams(e2eReq);
     await Promise.all(upstreams.map((d) => putUpstreamReq(e2eReq, d)));

package.json

@@ -20,6 +20,7 @@
     "@mantine/hooks": "^8.0.0",
     "@mantine/modals": "^8.0.0",
     "@mantine/notifications": "^8.0.0",
+    "@mantine/spotlight": "^8.3.15",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-router": "^1.116.0",
@@ -102,11 +103,12 @@
     "overrides": {
       "lodash": ">=4.17.21",
       "minimatch": ">=3.0.5",
-      "@swc/core": "1.10.0"
+      "@swc/core": "1.10.0",
+      "@iconify/utils": "3.0.1"
     },
     "onlyBuiltDependencies": [
       "@swc/core",
       "esbuild"
     ]
   }
-}
+}

src/components/GlobalSpotlight.tsx

@@ -0,0 +1,66 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ActionIcon } from '@mantine/core';
+import { Spotlight, spotlight } from '@mantine/spotlight';
+import { useNavigate } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import { navRoutes } from '@/config/navRoutes';
+import IconClose from '~icons/material-symbols/close';
+import IconDashboard from '~icons/material-symbols/dashboard-outline';
+import IconSearch from '~icons/material-symbols/search';
+
+export const GlobalSpotlight = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    const actions = navRoutes.map((route) => ({
+        id: route.to,
+        label: t(`sources.${route.label}`),
+        description: t('spotlight.jumpToDashboard', { resource: t(`sources.${route.label}`) }),
+        leftSection: <IconDashboard style={{ width: 18, height: 18, opacity: 0.7 }} />,
+        onClick: () => {
+            navigate({ to: route.to });
+        },
+    }));
+
+    return (
+        <Spotlight
+            actions={actions}
+            nothingFound={t('noData')}
+            highlightQuery
+            scrollAreaProps={{ type: 'always', offsetScrollbars: true, mah: 400 }}
+            searchProps={{
+                leftSection: <IconSearch style={{ width: 22, height: 22 }} />,
+                placeholder: 'Search resources... (Ctrl + K)',
+                rightSectionPointerEvents: 'all',
+                rightSection: (
+                    <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            spotlight.close();
+                        }}
+                    >
+                        <IconClose style={{ width: 18, height: 18 }} />
+                    </ActionIcon>
+                ),
+            }}
+        />
+    );
+};

src/main.tsx

@@ -16,6 +16,7 @@
  */
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import '@mantine/spotlight/styles.css';
 import './styles/global.css';
 
 import { createTheme, MantineProvider } from '@mantine/core';

src/routes/__root.tsx

@@ -21,6 +21,7 @@ import { createRootRoute, HeadContent, Outlet } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 import { I18nextProvider } from 'react-i18next';
 
+import { GlobalSpotlight } from '@/components/GlobalSpotlight';
 import { Header } from '@/components/Header';
 import { Navbar } from '@/components/Navbar';
 import { SettingsModal } from '@/components/page/SettingsModal';
@@ -55,6 +56,7 @@ const Root = () => {
       <TanStackRouterDevtools />
       <ReactQueryDevtools initialIsOpen={false} />
       <SettingsModal />
+      <GlobalSpotlight />
     </I18nextProvider>
   );
 };