Add DatasourceEditor and DatasourcePayloadEditor (#73)

* editors with hooks move to packages

* lint issues fix

* Update CHANGELOG.md

* update version

---------

Co-authored-by: Mikhail Volkov <[email protected]>

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.7.0 (2024-12-02)
+
+### Features / Enhancements
+
+- Add DatasourceEditor and DatasourcePayloadEditor (#73)
+
 ## 3.6.0 (2024-11-29)
 
 ### Features / Enhancements

packages/components/package.json

@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.6.0"
+  "version": "3.7.0"
 }

packages/components/src/components/DatasourceEditor/DatasourceEditor.test.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { getJestSelectors } from '@volkovlabs/jest-selectors';
+import React from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { useDatasources } from '../../hooks';
+
+import { DatasourceEditor } from './DatasourceEditor';
+
+/**
+ * Mock hooks
+ */
+jest.mock('../../hooks', () => ({
+  useDatasources: jest.fn(() => []),
+}));
+
+describe('Select Datasource Editor', () => {
+  const onChange = jest.fn();
+
+  /**
+   * Selectors
+   */
+  const getSelectors = getJestSelectors(TEST_IDS.datasourceEditor);
+  const selectors = getSelectors(screen);
+
+  /**
+   * Get Tested Component
+   * @param value
+   * @param context
+   * @param restProps
+   */
+  const getComponent = ({ value = null, context = {}, ...restProps }: any) => {
+    return <DatasourceEditor onChange={onChange} {...restProps} value={value} context={context} />;
+  };
+
+  it('Should update value', () => {
+    jest.mocked(useDatasources).mockImplementationOnce(
+      () =>
+        [
+          {
+            name: '123',
+            uid: 'ds1',
+          },
+          {
+            name: 'abc',
+            uid: 'ds2',
+          },
+        ] as any
+    );
+    render(getComponent({}));
+
+    fireEvent.change(selectors.fieldSelect(), { target: { value: 'ds1' } });
+
+    expect(onChange).toHaveBeenCalledWith('ds1');
+  });
+});

packages/components/src/components/DatasourceEditor/DatasourceEditor.tsx

@@ -0,0 +1,45 @@
+import { Select } from '@grafana/ui';
+import React, { useMemo } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { useDatasources } from '../../hooks';
+import { EditorProps } from '../../types';
+
+/**
+ * Properties
+ */
+interface Props extends EditorProps<string> {}
+
+/**
+ * Data Source Editor
+ */
+export const DatasourceEditor: React.FC<Props> = ({ value, onChange }) => {
+  /**
+   * Data Sources
+   */
+  const datasources = useDatasources();
+
+  /**
+   * Options
+   */
+  const datasourceOptions = useMemo(() => {
+    return datasources.map((datasource) => ({
+      label: datasource.name,
+      value: datasource.uid,
+    }));
+  }, [datasources]);
+
+  /**
+   * Return
+   */
+  return (
+    <Select
+      onChange={(item) => {
+        onChange(item.value!);
+      }}
+      options={datasourceOptions}
+      value={value}
+      {...TEST_IDS.datasourceEditor.fieldSelect.apply()}
+    />
+  );
+};

packages/components/src/components/DatasourceEditor/index.ts

@@ -0,0 +1 @@
+export * from './DatasourceEditor';