PMM-11773-Templates-select-issues: fix default value

Author: solovevayaroslavna

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

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}
     />
   );
 };

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 {

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];
 };

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 }) => (