From 1ceae29f4b3177d6088552327b45f592e64f4d07 Mon Sep 17 00:00:00 2001
From: rozetko <rozetko@corpglory.com>
Date: Wed, 11 Jan 2023 17:49:48 +0300
Subject: [PATCH] improve the plugin connection ux: - disable success alerts
 about plugin configuration update and api token creation - refresh the page
 on successful connection - change the default backend url port from 8080 to
 8000

---
 .../PluginConfigPage/PluginConfigPage.tsx     |  3 ++-
 .../parts/ConfigurationForm/index.tsx         |  6 ++---
 src/plugin_state.ts                           | 24 +++++++++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/PluginConfigPage/PluginConfigPage.tsx b/src/components/PluginConfigPage/PluginConfigPage.tsx
index ea23f21..d352dfa 100644
--- a/src/components/PluginConfigPage/PluginConfigPage.tsx
+++ b/src/components/PluginConfigPage/PluginConfigPage.tsx
@@ -16,7 +16,7 @@ const PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE = 'true';
 
 const PLUGIN_CONFIGURED_VERSION_QUERY_PARAM = 'pluginConfiguredVersion';
 
-const DEFAULT_API_URL = 'http://localhost:8080';
+const DEFAULT_API_URL = 'http://localhost:8000';
 
 /**
  * When everything is successfully configured, reload the page, and pass along a few query parameters
@@ -84,6 +84,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
       setPluginConnectionCheckError(pluginConnectionResponse);
     } else {
       setPluginIsConnected(pluginConnectionResponse);
+      reloadPageWithPluginConfiguredQueryParams(pluginConnectionResponse, true);
     }
 
     setCheckingIfPluginIsConnected(false);
diff --git a/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx b/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx
index 27c19ca..7ed24e4 100644
--- a/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx
+++ b/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx
@@ -84,7 +84,7 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
           <div className={cx('info-block')}>
             <p>1. Launch the DataExporter backend</p>
             <Text type="secondary">
-              Run hobby, dev or production backend. See{' '}
+              Run the backend. See{' '}
               <a href="https://code.corpglory.net/corpglory/grafana-data-exporter" target="_blank" rel="noreferrer">
                 <Text type="link">here</Text>
               </a>{' '}
@@ -97,8 +97,8 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
             <Text type="secondary">
               The DataExporter backend must be reachable from your Grafana installation. Some examples are:
               <br />
-              - http://host.docker.internal:8080
-              <br />- http://localhost:8080
+              - http://host.docker.internal:8000
+              <br />- http://localhost:8000
             </Text>
           </div>
 
diff --git a/src/plugin_state.ts b/src/plugin_state.ts
index 0812be3..39459b6 100644
--- a/src/plugin_state.ts
+++ b/src/plugin_state.ts
@@ -90,7 +90,9 @@ class PluginState {
     this.grafanaBackend.get<DataExporterAppPluginMeta>(this.GRAFANA_PLUGIN_SETTINGS_URL);
 
   static updateGrafanaPluginSettings = async (data: UpdateGrafanaPluginSettingsProps, enabled = true) =>
-    this.grafanaBackend.post(this.GRAFANA_PLUGIN_SETTINGS_URL, { ...data, enabled, pinned: true });
+    // @ts-ignore
+    // for some reason, there is no `options` argument in Grafana's public types for BackendSrv but it exists
+    this.grafanaBackend.post(this.GRAFANA_PLUGIN_SETTINGS_URL, { ...data, enabled, pinned: true }, { showSuccessAlert: false });
 
   static createGrafanaToken = async () => {
     const baseUrl = '/api/auth/keys';
@@ -98,14 +100,22 @@ class PluginState {
     const existingKey = keys.find((key: { id: number; name: string; role: string }) => key.name === 'DataExporter');
 
     if (existingKey) {
-      await this.grafanaBackend.delete(`${baseUrl}/${existingKey.id}`);
+      // @ts-ignore
+      // for some reason, there is no `options` argument in Grafana's public types for BackendSrv but it exists
+      await this.grafanaBackend.delete(`${baseUrl}/${existingKey.id}`, undefined, { showSuccessAlert: false });
     }
 
-    return await this.grafanaBackend.post(baseUrl, {
-      name: 'DataExporter',
-      role: 'Admin',
-      secondsToLive: null,
-    });
+    return await this.grafanaBackend.post(
+      baseUrl,
+      {
+        name: 'DataExporter',
+        role: 'Admin',
+        secondsToLive: null,
+      },
+      // @ts-ignore
+      // for some reason, there is no `options` argument in Grafana's public types for BackendSrv but it exists
+      { showSuccessAlert: false }
+    );
   };
 
   static timeout = (pollCount: number) => new Promise((resolve) => setTimeout(resolve, 10 * 2 ** pollCount));