feat(work-items): add query editor for SystemLink Work Items data source

src/datasources/work-items/WorkItemsDataSource.test.ts

@@ -1,12 +1,25 @@
 import { WorkItemsDataSource } from './WorkItemsDataSource';
 import { setupDataSource } from 'test/fixtures';
+import { OrderByOptions, OutputType, WorkItemPropertiesOptions, WorkItemTypeOptions } from './types';
 
 describe('WorkItemsDataSource', () => {
-  it('returns an empty placeholder frame', async () => {
+  it('applies expected default query values', () => {
     const [datasource] = setupDataSource(WorkItemsDataSource);
 
-    const result = await datasource.runQuery({ refId: 'A' }, { scopedVars: {} } as any);
-    expect(result).toEqual({ refId: 'A', name: 'A', fields: [] });
+    const query = datasource.prepareQuery({ refId: 'A' });
+
+    expect(query.outputType).toBe(OutputType.Properties);
+    expect(query.types).toEqual(Object.values(WorkItemTypeOptions));
+    expect(query.properties).toEqual([
+      WorkItemPropertiesOptions.NAME,
+      WorkItemPropertiesOptions.STATE,
+      WorkItemPropertiesOptions.ASSIGNED_TO,
+      WorkItemPropertiesOptions.PLANNED_START_DATE,
+      WorkItemPropertiesOptions.DUE_DATE,
+    ]);
+    expect(query.orderBy).toBe(OrderByOptions.UPDATED_AT);
+    expect(query.descending).toBe(true);
+    expect(query.take).toBe(1000);
   });
 
   it('tests datasource connection against the work-items service endpoint', async () => {
@@ -15,11 +28,14 @@ describe('WorkItemsDataSource', () => {
 
     const result = await datasource.testDatasource();
 
-    expect(postSpy).toHaveBeenCalledWith(
-      '/niworkitem/v1/query-workitems',
-      { take: 1 },
-      { showErrorAlert: false }
-    );
+    expect(postSpy).toHaveBeenCalledWith('/niworkitem/v1/query-workitems', { take: 1 }, { showErrorAlert: false });
     expect(result.status).toBe('success');
   });
+
+  it('bubbles up exception when datasource connectivity check fails', async () => {
+    const [datasource] = setupDataSource(WorkItemsDataSource);
+    jest.spyOn(datasource, 'post').mockRejectedValue(new Error('Failed'));
+
+    await expect(datasource.testDatasource()).rejects.toThrow('Failed');
+  });
 });

src/datasources/work-items/WorkItemsDataSource.ts

@@ -6,7 +6,14 @@ import {
 } from '@grafana/data';
 import { BackendSrv, TemplateSrv, getBackendSrv, getTemplateSrv } from '@grafana/runtime';
 import { DataSourceBase } from 'core/DataSourceBase';
-import { WorkItemsQuery } from './types';
+import {
+  OrderByOptions,
+  OutputType,
+  WorkItemPropertiesOptions,
+  WorkItemsQuery,
+  WorkItemTypeOptions,
+} from './types';
+import { DEFAULT_TAKE } from './constants';
 
 export class WorkItemsDataSource extends DataSourceBase<WorkItemsQuery> {
   constructor(
@@ -20,8 +27,22 @@ export class WorkItemsDataSource extends DataSourceBase<WorkItemsQuery> {
   baseUrl = `${this.instanceSettings.url}/niworkitem/v1`;
   queryWorkItemsUrl = `${this.baseUrl}/query-workitems`;
 
-  defaultQuery = {};
+  defaultQuery = {
+    outputType: OutputType.Properties,
+    types: Object.values(WorkItemTypeOptions),
+    properties: [
+      WorkItemPropertiesOptions.NAME,
+      WorkItemPropertiesOptions.STATE,
+      WorkItemPropertiesOptions.ASSIGNED_TO,
+      WorkItemPropertiesOptions.PLANNED_START_DATE,
+      WorkItemPropertiesOptions.DUE_DATE,
+    ],
+    orderBy: OrderByOptions.UPDATED_AT,
+    descending: true,
+    take: DEFAULT_TAKE,
+  };
 
+  // TODO: AB#3923375 - Query work items and return the requested properties instead of an empty frame.
   async runQuery(query: WorkItemsQuery, _options: DataQueryRequest<WorkItemsQuery>): Promise<DataFrameDTO> {
     return {
       refId: query.refId,

src/datasources/work-items/components/WorkItemsQueryEditor.page.ts

@@ -0,0 +1,32 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { OutputType } from '../types';
+import { labels } from '../constants/QueryEditor.constants';
+
+/**
+ * Page object collecting the DOM selectors used by WorkItemsQueryEditor.test.tsx,
+ * so the test file only reads intent, not query-library boilerplate.
+ */
+export const workItemsQueryEditorPage = {
+  outputTypeRadioButton: (value: OutputType) => screen.getByRole('radio', { name: value }),
+
+  // MultiCombobox (used for Types/Properties) doesn't forward its id to the underlying
+  // downshift input, so it has no accessible name; select by position among comboboxes instead.
+  typesMultiCombobox: () => screen.queryAllByRole('combobox')[0] ?? null,
+  propertiesMultiCombobox: () => screen.queryAllByRole('combobox')[1] ?? null,
+  orderByCombobox: () => screen.queryByRole('combobox', { name: labels.orderBy }),
+  descendingSwitch: () => screen.queryByRole('switch', { name: labels.descending }),
+  takeLimitInput: () => screen.getByRole('spinbutton'),
+  optionalTakeLimitInput: () => screen.queryByRole('spinbutton'),
+  setTakeLimit: (value: string) => {
+    const takeLimitInput = screen.getByRole('spinbutton');
+    fireEvent.change(takeLimitInput, { target: { value } });
+    fireEvent.blur(takeLimitInput);
+  },
+
+  removeOptionButton: (name: string) => screen.getByRole('button', { name: `Remove ${name}` }),
+  typeSelectOption: (name: string) => screen.findByRole('option', { name }),
+  propertySelectOption: (name: string) => screen.findByRole('option', { name }),
+  propertyOptionCheckbox: (name: string) => screen.getByRole('checkbox', { name }),
+
+  getErrorByMessage: (message: string) => screen.queryByText(message),
+};

src/datasources/work-items/components/WorkItemsQueryEditor.test.tsx

@@ -1,14 +1,167 @@
-import { screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { setupRenderer } from 'test/fixtures';
+import { propertiesErrorMessages, takeErrorMessages, typesErrorMessages } from '../constants/QueryEditor.constants';
+import { TAKE_LIMIT } from '../constants';
 import { WorkItemsDataSource } from '../WorkItemsDataSource';
+import { OutputType, WorkItemPropertiesOptions, WorkItemTypeOptions } from '../types';
 import { WorkItemsQueryEditor } from './WorkItemsQueryEditor';
+import { workItemsQueryEditorPage as page } from './WorkItemsQueryEditor.page';
 
 describe('WorkItemsQueryEditor', () => {
-  it('shows placeholder message', () => {
+  it('should show all controls when the editor renders', () => {
     const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
 
     render({});
 
-    expect(screen.getByText('Work Items datasource query controls will be added in follow-up stories.')).toBeInTheDocument();
+    expect(page.outputTypeRadioButton(OutputType.Properties)).toBeInTheDocument();
+    expect(page.outputTypeRadioButton(OutputType.TotalCount)).toBeInTheDocument();
+    expect(page.typesMultiCombobox()).toBeVisible();
+    expect(page.propertiesMultiCombobox()).toBeVisible();
+    expect(page.orderByCombobox()).toBeVisible();
+    expect(page.descendingSwitch()).toBeInTheDocument();
+    expect(page.optionalTakeLimitInput()).toBeVisible();
+  });
+
+  it('should hide properties-only controls when the output type is total count', async () => {
+    const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+
+    render({});
+    await userEvent.click(page.outputTypeRadioButton(OutputType.TotalCount));
+
+    expect(page.propertiesMultiCombobox()).toBeNull();
+    expect(page.orderByCombobox()).toBeNull();
+    expect(page.descendingSwitch()).toBeNull();
+    expect(page.optionalTakeLimitInput()).toBeNull();
+  });
+
+  it('should show default selected properties when the output type is properties', async () => {
+    const offsetHeightSpy = jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(30);
+
+    try {
+      const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+      render({});
+
+      const propertiesCombobox = page.propertiesMultiCombobox()!;
+      const checkedLabels = ['Work item name', 'State', 'Assigned to', 'Planned start date', 'Due date'];
+
+      fireEvent.click(propertiesCombobox);
+      for (const label of checkedLabels) {
+        // fireEvent.change is used here to filter/search the dropdown options; it does not select or deselect them.
+        fireEvent.change(propertiesCombobox, { target: { value: label } });
+        expect(page.propertyOptionCheckbox(label)).toBeChecked();
+      }
+
+      fireEvent.change(propertiesCombobox, { target: { value: 'Work item ID' } });
+      expect(page.propertyOptionCheckbox('Work item ID')).not.toBeChecked();
+    } finally {
+      offsetHeightSpy.mockRestore();
+    }
+  });
+
+  describe('validation error', () => {
+    it('should not show types, properties, or take validation errors when the editor renders', () => {
+      const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+
+      render({});
+
+      expect(page.getErrorByMessage(typesErrorMessages.atLeastOneRequired)).toBeNull();
+      expect(page.getErrorByMessage(propertiesErrorMessages.atLeastOneRequired)).toBeNull();
+      expect(page.getErrorByMessage(takeErrorMessages.greaterOrEqualToZero)).toBeNull();
+      expect(page.getErrorByMessage(takeErrorMessages.lessOrEqualToTenThousand)).toBeNull();
+    });
+
+    it('should clear the types validation error when a type is re-added after all types are removed', async () => {
+      const offsetHeightSpy = jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(30);
+
+      try {
+        const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+        const [onChange, onRunQuery] = render({ types: [WorkItemTypeOptions.WorkOrders] });
+
+        await userEvent.click(page.removeOptionButton('Work orders'));
+
+        expect(page.getErrorByMessage(typesErrorMessages.atLeastOneRequired)).toBeVisible();
+        expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ types: [] }));
+        expect(onRunQuery).not.toHaveBeenCalled();
+
+        const typesCombobox = page.typesMultiCombobox()!;
+        await userEvent.click(typesCombobox);
+        await userEvent.click(await page.typeSelectOption('Work orders'));
+
+        expect(page.getErrorByMessage(typesErrorMessages.atLeastOneRequired)).toBeNull();
+        expect(onChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({ types: [WorkItemTypeOptions.WorkOrders] })
+        );
+        expect(onRunQuery).toHaveBeenCalled();
+      } finally {
+        offsetHeightSpy.mockRestore();
+      }
+    });
+
+    it('should clear the properties validation error when a property is re-added after all properties are removed', async () => {
+      const offsetHeightSpy = jest.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(30);
+
+      try {
+        const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+        const [onChange, onRunQuery] = render({ properties: [WorkItemPropertiesOptions.ID] });
+
+        await userEvent.click(page.removeOptionButton('Work item ID'));
+
+        expect(page.getErrorByMessage(propertiesErrorMessages.atLeastOneRequired)).toBeVisible();
+        expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ properties: [] }));
+        expect(onRunQuery).not.toHaveBeenCalled();
+
+        const propertiesCombobox = page.propertiesMultiCombobox()!;
+        await userEvent.click(propertiesCombobox);
+        await userEvent.click(await page.propertySelectOption('Work item name'));
+
+        expect(page.getErrorByMessage(propertiesErrorMessages.atLeastOneRequired)).toBeNull();
+        expect(onChange).toHaveBeenLastCalledWith(
+          expect.objectContaining({ properties: [WorkItemPropertiesOptions.NAME] })
+        );
+        expect(onRunQuery).toHaveBeenCalled();
+      } finally {
+        offsetHeightSpy.mockRestore();
+      }
+    });
+
+    it('should show a take validation error and suppress query execution when take input is invalid', () => {
+      const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+
+      const [onChange, onRunQuery] = render({});
+
+      page.setTakeLimit('-5');
+
+      expect(page.getErrorByMessage(takeErrorMessages.greaterOrEqualToZero)).toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onRunQuery).not.toHaveBeenCalled();
+    });
+
+    it('should show a take validation error and suppress query execution when take exceeds the maximum limit', () => {
+      const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+
+      const [onChange, onRunQuery] = render({});
+
+      page.setTakeLimit(`${TAKE_LIMIT + 1}`);
+
+      expect(page.getErrorByMessage(takeErrorMessages.lessOrEqualToTenThousand)).toBeVisible();
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onRunQuery).not.toHaveBeenCalled();
+    });
+
+    it('should clear the take validation error and run the query when a valid take value is entered', () => {
+      const render = setupRenderer(WorkItemsQueryEditor, WorkItemsDataSource);
+
+      const [onChange, onRunQuery] = render({});
+
+      page.setTakeLimit('-5');
+      expect(page.getErrorByMessage(takeErrorMessages.greaterOrEqualToZero)).toBeVisible();
+
+      page.setTakeLimit('500');
+
+      expect(page.getErrorByMessage(takeErrorMessages.greaterOrEqualToZero)).toBeNull();
+      expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ take: 500 }));
+      expect(onRunQuery).toHaveBeenCalled();
+    });
   });
 });