...

import * as React from 'react';

import { PluginMeta } from '@grafana/data';
import { Trans } from '@grafana/i18n';
import { reportInteraction } from '@grafana/runtime';
import { Button } from '@grafana/ui';
import { contextSrv } from 'app/core/core';
import { AccessControlAction } from 'app/types/accessControl';

import { updatePluginSettings } from '../../api';
import { usePluginConfig } from '../../hooks/usePluginConfig';
import { CatalogPlugin } from '../../types';

type Props = {
  plugin: CatalogPlugin;
};

export function GetStartedWithApp({ plugin }: Props): React.ReactElement | null {
  const { value: pluginConfig } = usePluginConfig(plugin);

if (!pluginConfig) {
    return null;
  }
  // Enforce RBAC
  if (!contextSrv.hasPermission(AccessControlAction.PluginsWrite)) {
    return null;
  }

const { enabled, autoEnabled, jsonData } = pluginConfig?.meta;

return (
    <>
      {!enabled && (
        <Button variant="primary" onClick={enable}>
          <Trans i18nKey="plugins.get-started-with-app.enable">Enable</Trans>
        </Button>
      )}

{enabled && !autoEnabled && (
        <Button variant="destructive" onClick={disable}>
          <Trans i18nKey="plugins.get-started-with-app.disable">Disable</Trans>
        </Button>
      )}
    </>
  );
}

const updatePluginSettingsAndReload = async (id: string, data: Partial<PluginMeta>) => {
  try {
    await updatePluginSettings(id, data);

// Reloading the page as the plugin meta changes made here wouldn't be propagated throughout the app.
    window.location.reload();
  } catch (e) {
    console.error('Error while updating the plugin', e);
  }
};

.	Edit
..	Edit
GetStartedWithApp.test.tsx	Edit
GetStartedWithApp.tsx	Edit
GetStartedWithDataSource.test.tsx	Edit
GetStartedWithDataSource.tsx	Edit
GetStartedWithPlugin.tsx	Edit