fix: vis editor empty state

changelogs/fragments/11613.yml

@@ -0,0 +1,2 @@
+fix:
+- Vis editor should not import empty state component from legacy discover ([#11613](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11613))

src/plugins/explore/public/application/in_context_vis_editor/component/vis_editor_loading_state.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
+
+export const VisEditorLoadingState = () => {
+  return (
+    <EuiEmptyPrompt
+      className="visEditorEmptyPrompt"
+      data-test-subj="visEditorLoading"
+      icon={<EuiLoadingSpinner size="xl" data-test-subj="visEditorLoadingSpinner" />}
+      title={
+        <h2>
+          {i18n.translate('explore.visEditor.loading.title', {
+            defaultMessage: 'Running query',
+          })}
+        </h2>
+      }
+    />
+  );
+};

src/plugins/explore/public/application/in_context_vis_editor/component/vis_editor_no_results.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiEmptyPrompt, EuiIcon } from '@elastic/eui';
+
+export const VisEditorNoResults = () => {
+  return (
+    <EuiEmptyPrompt
+      className="visEditorEmptyPrompt"
+      data-test-subj="visEditorNoResults"
+      icon={<EuiIcon type="visualizeApp" size="xl" />}
+      title={
+        <h2>
+          {i18n.translate('explore.visEditor.noResults.title', {
+            defaultMessage: 'No results',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('explore.visEditor.noResults.body', {
+            defaultMessage: 'Try adjusting your query, expanding the time range',
+          })}
+        </p>
+      }
+    />
+  );
+};

src/plugins/explore/public/application/in_context_vis_editor/component/vis_editor_uninitialized.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiEmptyPrompt, EuiIcon } from '@elastic/eui';
+
+export const VisEditorUninitialized = () => {
+  return (
+    <EuiEmptyPrompt
+      className="visEditorEmptyPrompt"
+      data-test-subj="visEditorUninitialized"
+      icon={<EuiIcon type="visualizeApp" size="xl" />}
+      title={
+        <h2>
+          {i18n.translate('explore.visEditor.uninitialized.title', {
+            defaultMessage: 'Run a query to visualize your data',
+          })}
+        </h2>
+      }
+      body={
+        <p>
+          {i18n.translate('explore.visEditor.uninitialized.body', {
+            defaultMessage:
+              'Write a query in the editor below, then run it to see your data visualized.',
+          })}
+        </p>
+      }
+    />
+  );
+};

src/plugins/explore/public/application/in_context_vis_editor/component/visualization_editor_bottom_left_container.tsx

@@ -14,12 +14,10 @@ import {
   EuiIcon,
 } from '@elastic/eui';
 import { TimeRange } from 'src/plugins/data/common';
-import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
-import { ExploreServices } from '../../../types';
 import { QueryExecutionStatus } from '../../utils/state_management/types';
-import { DiscoverNoResults } from '../../legacy/discover/application/components/no_results/no_results';
-import { DiscoverUninitialized } from '../../legacy/discover/application/components/uninitialized/uninitialized';
-import { LoadingSpinner } from '../../legacy/discover/application/components/loading_spinner/loading_spinner';
+import { VisEditorUninitialized } from './vis_editor_uninitialized';
+import { VisEditorNoResults } from './vis_editor_no_results';
+import { VisEditorLoadingState } from './vis_editor_loading_state';
 import { useSearchContext } from '../../../components/query_panel/utils/use_search_context';
 import { QueryPanel } from './visualization_editor_query_panel';
 import { useQueryBuilderState } from '../hooks/use_query_builder_state';
@@ -39,43 +37,30 @@ const typeText = i18n.translate('explore.errorPanel.type', {
 });
 
 export const ResizableQueryPanelAndVisualization = () => {
-  const { services } = useOpenSearchDashboards<ExploreServices>();
-  const { queryBuilder, queryEditorState, datasetView } = useQueryBuilderState();
+  const { queryBuilder, queryEditorState } = useQueryBuilderState();
   const queryStatus = queryEditorState.queryStatus;
-  const dataview = datasetView.dataView;
-
-  const onRefresh = () => {
-    queryBuilder.executeQuery();
-  };
 
   const renderVis = () => {
     if (queryStatus.status === QueryExecutionStatus.NO_RESULTS) {
       return (
         <EditorPanel>
-          <DiscoverNoResults
-            queryString={services?.data?.query?.queryString}
-            query={services?.data?.query?.queryString?.getQuery()}
-            savedQuery={services?.data?.query?.savedQueries}
-            timeFieldName={dataview?.timeFieldName}
-          />
+          <VisEditorNoResults />
         </EditorPanel>
       );
     }
 
     if (queryStatus.status === QueryExecutionStatus.UNINITIALIZED) {
       return (
         <EditorPanel>
-          <div style={{ height: '100%' }}>
-            <DiscoverUninitialized onRefresh={onRefresh} />
-          </div>
+          <VisEditorUninitialized />
         </EditorPanel>
       );
     }
 
     if (queryStatus.status === QueryExecutionStatus.LOADING) {
       return (
         <EditorPanel>
-          <LoadingSpinner />
+          <VisEditorLoadingState />
         </EditorPanel>
       );
     }

src/plugins/explore/public/application/in_context_vis_editor/visualization_editor.scss

@@ -121,5 +121,13 @@ $osdHeaderOffset: $euiHeaderHeightCompensation;
     container-type: inline-size; // containment context
     /* stylelint-disable-next-line */
     container-name: canvas;
+
+    .visEditorEmptyPrompt {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }