From 37e8ff995eeea0d5672f7d7dd25bd8639299a23f Mon Sep 17 00:00:00 2001
From: solovevayaroslavna <iaroslavna.kozlova@simbirsoft.com>
Date: Fri, 19 May 2023 20:04:09 +0400
Subject: [PATCH] PMM-11773-Templates-select-issues: fix default value

---
 .../DBClusterAdvancedOptions.tsx                    |  1 +
 .../Templates/Templates.tsx                         | 13 +++++++++++--
 .../Templates/Templates.types.ts                    |  3 +++
 .../Templates/Templates.utils.ts                    |  4 +---
 .../EditDBClusterPage/EditDBClusterPage.tsx         |  5 +++++
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.tsx b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.tsx
index b40b63ad25735..464358dfd479c 100644
--- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.tsx
+++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.tsx
@@ -211,6 +211,7 @@ export const DBClusterAdvancedOptions: FC<DBClusterAdvancedOptionsProps> = ({
       <Templates
         k8sClusterName={selectedCluster ? selectedCluster.kubernetesClusterName : kubernetesCluster?.value}
         databaseType={databaseType?.value}
+        form={form}
       />
       <div className={styles.line}>
         <NumberInputField
diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx
index ed5b72cbac417..36fae1e4f9596 100644
--- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx
+++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx
@@ -11,9 +11,9 @@ import { AdvancedOptionsFields } from '../DBClusterAdvancedOptions.types';
 
 import { Messages } from './Templates.messages';
 import { TemplatesProps } from './Templates.types';
-import { getTemplatesOptions } from './Templates.utils';
+import { getTemplatesOptions, notSelectedOption } from './Templates.utils';
 
-export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType }) => {
+export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType, form }) => {
   const dispatch = useDispatch();
   const { result, loading } = useSelector(getDbaaSTemplates);
 
@@ -24,8 +24,16 @@ export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType })
     if (dbClusterType) {
       dispatch(fetchDBaaSTemplatesAction({ k8sClusterName, dbClusterType }));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [databaseType, dispatch, k8sClusterName]);
 
+  useEffect(() => {
+    if (templatesOptions.length === 1) {
+      form.mutators.resetTemplate(notSelectedOption);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [templatesOptions]);
+
   return (
     <Field
       dataTestId="templates-field"
@@ -34,6 +42,7 @@ export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType })
       component={AsyncSelectFieldAdapter}
       loading={loading}
       options={templatesOptions}
+      defaultValue={notSelectedOption}
     />
   );
 };
diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts
index c449af48d8a97..d2538ba4ea472 100644
--- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts
+++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts
@@ -1,9 +1,12 @@
+import { FormApi } from 'final-form';
+
 import { Databases } from '../../../../../../shared/core';
 import { DBClusterType } from '../../../DBCluster.types';
 
 export interface TemplatesProps {
   k8sClusterName: string;
   databaseType: Databases;
+  form: FormApi<Record<string, any>, Partial<Record<string, any>>>;
 }
 
 export interface DBClusterTemplate {
diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.utils.ts b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.utils.ts
index 6138fa85f3465..fdf6b63546df0 100644
--- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.utils.ts
+++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.utils.ts
@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 
 import { DBClusterTemplatesResponse } from './Templates.types';
-
+export const notSelectedOption = { label: 'Not selected', value: '' };
 export const getTemplatesOptions = (
   templatesResponce: DBClusterTemplatesResponse | undefined
 ): Array<SelectableValue<string>> => {
@@ -10,7 +10,5 @@ export const getTemplatesOptions = (
     label: template.name,
     value: template.kind,
   }));
-  const notSelectedOption = { label: 'Not selected', value: '' };
-
   return options?.length ? [...options, notSelectedOption] : [notSelectedOption];
 };
diff --git a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/EditDBClusterPage.tsx b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/EditDBClusterPage.tsx
index 3ef56109b314c..ffc1499580066 100644
--- a/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/EditDBClusterPage.tsx
+++ b/public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/EditDBClusterPage.tsx
@@ -4,7 +4,9 @@ import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Form } from 'react-final-form';
 import { Redirect, useHistory } from 'react-router-dom';
 
+import { SelectableValue } from '@grafana/data';
 import { Spinner, useStyles2 } from '@grafana/ui/src';
+import { AdvancedOptionsFields } from 'app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/DBClusterAdvancedOptions.types';
 import { useShowPMMAddressWarning } from 'app/percona/shared/components/hooks/showPMMAddressWarning';
 import { useSelector, useDispatch } from 'app/types';
 
@@ -93,6 +95,9 @@ export const EditDBClusterPage: FC<EditDBClusterPageProps> = () => {
             trimConfiguration: ([configuration]: string[], state, { changeValue }) => {
               changeValue(state, ConfigurationFields.configuration, () => configuration.trim());
             },
+            resetTemplate: (templateValue: SelectableValue<string>, state, { changeValue }) => {
+              changeValue(state, AdvancedOptionsFields.template, () => templateValue);
+            },
             ...arrayMutators,
           }}
           render={({ form, handleSubmit, valid, pristine, ...props }) => (