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
2024-12-15 01:12:56 +03:00 · 2023-04-11 15:18:49 +05:30 · 2023-04-11 15:18:49 +05:30 · 51afe114a5
commit 51afe114a5
parent 4696b60ec7
14 changed files with 477 additions and 469 deletions
--- a/frontend/libs/console/legacy-ce/src/index.ts
+++ b/frontend/libs/console/legacy-ce/src/index.ts
@ -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';
--- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/TableBrowseRows/ViewRows.js
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Data/TableBrowseRows/ViewRows.js
@ -164,7 +164,7 @@ const ViewRows = props => {
      Header: '',
      accessor: 'tableRowActionButtons',
      id: 'tableRowActionButtons',
-      width: 182,
+      width: 'auto',
    });

    _gridHeadings.push({
--- a/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js
+++ b/frontend/libs/console/legacy-ce/src/lib/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js
@ -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>
    );
  }
--- a/frontend/libs/console/legacy-ce/src/lib/new-components/Dialog/Dialog.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/new-components/Dialog/Dialog.tsx
@ -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;
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/CustomCopy.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/CustomCopy.js
@ -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>
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/DatePickerModal.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/DatePickerModal.js
@ -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>
  );
 };

--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/Modal.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/Modal.js
@ -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>
  );
 };

--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/UsageInspectModal.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Common/UsageInspectModal.js
@ -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>
  );
 };

--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Metrics.module.scss
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/Metrics.module.scss
@ -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;
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/EditRow.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/EditRow.js
@ -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>
  );
 };
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/RunTests.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/RunTests.js
@ -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}
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/TestRunDetails.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/RegressionTests/TestRunDetails.js
@ -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>
  );
 };

--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/SubscriptionWorkers/ErrorModal.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/SubscriptionWorkers/ErrorModal.js
@ -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>
  );
 };
--- a/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/SubscriptionWorkers/Modal.js
+++ b/frontend/libs/console/legacy-ee/src/lib/components/Services/Metrics/SubscriptionWorkers/Modal.js
@ -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>
  );
 };