Migrate to plugin-ui from grafana/experimental (#384)

grafana · Feb 12, 2025 · a881205 · a881205
1 parent 52960d9
commit a881205
Show file tree

Hide file tree

Showing 12 changed files with 317 additions and 679 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,8 @@
-# AWS IoT Sitewise Datasource Development Guide
+# Compatibility
+
+AWS IoT Sitewise data source plugin >=2.0.0 is not compatible with Grafana versions <=10.4.x due to a breaking change in UI components.
+
+# AWS IoT Sitewise Data Source Development Guide
 
 Please add feedback to the [issues](https://github.com/grafana/iot-sitewise-datasource/issues) folder, and we will follow up shortly. Be sure to include version information for both grafana and the installed plugin.
 

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@grafana/data": "^11.5.0",
-    "@grafana/experimental": "2.1.6",
+    "@grafana/plugin-ui": "^0.9.4",
     "@grafana/runtime": "^11.5.0",
     "@grafana/schema": "^11.4.0",
     "@grafana/ui": "^11.4.0",

diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx
@@ -11,7 +11,7 @@ import { SitewiseOptions, SitewiseSecureJsonData } from '../types';
 import { ConnectionConfig, ConnectionConfigProps, Divider } from '@grafana/aws-sdk';
 import { Alert, Button, Field, Input, Select } from '@grafana/ui';
 import { standardRegions } from '../regions';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigSection } from '@grafana/plugin-ui';
 
 export type Props = ConnectionConfigProps<SitewiseOptions, SitewiseSecureJsonData>;
 
@@ -23,15 +23,15 @@ const edgeAuthMethods: Array<SelectableValue<string>> = [
 
 export function ConfigEditor(props: Props) {
   if (props.options.jsonData.defaultRegion === 'Edge') {
-    return <EdgeConfig {...props}/>
+    return <EdgeConfig {...props} />;
   }
-  return <div className="width-30">
+  return (
+    <div className="width-30">
       <ConnectionConfig {...props} standardRegions={standardRegions} />{' '}
     </div>
-
+  );
 }
 
-
 function EdgeConfig(props: Props) {
   const { options } = props;
   const { jsonData } = options;
@@ -70,119 +70,110 @@ function EdgeConfig(props: Props) {
     });
   }
 
-   return <div className="width-30">
-          {hasEdgeAuth && (
-            <ConfigSection title="Connection Details" data-testid="connection-config">
-              <Field
-                label="Endpoint"
-                description="Optionally, specify a custom endpoint for the service"
-                htmlFor="endpoint"
-              >
-                <Input
-                  id="endpoint"
-                  placeholder={endpoint ?? 'https://{service}.{region}.amazonaws.com'}
-                  value={endpoint || ''}
-                  onChange={onUpdateDatasourceJsonDataOption(props, 'endpoint')}
-                />
-              </Field>
-              <Field label="Default Region">
-                <Select
-                  value={regions.find((region) => region.value === options.jsonData.defaultRegion)}
-                  options={regions}
-                  defaultValue={options.jsonData.defaultRegion}
-                  allowCustomValue={true}
-                  onChange={onUpdateDatasourceJsonDataOptionSelect(props, 'defaultRegion')}
-                  formatCreateLabel={(r) => `Use region: ${r}`}
-                />
-              </Field>
-            </ConfigSection>
-          )}
-          {!hasEdgeAuth && (
-            <ConnectionConfig {...props} standardRegions={standardRegions} />
-          )}
+  return (
+    <div className="width-30">
+      {hasEdgeAuth && (
+        <ConfigSection title="Connection Details" data-testid="connection-config">
+          <Field
+            label="Endpoint"
+            description="Optionally, specify a custom endpoint for the service"
+            htmlFor="endpoint"
+          >
+            <Input
+              id="endpoint"
+              placeholder={endpoint ?? 'https://{service}.{region}.amazonaws.com'}
+              value={endpoint || ''}
+              onChange={onUpdateDatasourceJsonDataOption(props, 'endpoint')}
+            />
+          </Field>
+          <Field label="Default Region">
+            <Select
+              value={regions.find((region) => region.value === options.jsonData.defaultRegion)}
+              options={regions}
+              defaultValue={options.jsonData.defaultRegion}
+              allowCustomValue={true}
+              onChange={onUpdateDatasourceJsonDataOptionSelect(props, 'defaultRegion')}
+              formatCreateLabel={(r) => `Use region: ${r}`}
+            />
+          </Field>
+        </ConfigSection>
+      )}
+      {!hasEdgeAuth && <ConnectionConfig {...props} standardRegions={standardRegions} />}
 
-          <Divider />
-          <ConfigSection title="Edge settings" data-testid="edge-settings">
-            {!endpoint && (
-              <Alert
-                title="Edge region requires an explicit endpoint configured above"
-                severity="warning"
-                data-testid="endpoint-warning"
-              />
-            )}
+      <Divider />
+      <ConfigSection title="Edge settings" data-testid="edge-settings">
+        {!endpoint && (
+          <Alert
+            title="Edge region requires an explicit endpoint configured above"
+            severity="warning"
+            data-testid="endpoint-warning"
+          />
+        )}
 
-            <Field label="Authentication Mode" htmlFor="edgeAuthMethods">
-              <Select
-                id="edgeAuthMethods"
-                aria-label="Authentication Mode"
-                options={edgeAuthMethods}
-                value={edgeAuthMode}
-                onChange={(v) => {
-                  updateDatasourcePluginJsonDataOption(props, 'edgeAuthMode', v.value);
-                }}
+        <Field label="Authentication Mode" htmlFor="edgeAuthMethods">
+          <Select
+            id="edgeAuthMethods"
+            aria-label="Authentication Mode"
+            options={edgeAuthMethods}
+            value={edgeAuthMode}
+            onChange={(v) => {
+              updateDatasourcePluginJsonDataOption(props, 'edgeAuthMode', v.value);
+            }}
+          />
+        </Field>
+        {hasEdgeAuth && (
+          <>
+            <Field label="Username" description="The username set to local authentication proxy" htmlFor="username">
+              <Input
+                id="username"
+                name="username"
+                value={jsonData.edgeAuthUser}
+                autoComplete="off"
+                className="width-30"
+                onChange={onUserChange}
+                required
               />
             </Field>
-            {hasEdgeAuth && (
-              <>
-                <Field label="Username" description="The username set to local authentication proxy" htmlFor="username">
-                  <Input
-                    id="username"
-                    name="username"
-                    value={jsonData.edgeAuthUser}
-                    autoComplete="off"
-                    className="width-30"
-                    onChange={onUserChange}
-                    required
-                  />
-                </Field>
-                <Field
-                  label="Password"
-                  description="The password sent to local authentication proxy"
-                  htmlFor="password"
-                >
-                  <Input
-                    id="password"
-                    type="password"
-                    name="password"
-                    autoComplete="off"
-                    placeholder={options.secureJsonFields?.edgeAuthPass ? 'configured' : ''}
-                    value={options.secureJsonData?.edgeAuthPass ?? ''}
-                    onChange={onPasswordChange}
-                    onReset={onResetPassword}
-                    className="width-30"
-                    required
-                  />
-                </Field>
-              </>
-            )}
-            <Field
-              label="SSL Certificate"
-              description="Certificate for SSL enabled authentication."
-              htmlFor="certificate"
-            >
-              {options.secureJsonFields?.cert ? (
-                <Button
-                  variant="secondary"
-                  type="reset"
-                  onClick={onUpdateDatasourceResetOption(props as any, 'cert')}
-                  aria-label="Reset certificate input"
-                >
-                  Reset
-                </Button>
-              ) : (
-                <textarea
-                  id="certificate"
-                  rows={7}
-                  className="gf-form-input gf-form-textarea width-30"
-                  onChange={(event) => {
-                    updateDatasourcePluginSecureJsonDataOption(props as any, 'cert', event.target.value);
-                  }}
-                  placeholder="Begins with -----BEGIN CERTIFICATE------"
-                  required
-                />
-              )}
+            <Field label="Password" description="The password sent to local authentication proxy" htmlFor="password">
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                autoComplete="off"
+                placeholder={options.secureJsonFields?.edgeAuthPass ? 'configured' : ''}
+                value={options.secureJsonData?.edgeAuthPass ?? ''}
+                onChange={onPasswordChange}
+                onReset={onResetPassword}
+                className="width-30"
+                required
+              />
             </Field>
-          </ConfigSection>
-        </div>
-
+          </>
+        )}
+        <Field label="SSL Certificate" description="Certificate for SSL enabled authentication." htmlFor="certificate">
+          {options.secureJsonFields?.cert ? (
+            <Button
+              variant="secondary"
+              type="reset"
+              onClick={onUpdateDatasourceResetOption(props as any, 'cert')}
+              aria-label="Reset certificate input"
+            >
+              Reset
+            </Button>
+          ) : (
+            <textarea
+              id="certificate"
+              rows={7}
+              className="gf-form-input gf-form-textarea width-30"
+              onChange={(event) => {
+                updateDatasourcePluginSecureJsonDataOption(props as any, 'cert', event.target.value);
+              }}
+              placeholder="Begins with -----BEGIN CERTIFICATE------"
+              required
+            />
+          )}
+        </Field>
+      </ConfigSection>
+    </div>
+  );
 }
diff --git a/src/components/query/ClientCacheRow.tsx b/src/components/query/ClientCacheRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Switch } from '@grafana/ui';
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/plugin-ui';
 
 interface Props {
   clientCache?: boolean;

diff --git a/src/components/query/ListAssetsQueryEditor.tsx b/src/components/query/ListAssetsQueryEditor.tsx
@@ -4,7 +4,7 @@ import { ListAssetsQuery } from 'types';
 import { Select } from '@grafana/ui';
 import { SitewiseQueryEditorProps } from './types';
 import { AssetModelSummary } from 'queryResponseTypes';
-import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/plugin-ui';
 
 interface State {
   models?: DataFrameView<AssetModelSummary>;