feat(plugin-admin-app): show message prompting user to refresh browser when installing panel plugin (#35271)

This commit is contained in:
Jack Westbrook
2021-06-04 19:20:06 +02:00
committed by GitHub
parent 2bbf4fa405
commit 3bbe6473b6

View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { gt, satisfies } from 'semver'; import { gt, satisfies } from 'semver';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
@ -25,6 +25,7 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
const [shouldUpdate, setShouldUpdate] = useState( const [shouldUpdate, setShouldUpdate] = useState(
remotePlugin?.version && localPlugin?.info.version && gt(remotePlugin?.version!, localPlugin?.info.version!) remotePlugin?.version && localPlugin?.info.version && gt(remotePlugin?.version!, localPlugin?.info.version!)
); );
const [hasInstalledPanel, setHasInstalledPanel] = useState(false);
const isExternallyManaged = config.pluginAdminExternalManageEnabled; const isExternallyManaged = config.pluginAdminExternalManageEnabled;
const externalManageLink = getExternalManageLink(remotePlugin); const externalManageLink = getExternalManageLink(remotePlugin);
@ -37,6 +38,7 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
appEvents.emit(AppEvents.alertSuccess, [`Installed ${remotePlugin?.name}`]); appEvents.emit(AppEvents.alertSuccess, [`Installed ${remotePlugin?.name}`]);
setLoading(false); setLoading(false);
setIsInstalled(true); setIsInstalled(true);
setHasInstalledPanel(remotePlugin.typeCode === 'panel');
} catch (error) { } catch (error) {
setLoading(false); setLoading(false);
} }
@ -115,6 +117,11 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
<Button variant="destructive" disabled={loading || !hasPermission} onClick={onUninstall}> <Button variant="destructive" disabled={loading || !hasPermission} onClick={onUninstall}>
{loading && !shouldUpdate ? 'Uninstalling' : 'Uninstall'} {loading && !shouldUpdate ? 'Uninstalling' : 'Uninstall'}
</Button> </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>} {!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` message: css`
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
`, `,
messageMargin: css`
margin-left: ${theme.spacing()};
`,
readme: css` readme: css`
margin: ${theme.spacing(3)} 0; margin: ${theme.spacing(3)} 0;