feat: added a new query button #238

ytsaurus · Dec 20, 2023 · aff1ab9 · aff1ab9
1 parent cbd8eb8
commit aff1ab9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 81 deletions.
diff --git a/packages/ui/src/ui/components/Inline/Inline.tsx b/packages/ui/src/ui/components/Inline/Inline.tsx
diff --git a/packages/ui/src/ui/components/Inline/index.scss b/packages/ui/src/ui/components/Inline/index.scss
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/QueryMetaForm.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/QueryMetaForm/QueryMetaForm.tsx
@@ -12,7 +12,7 @@ import {QueryEngineSelector} from './QueryEngineSelector/QueryEngineSelector';
 import './QueryMetaForm.scss';
 import {QueryFile} from '../../module/api';
 import {NewQueryButton} from '../../NewQueryButton/NewQueryButton';
-import {Inline} from '../../../../components/Inline/Inline';
+import {Toolbar} from '../../../../components/WithStickyToolbar/Toolbar/Toolbar';
 
 const block = cn('query-tracker-meta-form');
 export function QueryMetaForm({
@@ -48,33 +48,59 @@ export function QueryMetaForm({
     const queryName = draft.annotations?.title;
     return (
         <div className={block(null, className)}>
-            <Inline space="s">
-                <EditableAsText
-                    withControls
-                    className={block('control', {name: true})}
-                    onChange={onNameChange}
-                    text={queryName}
-                    key={originalQuery?.id}
-                    size="l"
-                >
-                    <Text
-                        title={queryName}
-                        variant="body-1"
-                        color={queryName ? 'primary' : 'secondary'}
-                        ellipsis
-                    >
-                        {queryName || 'No name'}
-                    </Text>
-                </EditableAsText>
-                <QueryEngineSelector cluster={cluster} path={path} />
-                <QuerySettingsButton settings={draft.settings} onChange={onSettingsChange} />
-                <QueryFilesButton
-                    files={draft.files}
-                    onChange={onFilesChange}
-                    queryId={originalQuery?.id ?? ''}
-                />
-                <NewQueryButton />
-            </Inline>
+            <Toolbar
+                itemsToWrap={[
+                    {
+                        name: queryName,
+                        node: (
+                            <EditableAsText
+                                withControls
+                                className={block('control', {name: true})}
+                                onChange={onNameChange}
+                                text={queryName}
+                                key={originalQuery?.id}
+                                size="l"
+                            >
+                                <Text
+                                    title={queryName}
+                                    variant="body-1"
+                                    color={queryName ? 'primary' : 'secondary'}
+                                    ellipsis
+                                >
+                                    {queryName || 'No name'}
+                                </Text>
+                            </EditableAsText>
+                        ),
+                    },
+                    {
+                        name: 'Engine',
+                        node: <QueryEngineSelector cluster={cluster} path={path} />,
+                    },
+                    {
+                        name: 'Settings',
+                        node: (
+                            <QuerySettingsButton
+                                settings={draft.settings}
+                                onChange={onSettingsChange}
+                            />
+                        ),
+                    },
+                    {
+                        name: 'Files',
+                        node: (
+                            <QueryFilesButton
+                                files={draft.files}
+                                onChange={onFilesChange}
+                                queryId={originalQuery?.id ?? ''}
+                            />
+                        ),
+                    },
+                    {
+                        name: 'NewQuery',
+                        node: <NewQueryButton />,
+                    },
+                ]}
+            />
         </div>
     );
 }