PMM-11704-restore-from-selection: fix updation of backupsArtifacts

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

@@ -1,18 +1,8 @@
 import { SelectableValue } from '@grafana/data';
 
 import { DBClusterService } from '../../DBCluster.service';
-import { DBaaSBackupService } from '../DBaaSBackups/DBaaSBackups.service';
 
 export const RestoreService = {
-  async loadBackupArtifacts(locationId: string): Promise<Array<SelectableValue<string>>> {
-    const backupArtifactsResponse = await DBaaSBackupService.list(locationId);
-
-    return backupArtifactsResponse.map((backup) => ({
-      label: backup.key,
-      value: backup.key,
-    }));
-  },
-
   async loadSecretsNames(k8sClusterName: string): Promise<Array<SelectableValue<string>>> {
     const secretsResponse = await DBClusterService.getDBClusterSecrets(k8sClusterName);
     const secrets = secretsResponse?.secrets || [];

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.test.tsx

@@ -58,7 +58,7 @@ describe('DBaaS DBCluster creation Restore section ::', () => {
     expect(screen.getByTestId('toggle-scheduled-restore')).toBeInTheDocument();
     const checkbox = screen.getByTestId('toggle-scheduled-restore');
     await waitFor(() => fireEvent.click(checkbox));
-    expect(screen.getByTestId('backupArtifact-field-container')).toBeInTheDocument();
+    expect(screen.getByTestId('backup-select-wrapper')).toBeInTheDocument();
   });
   it('shows secrets field if kubernetesCluster name exists in form', async () => {
     await waitFor(() =>

public/app/percona/dbaas/components/DBCluster/EditDBClusterPage/Restore/Restore.tsx

@@ -1,13 +1,14 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useEffect } from 'react';
 import { Field } from 'react-final-form';
 
 import { FieldSet, Switch, useStyles } from '@grafana/ui';
 import { AsyncSelectFieldCore } from 'app/percona/shared/components/Form/AsyncSelectFieldCore';
+import { fetchBackupArtifacts } from 'app/percona/shared/core/reducers/backups/backupArtifacts';
 import { validators } from 'app/percona/shared/helpers/validatorsForm';
+import { useDispatch, useSelector } from 'app/types';
 
-import { useSelector } from '../../../../../../types';
 import { SelectField } from '../../../../../shared/components/Form/SelectField';
-import { getBackupLocations } from '../../../../../shared/core/selectors';
+import { getBackupLocations, getBackupArtifacts } from '../../../../../shared/core/selectors';
 
 import { Messages } from './Restore.messages';
 import { RestoreService } from './Restore.service';
@@ -17,15 +18,27 @@ import { RestoreFields, RestoreFromProps } from './Restore.types';
 export const Restore: FC<RestoreFromProps> = ({ form }) => {
   const styles = useStyles(getStyles);
 
+  const dispatch = useDispatch();
+
   const [enableRestore, setEnableRestore] = useState(false);
   const { result: locations = [], loading: locationsLoading } = useSelector(getBackupLocations);
   const locationsOptions = locations.map((location) => ({
     label: location.name,
     value: location.locationID,
   }));
 
+  const { result: backupArtifacts = [], loading: backupArtifactsLoading } = useSelector(getBackupArtifacts);
+
   const { restoreFrom, kubernetesCluster } = form.getState().values;
   const restoreFromValue = restoreFrom?.value;
+
+  useEffect(() => {
+    if (restoreFromValue && enableRestore) {
+      dispatch(fetchBackupArtifacts({ locationId: restoreFromValue }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [restoreFromValue, enableRestore]);
+
   return (
     <FieldSet
       label={
@@ -64,14 +77,19 @@ export const Restore: FC<RestoreFromProps> = ({ form }) => {
               )}
             </Field>
             {restoreFromValue !== undefined && restoreFromValue ? (
-              <AsyncSelectFieldCore
-                name={RestoreFields.backupArtifact}
-                loadOptions={() => RestoreService.loadBackupArtifacts(restoreFromValue)}
-                defaultOptions
-                placeholder={Messages.placeholders.backupArtifact}
-                label={Messages.labels.backupArtifact}
-                validate={validators.required}
-              />
+              <Field name={RestoreFields.backupArtifact} validate={validators.required}>
+                {({ input }) => (
+                  <div data-testid="backup-select-wrapper">
+                    <SelectField
+                      label={Messages.labels.backupArtifact}
+                      isSearchable={false}
+                      options={backupArtifacts}
+                      isLoading={backupArtifactsLoading}
+                      {...input}
+                    />
+                  </div>
+                )}
+              </Field>
             ) : (
               <div />
             )}

public/app/percona/shared/core/reducers/backups/backupArtifacts.ts

@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import { SelectableValue } from '@grafana/data';
+import { createAsyncSlice, withSerializedError } from 'app/features/alerting/unified/utils/redux';
+import { DBaaSBackupService } from 'app/percona/dbaas/components/DBCluster/EditDBClusterPage/DBaaSBackups/DBaaSBackups.service';
+export const fetchBackupArtifacts = createAsyncThunk(
+  'percona/fetchBackupArtifacts',
+  async (args: { locationId: string }, thunkAPI): Promise<Array<SelectableValue<string>>> =>
+    withSerializedError(
+      (async () => {
+        const backupArtifactsResponse = await DBaaSBackupService.list(args.locationId);
+
+        return backupArtifactsResponse.map((backup) => ({
+          label: backup.key,
+          value: backup.key,
+        }));
+      })()
+    )
+);
+
+const perconaBackupArtifactsSlice = createAsyncSlice('fetchBackupArtifacts', fetchBackupArtifacts, []).reducer;
+
+export default perconaBackupArtifactsSlice;

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

@@ -16,6 +16,7 @@ import { uiEventsReducer } from 'app/percona/ui-events/reducer';
 import { ServerInfo } from '../types';
 
 import advisorsReducers from './advisors/advisors';
+import perconaBackupArtifacts from './backups/backupArtifacts';
 import perconaBackupLocations from './backups/backupLocations';
 import perconaAddDBCluster from './dbaas/addDBCluster/addDBCluster';
 import perconaDBClustersReducer from './dbaas/dbClusters/dbClusters';
@@ -248,6 +249,7 @@ export default {
     templates: templatesReducer,
     services: servicesReducer,
     nodes: nodesReducer,
+    backupArtifacts: perconaBackupArtifacts,
     backupLocations: perconaBackupLocations,
     tour: tourReducer,
     telemetry: uiEventsReducer,

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

@@ -21,6 +21,7 @@ export const getTemplates = (state: StoreState) => state.percona.templates;
 export const getServices = (state: StoreState) => state.percona.services;
 export const getNodes = (state: StoreState) => state.percona.nodes;
 export const getBackupLocations = (state: StoreState) => state.percona.backupLocations;
+export const getBackupArtifacts = (state: StoreState) => state.percona.backupArtifacts;
 export const getTour = (state: StoreState) => state.percona.tour;
 export const getAccessRoles = (state: StoreState) => state.percona.roles;
 export const getUsers = (state: StoreState) => state.users;

public/app/percona/ui-events/components/Telemetry.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 
 import { getPerconaSettings } from 'app/percona/shared/core/selectors';
 import { EventStore } from 'app/percona/ui-events/EventStore';
 import { UIEventsService } from 'app/percona/ui-events/UIEvents.service';
+import { useSelector } from 'app/types';
 
 export interface UiEventsProps {}