Support raising an issue for a specific command from Test Run page

Author: howard-e

client/components/TestRun/TestRun.css

@@ -523,3 +523,35 @@ a.btn-options:hover {
 .form-control.is-invalid {
   background-image: none;
 }
+
+.raise-issue-container {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+}
+
+.raise-issue-container .title {
+  align-self: flex-start;
+  font-weight: bold;
+}
+
+.raise-issue-container input[type="radio"] {
+  margin-right: 0.25rem;
+  vertical-align: middle;
+}
+
+.raise-issue-container .options {
+  display: flex;
+}
+
+.raise-issue-container .options.type {
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.raise-issue-container .options.command {
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  margin-bottom: 0.5rem;
+}

client/components/TestRun/index.jsx

@@ -130,6 +130,8 @@ const TestRun = () => {
   const [currentAtVersion, setCurrentAtVersion] = useState('');
   const [currentBrowserVersion, setCurrentBrowserVersion] = useState('');
   const [pageReady, setPageReady] = useState(false);
+  const [selectedIssueType, setSelectedIssueType] = useState('test');
+  const [selectedCommandForIssue, setSelectedCommandForIssue] = useState('');
 
   const auth = evaluateAuth(data && data.me ? data.me : {});
   let { id: userId, isSignedIn, isAdmin } = auth;
@@ -374,7 +376,8 @@ const TestRun = () => {
       browserName: testPlanReport.browser.name,
       atVersionName: currentAtVersion?.name,
       browserVersionName: currentBrowserVersion?.name,
-      conflictMarkdown: conflictMarkdownRef.current
+      conflictMarkdown: conflictMarkdownRef.current,
+      commandString: selectedCommandForIssue
     });
   }
 
@@ -885,6 +888,25 @@ const TestRun = () => {
     editAtBrowserDetailsButtonRef.current.focus();
   };
 
+  const onIssueTypeChange = e => {
+    const type = e.target.value;
+    if (type === 'command') {
+      const scenario = currentTest.scenarios[0];
+      const commandText = scenario.commands
+        .map(command => command.text)
+        .join(' then ');
+      if (!selectedCommandForIssue) setSelectedCommandForIssue(commandText);
+    } else {
+      setSelectedCommandForIssue('');
+    }
+    setSelectedIssueType(type);
+  };
+
+  const onSelectedCommandForIssueChange = e => {
+    const command = e.target.value;
+    setSelectedCommandForIssue(command);
+  };
+
   const renderTestContent = (testPlanReport, currentTest, heading) => {
     const { index } = currentTest;
     const isComplete = currentTest.testResult
@@ -963,7 +985,60 @@ const TestRun = () => {
       <div role="complementary">
         <h2 id="test-options-heading">Test Options</h2>
         <ul className="options-wrapper" aria-labelledby="test-options-heading">
-          <li>
+          <li className="raise-issue-container">
+            <span className="title">Raise an issue for ...</span>
+            <div className="options type" onChange={onIssueTypeChange}>
+              <label>
+                <input
+                  id="testIssueType"
+                  name="issueTypeOption"
+                  type="radio"
+                  value="test"
+                  defaultChecked
+                />
+                test
+              </label>
+              <label>
+                <input
+                  id="commandIssueType"
+                  name="issueTypeOption"
+                  type="radio"
+                  value="command"
+                />
+                command
+              </label>
+            </div>
+            {selectedIssueType === 'command' && (
+              <>
+                <span className="title">Select command ...</span>
+                <div
+                  className="options command"
+                  onChange={onSelectedCommandForIssueChange}
+                >
+                  {currentTest.scenarios.map((scenario, index) => {
+                    const commandKey = `${scenario.id}-${scenario.commands
+                      .map(command => command.id)
+                      .join('_')}`;
+                    const commandText = scenario.commands
+                      .map(command => command.text)
+                      .join(' then ');
+
+                    return (
+                      <label key={commandKey}>
+                        <input
+                          id={commandKey}
+                          name="commandOption"
+                          type="radio"
+                          value={commandText}
+                          defaultChecked={index === 0}
+                        />
+                        {commandText}
+                      </label>
+                    );
+                  })}
+                </div>
+              </>
+            )}
             <OptionButton
               text="Raise an Issue"
               icon={

client/utils/createIssueLink.js

@@ -29,6 +29,7 @@ const atLabelMap = {
  * @param {string|null} [options.browserVersionName=null] - The version name of the browser
  * @param {string|null} [options.conflictMarkdown=null] - The conflict markdown
  * @param {string|null} [options.reportLink=null] - The link to the report
+ * @param {string|null} [options.command=null] - The command to be included in the report
  * @returns {string} The URL for creating a new issue on the GitHub repository
  * @throws {Error} If required parameters are missing
  */
@@ -48,7 +49,8 @@ const createIssueLink = ({
   browserVersionName = null,
   conflictMarkdown = null,
   reportLink = null,
-  testReviewLink = null
+  testReviewLink = null,
+  commandString = null
 }) => {
   if (!(testPlanDirectory || testPlanTitle || versionString || atName)) {
     throw new Error('Cannot create issue link due to missing parameters');
@@ -72,9 +74,15 @@ const createIssueLink = ({
       titleStart = 'Feedback';
     }
 
-    title =
-      `${titleStart}: "${testTitle}" (${testPlanTitle}, ` +
-      `Test ${testSequenceNumber}, ${versionString})`;
+    if (commandString) {
+      title =
+        `${titleStart}: "${testTitle}" (${testPlanTitle}, ` +
+        `Test ${testSequenceNumber}, Command "${commandString}", ${versionString})`;
+    } else {
+      title =
+        `${titleStart}: "${testTitle}" (${testPlanTitle}, ` +
+        `Test ${testSequenceNumber}, ${versionString})`;
+    }
   } else {
     title = `General Feedback: ${testPlanTitle} ${versionString}`;
     if (atName) title = `${atName} ${title}`;
@@ -120,8 +128,13 @@ const createIssueLink = ({
       `[${shortenedUrl}](${modifiedRenderedUrl})\n` +
       reportLinkFormatted +
       atFormatted +
-      browserFormatted +
-      '\n';
+      browserFormatted;
+
+    if (commandString) {
+      testSetupFormatted = `${testSetupFormatted}` + `- Command: ${commandString}\n`;
+    }
+
+    testSetupFormatted = `${testSetupFormatted}\n`;
   }
 
   let metadataFormatted = '';