From 6b9f067bf2a9a8642dada407f4918caa39e28ab9 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 4 Jun 2021 13:45:39 -0400
Subject: [PATCH] [v8.0.x] Catalog: Show message prompting user to refresh
 browser (#35271) (#35279)

(cherry picked from commit 3bbe6473b6507f439dd2fc34d2cb1521ebbe9f99)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>
---
 .../src/components/InstallControls.tsx               | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/plugins-bundled/internal/plugin-admin-app/src/components/InstallControls.tsx b/plugins-bundled/internal/plugin-admin-app/src/components/InstallControls.tsx
index 7bbf150e41d..c20d4d83839 100644
--- a/plugins-bundled/internal/plugin-admin-app/src/components/InstallControls.tsx
+++ b/plugins-bundled/internal/plugin-admin-app/src/components/InstallControls.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { gt, satisfies } from 'semver';
 
 import { config } from '@grafana/runtime';
@@ -25,6 +25,7 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
   const [shouldUpdate, setShouldUpdate] = useState(
     remotePlugin?.version && localPlugin?.info.version && gt(remotePlugin?.version!, localPlugin?.info.version!)
   );
+  const [hasInstalledPanel, setHasInstalledPanel] = useState(false);
   const isExternallyManaged = config.pluginAdminExternalManageEnabled;
   const externalManageLink = getExternalManageLink(remotePlugin);
 
@@ -37,6 +38,7 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
       appEvents.emit(AppEvents.alertSuccess, [`Installed ${remotePlugin?.name}`]);
       setLoading(false);
       setIsInstalled(true);
+      setHasInstalledPanel(remotePlugin.typeCode === 'panel');
     } catch (error) {
       setLoading(false);
     }
@@ -115,6 +117,11 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
             <Button variant="destructive" disabled={loading || !hasPermission} onClick={onUninstall}>
               {loading && !shouldUpdate ? 'Uninstalling' : 'Uninstall'}
             </Button>
+            {hasInstalledPanel && (
+              <div className={cx(styles.message, styles.messageMargin)}>
+                Please refresh your browser window before using this plugin.
+              </div>
+            )}
             {!hasPermission && <div className={styles.message}>You need admin privileges to manage this plugin.</div>}
           </>
         )}
@@ -158,6 +165,9 @@ export const getStyles = (theme: GrafanaTheme2) => {
     message: css`
       color: ${theme.colors.text.secondary};
     `,
+    messageMargin: css`
+      margin-left: ${theme.spacing()};
+    `,
     readme: css`
       margin: ${theme.spacing(3)} 0;