From 65ff50f0a6a848b89bc0b15189e18a4ec80a216c Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 01 2021 20:15:29 +0000
Subject: Links now are using source Link


---

diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js
index 4f88f2b..34c28de 100644
--- a/src/landingpage/Minutes.js
+++ b/src/landingpage/Minutes.js
@@ -1,28 +1,25 @@
-import React, { Component } from "react"
+import React from "react"
+import SourceLink from "./SourceLink";
 
-class Events extends Component {
-  render() {
-    return (
+const Events =(props)=>{
+  return (
       <div>
         <h1 className="padded">Fedora QA Meeting Minutes</h1>
         <div className="events">
-          <a target="_blank" href={this.props.data.link} rel="noopener noreferrer">
-            Latest minutes from {this.props.data.date}
-          </a>
-          <br />
-          Visit{" "}
-          <a
-            target="_blank"
-            href="https://meetbot.fedoraproject.org/sresults/?group_id=fedora-qa&type=team"
-            rel="noopener noreferrer">
-            meetbot
-          </a>{" "}
-          to see older.
-          <br />
+          <br/>
+          <p>
+            Latest minutes from {props.data.date}
+           <SourceLink href={props.data.link}/>
+          </p>
+          <p>
+            Visit meetbot
+            <SourceLink href="https://meetbot.fedoraproject.org/sresults/?group_id=fedora-qa&type=team" />
+            to see older.
+          </p>
         </div>
       </div>
-    )
+    );
   }
-}
+
 
 export default Events
diff --git a/src/landingpage/SourceLink.js b/src/landingpage/SourceLink.js
index 76cfa0b..a05c989 100644
--- a/src/landingpage/SourceLink.js
+++ b/src/landingpage/SourceLink.js
@@ -1,17 +1,16 @@
-import React, {Component} from 'react'
+import React from 'react'
 
-class SourceLink extends Component {
-    render() {
-        return (
+const SourceLink =(props)=> {
+      return (
             <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href={this.props.href}
+                href={props.href}
                 className="smallsuper">
                 <i className="fas fa-external-link-alt"></i>
             </a>
         )
-    }
+    
 }
 
 export default SourceLink
diff --git a/src/layout/Footer.js b/src/layout/Footer.js
index f6cd591..255f654 100644
--- a/src/layout/Footer.js
+++ b/src/layout/Footer.js
@@ -1,16 +1,17 @@
-import React, { Component } from "react"
+import React from "react"
+import SourceLink from "../landingpage/SourceLink";
 
-class Footer extends Component {
-  render() {
-    return (
-      <div className="footer">
-        <div className="container">
-          <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure{" "}
-          <span className="float-right">version 0.1.0</span>
-        </div>
+const Footer =()=> {
+  return (
+    <div className="footer">
+      <div className="container">
+        Source
+        <SourceLink href="https://pagure.io/fedora-qa/landingpage"/> on Pagure{" "}
+        <span className="float-right">version 0.1.0</span>
       </div>
-    )
-  }
+    </div>
+  );
+  
 }
 
 export default Footer
diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js
index ebccbfc..1fb8615 100644
--- a/src/wizard/Easyfix.js
+++ b/src/wizard/Easyfix.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { CollapsableCard } from "./components"
-
+import SourceLink from "../landingpage/SourceLink"
 export default class Easyfix extends Component {
   render() {
     console.log(this.props.data)
@@ -76,9 +76,9 @@ class EasyfixLinksList extends Component {
   render() {
     const items = this.props.data.map((action) => (
       <li key={action.extra_data.ticket_url}>
-        <a href={action.extra_data.ticket_url} target="_blank" rel="noopener noreferrer">
+        <SourceLink href={action.extra_data.ticket_url}/>
           {action.name}
-        </a>
+        
       </li>
     ))
 
diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js
index d4e6be6..83ab521 100644
--- a/src/wizard/FedoraEasyKarma.js
+++ b/src/wizard/FedoraEasyKarma.js
@@ -1,25 +1,27 @@
-import React, { Component } from "react"
-import { CollapsableBadge } from "./components"
-
+import React, { Component } from "react";
+import { CollapsableBadge } from "./components";
+import SourceLink from "../landingpage/SourceLink";
 export default class FedoraEasyKarmaItemsList extends Component {
   render() {
-    if (this.props.data === undefined) return null
+    if (this.props.data === undefined) return null;
     else
       return (
         <div>
           <h1>What is Karma</h1>
-          Before a new version of a package is pushed to the Fedora&apos;s Updates repository, it
-          needs to be tested and proved functional.{" "}
+          Before a new version of a package is pushed to the Fedora&apos;s
+          Updates repository, it needs to be tested and proved functional.{" "}
           <CollapsableBadge expand_text="Tell me more about the process!">
             The updates are kept in{" "}
-            <a target="_blank" rel="noopener noreferrer" href="https://bodhi.fedoraproject.org/">
+            <p>
               Bodhi
-            </a>
-            , which acts as a gatekeeper between new package releases and the stable repositories.{" "}
-            Users (or automated systems) can then provide feedback in form of positive/negative
-            Karma, marking the update as working (or not) within the scope of their expectations.{" "}
-            An update can (and usually does) consist of several packages (rpms), that are going
-            through the acceptance process together.
+              <SourceLink href="https://bodhi.fedoraproject.org/" />
+            </p>
+            , which acts as a gatekeeper between new package releases and the
+            stable repositories. Users (or automated systems) can then provide
+            feedback in form of positive/negative Karma, marking the update as
+            working (or not) within the scope of their expectations. An update
+            can (and usually does) consist of several packages (rpms), that are
+            going through the acceptance process together.
           </CollapsableBadge>
           <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>
           <ol className="steps">
@@ -28,99 +30,117 @@ export default class FedoraEasyKarmaItemsList extends Component {
               <CollapsableBadge expand_text="Don&#39;t have one yet?">
                 <ul>
                   <li>
-                    Visit{" "}
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href="https://admin.fedoraproject.org/accounts/user/new">
-                      FAS Sign-up page
-                    </a>{" "}
-                    and create it.
+                    <p>
+                      {" "}
+                      Visit{" "}
+                      <SourceLink href="https://admin.fedoraproject.org/accounts/user/new" />
+                      FAS Sign-up page and create it.
+                    </p>
+                  </li>
+                  <li>
+                    Note the username and password, you will need it later on.
                   </li>
-                  <li>Note the username and password, you will need it later on.</li>
                 </ul>
               </CollapsableBadge>
             </li>
             <li>
-              Make sure your system is up-to-date: <code>sudo dnf update --refresh</code>
+              Make sure your system is up-to-date:{" "}
+              <code>sudo dnf update --refresh</code>
             </li>
             <li>
-              Install fedora-easy-karma tool: <code>sudo dnf install fedora-easy-karma</code>
+              Install fedora-easy-karma tool:{" "}
+              <code>sudo dnf install fedora-easy-karma</code>
             </li>
             <li>
               Choose an update to test{" "}
               <CollapsableBadge expand_text="Not sure how?">
-                Have a look at the available packages in <code>updates-testing</code> repo, by
-                running <code>dnf --enablerepo=updates-testing list --refresh --upgrades</code> and
-                choose a package you know.
+                Have a look at the available packages in{" "}
+                <code>updates-testing</code> repo, by running{" "}
+                <code>
+                  dnf --enablerepo=updates-testing list --refresh --upgrades
+                </code>{" "}
+                and choose a package you know.
               </CollapsableBadge>
             </li>
             <li>
               Install the package{" "}
-              <code>sudo dnf --enablerepo=updates-testing update PACKAGE_NAME</code>, and test
-              whether it works, as you would expect.
+              <code>
+                sudo dnf --enablerepo=updates-testing update PACKAGE_NAME
+              </code>
+              , and test whether it works, as you would expect.
               <br />
-              <strong>Note:</strong> Other packages from <code>updates-testing</code> repo may be
-              installed as dependencies (shown during the installation process). Try to test those
-              too, if possible.{" "}
+              <strong>Note:</strong> Other packages from{" "}
+              <code>updates-testing</code> repo may be installed as dependencies
+              (shown during the installation process). Try to test those too, if
+              possible.{" "}
               <CollapsableBadge expand_text="Need some tips?">
-                Sometimes, the update associated with the package you just installed fixes some
-                specific bugs, or has testcases associated with it.
+                Sometimes, the update associated with the package you just
+                installed fixes some specific bugs, or has testcases associated
+                with it.
                 <br />
-                Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code>, and look for{" "}
-                <code>Bugs</code>, <code>Test Cases</code>, and/or <code>Notes</code> sections in
-                the detailed output.{" "}
+                Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code>,
+                and look for <code>Bugs</code>, <code>Test Cases</code>, and/or{" "}
+                <code>Notes</code> sections in the detailed output.{" "}
                 <CollapsableBadge expand_text="Want something a bit nicer?">
-                  We already mentioned Bodhi, several times. Instead of using the{" "}
-                  <code>fedora-easy-karma</code> interface for submitting Karma and/or learning
-                  about the Update, you can visit Bodhi directly.
+                  We already mentioned Bodhi, several times. Instead of using
+                  the <code>fedora-easy-karma</code> interface for submitting
+                  Karma and/or learning about the Update, you can visit Bodhi
+                  directly.
                   <br />
-                  <code>fedora-easy-karma</code> shows the URL of the relevant update near the
-                  bottom of the text output - look for URL like{" "}
-                  <code>https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc</code>.
+                  <code>fedora-easy-karma</code> shows the URL of the relevant
+                  update near the bottom of the text output - look for URL like{" "}
+                  <code>
+                    https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc
+                  </code>
+                  .
                   <br />
-                  You can have a look at other people's comments, the afore-mentioned Bugs or Test
-                  Cases, and even submit the Karma directly. Just use your FAS credentials to
-                  log-in.
+                  You can have a look at other people's comments, the
+                  afore-mentioned Bugs or Test Cases, and even submit the Karma
+                  directly. Just use your FAS credentials to log-in.
                 </CollapsableBadge>
               </CollapsableBadge>
             </li>
             <li>
-              Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code> and report what you
-              found out.{" "}
+              Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code> and
+              report what you found out.{" "}
               <CollapsableBadge expand_text="New to fedora-easy-karma?">
-                It identifies the packages installed from the <code>updates-testing</code>{" "}
-                repository, and matches them to the updates in Bodhi.
+                It identifies the packages installed from the{" "}
+                <code>updates-testing</code> repository, and matches them to the
+                updates in Bodhi.
                 <br />
-                You are then presented with the relevant updates one-by-one, to submit Karma and a
-                comment.{" "}
+                You are then presented with the relevant updates one-by-one, to
+                submit Karma and a comment.{" "}
                 <CollapsableBadge expand_text="Not sure what Karma means?">
                   <ol>
                     <li>
-                      Enter <code>1</code> to mark positive karma (the update works just fine, as
-                      far as you can tell), or <code>-1</code> to mark the package as broken.{" "}
-                      <br />
-                      Not sure you can judge the package's state? Have a look at the{" "}
-                      <a
-                        target="_blank"
-                        href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines"
-                        rel="noopener noreferrer">
+                      Enter <code>1</code> to mark positive karma (the update
+                      works just fine, as far as you can tell), or{" "}
+                      <code>-1</code> to mark the package as broken. <br />
+                      <p>
+                        Not sure you can judge the package's state? Have a look
+                        at the{" "}
+                        <SourceLink href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines" />
                         Update Feedback Guidelines
-                      </a>
+                      </p>
                       <br />
                       Still not sure? Just press <code>Enter</code> to skip it.
                     </li>
                     <li>
-                      Add a comment - even if it works, try to describe what you tested. It can be
-                      as easy as{" "}
-                      <code>I tried openning and editing a document, and it worked.</code> when you
-                      test a text-editor, or{" "}
-                      <code>I opened a couple of tabs, and browsed random pages.</code> for a
-                      web-browser.
+                      Add a comment - even if it works, try to describe what you
+                      tested. It can be as easy as{" "}
+                      <code>
+                        I tried openning and editing a document, and it worked.
+                      </code>{" "}
+                      when you test a text-editor, or{" "}
+                      <code>
+                        I opened a couple of tabs, and browsed random pages.
+                      </code>{" "}
+                      for a web-browser.
                       <br />
-                      Absolutely make sure to provide reasonable amount of detail, when submitting
-                      negative karma - ideally, you should also create a bugreport, and reference
-                      it in the comment.
+                      Absolutely make sure to provide reasonable amount of
+                      detail, when submitting negative karma - ideally, you
+                      should also create a bugreport, and reference it in the
+                      comment.
                     </li>
                   </ol>
                 </CollapsableBadge>
@@ -132,6 +152,6 @@ export default class FedoraEasyKarmaItemsList extends Component {
             </li>
           </ol>
         </div>
-      )
+      );
   }
 }
diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index 21fbc21..d409001 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -1,13 +1,17 @@
-import React, { Component } from "react"
-import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
-import { CollapsableCard, CollapsableBadge } from "./components"
-
+import React, { Component } from "react";
+import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
+import { CollapsableCard, CollapsableBadge } from "./components";
+import SourceLink from "../landingpage/SourceLink";
 export default class FedoraManualTesting extends Component {
   render() {
     let sections = Object.keys(this.props.data).map((k) => (
-      <FedoraManualTestingItemsListSub1 title={k} data={this.props.data[k]} key={k} />
-    ))
-    return <div>{sections}</div>
+      <FedoraManualTestingItemsListSub1
+        title={k}
+        data={this.props.data[k]}
+        key={k}
+      />
+    ));
+    return <div>{sections}</div>;
   }
 }
 
@@ -21,7 +25,7 @@ class FedoraManualTestingItemsListSub2 extends Component {
           </li>
         ))}
       </ul>
-    )
+    );
   }
 }
 
@@ -30,218 +34,229 @@ class FedoraManualTestingItemsListSub1 extends Component {
     var subsections = Object.keys(this.props.data).map((k) => (
       <li key={"li" + k}>
         <span>{k}</span>
-        <FedoraManualTestingItemsListSub2 data={this.props.data[k]} key={this.props.data[k]} />
+        <FedoraManualTestingItemsListSub2
+          data={this.props.data[k]}
+          key={this.props.data[k]}
+        />
       </li>
-    ))
-    subsections = <ul>{subsections}</ul>
+    ));
+    subsections = <ul>{subsections}</ul>;
 
-    var l1 = <div></div>
+    var l1 = <div></div>;
     switch (this.props.title) {
       case "Installation":
         l1 = (
           <div>
-            The <strong>Installation</strong> testcases generally deal with a part of the
-            installation procedure.
+            The <strong>Installation</strong> testcases generally deal with a
+            part of the installation procedure.
             <br />
-            You will certainly need an installation ISO, and either a Virtual or Bare-metal machine
-            to run the test.
+            You will certainly need an installation ISO, and either a Virtual or
+            Bare-metal machine to run the test.
             <br />
-            <i>Note:</i> some (not that many, though) of these testcases require Bare-metal
-            machine. Be sure to read the Description of the testcase carefully.
+            <i>Note:</i> some (not that many, though) of these testcases require
+            Bare-metal machine. Be sure to read the Description of the testcase
+            carefully.
           </div>
-        )
-        break
+        );
+        break;
       case "Desktop":
         l1 = (
           <div>
-            The <strong>Desktop</strong> testcases cover basic functionality of the desktop
-            environment.
+            The <strong>Desktop</strong> testcases cover basic functionality of
+            the desktop environment.
             <br />
-            You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live
-            image instead.
+            You can either install Fedora onto clean Virtual or Bare-metal
+            machine, or use a Live image instead.
           </div>
-        )
-        break
+        );
+        break;
       case "Base":
         l1 = (
           <div>
-            The <strong>Base</strong> testcases cover the system&#x27;s basic functionality just
-            after a clean installation.
+            The <strong>Base</strong> testcases cover the system&#x27;s basic
+            functionality just after a clean installation.
             <br />
-            Most times, you will be asked to perform a clean Fedora installation. You can use
-            either Virtual or Bare-metal machine.
+            Most times, you will be asked to perform a clean Fedora
+            installation. You can use either Virtual or Bare-metal machine.
             <br />
-            <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No
-            need to reinstall for every testcase.
+            <i>Pro tip:</i> using a snapshot of cleanly installed Virtual
+            machine is just fine. No need to reinstall for every testcase.
           </div>
-        )
-        break
+        );
+        break;
       case "Server":
         l1 = (
           <div>
-            The <strong>Server</strong> testcases usually require multiple machines to test the
-            server-client behaviour, and might feel a bit advanced.
+            The <strong>Server</strong> testcases usually require multiple
+            machines to test the server-client behaviour, and might feel a bit
+            advanced.
           </div>
-        )
-        break
+        );
+        break;
       case "Cloud":
         l1 = (
           <div>
-            Even thought the <strong>Cloud</strong> testcases are best done in the specific
-            environments like EC2 or Openstack, you can also perform them locally using Testcloud.
+            Even thought the <strong>Cloud</strong> testcases are best done in
+            the specific environments like EC2 or Openstack, you can also
+            perform them locally using Testcloud.
             <br />
-            Have a look at the{" "}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup">
-              Cloud provider setup
-            </a>{" "}
-            guides for more details.
+            <p>
+              Have a look at the{" "}
+              <SourceLink href="https://fedoraproject.org/wiki/Test_Results:Fedora_Current_Cloud#Cloud_Provider_Setup" />
+              Cloud provider setup guides for more details.
+            </p>
           </div>
-        )
-        break
+        );
+        break;
       default:
-        break
+        break;
     }
 
     return (
       <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
         {subsections}
       </CollapsableCard>
-    )
+    );
   }
 }
 
 class FedoraManualTestingItem extends Component {
   render() {
-    const extra_data = this.props.data.extra_data
+    const extra_data = this.props.data.extra_data;
 
-    const tc_url = extra_data.testcase_url
-    const name = this.props.data.name
+    const tc_url = extra_data.testcase_url;
+    const name = this.props.data.name;
 
-    const matrix_url = extra_data.matrix_url
-    var environment_examples = undefined
+    const matrix_url = extra_data.matrix_url;
+    var environment_examples = undefined;
     switch (extra_data.testtype) {
       case "Installation":
         environment_examples = (
           <span>
             <code>x86_64</code> or <code>ARM</code>
           </span>
-        )
-        break
+        );
+        break;
       case "Base":
         environment_examples = (
           <span>
             <code>Workstation</code>, <code>Server</code>, <code>Xfce</code> or{" "}
             <code>Minimal</code>
           </span>
-        )
-        break
+        );
+        break;
       case "Desktop":
         environment_examples = (
           <span>
             <code>Workstation</code> or <code>KDE</code>
           </span>
-        )
-        break
+        );
+        break;
       case "Server":
         environment_examples = (
           <span>
             <code>x86_64</code> or <code>aarch64</code>
           </span>
-        )
-        break
+        );
+        break;
       default:
-        break
+        break;
     }
 
-    const testtype = extra_data.testtype
-    const tc_rawname = extra_data.display_name
+    const testtype = extra_data.testtype;
+    const tc_rawname = extra_data.display_name;
 
     return (
       <ModalInfo buttonLabel={name}>
         <ol className="steps">
           <li>
-            Identify the testcase and `environment` in our{" "}
-            <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
-              Tescase matrix
-            </a>{" "}
+            <p>
+              Identify the testcase and `environment` in our{" "}
+              <SourceLink href={matrix_url} />
+              Tescase matrix{" "}
+            </p>
             <CollapsableBadge expand_text="Not sure what that means?">
               <ul>
                 <li>
-                  Have a look at the matrix. The rows are the testcases, and the columns are the
-                  environments. Most of the time, these are {environment_examples} for the{" "}
-                  {testtype} testcases, but you can also encouter a generic <code>Result</code>{" "}
-                  column, which usually means you can use any media/architecture available.
+                  Have a look at the matrix. The rows are the testcases, and the
+                  columns are the environments. Most of the time, these are{" "}
+                  {environment_examples} for the {testtype} testcases, but you
+                  can also encouter a generic <code>Result</code> column, which
+                  usually means you can use any media/architecture available.
                 </li>
                 <li>
-                  For this particular testcase, <code>{extra_data.envs.join(", ")}</code>{" "}
-                  {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing
-                  results.
+                  For this particular testcase,{" "}
+                  <code>{extra_data.envs.join(", ")}</code>{" "}
+                  {extra_data.envs.length > 1
+                    ? "environments are"
+                    : "environment is"}{" "}
+                  missing results.
                 </li>
               </ul>
             </CollapsableBadge>
           </li>
 
           <li>
-            Read the{" "}
-            <a target="_blank" rel="noopener noreferrer" href={tc_url}>
-              Testcase
-            </a>{" "}
-            briefly, just to have a general idea of what you will be doing.{" "}
+            <p>
+              Read the <SourceLink href={tc_url} />
+              Testcase briefly, just to have a general idea of what you will be
+              doing.{" "}
+            </p>
+
             <CollapsableBadge expand_text="Not making much sense?">
               The testcases are generally split into four sections:
               <ul>
                 <li>
-                  <strong>Description</strong> should give you a general idea of what is being
-                  tested
+                  <strong>Description</strong> should give you a general idea of
+                  what is being tested
                 </li>
                 <li>
-                  <strong>Setup</strong> describes the steps to take before you begin working on
-                  the testcase
+                  <strong>Setup</strong> describes the steps to take before you
+                  begin working on the testcase
                 </li>
                 <li>
-                  <strong>How to test</strong> contains the individual steps to take in order to
-                  perform the testcase
+                  <strong>How to test</strong> contains the individual steps to
+                  take in order to perform the testcase
                 </li>
                 <li>
-                  <strong>Expected results</strong> describe what you should check while testing in
-                  order to decide whether it Passed of Failed
+                  <strong>Expected results</strong> describe what you should
+                  check while testing in order to decide whether it Passed of
+                  Failed
                 </li>
               </ul>
             </CollapsableBadge>
           </li>
 
           <li>
-            Based on the enviromnent, select and download and appropriate ISO{" "}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://fedoraproject.org/wiki/Test_Results:Current_Installation_Test#How_to_test">
-              here
-            </a>
-            .{" "}
+            <p>
+              Based on the enviromnent, select and download and appropriate ISO{" "}
+              <SourceLink href="https://fedoraproject.org/wiki/Test_Results:Current_Installation_Test#How_to_test" />
+              here.{" "}
+            </p>
             <CollapsableBadge expand_text="Not sure how?">
               <ul>
                 <li>
-                  Most of the time Workstation Live, or Server DVD are fine, but sometimes there
-                  are specific products (e.g. Xfce) to be tested
+                  Most of the time Workstation Live, or Server DVD are fine, but
+                  sometimes there are specific products (e.g. Xfce) to be tested
                 </li>
                 <li>
                   Make sure to read about identifying the environment above.{" "}
                   <CollapsableBadge expand_text="Show me!">
                     <ul>
                       <li>
-                        Have a look at the matrix. The rows are the testcases, and the columns are
-                        the environments. Most of the time, these are {environment_examples} for
-                        the {testtype} testcases, but you can also encouter a generic{" "}
-                        <code>Result</code> column, which usually means you can use any
-                        media/architecture available.
+                        Have a look at the matrix. The rows are the testcases,
+                        and the columns are the environments. Most of the time,
+                        these are {environment_examples} for the {testtype}{" "}
+                        testcases, but you can also encouter a generic{" "}
+                        <code>Result</code> column, which usually means you can
+                        use any media/architecture available.
                       </li>
                       <li>
-                        For this particular testcase, <code>{extra_data.envs.join(", ")}</code>{" "}
-                        {extra_data.envs.length > 1 ? "environments are" : "environment is"}{" "}
+                        For this particular testcase,{" "}
+                        <code>{extra_data.envs.join(", ")}</code>{" "}
+                        {extra_data.envs.length > 1
+                          ? "environments are"
+                          : "environment is"}{" "}
                         missing results.
                       </li>
                     </ul>
@@ -252,11 +267,11 @@ class FedoraManualTestingItem extends Component {
           </li>
 
           <li>
-            Study the{" "}
-            <a target="_blank" rel="noopener noreferrer" href={tc_url}>
-              Testcase
-            </a>{" "}
-            thoroughly, to be sure you know what to do.{" "}
+            <p>
+              Study the <SourceLink href={tc_url} />
+              Testcase thoroughly, to be sure you know what to do.{" "}
+            </p>
+
             <CollapsableBadge expand_text="Feeling a bit lost?">
               <ul>
                 <li>
@@ -265,37 +280,36 @@ class FedoraManualTestingItem extends Component {
                     The testcases are generally split into four sections:
                     <ul>
                       <li>
-                        <strong>Description</strong> should give you a general idea of what is
-                        being tested
+                        <strong>Description</strong> should give you a general
+                        idea of what is being tested
                       </li>
                       <li>
-                        <strong>Setup</strong> describes the steps to take before you begin working
-                        on the testcase
+                        <strong>Setup</strong> describes the steps to take
+                        before you begin working on the testcase
                       </li>
                       <li>
-                        <strong>How to test</strong> contains the individual steps to take in order
-                        to perform the testcase
+                        <strong>How to test</strong> contains the individual
+                        steps to take in order to perform the testcase
                       </li>
                       <li>
-                        <strong>Expected results</strong> describe what you should check while
-                        testing in order to decide whether it Passed of Failed
+                        <strong>Expected results</strong> describe what you
+                        should check while testing in order to decide whether it
+                        Passed of Failed
                       </li>
                     </ul>
                   </CollapsableBadge>
                 </li>
                 <li>
-                  Maybe you are stuck, or just do not understand something? Feel free to ask on our
-                  IRC channel #fedora-qa at freenode.net{" "}
+                  Maybe you are stuck, or just do not understand something? Feel
+                  free to ask on our IRC channel #fedora-qa at freenode.net{" "}
                   <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
-                    If you are not that familiar with IRC, you can use the{" "}
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href="http://webchat.freenode.net">
-                      web-interface
-                    </a>{" "}
-                    just enter a Nickname of your choice, #fedora-qa (including the hash sign) in
-                    the Channels field, and click Connect.
+                    <p>
+                      If you are not that familiar with IRC, you can use the{" "}
+                      <SourceLink href="http://webchat.freenode.net" />
+                      web-interface just enter a Nickname of your choice,
+                      #fedora-qa (including the hash sign) in the Channels
+                      field, and click Connect.
+                    </p>
                   </CollapsableBadge>
                 </li>
               </ul>
@@ -304,87 +318,105 @@ class FedoraManualTestingItem extends Component {
 
           <li>Get your hands dirty, and test the hell out of it!</li>
           <li>
-            <CollapsableBadge expand_class="success" expand_text="Everything went well" type="btn">
-              Great! Either use <code>relval report-results</code> on command line (make sure to
-              install the <code>relval</code> package first), or modify the{" "}
-              <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
-                matrix
-              </a>{" "}
-              directly by clicking on the <code>Edit</code> link next to the Matrice's header, and
-              put <code>&#123;&#123;result|pass|YOUR_NAME_HERE|&#125;&#125;</code> in the
-              appropriate spot.
+            <CollapsableBadge
+              expand_class="success"
+              expand_text="Everything went well"
+              type="btn"
+            >
+              <p>
+                Great! Either use <code>relval report-results</code> on command
+                line (make sure to install the <code>relval</code> package
+                first), or modify the <SourceLink href={matrix_url} />
+                matrix directly by clicking on the <code>Edit</code> link next
+                to the Matrice's header, and put{" "}
+                <code>&#123;&#123;result|pass|YOUR_NAME_HERE|&#125;&#125;</code>{" "}
+                in the appropriate spot.
+              </p>
             </CollapsableBadge>
 
-            <CollapsableBadge expand_class="danger" expand_text="I found a bug!" type="btn">
-              Awesome! Ideally read up on https://fedoraproject.org/wiki/How_to_file_a_bug_report
+            <CollapsableBadge
+              expand_class="danger"
+              expand_text="I found a bug!"
+              type="btn"
+            >
+              Awesome! Ideally read up on
+              https://fedoraproject.org/wiki/How_to_file_a_bug_report
               <br />
-              If you don't feel like reading a wall of text, at least pot together a small document
-              containing:
+              If you don't feel like reading a wall of text, at least pot
+              together a small document containing:
               <ul>
                 <li>
-                  Brief description of what went wrong (e.g. "QA:Testcase_dualboot_with_windows -
-                  Bootloader does not show the Windows option")
+                  Brief description of what went wrong (e.g.
+                  "QA:Testcase_dualboot_with_windows - Bootloader does not show
+                  the Windows option")
                 </li>
                 <li>
                   The name of the ISO image you used (e.g.
                   "Fedora-Server-netinst-i386-Rawhide-20181227.n.0.iso")
                 </li>
                 <li>
-                  Note what you did, as precisely as possible, in a step-by-step fashion. Even
-                  details like "Chose Polish as the languae for the installation process" can
-                  matter.
+                  Note what you did, as precisely as possible, in a step-by-step
+                  fashion. Even details like "Chose Polish as the languae for
+                  the installation process" can matter.
                 </li>
                 <li>
-                  Try to reproduce the same state again based on the steps above (you can also
-                  experiment a bit, and try to come up with just the critical steps)
+                  Try to reproduce the same state again based on the steps above
+                  (you can also experiment a bit, and try to come up with just
+                  the critical steps)
                 </li>
                 <li>
-                  Share your notes on the internet (you can use fpaste), and ask for help with
-                  filing the bug report on our IRC channel #fedora-qa at freenode.net{" "}
+                  Share your notes on the internet (you can use fpaste), and ask
+                  for help with filing the bug report on our IRC channel
+                  #fedora-qa at freenode.net{" "}
                   <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
-                    If you are not that familiar with IRC, you can use the web-interface[link] just
-                    enter a Nickname of your choice, #fedora-qa (including the hash sign) in the
-                    Channels field, and click Connect.
+                    If you are not that familiar with IRC, you can use the
+                    web-interface[link] just enter a Nickname of your choice,
+                    #fedora-qa (including the hash sign) in the Channels field,
+                    and click Connect.
                   </CollapsableBadge>
                 </li>
               </ul>
-              Once you get the Bug reported, make sure to also submit the result into the testing
-              matrix. Either use <code>relval report-results</code> on command line (make sure to
-              install the <code>relval</code> package first), or modify the{" "}
-              <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
-                matrix
-              </a>{" "}
-              directly by clicking on the <code>Edit</code> link next to the Matrice's header, and
-              put <code>&#123;&#123;result|fail|YOUR_NAME_HERE|BUG_NUMBER|&#125;&#125;</code> in
-              the appropriate spot.
+              <p>
+                Once you get the Bug reported, make sure to also submit the
+                result into the testing matrix. Either use{" "}
+                <code>relval report-results</code> on command line (make sure to
+                install the <code>relval</code> package first), or modify the{" "}
+                <SourceLink href={matrix_url} />
+                matrix directly by clicking on the <code>Edit</code> link next
+                to the Matrice's header, and put{" "}
+                <code>
+                  &#123;&#123;result|fail|YOUR_NAME_HERE|BUG_NUMBER|&#125;&#125;
+                </code>{" "}
+                in the appropriate spot.
+              </p>
             </CollapsableBadge>
           </li>
         </ol>
       </ModalInfo>
-    )
+    );
   }
 }
 
 class ModalInfo extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       modal: false,
-    }
+    };
 
-    this.toggle = this.toggle.bind(this)
+    this.toggle = this.toggle.bind(this);
   }
 
   toggle(e) {
     this.setState({
       modal: !this.state.modal,
-    })
-    e.preventDefault()
+    });
+    e.preventDefault();
   }
 
   render() {
-    const project = this.props.buttonLabel.split(":")[0]
-    const ticket = this.props.buttonLabel.split(":")[1] //strip whitespace?
+    const project = this.props.buttonLabel.split(":")[0];
+    const ticket = this.props.buttonLabel.split(":")[1]; //strip whitespace?
 
     return (
       <div>
@@ -395,7 +427,8 @@ class ModalInfo extends Component {
           isOpen={this.state.modal}
           toggle={this.toggle}
           className={this.props.className}
-          size="lg">
+          size="lg"
+        >
           <ModalHeader toggle={this.toggle}>{project}</ModalHeader>
           <ModalBody>
             <h1>{ticket}</h1>
@@ -404,6 +437,6 @@ class ModalInfo extends Component {
           <ModalFooter></ModalFooter>
         </Modal>
       </div>
-    )
+    );
   }
 }
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index a9ecb3e..99e2da2 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -1,19 +1,19 @@
-import React, { Component } from "react"
-import WizardForm from "./WizardForm"
-import Layout from "../layout/Layout"
-import { oraculumApiUrl_v1 } from "../config"
-import Actions from "./Actions"
-import { Container, Row } from "reactstrap"
+import React, { Component } from "react";
+import WizardForm from "./WizardForm";
+import Layout from "../layout/Layout";
+import { oraculumApiUrl_v1 } from "../config";
+import Actions from "./Actions";
+import { Container, Row } from "reactstrap";
 
-import { connect } from "react-redux"
-import { loadWizardData } from "../actions/reduxActions"
+import { connect } from "react-redux";
+import { loadWizardData } from "../actions/reduxActions";
 
 class Wizard extends Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       actions: [],
-    }
+    };
   }
 
   componentDidMount() {
@@ -23,14 +23,14 @@ class Wizard extends Component {
         this.setState({
           providers: data.providers,
           all_actions: data.actions,
-        })
-      })
+        });
+      });
 
-    this.props.dispatch(loadWizardData())
+    this.props.dispatch(loadWizardData());
   }
 
   show_actions(actions) {
-    this.setState({ actions })
+    this.setState({ actions });
   }
 
   render() {
@@ -45,8 +45,12 @@ class Wizard extends Component {
             />
             <h1>Nothing sparked joy?</h1>
             <div>
-              None of the above looks interesting to you? We'd be happy if you looked around at{" "}
-              <a href="https://whatcanidoforfedora.org/">https://whatcanidoforfedora.org/</a>!
+              None of the above looks interesting to you? We'd be happy if you
+              looked around at{" "}
+              <a href="https://whatcanidoforfedora.org/">
+                https://whatcanidoforfedora.org/
+              </a>
+              !
             </div>
           </Container>
         </div>
@@ -58,14 +62,14 @@ class Wizard extends Component {
           </Row>
         </Container>
       </Layout>
-    )
+    );
   }
 }
 
 const mapStateToProps = (state) => {
   return {
     ...state.wizard,
-  }
-}
+  };
+};
 
-export default connect(mapStateToProps)(Wizard)
+export default connect(mapStateToProps)(Wizard);

