@backstage/plugin-search-react 1.9.0 → 1.9.1-next.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @backstage/plugin-search-react
 
+## 1.9.1-next.1
+
+### Patch Changes
+
+- 869fa46: SearchBar clear button support i18n
+- Updated dependencies
+  - @backstage/core-components@0.17.3-next.0
+  - @backstage/frontend-plugin-api@0.10.3-next.1
+  - @backstage/core-plugin-api@1.10.7
+  - @backstage/theme@0.6.6
+  - @backstage/types@1.2.1
+  - @backstage/version-bridge@1.0.11
+  - @backstage/plugin-search-common@1.2.18
+
+## 1.9.1-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.3-next.0
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/alpha.d.ts

@@ -131,6 +131,7 @@ declare const SearchFilterBlueprint: _backstage_frontend_plugin_api.ExtensionBlu
 declare const searchReactTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"search-react", {
     readonly "searchBar.title": "Search";
     readonly "searchBar.placeholder": "Search in {{org}}";
+    readonly "searchBar.clearButtonTitle": "Clear";
     readonly "searchFilter.allOptionTitle": "All";
     readonly "searchPagination.limitLabel": "Results per page:";
     readonly "searchPagination.limitText": "of {{num}}";

package/dist/components/SearchBar/SearchBar.esm.js

@@ -83,7 +83,7 @@ const SearchBarBase = forwardRef((props, ref) => {
   const clearButtonEndAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
     Button,
     {
-      "aria-label": "Clear",
+      "aria-label": t("searchBar.clearButtonTitle"),
       size: "small",
       onClick: handleClear,
       onKeyDown: (event) => {
@@ -91,7 +91,7 @@ const SearchBarBase = forwardRef((props, ref) => {
           event.stopPropagation();
         }
       },
-      children: "Clear"
+      children: t("searchBar.clearButtonTitle")
     }
   ) });
   return /* @__PURE__ */ jsx(SearchContextProvider, { inheritParentContextIfAvailable: true, children: /* @__PURE__ */ jsx(

package/dist/components/SearchBar/SearchBar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AnalyticsContext,\n  configApiRef,\n  useApi,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport DefaultSearchIcon from '@material-ui/icons/Search';\nimport {\n  ReactNode,\n  ChangeEvent,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { SearchContextProvider, useSearch } from '../../context';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchReactTranslationRef } from '../../translation';\n\n/**\n * Props for {@link SearchBarBase}.\n *\n * @public\n */\nexport type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {\n  debounceTime?: number;\n  clearButton?: boolean;\n  onClear?: () => void;\n  onSubmit?: () => void;\n  onChange: (value: string) => void;\n  endAdornment?: ReactNode;\n};\n\n/**\n * All search boxes exported by the search plugin are based on the <SearchBarBase />,\n * and this one is based on the <InputBase /> component from Material UI.\n * Recommended if you don't use Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBarBase = forwardRef((props: SearchBarBaseProps, ref) => {\n  const {\n    onChange,\n    onKeyDown = () => {},\n    onClear = () => {},\n    onSubmit = () => {},\n    debounceTime = 200,\n    clearButton = true,\n    fullWidth = true,\n    value: defaultValue,\n    label,\n    placeholder,\n    inputProps = {},\n    InputProps = {},\n    endAdornment,\n    ...rest\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const [value, setValue] = useState<string>('');\n  const forwardedValueRef = useRef<string>('');\n  const { t } = useTranslationRef(searchReactTranslationRef);\n\n  useEffect(() => {\n    setValue(prevValue => {\n      // We only update the value if our current value is the same as it was\n      // for the most recent onChange call. Otherwise it means that the users\n      // has continued typing and we should not replace their input.\n      if (prevValue === forwardedValueRef.current) {\n        return String(defaultValue);\n      }\n      return prevValue;\n    });\n  }, [defaultValue, forwardedValueRef]);\n\n  useDebounce(\n    () => {\n      forwardedValueRef.current = value;\n      onChange(value);\n    },\n    debounceTime,\n    [value],\n  );\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n    },\n    [setValue],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e);\n      if (onSubmit && e.key === 'Enter') {\n        onSubmit();\n      }\n    },\n    [onKeyDown, onSubmit],\n  );\n\n  const handleClear = useCallback(() => {\n    forwardedValueRef.current = '';\n    onChange('');\n    setValue('');\n    if (onClear) {\n      onClear();\n    }\n  }, [onChange, onClear]);\n\n  const ariaLabel: string | undefined = label\n    ? undefined\n    : t('searchBar.title');\n\n  const inputPlaceholder =\n    placeholder ??\n    t('searchBar.placeholder', {\n      org: configApi.getOptionalString('app.title') || 'Backstage',\n    });\n  const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;\n\n  const startAdornment = (\n    <InputAdornment position=\"start\">\n      <IconButton aria-label=\"Query\" size=\"small\" disabled>\n        <SearchIcon />\n      </IconButton>\n    </InputAdornment>\n  );\n\n  const clearButtonEndAdornment = (\n    <InputAdornment position=\"end\">\n      <Button\n        aria-label=\"Clear\"\n        size=\"small\"\n        onClick={handleClear}\n        onKeyDown={event => {\n          if (event.key === 'Enter') {\n            // write your functionality here\n            event.stopPropagation();\n          }\n        }}\n      >\n        Clear\n      </Button>\n    </InputAdornment>\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <TextField\n        id=\"search-bar-text-field\"\n        data-testid=\"search-bar-next\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        inputRef={ref}\n        value={value}\n        label={label}\n        placeholder={inputPlaceholder}\n        InputProps={{\n          startAdornment,\n          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,\n          ...InputProps,\n        }}\n        inputProps={{\n          'aria-label': ariaLabel,\n          ...inputProps,\n        }}\n        fullWidth={fullWidth}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n    </SearchContextProvider>\n  );\n});\n\n/**\n * Props for {@link SearchBar}.\n *\n * @public\n */\nexport type SearchBarProps = Partial<SearchBarBaseProps>;\n\n/**\n * Recommended search bar when you use the Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBar = forwardRef((props: SearchBarProps, ref) => {\n  const { value: initialValue = '', onChange, ...rest } = props;\n\n  const { term, setTerm } = useSearch();\n\n  useEffect(() => {\n    if (initialValue) {\n      setTerm(String(initialValue));\n    }\n  }, [initialValue, setTerm]);\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (onChange) {\n        onChange(newValue);\n      } else {\n        setTerm(newValue);\n      }\n    },\n    [onChange, setTerm],\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <AnalyticsContext\n        attributes={{ pluginId: 'search', extension: 'SearchBar' }}\n      >\n        <SearchBarBase\n          {...rest}\n          ref={ref}\n          value={term}\n          onChange={handleChange}\n        />\n      </AnalyticsContext>\n    </SearchContextProvider>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchBar.esm.js","sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AnalyticsContext,\n  configApiRef,\n  useApi,\n  useApp,\n} from '@backstage/core-plugin-api';\nimport IconButton from '@material-ui/core/IconButton';\nimport InputAdornment from '@material-ui/core/InputAdornment';\nimport TextField from '@material-ui/core/TextField';\nimport Button from '@material-ui/core/Button';\nimport { TextFieldProps } from '@material-ui/core/TextField';\nimport DefaultSearchIcon from '@material-ui/icons/Search';\nimport {\n  ReactNode,\n  ChangeEvent,\n  forwardRef,\n  KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useDebounce from 'react-use/esm/useDebounce';\nimport { SearchContextProvider, useSearch } from '../../context';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { searchReactTranslationRef } from '../../translation';\n\n/**\n * Props for {@link SearchBarBase}.\n *\n * @public\n */\nexport type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {\n  debounceTime?: number;\n  clearButton?: boolean;\n  onClear?: () => void;\n  onSubmit?: () => void;\n  onChange: (value: string) => void;\n  endAdornment?: ReactNode;\n};\n\n/**\n * All search boxes exported by the search plugin are based on the <SearchBarBase />,\n * and this one is based on the <InputBase /> component from Material UI.\n * Recommended if you don't use Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBarBase = forwardRef((props: SearchBarBaseProps, ref) => {\n  const {\n    onChange,\n    onKeyDown = () => {},\n    onClear = () => {},\n    onSubmit = () => {},\n    debounceTime = 200,\n    clearButton = true,\n    fullWidth = true,\n    value: defaultValue,\n    label,\n    placeholder,\n    inputProps = {},\n    InputProps = {},\n    endAdornment,\n    ...rest\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const [value, setValue] = useState<string>('');\n  const forwardedValueRef = useRef<string>('');\n  const { t } = useTranslationRef(searchReactTranslationRef);\n\n  useEffect(() => {\n    setValue(prevValue => {\n      // We only update the value if our current value is the same as it was\n      // for the most recent onChange call. Otherwise it means that the users\n      // has continued typing and we should not replace their input.\n      if (prevValue === forwardedValueRef.current) {\n        return String(defaultValue);\n      }\n      return prevValue;\n    });\n  }, [defaultValue, forwardedValueRef]);\n\n  useDebounce(\n    () => {\n      forwardedValueRef.current = value;\n      onChange(value);\n    },\n    debounceTime,\n    [value],\n  );\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n    },\n    [setValue],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e);\n      if (onSubmit && e.key === 'Enter') {\n        onSubmit();\n      }\n    },\n    [onKeyDown, onSubmit],\n  );\n\n  const handleClear = useCallback(() => {\n    forwardedValueRef.current = '';\n    onChange('');\n    setValue('');\n    if (onClear) {\n      onClear();\n    }\n  }, [onChange, onClear]);\n\n  const ariaLabel: string | undefined = label\n    ? undefined\n    : t('searchBar.title');\n\n  const inputPlaceholder =\n    placeholder ??\n    t('searchBar.placeholder', {\n      org: configApi.getOptionalString('app.title') || 'Backstage',\n    });\n  const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;\n\n  const startAdornment = (\n    <InputAdornment position=\"start\">\n      <IconButton aria-label=\"Query\" size=\"small\" disabled>\n        <SearchIcon />\n      </IconButton>\n    </InputAdornment>\n  );\n\n  const clearButtonEndAdornment = (\n    <InputAdornment position=\"end\">\n      <Button\n        aria-label={t('searchBar.clearButtonTitle')}\n        size=\"small\"\n        onClick={handleClear}\n        onKeyDown={event => {\n          if (event.key === 'Enter') {\n            // write your functionality here\n            event.stopPropagation();\n          }\n        }}\n      >\n        {t('searchBar.clearButtonTitle')}\n      </Button>\n    </InputAdornment>\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <TextField\n        id=\"search-bar-text-field\"\n        data-testid=\"search-bar-next\"\n        variant=\"outlined\"\n        margin=\"normal\"\n        inputRef={ref}\n        value={value}\n        label={label}\n        placeholder={inputPlaceholder}\n        InputProps={{\n          startAdornment,\n          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,\n          ...InputProps,\n        }}\n        inputProps={{\n          'aria-label': ariaLabel,\n          ...inputProps,\n        }}\n        fullWidth={fullWidth}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n    </SearchContextProvider>\n  );\n});\n\n/**\n * Props for {@link SearchBar}.\n *\n * @public\n */\nexport type SearchBarProps = Partial<SearchBarBaseProps>;\n\n/**\n * Recommended search bar when you use the Search Provider or Search Context.\n *\n * @public\n */\nexport const SearchBar = forwardRef((props: SearchBarProps, ref) => {\n  const { value: initialValue = '', onChange, ...rest } = props;\n\n  const { term, setTerm } = useSearch();\n\n  useEffect(() => {\n    if (initialValue) {\n      setTerm(String(initialValue));\n    }\n  }, [initialValue, setTerm]);\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      if (onChange) {\n        onChange(newValue);\n      } else {\n        setTerm(newValue);\n      }\n    },\n    [onChange, setTerm],\n  );\n\n  return (\n    <SearchContextProvider inheritParentContextIfAvailable>\n      <AnalyticsContext\n        attributes={{ pluginId: 'search', extension: 'SearchBar' }}\n      >\n        <SearchBarBase\n          {...rest}\n          ref={ref}\n          value={term}\n          onChange={handleChange}\n        />\n      </AnalyticsContext>\n    </SearchContextProvider>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/translation.esm.js

@@ -5,7 +5,8 @@ const searchReactTranslationRef = createTranslationRef({
   messages: {
     searchBar: {
       title: "Search",
-      placeholder: "Search in {{org}}"
+      placeholder: "Search in {{org}}",
+      clearButtonTitle: "Clear"
     },
     searchFilter: {
       allOptionTitle: "All"

package/dist/translation.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * @alpha\n */\nexport const searchReactTranslationRef = createTranslationRef({\n  id: 'search-react',\n  messages: {\n    searchBar: {\n      title: 'Search',\n      placeholder: 'Search in {{org}}',\n    },\n    searchFilter: {\n      allOptionTitle: 'All',\n    },\n    searchPagination: {\n      limitLabel: 'Results per page:',\n      limitText: 'of {{num}}',\n    },\n    noResultsDescription: 'Sorry, no results were found',\n    searchResultGroup: {\n      linkTitle: 'See All',\n      addFilterButtonTitle: 'Add filter',\n    },\n    searchResultPager: {\n      previous: 'Previous',\n      next: 'Next',\n    },\n  },\n});\n"],"names":[],"mappings":";;AAqBO,MAAM,4BAA4B,oBAAqB,CAAA;AAAA,EAC5D,EAAI,EAAA,cAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,KAAO,EAAA,QAAA;AAAA,MACP,WAAa,EAAA;AAAA,KACf;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,cAAgB,EAAA;AAAA,KAClB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,UAAY,EAAA,mBAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,oBAAsB,EAAA,8BAAA;AAAA,IACtB,iBAAmB,EAAA;AAAA,MACjB,SAAW,EAAA,SAAA;AAAA,MACX,oBAAsB,EAAA;AAAA,KACxB;AAAA,IACA,iBAAmB,EAAA;AAAA,MACjB,QAAU,EAAA,UAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR;AAEJ,CAAC;;;;"}
+{"version":3,"file":"translation.esm.js","sources":["../src/translation.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createTranslationRef } from '@backstage/core-plugin-api/alpha';\n\n/**\n * @alpha\n */\nexport const searchReactTranslationRef = createTranslationRef({\n  id: 'search-react',\n  messages: {\n    searchBar: {\n      title: 'Search',\n      placeholder: 'Search in {{org}}',\n      clearButtonTitle: 'Clear',\n    },\n    searchFilter: {\n      allOptionTitle: 'All',\n    },\n    searchPagination: {\n      limitLabel: 'Results per page:',\n      limitText: 'of {{num}}',\n    },\n    noResultsDescription: 'Sorry, no results were found',\n    searchResultGroup: {\n      linkTitle: 'See All',\n      addFilterButtonTitle: 'Add filter',\n    },\n    searchResultPager: {\n      previous: 'Previous',\n      next: 'Next',\n    },\n  },\n});\n"],"names":[],"mappings":";;AAqBO,MAAM,4BAA4B,oBAAqB,CAAA;AAAA,EAC5D,EAAI,EAAA,cAAA;AAAA,EACJ,QAAU,EAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,KAAO,EAAA,QAAA;AAAA,MACP,WAAa,EAAA,mBAAA;AAAA,MACb,gBAAkB,EAAA;AAAA,KACpB;AAAA,IACA,YAAc,EAAA;AAAA,MACZ,cAAgB,EAAA;AAAA,KAClB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,UAAY,EAAA,mBAAA;AAAA,MACZ,SAAW,EAAA;AAAA,KACb;AAAA,IACA,oBAAsB,EAAA,8BAAA;AAAA,IACtB,iBAAmB,EAAA;AAAA,MACjB,SAAW,EAAA,SAAA;AAAA,MACX,oBAAsB,EAAA;AAAA,KACxB;AAAA,IACA,iBAAmB,EAAA;AAAA,MACjB,QAAU,EAAA,UAAA;AAAA,MACV,IAAM,EAAA;AAAA;AACR;AAEJ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-search-react",
-  "version": "1.9.0",
+  "version": "1.9.1-next.1",
   "backstage": {
     "role": "web-library",
     "pluginId": "search",
@@ -64,13 +64,13 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/core-components": "^0.17.2",
-    "@backstage/core-plugin-api": "^1.10.7",
-    "@backstage/frontend-plugin-api": "^0.10.2",
-    "@backstage/plugin-search-common": "^1.2.18",
-    "@backstage/theme": "^0.6.6",
-    "@backstage/types": "^1.2.1",
-    "@backstage/version-bridge": "^1.0.11",
+    "@backstage/core-components": "0.17.3-next.0",
+    "@backstage/core-plugin-api": "1.10.7",
+    "@backstage/frontend-plugin-api": "0.10.3-next.1",
+    "@backstage/plugin-search-common": "1.2.18",
+    "@backstage/theme": "0.6.6",
+    "@backstage/types": "1.2.1",
+    "@backstage/version-bridge": "1.0.11",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
@@ -80,11 +80,11 @@
     "uuid": "^11.0.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.32.1",
-    "@backstage/core-app-api": "^1.17.0",
-    "@backstage/frontend-app-api": "^0.11.2",
-    "@backstage/frontend-test-utils": "^0.3.2",
-    "@backstage/test-utils": "^1.7.8",
+    "@backstage/cli": "0.33.0-next.1",
+    "@backstage/core-app-api": "1.17.0",
+    "@backstage/frontend-app-api": "0.11.3-next.1",
+    "@backstage/frontend-test-utils": "0.3.3-next.1",
+    "@backstage/test-utils": "1.7.8",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",