Plugin Admin App: make the catalog look like internal component (#34341)

* Allow Route component usage in app plugins

* i tried

* fix catalog app

* fix catalog app

* fix catalog app

* cleanup imports

* plugin catalog enabled to plugin admin

* rename plugin catalog to plugin admin

* expose catalog url

* update text

* import from react-router-dom

* fix imports -- add logging

* merge changes

* avoid onNavUpdate

* Fixed onNavChange issues

* fix library imports

* more links

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/datasources/state/buildCategories.ts

@@ -203,7 +203,7 @@ function getPhantomPlugin(options: GetPhantomPluginOptions): DataSourcePluginMet
       author: { name: 'Grafana Labs' },
       links: [
         {
-          url: config.catalogUrl + options.id,
+          url: config.pluginCatalogURL + options.id,
           name: 'Install now',
         },
       ],

public/app/features/plugins/AppRootPage.tsx

@@ -86,6 +86,7 @@ class AppRootPage extends Component<Props, State> {
   }
 
   onNavChanged = (nav: NavModel) => {
+    console.log('NAV CHANGED!!!', nav);
     this.setState({ nav });
   };
 

public/app/features/plugins/PluginListPage.tsx

@@ -12,6 +12,7 @@ import { setPluginsSearchQuery } from './state/reducers';
 import { useAsync } from 'react-use';
 import { selectors } from '@grafana/e2e-selectors';
 import { PluginsErrorsInfo } from './PluginsErrorsInfo';
+import { config } from '@grafana/runtime';
 
 const mapStateToProps = (state: StoreState) => ({
   navModel: getNavModel(state.navIndex, 'plugins'),
@@ -40,11 +41,18 @@ export const PluginListPage: React.FC<Props> = ({
     loadPlugins();
   }, [loadPlugins]);
 
+  let actionTarget: string | undefined = '_blank';
   const linkButton = {
     href: 'https://grafana.com/plugins?utm_source=grafana_plugin_list',
     title: 'Find more plugins on Grafana.com',
   };
 
+  if (config.pluginAdminEnabled) {
+    linkButton.href = '/a/grafana-plugin-admin-app/';
+    linkButton.title = 'Install & manage plugins';
+    actionTarget = undefined;
+  }
+
   return (
     <Page navModel={navModel} aria-label={selectors.pages.PluginsList.page}>
       <Page.Contents isLoading={!hasFetched}>
@@ -54,7 +62,7 @@ export const PluginListPage: React.FC<Props> = ({
             setSearchQuery={(query) => setPluginsSearchQuery(query)}
             linkButton={linkButton}
             placeholder="Search by name, author, description or type"
-            target="_blank"
+            target={actionTarget}
           />
 
           <PluginsErrorsInfo>