mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 01:12:56 +03:00
frontend: fix react-bootstrap modal with radix modal
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8706 Co-authored-by: Varun Choudhary <68095256+Varun-Choudhary@users.noreply.github.com> Co-authored-by: Vijay Prasanna <11921040+vijayprasanna13@users.noreply.github.com> GitOrigin-RevId: 7b6db44363bd797d1af00517d6a7b2ef6471fff7
This commit is contained in:
parent
4696b60ec7
commit
51afe114a5
@ -84,6 +84,7 @@ export { default as PageNotFound } from './lib/components/Error/PageNotFound';
|
||||
export * from './lib/new-components/Button/';
|
||||
export * from './lib/new-components/Tooltip/';
|
||||
export * from './lib/new-components/Badge/';
|
||||
export * from './lib/new-components/Dialog';
|
||||
export { default as dataHeaders } from './lib/components/Services/Data/Common/Headers';
|
||||
export { handleMigrationErrors } from './lib/components/Services/Data/TableModify/ModifyActions';
|
||||
export { loadMigrationStatus } from './lib/components/Main/Actions';
|
||||
|
@ -164,7 +164,7 @@ const ViewRows = props => {
|
||||
Header: '',
|
||||
accessor: 'tableRowActionButtons',
|
||||
id: 'tableRowActionButtons',
|
||||
width: 182,
|
||||
width: 'auto',
|
||||
});
|
||||
|
||||
_gridHeadings.push({
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Modal from 'react-bootstrap/lib/Modal';
|
||||
import { Dialog } from '../../../../../new-components/Dialog';
|
||||
import AceEditor from 'react-ace';
|
||||
import { connect } from 'react-redux';
|
||||
//TODO: check
|
||||
@ -99,7 +99,7 @@ class InvokeManualTrigger extends React.PureComponent {
|
||||
}
|
||||
return (
|
||||
<div className="flex">
|
||||
<div className={`pl-0 w-1/2`}>
|
||||
<div className={`pl-0 w-1/2 mr-sm`}>
|
||||
<div> Request </div>
|
||||
<AceEditor
|
||||
mode="json"
|
||||
@ -155,22 +155,21 @@ class InvokeManualTrigger extends React.PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!isModalOpen) return null;
|
||||
|
||||
return (
|
||||
<div key={identifier}>
|
||||
<Modal
|
||||
show={isModalOpen}
|
||||
style={{
|
||||
minHeight: '100px',
|
||||
}}
|
||||
onHide={this.onModalClose}
|
||||
dialogClassName="w-3/4"
|
||||
<Dialog
|
||||
onClose={this.onModalClose}
|
||||
id="invokeEventTrigger"
|
||||
title={`Invoking ${name}`}
|
||||
className="min-h-[100px]"
|
||||
size="xxxl"
|
||||
hasBackdrop
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>Invoking {name}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>{getEventData()}</Modal.Body>
|
||||
</Modal>
|
||||
<div className="p-md ">{getEventData()}</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -107,13 +107,15 @@ export type DialogProps = {
|
||||
onClose?: () => void;
|
||||
footer?: FooterProps | React.ReactElement;
|
||||
size?: DialogSize;
|
||||
portal?: boolean;
|
||||
// provides a way to add styles to the div wrapping the
|
||||
contentContainer?: {
|
||||
className?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const Dialog = ({
|
||||
const DialogChildren = (props: DialogProps) => {
|
||||
const {
|
||||
children,
|
||||
hasBackdrop,
|
||||
title,
|
||||
@ -123,8 +125,10 @@ export const Dialog = ({
|
||||
footer,
|
||||
size = 'md',
|
||||
contentContainer,
|
||||
}: DialogProps) => (
|
||||
<RadixDialog.Root open>
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasBackdrop && <Backdrop />}
|
||||
<RadixDialog.Content
|
||||
className={clsx(
|
||||
@ -165,7 +169,23 @@ export const Dialog = ({
|
||||
{React.isValidElement(footer) && footer}
|
||||
{footer && !React.isValidElement(footer) && <Footer {...footer} />}
|
||||
</RadixDialog.Content>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const Dialog = (props: DialogProps) => {
|
||||
const { portal = false } = props;
|
||||
return (
|
||||
<RadixDialog.Root open>
|
||||
{portal ? (
|
||||
<RadixDialog.Portal>
|
||||
<DialogChildren {...props} />
|
||||
</RadixDialog.Portal>
|
||||
) : (
|
||||
<DialogChildren {...props} />
|
||||
)}
|
||||
</RadixDialog.Root>
|
||||
);
|
||||
};
|
||||
|
||||
Dialog.Footer = Footer;
|
||||
|
@ -32,7 +32,7 @@ const CustomCopy = ({ label, copy, onEdit }) => {
|
||||
<React.Fragment>
|
||||
<div className={styles.infoWrapper}>
|
||||
<div className={styles.information}>
|
||||
{label}:
|
||||
<span>{label}:</span>
|
||||
<span>
|
||||
{onEdit && (
|
||||
<EditIcon
|
||||
@ -47,7 +47,7 @@ const CustomCopy = ({ label, copy, onEdit }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.boxwrapper + ' ' + styles.errorBox}>
|
||||
<div className={styles.box}>
|
||||
<div className={`p-xs overflow-auto ${styles.box}`}>
|
||||
<code className={styles.queryCode}>
|
||||
<pre style={{ whitespace: 'pre-wrap' }}>{copy}</pre>
|
||||
</code>
|
||||
|
@ -1,6 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
// import BootstrapModalButton from 'react-bootstrap/lib/Button';
|
||||
import { useState } from 'react';
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
// import DatePicker from 'react-datepicker';
|
||||
// import 'react-datepicker/dist/react-datepicker.css';
|
||||
import { DateRangePicker } from 'react-date-range';
|
||||
@ -40,19 +39,24 @@ const DatePickerModal = props => {
|
||||
};
|
||||
}
|
||||
*/
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
<Dialog
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
id="dateModal"
|
||||
onHide={onHide}
|
||||
show={show}
|
||||
className={clsx(styles.datePickerModalWrapper, '!pointer-events-auto')}
|
||||
onClose={onHide}
|
||||
title="Custom Date"
|
||||
portal
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
styles.datePickerModalWrapper,
|
||||
'!pointer-events-auto',
|
||||
'p-sm'
|
||||
)}
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Custom Date
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body>
|
||||
<div className={styles.datePickerContainer}>
|
||||
<div className={styles.datePickerWrapper}>
|
||||
{/*
|
||||
@ -97,8 +101,8 @@ const DatePickerModal = props => {
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,7 +1,5 @@
|
||||
import React from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
// import BootstrapModalButton from 'react-bootstrap/lib/Button';
|
||||
import CustomCopy from './CustomCopy';
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
|
||||
import { transformedVals } from '../Operations/utils';
|
||||
import styles from '../Metrics.module.scss';
|
||||
@ -214,21 +212,16 @@ const Modal = props => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
<Dialog
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
onClose={onHide}
|
||||
hasBackdrop
|
||||
size="xxxl"
|
||||
title="Inspect"
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Inspect
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body
|
||||
className={styles.modalContainer}
|
||||
style={{ maxHeight: '986px' }}
|
||||
<div className={styles.modalWrapper}>
|
||||
<div
|
||||
className={`mt-2 border border-top overflow-auto ${styles.modalContainer}`}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
@ -270,12 +263,15 @@ const Modal = props => {
|
||||
TRANSPORT: <span>{transport}</span>
|
||||
</div>
|
||||
{transport === 'ws' ? (
|
||||
<div className={styles.borderBottom + ' ' + styles.paddingTop}>
|
||||
<div
|
||||
className={styles.borderBottom + ' ' + styles.paddingTop}
|
||||
>
|
||||
<div className={styles.information}>
|
||||
WEBSOCKET ID: <span>{websocketId}</span>
|
||||
</div>
|
||||
<div className={styles.information}>
|
||||
WEBSOCKET OPERATION ID: <span>{websocketOperationId}</span>
|
||||
WEBSOCKET OPERATION ID:{' '}
|
||||
<span>{websocketOperationId}</span>
|
||||
</div>
|
||||
{operationType === 'subscription' ? (
|
||||
<div className={styles.information}>
|
||||
@ -327,7 +323,9 @@ const Modal = props => {
|
||||
{trace && trace?.length && <TraceGraph trace={trace} />}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles.information} ${styles.addPaddBottom}`}>
|
||||
<div
|
||||
className={`${styles.information} ${styles.addPaddBottom}`}
|
||||
>
|
||||
REQUEST SIZE:{' '}
|
||||
<span>
|
||||
{(transformedVals.hasOwnProperty('request_size') &&
|
||||
@ -349,7 +347,7 @@ const Modal = props => {
|
||||
{renderError()}
|
||||
{renderResponseAnalysis()}
|
||||
</div>
|
||||
<div className={styles.noPadd + ' col-md-6'}>
|
||||
<div className={`overflow-auto ${styles.noPadd} col-md-6`}>
|
||||
{renderOperationQuery()}
|
||||
{renderGeneratedSql()}
|
||||
{renderRequestHeaders()}
|
||||
@ -365,8 +363,9 @@ const Modal = props => {
|
||||
</div>
|
||||
*/}
|
||||
</div>
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useQuery } from '@apollo/react-hooks';
|
||||
import { Link } from 'react-router';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
import { Button } from '@hasura/console-legacy-ce';
|
||||
import CustomCopy from './CustomCopy';
|
||||
|
||||
@ -174,19 +174,16 @@ const Modal = props => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
<Dialog
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
id="dateModal"
|
||||
onClose={onHide}
|
||||
title="Inspect"
|
||||
portal
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Inspect
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body className={styles.modalContainer}>
|
||||
<div className={styles.modalWrapper}>
|
||||
<div className={styles.modalContainer}>
|
||||
<div className={styles.noPadd + ' col-md-6 ' + styles.borderRight}>
|
||||
<div className={styles.infoWrapper}>
|
||||
<div className={styles.infoField}>
|
||||
@ -225,8 +222,9 @@ const Modal = props => {
|
||||
{renderGeneratedSql()}
|
||||
</div>
|
||||
*/}
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -785,8 +785,6 @@
|
||||
/* common checkbox */
|
||||
.commonCheckBox,
|
||||
.defaultCheckBox {
|
||||
min-width: 110px;
|
||||
|
||||
input[type='checkbox'] {
|
||||
position: absolute; // take it out of document flow
|
||||
opacity: 0; // hide it
|
||||
@ -873,6 +871,7 @@
|
||||
}
|
||||
.modalWrapper {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
.modalHeader {
|
||||
background-color: #f8f8f8;
|
||||
padding: 19px 32px;
|
||||
|
@ -1,6 +1,5 @@
|
||||
import React, { useState, Fragment } from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
import { Tooltip } from '@hasura/console-legacy-ce';
|
||||
import { useState, Fragment } from 'react';
|
||||
import { Dialog, Tooltip } from '@hasura/console-legacy-ce';
|
||||
import { useMutation } from '@apollo/react-hooks';
|
||||
|
||||
import CustomCopy from '../Common/CustomCopy';
|
||||
@ -101,7 +100,7 @@ const EditRowModal = ({ onHide, show, name, testSuiteId }) => {
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`col-md-6 ${styles.noPadd} ${styles.longCopy} ${styles.paddingBottom}`}
|
||||
className={`col-md-6 ${styles.noPadd} ${styles.longCopy} ${styles.paddingBottom} w-full`}
|
||||
>
|
||||
{isEditing ? (
|
||||
<EditData
|
||||
@ -138,22 +137,19 @@ const EditRowModal = ({ onHide, show, name, testSuiteId }) => {
|
||||
}
|
||||
};
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
<Dialog
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show={show}
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
onClose={onHide}
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
title="Inspect"
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Edit test
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body className={styles.modalContainer}>
|
||||
{renderModalBody()}
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
<div className={styles.modalWrapper}>
|
||||
<div className={styles.modalContainer}>{renderModalBody()}</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React, { useState, Fragment } from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
import { useState, Fragment } from 'react';
|
||||
// import { useMutation } from '@apollo/react-hooks';
|
||||
import { Button } from '@hasura/console-legacy-ce';
|
||||
import { Button, Dialog } from '@hasura/console-legacy-ce';
|
||||
|
||||
import { BrowseRunTests } from './BrowseRunTests';
|
||||
import { BrowseRunTestsPreview } from './BrowseTestRunPreview';
|
||||
@ -165,23 +164,18 @@ const RunTests = props => {
|
||||
Run tests on CLI
|
||||
</Button>
|
||||
</div>
|
||||
<BootstrapModal
|
||||
{showModal && (
|
||||
<Dialog
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show={showModal}
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Run tests from CLI
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body
|
||||
className={`${styles.modalContainer} ${styles.padding20}`}
|
||||
onClose={onHide}
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
title="Run tests from CLI"
|
||||
>
|
||||
<div className={`p-sm ${styles.modalWrapper}`}>
|
||||
<div className={styles.modalContainer}>
|
||||
<div>
|
||||
You can run tests from the CLI also. See{' '}
|
||||
You can run tests from the CLI also. See <br />
|
||||
<a
|
||||
href="https://docs.pro.hasura.io/cli/regression-tests/"
|
||||
target="_blank"
|
||||
@ -194,8 +188,10 @@ const RunTests = props => {
|
||||
<code>
|
||||
{`hasura pro regression-tests run --testsuite-id ${testSuiteId} --project-id ${currentProjectId}`}
|
||||
</code>
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
)}
|
||||
{testRunId ? (
|
||||
<BrowseRunTests
|
||||
testSuiteId={testSuiteId}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useState, Fragment } from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
import { useState, Fragment } from 'react';
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
import { useQuery } from '@apollo/react-hooks';
|
||||
|
||||
import CustomCopy from '../Common/CustomCopy';
|
||||
@ -67,20 +67,18 @@ const TestRunDetailsModal = ({ onHide, show, operationName, testRunId }) => {
|
||||
},
|
||||
});
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
<Dialog
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show={show}
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
onClose={onHide}
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
title="Test details"
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Test details
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body className={styles.modalContainer}>
|
||||
<div className={`p-md ${styles.modalWrapper}`}>
|
||||
<div className={styles.modalContainer}>
|
||||
{loading && <LoadingBody />}
|
||||
{error && <ErrorBody error={error} />}
|
||||
{data && data.test_run_details && data.test_run_details.length && (
|
||||
@ -127,8 +125,9 @@ const TestRunDetailsModal = ({ onHide, show, operationName, testRunId }) => {
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -1,20 +1,23 @@
|
||||
import React from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
import styles from '../Metrics.module.scss';
|
||||
|
||||
import { decodeError } from './utils';
|
||||
|
||||
export const ErrorModal = ({ show, onHide, err }) => {
|
||||
const decodedError = { ...decodeError(err) };
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<BootstrapModal onHide={onHide} show={show} className={styles.modalWrapper}>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Error
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body className={styles.modalContainer}>
|
||||
<Dialog
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
id="dateModal"
|
||||
onClose={onHide}
|
||||
title="Error"
|
||||
portal
|
||||
>
|
||||
<div className={styles.modalWrapper}>
|
||||
<div className={styles.modalContainer}>
|
||||
<div className={`col-md-12 ${styles.addPaddingBottom}`}>
|
||||
<p style={{ padding: '30px 26px 5px 26px' }}>
|
||||
Failed loading config:
|
||||
@ -29,7 +32,8 @@ export const ErrorModal = ({ show, onHide, err }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import BootstrapModal from 'react-bootstrap/lib/Modal';
|
||||
import { Dialog } from '@hasura/console-legacy-ce';
|
||||
import { Tooltip } from '@hasura/console-legacy-ce';
|
||||
// import BootstrapModalButton from 'react-bootstrap/lib/Button';
|
||||
import CustomCopy from '../Common/CustomCopy';
|
||||
import { REFETCH_DELAY, EXECUTION_TIME_DIVIDER_CONSTANT } from './constants';
|
||||
import { hideVariableValues } from '../utils';
|
||||
@ -116,22 +115,15 @@ const Modal = props => {
|
||||
};
|
||||
|
||||
return (
|
||||
<BootstrapModal
|
||||
<Dialog
|
||||
id="operationInspect"
|
||||
onHide={onHide}
|
||||
show
|
||||
size="modal-lg"
|
||||
className={styles.modalWrapper}
|
||||
>
|
||||
<BootstrapModal.Header className={styles.modalHeader} closeButton>
|
||||
<BootstrapModal.Title className={styles.title}>
|
||||
Inspect
|
||||
</BootstrapModal.Title>
|
||||
</BootstrapModal.Header>
|
||||
<BootstrapModal.Body
|
||||
className={styles.modalContainer}
|
||||
style={{ maxHeight: '986px' }}
|
||||
onClose={onHide}
|
||||
hasBackdrop
|
||||
size="xxl"
|
||||
title="Inspect"
|
||||
>
|
||||
<div className={styles.modalWrapper}>
|
||||
<div className={styles.modalContainer}>
|
||||
<div
|
||||
className={
|
||||
styles.noPadd +
|
||||
@ -182,7 +174,7 @@ const Modal = props => {
|
||||
</div>
|
||||
<div>{renderGeneratedSql()}</div>
|
||||
</div>
|
||||
<div className={styles.noPadd + ' col-md-6'}>
|
||||
<div className={`overflow-auto ${styles.noPadd} col-md-6`}>
|
||||
<div className={styles.infoWrapper}>
|
||||
<div className={styles.infoField} style={{ paddingBottom: 0 }}>
|
||||
<div className={styles.information}>
|
||||
@ -200,8 +192,9 @@ const Modal = props => {
|
||||
{renderQueryVariables()}
|
||||
{renderSessionVariables()}
|
||||
</div>
|
||||
</BootstrapModal.Body>
|
||||
</BootstrapModal>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user