Plugins: remove deprecated code (components) (#41686)

* refactor(plugins): use routes specific to the new plugins/admin

* refactor(plugins): remove unused pages (PluginList, PluginItem)

* refactor(plugins): remove PluginPage

* refactor(plugins): remove UpdatePluginModal

* refactor(plugins): move AppConfigWrapper under plugins/admin

* refactor(plugins): move PluginDashboards under plugins/admin

* refactor(plugins): rename the "specs" folder to "tests"

* refactor(plugins): move test files to /tests folder

* refactor(plugins): move AppRootPage into a /components folder

* refactor(plugins): move PluginsErrorsInfo into a /plugins folder

* refactor(plugins): move PluginSettingsCache into a /components folder

* refactor(plugins): move PluginStateInfo into a /plugins folder

* refactor(plugins): move AppRootPage.test.tsx next to the tested component

* refactor(plugins): remove old snapshot tests

* fix(plugins): fix tests

* refactor(plugins/admin): move & rename PluginSettingsCache

* fix(plugins): fix a few rebase issues

* Plugins: remove deprecated code (state handling) (#41739)

* refactor(plugins): use the plugins/admin reducer only

* refactor(plugins): remove tests for the deprecated plugins reducer

* refactor(plugins): remove tests for the deprecated plugins selectors

* refactor(plugins/state): add a short comment note to selectors

* feat(plugins/state): add a selector for selecting errors

* feat(plugins/state): add a hook for getting plugin errors

* refactor(plugins): udpate the PluginsErrorsInfo component to use the new state selectors

* refactor(plugins/state): remove the old (deprecated) selectors

* refactor(plugins/state): use the new actions under /admin

* refactor(plugins/state): remove old (deprecated) reducers and actions

* refactor(plugins): update component definition

* fix(plugins): remove unnecessary {children} prop for PluginsErrorsInfo

* Plugins: show / hide install controls based on the `pluginAdminEnabled` flag (#41749)

* docs(plugins): update documentation for the `plugin_admin_enabled` flag

* refactor(InstallControls): move the main component to a named module

* feat(plugins): use the `pluginAdminEnable` flag to hide / show install controls in the UI

* test(plugins): add tests for enabling/disabling install controls

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

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { PluginError } from '@grafana/data';
 import { setDisplayMode } from './reducer';
 import { fetchAll, fetchDetails, fetchRemotePlugins, install, uninstall } from './actions';
 import { CatalogPlugin, PluginCatalogStoreState, PluginListDisplayMode } from '../types';
@@ -11,6 +12,7 @@ import {
   selectRequestError,
   selectIsRequestNotFetched,
   selectDisplayMode,
+  selectPluginErrors,
 } from './selectors';
 import { sortPlugins, Sorters } from '../helpers';
 
@@ -53,6 +55,12 @@ export const useGetSingle = (id: string): CatalogPlugin | undefined => {
   return useSelector((state: PluginCatalogStoreState) => selectById(state, id));
 };
 
+export const useGetErrors = (): PluginError[] => {
+  useFetchAll();
+
+  return useSelector(selectPluginErrors);
+};
+
 export const useInstall = () => {
   const dispatch = useDispatch();
   return (id: string, version?: string, isUpdating?: boolean) => dispatch(install({ id, version, isUpdating }));

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

@@ -1,4 +1,4 @@
-import { createSlice, createEntityAdapter, AnyAction, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, createEntityAdapter, Reducer, AnyAction, PayloadAction } from '@reduxjs/toolkit';
 import { fetchAll, fetchDetails, install, uninstall, loadPluginDashboards, panelPluginLoaded } from './actions';
 import { CatalogPlugin, PluginListDisplayMode, ReducerState, RequestStatus } from '../types';
 import { STATE_PREFIX } from '../constants';
@@ -97,4 +97,4 @@ const slice = createSlice({
 });
 
 export const { setDisplayMode } = slice.actions;
-export const { reducer } = slice;
+export const reducer: Reducer<ReducerState, AnyAction> = slice.reducer;

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

@@ -1,4 +1,5 @@
-import { createSelector } from 'reselect';
+import { createSelector } from '@reduxjs/toolkit';
+import { PluginError, PluginErrorCode } from '@grafana/data';
 import { RequestStatus, PluginCatalogStoreState } from '../types';
 import { pluginsAdapter } from './reducer';
 
@@ -49,6 +50,20 @@ export const find = (searchBy: string, filterBy: string, filterByType: string) =
     }
   );
 
+export const selectPluginErrors = createSelector(selectAll, (plugins) =>
+  plugins
+    ? plugins
+        .filter((p) => Boolean(p.error))
+        .map(
+          (p): PluginError => ({
+            pluginId: p.id,
+            errorCode: p!.error as PluginErrorCode,
+          })
+        )
+    : []
+);
+
+// The following selectors are used to get information about the outstanding or completed plugins-related network requests.
 export const selectRequest = (actionType: string) =>
   createSelector(selectRoot, ({ requests = {} }) => requests[actionType]);