CloudMonitoring: Allow a custom group by value (#86288)

Allow a custom group by value

public/app/plugins/datasource/cloud-monitoring/components/GroupBy.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { openMenu, select } from 'react-select-event';
 
@@ -40,4 +41,18 @@ describe('GroupBy', () => {
     await select(groupBy, option, { container: document.body });
     expect(onChange).toBeCalledWith(expect.objectContaining({ groupBys: expect.arrayContaining([option]) }));
   });
+
+  it('can add a custom group by', async () => {
+    const onChange = jest.fn();
+    render(<GroupBy {...props} onChange={onChange} />);
+
+    const groupBy = screen.getByLabelText('Group by');
+    const option = 'metadata.custom.group_by';
+
+    await openMenu(groupBy);
+    expect(screen.queryByText(option)).not.toBeInTheDocument();
+    await userEvent.type(groupBy, `${option}{enter}`);
+
+    expect(onChange).toBeCalledWith(expect.objectContaining({ groupBys: expect.arrayContaining([option]) }));
+  });
 });

public/app/plugins/datasource/cloud-monitoring/components/GroupBy.tsx

@@ -40,6 +40,7 @@ export const GroupBy = ({
         tooltip="You can reduce the amount of data returned for a metric by combining different time series. To combine multiple time series, you can specify a grouping and a function. Grouping is done on the basis of labels. The grouping function is used to combine the time series in the group into a single time series."
       >
         <MultiSelect
+          allowCustomValue
           inputId={`${refId}-group-by`}
           width="auto"
           placeholder="Choose label"