DialogContent() — react Function Reference

Architecture documentation for the DialogContent() function in UnsupportedBridgeProtocolDialog.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ DialogContent() — react Function Reference

Dependency Diagram

graph TD
  e9035865_9326_383c_bf4a_d2a205ffa026["DialogContent()"]
  18ec4422_530f_c966_12b1_68446a69be22["UnsupportedBridgeProtocolDialog.js"]
  e9035865_9326_383c_bf4a_d2a205ffa026 -->|defined in| 18ec4422_530f_c966_12b1_68446a69be22
  style e9035865_9326_383c_bf4a_d2a205ffa026 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js lines 68–145

function DialogContent({
  unsupportedBridgeProtocol,
}: {
  unsupportedBridgeProtocol: BridgeProtocol,
}) {
  const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol;

  let instructions;
  if (maxNpmVersion === null) {
    const upgradeInstructions = `npm i -g react-devtools@^${minNpmVersion}`;
    instructions = (
      <>
        <p className={styles.Paragraph}>
          To fix this, upgrade the DevTools NPM package:
        </p>
        <pre className={styles.NpmCommand}>
          {upgradeInstructions}
          <Button
            onClick={withPermissionsCheck(
              {permissions: ['clipboardWrite']},
              () => copy(upgradeInstructions),
            )}
            title="Copy upgrade command to clipboard">
            <ButtonIcon type="copy" />
          </Button>
        </pre>
      </>
    );
  } else {
    const downgradeInstructions = `npm i -g react-devtools@${maxNpmVersion}`;
    instructions = (
      <>
        <p className={styles.Paragraph}>
          To fix this, downgrade the DevTools NPM package:
        </p>
        <pre className={styles.NpmCommand}>
          {downgradeInstructions}
          <Button
            onClick={withPermissionsCheck(
              {permissions: ['clipboardWrite']},
              () => copy(downgradeInstructions),
            )}
            title="Copy downgrade command to clipboard">
            <ButtonIcon type="copy" />
          </Button>
        </pre>
      </>
    );
  }

  return (
    <Fragment>
      <div className={styles.Column}>
        <div className={styles.Title}>Unsupported DevTools backend version</div>
        <p className={styles.Paragraph}>
          You are running <code>react-devtools</code> version{' '}
          <span className={styles.Version}>{DEVTOOLS_VERSION}</span>.
        </p>
        <p className={styles.Paragraph}>
          This requires bridge protocol{' '}
          <span className={styles.Version}>
            version {currentBridgeProtocol.version}
          </span>
          . However the current backend version uses bridge protocol{' '}
          <span className={styles.Version}>version {version}</span>.
        </p>
        {instructions}
        <p className={styles.Paragraph}>
          Or{' '}
          <a className={styles.Link} href={INSTRUCTIONS_FB_URL} target="_blank">
            click here
          </a>{' '}
          for more information.
        </p>
      </div>
    </Fragment>
  );
}