diff --git a/public/app/features/scopes/selector/ScopesTree.tsx b/public/app/features/scopes/selector/ScopesTree.tsx
index 71c7a879d63..e3fbc06e203 100644
--- a/public/app/features/scopes/selector/ScopesTree.tsx
+++ b/public/app/features/scopes/selector/ScopesTree.tsx
@@ -63,11 +63,20 @@ export function ScopesTree({
}
}
+ // Used as a label and placeholder for search field
+ const nodeTitle = scopeNodes[tree.scopeNodeId]?.spec?.title || '';
+ const searchArea = tree.scopeNodeId === '' ? '' : nodeTitle;
+
const lastExpandedNode = !anyChildExpanded && tree.expanded;
return (
<>
-
+
{tree.scopeNodeId === '' &&
!anyChildExpanded &&
recentScopes &&
diff --git a/public/app/features/scopes/selector/ScopesTreeSearch.tsx b/public/app/features/scopes/selector/ScopesTreeSearch.tsx
index 99a251d20bd..e84407aa00f 100644
--- a/public/app/features/scopes/selector/ScopesTreeSearch.tsx
+++ b/public/app/features/scopes/selector/ScopesTreeSearch.tsx
@@ -10,11 +10,12 @@ import { TreeNode } from './types';
export interface ScopesTreeSearchProps {
anyChildExpanded: boolean;
+ searchArea: string;
treeNode: TreeNode;
onNodeUpdate: (scopeNodeId: string, expanded: boolean, query: string) => void;
}
-export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate }: ScopesTreeSearchProps) {
+export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate, searchArea }: ScopesTreeSearchProps) {
const styles = useStyles2(getStyles);
const [inputState, setInputState] = useState<{ value: string; dirty: boolean }>({
@@ -42,9 +43,16 @@ export function ScopesTreeSearch({ anyChildExpanded, treeNode, onNodeUpdate }: S
return null;
}
+ const searchLabel = t('scopes.tree.search', 'Search {{parentTitle}}', {
+ parentTitle: searchArea,
+ });
+
return (
{
await resetScenes([fetchNodesSpy, fetchScopeSpy]);
});
+ it('Gives autofocus to search field when node is expanded', async () => {
+ await openSelector();
+ expect(screen.getByRole('textbox', { name: 'Search' })).not.toHaveFocus();
+
+ await expandResultApplications();
+ expect(screen.getByRole('textbox', { name: 'Search Applications' })).toHaveFocus();
+ });
+
it('Fetches scope details on select', async () => {
await openSelector();
await expandResultApplications();
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 0a72605b908..40ccbf5b567 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -11874,7 +11874,7 @@
"recommended": "Recommended",
"results": "Results"
},
- "search": "Search"
+ "search": "Search {{parentTitle}}"
}
},
"search": {