codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import React, { useCallback, useContext, useEffect, useState } from 'react';11 12import { Box } from '@mui/material';13import { makeStyles } from '@mui/styles';14import FormatIndentIncreaseIcon from '@mui/icons-material/FormatIndentIncrease';15import FormatIndentDecreaseIcon from '@mui/icons-material/FormatIndentDecrease';16import PlayCircleFilledWhiteIcon from '@mui/icons-material/PlayCircleFilledWhite';17import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';18import NotInterestedIcon from '@mui/icons-material/NotInterested';19import StopIcon from '@mui/icons-material/Stop';20import HelpIcon from '@mui/icons-material/HelpRounded';21import RotateLeftRoundedIcon from '@mui/icons-material/RotateLeftRounded';22 23import gettext from 'sources/gettext';24import { shortcut_key } from 'sources/keyboard_shortcuts';25import url_for from 'sources/url_for';26 27import { PgButtonGroup, PgIconButton } from '../../../../../static/js/components/Buttons';28import { DebuggerContext, DebuggerEventsContext } from './DebuggerComponent';29import { DEBUGGER_EVENTS, MENUS } from '../DebuggerConstants';30 31const useStyles = makeStyles((theme) => ({32  root: {33    padding: '2px 4px',34    display: 'flex',35    alignItems: 'center',36    gap: '4px',37    backgroundColor: theme.otherVars.editorToolbarBg,38    flexWrap: 'wrap',39    ...theme.mixins.panelBorder.bottom,40  },41}));42 43export function ToolBar() {44  const classes = useStyles();45  const debuggerCtx = useContext(DebuggerContext);46  const eventBus = useContext(DebuggerEventsContext);47  let preferences = debuggerCtx.preferences.debugger;48 49  // JS not allowing to use constants as key hence unable to use MENUS constants,50  // If required any changes in key update MENUS constans as well form DebuggerConstans file.51  const [buttonsDisabled, setButtonsDisabled] = useState({52    'stop': true,53    'clear-all-breakpoints': true,54    'toggle-breakpoint': true,55    'start': true,56    'step-over': true,57    'step-into': true,58  });59 60  const setDisableButton = useCallback((name, disable = true) => {61    setButtonsDisabled((prev) => ({ ...prev, [name]: disable }));62  }, []);63 64  const clearAllBreakpoint = useCallback(() => {65    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_CLEAR_ALL_BREAKPOINTS);66  }, []);67 68  const toggleBreakpoint = useCallback(() => {69    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_TOGGLE_BREAKPOINTS);70  }, []);71 72  const stop = useCallback(() => {73    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_STOP_DEBUGGING);74  });75 76  const continueDebugger = useCallback(() => {77    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_CONTINUE_DEBUGGING);78  });79 80 81  const stepOverDebugger = useCallback(() => {82    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_STEPOVER_DEBUGGING);83  });84 85  const stepInTODebugger = useCallback(() => {86    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_STEINTO_DEBUGGING);87  });88 89  const onHelpClick=()=>{90    let url = url_for('help.static', {'filename': 'debugger.html'});91    window.open(url, 'pgadmin_help');92  };93 94  const onResetLayout=() => {95    eventBus.fireEvent(DEBUGGER_EVENTS.TRIGGER_RESET_LAYOUT);96  };97 98  useEffect(() => {99    eventBus.registerListener(DEBUGGER_EVENTS.DISABLE_MENU, () => {100      setDisableButton(MENUS.START, true);101      setDisableButton(MENUS.STEPINTO, true);102      setDisableButton(MENUS.STEPOVER, true);103      setDisableButton(MENUS.CLEAR_ALL_BREAKPOINT, true);104      setDisableButton(MENUS.TOGGLE_BREAKPOINT, true);105      setDisableButton(MENUS.STOP, true);106    });107 108    eventBus.registerListener(DEBUGGER_EVENTS.ENABLE_MENU, () => {109      setDisableButton(MENUS.START, false);110      setDisableButton(MENUS.STEPINTO, false);111      setDisableButton(MENUS.STEPOVER, false);112      setDisableButton(MENUS.CLEAR_ALL_BREAKPOINT, false);113      setDisableButton(MENUS.TOGGLE_BREAKPOINT, false);114      setDisableButton(MENUS.STOP, false);115    });116 117    eventBus.registerListener(DEBUGGER_EVENTS.ENABLE_SPECIFIC_MENU, (key) => {118      setDisableButton(key, false);119    });120  }, []);121 122 123  return (124    <Box className={classes.root}>125      <PgButtonGroup size="small">126        <PgIconButton data-test='step-in' title={gettext('Step into')} disabled={buttonsDisabled[MENUS.STEPINTO]} icon={<FormatIndentIncreaseIcon />} onClick={() => { stepInTODebugger(); }}127          accesskey={shortcut_key(preferences?.btn_step_into)} />128        <PgIconButton data-test='step-over' title={gettext('Step over')} disabled={buttonsDisabled[MENUS.STEPOVER]} icon={<FormatIndentDecreaseIcon />} onClick={() => { stepOverDebugger(); }}129          accesskey={shortcut_key(preferences?.btn_step_over)} />130        <PgIconButton data-test='debugger-contiue' title={gettext('Continue/Start')} disabled={buttonsDisabled[MENUS.START]} icon={<PlayCircleFilledWhiteIcon />} onClick={() => { continueDebugger(); }}131          accesskey={shortcut_key(preferences?.btn_start)} />132      </PgButtonGroup>133      <PgButtonGroup size="small">134        <PgIconButton data-test='toggle-breakpoint' title={gettext('Toggle breakpoint')} disabled={buttonsDisabled[MENUS.TOGGLE_BREAKPOINT]} icon={<FiberManualRecordIcon style={{height: '2rem'}} />}135          accesskey={shortcut_key(preferences?.btn_toggle_breakpoint)} onClick={() => { toggleBreakpoint(); }} />136        <PgIconButton data-test='clear-breakpoint' title={gettext('Clear all breakpoints')} disabled={buttonsDisabled[MENUS.CLEAR_ALL_BREAKPOINT]} icon={<NotInterestedIcon />}137          accesskey={shortcut_key(preferences?.btn_clear_breakpoints)} onClick={() => {138            clearAllBreakpoint();139          }} />140      </PgButtonGroup>141      <PgButtonGroup size="small">142        <PgIconButton data-test='stop-debugger' title={gettext('Stop')} icon={<StopIcon style={{height: '2rem'}} />} disabled={buttonsDisabled[MENUS.STOP]} onClick={() => { stop(); }}143          accesskey={shortcut_key(preferences?.btn_stop)} />144      </PgButtonGroup>145      <PgButtonGroup size="small">146        <PgIconButton data-test='debugger-help' title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />147      </PgButtonGroup>148      <PgButtonGroup size="small" variant="text" style={{marginLeft: 'auto'}}>149        <PgIconButton title={gettext('Reset layout')} icon={<RotateLeftRoundedIcon />}150          onClick={onResetLayout} />151      </PgButtonGroup>152    </Box>153  );154}155