Plugins: introduce marketplace app (#33869)

* add uninstall flow * add install flow * small cleanup * smaller-footprint solution * cleanup + make bp start auto * fix interface contract * improve naming * accept version arg * ensure use of shared logger * make installer a field * add plugin decommissioning * add basic error checking * fix api docs * making initialization idempotent * add mutex * fix comment * fix test * add test for decommission * improve existing test * add more test coverage * more tests * change test func to use read lock * refactoring + adding test asserts * improve purging old install flow * improve dupe checking * change log name * skip over dupe scanned * make test assertion more flexible * remove trailing line * fix pointer receiver name * update comment * add context to API * add config flag * add base http api test + fix update functionality * simplify existing check * clean up test * refactor tests based on feedback * add single quotes to errs * use gcmp in tests + fix logo issue * make plugin list testing more flexible * address feedback * fix API test * fix linter * undo preallocate * Update docs/sources/administration/configuration.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/administration/configuration.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * Update docs/sources/administration/configuration.md Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> * fix linting issue in test * add docs placeholder * update install notes * Update docs/sources/plugins/marketplace.md Co-authored-by: Marcus Olsson <marcus.olsson@hey.com> * update access wording * add more placeholder docs * add link to more info * PR feedback - improved errors, refactor, lock fix * improve err details * propagate plugin version errors * don't autostart renderer * add H1 * fix imports * feat(bundled-plugins): introduce marketplace-app to the repo * chore(marketplace-app): remove backend * feat(marketplace): nav is only visible to admins * feat(marketplace): use gnet api * refactor(marketplace): move styles to theme2 move card concerns to card component * feat(marketplace): introduce loaders, clean up styles * refactor(marketplace): wip - debugging for api endpoints * feat(grafana-ui): introduce height prop to Layout components * refactor(marketplace): clean up org details component * fix(marketplace): display search results without active filters * refactor(marketplace): use grafana api for install/uninstall * refactor(marketplace): remove pluginDir * feat(marketplace): clean up Library page * fix(plugins): get panel plugins from meta for newly installed plugins * fix(marketplace): fix multiple renders of InstallControls when installing/uninstalling plugins * refactor(marketplace): componentise the loader * chore(marketplace): remove unsigned plugins option * refactor(marketplace): remove includeUnsigned from codebase * refactor(marketplace): prefer useStyles over useTheme * docs(marketplace): remove changelog and update readme * Apply suggestions from code review Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com> Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com> * refactor(marketplace): prefer module over class for api * refactor(marketplace): move updatePlugin to api * refactor(marketplace): add PluginMeta to api to please TS * feat(marketplace): always include pre-release in semver check * chore(marketplace): remove redundant arch install code. backend handles it now * feat(marketplace): add a link to browse page if library is empty * refactor(marketplace): replace status with isLoading boolean for hooks * refactor(marketplace): clean up async functions in InstallControls * fix(marketplace): setInstalled false on successful uninstall * include marketplace in bundled plugin test Co-authored-by: Will Browne <will.browne@grafana.com> Co-authored-by: Will Browne <wbrowne@users.noreply.github.com> Co-authored-by: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Co-authored-by: Marcus Olsson <marcus.olsson@hey.com> Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com> Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
2025-02-25 18:55:37 -06:00 · 2021-05-12 21:07:37 +02:00
parent 3da8db7f3f
commit abdceb18da
41 changed files with 1789 additions and 25 deletions
--- a/packages/grafana-ui/src/components/Layout/Layout.tsx
+++ b/packages/grafana-ui/src/components/Layout/Layout.tsx
@@ -36,12 +36,13 @@ export const Layout: React.FC<LayoutProps> = ({
  align = 'normal',
  wrap = false,
  width = '100%',
+  height = '100%',
  ...rest
 }) => {
  const theme = useTheme();
  const styles = getStyles(theme, orientation, spacing, justify, align, wrap);
  return (
-    <div className={styles.layout} style={{ width }} {...rest}>
+    <div className={styles.layout} style={{ width, height }} {...rest}>
      {React.Children.toArray(children)
        .filter(Boolean)
        .map((child, index) => {
@@ -62,6 +63,7 @@ export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
  align = 'center',
  wrap,
  width,
+  height,
 }) => (
  <Layout
    spacing={spacing}
@@ -69,6 +71,7 @@ export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
    orientation={Orientation.Horizontal}
    align={align}
    width={width}
+    height={height}
    wrap={wrap}
  >
    {children}
@@ -80,8 +83,16 @@ export const VerticalGroup: React.FC<Omit<LayoutProps, 'orientation' | 'wrap'>>
  justify,
  align,
  width,
+  height,
 }) => (
-  <Layout spacing={spacing} justify={justify} orientation={Orientation.Vertical} align={align} width={width}>
+  <Layout
+    spacing={spacing}
+    justify={justify}
+    orientation={Orientation.Vertical}
+    align={align}
+    width={width}
+    height={height}
+  >
    {children}
  </Layout>
 );
--- a/pkg/plugins/manager/manager_test.go
+++ b/pkg/plugins/manager/manager_test.go
@@ -38,14 +38,7 @@ func TestPluginManager_Init(t *testing.T) {

 		assert.Empty(t, pm.scanningErrors)
 		verifyCorePluginCatalogue(t, pm)
-
-		// verify bundled plugins
-		assert.NotNil(t, pm.plugins["input"])
-		assert.NotNil(t, pm.dataSources["input"])
-
-		assert.Len(t, pm.StaticRoutes(), 1)
-		assert.Equal(t, "input", pm.StaticRoutes()[0].PluginId)
-		assert.True(t, strings.HasPrefix(pm.StaticRoutes()[0].Directory, bundledPluginsPath+"/input-datasource/"))
+		verifyBundledPluginCatalogue(t, pm)
 	})

 	t.Run("Base case with single external plugin", func(t *testing.T) {
@@ -478,6 +471,27 @@ func verifyCorePluginCatalogue(t *testing.T, pm *PluginManager) {
 	}
 }

+func verifyBundledPluginCatalogue(t *testing.T, pm *PluginManager) {
+	t.Helper()
+
+	bundledPlugins := map[string]string{
+		"input":                   "input-datasource",
+		"grafana-marketplace-app": "marketplace-app",
+	}
+
+	for pluginID, pluginDir := range bundledPlugins {
+		assert.NotNil(t, pm.plugins[pluginID])
+		for _, route := range pm.staticRoutes {
+			if pluginID == route.PluginId {
+				assert.True(t, strings.HasPrefix(route.Directory, pm.Cfg.BundledPluginsPath+"/"+pluginDir))
+			}
+		}
+	}
+
+	assert.NotNil(t, pm.dataSources["input"])
+	assert.NotNil(t, pm.apps["grafana-marketplace-app"])
+}
+
 type fakeBackendPluginManager struct {
 	backendplugin.Manager

--- a/plugins-bundled/internal/marketplace-app/LICENSE
+++ b/plugins-bundled/internal/marketplace-app/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/plugins-bundled/internal/marketplace-app/README.md
+++ b/plugins-bundled/internal/marketplace-app/README.md
@@ -0,0 +1,21 @@
+# Marketplace for Grafana
+
+Browse and manage plugins from within Grafana.
+
+- Admin users can browse plugins, list installed plugins, and install / uninstall plugins
+
+![Screenshot](/src/img/discover.png)
+
+## Installation
+
+1. Navigate to **Configuration** -> **Plugins** and click on the Marketplace plugin in the list
+1. Click the **Enable app** to enable the plugin
+1. Click the **Pin app** to add it to the side menu
+
+## Configuration
+
+| Option                    | Description                                      |
+| ------------------------- | ------------------------------------------------ |
+| _Enable app_              | Must be done before being able to use the plugin |
+| _Pin app_                 | Add the app to the side menu                     |
+| _Show Enterprise plugins_ | Show Enterprise plugins in the marketplace       |
--- a/plugins-bundled/internal/marketplace-app/jest.config.js
+++ b/plugins-bundled/internal/marketplace-app/jest.config.js
@@ -0,0 +1,8 @@
+// This file is needed because it is used by vscode and other tools that
+// call `jest` directly.  However, unless you are doing anything special
+// do not edit this file
+
+const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
+
+// This process will use the same config that `yarn test` is using
+module.exports = standard.jestConfig();
--- a/plugins-bundled/internal/marketplace-app/package.json
+++ b/plugins-bundled/internal/marketplace-app/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@grafana-plugins/marketplace-app",
+  "version": "7.5.0-pre.0",
+  "description": "Marketplace",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/grafana/grafana.git"
+  },
+  "scripts": {
+    "build": "grafana-toolkit plugin:build",
+    "test": "grafana-toolkit plugin:test",
+    "dev": "grafana-toolkit plugin:dev",
+    "watch": "grafana-toolkit plugin:dev --watch"
+  },
+  "author": "Grafana Labs",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@grafana/data": "7.5.0-pre.0",
+    "@grafana/runtime": "7.5.0-pre.0",
+    "@grafana/toolkit": "7.5.0-pre.0",
+    "@grafana/ui": "7.5.0-pre.0",
+    "@types/semver": "^7.3.4",
+    "semver": "^7.3.4"
+  },
+  "volta": {
+    "node": "12.16.2"
+  }
+}
--- a/plugins-bundled/internal/marketplace-app/src/RootPage.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/RootPage.tsx
@@ -0,0 +1,15 @@
+import { AppRootProps } from '@grafana/data';
+import { pages } from 'pages';
+import React from 'react';
+
+export const MarketplaceRootPage = React.memo(function MarketplaceRootPage(props: AppRootProps) {
+  const {
+    path,
+    query: { tab },
+  } = props;
+  // Required to support grafana instances that use a custom `root_url`.
+  const pathWithoutLeadingSlash = path.replace(/^\//, '');
+
+  const Page = pages.find(({ id }) => id === tab)?.component || pages[0].component;
+  return <Page {...props} path={pathWithoutLeadingSlash} />;
+});
--- a/plugins-bundled/internal/marketplace-app/src/api.ts
+++ b/plugins-bundled/internal/marketplace-app/src/api.ts
@@ -0,0 +1,71 @@
+import { getBackendSrv } from '@grafana/runtime';
+import { PluginMeta } from '@grafana/data';
+import { API_ROOT, GRAFANA_API_ROOT } from './constants';
+import { Plugin, PluginDetails, Org } from './types';
+
+async function getRemotePlugins(): Promise<Plugin[]> {
+  const res = await getBackendSrv().get(`${GRAFANA_API_ROOT}/plugins`);
+  return res.items;
+}
+
+async function getPlugin(slug: string): Promise<PluginDetails> {
+  const res = await getBackendSrv().get(`${GRAFANA_API_ROOT}/plugins/${slug}`);
+
+  const versions = await getPluginVersions(slug);
+  const installed = await getInstalledPlugins();
+
+  const plugin = installed?.find((_: any) => {
+    return _.id === slug;
+  });
+
+  return {
+    remote: res,
+    remoteVersions: versions,
+    local: plugin,
+  };
+}
+
+async function getPluginVersions(id: string): Promise<any[]> {
+  const versions = await getBackendSrv().get(`${GRAFANA_API_ROOT}/plugins/${id}/versions`);
+  return versions.items;
+}
+
+async function getInstalledPlugins(): Promise<any> {
+  const installed = await getBackendSrv().get(`${API_ROOT}?core=0`);
+  return installed;
+}
+
+async function getOrg(slug: string): Promise<Org> {
+  const org = await getBackendSrv().get(`${GRAFANA_API_ROOT}/orgs/${slug}`);
+  return { ...org, avatarUrl: `${GRAFANA_API_ROOT}/orgs/${slug}/avatar` };
+}
+
+async function installPlugin(id: string, version: string) {
+  return await getBackendSrv().post(`${API_ROOT}/${id}/install`, {
+    version,
+  });
+}
+
+async function uninstallPlugin(id: string) {
+  return await getBackendSrv().post(`${API_ROOT}/${id}/uninstall`);
+}
+
+async function updatePlugin(pluginId: string, data: Partial<PluginMeta>) {
+  const response = await getBackendSrv().datasourceRequest({
+    url: `/api/plugins/${pluginId}/settings`,
+    method: 'POST',
+    data,
+  });
+
+  return response?.data;
+}
+
+export const api = {
+  getRemotePlugins,
+  getPlugin,
+  getInstalledPlugins,
+  getOrg,
+  installPlugin,
+  uninstallPlugin,
+  updatePlugin,
+};
--- a/plugins-bundled/internal/marketplace-app/src/components/Card.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/Card.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useTheme2, stylesFactory } from '@grafana/ui';
+
+interface Props {
+  href: string;
+  text: React.ReactNode;
+  image: React.ReactNode;
+  layout?: 'horizontal' | 'vertical';
+}
+
+export const Card = ({ href, text, image, layout = 'vertical' }: Props) => {
+  const theme = useTheme2();
+  const styles = getCardStyles(theme, layout);
+
+  return (
+    <a href={href} className={styles.root}>
+      <div className={styles.container}>
+        <div className={styles.imgContainer}>{image}</div>
+        {text}
+      </div>
+    </a>
+  );
+};
+
+const getCardStyles = stylesFactory((theme: GrafanaTheme2, layout) => ({
+  root: css`
+    background-color: ${theme.colors.background.primary};
+    border-radius: ${theme.shape.borderRadius()};
+    cursor: pointer;
+    height: 100%;
+    padding: ${theme.spacing(2)};
+
+    &:hover {
+      background-color: ${theme.colors.action.hover};
+    }
+  `,
+  container: css`
+    display: flex;
+    flex-direction: ${layout === 'vertical' ? 'column' : 'row'};
+    justify-content: ${layout === 'vertical' ? 'space-around' : 'flex-start'};
+    height: 100%;
+  `,
+  imgContainer: css`
+    flex-grow: ${layout === 'vertical' ? 1 : 0};
+    padding: ${theme.spacing()} 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
+}));
--- a/plugins-bundled/internal/marketplace-app/src/components/Grid.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/Grid.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useTheme2 } from '@grafana/ui';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const Grid = ({ children }: Props) => {
+  const theme = useTheme2();
+
+  return (
+    <div
+      className={css`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
+        grid-gap: ${theme.spacing.gridSize}px;
+      `}
+    >
+      {children}
+    </div>
+  );
+};
--- a/plugins-bundled/internal/marketplace-app/src/components/HorizontalGroup.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/HorizontalGroup.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { css } from '@emotion/css';
+
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+interface HorizontalGroupProps {
+  children: React.ReactNode;
+}
+
+export const HorizontalGroup = ({ children }: HorizontalGroupProps) => {
+  const styles = useStyles2(getStyles);
+
+  return <div className={styles.container}>{children}</div>;
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > * {
+      margin-right: ${theme.spacing()};
+    }
+    & > *:first-child {
+      flex-grow: 1;
+    }
+    & > *:last-child {
+      margin-right: 0;
+    }
+  `,
+});
--- a/plugins-bundled/internal/marketplace-app/src/components/InstallControls.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/InstallControls.tsx
@@ -0,0 +1,156 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+import { gt, satisfies } from 'semver';
+
+import { config } from '@grafana/runtime';
+import { Button, HorizontalGroup, Icon, useStyles2 } from '@grafana/ui';
+import { AppEvents, GrafanaTheme2, OrgRole } from '@grafana/data';
+
+import { Metadata, Plugin } from '../types';
+import { hasRole } from '../helpers';
+import { api } from '../api';
+
+// This isn't exported in the sdk yet
+// @ts-ignore
+import appEvents from 'grafana/app/core/app_events';
+
+interface Props {
+  localPlugin?: Metadata;
+  remotePlugin: Plugin;
+  slug: string;
+}
+
+export const InstallControls = ({ localPlugin, remotePlugin, slug }: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(Boolean(localPlugin));
+  const [shouldUpdate, setShouldUpdate] = useState(
+    remotePlugin?.version && localPlugin?.info.version && gt(remotePlugin?.version!, localPlugin?.info.version!)
+  );
+
+  const styles = useStyles2(getStyles);
+
+  const onInstall = async () => {
+    setLoading(true);
+    try {
+      await api.installPlugin(slug, remotePlugin.version);
+      appEvents.emit(AppEvents.alertSuccess, [`Installed ${remotePlugin?.name}`]);
+      setLoading(false);
+      setIsInstalled(true);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  const onUninstall = async () => {
+    setLoading(true);
+    try {
+      await api.uninstallPlugin(slug);
+      appEvents.emit(AppEvents.alertSuccess, [`Uninstalled ${remotePlugin?.name}`]);
+      setLoading(false);
+      setIsInstalled(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  const onUpdate = async () => {
+    setLoading(true);
+    try {
+      await api.installPlugin(slug, remotePlugin.version);
+      appEvents.emit(AppEvents.alertSuccess, [`Updated ${remotePlugin?.name}`]);
+      setLoading(false);
+      setShouldUpdate(false);
+    } catch (error) {
+      setLoading(false);
+    }
+  };
+
+  const grafanaDependency = remotePlugin?.json?.dependencies?.grafanaDependency;
+  const unsupportedGrafanaVersion = grafanaDependency
+    ? !satisfies(config.buildInfo.version, grafanaDependency, {
+        // needed for when running against master
+        includePrerelease: true,
+      })
+    : false;
+
+  const isDevelopmentBuild = Boolean(localPlugin?.dev);
+  const isEnterprise = remotePlugin?.status === 'enterprise';
+  const hasPermission = hasRole(OrgRole.Admin);
+
+  if (isEnterprise) {
+    return (
+      <div className={styles.message}>
+        Marketplace doesn&#39;t support installing Enterprise plugins yet. Stay tuned!
+      </div>
+    );
+  }
+
+  if (isDevelopmentBuild) {
+    return (
+      <div className={styles.message}>This is a development build of the plugin and can&#39;t be uninstalled.</div>
+    );
+  }
+
+  if (isInstalled) {
+    return (
+      <HorizontalGroup height="auto">
+        {shouldUpdate && (
+          <Button disabled={loading || !hasPermission} onClick={onUpdate}>
+            {loading ? 'Updating' : 'Update'}
+          </Button>
+        )}
+        <Button variant="destructive" disabled={loading || !hasPermission} onClick={onUninstall}>
+          {loading && !shouldUpdate ? 'Uninstalling' : 'Uninstall'}
+        </Button>
+        {!hasPermission && <div className={styles.message}>You need admin privileges to manage this plugin.</div>}
+      </HorizontalGroup>
+    );
+  }
+
+  if (unsupportedGrafanaVersion) {
+    return (
+      <div className={styles.message}>
+        <Icon name="exclamation-triangle" />
+        &nbsp;This plugin doesn&#39;t support your version of Grafana.
+      </div>
+    );
+  }
+
+  return (
+    <HorizontalGroup height="auto">
+      <Button disabled={loading || !hasPermission} onClick={onInstall}>
+        {loading ? 'Installing' : 'Install'}
+      </Button>
+      {!hasPermission && <div className={styles.message}>You need admin privileges to install this plugin.</div>}
+    </HorizontalGroup>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    message: css`
+      color: ${theme.colors.text.secondary};
+    `,
+    readme: css`
+      margin: ${theme.spacing(3)} 0;
+
+      & img {
+        max-width: 100%;
+      }
+
+      h1,
+      h2,
+      h3 {
+        margin-top: ${theme.spacing(3)};
+        margin-bottom: ${theme.spacing(2)};
+      }
+
+      li {
+        margin-left: ${theme.spacing(2)};
+        & > p {
+          margin: ${theme.spacing()} 0;
+        }
+      }
+    `,
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/components/Loader.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/Loader.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { LoadingPlaceholder } from '@grafana/ui';
+import { Page } from './Page';
+
+export const Loader = () => {
+  return (
+    <Page>
+      <div className="page-loader-wrapper">
+        <LoadingPlaceholder text="Loading..." />
+      </div>
+    </Page>
+  );
+};
--- a/plugins-bundled/internal/marketplace-app/src/components/Page.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/Page.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const Page: React.FC = ({ children }) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <div className="page-container">
+      <div className={styles}>{children}</div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) =>
+  css`
+    margin-bottom: ${theme.spacing(3)};
+  `;
--- a/plugins-bundled/internal/marketplace-app/src/components/PluginList.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/PluginList.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { Card } from '../components/Card';
+import { Grid } from '../components/Grid';
+
+import { PLUGIN_ROOT } from '../constants';
+import { Plugin } from '../types';
+import { GrafanaTheme2 } from '@grafana/data';
+
+interface Props {
+  plugins: Plugin[];
+}
+
+export const PluginList = ({ plugins }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Grid>
+      {plugins.map((plugin) => {
+        const { name, slug, version, orgName, typeCode } = plugin;
+
+        return (
+          <Card
+            key={`${orgName}-${name}-${typeCode}`}
+            href={`${PLUGIN_ROOT}?tab=plugin&slug=${slug}`}
+            image={
+              <img
+                src={`https://grafana.com/api/plugins/${slug}/versions/${version}/logos/small`}
+                className={css`
+                  max-height: 64px;
+                `}
+              />
+            }
+            text={
+              <>
+                <div className={styles.name}>{name}</div>
+                <div className={styles.orgName}>{orgName}</div>
+              </>
+            }
+          />
+        );
+      })}
+    </Grid>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  name: css`
+    font-size: ${theme.typography.h4.fontSize};
+    color: ${theme.colors.text};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  `,
+  orgName: css`
+    font-size: ${theme.typography.body.fontSize};
+    color: ${theme.colors.text.secondary};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  `,
+});
--- a/plugins-bundled/internal/marketplace-app/src/components/PluginTypeIcon.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/PluginTypeIcon.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { PluginTypeCode } from 'types';
+
+interface PluginTypeIconProps {
+  typeCode: PluginTypeCode;
+  size: number;
+}
+
+export const PluginTypeIcon = ({ typeCode, size }: PluginTypeIconProps) => {
+  const imageUrl = ((typeCode: string) => {
+    switch (typeCode) {
+      case 'panel':
+        return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNC4zMzEiIHZpZXdCb3g9Ii02MiA2My42NjkgMjUgMjQuMzMxIj48dGl0bGU+aWNvbl9kYXRhLXNvdXJjZTwvdGl0bGU+PHBhdGggZD0iTS00MS40MDUgNjMuNjczaC0xNi4xOUE0LjQxIDQuNDEgMCAwIDAtNjIgNjguMDc4djE1LjUxN0E0LjQxIDQuNDEgMCAwIDAtNTcuNTk1IDg4aDE2LjE5QTQuNDEgNC40MSAwIDAgMC0zNyA4My41OTVWNjguMDc4YTQuNDEgNC40MSAwIDAgMC00LjQwNS00LjQwNXptMy43MjcgMTkuOTIyYTMuNzMxIDMuNzMxIDAgMCAxLTMuNzI3IDMuNzI3aC0xNi4xOWEzLjczMSAzLjczMSAwIDAgMS0zLjcyNy0zLjcyN1Y2OC4wNzhhMy43MzEgMy43MzEgMCAwIDEgMy43MjctMy43MjdoMTYuMTlhMy43MzEgMy43MzEgMCAwIDEgMy43MjcgMy43Mjd2MTUuNTE3eiIgZmlsbD0iIzg5ODk4OSIvPjxnIGZpbGw9IiM4OTg5ODkiPjxwYXRoIGQ9Ik0tNTYuNDU3IDg1LjE0N2gxMy45MTRhMi4zNSAyLjM1IDAgMCAwIDIuMjctMS43NTloLTE4LjQ1NGEyLjM1MSAyLjM1MSAwIDAgMCAyLjI3IDEuNzU5em0uMDQ3LTguNzA2bDIuMDg3LjgzLjgxLS45NzdoLTUuMjk5djEuNjgzbDEuNjM2LTEuNDA4YS43NTEuNzUxIDAgMCAxIC43NjYtLjEyOHptNS44MzktMy42OTRoLTguMjQxdjIuODI4aDUuODk1em03Ljk0OSAyLjgyOGguNzM5bDEuNjk1LTEuMzA0di0xLjUyNGgtNC4yN3ptLTE2LjE5IDQuMzgxdjIuNzEzaDE4LjYyNHYtMi44MjhoLTE4LjQ5MXptOS43NjYtOS4wNDdhLjc0OC43NDggMCAwIDEgLjg5MS0uMjAybDIuODY5IDEuMzIyaDUuMDk5VjY5LjJoLTE4LjYyNXYyLjgyOGg4LjgzOGwuOTI4LTEuMTE5em02LjUwMy00LjM4N2gtMTMuOTE0YTIuMzUyIDIuMzUyIDAgMCAwLTIuMzE2IDEuOTZoMTguNTQ1YTIuMzUgMi4zNSAwIDAgMC0yLjMxNS0xLjk2em0tNC43NjggNi4yMjVoLTEuMzExbC0yLjM0NiAyLjgyOGg2LjU1OGwtMS4zODItMi4xMjh6Ii8+PHBhdGggZD0iTS00Mi4xMDUgNzcuNjM5YS43NDcuNzQ3IDAgMCAxLTEuMDg2LS4xODZsLS43NTItMS4xNThoLTcuNjIxbC0xLjk1MiAyLjM1NGEuNzUuNzUgMCAwIDEtLjg1NC4yMTlsLTIuMTcyLS44NjQtMS4zMDEgMS4xMmgxNy42NTd2LTIuODI4aC0uMTdsLTEuNzQ5IDEuMzQzeiIvPjwvZz48L3N2Zz4=';
+      case 'datasource':
+        return 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNC4zcHgiIHZpZXdCb3g9Ii0xODcgNzMuNyAyNSAyNC4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IC0xODcgNzMuNyAyNSAyNC4zOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSINCgk+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojNWE1YTVhO30NCjwvc3R5bGU+DQo8Zz4NCgk8dGl0bGU+aWNvbl9kYXRhLXNvdXJjZTwvdGl0bGU+DQoJPGc+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0tMTc0LjUsOTQuM2MtNS41LDAtMTAuMi0xLjYtMTIuMy00Yy0wLjEsMC4zLTAuMiwwLjYtMC4yLDFjMCwzLjIsNS43LDYsMTIuNSw2czEyLjUtMi43LDEyLjUtNg0KCQkJYzAtMC4zLTAuMS0wLjctMC4yLTFDLTE2NC40LDkyLjctMTY5LDk0LjMtMTc0LjUsOTQuM3oiLz4NCgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTS0xNzQuNSw4OC45Yy01LjUsMC0xMC4yLTEuNi0xMi4zLTRjLTAuMSwwLjMtMC4yLDAuNi0wLjIsMWMwLDMuMiw1LjcsNiwxMi41LDZzMTIuNS0yLjcsMTIuNS02DQoJCQljMC0wLjMtMC4xLTAuNy0wLjItMUMtMTY0LjQsODcuMy0xNjksODguOS0xNzQuNSw4OC45eiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNLTE4Nyw4MC40YzAsMy4yLDUuNyw2LDEyLjUsNnMxMi41LTIuNywxMi41LTZzLTUuNy02LTEyLjUtNlMtMTg3LDc3LjEtMTg3LDgwLjR6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=';
+      case 'app':
+        return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi45NzgiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyMi45NzggMjUiPjx0aXRsZT5pY29uX2FwcHM8L3RpdGxlPjxwYXRoIGQ9Ik0yMS4yMjQgMTEuMjFhMS43NiAxLjc2IDAgMCAwLTEuNjgyIDEuMjU3SDE0Ljg5YTQuMjMgNC4yMyAwIDAgMC0uMy0xLjE0MmwzLjExNC0xLjhBMi4wNSAyLjA1IDAgMSAwIDE3LjEyIDguMWExLjk4NiAxLjk4NiAwIDAgMCAuMDguNTY1bC0zLjExOCAxLjhhNC4yNDMgNC4yNDMgMCAwIDAtLjgzNS0uODM1bC41ODYtMS4wMTVhMi4xNjUgMi4xNjUgMCAwIDAgLjU5My4wODYgMi4xMTYgMi4xMTYgMCAxIDAtMS40NS0uNThsLS41OCAxLjAxMmEzLjk1NSAzLjk1NSAwIDAgMC0xLjE0LS4zVjMuMDA4YTEuNTQ3IDEuNTQ3IDAgMSAwLTEgMHY1LjgxN2E0LjIzIDQuMjMgMCAwIDAtMS4xNDMuM2wtMi4wNi0zLjU2MkExLjY4NCAxLjY4NCAwIDAgMCA3LjUxIDQuNGExLjcxIDEuNzEgMCAxIDAtMS4zMiAxLjY2bDIuMDYgMy41N2E0LjMyMyA0LjMyMyAwIDAgMC0uODQzLjg0M2wtMy41NjYtMi4wNmExLjc2IDEuNzYgMCAwIDAgLjA0NS0uMzkgMS43IDEuNyAwIDEgMC0xLjcgMS43IDEuNjg2IDEuNjg2IDAgMCAwIDEuMTU1LS40NTNsMy41NyAyLjA2YTQuMDkgNC4wOSAwIDAgMC0uMyAxLjEzM0g1LjIwNmEyLjMwNSAyLjMwNSAwIDEgMCAwIDFoMS40MDdhNC4yMyA0LjIzIDAgMCAwIC4zIDEuMTQyTDMuMTAyIDE2LjhhMS44MjMgMS44MjMgMCAxIDAgLjU1IDEuMyAxLjc3NSAxLjc3NSAwIDAgMC0uMDYzLS40MzhsMy44MjItMi4yMDZhNC4yIDQuMiAwIDAgMCAuODQzLjg0bC0yLjk4IDUuMTkzYTEuNzI3IDEuNzI3IDAgMCAwLS40MTMtLjA1IDEuNzggMS43OCAwIDEgMCAxLjI3Ny41NGwyLjk4LTUuMTc4YTQuMDkgNC4wOSAwIDAgMCAxLjEzMy4zdjEuNDA4YTIuMDU1IDIuMDU1IDAgMSAwIC45OSAwVjE3LjFhNC4yMyA0LjIzIDAgMCAwIDEuMTQzLS4zbDIuNDYgNC4yNmExLjgyNCAxLjgyNCAwIDEgMCAxLjMwNi0uNTUyIDEuNzc4IDEuNzc4IDAgMCAwLS40NDYuMDU3bC0yLjQ2LTQuMjY1YTMuOTYgMy45NiAwIDAgMCAuODI2LS44MjdsLjQ0Ni4yNThhMi4zMjQgMi4zMjQgMCAwIDAtLjEyLjczOCAyLjQgMi40IDAgMSAwIC42Mi0xLjZsLS40NDMtLjI1NGE0LjE1NSA0LjE1NSAwIDAgMCAuMzEtMS4xNTRoNC42NmExLjc1MyAxLjc1MyAwIDEgMCAxLjY4LTIuMjV6bTAgMi43MWEuOTU4Ljk1OCAwIDEgMSAuOTU4LS45NTguOTYuOTYgMCAwIDEtLjk1OC45NnpNMTAuNzUgMTYuMTRhMy4xNzcgMy4xNzcgMCAxIDEgMy4xNzctMy4xNzggMy4xOCAzLjE4IDAgMCAxLTMuMTc3IDMuMTc3em03LjE2My04LjA0YTEuMjYgMS4yNiAwIDEgMSAxLjI2IDEuMjYgMS4yNiAxLjI2IDAgMCAxLTEuMjYtMS4yNnpNMTUuNzQgNi41OTRhMS4zMTQgMS4zMTQgMCAxIDEtMS4zMTUtMS4zMTQgMS4zMTUgMS4zMTUgMCAwIDEgMS4zMTQgMS4zMTR6TTkuOTk2IDEuNTQ4YS43NTMuNzUzIDAgMSAxIC43NTMuNzUzLjc1NC43NTQgMCAwIDEtLjc1My0uNzUyek00Ljg5NyA0LjRhLjkxLjkxIDAgMSAxIC45MS45MS45MS45MSAwIDAgMS0uOTEtLjkxek0yLjE5IDguOTM2YS45MS45MSAwIDEgMSAuOTA4LS45MS45MS45MSAwIDAgMS0uOTEuOTF6bS43NyA1LjUyNmExLjUwNiAxLjUwNiAwIDEgMSAxLjUwNS0xLjUwNiAxLjUwOCAxLjUwOCAwIDAgMS0xLjUwOCAxLjUwNnptLS4xIDMuNjQ2YTEuMDMyIDEuMDMyIDAgMSAxLTEuMDMzLTEuMDMyIDEuMDMzIDEuMDMzIDAgMCAxIDEuMDMyIDEuMDMyem0yLjk4NyA1LjExYS45ODYuOTg2IDAgMSAxLS45ODYtLjk4Ny45ODcuOTg3IDAgMCAxIC45ODcuOTg3em00LjktMS40NmExLjI2IDEuMjYgMCAxIDEgMS4yNi0xLjI2IDEuMjYgMS4yNiAwIDAgMS0xLjI1NyAxLjI2em02LjQ0Mi41N2ExLjAzMiAxLjAzMiAwIDEgMS0xLjAzMy0xLjAyOCAxLjAzMyAxLjAzMyAwIDAgMSAxLjAzMiAxLjAyOHptLS40LTcuNDU4YTEuNiAxLjYgMCAxIDEtMS42IDEuNiAxLjYgMS42IDAgMCAxIDEuNi0xLjZ6IiBmaWxsPSIjODk4OTg5Ii8+PC9zdmc+';
+      default:
+        return undefined;
+    }
+  })(typeCode);
+
+  return imageUrl ? (
+    <div
+      className={css`
+        display: inline-block;
+        background-image: url(${imageUrl});
+        background-size: ${size}px;
+        background-repeat: no-repeat;
+        width: ${size}px;
+        height: ${size}px;
+      `}
+    />
+  ) : null;
+};
--- a/plugins-bundled/internal/marketplace-app/src/components/SearchField.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/SearchField.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+interface Props {
+  value?: string;
+  onSearch: (value: string) => void;
+}
+
+export const SearchField = ({ value, onSearch }: Props) => {
+  const [query, setQuery] = useState(value);
+  const styles = useStyles2(getStyles);
+
+  return (
+    <input
+      value={query}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.keyCode === 13) {
+          onSearch(e.currentTarget.value);
+        }
+      }}
+      className={styles}
+      placeholder="Search Grafana plugins"
+      onChange={(e) => {
+        setQuery(e.currentTarget.value);
+      }}
+    />
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => css`
+  outline: none;
+  font-size: 20px;
+  width: 100%;
+  border-bottom: 2px solid ${theme.colors.border.weak};
+  background: transparent;
+  line-height: 38px;
+  font-weight: 400;
+  padding: ${theme.spacing(0.5)};
+  margin: ${theme.spacing(3)} 0;
+
+  &::placeholder {
+    color: ${theme.colors.action.disabledText};
+  }
+`;
--- a/plugins-bundled/internal/marketplace-app/src/components/VersionList.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/components/VersionList.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { css } from '@emotion/css';
+
+import { dateTimeFormatTimeAgo, GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { Version } from '../types';
+
+interface Props {
+  versions: Version[];
+}
+
+export const VersionList = ({ versions }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Version</th>
+            <th>Last updated</th>
+          </tr>
+        </thead>
+        <tbody>
+          {versions.map((version) => {
+            return (
+              <tr key={version.version}>
+                <td>{version.version}</td>
+                <td>{dateTimeFormatTimeAgo(version.createdAt)}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    padding: ${theme.spacing(2, 4, 3)};
+  `,
+  table: css`
+    width: 100%;
+    td,
+    th {
+      padding: ${theme.spacing()} 0;
+    }
+    th {
+      font-size: ${theme.typography.h5.fontSize};
+    }
+  `,
+});
--- a/plugins-bundled/internal/marketplace-app/src/config/Settings.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/config/Settings.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { PluginConfigPageProps, AppPluginMeta, PluginMeta } from '@grafana/data';
+import { MarketplaceAppSettings } from 'types';
+import { Button, Field, Legend, Switch } from '@grafana/ui';
+import { api } from '../api';
+
+interface Props extends PluginConfigPageProps<AppPluginMeta<MarketplaceAppSettings>> {}
+
+export const Settings = ({ plugin }: Props) => {
+  const [meta, setMeta] = useState(plugin.meta);
+  const [state, setState] = useState<MarketplaceAppSettings>(meta.jsonData ?? {});
+
+  const { pinned, enabled } = meta;
+  const { includeEnterprise } = state;
+
+  const onSave = () => {
+    updateAndReload('grafana-marketplace-app', {
+      pinned,
+      enabled,
+      jsonData: state,
+    });
+  };
+
+  return (
+    <>
+      <Legend>General</Legend>
+      <Field label="Enable app">
+        <Switch
+          value={enabled}
+          onChange={(e) => {
+            setMeta({ ...meta, enabled: e.currentTarget.checked });
+          }}
+        />
+      </Field>
+      <Field label="Pin app" description="Add the app to the side menu.">
+        <Switch
+          value={pinned}
+          onChange={(e) => {
+            setMeta({ ...meta, pinned: e.currentTarget.checked });
+          }}
+        />
+      </Field>
+      <Legend>Plugins</Legend>
+      <Field
+        label="Show Enterprise plugins"
+        description="Enterprise plugins require a Grafana Enterprise subscription."
+      >
+        <Switch
+          value={includeEnterprise}
+          onChange={(e) => {
+            setState({ ...state, includeEnterprise: e.currentTarget.checked });
+          }}
+        />
+      </Field>
+      <Button onClick={onSave}>Save</Button>
+    </>
+  );
+};
+
+const updateAndReload = async (pluginId: string, data: Partial<PluginMeta>) => {
+  try {
+    await api.updatePlugin(pluginId, data);
+
+    // Reloading the page as the changes made here wouldn't be propagated to the actual plugin otherwise.
+    // This is not ideal, however unfortunately currently there is no supported way for updating the plugin state.
+    window.location.reload();
+  } catch (e) {
+    console.error('Error while updating the plugin', e);
+  }
+};
--- a/plugins-bundled/internal/marketplace-app/src/constants.ts
+++ b/plugins-bundled/internal/marketplace-app/src/constants.ts
@@ -0,0 +1,3 @@
+export const API_ROOT = '/api/plugins';
+export const PLUGIN_ROOT = '/a/grafana-marketplace-app';
+export const GRAFANA_API_ROOT = '/api/gnet';
--- a/plugins-bundled/internal/marketplace-app/src/helpers.ts
+++ b/plugins-bundled/internal/marketplace-app/src/helpers.ts
@@ -0,0 +1,20 @@
+import { OrgRole } from '@grafana/data';
+import { config } from '@grafana/runtime';
+
+export function hasRole(requiredRole: OrgRole): boolean {
+  const user = config.bootData.user;
+  switch (requiredRole) {
+    case OrgRole.Admin: {
+      return user.orgRole === OrgRole.Admin;
+    }
+    case OrgRole.Editor: {
+      return user.orgRole === OrgRole.Admin || user.orgRole === OrgRole.Editor;
+    }
+    case OrgRole.Viewer: {
+      return user.orgRole === OrgRole.Admin || user.orgRole === OrgRole.Editor || user.orgRole === OrgRole.Viewer;
+    }
+    default: {
+      return false;
+    }
+  }
+}
--- a/plugins-bundled/internal/marketplace-app/src/hooks/useHistory.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/hooks/useHistory.tsx
@@ -0,0 +1,13 @@
+import { getLocationSrv } from '@grafana/runtime';
+
+export const useHistory = () => {
+  return {
+    push: ({ query }: any) => {
+      getLocationSrv().update({
+        partial: true,
+        replace: false,
+        query,
+      });
+    },
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/hooks/useOrg.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/hooks/useOrg.tsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { Org } from '../types';
+import { api } from '../api';
+
+interface State {
+  isLoading: boolean;
+  org?: Org;
+}
+
+export const useOrg = (slug: string): State => {
+  const [state, setState] = useState<State>({
+    isLoading: true,
+  });
+
+  useEffect(() => {
+    const fetchOrgData = async () => {
+      const org = await api.getOrg(slug);
+      setState({ org, isLoading: false });
+    };
+    fetchOrgData();
+  }, [slug]);
+
+  return state;
+};
--- a/plugins-bundled/internal/marketplace-app/src/hooks/usePlugins.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/hooks/usePlugins.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import { Plugin, Metadata } from '../types';
+import { api } from '../api';
+
+type PluginsState = {
+  isLoading: boolean;
+  items: Plugin[];
+  installedPlugins: any[];
+};
+
+export const usePlugins = (includeEnterprise = false) => {
+  const [state, setState] = useState<PluginsState>({ isLoading: true, items: [], installedPlugins: [] });
+
+  useEffect(() => {
+    const fetchPluginData = async () => {
+      const items = await api.getRemotePlugins();
+      const filteredItems = items
+        .filter((plugin) => Boolean(plugin.versionSignatureType))
+        .filter((plugin) => includeEnterprise || plugin.status !== 'enterprise')
+        .filter((plugin) => !status || plugin.status === status);
+      const installedPlugins = await api.getInstalledPlugins();
+
+      setState((state) => ({ ...state, items: filteredItems, installedPlugins, isLoading: false }));
+    };
+
+    fetchPluginData();
+  }, [includeEnterprise]);
+
+  return state;
+};
+
+type PluginState = {
+  isLoading: boolean;
+  remote?: Plugin;
+  remoteVersions?: Array<{ version: string; createdAt: string }>;
+  local?: Metadata;
+};
+
+export const usePlugin = (slug: string): PluginState => {
+  const [state, setState] = useState<PluginState>({
+    isLoading: true,
+  });
+
+  useEffect(() => {
+    const fetchPluginData = async () => {
+      const plugin = await api.getPlugin(slug);
+      setState({ ...plugin, isLoading: false });
+    };
+    fetchPluginData();
+  }, [slug]);
+
+  return state;
+};
--- a/plugins-bundled/internal/marketplace-app/src/img/browse.png
+++ b/plugins-bundled/internal/marketplace-app/src/img/browse.png
--- a/plugins-bundled/internal/marketplace-app/src/img/details.png
+++ b/plugins-bundled/internal/marketplace-app/src/img/details.png
--- a/plugins-bundled/internal/marketplace-app/src/img/discover.png
+++ b/plugins-bundled/internal/marketplace-app/src/img/discover.png
--- a/plugins-bundled/internal/marketplace-app/src/img/logo.svg
+++ b/plugins-bundled/internal/marketplace-app/src/img/logo.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.799368,0,0,0.799368,2.40829,2.40734)">
+        <path d="M22,7.82C22.005,7.757 22.005,7.693 22,7.63L20,2.63C19.84,2.226 19.434,1.97 19,2L5,2C4.591,2 4.221,2.25 4.07,2.63L2.07,7.63C2.065,7.693 2.065,7.757 2.07,7.82C2.037,7.876 2.013,7.937 2,8C2.023,9.404 2.783,10.698 4,11.4L4,21C4,21.549 4.451,22 5,22L19,22C19.549,22 20,21.549 20,21L20,11.44C21.229,10.731 21.991,9.419 22,8C22.009,7.94 22.009,7.88 22,7.82ZM13,20L11,20L11,16L13,16L13,20ZM18,20L15,20L15,15C15,14.451 14.549,14 14,14L10,14C9.451,14 9,14.451 9,15L9,20L6,20L6,12C7.151,11.994 8.246,11.49 9,10.62C9.759,11.481 10.853,11.974 12,11.974C13.147,11.974 14.241,11.481 15,10.62C15.754,11.49 16.849,11.994 18,12L18,20ZM18,10C16.903,10 16,9.097 16,8C16,7.451 15.549,7 15,7C14.451,7 14,7.451 14,8C14,9.097 13.097,10 12,10C10.903,10 10,9.097 10,8C10,7.451 9.549,7 9,7C8.451,7 8,7.451 8,8C8.001,8.025 8.001,8.05 8.001,8.075C8.001,9.173 7.098,10.076 6,10.076C4.93,10.076 4.04,9.219 4,8.15L5.68,4L18.32,4L20,8.15C19.922,9.19 19.043,10.003 18,10Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(20.007,0,0,20.0024,2,11.9988)"><stop offset="0" style="stop-color:rgb(242,204,12);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,152,48);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>
--- a/plugins-bundled/internal/marketplace-app/src/module.ts
+++ b/plugins-bundled/internal/marketplace-app/src/module.ts
@@ -0,0 +1,15 @@
+import { ComponentClass } from 'react';
+
+import { AppPlugin, AppPluginMeta, AppRootProps, PluginConfigPageProps } from '@grafana/data';
+import { Settings } from './config/Settings';
+import { MarketplaceRootPage } from './RootPage';
+import { MarketplaceAppSettings } from './types';
+
+export const plugin = new AppPlugin<MarketplaceAppSettings>()
+  .setRootPage((MarketplaceRootPage as unknown) as ComponentClass<AppRootProps>)
+  .addConfigPage({
+    title: 'Settings',
+    icon: 'info-circle',
+    body: (Settings as unknown) as ComponentClass<PluginConfigPageProps<AppPluginMeta<MarketplaceAppSettings>>>,
+    id: 'settings',
+  });
--- a/plugins-bundled/internal/marketplace-app/src/pages/Browse.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/pages/Browse.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { AppRootProps, SelectableValue, dateTimeParse } from '@grafana/data';
+import { Field, LoadingPlaceholder, Select } from '@grafana/ui';
+
+import { PluginList } from '../components/PluginList';
+import { SearchField } from '../components/SearchField';
+import { HorizontalGroup } from '../components/HorizontalGroup';
+import { usePlugins } from '../hooks/usePlugins';
+import { useHistory } from '../hooks/useHistory';
+import { MarketplaceAppSettings, Plugin } from '../types';
+import { Page } from 'components/Page';
+
+export const Browse = ({ query, meta }: AppRootProps) => {
+  const { q, filterBy, sortBy } = query;
+  const { includeEnterprise } = meta.jsonData as MarketplaceAppSettings;
+
+  const plugins = usePlugins(includeEnterprise);
+  const history = useHistory();
+
+  const onSortByChange = (value: SelectableValue<string>) => {
+    history.push({ query: { sortBy: value.value } });
+  };
+
+  const onFilterByChange = (value: SelectableValue<string>) => {
+    history.push({ query: { filterBy: value.value } });
+  };
+
+  const onSearch = (q: any) => {
+    history.push({ query: { filterBy: null, q } });
+  };
+
+  const filteredPlugins = plugins.items
+    // Filter by plugin type
+    .filter((_) => !filterBy || _.typeCode === filterBy || filterBy === 'all')
+    // Naïve search by checking if any of the properties contains the query string
+    .filter((plugin) => {
+      const fields = [plugin.name.toLowerCase(), plugin.orgName.toLowerCase()];
+      return !q || fields.some((f) => f.includes(q.toLowerCase()));
+    });
+
+  filteredPlugins.sort(sorters[sortBy || 'name']);
+
+  return (
+    <Page>
+      <SearchField value={q} onSearch={onSearch} />
+      <HorizontalGroup>
+        <div>
+          {plugins.isLoading ? (
+            <LoadingPlaceholder
+              className={css`
+                margin-bottom: 0;
+              `}
+              text="Loading results"
+            />
+          ) : (
+            `${filteredPlugins.length} ${filteredPlugins.length > 1 ? 'results' : 'result'}`
+          )}
+        </div>
+        <Field label="Show">
+          <Select
+            width={15}
+            value={filterBy || 'all'}
+            onChange={onFilterByChange}
+            options={[
+              { value: 'all', label: 'All' },
+              { value: 'panel', label: 'Panels' },
+              { value: 'datasource', label: 'Data sources' },
+              { value: 'app', label: 'Apps' },
+            ]}
+          />
+        </Field>
+        <Field label="Sort by">
+          <Select
+            width={20}
+            value={sortBy || 'name'}
+            onChange={onSortByChange}
+            options={[
+              { value: 'name', label: 'Name' },
+              { value: 'popularity', label: 'Popularity' },
+              { value: 'updated', label: 'Updated date' },
+              { value: 'published', label: 'Published date' },
+              { value: 'downloads', label: 'Downloads' },
+            ]}
+          />
+        </Field>
+      </HorizontalGroup>
+
+      {!plugins.isLoading && <PluginList plugins={filteredPlugins} />}
+    </Page>
+  );
+};
+
+const sorters: { [name: string]: (a: Plugin, b: Plugin) => number } = {
+  name: (a: Plugin, b: Plugin) => a.name.localeCompare(b.name),
+  updated: (a: Plugin, b: Plugin) => dateTimeParse(b.updatedAt).valueOf() - dateTimeParse(a.updatedAt).valueOf(),
+  published: (a: Plugin, b: Plugin) => dateTimeParse(b.createdAt).valueOf() - dateTimeParse(a.createdAt).valueOf(),
+  downloads: (a: Plugin, b: Plugin) => b.downloads - a.downloads,
+  popularity: (a: Plugin, b: Plugin) => b.popularity - a.popularity,
+};
--- a/plugins-bundled/internal/marketplace-app/src/pages/Discover.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/pages/Discover.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { cx, css } from '@emotion/css';
+
+import { dateTimeParse, AppRootProps, GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, Legend, LinkButton } from '@grafana/ui';
+
+import { PLUGIN_ROOT } from '../constants';
+import { Card } from '../components/Card';
+import { Grid } from '../components/Grid';
+import { PluginList } from '../components/PluginList';
+import { SearchField } from '../components/SearchField';
+import { PluginTypeIcon } from '../components/PluginTypeIcon';
+import { usePlugins } from '../hooks/usePlugins';
+import { useHistory } from '../hooks/useHistory';
+import { MarketplaceAppSettings, Plugin } from '../types';
+import { Page } from 'components/Page';
+import { Loader } from 'components/Loader';
+
+export const Discover = ({ meta }: AppRootProps) => {
+  const { includeEnterprise } = meta.jsonData as MarketplaceAppSettings;
+
+  const { items, isLoading } = usePlugins(includeEnterprise);
+  const history = useHistory();
+  const styles = useStyles2(getStyles);
+
+  const onSearch = (q: string) => {
+    history.push({ query: { q, tab: 'browse' } });
+  };
+
+  const featuredPlugins = items.filter((_) => _.featured > 0);
+  featuredPlugins.sort((a: Plugin, b: Plugin) => {
+    return b.featured - a.featured;
+  });
+
+  const recentlyAdded = items.filter((_) => true);
+  recentlyAdded.sort((a: Plugin, b: Plugin) => {
+    const at = dateTimeParse(a.createdAt);
+    const bt = dateTimeParse(b.createdAt);
+    return bt.valueOf() - at.valueOf();
+  });
+
+  const mostPopular = items.filter((_) => true);
+  mostPopular.sort((a: Plugin, b: Plugin) => {
+    return b.popularity - a.popularity;
+  });
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Page>
+      <SearchField onSearch={onSearch} />
+      {/* Featured */}
+      <Legend className={styles.legend}>Featured</Legend>
+      <PluginList plugins={featuredPlugins.slice(0, 5)} />
+
+      {/* Most popular */}
+      <div className={styles.legendContainer}>
+        <Legend className={styles.legend}>Most popular</Legend>
+        <LinkButton href={`${PLUGIN_ROOT}?tab=browse&sortBy=popularity`}>See more</LinkButton>
+      </div>
+      <PluginList plugins={mostPopular.slice(0, 5)} />
+
+      {/* Recently added */}
+      <div className={styles.legendContainer}>
+        <Legend className={styles.legend}>Recently added</Legend>
+        <LinkButton href={`${PLUGIN_ROOT}?tab=browse&sortBy=published'`}>See more</LinkButton>
+      </div>
+      <PluginList plugins={recentlyAdded.slice(0, 5)} />
+
+      {/* Browse by type */}
+      <Legend className={cx(styles.legend)}>Browse by type</Legend>
+      <Grid>
+        <Card
+          layout="horizontal"
+          href={`${PLUGIN_ROOT}?tab=browse&filterBy=panel`}
+          image={<PluginTypeIcon typeCode="panel" size={18} />}
+          text={<span className={styles.typeLegend}>&nbsp;Panels</span>}
+        />
+        <Card
+          layout="horizontal"
+          href={`${PLUGIN_ROOT}?tab=browse&filterBy=datasource`}
+          image={<PluginTypeIcon typeCode="datasource" size={18} />}
+          text={<span className={styles.typeLegend}>&nbsp;Data sources</span>}
+        />
+        <Card
+          layout="horizontal"
+          href={`${PLUGIN_ROOT}?tab=browse&filterBy=app`}
+          image={<PluginTypeIcon typeCode="app" size={18} />}
+          text={<span className={styles.typeLegend}>&nbsp;Apps</span>}
+        />
+      </Grid>
+    </Page>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    legend: css`
+      margin-top: ${theme.spacing(4)};
+    `,
+    legendContainer: css`
+      align-items: baseline;
+      display: flex;
+      justify-content: space-between;
+    `,
+    typeLegend: css`
+      align-items: center;
+      display: flex;
+      font-size: ${theme.typography.h4.fontSize};
+    `,
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/pages/Library.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/pages/Library.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { PLUGIN_ROOT } from '../constants';
+import { PluginList } from '../components/PluginList';
+import { usePlugins } from '../hooks/usePlugins';
+import { Page } from 'components/Page';
+import { Loader } from 'components/Loader';
+
+export const Library = () => {
+  const { isLoading, items, installedPlugins } = usePlugins(true);
+  const styles = useStyles2(getStyles);
+
+  const filteredPlugins = items.filter((plugin) => !!installedPlugins.find((_) => _.id === plugin.slug));
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Page>
+      <h1 className={styles.header}>Library</h1>
+      {filteredPlugins.length > 0 ? (
+        <PluginList plugins={filteredPlugins} />
+      ) : (
+        <p>
+          You haven&#39;t installed any plugins. Browse the{' '}
+          <a className={styles.link} href={`${PLUGIN_ROOT}/?tab=browse&sortBy=popularity`}>
+            marketplace
+          </a>{' '}
+          for plugins to install.
+        </p>
+      )}
+    </Page>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    header: css`
+      margin-bottom: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    link: css`
+      text-decoration: underline;
+    `,
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/pages/OrgDetails.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/pages/OrgDetails.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { css } from '@emotion/css';
+
+import { AppRootProps, GrafanaTheme2 } from '@grafana/data';
+
+import { PluginList } from '../components/PluginList';
+import { usePlugins } from '../hooks/usePlugins';
+import { useOrg } from '../hooks/useOrg';
+
+import { useStyles2 } from '@grafana/ui';
+import { Page } from 'components/Page';
+import { Loader } from 'components/Loader';
+
+export const OrgDetails = ({ query }: AppRootProps) => {
+  const { orgSlug } = query;
+
+  const orgData = useOrg(orgSlug);
+  const { isLoading, items } = usePlugins();
+  const styles = useStyles2(getStyles);
+
+  const plugins = items.filter((plugin) => plugin.orgSlug === orgSlug);
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Page>
+      <div className={styles.header}>
+        <img src={orgData.org?.avatarUrl} className={styles.img} />
+        <h1 className={styles.orgName}>{orgData.org?.name}</h1>
+      </div>
+      <PluginList plugins={plugins} />
+    </Page>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    header: css`
+      align-items: center;
+      display: flex;
+      margin-bottom: ${theme.spacing(3)};
+      margin-top: ${theme.spacing(3)};
+    `,
+    img: css`
+      height: 64px;
+      max-width: 64px;
+      object-fit: cover;
+      width: 100%;
+    `,
+    orgName: css`
+      margin-left: ${theme.spacing(3)};
+    `,
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/pages/PluginDetails.tsx
+++ b/plugins-bundled/internal/marketplace-app/src/pages/PluginDetails.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react';
+import { css } from '@emotion/css';
+
+import { AppRootProps, GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, TabsBar, TabContent, Tab, Icon } from '@grafana/ui';
+
+import { VersionList } from '../components/VersionList';
+import { InstallControls } from '../components/InstallControls';
+import { PLUGIN_ROOT, GRAFANA_API_ROOT } from '../constants';
+import { usePlugin } from '../hooks/usePlugins';
+import { Page } from 'components/Page';
+import { Loader } from 'components/Loader';
+
+export const PluginDetails = ({ query }: AppRootProps) => {
+  const { slug } = query;
+  const [tabs, setTabs] = useState([
+    { label: 'Overview', active: true },
+    { label: 'Version history', active: false },
+  ]);
+  const { isLoading, local, remote, remoteVersions } = usePlugin(slug);
+  const styles = useStyles2(getStyles);
+
+  const description = remote?.description;
+  const readme = remote?.readme;
+  const version = local?.info?.version || remote?.version;
+  const links = (local?.info?.links || remote?.json?.info?.links) ?? [];
+  const downloads = remote?.downloads;
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <Page>
+      <div className={styles.headerContainer}>
+        <img
+          src={`${GRAFANA_API_ROOT}/plugins/${slug}/versions/${remote?.version}/logos/small`}
+          className={css`
+            object-fit: cover;
+            width: 100%;
+            height: 68px;
+            max-width: 68px;
+          `}
+        />
+        <div className={styles.headerWrapper}>
+          <h1>{remote?.name}</h1>
+          <div className={styles.headerLinks}>
+            <a className={styles.headerOrgName} href={`${PLUGIN_ROOT}?tab=org&orgSlug=${remote?.orgSlug}`}>
+              {remote?.orgName}
+            </a>
+            {links.map((link: any) => (
+              <a key={link.name} href={link.url}>
+                {link.name}
+              </a>
+            ))}
+            {downloads && (
+              <span>
+                <Icon name="cloud-download" />
+                {` ${new Intl.NumberFormat().format(downloads)}`}{' '}
+              </span>
+            )}
+            {version && <span>{version}</span>}
+          </div>
+          <p>{description}</p>
+          {remote && <InstallControls localPlugin={local} remotePlugin={remote} slug={slug} />}
+        </div>
+      </div>
+      <TabsBar>
+        {tabs.map((tab, key) => (
+          <Tab
+            key={key}
+            label={tab.label}
+            active={tab.active}
+            onChangeTab={() => {
+              setTabs(tabs.map((tab, index) => ({ ...tab, active: index === key })));
+            }}
+          />
+        ))}
+      </TabsBar>
+      <TabContent>
+        {tabs.find((_) => _.label === 'Overview')?.active && (
+          <div className={styles.readme} dangerouslySetInnerHTML={{ __html: readme ?? '' }} />
+        )}
+        {tabs.find((_) => _.label === 'Version history')?.active && <VersionList versions={remoteVersions ?? []} />}
+      </TabContent>
+    </Page>
+  );
+};
+
+export const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    headerContainer: css`
+      display: flex;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      min-height: 120px;
+    `,
+    headerWrapper: css`
+      margin-left: ${theme.spacing(3)};
+    `,
+    headerLinks: css`
+      display: flex;
+      align-items: center;
+      margin-top: ${theme.spacing()};
+      margin-bottom: ${theme.spacing(3)};
+
+      & > * {
+        &::after {
+          content: '|';
+          padding: 0 ${theme.spacing()};
+        }
+      }
+      & > *:last-child {
+        &::after {
+          content: '';
+          padding-right: 0;
+        }
+      }
+      font-size: ${theme.typography.h4.fontSize};
+    `,
+    headerOrgName: css`
+      font-size: ${theme.typography.h4.fontSize};
+    `,
+    message: css`
+      color: ${theme.colors.text.secondary};
+    `,
+    readme: css`
+      padding: ${theme.spacing(3, 4)};
+
+      & img {
+        max-width: 100%;
+      }
+
+      h1,
+      h2,
+      h3 {
+        margin-top: ${theme.spacing(3)};
+        margin-bottom: ${theme.spacing(2)};
+      }
+
+      *:first-child {
+        margin-top: 0;
+      }
+
+      li {
+        margin-left: ${theme.spacing(2)};
+        & > p {
+          margin: ${theme.spacing()} 0;
+        }
+      }
+    `,
+  };
+};
--- a/plugins-bundled/internal/marketplace-app/src/pages/index.ts
+++ b/plugins-bundled/internal/marketplace-app/src/pages/index.ts
@@ -0,0 +1,47 @@
+import React from 'react';
+import { AppRootProps } from '@grafana/data';
+import { Discover } from './Discover';
+import { Browse } from './Browse';
+import { PluginDetails } from './PluginDetails';
+import { OrgDetails } from './OrgDetails';
+import { Library } from './Library';
+
+export type PageDefinition = {
+  component: React.FC<AppRootProps>;
+  icon: string;
+  id: string;
+  text: string;
+};
+
+export const pages: PageDefinition[] = [
+  {
+    component: Discover,
+    icon: 'file-alt',
+    id: 'discover',
+    text: 'Discover',
+  },
+  {
+    component: Browse,
+    icon: 'file-alt',
+    id: 'browse',
+    text: 'Browse',
+  },
+  {
+    component: Library,
+    icon: 'file-alt',
+    id: 'library',
+    text: 'Library',
+  },
+  {
+    component: PluginDetails,
+    icon: 'file-alt',
+    id: 'plugin',
+    text: 'Plugin',
+  },
+  {
+    component: OrgDetails,
+    icon: 'file-alt',
+    id: 'org',
+    text: 'Organization',
+  },
+];
--- a/plugins-bundled/internal/marketplace-app/src/plugin.json
+++ b/plugins-bundled/internal/marketplace-app/src/plugin.json
@@ -0,0 +1,79 @@
+{
+  "$schema": "https://github.com/grafana/grafana/raw/master/docs/sources/developers/plugins/plugin.schema.json",
+  "type": "app",
+  "name": "Marketplace",
+  "id": "grafana-marketplace-app",
+  "backend": false,
+  "info": {
+    "author": {
+      "name": "Grafana Labs",
+      "url": "https://grafana.com"
+    },
+    "keywords": ["plugins"],
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "links": [
+      {
+        "name": "Website",
+        "url": "https://github.com/grafana/marketplace-app"
+      },
+      {
+        "name": "License",
+        "url": "https://github.com/grafana/marketplace-app/blob/master/LICENSE"
+      }
+    ],
+    "screenshots": [
+      {
+        "name": "Discover",
+        "path": "img/discover.png"
+      },
+      {
+        "name": "Browse",
+        "path": "img/browse.png"
+      },
+      {
+        "name": "Install",
+        "path": "img/details.png"
+      }
+    ],
+    "version": "%VERSION%",
+    "updated": "%TODAY%"
+  },
+  "includes": [
+    {
+      "type": "page",
+      "name": "Discover",
+      "path": "/a/grafana-marketplace-app?tab=discover",
+      "role": "Admin",
+      "addToNav": true,
+      "defaultNav": true
+    },
+    {
+      "type": "page",
+      "name": "Browse",
+      "path": "/a/grafana-marketplace-app/?tab=browse",
+      "role": "Admin",
+      "addToNav": true
+    },
+    {
+      "type": "page",
+      "name": "Library",
+      "path": "/a/grafana-marketplace-app/?tab=library",
+      "role": "Admin",
+      "addToNav": true
+    },
+    {
+      "type": "page",
+      "name": "View plugin",
+      "path": "/a/grafana-marketplace-app?tab=plugin",
+      "role": "Admin"
+    }
+  ],
+  "dependencies": {
+    "grafanaDependency": ">=7.3.0",
+    "grafanaVersion": "7.3.x",
+    "plugins": []
+  }
+}
--- a/plugins-bundled/internal/marketplace-app/src/types.ts
+++ b/plugins-bundled/internal/marketplace-app/src/types.ts
@@ -0,0 +1,79 @@
+export interface MarketplaceAppSettings {
+  includeEnterprise?: boolean;
+}
+
+export type PluginTypeCode = 'app' | 'panel' | 'datasource';
+
+export interface Plugin {
+  name: string;
+  description: string;
+  slug: string;
+  orgName: string;
+  orgSlug: string;
+  signatureType: string;
+  version: string;
+  status: string;
+  popularity: number;
+  downloads: number;
+  updatedAt: string;
+  createdAt: string;
+  typeCode: string;
+  featured: number;
+  readme: string;
+  internal: boolean;
+  versionSignatureType: string;
+  packages: {
+    [arch: string]: {
+      packageName: string;
+      downloadUrl: string;
+    };
+  };
+  links: Array<{
+    rel: string;
+    href: string;
+  }>;
+  json: {
+    dependencies: {
+      grafanaDependency: string;
+      grafanaVersion: string;
+    };
+    info: {
+      links: Array<{
+        name: string;
+        url: string;
+      }>;
+    };
+  };
+}
+
+export type Metadata = {
+  info: {
+    version: string;
+    links: Array<{
+      name: string;
+      url: string;
+    }>;
+  };
+  dev: boolean;
+};
+
+export interface Version {
+  version: string;
+  createdAt: string;
+}
+
+export interface PluginDetails {
+  remote?: Plugin;
+  remoteVersions?: Version[];
+  local?: Metadata;
+}
+
+export interface Org {
+  slug: string;
+  name: string;
+  url: string;
+  createdAt: string;
+  updatedAt: string;
+  avatar: string;
+  avatarUrl: string;
+}
--- a/plugins-bundled/internal/marketplace-app/tsconfig.json
+++ b/plugins-bundled/internal/marketplace-app/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../packages/grafana-toolkit/src/config/tsconfig.plugin.json",
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "./src",
+    "typeRoots": ["./node_modules/@types", "../../../node_modules/@types"]
+  }
+}
--- a/public/app/features/plugins/PluginPage.tsx
+++ b/public/app/features/plugins/PluginPage.tsx
@@ -17,13 +17,14 @@ import {
  PluginSignatureType,
  PluginType,
  UrlQueryMap,
+  PanelPluginMeta,
 } from '@grafana/data';
 import { AppNotificationSeverity } from 'app/types';
 import { Alert, LinkButton, PluginSignatureBadge, Tooltip, Badge, useStyles2, Icon } from '@grafana/ui';

 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
-import { importAppPlugin, importDataSourcePlugin, importPanelPlugin } from './plugin_loader';
+import { importAppPlugin, importDataSourcePlugin, importPanelPluginFromMeta } from './plugin_loader';
 import { getNotFoundNav } from 'app/core/nav_model_srv';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { AppConfigCtrlWrapper } from './wrappers/AppConfigWrapper';
@@ -501,16 +502,7 @@ export function loadPlugin(pluginId: string): Promise<GrafanaPlugin> {
      return importDataSourcePlugin(info);
    }
    if (info.type === PluginType.panel) {
-      return importPanelPlugin(pluginId).then((plugin) => {
-        // Panel Meta does not have the *full* settings meta
-        return getPluginSettings(pluginId).then((meta) => {
-          plugin.meta = {
-            ...meta, // Set any fields that do not exist
-            ...plugin.meta,
-          };
-          return plugin;
-        });
-      });
+      return importPanelPluginFromMeta(info as PanelPluginMeta);
    }
    if (info.type === PluginType.renderer) {
      return Promise.resolve({ meta: info } as GrafanaPlugin);
--- a/public/app/features/plugins/plugin_loader.ts
+++ b/public/app/features/plugins/plugin_loader.ts
@@ -236,7 +236,17 @@ export function importPanelPlugin(id: string): Promise<grafanaData.PanelPlugin>
    throw new Error(`Plugin ${id} not found`);
  }

-  panelCache[id] = importPluginModule(meta.module)
+  panelCache[id] = getPanelPlugin(meta);
+
+  return panelCache[id];
+}
+
+export function importPanelPluginFromMeta(meta: grafanaData.PanelPluginMeta): Promise<grafanaData.PanelPlugin> {
+  return getPanelPlugin(meta);
+}
+
+function getPanelPlugin(meta: grafanaData.PanelPluginMeta): Promise<grafanaData.PanelPlugin> {
+  return importPluginModule(meta.module)
    .then((pluginExports) => {
      if (pluginExports.plugin) {
        return pluginExports.plugin as grafanaData.PanelPlugin;
@@ -253,9 +263,7 @@ export function importPanelPlugin(id: string): Promise<grafanaData.PanelPlugin>
    })
    .catch((err) => {
      // TODO, maybe a different error plugin
-      console.warn('Error loading panel plugin: ' + id, err);
+      console.warn('Error loading panel plugin: ' + meta.id, err);
      return getPanelPluginLoadError(meta, err);
    });
-
-  return panelCache[id];
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -6111,6 +6111,11 @@
  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.0.2.tgz#5e8b09f0e4af53034b1d0fb9977a277847836205"
  integrity sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==

+"@types/semver@^7.3.4":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
+  integrity sha512-+nVsLKlcUCeMzD2ufHEYuJ9a2ovstb6Dp52A5VsoKxDXgvE051XgHI/33I1EymwkRGQkwnA0LkhnUzituGs4EQ==
+
 "@types/serve-static@*":
  version "1.13.3"
  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.3.tgz#eb7e1c41c4468272557e897e9171ded5e2ded9d1"