From e7e5c5414847dda386daa254bdc9e3ce8f7a9025 Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Mon, 22 Nov 2021 14:14:11 +0000
Subject: [PATCH] Elasticsearch: Display custom values in version select
 (#42051)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Elasticsearch: Display custom values in version select

* Update public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>

Co-authored-by: Gábor Farkas <gabor.farkas@gmail.com>
---
 .../configuration/ElasticDetails.tsx              | 15 ++++++++++++---
 .../elasticsearch/configuration/utils.ts          |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
index 139f8f74aa3..6dbeb288ac0 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx
@@ -3,7 +3,8 @@ import { EventsWithValidation, regexValidation, LegacyForms } from '@grafana/ui'
 const { Switch, Select, Input, FormField } = LegacyForms;
 import { ElasticsearchOptions, Interval } from '../types';
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
-import { gte, lt } from 'semver';
+import { gte, lt, valid } from 'semver';
+import { isTruthy } from './utils';
 
 const indexPatternTypes: Array<SelectableValue<'none' | Interval>> = [
   { label: 'No pattern', value: 'none' },
@@ -34,6 +35,14 @@ type Props = {
   onChange: (value: DataSourceSettings<ElasticsearchOptions>) => void;
 };
 export const ElasticDetails = ({ value, onChange }: Props) => {
+  const currentVersion = esVersions.find((version) => version.value === value.jsonData.esVersion);
+  const customOption =
+    !currentVersion && valid(value.jsonData.esVersion)
+      ? {
+          label: value.jsonData.esVersion,
+          value: value.jsonData.esVersion,
+        }
+      : undefined;
   return (
     <>
       <h3 className="page-heading">Elasticsearch details</h3>
@@ -89,7 +98,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
             inputEl={
               <Select
                 menuShouldPortal
-                options={esVersions}
+                options={[customOption, ...esVersions].filter(isTruthy)}
                 onChange={(option) => {
                   const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(
                     value.jsonData.maxConcurrentShardRequests,
@@ -104,7 +113,7 @@ export const ElasticDetails = ({ value, onChange }: Props) => {
                     },
                   });
                 }}
-                value={esVersions.find((version) => version.value === value.jsonData.esVersion)}
+                value={currentVersion || customOption}
               />
             }
           />
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/utils.ts b/public/app/plugins/datasource/elasticsearch/configuration/utils.ts
index d4a4656267d..e88d768e8f5 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/utils.ts
+++ b/public/app/plugins/datasource/elasticsearch/configuration/utils.ts
@@ -37,3 +37,7 @@ export const isValidOptions = (options: DataSourceSettings<ElasticsearchOptions,
     options.jsonData.logLevelField !== undefined
   );
 };
+
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
+
+export const isTruthy = <T>(value: T): value is Truthy<T> => Boolean(value);