mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 08:58:26 +00:00
Added popover for query options inside Query Panel
This commit is contained in:
devanshu052000
parent
3bd6bc5beb
commit
cbf908362c
4 changed files with 117 additions and 72 deletions
|
|
@ -13,6 +13,11 @@ import useStore from '@/AppBuilder/_stores/store';
|
|||
import { Confirm } from '@/Editor/Viewer/Confirm';
|
||||
// TODO: enable delete query confirmation popup
|
||||
import { debounce } from 'lodash';
|
||||
import { Button as ButtonComponent } from '@/components/ui/Button/Button.jsx';
|
||||
import Edit from '@/_ui/Icon/bulkIcons/Edit';
|
||||
import Trash from '@/_ui/Icon/solidIcons/Trash';
|
||||
import { OverlayTrigger, Popover } from 'react-bootstrap';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
|
||||
const appId = useStore((state) => state.app.appId);
|
||||
|
|
@ -27,6 +32,7 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
|
|||
const duplicateQuery = useStore((state) => state.dataQuery.duplicateQuery);
|
||||
const setPreviewData = useStore((state) => state.queryPanel.setPreviewData);
|
||||
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
|
||||
const [showQueryMenu, setShowQueryMenu] = useState(false);
|
||||
const hasPermissions =
|
||||
selectedDataSourceScope === 'global'
|
||||
? canUpdateDataSource(dataQuery?.data_source_id) ||
|
||||
|
|
@ -36,10 +42,40 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
|
|||
|
||||
const shouldFreeze = useStore((state) => state.getShouldFreeze());
|
||||
|
||||
const QUERY_MENU_OPTIONS = [
|
||||
{
|
||||
label: 'Rename',
|
||||
value: 'rename',
|
||||
icon: <Edit width={16} />,
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
value: 'duplicate',
|
||||
icon: <Copy width={16} />,
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
value: 'delete',
|
||||
icon: <Trash width={16} fill={'#E54D2E'} />,
|
||||
},
|
||||
];
|
||||
|
||||
const handleQueryMenuActions = (value) => {
|
||||
if (value === 'rename') {
|
||||
setRenamingQuery(true);
|
||||
}
|
||||
if (value === 'duplicate') {
|
||||
debouncedDuplicateQuery(dataQuery?.id, appId);
|
||||
}
|
||||
if (value === 'delete') {
|
||||
deleteDataQuery();
|
||||
}
|
||||
setShowQueryMenu(false);
|
||||
};
|
||||
|
||||
const [renamingQuery, setRenamingQuery] = useState(false);
|
||||
|
||||
const deleteDataQuery = (e) => {
|
||||
e.stopPropagation();
|
||||
const deleteDataQuery = () => {
|
||||
setShowDeleteConfirmation(true);
|
||||
};
|
||||
|
||||
|
|
@ -141,73 +177,60 @@ export const QueryCard = ({ dataQuery, darkMode = false, localDs }) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!shouldFreeze && isQuerySelected && (
|
||||
<div className="col-auto query-rename-delete-btn">
|
||||
<div
|
||||
className={`col-auto ${(renamingQuery || !hasPermissions) && 'd-none'} rename-query`}
|
||||
onClick={() => setRenamingQuery(true)}
|
||||
>
|
||||
<span className="d-flex" data-tooltip-id="query-card-btn-tooltip" data-tooltip-content="Rename query">
|
||||
<svg
|
||||
data-cy={`edit-query-${dataQuery.name.toLowerCase()}`}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 19 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.7087 1.40712C14.29 0.826221 15.0782 0.499893 15.9 0.499893C16.7222 0.499893 17.5107 0.82651 18.0921 1.40789C18.6735 1.98928 19.0001 2.7778 19.0001 3.6C19.0001 4.42197 18.6737 5.21028 18.0926 5.79162C18.0924 5.79178 18.0928 5.79145 18.0926 5.79162L16.8287 7.06006C16.7936 7.11191 16.753 7.16118 16.7071 7.20711C16.6621 7.25215 16.6138 7.292 16.563 7.32665L9.70837 14.2058C9.52073 14.3942 9.26584 14.5 9 14.5H6C5.44772 14.5 5 14.0523 5 13.5V10.5C5 10.2342 5.10585 9.97927 5.29416 9.79163L12.1733 2.93697C12.208 2.88621 12.2478 2.83794 12.2929 2.79289C12.3388 2.74697 12.3881 2.70645 12.4399 2.67132L13.7079 1.40789C13.7082 1.40763 13.7084 1.40738 13.7087 1.40712ZM13.0112 4.92545L7 10.9153V12.5H8.58474L14.5745 6.48876L13.0112 4.92545ZM15.9862 5.07202L14.428 3.51376L15.1221 2.82211C15.3284 2.6158 15.6082 2.49989 15.9 2.49989C16.1918 2.49989 16.4716 2.6158 16.6779 2.82211C16.8842 3.02842 17.0001 3.30823 17.0001 3.6C17.0001 3.89177 16.8842 4.17158 16.6779 4.37789L15.9862 5.07202ZM0.87868 5.37868C1.44129 4.81607 2.20435 4.5 3 4.5H4C4.55228 4.5 5 4.94772 5 5.5C5 6.05228 4.55228 6.5 4 6.5H3C2.73478 6.5 2.48043 6.60536 2.29289 6.79289C2.10536 6.98043 2 7.23478 2 7.5V16.5C2 16.7652 2.10536 17.0196 2.29289 17.2071C2.48043 17.3946 2.73478 17.5 3 17.5H12C12.2652 17.5 12.5196 17.3946 12.7071 17.2071C12.8946 17.0196 13 16.7652 13 16.5V15.5C13 14.9477 13.4477 14.5 14 14.5C14.5523 14.5 15 14.9477 15 15.5V16.5C15 17.2957 14.6839 18.0587 14.1213 18.6213C13.5587 19.1839 12.7957 19.5 12 19.5H3C2.20435 19.5 1.44129 19.1839 0.87868 18.6213C0.31607 18.0587 0 17.2957 0 16.5V7.5C0 6.70435 0.31607 5.94129 0.87868 5.37868Z"
|
||||
fill="#11181C"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`col-auto rename-query ${!hasPermissions && 'd-none'}`}
|
||||
onClick={() => debouncedDuplicateQuery(dataQuery?.id, appId)}
|
||||
>
|
||||
<span className="d-flex" data-tooltip-id="query-card-btn-tooltip" data-tooltip-content="Duplicate query">
|
||||
<Copy height={16} width={16} viewBox="0 5 20 20" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
{isDeletingQueryInProcess ? (
|
||||
<div className="px-2">
|
||||
<div className="text-center spinner-border spinner-border-sm" role="status"></div>
|
||||
</div>
|
||||
) : (
|
||||
<span
|
||||
className={`delete-query ${!hasPermissions && 'd-none'}`}
|
||||
onClick={deleteDataQuery}
|
||||
data-tooltip-id="query-card-btn-tooltip"
|
||||
data-tooltip-content="Delete query"
|
||||
>
|
||||
<span className="d-flex">
|
||||
<svg
|
||||
data-cy={`delete-query-${dataQuery.name.toLowerCase()}`}
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 18 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div className={`col-auto query-rename-delete-btn ${!shouldFreeze && isQuerySelected ? 'd-flex' : 'd-none'}`}>
|
||||
<OverlayTrigger
|
||||
trigger={'click'}
|
||||
placement={'bottom-start'}
|
||||
rootClose
|
||||
onHide={() => setShowQueryMenu(false)}
|
||||
show={showQueryMenu && isQuerySelected}
|
||||
popperConfig={{
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 3],
|
||||
},
|
||||
},
|
||||
],
|
||||
}}
|
||||
overlay={
|
||||
<Popover id="list-menu" className={darkMode && 'dark-theme'}>
|
||||
<Popover.Body bsPrefix="list-item-popover-body">
|
||||
{QUERY_MENU_OPTIONS.map((option) => (
|
||||
<div
|
||||
data-cy={`query-menu-${String(option?.value).toLowerCase()}-button`}
|
||||
className="list-item-popover-option"
|
||||
key={option?.value}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleQueryMenuActions(option.value);
|
||||
}}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H11C11.5304 0 12.0391 0.210714 12.4142 0.585786C12.7893 0.960859 13 1.46957 13 2V4H15.9883C15.9953 3.99993 16.0024 3.99993 16.0095 4H17C17.5523 4 18 4.44772 18 5C18 5.55228 17.5523 6 17 6H16.9201L15.9997 17.0458C15.9878 17.8249 15.6731 18.5695 15.1213 19.1213C14.5587 19.6839 13.7957 20 13 20H5C4.20435 20 3.44129 19.6839 2.87868 19.1213C2.32687 18.5695 2.01223 17.8249 2.00035 17.0458L1.07987 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H1.99054C1.9976 3.99993 2.00466 3.99993 2.0117 4H5V2C5 1.46957 5.21071 0.960859 5.58579 0.585786ZM3.0868 6L3.99655 16.917C3.99885 16.9446 4 16.9723 4 17C4 17.2652 4.10536 17.5196 4.29289 17.7071C4.48043 17.8946 4.73478 18 5 18H13C13.2652 18 13.5196 17.8946 13.7071 17.7071C13.8946 17.5196 14 17.2652 14 17C14 16.9723 14.0012 16.9446 14.0035 16.917L14.9132 6H3.0868ZM11 4H7V2H11V4ZM6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289L9 10.5858L10.2929 9.29289C10.6834 8.90237 11.3166 8.90237 11.7071 9.29289C12.0976 9.68342 12.0976 10.3166 11.7071 10.7071L10.4142 12L11.7071 13.2929C12.0976 13.6834 12.0976 14.3166 11.7071 14.7071C11.3166 15.0976 10.6834 15.0976 10.2929 14.7071L9 13.4142L7.70711 14.7071C7.31658 15.0976 6.68342 15.0976 6.29289 14.7071C5.90237 14.3166 5.90237 13.6834 6.29289 13.2929L7.58579 12L6.29289 10.7071Z"
|
||||
fill="#DB4324"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Tooltip id="query-card-btn-tooltip" className="tooltip" />
|
||||
</div>
|
||||
)}
|
||||
<div className="list-item-popover-menu-option-icon">{option.icon}</div>
|
||||
<div
|
||||
className={classNames('list-item-option-menu-label', {
|
||||
'color-tomato9': option.value === 'delete',
|
||||
})}
|
||||
>
|
||||
{option?.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Popover.Body>
|
||||
</Popover>
|
||||
}
|
||||
>
|
||||
<ButtonComponent
|
||||
iconOnly
|
||||
leadingIcon="morevertical01"
|
||||
onClick={() => setShowQueryMenu(!showQueryMenu)}
|
||||
size="small"
|
||||
variant="outline"
|
||||
className=""
|
||||
/>
|
||||
</OverlayTrigger>
|
||||
</div>
|
||||
</div>
|
||||
<Confirm
|
||||
show={showDeleteConfirmation}
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@ $border-radius: 4px;
|
|||
}
|
||||
|
||||
.query-row:hover .query-rename-delete-btn {
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.query-row {
|
||||
|
|
@ -188,12 +188,10 @@ $border-radius: 4px;
|
|||
}
|
||||
|
||||
.query-rename-delete-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-left: 2px;
|
||||
width: 66px;
|
||||
width: 22px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
21
frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx
Normal file
21
frontend/src/_ui/Icon/solidIcons/MoreVertical01.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
|
||||
const MoreVertical01 = ({ fill = '#11181C', width = '12', height = '13', className = '', viewBox = '0 0 12 13' }) => (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.00354 2.53516C5.00354 1.98287 5.45126 1.53516 6.00354 1.53516C6.55582 1.53516 7.00354 1.98287 7.00354 2.53516C7.00354 3.08744 6.55582 3.53516 6.00354 3.53516C5.45126 3.53516 5.00354 3.08744 5.00354 2.53516ZM5.00354 6.03516C5.00354 5.48287 5.45126 5.03516 6.00354 5.03516C6.55582 5.03516 7.00354 5.48287 7.00354 6.03516C7.00354 6.58744 6.55582 7.03516 6.00354 7.03516C5.45126 7.03516 5.00354 6.58744 5.00354 6.03516ZM5.00354 9.53516C5.00354 8.98287 5.45126 8.53516 6.00354 8.53516C6.55582 8.53516 7.00354 8.98287 7.00354 9.53516C7.00354 10.0874 6.55582 10.5352 6.00354 10.5352C5.45126 10.5352 5.00354 10.0874 5.00354 9.53516Z"
|
||||
fill={fill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default MoreVertical01;
|
||||
|
|
@ -236,6 +236,7 @@ import WorkflowV3 from './WorkflowV3.jsx';
|
|||
import WorkspaceV3 from './WorkspaceV3.jsx';
|
||||
import EnterpriseCrown from './EnterrpiseCrown.jsx';
|
||||
import Moon from './Moon.jsx';
|
||||
import MoreVertical01 from './MoreVertical01.jsx';
|
||||
|
||||
const Icon = (props) => {
|
||||
switch (props.name) {
|
||||
|
|
@ -713,6 +714,8 @@ const Icon = (props) => {
|
|||
return <Play01 {...props} />;
|
||||
case 'moon':
|
||||
return <Moon {...props} />;
|
||||
case 'morevertical01':
|
||||
return <MoreVertical01 {...props} />;
|
||||
default:
|
||||
return <Apps {...props} />;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue