fix: make password available via securejsondata

Author: Nicolai Buchwitz

pkg/mqtt/client.go

@@ -13,7 +13,7 @@ type Options struct {
 	Host     string `json:"host"`
 	Port     uint16 `json:"port"`
 	Username string `json:"username"`
-	Password string `json:"-"`
+	Password string `json:"password"`
 }
 
 type StreamMessage struct {

pkg/plugin/datasource.go

@@ -30,9 +30,15 @@ func NewMQTTInstance(s backend.DataSourceInstanceSettings) (instancemgmt.Instanc
 
 func getDatasourceSettings(s backend.DataSourceInstanceSettings) (*mqtt.Options, error) {
 	settings := &mqtt.Options{}
+
 	if err := json.Unmarshal(s.JSONData, settings); err != nil {
 		return nil, err
 	}
+
+	if password, exists := s.DecryptedSecureJSONData["password"]; exists {
+		settings.Password = password
+	}
+
 	return settings, nil
 }
 

src/ConfigEditor.tsx

@@ -4,18 +4,42 @@ import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { MqttDataSourceOptions, MqttSecureJsonData } from './types';
 import { handlerFactory } from './handleEvent';
 
-interface Props extends DataSourcePluginOptionsEditorProps<MqttDataSourceOptions> {}
+interface Props extends DataSourcePluginOptionsEditorProps<MqttDataSourceOptions, MqttSecureJsonData> {}
 
 export const ConfigEditor = (props: Props) => {
   const {
     onOptionsChange,
     options,
-    options: { jsonData, secureJsonData },
+    options: { jsonData, secureJsonData, secureJsonFields },
   } = props;
   const { host, port, username } = jsonData;
-  const { password } = (secureJsonData ?? {}) as MqttSecureJsonData;
+
+  // const { password } = (secureJsonData ?? {}) as MqttSecureJsonData;
   const handleChange = handlerFactory(options, onOptionsChange);
 
+  const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onOptionsChange({
+      ...options,
+      secureJsonData: {
+        password: event.target.value,
+      },
+    });
+  };
+
+  const onResetPassword = () => {
+    onOptionsChange({
+      ...options,
+      secureJsonFields: {
+        ...options.secureJsonFields,
+        password: false,
+      },
+      secureJsonData: {
+        ...options.secureJsonData,
+        password: '',
+      },
+    });
+  };
+
   return (
     <Form onSubmit={() => {}}>
       {() => (
@@ -60,12 +84,15 @@ export const ConfigEditor = (props: Props) => {
                 name="password"
                 css=""
                 autoComplete="off"
-                placeholder="************************"
-                value={password}
-                onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                  handleChange('secureJsonData.password')(event);
-                  handleChange('secureJsonFields.password', Boolean)(event);
-                }}
+                // placeholder="************************"
+                placeholder={secureJsonFields?.password ? 'configured' : ''}
+                value={secureJsonData?.password ?? ''}
+                onChange={onPasswordChange}
+                onReset={onResetPassword}
+                // onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                //   handleChange('secureJsonData.password')(event);
+                //   handleChange('secureJsonFields.password', Boolean)(event);
+                // }}
               />
             </Field>
           </FieldSet>