codekingpro/portable-devtools

1import React, {useEffect, useMemo, useState } from 'react';2import AppMenuBar from './AppMenuBar';3import ObjectBreadcrumbs from './components/ObjectBreadcrumbs';4import Layout, { LayoutDocker, getDefaultGroup } from './helpers/Layout';5import gettext from 'sources/gettext';6import ObjectExplorer from './tree/ObjectExplorer';7import Properties from '../../misc/properties/Properties';8import SQL from '../../misc/sql/static/js/SQL';9import Statistics from '../../misc/statistics/static/js/Statistics';10import { BROWSER_PANELS } from '../../browser/static/js/constants';11import Dependencies from '../../misc/dependencies/static/js/Dependencies';12import Dependents from '../../misc/dependents/static/js/Dependents';13import UtilityView from './UtilityView';14import ModalProvider from './helpers/ModalProvider';15import { NotifierProvider } from './helpers/Notifier';16import ToolView from './ToolView';17import ObjectExplorerToolbar from './helpers/ObjectExplorerToolbar';18import MainMoreToolbar from './helpers/MainMoreToolbar';19import Dashboard from '../../dashboard/static/js/Dashboard';20import usePreferences from '../../preferences/static/js/store';21import { getBrowser } from './utils';22import PropTypes from 'prop-types';23import Processes from '../../misc/bgprocess/static/js/Processes';24 25 26const objectExplorerGroup  = {27  tabLocked: true,28  floatable: false,29  panelExtra: () => <ObjectExplorerToolbar />30};31 32const mainPanelGroup  = {33  ...getDefaultGroup(),34  panelExtra: () => <MainMoreToolbar />35};36 37export const processesPanelData = {38  id: BROWSER_PANELS.PROCESSES, title: gettext('Processes'), content: <Processes />, closable: true, group: 'playground'39};40 41export const defaultTabsData = [42  {43    id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: <Dashboard />, closable: true, group: 'playground'44  },45  {46    id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: <Properties />, closable: true, group: 'playground'47  },48  {49    id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: <SQL />, closable: true, group: 'playground'50  },51  {52    id: BROWSER_PANELS.STATISTICS, title: gettext('Statistics'), content: <Statistics />, closable: true, group: 'playground'53  },54  {55    id: BROWSER_PANELS.DEPENDENCIES, title: gettext('Dependencies'), content: <Dependencies />, closable: true, group: 'playground'56  },57  {58    id: BROWSER_PANELS.DEPENDENTS, title: gettext('Dependents'), content: <Dependents />, closable: true, group: 'playground'59  },60  processesPanelData,61];62 63 64export default function BrowserComponent({pgAdmin}) {65  let defaultLayout = {66    dockbox: {67      mode: 'vertical',68      children: [69        {70          mode: 'horizontal',71          children: [72            {73              size: 20,74              tabs: [75                LayoutDocker.getPanel({76                  id: BROWSER_PANELS.OBJECT_EXPLORER, title: gettext('Object Explorer'),77                  content: <ObjectExplorer />, group: 'object-explorer'78                }),79              ],80            },81            {82              size: 80,83              id: BROWSER_PANELS.MAIN,84              group: 'playground',85              tabs: defaultTabsData.map((t)=>LayoutDocker.getPanel(t)),86              panelLock: {panelStyle: 'playground'},87            }88          ]89        },90      ]91    },92  };93  const {isLoading, failed} = usePreferences();94  let { name: browser } = useMemo(()=>getBrowser(), []);95  const [uiReady, setUiReady] = useState(false);96 97  useEffect(()=>{98    if(uiReady) {99      pgAdmin?.Browser?.uiloaded?.();100    }101  }, [uiReady]);102 103  if(isLoading) {104    return <></>;105  }106  if(failed) {107    return <>Failed to load preferences</>;108  }109 110  return (111    <PgAdminContext.Provider value={pgAdmin}>112      <ModalProvider>113        <NotifierProvider pgAdmin={pgAdmin} onReady={()=>setUiReady(true)}/>114        {browser != 'Nwjs' && <AppMenuBar />}115        <div style={{height: (browser != 'Nwjs' ? 'calc(100% - 30px)' : '100%')}}>116          <Layout117            getLayoutInstance={(obj)=>{118              pgAdmin.Browser.docker = obj;119            }}120            defaultLayout={defaultLayout}121            layoutId='Browser/Layout'122            savedLayout={pgAdmin.Browser.utils.layout}123            groups={{124              'object-explorer': objectExplorerGroup,125              'playground': mainPanelGroup,126            }}127            noContextGroups={['object-explorer']}128            resetToTabPanel={BROWSER_PANELS.MAIN}129          />130        </div>131        <UtilityView />132        <ToolView />133      </ModalProvider>134      <ObjectBreadcrumbs pgAdmin={pgAdmin} />135    </PgAdminContext.Provider>136  );137}138 139BrowserComponent.propTypes = {140  pgAdmin: PropTypes.object,141};142 143export const PgAdminContext = React.createContext();144 145export function usePgAdmin() {146  const pgAdmin = React.useContext(PgAdminContext);147  return pgAdmin;148}149