PMM-11773-Templates-select-issues: fix templates reloading

public/app/percona/dbaas/components/DBCluster/DBCluster.service.ts

@@ -22,9 +22,6 @@ import {
   DBClusterListResponse,
   DBClusterSecretsResponse,
   DBClusterSecretsRequest,
-  DBClusterTemplatesResponse,
-  DBClusterTemplatesRequest,
-  DBClusterType,
   DBClusterResponse,
 } from './DBCluster.types';
 import { formatResources } from './DBCluster.utils';
@@ -112,14 +109,4 @@ export abstract class DBClusterService {
         };
       });
   }
-  static async getDBClusterTemplates(
-    kubernetesClusterName: string,
-    k8sClusterType: DBClusterType
-  ): Promise<DBClusterTemplatesResponse> {
-    return apiManagement.post<DBClusterTemplatesResponse, DBClusterTemplatesRequest>(
-      '/DBaaS/Templates/List',
-      { kubernetes_cluster_name: kubernetesClusterName, cluster_type: k8sClusterType },
-      true
-    );
-  }
 }

public/app/percona/dbaas/components/DBCluster/DBCluster.types.ts

@@ -3,6 +3,7 @@ import { BadgeColor } from '@grafana/ui';
 import { Databases } from 'app/percona/shared/core';
 
 import { DBClusterService } from './DBCluster.service';
+import { DBClusterTemplate } from './EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types';
 import { Operators } from './EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.types';
 
 export type AddDBClusterAction = (dbCluster: DBCluster) => void;
@@ -267,19 +268,6 @@ export interface DBClusterSecretsRequest {
   kubernetes_cluster_name: string;
 }
 
-export interface DBClusterTemplate {
-  name: string;
-  kind: string;
-}
-export interface DBClusterTemplatesResponse {
-  templates: DBClusterTemplate[];
-}
-
-export interface DBClusterTemplatesRequest {
-  kubernetes_cluster_name: string;
-  cluster_type: DBClusterType;
-}
-
 export interface DBClusterSecret {
   name: string;
 }

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.service.ts

@@ -1,18 +1,15 @@
-import { SelectableValue } from '@grafana/data';
+import { apiManagement } from 'app/percona/shared/helpers/api';
 
-import { Databases } from '../../../../../../shared/core';
-import { DBClusterService } from '../../../DBCluster.service';
-import { DatabaseToDBClusterTypeMapping } from '../../../DBCluster.types';
+import { DBClusterType } from '../../../DBCluster.types';
+
+import { DBClusterTemplatesRequest, DBClusterTemplatesResponse } from './Templates.types';
 
 export const TemplatesService = {
-  async loadTemplatesOptions(k8sClusterName: string, databaseType: Databases): Promise<Array<SelectableValue<string>>> {
-    const dbClusterType = DatabaseToDBClusterTypeMapping[databaseType];
-    const templatesResponse =
-      dbClusterType && (await DBClusterService.getDBClusterTemplates(k8sClusterName, dbClusterType));
-    const templates = templatesResponse?.templates || [];
-    return templates.map((template) => ({
-      label: template.name,
-      value: template.kind,
-    }));
+  getDBaaSTemplates(kubernetesClusterName: string, k8sClusterType: DBClusterType): Promise<DBClusterTemplatesResponse> {
+    return apiManagement.post<DBClusterTemplatesResponse, DBClusterTemplatesRequest>(
+      '/DBaaS/Templates/List',
+      { kubernetes_cluster_name: kubernetesClusterName, cluster_type: k8sClusterType },
+      true
+    );
   },
 };

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.tsx

@@ -1,19 +1,39 @@
-import { AsyncSelectField } from '@percona/platform-core';
-import React, { FC } from 'react';
+import React, { FC, useEffect, useMemo } from 'react';
+import { Field } from 'react-final-form';
 
+import { useDispatch, useSelector } from 'app/types';
+
+import { AsyncSelectFieldAdapter } from '../../../../../../shared/components/Form/FieldAdapters/FieldAdapters';
+import { fetchDBaaSTemplatesAction } from '../../../../../../shared/core/reducers';
+import { getDbaaSTemplates } from '../../../../../../shared/core/selectors';
+import { DatabaseToDBClusterTypeMapping } from '../../../DBCluster.types';
 import { AdvancedOptionsFields } from '../DBClusterAdvancedOptions.types';
 
 import { Messages } from './Templates.messages';
-import { TemplatesService } from './Templates.service';
 import { TemplatesProps } from './Templates.types';
+import { getTemplatesOptions } from './Templates.utils';
 
 export const Templates: FC<TemplatesProps> = ({ k8sClusterName, databaseType }) => {
+  const dispatch = useDispatch();
+  const { result, loading } = useSelector(getDbaaSTemplates);
+
+  const templatesOptions = useMemo(() => getTemplatesOptions(result), [result]);
+
+  useEffect(() => {
+    const dbClusterType = DatabaseToDBClusterTypeMapping[databaseType];
+    if (dbClusterType) {
+      dispatch(fetchDBaaSTemplatesAction({ k8sClusterName, dbClusterType }));
+    }
+  }, [databaseType, dispatch, k8sClusterName]);
+
   return (
-    <AsyncSelectField
+    <Field
+      dataTestId="templates-field"
       name={AdvancedOptionsFields.template}
       label={Messages.labels.templates}
-      loadOptions={() => TemplatesService.loadTemplatesOptions(k8sClusterName, databaseType)}
-      defaultOptions
+      component={AsyncSelectFieldAdapter}
+      loading={loading}
+      options={templatesOptions}
     />
   );
 };

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types.ts

@@ -1,6 +1,25 @@
 import { Databases } from '../../../../../../shared/core';
+import { DBClusterType } from '../../../DBCluster.types';
 
 export interface TemplatesProps {
   k8sClusterName: string;
   databaseType: Databases;
 }
+
+export interface DBClusterTemplate {
+  name: string;
+  kind: string;
+}
+export interface DBClusterTemplatesResponse {
+  templates: DBClusterTemplate[];
+}
+
+export interface DBClusterTemplatesRequest {
+  kubernetes_cluster_name: string;
+  cluster_type: DBClusterType;
+}
+
+export interface DBClusterTemplate {
+  name: string;
+  kind: string;
+}

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.utils.ts

@@ -0,0 +1,16 @@
+import { SelectableValue } from '@grafana/data';
+
+import { DBClusterTemplatesResponse } from './Templates.types';
+
+export const getTemplatesOptions = (
+  templatesResponce: DBClusterTemplatesResponse | undefined
+): Array<SelectableValue<string>> => {
+  const templates = templatesResponce?.templates || [];
+  const options = templates.map((template) => ({
+    label: template.name,
+    value: template.kind,
+  }));
+  const notSelectedOption = { label: 'Not selected', value: '' };
+
+  return options?.length ? [...options, notSelectedOption] : [notSelectedOption];
+};

public/app/percona/dbaas/components/DBCluster/__mocks__/dbClustersStubs.ts

@@ -9,8 +9,8 @@ import {
   DBClusterComponentVersionStatus,
   DBClusterAllocatedResources,
   ResourcesWithUnits,
-  DBClusterTemplate,
 } from '../DBCluster.types';
+import { DBClusterTemplate } from '../EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types';
 import { Operators } from '../EditDBClusterPage/DBClusterBasicOptions/DBClusterBasicOptions.types';
 
 export const dbClustersStub: DBCluster[] = [

public/app/percona/shared/core/reducers/dbaas/addDBCluster/addDBCluster.ts

@@ -124,12 +124,13 @@ export const addDbClusterAction = createAsyncThunk(
               secretsName: secretsName?.value || '',
             },
           }),
-        ...(template && {
-          template: {
-            name: template.label,
-            kind: template.value,
-          },
-        }),
+        ...(template &&
+          template.value && {
+            template: {
+              name: template.label,
+              kind: template.value,
+            },
+          }),
       }),
       {
         successMessage: 'Cluster was successfully added',

public/app/percona/shared/core/reducers/index.ts

@@ -3,6 +3,7 @@ import { combineReducers, createAsyncThunk, createSlice, PayloadAction } from '@
 import { CancelToken } from 'axios';
 
 import { createAsyncSlice, withAppEvents, withSerializedError } from 'app/features/alerting/unified/utils/redux';
+import { DBClusterTemplatesResponse } from 'app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.types';
 import { KubernetesService } from 'app/percona/dbaas/components/Kubernetes/Kubernetes.service';
 import { ComponentToUpdate, Kubernetes } from 'app/percona/dbaas/components/Kubernetes/Kubernetes.types';
 import { AlertRuleTemplateService } from 'app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.service';
@@ -12,6 +13,8 @@ import { Settings, SettingsAPIChangePayload } from 'app/percona/settings/Setting
 import { PlatformService } from 'app/percona/settings/components/Platform/Platform.service';
 import { api } from 'app/percona/shared/helpers/api';
 
+import { DBClusterType } from '../../../dbaas/components/DBCluster/DBCluster.types';
+import { TemplatesService } from '../../../dbaas/components/DBCluster/EditDBClusterPage/DBClusterAdvancedOptions/Templates/Templates.service';
 import { ServerInfo } from '../types';
 
 import advisorsReducers from './advisors/advisors';
@@ -213,6 +216,12 @@ export const fetchTemplatesAction = createAsyncThunk(
     )
 );
 
+export const fetchDBaaSTemplatesAction = createAsyncThunk(
+  'percona/fetchDbaaSTemplates',
+  async (args: { k8sClusterName: string; dbClusterType: DBClusterType }): Promise<DBClusterTemplatesResponse> =>
+    withSerializedError(TemplatesService.getDBaaSTemplates(args?.k8sClusterName, args?.dbClusterType))
+);
+
 const deleteKubernetesReducer = createAsyncSlice('deleteKubernetes', deleteKubernetesAction).reducer;
 const installKubernetesOperatorReducer = createAsyncSlice(
   'instalKuberneteslOperator',
@@ -221,13 +230,15 @@ const installKubernetesOperatorReducer = createAsyncSlice(
 const settingsReducer = createAsyncSlice('settings', fetchSettingsAction, initialSettingsState).reducer;
 const updateSettingsReducer = createAsyncSlice('updateSettings', updateSettingsAction).reducer;
 const templatesReducer = createAsyncSlice('templates', fetchTemplatesAction).reducer;
+const dbaasTemplatesReducer = createAsyncSlice('dbaasTemplates', fetchDBaaSTemplatesAction).reducer;
 
 export default {
   percona: combineReducers({
     settings: settingsReducer,
     updateSettings: updateSettingsReducer,
     user: perconaUserReducers,
     dbaas: perconaDBaaSReducer,
+    dbaasTemplates: dbaasTemplatesReducer,
     kubernetes: perconaK8SClusterListReducer,
     deleteKubernetes: deleteKubernetesReducer,
     addKubernetes: perconaK8SCluster,

public/app/percona/shared/core/selectors.ts

@@ -10,6 +10,7 @@ export const getPerconaSettingFlag = (setting: keyof Settings) => (state: StoreS
   !!state.percona.settings.result?.[setting];
 export const getPerconaUser = (state: StoreState) => state.percona.user;
 export const getDBaaS = (state: StoreState) => state.percona.dbaas;
+export const getDbaaSTemplates = (state: StoreState) => state.percona.dbaasTemplates;
 export const getKubernetes = (state: StoreState) => state.percona.kubernetes;
 export const getDeleteKubernetes = (state: StoreState) => state.percona.deleteKubernetes;
 export const getAddKubernetes = (state: StoreState) => state.percona.addKubernetes;