From 223443c057e64ca04cda5c0f37f5d15daaf69337 Mon Sep 17 00:00:00 2001
From: Ivan Pazhitnykh <ivan.pazhitnykh@gmail.com>
Date: Fri, 30 Aug 2019 23:30:36 +0300
Subject: [PATCH] Playground: Fix "Report issue" 414 bug (#6409)

---
 website/playground/Playground.js | 257 ++++++++++++++++---------------
 website/playground/buttons.js    |  12 +-
 2 files changed, 140 insertions(+), 129 deletions(-)

diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index c948684f..265ff667 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Button, ClipboardButton, LinkButton } from "./buttons";
+import { Button, ClipboardButton } from "./buttons";
 import EditorState from "./EditorState";
 import { DebugPanel, InputPanel, OutputPanel } from "./panels";
 import PrettierFormat from "./PrettierFormat";
@@ -42,6 +42,10 @@ const ENABLED_OPTIONS = [
   "requirePragma",
   "vueIndentScriptAndStyle"
 ];
+const ISSUES_URL = "https://github.com/prettier/prettier/issues/new?body=";
+const MAX_LENGTH = 8000 - ISSUES_URL.length; // it seems that GitHub limit is 8195
+const COPY_MESSAGE =
+  "<!-- The issue body has been saved to the clipboard. Please paste it after this line! 👇 -->\n";
 
 class Playground extends React.Component {
   constructor(props) {
@@ -135,131 +139,144 @@ class Playground extends React.Component {
             debugDoc={editorState.showDoc}
             reformat={editorState.showSecondFormat}
           >
-            {({ formatted, debug }) => (
-              <React.Fragment>
-                <div className="editors-container">
-                  <Sidebar visible={editorState.showSidebar}>
-                    <SidebarOptions
-                      categories={CATEGORIES_ORDER}
-                      availableOptions={this.enabledOptions}
-                      optionValues={options}
-                      onOptionValueChange={this.handleOptionValueChange}
-                    />
-                    <SidebarCategory title="Range">
-                      <label>
-                        The selected range will be highlighted in yellow in the
-                        input editor
-                      </label>
-                      <Option
-                        option={this.rangeStartOption}
-                        value={options.rangeStart}
-                        onChange={this.handleOptionValueChange}
+            {({ formatted, debug }) => {
+              const fullReport = this.getMarkdown(
+                formatted,
+                debug.reformatted,
+                true
+              );
+              const showFullReport =
+                encodeURIComponent(fullReport).length < MAX_LENGTH;
+              return (
+                <React.Fragment>
+                  <div className="editors-container">
+                    <Sidebar visible={editorState.showSidebar}>
+                      <SidebarOptions
+                        categories={CATEGORIES_ORDER}
+                        availableOptions={this.enabledOptions}
+                        optionValues={options}
+                        onOptionValueChange={this.handleOptionValueChange}
                       />
-                      <Option
-                        option={this.rangeEndOption}
-                        value={options.rangeEnd}
-                        overrideMax={content.length}
-                        onChange={this.handleOptionValueChange}
+                      <SidebarCategory title="Range">
+                        <label>
+                          The selected range will be highlighted in yellow in
+                          the input editor
+                        </label>
+                        <Option
+                          option={this.rangeStartOption}
+                          value={options.rangeStart}
+                          onChange={this.handleOptionValueChange}
+                        />
+                        <Option
+                          option={this.rangeEndOption}
+                          value={options.rangeEnd}
+                          overrideMax={content.length}
+                          onChange={this.handleOptionValueChange}
+                        />
+                      </SidebarCategory>
+                      <SidebarCategory title="Debug">
+                        <Checkbox
+                          label="show AST"
+                          checked={editorState.showAst}
+                          onChange={editorState.toggleAst}
+                        />
+                        <Checkbox
+                          label="show doc"
+                          checked={editorState.showDoc}
+                          onChange={editorState.toggleDoc}
+                        />
+                        <Checkbox
+                          label="show second format"
+                          checked={editorState.showSecondFormat}
+                          onChange={editorState.toggleSecondFormat}
+                        />
+                      </SidebarCategory>
+                      <div className="sub-options">
+                        <Button onClick={this.resetOptions}>
+                          Reset to defaults
+                        </Button>
+                      </div>
+                    </Sidebar>
+                    <div className="editors">
+                      <InputPanel
+                        mode={util.getCodemirrorMode(options.parser)}
+                        ruler={options.printWidth}
+                        value={content}
+                        codeSample={getCodeSample(options.parser)}
+                        overlayStart={options.rangeStart}
+                        overlayEnd={options.rangeEnd}
+                        onChange={this.setContent}
                       />
-                    </SidebarCategory>
-                    <SidebarCategory title="Debug">
-                      <Checkbox
-                        label="show AST"
-                        checked={editorState.showAst}
-                        onChange={editorState.toggleAst}
-                      />
-                      <Checkbox
-                        label="show doc"
-                        checked={editorState.showDoc}
-                        onChange={editorState.toggleDoc}
-                      />
-                      <Checkbox
-                        label="show second format"
-                        checked={editorState.showSecondFormat}
-                        onChange={editorState.toggleSecondFormat}
-                      />
-                    </SidebarCategory>
-                    <div className="sub-options">
-                      <Button onClick={this.resetOptions}>
-                        Reset to defaults
-                      </Button>
-                    </div>
-                  </Sidebar>
-                  <div className="editors">
-                    <InputPanel
-                      mode={util.getCodemirrorMode(options.parser)}
-                      ruler={options.printWidth}
-                      value={content}
-                      codeSample={getCodeSample(options.parser)}
-                      overlayStart={options.rangeStart}
-                      overlayEnd={options.rangeEnd}
-                      onChange={this.setContent}
-                    />
-                    {editorState.showAst ? (
-                      <DebugPanel value={debug.ast || ""} />
-                    ) : null}
-                    {editorState.showDoc ? (
-                      <DebugPanel value={debug.doc || ""} />
-                    ) : null}
-                    <OutputPanel
-                      mode={util.getCodemirrorMode(options.parser)}
-                      value={formatted}
-                      ruler={options.printWidth}
-                    />
-                    {editorState.showSecondFormat ? (
+                      {editorState.showAst ? (
+                        <DebugPanel value={debug.ast || ""} />
+                      ) : null}
+                      {editorState.showDoc ? (
+                        <DebugPanel value={debug.doc || ""} />
+                      ) : null}
                       <OutputPanel
                         mode={util.getCodemirrorMode(options.parser)}
-                        value={getSecondFormat(formatted, debug.reformatted)}
+                        value={formatted}
                         ruler={options.printWidth}
                       />
-                    ) : null}
+                      {editorState.showSecondFormat ? (
+                        <OutputPanel
+                          mode={util.getCodemirrorMode(options.parser)}
+                          value={getSecondFormat(formatted, debug.reformatted)}
+                          ruler={options.printWidth}
+                        />
+                      ) : null}
+                    </div>
                   </div>
-                </div>
-                <div className="bottom-bar">
-                  <div className="bottom-bar-buttons">
-                    <Button onClick={editorState.toggleSidebar}>
-                      {editorState.showSidebar ? "Hide" : "Show"} options
-                    </Button>
-                    <Button onClick={this.clearContent}>Clear</Button>
-                    <ClipboardButton
-                      copy={JSON.stringify(
-                        // Remove `parser` since people usually paste this
-                        // into their .prettierrc and specifying a toplevel
-                        // parser there is an anti-pattern. Note:
-                        // `JSON.stringify` omits keys whose values are
-                        // `undefined`.
-                        Object.assign({}, options, { parser: undefined }),
-                        null,
-                        2
-                      )}
-                    >
-                      Copy config JSON
-                    </ClipboardButton>
+                  <div className="bottom-bar">
+                    <div className="bottom-bar-buttons">
+                      <Button onClick={editorState.toggleSidebar}>
+                        {editorState.showSidebar ? "Hide" : "Show"} options
+                      </Button>
+                      <Button onClick={this.clearContent}>Clear</Button>
+                      <ClipboardButton
+                        copy={JSON.stringify(
+                          // Remove `parser` since people usually paste this
+                          // into their .prettierrc and specifying a toplevel
+                          // parser there is an anti-pattern. Note:
+                          // `JSON.stringify` omits keys whose values are
+                          // `undefined`.
+                          Object.assign({}, options, { parser: undefined }),
+                          null,
+                          2
+                        )}
+                      >
+                        Copy config JSON
+                      </ClipboardButton>
+                    </div>
+                    <div className="bottom-bar-buttons bottom-bar-buttons-right">
+                      <ClipboardButton copy={window.location.href}>
+                        Copy link
+                      </ClipboardButton>
+                      <ClipboardButton
+                        copy={() =>
+                          this.getMarkdown(formatted, debug.reformatted)
+                        }
+                      >
+                        Copy markdown
+                      </ClipboardButton>
+                      <a
+                        href={getReportLink(
+                          showFullReport ? fullReport : COPY_MESSAGE
+                        )}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <ClipboardButton
+                          copy={() => (showFullReport ? "" : fullReport)}
+                        >
+                          Report issue
+                        </ClipboardButton>
+                      </a>
+                    </div>
                   </div>
-                  <div className="bottom-bar-buttons bottom-bar-buttons-right">
-                    <ClipboardButton copy={window.location.href}>
-                      Copy link
-                    </ClipboardButton>
-                    <ClipboardButton
-                      copy={() =>
-                        this.getMarkdown(formatted, debug.reformatted)
-                      }
-                    >
-                      Copy markdown
-                    </ClipboardButton>
-                    <LinkButton
-                      href={getReportLink(
-                        this.getMarkdown(formatted, debug.reformatted, true)
-                      )}
-                      target="_blank"
-                      rel="noopener"
-                    >
-                      Report issue
-                    </LinkButton>
-                  </div>
-                </div>
-              </React.Fragment>
-            )}
+                </React.Fragment>
+              );
+            }}
           </PrettierFormat>
         )}
       </EditorState>
@@ -277,9 +294,7 @@ function orderOptions(availableOptions, order) {
 }
 
 function getReportLink(reportBody) {
-  return `https://github.com/prettier/prettier/issues/new?body=${encodeURIComponent(
-    reportBody
-  )}`;
+  return `${ISSUES_URL}${encodeURIComponent(reportBody)}`;
 }
 
 function getSecondFormat(formatted, reformatted) {
diff --git a/website/playground/buttons.js b/website/playground/buttons.js
index ba179718..d5fc5883 100644
--- a/website/playground/buttons.js
+++ b/website/playground/buttons.js
@@ -5,10 +5,6 @@ export const Button = React.forwardRef((props, ref) => (
   <button type="button" className="btn" ref={ref} {...props} />
 ));
 
-export function LinkButton(props) {
-  return <a className="btn" {...props} />;
-}
-
 export class ClipboardButton extends React.Component {
   constructor() {
     super();
@@ -41,16 +37,16 @@ export class ClipboardButton extends React.Component {
   }
 
   render() {
+    const { children } = this.props;
+    const { showTooltip, tooltipText } = this.state;
     const rest = Object.assign({}, this.props);
     delete rest.children;
     delete rest.copy;
 
     return (
       <Button ref={this.ref} {...rest}>
-        {this.state.showTooltip ? (
-          <span className="tooltip">{this.state.tooltipText}</span>
-        ) : null}
-        {this.props.children}
+        {showTooltip ? <span className="tooltip">{tooltipText}</span> : null}
+        {children}
       </Button>
     );
   }