grafana-data-exporter-app/src/components/PluginConfigPage/PluginConfigPage.tsx

import React, { FC, useCallback, useEffect, useState } from 'react';

import { Legend, LoadingPlaceholder } from '@grafana/ui';
import { useLocation } from 'react-router-dom';

// import logo from '../../img/logo.svg';
import PluginState from '../../plugin_state';

import ConfigurationForm from './parts/ConfigurationForm';
import RemoveCurrentConfigurationButton from './parts/RemoveCurrentConfigurationButton';
import StatusMessageBlock from './parts/StatusMessageBlock';
import { DataExporterPluginConfigPageProps } from 'types';

const PLUGIN_CONFIGURED_QUERY_PARAM = 'pluginConfigured';
const PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE = 'true';

const DEFAULT_API_URL = 'http://localhost:8080';

/**
 * When everything is successfully configured, reload the page, and pass along a few query parameters
 * so that we avoid an infinite configuration-check/data-sync loop
 *
 * Don't refresh the page if the plugin is already enabled..
 */
export const reloadPageWithPluginConfiguredQueryParams = (pluginEnabled: boolean): void => {
  if (!pluginEnabled) {
    window.location.href = `${window.location.href}?${PLUGIN_CONFIGURED_QUERY_PARAM}=${PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE}`;
  }
};

/**
 * remove the query params used to track state for a page reload after successful configuration, without triggering
 * a page reload
 * https://stackoverflow.com/a/19279428
 */
export const removePluginConfiguredQueryParams = (pluginIsEnabled?: boolean): void => {
  if (window.history.pushState && pluginIsEnabled) {
    const newurl = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
    window.history.pushState({ path: newurl }, '', newurl);
  }
};

export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
  plugin: {
    meta: { jsonData, enabled: pluginIsEnabled },
  },
}) => {
  const { search } = useLocation();
  const queryParams = new URLSearchParams(search);
  const pluginConfiguredQueryParam = queryParams.get(PLUGIN_CONFIGURED_QUERY_PARAM);

  const pluginConfiguredRedirect = pluginConfiguredQueryParam === PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE;
  console.log(pluginConfiguredRedirect);

  const [checkingIfPluginIsConnected, setCheckingIfPluginIsConnected] = useState<boolean>(!pluginConfiguredRedirect);
  const [pluginConnectionCheckError, setPluginConnectionCheckError] = useState<string | null>(null);

  const [pluginIsConnected, setPluginIsConnected] = useState<Boolean | null>(pluginConfiguredRedirect);

  const [resettingPlugin, setResettingPlugin] = useState<boolean>(false);
  const [pluginResetError, setPluginResetError] = useState<string | null>(null);

  const pluginMetaDataExporterApiUrl = jsonData?.dataExporterApiUrl;
  const dataExporterApiUrl = pluginMetaDataExporterApiUrl || DEFAULT_API_URL;

  const resetQueryParams = useCallback(() => removePluginConfiguredQueryParams(pluginIsEnabled), [pluginIsEnabled]);

  useEffect(resetQueryParams, [resetQueryParams]);

  useEffect(() => {
    const configurePluginAndSyncData = async () => {
      /**
       * If the plugin has never been configured, DataExporterApiUrl will be undefined in the plugin's jsonData
       * In that case, check to see if DataExporter_API_URL has been supplied as an env var.
       * Supplying the env var basically allows to skip the configuration form
       * (check webpack.config.js to see how this is set)
       */
      console.log(pluginMetaDataExporterApiUrl);
      if (!pluginMetaDataExporterApiUrl) {
        /**
         * DataExporterApiUrl is not yet saved in the grafana plugin settings, but has been supplied as an env var
         * lets auto-trigger a self-hosted plugin install w/ the DataExporterApiUrl passed in as an env var
         */
        const errorMsg = await PluginState.installPlugin(dataExporterApiUrl);
        if (errorMsg) {
          setPluginConnectionCheckError(errorMsg);
          setCheckingIfPluginIsConnected(false);
          return;
        }
      }

      /**
       * If the DataExporterApiUrl is not set in the plugin settings, and not supplied via an env var
       * there's no reason to check if the plugin is connected, we know it can't be
       */
      if (dataExporterApiUrl) {
        const pluginConnectionResponse = await PluginState.checkIfPluginIsConnected(dataExporterApiUrl);

        console.log(pluginConnectionResponse);

        if (typeof pluginConnectionResponse === 'string') {
          setPluginConnectionCheckError(pluginConnectionResponse);
        }
      }
      setCheckingIfPluginIsConnected(false);
    };

    /**
     * don't check the plugin status if the user was just redirected after a successful
     * plugin setup
     */
    if (!pluginConfiguredRedirect) {
      configurePluginAndSyncData();
    }
  }, [pluginMetaDataExporterApiUrl, dataExporterApiUrl, pluginConfiguredRedirect]);

  const resetState = useCallback(() => {
    setPluginResetError(null);
    setPluginConnectionCheckError(null);
    setPluginIsConnected(null);
    resetQueryParams();
  }, [resetQueryParams]);

  /**
   * NOTE: there is a possible edge case when resetting the plugin, that would lead to an error message being shown
   * (which could be fixed by just reloading the page)
   * This would happen if the user removes the plugin configuration, leaves the page, then comes back to the plugin
   * configuration.
   *
   * This is because the props being passed into this component wouldn't reflect the actual plugin
   * provisioning state. The props would still have DataExporterApiUrl set in the plugin jsonData, so when we make the API
   * call to check the plugin state w/ DataExporter API the plugin-proxy would return a 502 Bad Gateway because the actual
   * provisioned plugin doesn't know about the DataExporterApiUrl.
   *
   * This could be fixed by instead of passing in the plugin provisioning information as props always fetching it
   * when this component renders (via a useEffect). We probably don't need to worry about this because it should happen
   * very rarely, if ever
   */
  const triggerPluginReset = useCallback(async () => {
    setResettingPlugin(true);
    resetState();

    try {
      await PluginState.resetPlugin();
    } catch (e) {
      // this should rarely, if ever happen, but we should handle the case nevertheless
      setPluginResetError('There was an error resetting your plugin, try again.');
    }

    setResettingPlugin(false);
  }, [resetState]);

  const onSuccessfulSetup = useCallback(async () => {
    reloadPageWithPluginConfiguredQueryParams(false);
  }, []);

  const RemoveConfigButton = useCallback(
    () => <RemoveCurrentConfigurationButton disabled={resettingPlugin} onClick={triggerPluginReset} />,
    [resettingPlugin, triggerPluginReset]
  );

  let content: React.ReactNode;

  if (checkingIfPluginIsConnected) {
    content = <LoadingPlaceholder text="Validating your plugin connection..." />;
  } else if (pluginConnectionCheckError || pluginResetError) {
    content = (
      <>
        <StatusMessageBlock text={(pluginConnectionCheckError || pluginResetError) as string} />
        <RemoveConfigButton />
      </>
    );
  } else if (!pluginIsConnected) {
    content = <ConfigurationForm onSuccessfulSetup={onSuccessfulSetup} defaultDataExporterApiUrl={DEFAULT_API_URL} />;
  } else {
    // plugin is fully connected and synced
    content = <RemoveConfigButton />;
  }

  return (
    <>
      <Legend>Configure DataExporter</Legend>
      {pluginIsConnected ? (
        <>
          <p>
            Plugin is connected! Continue to DataExporter by clicking the{' '}
            {/* <img alt="DataExporter Logo" src={logo} width={18} /> icon over there 👈 */}
          </p>
          <StatusMessageBlock text={`Connected to DataExporter`} />
        </>
      ) : (
        <p>This page will help you configure the DataExporter plugin 👋</p>
      )}
      {content}
    </>
  );
};