Chore: InfluxDB - Restructure the folders (#69554)

* Move useUniqueId to a general place

* Use new built-in useId hook

* Rename query builder and metadata query

* Move and rename the query builder tests

* Refactor query_builder and metadata_query

* Fix test

* Fix test

* Restructure folders

* update texts

* Update the mock

* Fix test

* update imports

* update imports again

.betterer.results

@@ -4148,12 +4148,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx:5381": [
+    "public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
-    "public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx:5381": [
+    "public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/datasource/influxdb/datasource.ts:5381": [

public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 
-import { QueryEditorProps } from '@grafana/data';
-import { InlineFormLabel, Input } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data/src';
+import { InlineFormLabel, Input } from '@grafana/ui/src';
 
-import { InfluxQuery, InfluxOptions } from '../types';
-
-import InfluxDatasource from './../datasource';
+import InfluxDatasource from '../../../datasource';
+import { InfluxOptions, InfluxQuery } from '../../../types';
 
 export const AnnotationEditor = (props: QueryEditorProps<InfluxDatasource, InfluxQuery, InfluxOptions>) => {
   const { query, onChange } = props;

public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx

@@ -10,12 +10,20 @@ import {
   SelectableValue,
   updateDatasourcePluginJsonDataOption,
   updateDatasourcePluginResetOption,
-} from '@grafana/data';
-import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+} from '@grafana/data/src';
+import {
+  Alert,
+  DataSourceHttpSettings,
+  InfoBox,
+  InlineField,
+  InlineFormLabel,
+  LegacyForms,
+  Select,
+} from '@grafana/ui/src';
 import { config } from 'app/core/config';
 
-import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
-import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
+import { BROWSER_MODE_DISABLED_MESSAGE } from '../../../constants';
+import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../../../types';
 
 const { Input, SecretFormField } = LegacyForms;
 

public/app/plugins/datasource/influxdb/components/editor/constants.ts

@@ -1,6 +1,6 @@
-import { SelectableValue } from '@grafana/data';
+import { SelectableValue } from '@grafana/data/src';
 
-import { ResultFormat } from '../types';
+import { ResultFormat } from '../../types';
 
 export const RESULT_FORMATS: Array<SelectableValue<ResultFormat>> = [
   { label: 'Time series', value: 'time_series' },

public/app/plugins/datasource/influxdb/components/editor/query/QueryEditor.tsx

@@ -1,20 +1,20 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { QueryEditorProps } from '@grafana/data';
+import { QueryEditorProps } from '@grafana/data/src';
 
-import InfluxDatasource from '../datasource';
-import { buildRawQuery } from '../queryUtils';
-import { InfluxOptions, InfluxQuery } from '../types';
+import InfluxDatasource from '../../../datasource';
+import { buildRawQuery } from '../../../queryUtils';
+import { InfluxOptions, InfluxQuery } from '../../../types';
 
-import { FluxQueryEditor } from './FluxQueryEditor';
-import { QueryEditorModeSwitcher } from './QueryEditorModeSwitcher';
-import { RawInfluxQLEditor } from './RawInfluxQLEditor';
-import { Editor as VisualInfluxQLEditor } from './VisualInfluxQLEditor/Editor';
+import { FluxQueryEditor } from './flux/FluxQueryEditor';
+import { QueryEditorModeSwitcher } from './influxql/QueryEditorModeSwitcher';
+import { RawInfluxQLEditor } from './influxql/code/RawInfluxQLEditor';
+import { VisualInfluxQLEditor as VisualInfluxQLEditor } from './influxql/visual/VisualInfluxQLEditor';
 
 type Props = QueryEditorProps<InfluxDatasource, InfluxQuery, InfluxOptions>;
 
-export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range, data }: Props): JSX.Element => {
+export const QueryEditor = ({ query, onChange, onRunQuery, datasource }: Props) => {
   if (datasource.isFlux) {
     return (
       <div className="gf-form-query-content">

public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx

@@ -1,22 +1,22 @@
-import { cx, css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
-import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { getTemplateSrv } from '@grafana/runtime';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data/src';
+import { getTemplateSrv } from '@grafana/runtime/src';
 import {
-  InlineFormLabel,
-  LinkButton,
-  Segment,
   CodeEditor,
-  MonacoEditor,
   CodeEditorSuggestionItem,
   CodeEditorSuggestionItemKind,
-  withTheme2,
+  InlineFormLabel,
+  LinkButton,
+  MonacoEditor,
+  Segment,
   Themeable2,
-} from '@grafana/ui';
+  withTheme2,
+} from '@grafana/ui/src';
 
-import InfluxDatasource from '../datasource';
-import { InfluxQuery } from '../types';
+import InfluxDatasource from '../../../../datasource';
+import { InfluxQuery } from '../../../../types';
 
 interface Props extends Themeable2 {
   onChange: (query: InfluxQuery) => void;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
-import { InfluxQuery } from '../types';
+import { InfluxQuery } from '../../../../../types';
 
 import { RawInfluxQLEditor } from './RawInfluxQLEditor';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/code/RawInfluxQLEditor.tsx

@@ -2,10 +2,9 @@ import React, { useId } from 'react';
 
 import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@grafana/ui';
 
-import { InfluxQuery } from '../types';
-
-import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from './constants';
-import { useShadowedState } from './useShadowedState';
+import { InfluxQuery } from '../../../../../types';
+import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants';
+import { useShadowedState } from '../../hooks/useShadowedState';
 
 type Props = {
   query: InfluxQuery;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/partListUtils.tsx

@@ -1,11 +1,11 @@
 import { SelectableValue } from '@grafana/data';
 import { QueryPartDef } from 'app/features/alerting/state/query_part';
 
-import InfluxQueryModel from '../../influx_query_model';
-import queryPart from '../../query_part';
-import { InfluxQuery, InfluxQueryPart } from '../../types';
+import InfluxQueryModel from '../../../../../influx_query_model';
+import queryPart from '../../../../../query_part';
+import { InfluxQuery, InfluxQueryPart } from '../../../../../types';
+import { PartParams } from '../visual/PartListSection';
 
-import { PartParams } from './PartListSection';
 import { toSelectableValue } from './toSelectableValue';
 import { unwrap } from './unwrap';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/utils/tagUtils.ts

@@ -1,4 +1,4 @@
-import { InfluxQueryTag } from '../../types';
+import { InfluxQueryTag } from '../../../../../types';
 
 function isRegex(text: string): boolean {
   return /^\/.*\/$/.test(text);

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/AddButton.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
+import { unwrap } from '../utils/unwrap';
+
 import { Seg } from './Seg';
-import { unwrap } from './unwrap';
 
 type Props = {
   loadOptions: () => Promise<SelectableValue[]>;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FormatAsSection.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 
 import { Select } from '@grafana/ui';
 
-import { ResultFormat } from '../../types';
-import { RESULT_FORMATS } from '../constants';
+import { ResultFormat } from '../../../../../types';
+import { RESULT_FORMATS } from '../../../constants';
+import { unwrap } from '../utils/unwrap';
 
 import { paddingRightClass } from './styles';
-import { unwrap } from './unwrap';
 
 type Props = {
   inputId?: string;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/FromSection.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
+import { toSelectableValue } from '../utils/toSelectableValue';
+
 import { Seg } from './Seg';
-import { toSelectableValue } from './toSelectableValue';
 
 // we use the value "default" as a magic-value, it means
 // we use the default retention-policy.

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/InputSection.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Input } from '@grafana/ui';
 
-import { useShadowedState } from '../useShadowedState';
+import { useShadowedState } from '../../hooks/useShadowedState';
 
 import { paddingRightClass } from './styles';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/OrderByTimeSection.tsx

@@ -4,8 +4,9 @@ import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 
+import { unwrap } from '../utils/unwrap';
+
 import { paddingRightClass } from './styles';
-import { unwrap } from './unwrap';
 
 type Mode = 'ASC' | 'DESC';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/PartListSection.tsx

@@ -1,13 +1,14 @@
-import { cx, css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { useMemo } from 'react';
 
-import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { MenuItem, WithContextMenu, MenuGroup, useTheme2 } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { MenuGroup, MenuItem, useTheme2, WithContextMenu } from '@grafana/ui';
+
+import { toSelectableValue } from '../utils/toSelectableValue';
+import { unwrap } from '../utils/unwrap';
 
 import { AddButton } from './AddButton';
 import { Seg } from './Seg';
-import { toSelectableValue } from './toSelectableValue';
-import { unwrap } from './unwrap';
 
 export type PartParams = Array<{
   value: string;

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/Seg.tsx

@@ -6,7 +6,7 @@ import { useAsyncFn } from 'react-use';
 import { SelectableValue } from '@grafana/data';
 import { AsyncSelect, InlineLabel, Input, Select } from '@grafana/ui';
 
-import { useShadowedState } from '../useShadowedState';
+import { useShadowedState } from '../../hooks/useShadowedState';
 
 // this file is a simpler version of `grafana-ui / SegmentAsync.tsx`
 // with some changes:

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.test.tsx

@@ -1,7 +1,7 @@
-import { fireEvent, render, screen, act, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { InfluxQueryTag } from '../../types';
+import { InfluxQueryTag } from '../../../../../types';
 
 import { TagsSection } from './TagsSection';
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/TagsSection.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
-import { InfluxQueryTag } from '../../types';
+import { InfluxQueryTag } from '../../../../../types';
+import { adjustOperatorIfNeeded, getCondition, getOperator } from '../utils/tagUtils';
+import { toSelectableValue } from '../utils/toSelectableValue';
 
 import { AddButton } from './AddButton';
 import { Seg } from './Seg';
-import { adjustOperatorIfNeeded, getCondition, getOperator } from './tagUtils';
-import { toSelectableValue } from './toSelectableValue';
 
 type KnownOperator = '=' | '!=' | '<>' | '<' | '>' | '=~' | '!~';
 const knownOperators: KnownOperator[] = ['=', '!=', '<>', '<', '>', '=~', '!~'];

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tags.test.tsx

@@ -2,13 +2,13 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import InfluxDatasource from '../../datasource';
-import * as mockedMeta from '../../influxql_metadata_query';
-import { InfluxQuery } from '../../types';
+import InfluxDatasource from '../../../../../datasource';
+import * as mockedMeta from '../../../../../influxql_metadata_query';
+import { InfluxQuery } from '../../../../../types';
 
-import { Editor } from './Editor';
+import { VisualInfluxQLEditor } from './VisualInfluxQLEditor';
 
-jest.mock('../../influxql_metadata_query', () => {
+jest.mock('../../../../../influxql_metadata_query', () => {
   return {
     __esModule: true,
     getAllPolicies: jest.fn().mockReturnValueOnce(Promise.resolve(['default', 'autogen'])),
@@ -124,7 +124,7 @@ describe('InfluxDB InfluxQL Visual Editor field-filtering', () => {
     const datasource: InfluxDatasource = {
       metricFindQuery: () => Promise.resolve([]),
     } as unknown as InfluxDatasource;
-    render(<Editor query={query} datasource={datasource} onChange={onChange} onRunQuery={onRunQuery} />);
+    render(<VisualInfluxQLEditor query={query} datasource={datasource} onChange={onChange} onRunQuery={onRunQuery} />);
 
     await waitFor(() => {});
 

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.test.tsx

@@ -1,11 +1,11 @@
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import InfluxDatasource from '../../datasource';
-import { getMockDS, getMockDSInstanceSettings } from '../../specs/mocks';
-import { InfluxQuery } from '../../types';
+import InfluxDatasource from '../../../../../datasource';
+import { getMockDS, getMockDSInstanceSettings } from '../../../../../specs/mocks';
+import { InfluxQuery } from '../../../../../types';
 
-import { Editor } from './Editor';
+import { VisualInfluxQLEditor } from './VisualInfluxQLEditor';
 
 // we mock the @grafana/ui components we use to make sure they just show their "value".
 // we mostly need this for `Input`, because that one is not visible with `.textContent`,
@@ -42,7 +42,7 @@ async function assertEditor(query: InfluxQuery, textContent: string) {
   const datasource: InfluxDatasource = getMockDS(getMockDSInstanceSettings());
   datasource.metricFindQuery = () => Promise.resolve([]);
   const { container } = render(
-    <Editor query={query} datasource={datasource} onChange={onChange} onRunQuery={onRunQuery} />
+    <VisualInfluxQLEditor query={query} datasource={datasource} onChange={onChange} onRunQuery={onRunQuery} />
   );
   await waitFor(() => {
     expect(container.textContent).toBe(textContent);

public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx

@@ -6,14 +6,14 @@ import { GrafanaTheme2, TypedVariableModel } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
 
-import InfluxDatasource from '../../datasource';
+import InfluxDatasource from '../../../../../datasource';
 import {
   getAllMeasurementsForTags,
   getAllPolicies,
   getFieldKeysForMeasurement,
   getTagKeysForMeasurementAndTags,
   getTagValues,
-} from '../../influxql_metadata_query';
+} from '../../../../../influxql_metadata_query';
 import {
   addNewGroupByPart,
   addNewSelectPart,
@@ -22,9 +22,10 @@ import {
   normalizeQuery,
   removeGroupByPart,
   removeSelectPart,
-} from '../../queryUtils';
-import { InfluxQuery, InfluxQueryTag } from '../../types';
-import { DEFAULT_RESULT_FORMAT } from '../constants';
+} from '../../../../../queryUtils';
+import { InfluxQuery, InfluxQueryTag } from '../../../../../types';
+import { DEFAULT_RESULT_FORMAT } from '../../../constants';
+import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from '../utils/partListUtils';
 
 import { FormatAsSection } from './FormatAsSection';
 import { FromSection } from './FromSection';
@@ -32,7 +33,6 @@ import { InputSection } from './InputSection';
 import { OrderByTimeSection } from './OrderByTimeSection';
 import { PartListSection } from './PartListSection';
 import { TagsSection } from './TagsSection';
-import { getNewGroupByPartOptions, getNewSelectPartOptions, makePartList } from './partListUtils';
 
 type Props = {
   query: InfluxQuery;
@@ -78,7 +78,7 @@ function filterTags(parts: InfluxQueryTag[], allTagKeys: Set<string>): InfluxQue
   return parts.filter((t) => t.key.endsWith('::tag') || allTagKeys.has(t.key + '::tag'));
 }
 
-export const Editor = (props: Props): JSX.Element => {
+export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
   const uniqueId = useId();
   const formatAsId = `influxdb-qe-format-as-${uniqueId}`;
   const orderByTimeId = `influxdb-qe-order-by${uniqueId}`;

public/app/plugins/datasource/influxdb/components/editor/variable/VariableQueryEditor.tsx

@@ -1,10 +1,9 @@
 import React, { PureComponent } from 'react';
 
-import { InlineFormLabel, TextArea } from '@grafana/ui';
+import { InlineFormLabel, TextArea } from '@grafana/ui/src';
 
-import InfluxDatasource from '../datasource';
-
-import { FluxQueryEditor } from './FluxQueryEditor';
+import InfluxDatasource from '../../../datasource';
+import { FluxQueryEditor } from '../query/flux/FluxQueryEditor';
 
 interface Props {
   query: string; // before flux, it was always a string

public/app/plugins/datasource/influxdb/datasource.mock.ts

@@ -12,6 +12,7 @@ type FieldReturnValue = { text: string };
  */
 export class InfluxDatasourceMock {
   constructor(private measurements: Measurements) {}
+
   metricFindQuery(query: string) {
     if (isMeasurementsQuery(query)) {
       return this.getMeasurements();

public/app/plugins/datasource/influxdb/datasource.ts

@@ -29,8 +29,8 @@ import {
 import config from 'app/core/config';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
-import { AnnotationEditor } from './components/AnnotationEditor';
-import { FluxQueryEditor } from './components/FluxQueryEditor';
+import { AnnotationEditor } from './components/editor/annotation/AnnotationEditor';
+import { FluxQueryEditor } from './components/editor/query/flux/FluxQueryEditor';
 import { BROWSER_MODE_DISABLED_MESSAGE } from './constants';
 import InfluxQueryModel from './influx_query_model';
 import InfluxSeries from './influx_series';

public/app/plugins/datasource/influxdb/influxql_query_builder.test.ts

@@ -1,7 +1,7 @@
 import { buildMetadataQuery } from './influxql_query_builder';
 import { templateSrvStub as templateService } from './specs/mocks';
 
-describe('influx-query-builder', () => {
+describe('influxql-query-builder', () => {
   describe('RETENTION_POLICIES', () => {
     it('should build retention policies query', () => {
       const query = buildMetadataQuery({

public/app/plugins/datasource/influxdb/module.ts

@@ -1,9 +1,9 @@
 import { DataSourcePlugin } from '@grafana/data';
 
-import ConfigEditor from './components/ConfigEditor';
-import InfluxStartPage from './components/InfluxStartPage';
-import { QueryEditor } from './components/QueryEditor';
-import VariableQueryEditor from './components/VariableQueryEditor';
+import ConfigEditor from './components/editor/config/ConfigEditor';
+import { QueryEditor } from './components/editor/query/QueryEditor';
+import InfluxStartPage from './components/editor/query/influxql/InfluxStartPage';
+import VariableQueryEditor from './components/editor/variable/VariableQueryEditor';
 import InfluxDatasource from './datasource';
 
 export const plugin = new DataSourcePlugin(InfluxDatasource)