diff --git a/src/lib/querybuilder/panel/QueryBuilderNav.tsx b/src/lib/querybuilder/panel/QueryBuilderNav.tsx index c1499855b79deecbfeb93babbebee2a88b5bc894..d1ecff2212fe6a49f9995069136ed3b019dea52a 100644 --- a/src/lib/querybuilder/panel/QueryBuilderNav.tsx +++ b/src/lib/querybuilder/panel/QueryBuilderNav.tsx @@ -210,21 +210,40 @@ export const QueryBuilderNav = (props: QueryBuilderNavProps) => { </div> )} {ss.queryStates.openQueryArray.filter(query => query.id != null).length > 1 && ( - <Button - variantType="secondary" - variant="ghost" - disabled={!ss?.authorization.database?.W} - rounded - size="3xs" - iconComponent="icon-[ic--baseline-close]" - onClick={e => { - e.stopPropagation(); - if (query.id !== undefined) { - wsDeleteQuery({ saveStateID: ss.id, queryID: query.id }); - dispatch(removeQueryByID(query.id)); - } - }} - /> + <Popover placement="bottom"> + <PopoverTrigger> + <Button + variantType="secondary" + variant="ghost" + disabled={!ss?.authorization.database?.W} + className={ + query.id == ss.queryStates.activeQueryId + ? '' + : 'opacity-50 group-hover:opacity-100 group-focus-within:opacity-100' + } + rounded + size="3xs" + iconComponent="icon-[ic--baseline-close]" + /> + </PopoverTrigger> + <PopoverContent className="p-2 text-sm"> + <p className="pb-1">Are you sure?</p> + <Button + variantType="danger" + variant="solid" + size="xs" + onClick={e => { + e.stopPropagation(); + if (query.id !== undefined) { + wsDeleteQuery({ saveStateID: ss.id, queryID: query.id }); + dispatch(removeQueryByID(query.id)); + } + }} + > + Yes, remove + </Button> + </PopoverContent> + </Popover> )} </> </Tab>