[ES|QL] Navigate to create new policy page from the editor (#167012)

## Summary

When a user is writing am ES|QL query with the enrich command and
doesn't have a policy then we want to navigate them from the editor to
the index management page to create one.

In the future the same action can open a flyout in order for the users
to not change context but we don't have it atm.


![enrich](178362e1-6778-4b40-98a7-2fca9bc35118)

---------

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
Stratoula Kalafateli 2023-09-27 12:58:06 +03:00 committed by GitHub
parent 2477e40c85
commit 32562aa53f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 3 deletions

View file

@ -45,9 +45,15 @@ export const buildNoPoliciesAvailableDefinition = (): AutocompleteCommandDefinit
insertText: '',
kind: 26,
detail: i18n.translate('monaco.esql.autocomplete.noPoliciesLabelsFound', {
defaultMessage: 'No policies found',
defaultMessage: 'Click to create',
}),
sortText: 'D',
command: {
id: 'esql.policies.create',
title: i18n.translate('monaco.esql.autocomplete.createNewPolicy', {
defaultMessage: 'Click to create',
}),
},
},
];

View file

@ -32,5 +32,5 @@ export interface UserDefinedVariables {
/** @internal **/
export type AutocompleteCommandDefinition = Pick<
monaco.languages.CompletionItem,
'label' | 'insertText' | 'kind' | 'detail' | 'documentation' | 'sortText'
'label' | 'insertText' | 'kind' | 'detail' | 'documentation' | 'sortText' | 'command'
>;

View file

@ -131,7 +131,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
const language = getAggregateQueryMode(query);
const queryString: string = query[language] ?? '';
const kibana = useKibana<TextBasedEditorDeps>();
const { dataViews, expressions, indexManagementApiService } = kibana.services;
const { dataViews, expressions, indexManagementApiService, application } = kibana.services;
const [code, setCode] = useState(queryString ?? '');
const [codeOneLiner, setCodeOneLiner] = useState('');
const [editorHeight, setEditorHeight] = useState(
@ -148,6 +148,16 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
useState<LanguageDocumentationSections>();
const policiesRef = useRef<SerializedEnrichPolicy[]>([]);
// Registers a command to redirect users to the index management page
// to create a new policy. The command is called by the buildNoPoliciesAvailableDefinition
monaco.editor.registerCommand('esql.policies.create', (...args) => {
application?.navigateToApp('management', {
path: 'data/index_management/enrich_policies/create',
openInNewTab: true,
});
});
const styles = textBasedLanguagedEditorStyles(
euiTheme,
isCompactFocused,