Copilot commented on code in PR #3313: URL: https://github.com/apache/apisix-dashboard/pull/3313#discussion_r2872323967
########## 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: `Jump to ${t(`sources.${route.label}`)} dashboard`, Review Comment: `description` is hard-coded English and concatenates translated fragments. This breaks localization for non-English users; consider moving the full description string into i18n (with interpolation for the resource name) instead of building it with a template literal. ```suggestion description: t('spotlight.jumpToDashboard', { resource: t(`sources.${route.label}`) }), ``` ########## 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: `Jump to ${t(`sources.${route.label}`)} dashboard`, + 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', Review Comment: The search input placeholder is hard-coded English and advertises only "Ctrl + K" even though the shortcut is typically platform-dependent (Cmd on macOS). This should be localized and either display a neutral "Mod + K" label or render the correct key combo per platform. ########## pnpm-lock.yaml: ########## @@ -1042,11 +1045,24 @@ packages: react: ^18.x || ^19.x react-dom: ^18.x || ^19.x + '@mantine/[email protected]': + resolution: {integrity: sha512-zKssw/6eBmkY+1sGAgD8Vpy7dU5MXcY/cpvfr65SfIknRljKM9D4Z9TflzgIpxEdhvozls06MPcxj/pZkGpELQ==} + peerDependencies: + '@mantine/core': 8.3.15 + '@mantine/hooks': 8.3.15 Review Comment: `@mantine/[email protected]` declares peer dependencies on `@mantine/core`/`@mantine/hooks` 8.3.15, but this lockfile resolves those peers to 8.3.12. This peer mismatch can cause subtle runtime/styling issues; align Mantine package versions and regenerate `pnpm-lock.yaml`. ```suggestion '@mantine/[email protected]': resolution: {integrity: sha512-zKssw/6eBmkY+1sGAgD8Vpy7dU5MXcY/cpvfr65SfIknRljKM9D4Z9TflzgIpxEdhvozls06MPcxj/pZkGpELQ==} peerDependencies: '@mantine/core': 8.3.12 '@mantine/hooks': 8.3.12 ``` ########## src/routes/__root.tsx: ########## @@ -55,6 +56,7 @@ const Root = () => { <TanStackRouterDevtools /> <ReactQueryDevtools initialIsOpen={false} /> <SettingsModal /> + <GlobalSpotlight /> </I18nextProvider> Review Comment: The new global Spotlight feature is user-facing but has no automated coverage. Given the existing Playwright e2e suite, add a test that triggers the palette via the keyboard shortcut and verifies selecting an action navigates to the expected page. ########## 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", Review Comment: `@mantine/spotlight` is pinned to 8.3.15, but the repo is currently locked to `@mantine/core`/`@mantine/hooks` 8.3.12 (see pnpm-lock peer deps). Please align Mantine package versions (core/hooks/spotlight/store) to the same patch version to avoid peer-dependency mismatches and potential runtime issues. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
