feat(query-tracker): added file attachments to queries [#221]

ytsaurus · Dec 12, 2023 · 2fbe96b · 2fbe96b
1 parent 8518c96
commit 2fbe96b
Show file tree

Hide file tree

Showing 8 changed files with 568 additions and 6 deletions.
diff --git a/packages/ui/src/ui/components/ButtonPopup/ButtonPopup.scss b/packages/ui/src/ui/components/ButtonPopup/ButtonPopup.scss
@@ -0,0 +1,9 @@
+.button-popup {
+    min-width: 620px;
+    padding: 16px 20px;
+
+    &__top-row {
+        display: flex;
+        justify-content: space-between;
+    }
+}
diff --git a/packages/ui/src/ui/components/ButtonPopup/index.tsx b/packages/ui/src/ui/components/ButtonPopup/index.tsx
@@ -0,0 +1,45 @@
+import React, {useRef, useState} from 'react';
+import {Button, Icon, IconData, Popup, Text} from '@gravity-ui/uikit';
+import closeIcon from '@gravity-ui/icons/svgs/xmark.svg';
+
+import cn from 'bem-cn-lite';
+import './ButtonPopup.scss';
+
+const b = cn('button-popup');
+
+type ButtonPopupProps = {
+    icon: IconData;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    counter?: number;
+};
+
+export const ButtonWithPopup = ({icon, header, children, counter}: ButtonPopupProps) => {
+    const btnRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const toggle = () => setOpen(!open);
+    return (
+        <>
+            <Button ref={btnRef} onClick={toggle} view="outlined" size="l">
+                <Icon data={icon} size={16} />
+                {counter ? <Text>{counter}</Text> : undefined}
+            </Button>
+            <Popup
+                open={open}
+                anchorRef={btnRef}
+                placement={'bottom-start'}
+                onOutsideClick={toggle}
+            >
+                <div className={b()}>
+                    <div className={b('top-row')}>
+                        {header}
+                        <Button onClick={toggle} view="flat">
+                            <Icon data={closeIcon} />
+                        </Button>
+                    </div>
+                    {children}
+                </div>
+            </Popup>
+        </>
+    );
+};
diff --git a/packages/ui/src/ui/pages/query-tracker/QueryFilesButton/QueryFilesButton.scss b/packages/ui/src/ui/pages/query-tracker/QueryFilesButton/QueryFilesButton.scss
@@ -0,0 +1,49 @@
+.query-files-popup {
+    width: 640px;
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+    &__footer {
+        display: flex;
+        gap: 10px;
+    }
+
+    &__file-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding-bottom: 10px;
+    }
+
+    &__file-item {
+        padding: 10px 0;
+        width: 100%;
+        height: 48px;
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+        gap: 10px;
+        &-icon {
+            min-width: fit-content;
+        }
+        &-body,&-controls {
+            min-width: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            gap: 10px;            
+        }
+        &-body_edit {
+            align-items: flex-start;
+        }
+        &-controls_edit {
+            align-items: flex-start;
+            padding-top: 5px;
+        }
+        &-body_deleted>:last-child {
+            flex-shrink: 0;
+        }
+    }
+}