[ES|QL] Renames the textbased editor to esql editor (elastic#193521)

## Summary Renames the text-based-editor to esql-editor I tried to also rename components, data-test-subj, classNames and files. My focus is mostly on the plugin and package of the esql editor --------- Co-authored-by: kibanamachine <[email protected]>
juliaElastic · Sep 23, 2024 · d56a1bb · d56a1bb
1 parent e78ba89
commit d56a1bb
Show file tree

Hide file tree

Showing 66 changed files with 337 additions and 902 deletions.
diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.ts b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
@@ -54,7 +54,7 @@ const STORYBOOKS = [
   'language_documentation_popover',
   'unified_search',
   'random_sampling',
-  'text_based_editor',
+  'esql_editor',
 ];
 
 const GITHUB_CONTEXT = 'Build and Publish Storybooks';

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -429,6 +429,7 @@ src/plugins/esql @elastic/kibana-esql
 packages/kbn-esql-ast @elastic/kibana-esql
 examples/esql_ast_inspector @elastic/kibana-esql
 src/plugins/esql_datagrid @elastic/kibana-esql
+packages/kbn-esql-editor @elastic/kibana-esql
 packages/kbn-esql-utils @elastic/kibana-esql
 packages/kbn-esql-validation-autocomplete @elastic/kibana-esql
 examples/esql_validation_example @elastic/kibana-esql
@@ -919,7 +920,6 @@ test
 x-pack/test 
 x-pack/performance @elastic/appex-qa
 x-pack/examples/testing_embedded_lens @elastic/kibana-visualizations
-packages/kbn-text-based-editor @elastic/kibana-esql
 x-pack/examples/third_party_lens_navigation_prompt @elastic/kibana-visualizations
 x-pack/examples/third_party_vis_lens_example @elastic/kibana-visualizations
 x-pack/plugins/threat_intelligence @elastic/security-threat-hunting-investigations

diff --git a/.i18nrc.json b/.i18nrc.json
@@ -98,7 +98,7 @@
     "presentationUtil": "src/plugins/presentation_util",
     "randomSampling": "x-pack/packages/kbn-random-sampling",
     "reactPackages": "packages/react",
-    "textBasedEditor": "packages/kbn-text-based-editor",
+    "esqlEditor": "packages/kbn-esql-editor",
     "esqlUtils": "packages/kbn-esql-utils",
     "reporting": "packages/kbn-reporting",
     "savedObjects": "src/plugins/saved_objects",

diff --git a/package.json b/package.json
@@ -483,6 +483,7 @@
     "@kbn/esql-ast": "link:packages/kbn-esql-ast",
     "@kbn/esql-ast-inspector-plugin": "link:examples/esql_ast_inspector",
     "@kbn/esql-datagrid": "link:src/plugins/esql_datagrid",
+    "@kbn/esql-editor": "link:packages/kbn-esql-editor",
     "@kbn/esql-utils": "link:packages/kbn-esql-utils",
     "@kbn/esql-validation-autocomplete": "link:packages/kbn-esql-validation-autocomplete",
     "@kbn/esql-validation-example-plugin": "link:examples/esql_validation_example",
@@ -919,7 +920,6 @@
     "@kbn/telemetry-test-plugin": "link:test/plugin_functional/plugins/telemetry",
     "@kbn/test-feature-usage-plugin": "link:x-pack/test/licensing_plugin/plugins/test_feature_usage",
     "@kbn/testing-embedded-lens-plugin": "link:x-pack/examples/testing_embedded_lens",
-    "@kbn/text-based-editor": "link:packages/kbn-text-based-editor",
     "@kbn/third-party-lens-navigation-prompt-plugin": "link:x-pack/examples/third_party_lens_navigation_prompt",
     "@kbn/third-party-vis-lens-example-plugin": "link:x-pack/examples/third_party_vis_lens_example",
     "@kbn/threat-intelligence-plugin": "link:x-pack/plugins/threat_intelligence",

diff --git a/.../kbn-text-based-editor/.storybook/main.js → packages/kbn-esql-editor/.storybook/main.js b/.../kbn-text-based-editor/.storybook/main.js → packages/kbn-esql-editor/.storybook/main.js
diff --git a/...n-text-based-editor/.storybook/preview.js → ...ges/kbn-esql-editor/.storybook/preview.js b/...n-text-based-editor/.storybook/preview.js → ...ges/kbn-esql-editor/.storybook/preview.js
diff --git a/packages/kbn-text-based-editor/README.md → packages/kbn-esql-editor/README.md b/packages/kbn-text-based-editor/README.md → packages/kbn-esql-editor/README.md
@@ -1,16 +1,15 @@
-# @kbn/text-based-editor
+# @kbn/esql-editor
 
 Contains the editor for text based languages. Specifically for:
  - ESQL, with autocomplete and syntax highlighting
- - SQL, with syntax highlighting
 
 ---
 
 Contains the ESQL editor with the autocomplete and the autosuggest functionality (based on atlr). 
 The antlr code can be found in packages/kbn-monaco/src/esql
 
 A **monaco** based editor that is part of the unified search experience. It is rendered for all the applications that support text-based languages.
-In order to enable text based languages on your unified search bar add `textBasedLanguages: ['SQL', 'ESQL', '...']` to the dataViewPicker properties. 
+In order to enable text based languages on your unified search bar add `textBasedLanguages: ['ESQL', '...']` to the dataViewPicker properties. 
 
 
 ## Languages supported

diff --git a/packages/kbn-text-based-editor/index.ts → packages/kbn-esql-editor/index.ts b/packages/kbn-text-based-editor/index.ts → packages/kbn-esql-editor/index.ts
@@ -7,10 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type { TextBasedLanguagesEditorProps } from './src/types';
+export type { ESQLEditorProps } from './src/types';
 export { fetchFieldsFromESQL } from './src/fetch_fields_from_esql';
-import { TextBasedLanguagesEditor } from './src/text_based_languages_editor';
+import { ESQLEditor } from './src/esql_editor';
 
 // React.lazy support
 // eslint-disable-next-line import/no-default-export
-export default TextBasedLanguagesEditor;
+export default ESQLEditor;
diff --git a/...ages/kbn-text-based-editor/jest.config.js → packages/kbn-esql-editor/jest.config.js b/...ages/kbn-text-based-editor/jest.config.js → packages/kbn-esql-editor/jest.config.js
@@ -10,6 +10,6 @@
 module.exports = {
   preset: '@kbn/test',
   rootDir: '../..',
-  roots: ['<rootDir>/packages/kbn-text-based-editor'],
-  setupFilesAfterEnv: ['<rootDir>/packages/kbn-text-based-editor/setup_tests.ts'],
+  roots: ['<rootDir>/packages/kbn-esql-editor'],
+  setupFilesAfterEnv: ['<rootDir>/packages/kbn-esql-editor/setup_tests.ts'],
 };
diff --git a/packages/kbn-text-based-editor/kibana.jsonc → packages/kbn-esql-editor/kibana.jsonc b/packages/kbn-text-based-editor/kibana.jsonc → packages/kbn-esql-editor/kibana.jsonc
@@ -1,5 +1,5 @@
 {
   "type": "shared-browser",
-  "id": "@kbn/text-based-editor",
+  "id": "@kbn/esql-editor",
   "owner": "@elastic/kibana-esql",
 }
diff --git a/packages/kbn-text-based-editor/package.json → packages/kbn-esql-editor/package.json b/packages/kbn-text-based-editor/package.json → packages/kbn-esql-editor/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@kbn/text-based-editor",
+  "name": "@kbn/esql-editor",
   "private": true,
   "version": "1.0.0",
   "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",

diff --git a/...ages/kbn-text-based-editor/setup_tests.ts → packages/kbn-esql-editor/setup_tests.ts b/...ages/kbn-text-based-editor/setup_tests.ts → packages/kbn-esql-editor/setup_tests.ts
diff --git a/...__stories__/text_based_editor.stories.mdx → ...r/src/__stories__/esql_editor.stories.mdx b/...__stories__/text_based_editor.stories.mdx → ...r/src/__stories__/esql_editor.stories.mdx
@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { TextBasedLanguagesEditor } from '../text_based_languages_editor';
+import { ESQLEditor } from '../esql_editor';
 
 
 export const Template = (args) => 
@@ -12,19 +12,19 @@ export const Template = (args) =>
           uiSettings: { get: () => {} },
         }}
     >
-        <TextBasedLanguagesEditor {...args} />
+        <ESQLEditor {...args} />
     </KibanaContextProvider>
 </I18nProvider>;
 
 <Meta 
     title="Text based languages editor"
-    component={TextBasedLanguagesEditor}
+    component={ESQLEditor}
 />
 
 
 # Overview
 
-The TextBasedLanguagesEditor component is a reusable component and can be used to support text based languages in your application (SQL, ESQL):
+The ESQLEditor component is a reusable component and can be used to support text based languages in your application (SQL, ESQL):
 
 <Canvas>
     <Story 
@@ -71,4 +71,4 @@ When there are errors to the query the UI displays the errors to the editor:
 
 The component exposes the following properties:
 
-<ArgsTable story="expanded mode"/>
+<ArgsTable story="expanded mode"/>../esql_editor
diff --git a/...editor_footer/errors_warnings_popover.tsx → ...editor_footer/errors_warnings_popover.tsx b/...editor_footer/errors_warnings_popover.tsx → ...editor_footer/errors_warnings_popover.tsx
@@ -26,22 +26,22 @@ const getConstsByType = (type: 'error' | 'warning', count: number) => {
   if (type === 'error') {
     return {
       color: 'danger',
-      message: i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.errorCount', {
+      message: i18n.translate('esqlEditor.query.errorCount', {
         defaultMessage: '{count} {count, plural, one {error} other {errors}}',
         values: { count },
       }),
-      label: i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.errorsTitle', {
+      label: i18n.translate('esqlEditor.query.errorsTitle', {
         defaultMessage: 'Errors',
       }),
     };
   } else {
     return {
       color: 'warning',
-      message: i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.warningCount', {
+      message: i18n.translate('esqlEditor.query.warningCount', {
         defaultMessage: '{count} {count, plural, one {warning} other {warnings}}',
         values: { count },
       }),
-      label: i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.warningsTitle', {
+      label: i18n.translate('esqlEditor.query.warningsTitle', {
         defaultMessage: 'Warnings',
       }),
     };
@@ -79,14 +79,14 @@ function ErrorsWarningsContent({
                       <EuiIcon type={type} color={color} size="s" />
                     </EuiFlexItem>
                     <EuiFlexItem style={{ whiteSpace: 'nowrap' }}>
-                      {i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.lineNumber', {
+                      {i18n.translate('esqlEditor.query.lineNumber', {
                         defaultMessage: 'Line {lineNumber}',
                         values: { lineNumber: item.startLineNumber },
                       })}
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 </EuiFlexItem>
-                <EuiFlexItem grow={false} className="TextBasedLangEditor_errorMessage">
+                <EuiFlexItem grow={false} className="ESQLEditor_errorMessage">
                   {item.message}
                 </EuiFlexItem>
               </EuiFlexGroup>

diff --git a/.../src/editor_footer/feedback_component.tsx → .../src/editor_footer/feedback_component.tsx b/.../src/editor_footer/feedback_component.tsx → .../src/editor_footer/feedback_component.tsx
@@ -23,11 +23,11 @@ export function SubmitFeedbackComponent({ isSpaceReduced }: { isSpaceReduced?: b
             href={FEEDBACK_LINK}
             external={false}
             target="_blank"
-            data-test-subj="TextBasedLangEditor-feedback-link"
+            data-test-subj="ESQLEditor-feedback-link"
           >
             <EuiToolTip
               position="top"
-              content={i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.feedback', {
+              content={i18n.translate('esqlEditor.query.feedback', {
                 defaultMessage: 'Feedback',
               })}
             >
@@ -57,9 +57,9 @@ export function SubmitFeedbackComponent({ isSpaceReduced }: { isSpaceReduced?: b
                 font-size: 12px;
                 margin-right: ${euiTheme.size.m};
               `}
-              data-test-subj="TextBasedLangEditor-feedback-link"
+              data-test-subj="ESQLEditor-feedback-link"
             >
-              {i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.submitFeedback', {
+              {i18n.translate('esqlEditor.query.submitFeedback', {
                 defaultMessage: 'Submit feedback',
               })}
             </EuiLink>

diff --git a/...-based-editor/src/editor_footer/index.tsx → ...n-esql-editor/src/editor_footer/index.tsx b/...-based-editor/src/editor_footer/index.tsx → ...n-esql-editor/src/editor_footer/index.tsx
@@ -30,7 +30,7 @@ import { ErrorsWarningsFooterPopover } from './errors_warnings_popover';
 import { QueryHistoryAction, QueryHistory } from './query_history';
 import { SubmitFeedbackComponent } from './feedback_component';
 import { QueryWrapComponent } from './query_wrap_component';
-import type { TextBasedEditorDeps } from '../types';
+import type { ESQLEditorDeps } from '../types';
 
 const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
 const COMMAND_KEY = isMac ? '⌘' : '^';
@@ -81,7 +81,7 @@ export const EditorFooter = memo(function EditorFooter({
   measuredContainerWidth,
   code,
 }: EditorFooterProps) {
-  const kibana = useKibana<TextBasedEditorDeps>();
+  const kibana = useKibana<ESQLEditorDeps>();
   const { docLinks } = kibana.services;
   const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false);
   const [isLanguageComponentOpen, setIsLanguageComponentOpen] = useState(false);
@@ -126,7 +126,7 @@ export const EditorFooter = memo(function EditorFooter({
         <EuiFlexGroup
           gutterSize="s"
           justifyContent="spaceBetween"
-          data-test-subj="TextBasedLangEditor-footer"
+          data-test-subj="ESQLEditor-footer"
           css={styles.bottomContainer}
           responsive={false}
         >
@@ -141,13 +141,9 @@ export const EditorFooter = memo(function EditorFooter({
             >
               <QueryWrapComponent code={code} updateQuery={updateQuery} />
               <EuiFlexItem grow={false}>
-                <EuiText
-                  size="xs"
-                  color="subdued"
-                  data-test-subj="TextBasedLangEditor-footer-lines"
-                >
+                <EuiText size="xs" color="subdued" data-test-subj="ESQLEditor-footer-lines">
                   <p>
-                    {i18n.translate('textBasedEditor.query.textBasedLanguagesEditor.lineCount', {
+                    {i18n.translate('esqlEditor.query.lineCount', {
                       defaultMessage: '{count} {count, plural, one {line} other {lines}}',
                       values: { count: lines },
                     })}
@@ -159,28 +155,18 @@ export const EditorFooter = memo(function EditorFooter({
                 <EuiFlexItem grow={false}>
                   <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="center">
                     <EuiFlexItem grow={false}>
-                      <EuiText
-                        size="xs"
-                        color="subdued"
-                        data-test-subj="TextBasedLangEditor-date-info"
-                      >
+                      <EuiText size="xs" color="subdued" data-test-subj="ESQLEditor-date-info">
                         <p>
                           {isSpaceReduced
                             ? '@timestamp'
                             : detectedTimestamp
-                            ? i18n.translate(
-                                'textBasedEditor.query.textBasedLanguagesEditor.timestampDetected',
-                                {
-                                  defaultMessage: '{detectedTimestamp} found',
-                                  values: { detectedTimestamp },
-                                }
-                              )
-                            : i18n.translate(
-                                'textBasedEditor.query.textBasedLanguagesEditor.timestampNotDetected',
-                                {
-                                  defaultMessage: '@timestamp not found',
-                                }
-                              )}
+                            ? i18n.translate('esqlEditor.query.timestampDetected', {
+                                defaultMessage: '{detectedTimestamp} found',
+                                values: { detectedTimestamp },
+                              })
+                            : i18n.translate('esqlEditor.query.timestampNotDetected', {
+                                defaultMessage: '@timestamp not found',
+                              })}
                         </p>
                       </EuiText>
                     </EuiFlexItem>
@@ -190,27 +176,17 @@ export const EditorFooter = memo(function EditorFooter({
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="center">
                   <EuiFlexItem grow={false}>
-                    <EuiText
-                      size="xs"
-                      color="subdued"
-                      data-test-subj="TextBasedLangEditor-limit-info"
-                    >
+                    <EuiText size="xs" color="subdued" data-test-subj="ESQLEditor-limit-info">
                       <p>
                         {isSpaceReduced
-                          ? i18n.translate(
-                              'textBasedEditor.query.textBasedLanguagesEditor.limitInfoReduced',
-                              {
-                                defaultMessage: 'LIMIT {limit}',
-                                values: { limit },
-                              }
-                            )
-                          : i18n.translate(
-                              'textBasedEditor.query.textBasedLanguagesEditor.limitInfo',
-                              {
-                                defaultMessage: 'LIMIT {limit} rows',
-                                values: { limit },
-                              }
-                            )}
+                          ? i18n.translate('esqlEditor.query.limitInfoReduced', {
+                              defaultMessage: 'LIMIT {limit}',
+                              values: { limit },
+                            })
+                          : i18n.translate('esqlEditor.query.limitInfo', {
+                              defaultMessage: 'LIMIT {limit} rows',
+                              values: { limit },
+                            })}
                       </p>
                     </EuiText>
                   </EuiFlexItem>
@@ -263,18 +239,11 @@ export const EditorFooter = memo(function EditorFooter({
                 <EuiFlexItem grow={false}>
                   <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="center">
                     <EuiFlexItem grow={false}>
-                      <EuiText
-                        size="xs"
-                        color="subdued"
-                        data-test-subj="TextBasedLangEditor-run-query"
-                      >
+                      <EuiText size="xs" color="subdued" data-test-subj="ESQLEditor-run-query">
                         <p>
-                          {i18n.translate(
-                            'textBasedEditor.query.textBasedLanguagesEditor.runQuery',
-                            {
-                              defaultMessage: 'Run query',
-                            }
-                          )}
+                          {i18n.translate('esqlEditor.query.runQuery', {
+                            defaultMessage: 'Run query',
+                          })}
                         </p>
                       </EuiText>
                     </EuiFlexItem>
@@ -294,7 +263,7 @@ export const EditorFooter = memo(function EditorFooter({
                   <EuiButtonEmpty
                     iconType="documentation"
                     color="text"
-                    data-test-subj="TextBasedLangEditor-documentation"
+                    data-test-subj="ESQLEditor-documentation"
                     size="m"
                     onClick={() => toggleLanguageComponent()}
                     css={css`