Implement suggested single click 'Raise an Issue for command' link in…

… TestRun
w3c · Jan 22, 2025 · 684ff30 · 684ff30
1 parent e6c8421
commit 684ff30
Show file tree

Hide file tree

Showing 5 changed files with 510 additions and 390 deletions.
diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
@@ -27,6 +27,7 @@ import UnexpectedBehaviorsFieldset from './UnexpectedBehaviorsFieldset';
 import supportJson from '../../resources/support.json';
 import commandsJson from '../../resources/commands.json';
 import { AtPropType, TestResultPropType } from '../common/proptypes/index.js';
+import createIssueLink from '@client/utils/createIssueLink';
 
 const Container = styled.div`
   width: 100%;
@@ -163,7 +164,8 @@ const TestRenderer = ({
   isReviewingBot = false,
   isReadOnly = false,
   isEdit = false,
-  setIsRendererReady = false
+  setIsRendererReady = false,
+  issueContent
 }) => {
   const { scenarioResults, test = {}, completedAt } = testResult;
   const { renderableContent } = test;
@@ -543,6 +545,13 @@ const TestRenderer = ({
                 unexpectedBehaviors,
                 assertionsHeader
               } = value;
+
+              const commandString = header.replace('After ', '');
+              const issueLink = createIssueLink({
+                ...issueContent,
+                commandString
+              });
+
               return (
                 <Fragment key={`AtOutputKey_${commandIndex}`}>
                   <InnerSectionHeadingText>{header}</InnerSectionHeadingText>
@@ -564,6 +573,9 @@ const TestRenderer = ({
                     isSubmitted={isSubmitted}
                     readOnly={isReadOnly}
                   />
+                  <a href={issueLink} target="_blank" rel="noreferrer">
+                    Raise an issue for {commandString}
+                  </a>
                 </Fragment>
               );
             })}
@@ -604,7 +616,8 @@ TestRenderer.propTypes = {
   isReadOnly: PropTypes.bool,
   isEdit: PropTypes.bool,
   isReviewingBot: PropTypes.bool,
-  setIsRendererReady: PropTypes.func
+  setIsRendererReady: PropTypes.func,
+  issueContent: PropTypes.object
 };
 
 export default TestRenderer;
diff --git a/client/components/TestRun/TestRun.css b/client/components/TestRun/TestRun.css
@@ -523,35 +523,3 @@ 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: 1rem;
-}
diff --git a/client/components/TestRun/index.jsx b/client/components/TestRun/index.jsx
@@ -130,8 +130,6 @@ 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;
@@ -361,10 +359,10 @@ const TestRun = () => {
   }
   adminReviewerCheckedRef.current = true;
 
-  let issueLink;
+  let issueLink, issueContent;
   const hasLoadingCompleted = Object.keys(currentTest).length;
   if (hasLoadingCompleted) {
-    issueLink = createIssueLink({
+    issueContent = {
       testPlanTitle: testPlanVersion.title,
       testPlanDirectory: testPlanVersion.testPlan.directory,
       versionString: testPlanVersion.versionString,
@@ -376,9 +374,9 @@ const TestRun = () => {
       browserName: testPlanReport.browser.name,
       atVersionName: currentAtVersion?.name,
       browserVersionName: currentBrowserVersion?.name,
-      conflictMarkdown: conflictMarkdownRef.current,
-      commandString: selectedCommandForIssue
-    });
+      conflictMarkdown: conflictMarkdownRef.current
+    };
+    issueLink = createIssueLink(issueContent);
   }
 
   const remapScenarioResults = (
@@ -888,25 +886,6 @@ 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
@@ -985,60 +964,7 @@ const TestRun = () => {
       <div role="complementary">
         <h2 id="test-options-heading">Test Options</h2>
         <ul className="options-wrapper" aria-labelledby="test-options-heading">
-          <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>
-              </>
-            )}
+          <li>
             <OptionButton
               text="Raise an Issue"
               icon={
@@ -1122,6 +1048,7 @@ const TestRun = () => {
                   isSubmitted={isTestSubmitClicked}
                   isEdit={isTestEditClicked}
                   setIsRendererReady={setIsRendererReady}
+                  issueContent={issueContent}
                 />
               </Row>
               {isRendererReady && (