PluginExtensions: Making it possible to set secureJsonData on datasource config page. (#100726)

* Added setSecureJsonData to the configure context.

* Exposing which fields are set in secureJsonData.

* removed omit.

packages/grafana-data/src/types/pluginExtensions.ts

@@ -195,7 +195,10 @@ export type PluginExtensionPanelContext = {
   data?: PanelData;
 };
 
-export type PluginExtensionDataSourceConfigContext<JsonData extends DataSourceJsonData = DataSourceJsonData> = {
+export type PluginExtensionDataSourceConfigContext<
+  JsonData extends DataSourceJsonData = DataSourceJsonData,
+  SecureJsonData = {},
+> = {
   // The current datasource settings
   dataSource: DataSourceSettings<JsonData>;
 
@@ -211,6 +214,7 @@ export type PluginExtensionDataSourceConfigContext<JsonData extends DataSourceJs
   // Can be used to update the `jsonData` field on the datasource
   // (Only updates the form, it still needs to be saved by the user)
   setJsonData: (jsonData: JsonData) => void;
+  setSecureJsonData: (secureJsonData: SecureJsonData) => void;
 };
 
 export type PluginExtensionCommandPaletteContext = {};

public/app/features/datasources/components/EditDataSource.test.tsx

@@ -358,6 +358,7 @@ describe('<EditDataSource>', () => {
       expect(props.context.dataSource).toBeDefined();
       expect(props.context.dataSourceMeta).toBeDefined();
       expect(props.context.setJsonData).toBeDefined();
+      expect(props.context.setSecureJsonData).toBeDefined();
       expect(props.context.testingStatus).toBeDefined();
     });
   });

public/app/features/datasources/components/EditDataSource.tsx

@@ -1,5 +1,4 @@
 import { AnyAction } from '@reduxjs/toolkit';
-import { omit } from 'lodash';
 import { useMemo } from 'react';
 import * as React from 'react';
 
@@ -211,7 +210,7 @@ export function EditDataSourceView({
           <div key={extension.id}>
             <Component
               context={{
-                dataSource: omit(dataSource, ['secureJsonData']),
+                dataSource: dataSource,
                 dataSourceMeta: dataSourceMeta,
                 testingStatus,
                 setJsonData: (jsonData) =>
@@ -219,6 +218,11 @@ export function EditDataSourceView({
                     ...dataSource,
                     jsonData: { ...dataSource.jsonData, ...jsonData },
                   }),
+                setSecureJsonData: (secureJsonData) =>
+                  onOptionsChange({
+                    ...dataSource,
+                    secureJsonData: { ...dataSource.secureJsonData, ...secureJsonData },
+                  }),
               }}
             />
           </div>