From 04ebe4e19aff3fe6b290def67541b64ed5d188bc Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Thu, 13 Oct 2022 20:37:55 +0300
Subject: [PATCH] [Lens] Fixes the dark theme inconcistency in text based mode
 (#143284)

---
 .../text_based/text_based_languages.tsx       | 138 ++++++++++--------
 1 file changed, 74 insertions(+), 64 deletions(-)

diff --git a/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx b/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
index 4b56b633715b4..f7e78e830669a 100644
--- a/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
+++ b/x-pack/plugins/lens/public/datasources/text_based/text_based_languages.tsx
@@ -14,6 +14,7 @@ import { IStorageWrapper } from '@kbn/kibana-utils-plugin/public';
 import type { AggregateQuery } from '@kbn/es-query';
 import type { SavedObjectReference } from '@kbn/core/public';
 import { EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
+import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import type { ExpressionsStart, DatatableColumnType } from '@kbn/expressions-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
@@ -343,15 +344,17 @@ export function getTextBasedDatasource({
     renderDataPanel(domElement: Element, props: DatasourceDataPanelProps<TextBasedPrivateState>) {
       const layerFields = TextBasedDatasource?.getSelectedFields?.(props.state);
       render(
-        <I18nProvider>
-          <TextBasedDataPanel
-            data={data}
-            dataViews={dataViews}
-            expressions={expressions}
-            layerFields={layerFields}
-            {...props}
-          />
-        </I18nProvider>,
+        <KibanaThemeProvider theme$={core.theme.theme$}>
+          <I18nProvider>
+            <TextBasedDataPanel
+              data={data}
+              dataViews={dataViews}
+              expressions={expressions}
+              layerFields={layerFields}
+              {...props}
+            />
+          </I18nProvider>
+        </KibanaThemeProvider>,
         domElement
       );
     },
@@ -398,60 +401,65 @@ export function getTextBasedDatasource({
         (column) => column.columnId === props.columnId
       );
       render(
-        <EuiFormRow
-          data-test-subj="text-based-languages-field-selection-row"
-          label={i18n.translate('xpack.lens.textBasedLanguages.chooseField', {
-            defaultMessage: 'Field',
-          })}
-          fullWidth
-          className="lnsIndexPatternDimensionEditor--padded"
-        >
-          <FieldSelect
-            existingFields={fields}
-            selectedField={selectedField}
-            onChoose={(choice) => {
-              const meta = fields.find((f) => f.name === choice.field)?.meta;
-              const newColumn = {
-                columnId: props.columnId,
-                fieldName: choice.field,
-                meta,
-              };
-              return props.setState(
-                !selectedField
-                  ? {
-                      ...props.state,
-                      layers: {
-                        ...props.state.layers,
-                        [props.layerId]: {
-                          ...props.state.layers[props.layerId],
-                          columns: [...props.state.layers[props.layerId].columns, newColumn],
-                          allColumns: [...props.state.layers[props.layerId].allColumns, newColumn],
+        <KibanaThemeProvider theme$={core.theme.theme$}>
+          <EuiFormRow
+            data-test-subj="text-based-languages-field-selection-row"
+            label={i18n.translate('xpack.lens.textBasedLanguages.chooseField', {
+              defaultMessage: 'Field',
+            })}
+            fullWidth
+            className="lnsIndexPatternDimensionEditor--padded"
+          >
+            <FieldSelect
+              existingFields={fields}
+              selectedField={selectedField}
+              onChoose={(choice) => {
+                const meta = fields.find((f) => f.name === choice.field)?.meta;
+                const newColumn = {
+                  columnId: props.columnId,
+                  fieldName: choice.field,
+                  meta,
+                };
+                return props.setState(
+                  !selectedField
+                    ? {
+                        ...props.state,
+                        layers: {
+                          ...props.state.layers,
+                          [props.layerId]: {
+                            ...props.state.layers[props.layerId],
+                            columns: [...props.state.layers[props.layerId].columns, newColumn],
+                            allColumns: [
+                              ...props.state.layers[props.layerId].allColumns,
+                              newColumn,
+                            ],
+                          },
                         },
-                      },
-                    }
-                  : {
-                      ...props.state,
-                      layers: {
-                        ...props.state.layers,
-                        [props.layerId]: {
-                          ...props.state.layers[props.layerId],
-                          columns: props.state.layers[props.layerId].columns.map((col) =>
-                            col.columnId !== props.columnId
-                              ? col
-                              : { ...col, fieldName: choice.field }
-                          ),
-                          allColumns: props.state.layers[props.layerId].allColumns.map((col) =>
-                            col.columnId !== props.columnId
-                              ? col
-                              : { ...col, fieldName: choice.field }
-                          ),
+                      }
+                    : {
+                        ...props.state,
+                        layers: {
+                          ...props.state.layers,
+                          [props.layerId]: {
+                            ...props.state.layers[props.layerId],
+                            columns: props.state.layers[props.layerId].columns.map((col) =>
+                              col.columnId !== props.columnId
+                                ? col
+                                : { ...col, fieldName: choice.field }
+                            ),
+                            allColumns: props.state.layers[props.layerId].allColumns.map((col) =>
+                              col.columnId !== props.columnId
+                                ? col
+                                : { ...col, fieldName: choice.field }
+                            ),
+                          },
                         },
-                      },
-                    }
-              );
-            }}
-          />
-        </EuiFormRow>,
+                      }
+                );
+              }}
+            />
+          </EuiFormRow>
+        </KibanaThemeProvider>,
         domElement
       );
     },
@@ -461,9 +469,11 @@ export function getTextBasedDatasource({
       props: DatasourceLayerPanelProps<TextBasedPrivateState>
     ) => {
       render(
-        <I18nProvider>
-          <LayerPanel {...props} />
-        </I18nProvider>,
+        <KibanaThemeProvider theme$={core.theme.theme$}>
+          <I18nProvider>
+            <LayerPanel {...props} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
         domElement
       );
     },