108 lines
3.3 KiB
JavaScript
108 lines
3.3 KiB
JavaScript
/////////////////////////////////////////////////////////////
|
|
//
|
|
// pgAdmin 4 - PostgreSQL Tools
|
|
//
|
|
// Copyright (C) 2013 - 2025, The pgAdmin Development Team
|
|
// This software is released under the PostgreSQL Licence
|
|
//
|
|
//////////////////////////////////////////////////////////////
|
|
|
|
import React, { useEffect, useLayoutEffect, useRef } from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { usePgAdmin } from './PgAdminProvider';
|
|
import { BROWSER_PANELS } from '../../browser/static/js/constants';
|
|
import PropTypes from 'prop-types';
|
|
import LayoutIframeTab from './helpers/Layout/LayoutIframeTab';
|
|
import { LAYOUT_EVENTS } from './helpers/Layout';
|
|
import { useApplicationState } from '../../settings/static/ApplicationStateProvider';
|
|
|
|
|
|
function ToolForm({actionUrl, params}) {
|
|
const formRef = useRef(null);
|
|
|
|
useLayoutEffect(()=>{
|
|
formRef.current?.submit();
|
|
}, []);
|
|
|
|
return (
|
|
<form ref={formRef} id="tool-form" action={actionUrl} method="post" hidden>
|
|
{Object.keys(params).map((k)=>{
|
|
return k ? <input key={k} name={k} defaultValue={params[k]} /> : <></>;
|
|
})}
|
|
</form>
|
|
);
|
|
}
|
|
|
|
ToolForm.propTypes = {
|
|
actionUrl: PropTypes.string,
|
|
params: PropTypes.object,
|
|
};
|
|
|
|
export function getToolTabParams(panelId, toolUrl, formParams, tabParams, restore=false) {
|
|
if(tabParams?.internal?.orig_title){
|
|
tabParams.title = tabParams.internal.title;
|
|
}
|
|
return {
|
|
id: panelId,
|
|
title: panelId,
|
|
content: (
|
|
<LayoutIframeTab target={panelId} src={formParams ? undefined : toolUrl}>
|
|
{formParams && <ToolForm actionUrl={toolUrl} params={{...formParams, restore:restore, workSpace: tabParams?.workSpace }}/>}
|
|
</LayoutIframeTab>
|
|
),
|
|
closable: true,
|
|
manualClose: true,
|
|
...tabParams,
|
|
cache: false,
|
|
group: 'playground',
|
|
metaData: {
|
|
toolUrl: toolUrl,
|
|
formParams: formParams,
|
|
tabParams: tabParams,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default function ToolView({dockerObj}) {
|
|
const pgAdmin = usePgAdmin();
|
|
const { deleteToolData } = useApplicationState();
|
|
|
|
useEffect(()=>{
|
|
pgAdmin.Browser.Events.on('pgadmin:tool:show', (panelId, toolUrl, formParams, tabParams, newTab)=>{
|
|
if(newTab) {
|
|
if(formParams) {
|
|
const newWin = window.open('', '_blank');
|
|
const div = newWin.document.createElement('div');
|
|
newWin.document.body.appendChild(div);
|
|
const root = ReactDOM.createRoot(div);
|
|
root.render(
|
|
<ToolForm actionUrl={window.location.origin+toolUrl} params={formParams}/>, div
|
|
);
|
|
} else {
|
|
window.open(toolUrl);
|
|
}
|
|
} else {
|
|
// Handler here will return which layout instance the tool should go in
|
|
// case of workspace layout.
|
|
let handler = pgAdmin.Browser.getDockerHandler?.(panelId, dockerObj);
|
|
const deregisterRemove = handler.docker.eventBus.registerListener(LAYOUT_EVENTS.REMOVE, (closePanelId)=>{
|
|
if(panelId == closePanelId){
|
|
deleteToolData(panelId);
|
|
deregisterRemove();
|
|
}
|
|
});
|
|
|
|
handler.focus();
|
|
handler.docker.openTab(
|
|
getToolTabParams(panelId, toolUrl, formParams, tabParams),
|
|
BROWSER_PANELS.MAIN, 'middle', true
|
|
);
|
|
}
|
|
});
|
|
}, []);
|
|
return <></>;
|
|
}
|
|
ToolView.propTypes = {
|
|
dockerObj: PropTypes.object
|
|
};
|