Plugins: Enable catalog management link to gcom (#34673) (#34811)

* click out to gcom when config enabled

* set to false

* fix styling for uninstall

* remove advertising config + simplify callout URL

* add entry to configuration.md

* update config name

* update lingo

(cherry picked from commit c7b58fe186)

Co-authored-by: Will Browne <wbrowne@users.noreply.github.com>

plugins-bundled/internal/plugin-admin-app/src/components/InstallControls.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import { gt, satisfies } from 'semver';
 
 import { config } from '@grafana/runtime';
-import { Button, HorizontalGroup, Icon, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, LinkButton, useStyles2 } from '@grafana/ui';
 import { AppEvents, GrafanaTheme2, OrgRole } from '@grafana/data';
 
 import { Metadata, Plugin } from '../types';
@@ -25,6 +25,8 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
   const [shouldUpdate, setShouldUpdate] = useState(
     remotePlugin?.version && localPlugin?.info.version && gt(remotePlugin?.version!, localPlugin?.info.version!)
   );
+  const isExternallyManaged = config.pluginAdminExternalManageEnabled;
+  const externalManageLink = getExternalManageLink(remotePlugin);
 
   const styles = useStyles2(getStyles);
 
@@ -93,14 +95,32 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
   if (isInstalled) {
     return (
       <HorizontalGroup height="auto">
-        {shouldUpdate && (
-          <Button disabled={loading || !hasPermission} onClick={onUpdate}>
-            {loading ? 'Updating' : 'Update'}
+        {shouldUpdate &&
+          (isExternallyManaged ? (
+            <LinkButton disabled={!hasPermission} href={externalManageLink} target="_blank" rel="noopener noreferrer">
+              {'Update via grafana.com'}
+            </LinkButton>
+          ) : (
+            <Button disabled={loading || !hasPermission} onClick={onUpdate}>
+              {loading ? 'Updating' : 'Update'}
+            </Button>
+          ))}
+
+        {isExternallyManaged ? (
+          <LinkButton
+            variant="destructive"
+            disabled={!hasPermission}
+            href={externalManageLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {'Uninstall via grafana.com'}
+          </LinkButton>
+        ) : (
+          <Button variant="destructive" disabled={loading || !hasPermission} onClick={onUninstall}>
+            {loading && !shouldUpdate ? 'Uninstalling' : 'Uninstall'}
           </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>
     );
@@ -117,14 +137,24 @@ export const InstallControls = ({ localPlugin, remotePlugin }: Props) => {
 
   return (
     <HorizontalGroup height="auto">
-      <Button disabled={loading || !hasPermission} onClick={onInstall}>
-        {loading ? 'Installing' : 'Install'}
-      </Button>
+      {isExternallyManaged ? (
+        <LinkButton disabled={!hasPermission} href={externalManageLink} target="_blank" rel="noopener noreferrer">
+          {'Install via grafana.com'}
+        </LinkButton>
+      ) : (
+        <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>
   );
 };
 
+function getExternalManageLink(plugin: Plugin): string {
+  return `https://grafana.com/grafana/plugins/${plugin.slug}`;
+}
+
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
     message: css`