Replace Stack and Space components from local to @grafana/ui (#1136)

grafana · Jan 30, 2025 · 970e2f8 · 970e2f8
1 parent adf107f
commit 970e2f8
Show file tree

Hide file tree

Showing 15 changed files with 37 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -94,6 +94,7 @@
     "@types/lodash": "^4.14.194",
     "@types/mathjs": "^6.0.5",
     "@types/node": "^20.8.7",
+    "@types/react": "18.2.0",
     "@types/react-router-dom": "^5.2.0",
     "@types/testing-library__jest-dom": "5.14.8",
     "@types/xml2js": "^0.4.6",

diff --git a/src/components/extended/EditorField.tsx b/src/components/extended/EditorField.tsx
@@ -1,8 +1,6 @@
 import { css } from '@emotion/css';
 import React, { ComponentProps } from 'react';
-import { stylesFactory, useTheme2, ReactUtils, Field, Icon, PopoverContent, Tooltip, Tag } from '@grafana/ui';
-import { Space } from './Space';
-import { Stack } from './Stack';
+import { stylesFactory, useTheme2, ReactUtils, Field, Icon, PopoverContent, Tooltip, Tag, Stack, Space } from '@grafana/ui';
 import type { GrafanaTheme2 } from '@grafana/data';
 
 export const EditorFieldGroup: React.FC<{

diff --git a/src/components/extended/EditorList.tsx b/src/components/extended/EditorList.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { Button } from '@grafana/ui';
-
-import { Stack } from './Stack';
+import { Button, Stack } from '@grafana/ui';
 
 interface EditorListProps<T> {
   items: Array<Partial<T>>;

diff --git a/src/components/extended/EditorRow.tsx b/src/components/extended/EditorRow.tsx
@@ -1,8 +1,7 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, Button, useTheme2 } from '@grafana/ui';
-import { Stack } from './Stack';
+import { useStyles2, Button, Stack, useTheme2 } from '@grafana/ui';
 
 interface EditorRowProps {
   label: string;

diff --git a/src/components/extended/QueryOptionsGroup.tsx b/src/components/extended/QueryOptionsGroup.tsx
@@ -3,8 +3,7 @@ import React from 'react';
 import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
-import { Stack } from './Stack';
+import { Icon, useStyles2, Stack } from '@grafana/ui';
 
 export interface Props {
   title: string;

diff --git a/src/components/extended/Space.tsx b/src/components/extended/Space.tsx
diff --git a/src/components/extended/Stack.tsx b/src/components/extended/Stack.tsx
diff --git a/src/editors/query.help.tsx b/src/editors/query.help.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Button, LinkButton, Modal, Drawer, Card, TagList } from '@grafana/ui';
-import { Stack } from './../components/extended/Stack';
+import { Button, LinkButton, Modal, Drawer, Card, TagList, Stack } from '@grafana/ui';
 import type { InfinityQuery } from './../types';
 
 export const HelpLinks = () => {

diff --git a/src/editors/query/query.azureBlob.tsx b/src/editors/query/query.azureBlob.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Input } from '@grafana/ui';
-import { Stack } from '../../components/extended/Stack';
+import { Input, Stack } from '@grafana/ui';
 import { EditorRow } from '../../components/extended/EditorRow';
 import { EditorField } from '../../components/extended/EditorField';
 import { isDataQuery } from './../../app/utils';
@@ -13,7 +12,7 @@ export const AzureBlobEditor = (props: AzureBlobEditorProps) => {
   if (isDataQuery(query) && query.source === 'azure-blob') {
     return (
       <EditorRow label="Azure Blob details" collapsible={false} collapsed={true} title={() => ''}>
-        <Stack gap={1} direction="row" wrap={true}>
+        <Stack gap={1} direction="row" wrap={'wrap'}>
           <EditorField label="Container Name" horizontal={true}>
             <Input value={query.azContainerName} width={39} onChange={(e) => onChange({ ...query, azContainerName: e.currentTarget.value })} />
           </EditorField>

diff --git a/src/editors/query/query.columns.editor.tsx b/src/editors/query/query.columns.editor.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { Button, TextArea } from '@grafana/ui';
+import { Button, TextArea, Stack } from '@grafana/ui';
 import { EditorRow } from './../../components/extended/EditorRow';
 import { EditorField } from './../../components/extended/EditorField';
-import { Stack } from './../../components/extended/Stack';
 import { isBackendQuery, isDataQuery } from './../../app/utils';
 import { QueryColumnItem } from './../../components/QueryColumnItem';
 import { JSONOptionsEditor } from '../../components/JSONOptionsEditor';

diff --git a/src/editors/query/query.experimental.tsx b/src/editors/query/query.experimental.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Input } from '@grafana/ui';
-import { Stack } from '../../components/extended/Stack';
+import { Input, Stack } from '@grafana/ui';
 import { EditorRow } from '../../components/extended/EditorRow';
 import { EditorField } from '../../components/extended/EditorField';
 import { ComputedColumnsEditor } from './query.computedColumns';
@@ -19,7 +18,7 @@ export const ExperimentalFeatures = ({ query, onChange, onRunQuery }: Experiment
   }
   return (
     <EditorRow label="Computed columns, Filter, Group by" collapsible={true} collapsed={false} title={() => ''}>
-      <Stack gap={1} direction="row" wrap={true}>
+      <Stack gap={1} direction="row" wrap={'wrap'}>
         <ComputedColumnsEditor query={query} onChange={onChange} onRunQuery={onRunQuery} />
         <Filter query={query} onChange={onChange} onRunQuery={onRunQuery} />
         <Summarize query={query} onChange={onChange} onRunQuery={onRunQuery} />

diff --git a/src/editors/query/query.pagination.tsx b/src/editors/query/query.pagination.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { InlineLabel, Input, Select } from '@grafana/ui';
+import { InlineLabel, Input, Select, Stack } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
 import { EditorField } from './../../components/extended/EditorField';
 import { EditorRow } from './../../components/extended/EditorRow';
-import { Stack } from './../../components/extended/Stack';
 import type { InfinityQuery, PaginationParamType, PaginationType } from './../../types';
 
 const paginationTypes: Array<SelectableValue<PaginationType>> = [
@@ -32,8 +31,8 @@ export const PaginationEditor = (props: PaginationEditorProps) => {
   const { query, onChange } = props;
   return (
     <EditorRow label={'Pagination'} collapsible={true} collapsed={false} title={() => 'beta'}>
-      <Stack direction="row" wrap={true}>
-        <Stack wrap={false} direction="column">
+      <Stack direction="row" wrap={'wrap'}>
+        <Stack wrap={'nowrap'} direction="column">
           <EditorField label="Pagination Type">
             <Select<PaginationType> width={30} value={query.pagination_mode || 'none'} options={paginationTypes} onChange={(e) => onChange({ ...query, pagination_mode: e.value || 'none' })} />
           </EditorField>
@@ -53,7 +52,7 @@ export const PaginationEditor = (props: PaginationEditorProps) => {
         </Stack>
         {(query.pagination_mode === 'offset' || query.pagination_mode === 'page' || query.pagination_mode === 'cursor') && (
           <>
-            <Stack gap={1} wrap={false} direction="column">
+            <Stack gap={1} wrap={'wrap'} direction="column">
               <EditorField label="Size field">
                 <Stack>
                   <InlineLabel width={12}>Field name</InlineLabel>
@@ -176,7 +175,7 @@ export const PaginationEditor = (props: PaginationEditorProps) => {
         )}
         {query.pagination_mode === 'list' && (
           <>
-            <Stack gap={1} wrap={false} direction="column">
+            <Stack gap={1} wrap={'nowrap'} direction="column">
               <EditorField label="Variables List" invalid={(query.pagination_param_list_value || '').split(',').length > 5}>
                 <Stack>
                   <InlineLabel width={12}>Field name</InlineLabel>

diff --git a/src/editors/query/query.transformations.tsx b/src/editors/query/query.transformations.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Button, Drawer, Card, useTheme2, InlineLabel, Input } from '@grafana/ui';
-import { Stack } from './../../components/extended/Stack';
+import { Button, Drawer, Card, useTheme2, InlineLabel, Input, Stack } from '@grafana/ui';
 import { EditorRow } from './../../components/extended/EditorRow';
 import type { InfinityQuery, TransformationItem } from './../../types';
 

diff --git a/src/editors/query/query.url.tsx b/src/editors/query/query.url.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { InlineFormLabel, CodeEditor, Select, Input, RadioButtonGroup, Icon } from '@grafana/ui';
+import { InlineFormLabel, CodeEditor, Select, Input, RadioButtonGroup, Icon, Stack } from '@grafana/ui';
 import { EditorRow } from './../../components/extended/EditorRow';
 import { EditorField } from './../../components/extended/EditorField';
-import { Stack } from './../../components/extended/Stack';
 import { isDataQuery } from './../../app/utils';
 import { KeyValueEditor } from './../../components/KeyValuePairEditor';
 import type { InfinityQuery, InfinityQueryType, InfinityQueryWithURLSource, InfinityURLOptions, QueryBodyContentType, QueryBodyType } from './../../types';

diff --git a/yarn.lock b/yarn.lock
@@ -2358,6 +2358,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/prop-types@*":
+  version "15.7.14"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
+
 "@types/react-dom@^18.0.0":
   version "18.3.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
@@ -2402,6 +2407,20 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/react@18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
+  integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.23.0.tgz#0a6655b3e2708eaabca00b7372fafd7a792a7b09"
+  integrity sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==
+
 "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"