grafana/public/app/features/plugins/admin/components/VersionInstallButton.tsx

import { css } from '@emotion/css';
import { useEffect, useState } from 'react';
import { gt, valid } from 'semver';

import { GrafanaTheme2 } from '@grafana/data';
import { t } from '@grafana/i18n';
import { config, reportInteraction } from '@grafana/runtime';
import { Badge, Button, ConfirmModal, Icon, Spinner, useStyles2 } from '@grafana/ui';

import { isPreinstalledPlugin } from '../helpers';
import { useInstall } from '../state/hooks';
import { PluginStatus, Version } from '../types';

const PLUGINS_VERSION_PAGE_UPGRADE_INTERACTION_EVENT_NAME = 'plugins_upgrade_clicked';
const PLUGINS_VERSION_PAGE_CHANGE_INTERACTION_EVENT_NAME = 'plugins_downgrade_clicked';
interface Props {
  pluginId: string;
  version: Version;
  latestCompatibleVersion?: string;
  installedVersion?: string;
  disabled: boolean;
  tooltip?: string;
  onConfirmInstallation: () => void;
}

export const VersionInstallButton = ({
  pluginId,
  version,
  latestCompatibleVersion,
  installedVersion,
  disabled,
  tooltip,
  onConfirmInstallation,
}: Props) => {
  const install = useInstall();
  const [isInstalling, setIsInstalling] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const styles = useStyles2(getStyles);

  const installState = getInstallState(installedVersion, version.version);

  useEffect(() => {
    if (installedVersion === version.version) {
      setIsInstalling(false);
      setIsModalOpen(false);
    }
  }, [installedVersion, version.version]);

  if (version.version === installedVersion) {
    return (
      <Badge
        className={styles.badge}
        text={t('plugins.version-install-button.text-installed', 'Installed')}
        icon="check"
        color="green"
      />
    );
  }

  const performInstallation = () => {
    const trackProps = {
      path: window.location.pathname,
      plugin_id: pluginId,
      version: version.version,
      is_latest: latestCompatibleVersion === version.version,
      creator_team: 'grafana_plugins_catalog',
      schema_version: '1.0.0',
    };

    if (installState === PluginStatus.UPDATE) {
      reportInteraction(PLUGINS_VERSION_PAGE_UPGRADE_INTERACTION_EVENT_NAME, trackProps);
    } else {
      reportInteraction(PLUGINS_VERSION_PAGE_CHANGE_INTERACTION_EVENT_NAME, {
        ...trackProps,
        previous_version: installedVersion,
      });
    }

    install(pluginId, version.version, installState);
    setIsInstalling(true);
    onConfirmInstallation();
  };

  const onInstallClick = () => {
    if (installState === PluginStatus.DOWNGRADE) {
      setIsModalOpen(true);
    } else {
      performInstallation();
    }
  };

  const onConfirm = () => {
    performInstallation();
  };

  const onDismiss = () => {
    setIsModalOpen(false);
  };

  const isPreinstalled = isPreinstalledPlugin(pluginId);

  const hidden = getButtonHiddenState(installState, isPreinstalled);

  return (
    <>
      <Button
        fill="solid"
        disabled={disabled || isInstalling}
        fullWidth
        size="sm"
        variant={latestCompatibleVersion === version.version ? 'primary' : 'secondary'}
        onClick={onInstallClick}
        className={styles.button}
        hidden={hidden}
        tooltip={tooltip}
        tooltipPlacement="bottom-start"
      >
        {getLabel(installState)}{' '}
        {isInstalling ? <Spinner className={styles.spinner} inline size="sm" /> : getIcon(installState)}
      </Button>
      <ConfirmModal
        isOpen={isModalOpen}
        title={t('plugins.catalog.versions.downgrade-title', 'Downgrade plugin version')}
        body={t(
          'plugins.catalog.versions.confirmation-text',
          'Are you really sure you want to downgrade to version {{version}}? You should normally not be doing this',
          { version: version.version }
        )}
        confirmText={t('plugins.catalog.versions.downgrade-confirm', 'Downgrade')}
        onConfirm={onConfirm}
        onDismiss={onDismiss}
        disabled={isInstalling}
        confirmButtonVariant="primary"
      />
    </>
  );
};

function getLabel(installState: PluginStatus) {
  switch (installState) {
    case PluginStatus.INSTALL:
      return 'Install';
    case PluginStatus.UPDATE:
      return 'Upgrade';
    case PluginStatus.DOWNGRADE:
      return 'Downgrade';
    default:
      return '';
  }
}

function getIcon(installState: PluginStatus) {
  if (installState === PluginStatus.DOWNGRADE) {
    return <Icon name="arrow-down" />;
  }
  if (installState === PluginStatus.UPDATE) {
    return <Icon name="arrow-up" />;
  }
  return '';
}

function getInstallState(installedVersion?: string, version?: string): PluginStatus {
  if (!installedVersion || !version || !valid(installedVersion) || !valid(version)) {
    return PluginStatus.INSTALL;
  }
  return gt(installedVersion, version) ? PluginStatus.DOWNGRADE : PluginStatus.UPDATE;
}

function getButtonHiddenState(installState: PluginStatus, isPreinstalled: { found: boolean; withVersion: boolean }) {
  // Default state for initial install
  if (installState === PluginStatus.INSTALL) {
    return false;
  }

  // Handle downgrade case
  if (installState === PluginStatus.DOWNGRADE) {
    return isPreinstalled.found && Boolean(config.featureToggles.preinstallAutoUpdate);
  }

  // Handle upgrade case
  return isPreinstalled.withVersion;
}

const getStyles = (theme: GrafanaTheme2) => ({
  spinner: css({
    marginLeft: theme.spacing(1),
  }),
  successIcon: css({
    color: theme.colors.success.main,
  }),
  button: css({
    width: theme.spacing(13),
  }),
  badge: css({
    width: theme.spacing(13),
    justifyContent: 'center',
  }),
});