Plugins Catalog: use createAction() instead of string action type (#40393)

* refactor(Plugins/Admin): use createAction() instead of string action type

* refactor(Panel/Actions): use the new action name in the tests

public/app/features/panel/state/actions.test.ts

@@ -3,6 +3,7 @@ import { thunkTester } from '../../../../test/core/thunk/thunkTester';
 import { changePanelPlugin } from './actions';
 import { panelModelAndPluginReady } from './reducers';
 import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
+import { panelPluginLoaded } from 'app/features/plugins/admin/state/actions';
 
 jest.mock('app/features/plugins/importPanelPlugin', () => {
   return {
@@ -31,7 +32,7 @@ describe('panel state actions', () => {
         .whenThunkIsDispatched(sourcePanel, 'table');
 
       expect(dispatchedActions.length).toBe(2);
-      expect(dispatchedActions[0].type).toBe('plugins/loadPanelPlugin/fulfilled');
+      expect(dispatchedActions[0].type).toBe(panelPluginLoaded.type);
       expect(dispatchedActions[1].type).toBe(panelModelAndPluginReady.type);
       expect(sourcePanel.type).toBe('table');
     });

public/app/features/plugins/admin/state/actions.ts

@@ -1,4 +1,4 @@
-import { createAsyncThunk, Update } from '@reduxjs/toolkit';
+import { createAction, createAsyncThunk, Update } from '@reduxjs/toolkit';
 import { getBackendSrv } from '@grafana/runtime';
 import { PanelPlugin } from '@grafana/data';
 import { StoreState, ThunkResult } from 'app/types';
@@ -96,6 +96,8 @@ export const loadPluginDashboards = createAsyncThunk(`${STATE_PREFIX}/loadPlugin
   return getBackendSrv().get(url);
 });
 
+export const panelPluginLoaded = createAction<PanelPlugin>(`${STATE_PREFIX}/panelPluginLoaded`);
+
 // We need this to be backwards-compatible with other parts of Grafana.
 // (Originally in "public/app/features/plugins/state/actions.ts")
 // It cannot be constructed with `createAsyncThunk()` as we need the return value on the call-site,
@@ -110,10 +112,7 @@ export const loadPanelPlugin = (id: string): ThunkResult<Promise<PanelPlugin>> =
 
       // second check to protect against raise condition
       if (!getStore().plugins.panels[id]) {
-        dispatch({
-          type: `${STATE_PREFIX}/loadPanelPlugin/fulfilled`,
-          payload: plugin,
-        });
+        dispatch(panelPluginLoaded(plugin));
       }
     }
 

public/app/features/plugins/admin/state/reducer.ts

@@ -1,7 +1,8 @@
 import { createSlice, createEntityAdapter, AnyAction, PayloadAction } from '@reduxjs/toolkit';
-import { fetchAll, fetchDetails, install, uninstall, loadPluginDashboards } from './actions';
+import { fetchAll, fetchDetails, install, uninstall, loadPluginDashboards, panelPluginLoaded } from './actions';
 import { CatalogPlugin, PluginListDisplayMode, ReducerState, RequestStatus } from '../types';
 import { STATE_PREFIX } from '../constants';
+import { PanelPlugin } from '@grafana/data';
 
 export const pluginsAdapter = createEntityAdapter<CatalogPlugin>();
 
@@ -62,8 +63,8 @@ const slice = createSlice({
       })
       // Load a panel plugin (backward-compatibility)
       // TODO<remove once the "plugin_admin_enabled" feature flag is removed>
-      .addCase(`${STATE_PREFIX}/loadPanelPlugin/fulfilled`, (state, action: AnyAction) => {
-        state.panels[action.payload.meta!.id] = action.payload;
+      .addCase(panelPluginLoaded, (state, action: PayloadAction<PanelPlugin>) => {
+        state.panels[action.payload.meta.id] = action.payload;
       })
       // Start loading panel dashboards (backward-compatibility)
       // TODO<remove once the "plugin_admin_enabled" feature flag is removed>