still wip

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.eslintcache

src/components/PluginConfigPage/PluginConfigPage.tsx

@@ -50,6 +50,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
   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);
@@ -74,6 +75,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
        * 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
@@ -94,6 +96,8 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
       if (dataExporterApiUrl) {
         const pluginConnectionResponse = await PluginState.checkIfPluginIsConnected(dataExporterApiUrl);
 
+        console.log(pluginConnectionResponse);
+
         if (typeof pluginConnectionResponse === 'string') {
           setPluginConnectionCheckError(pluginConnectionResponse);
         }
@@ -102,7 +106,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
     };
 
     /**
-     * don't check the plugin status (or trigger a data sync) if the user was just redirected after a successful
+     * don't check the plugin status if the user was just redirected after a successful
      * plugin setup
      */
     if (!pluginConfiguredRedirect) {
@@ -167,12 +171,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
       </>
     );
   } else if (!pluginIsConnected) {
-    content = (
+    content = <ConfigurationForm onSuccessfulSetup={onSuccessfulSetup} defaultDataExporterApiUrl={DEFAULT_API_URL} />;
-      <ConfigurationForm
-        onSuccessfulSetup={onSuccessfulSetup}
-        defaultDataExporterApiUrl={DEFAULT_API_URL}
-      />
-    );
   } else {
     // plugin is fully connected and synced
     content = <RemoveConfigButton />;

src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx

@@ -49,17 +49,12 @@ const FormErrorMessage: FC<{ errorMsg: string }> = ({ errorMsg }) => (
     >
       <Text type="secondary">
         Need help?
-        <br />- Reach out to the OnCall team in the{' '}
+        <br />- file bugs on our GitHub Issues page{' '}
-        <a href="https://grafana.slack.com/archives/C02LSUUSE2G" target="_blank" rel="noreferrer">
+        <a
-          <Text type="link">#grafana-oncall</Text>
+          href="https://code.corpglory.net/corpglory/grafana-data-exporter-app/issues"
-        </a>{' '}
+          target="_blank"
-        community Slack channel
+          rel="noreferrer"
-        <br />- Ask questions on our GitHub Discussions page{' '}
+        >
-        <a href="https://github.com/grafana/oncall/discussions/categories/q-a" target="_blank" rel="noreferrer">
-          <Text type="link">here</Text>
-        </a>{' '}
-        <br />- Or file bugs on our GitHub Issues page{' '}
-        <a href="https://github.com/grafana/oncall/issues" target="_blank" rel="noreferrer">
           <Text type="link">here</Text>
         </a>
       </Text>
@@ -71,25 +66,24 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
   const [setupErrorMsg, setSetupErrorMsg] = useState<string | null>(null);
   const [formLoading, setFormLoading] = useState<boolean>(false);
 
-  const setupPlugin: SubmitHandler<FormProps> = useCallback(async ({ dataExporterApiUrl }) => {
+  const setupPlugin: SubmitHandler<FormProps> = useCallback(
-    setFormLoading(true);
+    async ({ dataExporterApiUrl }) => {
+      setFormLoading(true);
 
-    const errorMsg = await PluginState.installPlugin(dataExporterApiUrl);
+      const errorMsg = await PluginState.installPlugin(dataExporterApiUrl);
 
-    if (!errorMsg) {
+      if (!errorMsg) {
-      onSuccessfulSetup();
+        onSuccessfulSetup();
-    } else {
+      } else {
-      setSetupErrorMsg(errorMsg);
+        setSetupErrorMsg(errorMsg);
-      setFormLoading(false);
+        setFormLoading(false);
-    }
+      }
-  }, []);
+    },
+    [onSuccessfulSetup]
+  );
 
   return (
-    <Form<FormProps>
+    <Form<FormProps> defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }} onSubmit={setupPlugin}>
-      defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }}
-      onSubmit={setupPlugin}
-      data-testid="plugin-configuration-form"
-    >
       {({ register, errors }) => (
         <>
           <div
@@ -98,10 +92,10 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
               'margin-top': '24px',
             })}
           >
-            <p>1. Launch the OnCall backend</p>
+            <p>1. Launch the DataExporter backend</p>
             <Text type="secondary">
               Run hobby, dev or production backend. See{' '}
-              <a href="https://github.com/grafana/oncall#getting-started" target="_blank" rel="noreferrer">
+              <a href="https://code.corpglory.net/corpglory/grafana-data-exporter" target="_blank" rel="noreferrer">
                 <Text type="link">here</Text>
               </a>{' '}
               on how to get started.
@@ -114,18 +108,17 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
               'margin-top': '24px',
             })}
           >
-            <p>2. Let us know the base URL of your OnCall API</p>
+            <p>2. Let us know the base URL of your DataExporter API</p>
             <Text type="secondary">
-              The OnCall backend must be reachable from your Grafana installation. Some examples are:
+              The DataExporter backend must be reachable from your Grafana installation. Some examples are:
               <br />
               - http://host.docker.internal:8080
               <br />- http://localhost:8080
             </Text>
           </div>
 
-          <Field label="OnCall backend URL" invalid={!!errors.dataExporterApiUrl} error="Must be a valid URL">
+          <Field label="DataExporter backend URL" invalid={!!errors.dataExporterApiUrl} error="Must be a valid URL">
             <Input
-              data-testid="dataExporterApiUrl"
               {...register('dataExporterApiUrl', {
                 required: true,
                 validate: isValidUrl,

src/plugin_state.ts

@@ -21,7 +21,9 @@ type InstallPluginResponse<DataExporterAPIResponse = any> = Pick<
   dataExporterAPIResponse: DataExporterAPIResponse;
 };
 
-type PluginConnectedStatusResponse = string;
+type PluginConnectedStatusResponse = {
+  version: string;
+};
 
 class PluginState {
   static DATA_EXPORTER_BASE_URL = '/plugin';
@@ -159,13 +161,22 @@ class PluginState {
     return null;
   };
 
-  static checkIfPluginIsConnected = async (DataExporterApiUrl: string): Promise<string> => {
+  static checkIfPluginIsConnected = async (
+    dataExporterApiUrl: string
+  ): Promise<PluginConnectedStatusResponse | string> => {
     try {
-      return await makeRequest<PluginConnectedStatusResponse>(`${this.DATA_EXPORTER_BASE_URL}/status`, {
+      const resp = await makeRequest<PluginConnectedStatusResponse>(`${this.DATA_EXPORTER_BASE_URL}/status`, {
         method: 'GET',
       });
+
+      // TODO: check if the server version is compatible with the plugin
+      if (resp.version) {
+        return resp;
+      } else {
+        throw new Error(`Something is working at ${dataExporterApiUrl} but it's not DataExporter backend`);
+      }
     } catch (e) {
-      return this.getHumanReadableErrorFromDataExporterError(e, DataExporterApiUrl);
+      return this.getHumanReadableErrorFromDataExporterError(e, dataExporterApiUrl);
     }
   };