From 20a6ae8829ce71735d0d8388339c41623790f688 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 03 2021 14:07:39 +0000
Subject: [PATCH 1/9] solved conflicts


---

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..7a9dfa0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ddb3eec..438f2b2 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
   "homepage": ".",
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "bootstrap": "^4.4.1",
     "dateformat": "^3.0.3",
     "nanoid": "^3.1.22",
     "query-string": "^7.0.0",
diff --git a/public/index.html b/public/index.html
index db44964..016a790 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,12 +23,10 @@
     <title>Fedora QA Landingpage</title>
 
 
-    <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.2.0/fedora-bootstrap.css" type="text/css" rel="stylesheet" />
+    <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.5.0/fedora-bootstrap.css" type="text/css" rel="stylesheet" />
     <!-- <script type="text/javascript" src="https://apps.fedoraproject.org/global/fedora-bootstrap-1.0.3/fedora-bootstrap.js"></script>-->
     <script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js" integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous"></script>
 
-
-
   </head>
   <body>
     <noscript>
diff --git a/src/index.css b/src/index.css
index 27f6835..42b981d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,7 @@
 html {
   height: 100%;
   box-sizing: border-box;
-  font-family: 'Open Sans' !important;
+  font-family: "Open Sans" !important;
 }
 
 *,
@@ -17,6 +17,7 @@ body {
   padding: 0;
   background-color: #fff;
   padding-bottom: 10rem;
+  background-color: #fff;
 }
 
 code {
@@ -38,15 +39,15 @@ h1 {
 .navbar {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-  box-shadow:rgb(221, 221, 221) 0px 0px 10px 2px;
-  border-bottom-color:rgb(204, 204, 204);
+  box-shadow: rgb(221, 221, 221) 0px 0px 10px 2px;
+  border-bottom-color: rgb(204, 204, 204);
   border-bottom-style: solid;
   border-bottom-width: 1px;
 }
 
 .bluebox {
-  padding-top: 0.5em!important;
-  background-color: #f8f9fa!important;
+  padding-top: 0.5em !important;
+  background-color: #f8f9fa !important;
   padding-bottom: 0.8em;
   border-bottom-color: rgb(222, 226, 230);
   border-bottom-style: solid;
@@ -56,10 +57,9 @@ h1 {
 
 .padded {
   padding-top: 0.5em;
-  
 }
 
-.timeline { 
+.timeline {
   border-spacing: 0;
   border-collapse: collapse;
   margin: 0 auto;
@@ -67,7 +67,7 @@ h1 {
 
 .timeline td {
   padding: 0;
-  font-size: 0.8em !important;
+  font-size: 0.8em;
   width: 150;
   text-align: center;
   vertical-align: top;
@@ -78,11 +78,13 @@ h1 {
 }
 
 .events {
-  font-size: 0.8em !important;
+  font-size: 0.8rem;
+  font-weight: normal;
 }
 
 .bugscount {
   padding-left: 2em;
+  font-size: 0.8rem;
 }
 
 .smallsuper {
@@ -96,24 +98,22 @@ h1 {
 }
 
 .btn-tag {
-    margin-right: 0.5em;
-    margin-bottom: 0.5em;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 .btn-selected {
-    color: #000;
-    background-color: #aec4e3;
-    border-color: #aec4e3;
+  color: #000;
+  background-color: #aec4e3;
+  border-color: #aec4e3;
 }
-
-
 ol.steps > li {
   padding-bottom: 0.4em;
 }
 
 .card {
-  margin-bottom: 0.5em;
   font-size: 0.9rem !important;
+  height: 100%;
 }
 
 .card-body {
@@ -133,8 +133,50 @@ ol.steps > li {
   color: #777;
   font-size: 0.8em;
   background-color: #eee;
-  box-shadow:inset rgb(211, 211, 211) 0px 6px 10px -4px;
-  border-top-color:rgb(204, 204, 204);
+  box-shadow: inset rgb(211, 211, 211) 0px 6px 10px -4px;
+  border-top-color: rgb(204, 204, 204);
   border-top-style: solid;
   border-top-width: 1px;
 }
+
+.card-columns {
+  columns: 2;
+}
+
+.card-title {
+  font-weight: bold;
+  margin-bottom: 1.5em;
+}
+
+.event {
+  margin-bottom: 1.5em;
+}
+
+.date {
+  width: 3.7em;
+  margin-right: 1.5em;
+}
+
+.month {
+  width: 100%;
+  text-align: center;
+  border: 1px solid #ccc;
+  font-size: 0.8em;
+  font-weight: bold;
+  background-color: #ccc;
+  border-radius: 8px 8px 0 0;
+}
+
+.day {
+  font-size: 1.5em;
+  text-align: center;
+  width: 100%;
+  border-left: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-radius: 0 0 8px 8px;
+}
+
+.title {
+  font-size: 1.2em;
+}
diff --git a/src/index.js b/src/index.js
index 9c2349b..ca0b333 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,6 @@ import React from "react"
 import ReactDOM from "react-dom"
 
 import "./index.css"
-//import 'bootstrap/dist/css/bootstrap.min.css';
-
 import "typeface-open-sans"
 
 import App from "./App"
diff --git a/src/landingpage/Blockers.js b/src/landingpage/Blockers.js
index ef30f1b..89efa98 100644
--- a/src/landingpage/Blockers.js
+++ b/src/landingpage/Blockers.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { Row } from "reactstrap"
+import { Row, Card, CardBody } from "reactstrap"
 import SourceLink from "./SourceLink"
 import BugStats from "./common/BugStats"
 
@@ -12,16 +12,19 @@ class Blockers extends Component {
   render() {
     if (this.props.data)
       return (
-        <div>
-          <h1 className="padded">
-            Fedora {this.props.release} blockers and FEs{" "}
-            <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />
-          </h1>
-          <Row>
-            <BugStats milestone = {"Beta"} stats = {this.props.data.beta} />
-            <BugStats milestone = {"Final"} stats = {this.props.data.final} />
-          </Row>
-        </div>
+        <Card>
+          <CardBody>
+            <h1 className="text-center padded">
+              Fedora {this.props.release} blockers and FEs{" "}
+              <SourceLink href="https://qa.fedoraproject.org/blockerbugs/" />
+            </h1>
+            <Row>
+              <BugStats milestone={"Beta"} stats={this.props.data.beta} />
+
+              <BugStats milestone={"Final"} stats={this.props.data.final} />
+            </Row>
+          </CardBody>
+        </Card>
       )
   }
 }
diff --git a/src/landingpage/Events.js b/src/landingpage/Events.js
index 54eb80b..3151841 100644
--- a/src/landingpage/Events.js
+++ b/src/landingpage/Events.js
@@ -1,6 +1,7 @@
 import React, { Component } from "react"
 import dateFormat from "dateformat"
-import SourceLink from './SourceLink'
+import SourceLink from "./SourceLink"
+import { Card, CardBody, Row, Col } from "reactstrap"
 
 class Events extends Component {
   constructor(props) {
@@ -11,17 +12,17 @@ class Events extends Component {
   render() {
     const meetings = this.props.data.map((meeting) => {
       const old = new Date(meeting.start)
-      var meeting_start = dateFormat(
-        new Date(old.getTime() - old.getTimezoneOffset() * 60000),
-        "d mmm yyyy - HH:MM"
-      )
-      if (meeting.fullday) {
-        meeting_start = meeting_start.slice(0, -5) + "All day"
+      var date = old.getDate()
+      var month = old.toLocaleString("default", { month: "short" })
+      var time = dateFormat(new Date(old.getTime() - old.getTimezoneOffset() * 60000), "HH:MM")
+      if (time.fullday) {
+        time = date.slice(0, -5) + "All day"
       }
       return (
         <Event
-          key={meeting_start + meeting.summary}
-          start={meeting_start}
+          date={date}
+          month={month}
+          time={time}
           summary={meeting.summary}
           link={meeting.link}
           info={meeting.info}
@@ -29,13 +30,15 @@ class Events extends Component {
       )
     })
     return (
-      <div>
-        <h1 className="padded">
-          Meetings and testdays in the next 7 days{" "}
-          <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />
-        </h1>
-        <ul className="events">{meetings}</ul>
-      </div>
+      <Card>
+        <CardBody>
+          <h1 className="text-center padded">
+            Meetings and testdays in the next 7 days{" "}
+            <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />
+          </h1>
+          <div className="col-md-12 padded">{meetings}</div>
+        </CardBody>
+      </Card>
     )
   }
 }
@@ -43,14 +46,29 @@ class Events extends Component {
 class Event extends Component {
   render() {
     return (
-      <li key={this.props.start + this.props.summary}>
-        <b>{this.props.start}</b>
-        <br />
-        <a target="_blank" rel="noopener noreferrer" href={this.props.link}>
-          {this.props.summary}
-        </a>
-        <br />
-      </li>
+      <Row>
+        <Col md={6}>
+          <div class="d-flex flex-row align-items-center event">
+            <div class="d-flex flex-column align-items-center date">
+              <span class="month"> {this.props.month}</span>
+              <span class="day">{this.props.date}</span>
+            </div>
+
+            <div class="d-flex flex-column align-items-left">
+              <span class="title">
+                <a
+                  className="events"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={this.props.link}>
+                  {this.props.summary}
+                </a>
+              </span>
+              <span class="time">{this.props.time}</span>
+            </div>
+          </div>
+        </Col>
+      </Row>
     )
   }
 }
diff --git a/src/landingpage/Hideable.js b/src/landingpage/Hideable.js
deleted file mode 100644
index 9295373..0000000
--- a/src/landingpage/Hideable.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from "react"
-import uniqueID from "../helpers/uniqueID"
-
-class Hideable extends Component {
-  constructor(props) {
-    super(props)
-    this.id = uniqueID("hideable-id-")
-  }
-
-  render() {
-    if (this.props.component_name === undefined) {
-      return <div key={this.id} />
-    }
-    return (
-      <div
-        key={this.id}
-        className={
-          this.props.config_mode
-            ? this.props.is_enabled
-              ? "border border-dark"
-              : "bgcl border border-dark"
-            : ""
-        }>
-        {this.props.children}
-        <a
-          href="#"
-          className={this.props.config_mode ? "d-block text-center badge badge-primary" : "d-none"}
-          onClick={(e) => this.props.toggle_handler(e, this.props.component_name)}
-          role="button">
-          {this.props.is_enabled ? "Disable" : "Enable"}
-        </a>
-      </div>
-    )
-  }
-}
-
-export default Hideable
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index 478a18a..b406f41 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -1,12 +1,20 @@
 import React, { Component } from "react"
-import { Container, Row } from "reactstrap"
+import {
+  Container,
+  Row,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Col,
+} from "reactstrap"
 import { Link } from "react-router-dom"
 import Layout from "../layout/Layout"
 import Timeline from "./Timeline"
 import Events from "./Events"
 import Blockers from "./Blockers"
 import Minutes from "./Minutes"
-import Hideable from "./Hideable"
 import * as R from "ramda"
 import { connect } from "react-redux"
 import { loadData } from "../actions/reduxActions"
@@ -19,7 +27,7 @@ class LandingPage extends Component {
     this.available_components = ["events", "blockers", "minutes"]
     let enabled_components = this.cookies.get("landingpage_enabled_components")
     if (enabled_components === undefined) {
-      enabled_components = this.available_components.slice()
+      enabled_components = [...this.available_components]
       this.cookies.set("landingpage_enabled_components", enabled_components, {
         path: "/",
       })
@@ -33,38 +41,41 @@ class LandingPage extends Component {
       stable: 0,
       config_mode: false,
       enabled_components: enabled_components,
+      showModal: false,
     }
+    this.toggleModal = this.toggleModal.bind(this)
+    this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
   }
-
   componentDidMount() {
     this.props.dispatch(loadData())
   }
 
-  toggle_config_mode(e) {
-    let config_mode = !this.state.config_mode
-    this.setState({ config_mode: config_mode })
-    e.preventDefault()
-  }
-
-  toggle_component_visibility(e, name) {
-    if (name === undefined) {
-      e.preventDefault()
-      return
-    }
-    let enabled_components = this.state.enabled_components
-    if (enabled_components.includes(name)) {
-      enabled_components.splice(enabled_components.indexOf(name), 1)
+  handleVisibilityChange(e, item) {
+    let enabled_components = [...this.state.enabled_components]
+    if (enabled_components.includes(item)) {
+      enabled_components.splice(enabled_components.indexOf(item), 1)
     } else {
-      enabled_components.push(name)
+      enabled_components.push(item)
       enabled_components = this.available_components.filter((c) => enabled_components.includes(c))
     }
     this.cookies.set("landingpage_enabled_components", enabled_components, {
       path: "/",
     })
     this.setState({ enabled_components: enabled_components })
+  }
+
+  toggle_config_mode(e) {
+    let config_mode = !this.state.config_mode
+    this.setState({ config_mode: config_mode })
     e.preventDefault()
   }
 
+  toggleModal() {
+    let modalState = !this.state.showModal
+    this.setState({
+      showModal: modalState,
+    })
+  }
   render() {
     const available_components = {
       events: <Events data={this.props.meetings} />,
@@ -76,59 +87,83 @@ class LandingPage extends Component {
       this.state.config_mode ? this.available_components : this.state.enabled_components
     )
     components = components.map((row) => (
-      <Row>
+      <>
         {row.map((item) => (
-          <div className="col-md-6">
-            <Hideable
-              config_mode={this.state.config_mode}
-              toggle_handler={this.toggle_component_visibility.bind(this)}
-              component_name={item}
-              is_enabled={this.state.enabled_components.includes(item)}>
-              {available_components[item]}
-            </Hideable>
-          </div>
+          <div className="padded col-md-6">{available_components[item]}</div>
         ))}
-      </Row>
+      </>
     ))
 
     return (
       <Layout apiCallStatus={this.props.api_call_status}>
-        <div className="bluebox">
+        <div>
+          <div className="bluebox">
+            <Container>
+              <Row>
+                <div className="col-md-12">
+                  <Timeline data={this.props.schedule} />
+                </div>
+              </Row>
+            </Container>
+          </div>
           <Container>
             <Row>
+              {components}
+              <div className="padded col-md-12 text-right col-md-offset-2">
+                <Button className="mt" color="primary" onClick={this.toggleModal}>
+                  <i class="fas fa-cog"></i>
+                </Button>
+                <Modal isOpen={this.state.showModal} toggle={this.toggleModal}>
+                  <ModalHeader>Visibility Configuration</ModalHeader>
+                  <ModalBody>
+                    {this.available_components.map((item) => (
+                      <React.Fragment key={item}>
+                        <Col sm="12">
+                          <div class="custom-control custom-switch">
+                            <input
+                              type="checkbox"
+                              class="custom-control-input"
+                              id={item}
+                              checked={this.state.enabled_components.includes(item)}
+                              onChange={(e) => this.handleVisibilityChange(e, item)}
+                            />{" "}
+                            <label class="custom-control-label" for={item}>
+                              {item === "events"
+                                ? "Meetings and testdays in the next 7 days"
+                                : item === "minutes"
+                                ? "Fedora QA Meeting Minutes"
+                                : "Fedora 35 blockers and FEs"}
+                            </label>
+                          </div>
+                        </Col>
+                      </React.Fragment>
+                    ))}
+                  </ModalBody>
+                  <ModalFooter>
+                    <Button color="primary" onClick={this.toggleModal}>
+                      Close
+                    </Button>
+                  </ModalFooter>
+                </Modal>
+              </div>
+            </Row>
+            <Row className="d-flex justify-content-center padded">
               <div className="col-md-12">
-                <Timeline data={this.props.schedule} />
+                <h1 className="text-center">
+                  Have some spare time? Click on below button to contibute
+                </h1>
+              </div>
+              <div className="col-md-2 padded">
+                <Link
+                  className="btn btn-primary btn-block btn-wrap-text btn-lg active"
+                  to="/wizard"
+                  role="button">
+                  Explore <i class="fas fa-search"></i>
+                </Link>
               </div>
             </Row>
           </Container>
         </div>
-        <Container>
-          {components}
-          <Row className="padded">
-            <div className="col-md-12 text-right">
-              <a
-                href="#"
-                onClick={(e) => this.toggle_config_mode(e)}
-                className="badge badge-secondary events"
-                role="button">
-                {this.state.config_mode
-                  ? "Save changes"
-                  : "Configure visibility of the info-cards"}
-              </a>
-            </div>
-          </Row>
-          <Row className="padded">
-            <div className="col-md-12 padded">
-              <Link
-                className="btn btn-primary btn-block btn-wrap-text btn-lg active"
-                to="/wizard"
-                role="button">
-                Do you have some spare time? Feeling like helping others? Wanna improve Fedora?
-                Click here!
-              </Link>
-            </div>
-          </Row>
-        </Container>
       </Layout>
     )
   }
diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js
index 4f88f2b..e2646db 100644
--- a/src/landingpage/Minutes.js
+++ b/src/landingpage/Minutes.js
@@ -1,26 +1,29 @@
 import React, { Component } from "react"
+import { Card, CardBody } from "reactstrap"
 
 class Events extends Component {
   render() {
     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 />
-        </div>
-      </div>
+      <Card className="mt-20">
+        <CardBody>
+          <h1 className="text-center 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 />
+          </div>
+        </CardBody>
+      </Card>
     )
   }
 }
diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js
index 1de10c5..c49caff 100644
--- a/src/landingpage/Timeline.js
+++ b/src/landingpage/Timeline.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react"
-import SourceLink from './SourceLink'
+import { Card, CardBody } from "reactstrap"
+import SourceLink from "./SourceLink"
 
 class Timeline extends Component {
   constructor(props) {
@@ -48,19 +49,24 @@ class Timeline extends Component {
     })
     return (
       <div>
-        <h1 className="padded">
-          Current development schedule{" "}
-          <SourceLink href="https://fedorapeople.org/groups/schedule/" />
-        </h1>
-        <div className="table-responsive">
-          <table className="timeline">
-            <tbody>
-              <tr>{line}</tr>
-              <tr>{dates}</tr>
-              <tr>{schedule}</tr>
-            </tbody>
-          </table>
-        </div>
+        <Card>
+          <CardBody>
+            <h1 className="text-center padded">
+              Current development schedule{" "}
+              <SourceLink href="https://fedorapeople.org/groups/schedule/" />
+            </h1>
+            <div className="table-responsive">
+              <table className="timeline">
+                <tbody>
+                  <tr>{line}</tr>
+                  <tr>{dates}</tr>
+                  <tr>{schedule}</tr>
+                </tbody>
+              </table>
+            </div>
+            <h6 className="text-center padded">This is about the development schedule</h6>
+          </CardBody>
+        </Card>
       </div>
     )
   }
diff --git a/src/landingpage/common/BugStats.js b/src/landingpage/common/BugStats.js
index 938dadd..b3be054 100644
--- a/src/landingpage/common/BugStats.js
+++ b/src/landingpage/common/BugStats.js
@@ -1,39 +1,40 @@
-import React from 'react'
+import React from "react"
+import { Table } from "reactstrap"
 
 const BugStats = (props) => {
-    const { milestone, stats } = props;
-    
-    return (
-            <div className="col-md-6">
-              <table className="events">
-                <thead>
-                  <tr>
-                    <td colSpan="2">
-                      <b>{milestone}</b>
-                    </td>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td>Proposed Blockers</td>
-                    <td className="bugscount">{stats.blockers_proposed}</td>
-                  </tr>
-                  <tr>
-                    <td>Accepted Blockers</td>
-                    <td className="bugscount">{stats.blockers}</td>
-                  </tr>
-                  <tr>
-                    <td>Proposed FEs</td>
-                    <td className="bugscount">{stats.fe_proposed}</td>
-                  </tr>
-                  <tr>
-                    <td>Accepted FEs</td>
-                    <td className="bugscount">{stats.fe}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-    )
+  const { milestone, stats } = props
+
+  return (
+    <div className="col-md-6">
+      <Table className="events" striped bordered>
+        <thead>
+          <tr>
+            <td colSpan="2">
+              <b className="bugscount">{milestone}</b>
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Proposed Blockers</td>
+            <td className="bugscount">{stats.blockers_proposed}</td>
+          </tr>
+          <tr>
+            <td>Accepted Blockers</td>
+            <td className="bugscount">{stats.blockers}</td>
+          </tr>
+          <tr>
+            <td>Proposed FEs</td>
+            <td className="bugscount">{stats.fe_proposed}</td>
+          </tr>
+          <tr>
+            <td>Accepted FEs</td>
+            <td className="bugscount">{stats.fe}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  )
 }
 
 export default BugStats
diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js
index 12d2cba..da4ad49 100644
--- a/src/wizard/WizardForm.js
+++ b/src/wizard/WizardForm.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { Row, Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
+import { Row, Button } from "reactstrap"
 import * as R from "ramda"
 
 const durationString = {
@@ -51,7 +51,7 @@ class WizardForm extends Component {
         .filter((p) => p.duration === duration)
         .map((p) => {
           const btncolor =
-            this.state.selected_provider.provider === p.provider ? "selected" : "primary"
+            this.state.selected_provider.provider === p.provider ? "secondary" : "primary"
           return (
             <div className="card" key={"provider_card" + p.provider}>
               <div className="card-body">
diff --git a/yarn.lock b/yarn.lock
index 783b184..8c2d60b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -118,10 +118,10 @@
     "@babel/helper-annotate-as-pure" "^7.12.13"
     regexpu-core "^4.7.1"
 
-"@babel/helper-define-polyfill-provider@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.1.tgz#e6f5f4a6edc3722152c21359190de67fc6cf664d"
-  integrity sha512-x3AUTVZNPunaw1opRTa5OwVA5N0YxGlIad9xQ5QflK1uIS7PnAGGU5O2Dj/G183fR//N8AzTq+Q8+oiu9m0VFg==
+"@babel/helper-define-polyfill-provider@^0.2.2":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz#0525edec5094653a282688d34d846e4c75e9c0b6"
+  integrity sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==
   dependencies:
     "@babel/helper-compilation-targets" "^7.13.0"
     "@babel/helper-module-imports" "^7.12.13"
@@ -1378,6 +1378,16 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@reduxjs/toolkit@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5"
+  integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==
+  dependencies:
+    immer "^8.0.1"
+    redux "^4.0.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -1606,9 +1616,9 @@
     redux "^4.0.0"
 
 "@types/react@*":
-  version "17.0.7"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.7.tgz#5f2ca73d8baee8c286e96c95df557799ac0d1996"
-  integrity sha512-lBc3fY20hRFQ/pXQT2XdtmpJeXZnRH8N+WPnEzEfPTzuKmaJTA7k/xGWHBaPvKceKpbf0ZnMlLWY/0sFZ5rfkw==
+  version "17.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.8.tgz#fe76e3ba0fbb5602704110fd1e3035cf394778e3"
+  integrity sha512-3sx4c0PbXujrYAKwXxNONXUtRp9C+hE2di0IuxFyf5BELD+B+AXL8G7QrmSKhVwKZDbv0igiAjQAMhXj8Yg3aw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2297,28 +2307,28 @@ babel-plugin-named-asset-import@^0.3.6:
   integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
 babel-plugin-polyfill-corejs2@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.1.tgz#ae2cf6d6f1aa7c0edcf04a25180e8856a6d1184f"
-  integrity sha512-hXGSPbr6IbjeMyGew+3uGIAkRjBFSOJ9FLDZNOfHuyJZCcoia4nd/72J0bSgvfytcVfUcP/dxEVcUhVJuQRtSw==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz#e9124785e6fd94f94b618a7954e5693053bf5327"
+  integrity sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==
   dependencies:
     "@babel/compat-data" "^7.13.11"
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
+    "@babel/helper-define-polyfill-provider" "^0.2.2"
     semver "^6.1.1"
 
 babel-plugin-polyfill-corejs3@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.1.tgz#786f40218040030f0edecfd48e6e59f1ee9bef53"
-  integrity sha512-WZCqF3DLUhdTD/P381MDJfuP18hdCZ+iqJ+wHtzhWENpsiof284JJ1tMQg1CE+hfCWyG48F7e5gDMk2c3Laz7w==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.2.tgz#7424a1682ee44baec817327710b1b094e5f8f7f5"
+  integrity sha512-l1Cf8PKk12eEk5QP/NQ6TH8A1pee6wWDJ96WjxrMXFLHLOBFzYM4moG80HFgduVhTqAFez4alnZKEhP/bYHg0A==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
+    "@babel/helper-define-polyfill-provider" "^0.2.2"
     core-js-compat "^3.9.1"
 
 babel-plugin-polyfill-regenerator@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.1.tgz#ca9595d7d5f3afefec2d83126148b90db751a091"
-  integrity sha512-T3bYyL3Sll2EtC94v3f+fA8M28q7YPTOZdB++SRHjvYZTvtd+WorMUq3tDTD4Q7Kjk1LG0gGromslKjcO5p2TA==
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz#b310c8d642acada348c1fa3b3e6ce0e851bee077"
+  integrity sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.2.1"
+    "@babel/helper-define-polyfill-provider" "^0.2.2"
 
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
@@ -2787,9 +2797,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
-  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
-  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
+  version "1.0.30001230"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
+  integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3194,17 +3204,17 @@ copy-descriptor@^0.1.0:
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
 core-js-compat@^3.6.2, core-js-compat@^3.9.0, core-js-compat@^3.9.1:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.12.1.tgz#2c302c4708505fa7072b0adb5156d26f7801a18b"
-  integrity sha512-i6h5qODpw6EsHAoIdQhKoZdWn+dGBF3dSS8m5tif36RlWvW3A6+yu2S16QHUo3CrkzrnEskMAt9f8FxmY9fhWQ==
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.13.0.tgz#a88f5fa81d8e9b15d7f98abc4447a4dfca2a358f"
+  integrity sha512-jhbI2zpVskgfDC9mGRaDo1gagd0E0i/kYW0+WvibL/rafEHKAHO653hEXIxJHqRlRLITluXtRH3AGTL5qJmifQ==
   dependencies:
     browserslist "^4.16.6"
     semver "7.0.0"
 
 core-js-pure@^3.0.0:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.12.1.tgz#934da8b9b7221e2a2443dc71dfa5bd77a7ea00b8"
-  integrity sha512-1cch+qads4JnDSWsvc7d6nzlKAippwjUlf6vykkTLW53VSV+NkE6muGBToAjEA8pG90cSfcud3JgVmW2ds5TaQ==
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.13.0.tgz#9d267fb47d1d7046cfbc05e7b67bb235b6735355"
+  integrity sha512-7VTvXbsMxROvzPAVczLgfizR8CyYnvWPrb1eGrtlZAJfjQWEHLofVfCKljLHdpazTfpaziRORwUH/kfGDKvpdA==
 
 core-js@^2.4.0:
   version "2.6.12"
@@ -3212,9 +3222,9 @@ core-js@^2.4.0:
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
 core-js@^3.5.0:
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.12.1.tgz#6b5af4ff55616c08a44d386f1f510917ff204112"
-  integrity sha512-Ne9DKPHTObRuB09Dru5AjwKjY4cJHVGu+y5f7coGn1E9Grkc3p2iBwE9AI/nJzsE29mQF7oq+mhYYRqOMFN1Bw==
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.13.0.tgz#58ca436bf01d6903aee3d364089868d0d89fe58d"
+  integrity sha512-iWDbiyha1M5vFwPFmQnvRv+tJzGbFAm6XimJUT0NgHYW3xZEs1SkCAcasWSVFxpI2Xb/V1DDJckq3v90+bQnog==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -3727,9 +3737,9 @@ dns-equal@^1.0.0:
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.3.tgz#7b62ee6e6aaac0c2de27cfc4a06af59cacb9cb38"
-  integrity sha512-dDwDMOJU+m6Qx+LhltSV+BWNrMaTqx3eXkAqgt/iouWTXGZMffg1rOSnG2xa3lWqmJ9xTBc7fgIe/css4S1rxA==
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
@@ -3876,9 +3886,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.723:
-  version "1.3.738"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.738.tgz#aec24b091c82acbfabbdcce08076a703941d17ca"
-  integrity sha512-vCMf4gDOpEylPSLPLSwAEsz+R3ShP02Y3cAKMZvTqule3XcPp7tgc/0ESI7IS6ZeyBlGClE50N53fIOkcIVnpw==
+  version "1.3.740"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.740.tgz#e38b7d2b848f632191b643e6dabca51be2162922"
+  integrity sha512-Mi2m55JrX2BFbNZGKYR+2ItcGnR4O5HhrvgoRRyZQlaMGQULqDhoGkLWHzJoshSzi7k1PUofxcDbNhlFrDZNhg==
 
 elliptic@^6.5.3:
   version "6.5.4"
@@ -3958,10 +3968,10 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
-  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
+es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2, es-abstract@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.2.tgz#6eb518b640262e8ddcbd48e0bc8549f82efd48a7"
+  integrity sha512-byRiNIQXE6HWNySaU6JohoNXzYgbBjztwFnBLUTiJmWXjaU9bSq3urQLUlNLQ292tc+gc07zYZXNZjaOoAX3sw==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
@@ -3971,14 +3981,14 @@ es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
     has-symbols "^1.0.2"
     is-callable "^1.2.3"
     is-negative-zero "^2.0.1"
-    is-regex "^1.1.2"
-    is-string "^1.0.5"
-    object-inspect "^1.9.0"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
     object-keys "^1.1.1"
     object.assign "^4.1.2"
     string.prototype.trimend "^1.0.4"
     string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.0"
+    unbox-primitive "^1.0.1"
 
 es-to-primitive@^1.2.1:
   version "1.2.1"
@@ -4541,6 +4551,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
+  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -5285,6 +5300,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@^8.0.1:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a"
+  integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -5707,7 +5727,7 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-regex@^1.0.4, is-regex@^1.1.2:
+is-regex@^1.0.4, is-regex@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
   integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
@@ -5735,7 +5755,7 @@ is-stream@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-string@^1.0.5:
+is-string@^1.0.5, is-string@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
   integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
@@ -7011,9 +7031,9 @@ nan@^2.12.1:
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
 nanoid@^3.1.22:
-  version "3.1.22"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
-  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
+  version "3.1.23"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -7211,11 +7231,11 @@ object-copy@^0.1.0:
     kind-of "^3.0.3"
 
 object-hash@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09"
-  integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
-object-inspect@^1.9.0:
+object-inspect@^1.10.3, object-inspect@^1.9.0:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
   integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
@@ -7251,14 +7271,13 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     object-keys "^1.1.1"
 
 object.entries@^1.1.0, object.entries@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
-  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
+  integrity sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
+    es-abstract "^1.18.2"
 
 object.fromentries@^2.0.2:
   version "2.0.4"
@@ -7287,14 +7306,13 @@ object.pick@^1.3.0:
     isobject "^3.0.1"
 
 object.values@^1.1.0, object.values@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
-  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
+  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has "^1.0.3"
+    es-abstract "^1.18.2"
 
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
@@ -8585,6 +8603,16 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
+query-string@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.0.tgz#aaad2c8d5c6a6d0c6afada877fecbd56af79e609"
+  integrity sha512-Iy7moLybliR5ZgrK/1R3vjrXq03S13Vz4Rbm5Jg3EFq1LUmQppto0qtXz4vqZ386MSRjZgnTSZ9QC+NZOSd/XA==
+  dependencies:
+    decode-uri-component "^0.2.0"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -9128,6 +9156,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -9737,6 +9770,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -9846,6 +9884,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+strict-uri-encode@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
+  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -9881,14 +9924,15 @@ string-width@^4.1.0:
     strip-ansi "^6.0.0"
 
 string.prototype.matchall@^4.0.2:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
-  integrity sha512-pknFIWVachNcyqRfaQSeu/FUfpvJTe4uskUSZ9Wc1RijsPuzbZ8TyYT8WCNnntCjUEqQ3vUHMAfVj2+wLAisPQ==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz#59370644e1db7e4c0c045277690cf7b01203c4da"
+  integrity sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
-    has-symbols "^1.0.1"
+    es-abstract "^1.18.2"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.2"
     internal-slot "^1.0.3"
     regexp.prototype.flags "^1.3.1"
     side-channel "^1.0.4"
@@ -10332,7 +10376,7 @@ typeface-open-sans@0.0.54:
   resolved "https://registry.yarnpkg.com/typeface-open-sans/-/typeface-open-sans-0.0.54.tgz#20f5b5ea5c7f95d89dc1f8b2d2b1457680129cee"
   integrity sha512-w6wOd6EicZdZKf0jSU/K3EzEi3zFgvWQSN7NOpRIQI5KeMWmC5Pg/lqtBVJHB0pRChYRmLdhf4h8ROur0A3JZQ==
 
-unbox-primitive@^1.0.0:
+unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
   integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==

From 08f1257488e874b2e32d08b3881316f8f5ddb3c9 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 05 2021 08:30:33 +0000
Subject: [PATCH 2/9] improve UI


---

diff --git a/src/index.css b/src/index.css
index 42b981d..d7bae65 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,3 +180,12 @@ ol.steps > li {
 .title {
   font-size: 1.2em;
 }
+
+.clickable {
+  cursor: pointer;
+}
+
+.card-selected {
+  background-image: linear-gradient(to bottom, #eee 0%, #ddd 100%);
+  border: #8f9092 solid 2px;
+}
diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js
index ebccbfc..5e70370 100644
--- a/src/wizard/Easyfix.js
+++ b/src/wizard/Easyfix.js
@@ -1,4 +1,5 @@
 import React, { Component } from "react"
+import { Row } from "reactstrap"
 import { CollapsableCard } from "./components"
 
 export default class Easyfix extends Component {
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index 5af0e8b..9ffd598 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import Layout from "../layout/Layout"
-import { Container, Row } from "reactstrap"
+import { Card, CardBody, Col, Container, Row } from "reactstrap"
 
 import { connect } from "react-redux"
 import { loadWizardData } from "../actions/reduxActions"
@@ -64,31 +64,24 @@ class Wizard extends Component {
     console.log(this.state.steps)
     return (
       <Layout apiCallStatus={this.props.api_call_status}>
-        {/* <div className="bluebox"> */}
-        {/* <div className="bluebox">
-          <Container>
-            <WizardForm
-              show_actions={this.show_actions.bind(this)}
-              actions={this.props.all_actions}
-              providers={this.props.providers}
-            />
-            <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>!
-            </div>
-          </Container>
-        </div>
-        <Container>
-          <Row>
-            <div className="col-md-12">
-              <Actions data={this.state.actions} />
-            </div>
-          </Row>
-        </Container> */}
-        <Container>
-          <Wizard2 steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
-        </Container>
+        {/* <Card className=" d-flex justify-content-center">
+          <CardBody> */}
+        <Row className="justify-content-center align-items-center">
+          <Col md="12">
+            <Wizard2 steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
+          </Col>
+          {this.state.steps.currentStep === "STEP1" ? (
+            <Col md="12">
+              <h1 className="padded text-center">Nothing sparked joy?</h1>
+              <h4 className="padded text-center">
+                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>!
+              </h4>
+            </Col>
+          ) : null}
+        </Row>
+        {/* </CardBody>
+        </Card> */}
       </Layout>
     )
   }
diff --git a/src/wizard/Wizard2.js b/src/wizard/Wizard2.js
index 17da2eb..b85006f 100644
--- a/src/wizard/Wizard2.js
+++ b/src/wizard/Wizard2.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { Container } from "reactstrap"
 import Step1 from "./step/Step1"
 import Step2 from "./step/Step2"
 import Step3 from "./step/Step3"
@@ -10,12 +11,12 @@ const Wizard2 = (props) => {
   } = props
 
   return (
-    <div>
+    <Container className="steps">
       {currentStep === "STEP1" && <Step1 {...props} />}
       {currentStep === "STEP2" && <Step2 {...props} />}
       {currentStep === "STEP3" && <Step3 {...props} />}
       {currentStep === "STEP4" && <Step4 {...props} />}
-    </div>
+    </Container>
   )
 }
 
diff --git a/src/wizard/components.js b/src/wizard/components.js
index 4b2c8f3..b849d70 100644
--- a/src/wizard/components.js
+++ b/src/wizard/components.js
@@ -1,8 +1,35 @@
 import React, { Component } from "react"
-import { Card, CardHeader, CardBody, UncontrolledCollapse, Row } from "reactstrap"
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  UncontrolledCollapse,
+  Row,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  Col,
+  ModalFooter,
+  Button,
+} from "reactstrap"
 import uniqueID from "../helpers/uniqueID"
 
 class CollapsableCard extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showModal: false,
+    }
+    this.toggleModal = this.toggleModal.bind(this)
+  }
+
+  toggleModal() {
+    let modalState = !this.state.showModal
+    this.setState({
+      showModal: modalState,
+    })
+  }
+
   render() {
     const { title, expand_text, expand_class, children } = this.props
     const id = uniqueID("collapsable-card-id-")
@@ -11,29 +38,78 @@ class CollapsableCard extends Component {
         <CardHeader>
           <Row>
             <div className="col-md-11">{title}</div>
+
             <div className="col-md-1">
-              <Toggler id={id} color={expand_class} text={expand_text} />
+              <Button
+                color="primary"
+                className="padded btn float-right"
+                onClick={this.toggleModal}>
+                "Show me!
+              </Button>{" "}
+              <Modal isOpen={this.state.showModal} toggle={this.toggleModal}>
+                <ModalBody>{children}</ModalBody>
+                <ModalFooter>
+                  <Button color="primary" onClick={this.toggleModal}>
+                    Close
+                  </Button>
+                </ModalFooter>
+              </Modal>
+              {/* <Toggler id={id} color={expand_class} text={expand_text} /> */}
             </div>
           </Row>
         </CardHeader>
-        <UncontrolledCollapse toggler={"#" + id}>
+        {/* <UncontrolledCollapse toggler={"#" + id}>
           <CardBody>{children}</CardBody>
-        </UncontrolledCollapse>
+        </UncontrolledCollapse> */}
       </Card>
     )
   }
 }
 
 class CollapsableBadge extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showModal: false,
+    }
+    this.toggleModal = this.toggleModal.bind(this)
+  }
+
+  toggleModal() {
+    let modalState = !this.state.showModal
+    this.setState({
+      showModal: modalState,
+    })
+  }
   render() {
     const { expand_text, expand_class, children, type } = this.props
     const id = uniqueID("collapsable-badge-id-")
     return (
       <span>
-        <a class={type + " " + type + "-" + expand_class} href="#" id={id} role="button">
+        {/* <a className={type + " " + type + "-" + expand_class} href="#" id={id} role="button">
           {expand_text}
         </a>
-        <UncontrolledCollapse toggler={"#" + id}>{children}</UncontrolledCollapse>
+        <UncontrolledCollapse toggler={"#" + id}>
+          <Card>
+            <CardBody>{children}</CardBody>
+          </Card>
+        </UncontrolledCollapse> */}
+        <Button
+          className={type + " " + type + "-" + expand_class}
+          href="#"
+          id={id}
+          color="primary"
+          onClick={this.toggleModal}>
+          {expand_text}
+        </Button>{" "}
+        <Modal isOpen={this.state.showModal} toggle={this.toggleModal}>
+          <ModalBody>{children}</ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.toggleModal}>
+              Close
+            </Button>
+          </ModalFooter>
+        </Modal>
       </span>
     )
   }
diff --git a/src/wizard/step/Step1.js b/src/wizard/step/Step1.js
index 5d399c7..4e34923 100644
--- a/src/wizard/step/Step1.js
+++ b/src/wizard/step/Step1.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Card, CardBody, CardTitle, CardText, Button } from "reactstrap"
+import { Card, CardBody, CardTitle, CardText, Button, Col, Row, Container } from "reactstrap"
 
 const Step1 = (props) => {
   const [selectedItem, setItem] = useState(null)
@@ -10,41 +10,52 @@ const Step1 = (props) => {
   }
 
   return (
-    <div>
-      <Card
-        onClick={() => {
-          handleStep("SEVERAL_DAYS")
-        }}>
-        <CardBody>
-          <CardTitle tag="h5">SEVERAL_DAYS</CardTitle>
-          <CardText>
-            Some quick example text to build on the card title and make up the bulk of the card's
-            content.
-          </CardText>
-        </CardBody>
-      </Card>
-
-      <Card
-        onClick={() => {
-          handleStep("FEW_HOURS")
-        }}>
-        <CardBody>
-          <CardTitle tag="h5">FEW_HOURS</CardTitle>
-          <CardText>
-            Some quick example text to build on the card title and make up the bulk of the card's
-            content.
-          </CardText>
-        </CardBody>
-      </Card>
-
-      <Button
-        disabled={selectedItem === null}
-        onClick={() => {
-          onNext("STEP1", selectedItem)
-        }}>
-        Next
-      </Button>
-    </div>
+    <Row className="padded">
+      <Col sm="12">
+        <h1 className="text-center">
+          Click on any of the below card to see data of your choice and press next
+        </h1>
+      </Col>
+      <Col sm="6">
+        <Card
+          className={
+            "clickable text-center" + (selectedItem === "SEVERAL_DAYS" ? " card-selected" : "")
+          }
+          body
+          type="btn"
+          onClick={() => {
+            handleStep("SEVERAL_DAYS")
+          }}>
+          <h1 className="padded">Several Days</h1>
+          <CardText>click on the card to view Several Days </CardText>
+        </Card>
+      </Col>
+      <Col sm="6">
+        <Card
+          className={
+            "clickable text-center" + (selectedItem === "FEW_HOURS" ? " card-selected" : "")
+          }
+          body
+          type="btn"
+          onClick={() => {
+            handleStep("FEW_HOURS")
+          }}>
+          <h1 className="padded">Few Hours</h1>
+          <CardText>click on the card to view Few Hours </CardText>
+        </Card>
+      </Col>
+      <Col sm="12">
+        <Button
+          color="primary"
+          className="padded btn float-right"
+          disabled={selectedItem === null}
+          onClick={() => {
+            onNext("STEP1", selectedItem)
+          }}>
+          Next
+        </Button>
+      </Col>
+    </Row>
   )
 }
 
diff --git a/src/wizard/step/Step2.js b/src/wizard/step/Step2.js
index 8f2b0c6..4bc5a69 100644
--- a/src/wizard/step/Step2.js
+++ b/src/wizard/step/Step2.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { shallowEqual, useSelector } from "react-redux"
-import { Card, CardBody, CardTitle, CardText, Button, Row } from "reactstrap"
+import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
 
 const Step2 = (props) => {
   const [selectedItem, setItem] = useState(null)
@@ -21,50 +21,26 @@ const Step2 = (props) => {
   const fewHours = providers.filter((provider) => provider.duration === 3)
   const severalDays = providers.filter((provider) => provider.duration === 72)
 
-  // const fewHours = [
-  //   {
-  //     title: "Bodhi Karma",
-  //     id: "BODHI",
-  //     details: {
-  //       description: "DESCRIPTION",
-  //       time: "7PM",
-  //     },
-  //   },
-  //   {
-  //     title: "Manual Karma",
-  //     id: "MANUAL",
-  //     details: {
-  //       description: "DESCRIPTION",
-  //       time: "7PM",
-  //     },
-  //   },
-  // ]
-
-  // const severalDays = [
-  //   {
-  //     title: "Programming Easy Fix",
-  //     id: "EASYFIX",
-  //     details: {
-  //       description: "DESCRIPTION",
-  //       time: "7PM",
-  //     },
-  //   },
-  // ]
-
   return (
-    <div>
+    <Row>
       {step.STEP1 === "SEVERAL_DAYS" && (
         <>
           {severalDays.map((item) => (
-            <Card
-              onClick={() => {
-                handleStep(item.provider)
-              }}>
-              <CardBody>
-                <CardTitle tag="h5">{item.name}</CardTitle>
-                <CardText>{item.description}</CardText>
-              </CardBody>
-            </Card>
+            <Col sm="6">
+              <Card
+                className={
+                  "clickable text-center" +
+                  (selectedItem === item.provider ? " card-selected" : "")
+                }
+                onClick={() => {
+                  handleStep(item.provider)
+                }}>
+                <CardBody>
+                  <CardTitle tag="h5">{item.name}</CardTitle>
+                  <CardText>{item.description}</CardText>
+                </CardBody>
+              </Card>
+            </Col>
           ))}
         </>
       )}
@@ -72,28 +48,42 @@ const Step2 = (props) => {
       {step.STEP1 === "FEW_HOURS" && (
         <>
           {fewHours.map((item) => (
-            <Card
-              onClick={() => {
-                handleStep(item.provider)
-              }}>
-              <CardBody>
-                <CardTitle tag="h5">{item.name}</CardTitle>
-                <CardText>{item.description}</CardText>
-              </CardBody>
-            </Card>
+            <Col sm="6">
+              <Card
+                className={
+                  "clickable text-center" +
+                  (selectedItem === item.provider ? " card-selected" : "")
+                }
+                onClick={() => {
+                  handleStep(item.provider)
+                }}>
+                <CardBody>
+                  <CardTitle tag="h5">{item.name}</CardTitle>
+                  <CardText>{item.description}</CardText>
+                </CardBody>
+              </Card>
+            </Col>
           ))}
         </>
       )}
-      <Button
-        onClick={() => {
-          onPrev("STEP1")
-        }}>
-        Previous
-      </Button>
-      <Button disabled={selectedItem === null} onClick={(e) => onNext("STEP2", selectedItem)}>
-        Next
-      </Button>
-    </div>
+      <Col sm="12">
+        <Button
+          className="padded float-left"
+          color="primary"
+          onClick={() => {
+            onPrev("STEP1")
+          }}>
+          Previous
+        </Button>
+        <Button
+          color="primary"
+          className="padded btn float-right"
+          disabled={selectedItem === null}
+          onClick={(e) => onNext("STEP2", selectedItem)}>
+          Next
+        </Button>
+      </Col>
+    </Row>
   )
 }
 
diff --git a/src/wizard/step/Step3.js b/src/wizard/step/Step3.js
index e39b6fa..9440e0a 100644
--- a/src/wizard/step/Step3.js
+++ b/src/wizard/step/Step3.js
@@ -1,11 +1,12 @@
 import React, { useState } from "react"
 import { shallowEqual, useSelector } from "react-redux"
-import { Card, CardBody, CardTitle, CardText, Button } from "reactstrap"
+import { Card, CardBody, CardTitle, CardText, Button, Col, Row } from "reactstrap"
 
 import FedoraManualTesting from "../FedoraManualTesting"
 import FedoraEasyKarma from "../FedoraEasyKarma"
 import Easyfix from "../Easyfix"
 import * as R from "ramda"
+import Step2 from "./Step2"
 
 const Step3 = (props) => {
   const [selectedItem, setItem] = useState(null)
@@ -18,48 +19,12 @@ const Step3 = (props) => {
   const handleStep = (option) => {
     setItem(option)
   }
-
-  const languages = [
-    {
-      title: "Bash",
-      id: "BASH",
-    },
-    {
-      title: "c",
-      id: "C",
-    },
-    {
-      title: "c#",
-      id: "C#",
-    },
-    {
-      title: "Html",
-      id: "HTML",
-    },
-    {
-      title: "javscript",
-      id: "JAVACRIPT",
-    },
-    {
-      title: "python",
-      id: "PYTHON",
-    },
-    {
-      title: "Php",
-      id: "PHP",
-    },
-    {
-      title: "Ruby",
-      id: "RUBY",
-    },
-  ]
-
+  const { STEP2 } = step
   const selectAction = (state) => state.wizard.all_actions
 
   const actions = useSelector(selectAction, shallowEqual)
   console.log(actions)
-  const grouped = R.groupBy((action) => action.provider, actions)
-  console.log(grouped)
+  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
 
   const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
     const getProcessedData = R.pipe(
@@ -74,87 +39,86 @@ const Step3 = (props) => {
     "testtype",
     "section"
   )
-  const easyfixTestingData = processData(grouped["easyfix"] || [], "repo_org", "repo_name")
 
-  console.log(manualTestingData)
-  console.log(easyfixTestingData)
+  const getData = () => {
+    const getUniqueTags = R.pipe(
+      R.map((action) => action.tags),
+      R.flatten,
+      R.uniq
+    )
+    const tags = getUniqueTags(grouped["easyfix"])
+    return tags
+  }
+
   return (
-    <div>
+    <Row>
       {step.STEP2 === "fedora_manual_testing" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("BODHI")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">BODI</CardTitle>
-              <CardText>
-                <FedoraManualTesting data={manualTestingData} key="fmtl" />
-              </CardText>
-            </CardBody>
-          </Card>
+        <Col sm="12">
+          <FedoraManualTesting data={manualTestingData} key="fmtl" />
           <Button
             onClick={() => {
               onPrev("STEP2")
-            }}>
+            }}
+            color="primary">
             Previous
           </Button>
-        </>
+        </Col>
       )}
 
       {step.STEP2 === "fedora_easy_karma" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("MANUAL")
-            }}>
+        <Col sm="12">
+          <Card>
             <CardBody>
-              <CardTitle tag="h5">MANUAL</CardTitle>
-              <CardText>
-                <FedoraEasyKarma data={grouped["fedora_easy_karma"]} key="karma" />
-              </CardText>
+              <FedoraEasyKarma data={grouped["fedora_easy_karma"]} key="karma" />
             </CardBody>
           </Card>
           <Button
+            className="padded btn float-left"
+            color="primary"
             onClick={() => {
               onPrev("STEP2")
             }}>
             Previous
           </Button>
-        </>
+        </Col>
       )}
-      {step.STEP2 === "EASYFIX" && (
+      {step.STEP2 === "easyfix" && (
         <>
-          {languages.map((item) => (
-            <>
+          {getData().map((lang) => (
+            <Col sm="6">
               <Card
+                className={
+                  "clickable text-center" + (selectedItem === lang ? " card-selected" : "")
+                }
                 onClick={() => {
-                  handleStep(item.id)
+                  handleStep(lang)
                 }}>
                 <CardBody>
-                  <CardTitle tag="h5">{item.id}</CardTitle>
-                  <CardText>
-                    Some quick example text to build on the card title and make up the bulk of the
-                    card's content.
-                  </CardText>
-                  <Easyfix data={easyfixTestingData} key="easyfix" />
+                  <CardTitle tag="h1">{lang}</CardTitle>
                 </CardBody>
               </Card>
-            </>
+            </Col>
           ))}
-
-          <Button
-            onClick={() => {
-              onPrev("STEP2")
-            }}>
-            Previous
-          </Button>
-          <Button disabled={selectedItem === null} onClick={(e) => onNext("STEP3", selectedItem)}>
-            Next
-          </Button>
+          <Col md="12">
+            <Button
+              className="padded btn float-left"
+              color="primary"
+              onClick={() => {
+                onPrev("STEP2")
+              }}>
+              Previous
+            </Button>
+            <Button
+              color="primary"
+              className="padded btn float-right"
+              disabled={selectedItem === null}
+              onClick={(e) => onNext("STEP3", selectedItem)}>
+              Next
+            </Button>
+          </Col>
         </>
       )}
-    </div>
+    </Row>
   )
 }
 
diff --git a/src/wizard/step/Step4.js b/src/wizard/step/Step4.js
index 0d9fadf..bd2b774 100644
--- a/src/wizard/step/Step4.js
+++ b/src/wizard/step/Step4.js
@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Card, CardBody, CardTitle, CardText, Button } from "reactstrap"
+import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
+import { shallowEqual, useSelector } from "react-redux"
+import * as R from "ramda"
+import Easyfix from "../Easyfix"
 
 const Step4 = (props) => {
   const [selectedItem, setItem] = useState(null)
@@ -9,147 +12,48 @@ const Step4 = (props) => {
     steps: { step },
   } = props
 
+  const { STEP2, STEP3 } = step
+
+  const selectAction = (state) => state.wizard.all_actions
+
+  const actions = useSelector(selectAction, shallowEqual)
+  console.log(actions)
+  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
+
+  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
+    const getProcessedData = R.pipe(
+      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
+      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
+    )
+    return getProcessedData(data)
+  }
+
+  const getData = () => {
+    const actions = R.filter((a) => a.tags.includes(STEP3), grouped["easyfix"])
+    return actions
+  }
+
+  const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
+
   const handleStep = (option) => {
     setItem(option)
   }
 
   return (
-    <div>
-      {step.STEP3 === "BASH" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("BASH")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">BASH</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "C" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("C")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">C</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "C#" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("C#")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">C#</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "HTML" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("HTML")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">HTML</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "JAVACRIPT" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("JAVACRIPT")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">JavaScript</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "PYTHON" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("PYTHON")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">PYTHON</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}{" "}
-      {step.STEP3 === "PHP" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("PHP")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">PHP</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}
-      {step.STEP3 === "RUBY" && (
-        <>
-          <Card
-            onClick={() => {
-              handleStep("RUBY")
-            }}>
-            <CardBody>
-              <CardTitle tag="h5">RUBY</CardTitle>
-              <CardText>
-                Some quick example text to build on the card title and make up the bulk of the
-                card's content.
-              </CardText>
-            </CardBody>
-          </Card>
-        </>
-      )}
+    <Row>
+      <Col sm="12">
+        <Easyfix data={easyfixTestingData} key="easyfix" />
+      </Col>
+
       <Button
+        className="padded btn float-left"
+        color="primary"
         onClick={() => {
           onPrev("STEP3")
         }}>
         Previous
       </Button>
-    </div>
+    </Row>
   )
 }
 

From 10c0810f6ba9b558d166cc4371d154fa3bccd5ea Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 07 2021 06:18:44 +0000
Subject: [PATCH 3/9] stepper implementation for wizard


---

diff --git a/src/App.js b/src/App.js
index dbc93fe..8b8864d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,6 @@ import { BrowserRouter } from "react-router-dom"
 import Wizard from "./wizard/Wizard"
 import LandingPage from "./landingpage/LandingPage"
 import NotFound from "./NotFound"
-import ConnectingPage from "./wizard/ConnectingPage"
 
 class App extends Component {
   render() {
@@ -15,7 +14,7 @@ class App extends Component {
         <div>
           <Switch>
             <Route path="/" exact component={LandingPage} />
-            <Route path="/ConnectingPage" component={ConnectingPage} />
+
             <Route path="/wizard" component={Wizard} />
             <Route path="/landingpage" component={LandingPage} />
             <Route component={NotFound} />
diff --git a/src/index.css b/src/index.css
index d7bae65..430d3da 100644
--- a/src/index.css
+++ b/src/index.css
@@ -57,6 +57,7 @@ h1 {
 
 .padded {
   padding-top: 0.5em;
+  font-weight: normal;
 }
 
 .timeline {
@@ -186,6 +187,20 @@ ol.steps > li {
 }
 
 .card-selected {
-  background-image: linear-gradient(to bottom, #eee 0%, #ddd 100%);
-  border: #8f9092 solid 2px;
+  background-image: linear-gradient(to bottom, #eee 0%, rgb(241, 240, 240) 100%);
+  border: #c8c9ca solid 2px;
+}
+.wrapper {
+  display: flex;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+.wizard {
+  position: relative;
+  padding: 60px 3px;
+}
+.actions {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
diff --git a/src/wizard/Actions.js b/src/wizard/Actions.js
deleted file mode 100644
index f58370f..0000000
--- a/src/wizard/Actions.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Component } from "react"
-
-import Easyfix from "./Easyfix"
-import FedoraManualTesting from "./FedoraManualTesting"
-import FedoraEasyKarma from "./FedoraEasyKarma"
-import * as R from "ramda"
-
-export class Actions extends Component {
-  render() {
-    var outdata = []
-    const grouped = R.groupBy((action) => action.provider, this.props.data)
-
-    const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
-      const getProcessedData = R.pipe(
-        R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
-        R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
-      )
-      return getProcessedData(data)
-    }
-
-    const manualTestingData = processData(
-      grouped["fedora_manual_testing"] || [],
-      "testtype",
-      "section"
-    )
-    const easyfixTestingData = processData(grouped["easyfix"] || [], "repo_org", "repo_name")
-
-    outdata.push(<FedoraManualTesting data={manualTestingData} key="fmtl" />)
-    outdata.push(<Easyfix data={easyfixTestingData} key="easyfix" />)
-    outdata.push(<FedoraEasyKarma data={grouped["fedora_easy_karma"]} key="karma" />)
-
-    return <div>{outdata}</div>
-  }
-}
-export default Actions
diff --git a/src/wizard/ConnectingPage.js b/src/wizard/ConnectingPage.js
deleted file mode 100644
index 86a8227..0000000
--- a/src/wizard/ConnectingPage.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { Component } from "react"
-import WizardForm from "./WizardForm"
-import Layout from "../layout/Layout"
-import Actions from "./Actions"
-import { Container, Row } from "reactstrap"
-
-import { connect } from "react-redux"
-import { loadWizardData } from "../actions/reduxActions"
-
-class Wizard extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      actions: [],
-    }
-    this.getData = this.getData.bind(this)
-  }
-
-  getData() {
-    this.props.dispatch(loadWizardData())
-  }
-
-  componentDidMount() {
-    this.getData()
-  }
-
-  show_actions(actions) {
-    this.setState({ actions })
-  }
-
-  render() {
-    return (
-      <Layout apiCallStatus={this.props.api_call_status}>
-        <div className="bluebox">
-          <Container>
-            <WizardForm
-              show_actions={this.show_actions.bind(this)}
-              actions={this.props.all_actions}
-              providers={this.props.providers}
-            />
-            <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>!
-            </div>
-          </Container>
-        </div>
-        <Container>
-          <Row>
-            <div className="col-md-12">
-              <Actions data={this.state.actions} />
-            </div>
-          </Row>
-        </Container>
-      </Layout>
-    )
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    ...state.wizard,
-  }
-}
-
-export default connect(mapStateToProps)(Wizard)
diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js
index 5e70370..ebccbfc 100644
--- a/src/wizard/Easyfix.js
+++ b/src/wizard/Easyfix.js
@@ -1,5 +1,4 @@
 import React, { Component } from "react"
-import { Row } from "reactstrap"
 import { CollapsableCard } from "./components"
 
 export default class Easyfix extends Component {
diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js
index d4e6be6..830cce5 100644
--- a/src/wizard/FedoraEasyKarma.js
+++ b/src/wizard/FedoraEasyKarma.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { CollapsableBadge } from "./components"
+import { CollapsableBadge, ModalBadge } from "./components"
 
 export default class FedoraEasyKarmaItemsList extends Component {
   render() {
@@ -70,7 +70,7 @@ export default class FedoraEasyKarmaItemsList extends Component {
                 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?">
+                <ModalBadge 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.
@@ -82,7 +82,7 @@ export default class FedoraEasyKarmaItemsList extends Component {
                   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>
+                </ModalBadge>
               </CollapsableBadge>
             </li>
             <li>
@@ -94,7 +94,7 @@ export default class FedoraEasyKarmaItemsList extends Component {
                 <br />
                 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?">
+                <ModalBadge expand_text="Not sure what Karma means?">
                   <ol>
                     <li>
                       Enter <code>1</code> to mark positive karma (the update works just fine, as
@@ -123,7 +123,7 @@ export default class FedoraEasyKarmaItemsList extends Component {
                       it in the comment.
                     </li>
                   </ol>
-                </CollapsableBadge>
+                </ModalBadge>
               </CollapsableBadge>
             </li>
             <li>
diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index 21fbc21..9ef1f50 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
-import { CollapsableCard, CollapsableBadge } from "./components"
+import { CollapsableCard, ModalBadge } from "./components"
 
 export default class FedoraManualTesting extends Component {
   render() {
@@ -106,7 +106,7 @@ class FedoraManualTestingItemsListSub1 extends Component {
     }
 
     return (
-      <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
+      <CollapsableCard title={l1} expand_text="See" expand_class="primary">
         {subsections}
       </CollapsableCard>
     )
@@ -167,7 +167,7 @@ class FedoraManualTestingItem extends Component {
             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
               Tescase matrix
             </a>{" "}
-            <CollapsableBadge expand_text="Not sure what that means?">
+            <ModalBadge 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
@@ -181,7 +181,7 @@ class FedoraManualTestingItem extends Component {
                   results.
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -190,7 +190,7 @@ class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             briefly, just to have a general idea of what you will be doing.{" "}
-            <CollapsableBadge expand_text="Not making much sense?">
+            <ModalBadge expand_text="Not making much sense?">
               The testcases are generally split into four sections:
               <ul>
                 <li>
@@ -210,7 +210,7 @@ class FedoraManualTestingItem extends Component {
                   order to decide whether it Passed of Failed
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -222,7 +222,7 @@ class FedoraManualTestingItem extends Component {
               here
             </a>
             .{" "}
-            <CollapsableBadge expand_text="Not sure how?">
+            <ModalBadge expand_text="Not sure how?">
               <ul>
                 <li>
                   Most of the time Workstation Live, or Server DVD are fine, but sometimes there
@@ -230,7 +230,7 @@ class FedoraManualTestingItem extends Component {
                 </li>
                 <li>
                   Make sure to read about identifying the environment above.{" "}
-                  <CollapsableBadge expand_text="Show me!">
+                  <ModalBadge expand_text="See">
                     <ul>
                       <li>
                         Have a look at the matrix. The rows are the testcases, and the columns are
@@ -245,10 +245,10 @@ class FedoraManualTestingItem extends Component {
                         missing results.
                       </li>
                     </ul>
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -257,11 +257,11 @@ class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             thoroughly, to be sure you know what to do.{" "}
-            <CollapsableBadge expand_text="Feeling a bit lost?">
+            <ModalBadge expand_text="Feeling a bit lost?">
               <ul>
                 <li>
                   The testcase structure is not making sense?{" "}
-                  <CollapsableBadge expand_text="Click here">
+                  <ModalBadge expand_text="Click here">
                     The testcases are generally split into four sections:
                     <ul>
                       <li>
@@ -281,12 +281,12 @@ class FedoraManualTestingItem extends Component {
                         testing in order to decide whether it Passed of Failed
                       </li>
                     </ul>
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </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{" "}
-                  <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
+                  <ModalBadge expand_text="Don&#39;t have an IRC client?">
                     If you are not that familiar with IRC, you can use the{" "}
                     <a
                       target="_blank"
@@ -296,15 +296,15 @@ class FedoraManualTestingItem extends Component {
                     </a>{" "}
                     just enter a Nickname of your choice, #fedora-qa (including the hash sign) in
                     the Channels field, and click Connect.
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <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">
+            <ModalBadge 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}>
@@ -313,9 +313,9 @@ class FedoraManualTestingItem extends Component {
               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>
+            </ModalBadge>
 
-            <CollapsableBadge expand_class="danger" expand_text="I found a bug!" type="btn">
+            <ModalBadge 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
@@ -341,11 +341,11 @@ class FedoraManualTestingItem extends Component {
                 <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{" "}
-                  <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
+                  <ModalBadge 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.
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
               Once you get the Bug reported, make sure to also submit the result into the testing
@@ -357,7 +357,7 @@ class FedoraManualTestingItem extends Component {
               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.
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
         </ol>
       </ModalInfo>
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index 9ffd598..cfb7561 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -4,7 +4,7 @@ import { Card, CardBody, Col, Container, Row } from "reactstrap"
 
 import { connect } from "react-redux"
 import { loadWizardData } from "../actions/reduxActions"
-import Wizard2 from "./Wizard2"
+import WizardStepper from "./WizardStepper"
 
 class Wizard extends Component {
   constructor(props) {
@@ -66,20 +66,24 @@ class Wizard extends Component {
       <Layout apiCallStatus={this.props.api_call_status}>
         {/* <Card className=" d-flex justify-content-center">
           <CardBody> */}
-        <Row className="justify-content-center align-items-center">
-          <Col md="12">
-            <Wizard2 steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
-          </Col>
-          {this.state.steps.currentStep === "STEP1" ? (
+        <Container>
+          <Row className="justify-content-center align-items-center">
             <Col md="12">
-              <h1 className="padded text-center">Nothing sparked joy?</h1>
-              <h4 className="padded text-center">
-                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>!
-              </h4>
+              <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
+              {this.state.steps.currentStep === "STEP1" ? (
+                <Col md="12">
+                  <h1 className="padded text-center">Nothing sparked joy?</h1>
+                  <h4 className="padded text-center">
+                    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>
+                    !
+                  </h4>
+                </Col>
+              ) : null}
             </Col>
-          ) : null}
-        </Row>
+          </Row>
+        </Container>
         {/* </CardBody>
         </Card> */}
       </Layout>
diff --git a/src/wizard/Wizard2.js b/src/wizard/Wizard2.js
deleted file mode 100644
index b85006f..0000000
--- a/src/wizard/Wizard2.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react"
-import { Container } from "reactstrap"
-import Step1 from "./step/Step1"
-import Step2 from "./step/Step2"
-import Step3 from "./step/Step3"
-import Step4 from "./step/Step4"
-
-const Wizard2 = (props) => {
-  const {
-    steps: { currentStep },
-  } = props
-
-  return (
-    <Container className="steps">
-      {currentStep === "STEP1" && <Step1 {...props} />}
-      {currentStep === "STEP2" && <Step2 {...props} />}
-      {currentStep === "STEP3" && <Step3 {...props} />}
-      {currentStep === "STEP4" && <Step4 {...props} />}
-    </Container>
-  )
-}
-
-export default Wizard2
diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js
deleted file mode 100644
index da4ad49..0000000
--- a/src/wizard/WizardForm.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { Component } from "react"
-import { Row, Button } from "reactstrap"
-import * as R from "ramda"
-
-const durationString = {
-  3: "Few hours",
-  72: "Several days",
-}
-
-class WizardForm extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      selected_provider: "",
-      selected_provider_tags: [],
-      toggle: false,
-    }
-  }
-
-  provider_selected(provider) {
-    const getUniqueTags = R.pipe(
-      R.map((action) => action.tags),
-      R.flatten,
-      R.uniq
-    )
-    const tags = getUniqueTags(this.props.actions[provider.provider])
-
-    this.props.show_actions([])
-    this.setState(
-      {
-        selected_provider: provider,
-        selected_provider_tags: tags,
-      },
-      () => {
-        if (!provider.tags) this.props.show_actions(this.props.actions[provider.provider])
-      }
-    )
-  }
-
-  tag_selected(tag) {
-    const actions = R.filter(
-      (a) => a.tags.includes(tag),
-      this.props.actions[this.state.selected_provider.provider]
-    )
-    this.props.show_actions(actions)
-  }
-
-  render() {
-    const providers = [3, 72].map((duration) => {
-      const duration_providers = this.props.providers
-        .filter((p) => p.duration === duration)
-        .map((p) => {
-          const btncolor =
-            this.state.selected_provider.provider === p.provider ? "secondary" : "primary"
-          return (
-            <div className="card" key={"provider_card" + p.provider}>
-              <div className="card-body">
-                <Row key={p.provider}>
-                  <div className="col-md-10">
-                    <strong>
-                      {p.scope} - {p.name}
-                    </strong>
-                    <br />
-                    {p.description}
-                  </div>
-                  <div className="col-md-2">
-                    <Button
-                      className="btn-sm btn-block btn-wrap-text float-right"
-                      color={btncolor}
-                      onClick={(event) => this.provider_selected(p)}>
-                      Tell me more!
-                    </Button>
-                  </div>
-                </Row>
-              </div>
-            </div>
-          )
-        })
-
-      return (
-        <div key={duration}>
-          <h1 className="padded">{durationString[duration]}</h1>
-          {duration_providers}
-        </div>
-      )
-    })
-
-    const tag_selector =
-      this.state.selected_provider === "" || !this.state.selected_provider.tags ? null : (
-        <Row>
-          <div className="col-md-12">
-            <h1 className="padded">Make your choice!</h1>
-            <Tags
-              key={this.state.selected_provider.provider}
-              data={this.state.selected_provider_tags.sort()}
-              handler={this.tag_selected.bind(this)}
-            />
-          </div>
-        </Row>
-      )
-
-    return (
-      <div>
-        <Row>
-          <div className="col-md-12">{providers}</div>
-        </Row>
-        {tag_selector}
-      </div>
-    )
-  }
-}
-
-class Tags extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      selected_button: undefined,
-    }
-  }
-
-  selected(t) {
-    this.props.handler(t)
-    this.setState({ selected_button: t })
-  }
-
-  is_selected(t) {
-    return t === this.state.selected_button ? "selected" : "primary"
-  }
-
-  render() {
-    var x = this.props.data.map((tag) => (
-      <Button
-        onClick={() => this.selected(tag)}
-        className="btn-sm btn-tag"
-        color={this.is_selected(tag)}
-        key={tag}>
-        {tag}
-      </Button>
-    ))
-    return <div>{x}</div>
-  }
-}
-
-export default WizardForm
diff --git a/src/wizard/WizardStepper.js b/src/wizard/WizardStepper.js
new file mode 100644
index 0000000..a5e84ad
--- /dev/null
+++ b/src/wizard/WizardStepper.js
@@ -0,0 +1,25 @@
+import React from "react"
+import { Container, Row } from "reactstrap"
+import Step1 from "./step/Step1"
+import Step2 from "./step/Step2"
+import Step3 from "./step/Step3"
+import Step4 from "./step/Step4"
+
+const WizardStepper = (props) => {
+  const {
+    steps: { currentStep },
+  } = props
+
+  return (
+    <Container className="wrapper">
+      <div className="wizard">
+        {currentStep === "STEP1" && <Step1 {...props} />}
+        {currentStep === "STEP2" && <Step2 {...props} />}
+        {currentStep === "STEP3" && <Step3 {...props} />}
+        {currentStep === "STEP4" && <Step4 {...props} />}
+      </div>
+    </Container>
+  )
+}
+
+export default WizardStepper
diff --git a/src/wizard/components.js b/src/wizard/components.js
index b849d70..85b7471 100644
--- a/src/wizard/components.js
+++ b/src/wizard/components.js
@@ -6,9 +6,7 @@ import {
   UncontrolledCollapse,
   Row,
   Modal,
-  ModalHeader,
   ModalBody,
-  Col,
   ModalFooter,
   Button,
 } from "reactstrap"
@@ -37,30 +35,15 @@ class CollapsableCard extends Component {
       <Card>
         <CardHeader>
           <Row>
-            <div className="col-md-11">{title}</div>
-
-            <div className="col-md-1">
-              <Button
-                color="primary"
-                className="padded btn float-right"
-                onClick={this.toggleModal}>
-                "Show me!
-              </Button>{" "}
-              <Modal isOpen={this.state.showModal} toggle={this.toggleModal}>
-                <ModalBody>{children}</ModalBody>
-                <ModalFooter>
-                  <Button color="primary" onClick={this.toggleModal}>
-                    Close
-                  </Button>
-                </ModalFooter>
-              </Modal>
-              {/* <Toggler id={id} color={expand_class} text={expand_text} /> */}
+            <div className="col-sm-10">{title}</div>
+            <div className="col-sm-2">
+              <Toggler id={id} color={expand_class} text={expand_text} />
             </div>
           </Row>
         </CardHeader>
-        {/* <UncontrolledCollapse toggler={"#" + id}>
+        <UncontrolledCollapse toggler={"#" + id}>
           <CardBody>{children}</CardBody>
-        </UncontrolledCollapse> */}
+        </UncontrolledCollapse>
       </Card>
     )
   }
@@ -86,14 +69,6 @@ class CollapsableBadge extends Component {
     const id = uniqueID("collapsable-badge-id-")
     return (
       <span>
-        {/* <a className={type + " " + type + "-" + expand_class} href="#" id={id} role="button">
-          {expand_text}
-        </a>
-        <UncontrolledCollapse toggler={"#" + id}>
-          <Card>
-            <CardBody>{children}</CardBody>
-          </Card>
-        </UncontrolledCollapse> */}
         <Button
           className={type + " " + type + "-" + expand_class}
           href="#"
@@ -106,7 +81,7 @@ class CollapsableBadge extends Component {
           <ModalBody>{children}</ModalBody>
           <ModalFooter>
             <Button color="primary" onClick={this.toggleModal}>
-              Close
+              Close <i class="fas fa-times-circle"></i>
             </Button>
           </ModalFooter>
         </Modal>
@@ -115,21 +90,46 @@ class CollapsableBadge extends Component {
   }
 }
 
+class ModalBadge extends Component {
+  render() {
+    const { expand_text, expand_class, children, type } = this.props
+    const id = uniqueID("collapsable-badge-id-")
+    return (
+      <span>
+        <Button className={type + " " + type + "-" + expand_class} href="#" id={id} role="button">
+          {expand_text}
+        </Button>
+
+        <UncontrolledCollapse toggler={"#" + id} className="actions">
+          <Card>
+            <CardBody>{children}</CardBody>
+          </Card>
+        </UncontrolledCollapse>
+      </span>
+    )
+  }
+}
+
 CollapsableBadge.defaultProps = {
   type: "badge",
   expand_class: "primary",
 }
 
+ModalBadge.defaultProps = {
+  type: "badge",
+  expand_class: "primary",
+}
+
 class Toggler extends Component {
   render() {
     const { id, text, color } = this.props
     const classes = "btn btn-sm float-right btn-" + color
     return (
       <button className={classes} href="#" id={id}>
-        {text}
+        {text} <i class="fas fa-compass"></i>
       </button>
     )
   }
 }
 
-export { CollapsableCard, CollapsableBadge }
+export { CollapsableCard, CollapsableBadge, ModalBadge }
diff --git a/src/wizard/step/Step1.js b/src/wizard/step/Step1.js
index 4e34923..7d00f14 100644
--- a/src/wizard/step/Step1.js
+++ b/src/wizard/step/Step1.js
@@ -1,9 +1,12 @@
 import React, { useState } from "react"
-import { Card, CardBody, CardTitle, CardText, Button, Col, Row, Container } from "reactstrap"
+import { Card, CardText, Button, Col, Row } from "reactstrap"
 
 const Step1 = (props) => {
-  const [selectedItem, setItem] = useState(null)
-  const { onNext, onPrev, step } = props
+  const { onNext, onPrev, steps } = props
+  const {
+    step: { STEP1 },
+  } = steps
+  const [selectedItem, setItem] = useState(STEP1)
 
   const handleStep = (option) => {
     setItem(option)
@@ -12,7 +15,7 @@ const Step1 = (props) => {
   return (
     <Row className="padded">
       <Col sm="12">
-        <h1 className="text-center">
+        <h1 className="event text-center">
           Click on any of the below card to see data of your choice and press next
         </h1>
       </Col>
@@ -26,8 +29,10 @@ const Step1 = (props) => {
           onClick={() => {
             handleStep("SEVERAL_DAYS")
           }}>
-          <h1 className="padded">Several Days</h1>
-          <CardText>click on the card to view Several Days </CardText>
+          <h1 className="padded">
+            Several Days <i class="fas fa-calendar-week"></i>
+          </h1>
+          <CardText>Task that can take up to Several Days </CardText>
         </Card>
       </Col>
       <Col sm="6">
@@ -40,19 +45,21 @@ const Step1 = (props) => {
           onClick={() => {
             handleStep("FEW_HOURS")
           }}>
-          <h1 className="padded">Few Hours</h1>
-          <CardText>click on the card to view Few Hours </CardText>
+          <h1 className="padded">
+            Few Hours <i class="fas fa-calendar-day"></i>
+          </h1>
+          <CardText>Task that can take up to Few Hours </CardText>
         </Card>
       </Col>
-      <Col sm="12">
+      <Col sm="12" className="d-flex justify-content-around">
         <Button
           color="primary"
-          className="padded btn float-right"
+          className="actions float-right"
           disabled={selectedItem === null}
           onClick={() => {
             onNext("STEP1", selectedItem)
           }}>
-          Next
+          Next <i class="fas fa-chevron-circle-right"></i>
         </Button>
       </Col>
     </Row>
diff --git a/src/wizard/step/Step2.js b/src/wizard/step/Step2.js
index 4bc5a69..3694c8e 100644
--- a/src/wizard/step/Step2.js
+++ b/src/wizard/step/Step2.js
@@ -3,13 +3,14 @@ import { shallowEqual, useSelector } from "react-redux"
 import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
 
 const Step2 = (props) => {
-  const [selectedItem, setItem] = useState(null)
   const {
     onNext,
     onPrev,
     steps: { step },
   } = props
 
+  const [selectedItem, setItem] = useState(step.STEP2)
+
   const handleStep = (option) => {
     setItem(option)
   }
@@ -21,8 +22,24 @@ const Step2 = (props) => {
   const fewHours = providers.filter((provider) => provider.duration === 3)
   const severalDays = providers.filter((provider) => provider.duration === 72)
 
+  const getIcon = (type) => {
+    switch (type) {
+      case "fedora_manual_testing":
+        return <i class="fas fa-user-check"></i>
+      case "easy_fix":
+        return <i class="fas fa-magic"></i>
+      default:
+        return <i class="fab fa-fedora"></i>
+    }
+  }
+
   return (
-    <Row>
+    <Row className="justify-content-center">
+      <Col sm="12">
+        <h1 className="event text-center">
+          Click on any of the below card to see data of your choice and press next
+        </h1>
+      </Col>
       {step.STEP1 === "SEVERAL_DAYS" && (
         <>
           {severalDays.map((item) => (
@@ -36,7 +53,9 @@ const Step2 = (props) => {
                   handleStep(item.provider)
                 }}>
                 <CardBody>
-                  <CardTitle tag="h5">{item.name}</CardTitle>
+                  <CardTitle tag="h4">
+                    {item.name} {getIcon(item.provider)}
+                  </CardTitle>
                   <CardText>{item.description}</CardText>
                 </CardBody>
               </Card>
@@ -58,7 +77,9 @@ const Step2 = (props) => {
                   handleStep(item.provider)
                 }}>
                 <CardBody>
-                  <CardTitle tag="h5">{item.name}</CardTitle>
+                  <CardTitle tag="h4">
+                    {item.name} {getIcon(item.provider)}
+                  </CardTitle>
                   <CardText>{item.description}</CardText>
                 </CardBody>
               </Card>
@@ -66,21 +87,21 @@ const Step2 = (props) => {
           ))}
         </>
       )}
-      <Col sm="12">
+      <Col sm="12" className="d-flex justify-content-around">
         <Button
-          className="padded float-left"
+          className="actions float-left"
           color="primary"
           onClick={() => {
             onPrev("STEP1")
           }}>
-          Previous
+          <i class="fas fa-chevron-circle-left"></i> Previous
         </Button>
         <Button
           color="primary"
-          className="padded btn float-right"
+          className="actions btn float-right"
           disabled={selectedItem === null}
           onClick={(e) => onNext("STEP2", selectedItem)}>
-          Next
+          Next <i class="fas fa-chevron-circle-right"></i>
         </Button>
       </Col>
     </Row>
diff --git a/src/wizard/step/Step3.js b/src/wizard/step/Step3.js
index 9440e0a..af126a1 100644
--- a/src/wizard/step/Step3.js
+++ b/src/wizard/step/Step3.js
@@ -1,21 +1,20 @@
 import React, { useState } from "react"
 import { shallowEqual, useSelector } from "react-redux"
-import { Card, CardBody, CardTitle, CardText, Button, Col, Row } from "reactstrap"
+import { Card, CardBody, CardTitle, Button, Col, Row } from "reactstrap"
 
 import FedoraManualTesting from "../FedoraManualTesting"
 import FedoraEasyKarma from "../FedoraEasyKarma"
-import Easyfix from "../Easyfix"
 import * as R from "ramda"
-import Step2 from "./Step2"
 
 const Step3 = (props) => {
-  const [selectedItem, setItem] = useState(null)
   const {
     onNext,
     onPrev,
     steps: { step },
   } = props
 
+  const [selectedItem, setItem] = useState(step.STEP3)
+
   const handleStep = (option) => {
     setItem(option)
   }
@@ -50,17 +49,34 @@ const Step3 = (props) => {
     return tags
   }
 
+  const getLanguageIcon = (lang) => {
+    switch (lang) {
+      case "Python":
+        return <i class="fab fa-python"></i>
+      case "JavaScript":
+        return <i class="fab fa-js-square"></i>
+      case "HTML":
+        return <i class="fab fa-html5"></i>
+      case "PHP":
+        return <i class="fab fa-php"></i>
+      default:
+        return <i class="fas fa-terminal"></i>
+    }
+  }
+
   return (
     <Row>
       {step.STEP2 === "fedora_manual_testing" && (
         <Col sm="12">
           <FedoraManualTesting data={manualTestingData} key="fmtl" />
+
           <Button
             onClick={() => {
               onPrev("STEP2")
             }}
+            className="actions btn float-left"
             color="primary">
-            Previous
+            <i class="fas fa-chevron-circle-left"></i> Previous
           </Button>
         </Col>
       )}
@@ -73,17 +89,23 @@ const Step3 = (props) => {
             </CardBody>
           </Card>
           <Button
-            className="padded btn float-left"
+            className="actions btn float-left"
             color="primary"
             onClick={() => {
               onPrev("STEP2")
             }}>
-            Previous
+            <i class="fas fa-chevron-circle-left"></i> Previous
           </Button>
         </Col>
       )}
       {step.STEP2 === "easyfix" && (
         <>
+          <Col sm="12">
+            <h1 className="event text-center">
+              Click on any of the below card to see programming language of your choice and press
+              next
+            </h1>
+          </Col>
           {getData().map((lang) => (
             <Col sm="6">
               <Card
@@ -94,26 +116,28 @@ const Step3 = (props) => {
                   handleStep(lang)
                 }}>
                 <CardBody>
-                  <CardTitle tag="h1">{lang}</CardTitle>
+                  <CardTitle tag="h1">
+                    {lang} {getLanguageIcon(lang)}{" "}
+                  </CardTitle>
                 </CardBody>
               </Card>
             </Col>
           ))}
           <Col md="12">
             <Button
-              className="padded btn float-left"
+              className="actions btn float-left"
               color="primary"
               onClick={() => {
                 onPrev("STEP2")
               }}>
-              Previous
+              <i class="fas fa-chevron-circle-left"></i> Previous
             </Button>
             <Button
               color="primary"
-              className="padded btn float-right"
+              className="actions btn float-right"
               disabled={selectedItem === null}
               onClick={(e) => onNext("STEP3", selectedItem)}>
-              Next
+              <i class="fas fa-chevron-circle-right"></i> Next
             </Button>
           </Col>
         </>
diff --git a/src/wizard/step/Step4.js b/src/wizard/step/Step4.js
index bd2b774..357f11e 100644
--- a/src/wizard/step/Step4.js
+++ b/src/wizard/step/Step4.js
@@ -1,11 +1,10 @@
-import React, { useState } from "react"
-import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
+import React from "react"
+import { Button, Row, Col } from "reactstrap"
 import { shallowEqual, useSelector } from "react-redux"
 import * as R from "ramda"
 import Easyfix from "../Easyfix"
 
 const Step4 = (props) => {
-  const [selectedItem, setItem] = useState(null)
   const {
     onNext,
     onPrev,
@@ -35,24 +34,20 @@ const Step4 = (props) => {
 
   const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
 
-  const handleStep = (option) => {
-    setItem(option)
-  }
-
   return (
     <Row>
       <Col sm="12">
         <Easyfix data={easyfixTestingData} key="easyfix" />
-      </Col>
 
-      <Button
-        className="padded btn float-left"
-        color="primary"
-        onClick={() => {
-          onPrev("STEP3")
-        }}>
-        Previous
-      </Button>
+        <Button
+          className="actions btn float-left"
+          color="primary"
+          onClick={() => {
+            onPrev("STEP3")
+          }}>
+          <i class="fas fa-chevron-circle-left"></i> Previous
+        </Button>
+      </Col>
     </Row>
   )
 }

From 00b1ec5be863e141b2c26c5a40a11232a07b4901 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 07 2021 13:10:27 +0000
Subject: [PATCH 4/9] filter implementation


---

diff --git a/src/wizard/Filter.js b/src/wizard/Filter.js
new file mode 100644
index 0000000..5a39cac
--- /dev/null
+++ b/src/wizard/Filter.js
@@ -0,0 +1,63 @@
+import React, { useState } from "react"
+import { shallowEqual, useSelector } from "react-redux"
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap"
+
+import * as R from "ramda"
+import Easyfix from "./Easyfix"
+
+function Filter() {
+  const [lang, setLang] = useState(null)
+
+  const getlang = (lang) => {
+    setLang(lang)
+  }
+
+  const selectAction = (state) => state.wizard.all_actions
+
+  const actions = useSelector(selectAction, shallowEqual)
+  console.log(actions)
+  const grouped = R.groupBy((action) => action.provider, actions["easyfix"])
+
+  const getData = () => {
+    const getUniqueTags = R.pipe(
+      R.map((action) => action.tags),
+      R.flatten,
+      R.uniq
+    )
+    const tags = getUniqueTags(grouped["easyfix"])
+    return tags
+  }
+
+  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
+    const getProcessedData = R.pipe(
+      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
+      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
+    )
+    return getProcessedData(data)
+  }
+
+  //   const getData2 = () => {
+  //     const actions = R.filter((a) => a.tags.includes(lang), grouped["easyfix"])
+  //     return actions
+  //   }
+
+  const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
+
+  console.log(lang)
+
+  return (
+    <div>
+      <UncontrolledDropdown>
+        <DropdownToggle caret>language</DropdownToggle>
+        <DropdownMenu>
+          {getData().map((language) => (
+            <DropdownItem onClick={() => getlang(language)}>{language}</DropdownItem>
+          ))}
+        </DropdownMenu>
+      </UncontrolledDropdown>
+      <Easyfix data={easyfixTestingData} key="easyfix" />
+    </div>
+  )
+}
+
+export default Filter
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index cfb7561..d854992 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -1,10 +1,11 @@
 import React, { Component } from "react"
 import Layout from "../layout/Layout"
-import { Card, CardBody, Col, Container, Row } from "reactstrap"
+import { Col, Container, Row } from "reactstrap"
 
 import { connect } from "react-redux"
 import { loadWizardData } from "../actions/reduxActions"
 import WizardStepper from "./WizardStepper"
+import Filter from "./Filter"
 
 class Wizard extends Component {
   constructor(props) {
@@ -64,13 +65,12 @@ class Wizard extends Component {
     console.log(this.state.steps)
     return (
       <Layout apiCallStatus={this.props.api_call_status}>
-        {/* <Card className=" d-flex justify-content-center">
-          <CardBody> */}
         <Container>
           <Row className="justify-content-center align-items-center">
             <Col md="12">
-              <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
-              {this.state.steps.currentStep === "STEP1" ? (
+              {/* <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} /> */}
+              <Filter />
+              {/* {this.state.steps.currentStep === "STEP1" ? (
                 <Col md="12">
                   <h1 className="padded text-center">Nothing sparked joy?</h1>
                   <h4 className="padded text-center">
@@ -80,12 +80,10 @@ class Wizard extends Component {
                     !
                   </h4>
                 </Col>
-              ) : null}
+              ) : null} */}
             </Col>
           </Row>
         </Container>
-        {/* </CardBody>
-        </Card> */}
       </Layout>
     )
   }

From 28e68799be0457190603e1132e4e88441f5d2c5e Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 07 2021 13:29:31 +0000
Subject: [PATCH 5/9] Wizard page redesign


---

diff --git a/src/App.js b/src/App.js
index 8b8864d..ec0ae5d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import { BrowserRouter } from "react-router-dom"
 import Wizard from "./wizard/Wizard"
 import LandingPage from "./landingpage/LandingPage"
 import NotFound from "./NotFound"
+import Connecting from "./wizard/Connecting"
 
 class App extends Component {
   render() {
@@ -16,6 +17,8 @@ class App extends Component {
             <Route path="/" exact component={LandingPage} />
 
             <Route path="/wizard" component={Wizard} />
+            <Route path="/connecting" component={Connecting} />
+
             <Route path="/landingpage" component={LandingPage} />
             <Route component={NotFound} />
           </Switch>
diff --git a/src/wizard/Connecting.js b/src/wizard/Connecting.js
new file mode 100644
index 0000000..e683270
--- /dev/null
+++ b/src/wizard/Connecting.js
@@ -0,0 +1,98 @@
+import React, { Component } from "react"
+import Layout from "../layout/Layout"
+import { Col, Container, Row } from "reactstrap"
+
+import { connect } from "react-redux"
+import { loadWizardData } from "../actions/reduxActions"
+import WizardStepper from "./WizardStepper"
+import Filter from "./Filter"
+
+class Wizard extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      actions: [],
+      steps: {
+        currentStep: "STEP1",
+        step: {
+          STEP1: null,
+          STEP2: null,
+          STEP3: null,
+          STEP4: null,
+        },
+      },
+    }
+    this.getData = this.getData.bind(this)
+    this.onNext = this.onNext.bind(this)
+    this.onPrev = this.onPrev.bind(this)
+  }
+
+  onPrev(pre) {
+    this.setState({
+      steps: {
+        ...this.state.steps,
+        currentStep: pre,
+      },
+    })
+  }
+
+  onNext(step, selectedOption) {
+    const nextStep = "STEP" + String(Number(step.slice(-1)) + 1)
+    this.setState({
+      steps: {
+        currentStep: nextStep,
+        step: {
+          ...this.state.steps.step,
+          [step]: selectedOption,
+        },
+      },
+    })
+  }
+
+  getData() {
+    this.props.dispatch(loadWizardData())
+  }
+
+  componentDidMount() {
+    this.getData()
+  }
+
+  show_actions(actions) {
+    this.setState({ actions })
+  }
+
+  render() {
+    console.log(this.state.steps)
+    return (
+      <Layout apiCallStatus={this.props.api_call_status}>
+        <Container>
+          <Row className="justify-content-center align-items-center">
+            <Col md="12">
+              <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
+              <Filter />
+              {this.state.steps.currentStep === "STEP1" ? (
+                <Col md="12">
+                  <h1 className="padded text-center">Nothing sparked joy?</h1>
+                  <h4 className="padded text-center">
+                    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>
+                    !
+                  </h4>
+                </Col>
+              ) : null}
+            </Col>
+          </Row>
+        </Container>
+      </Layout>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    ...state.wizard,
+  }
+}
+
+export default connect(mapStateToProps)(Wizard)
diff --git a/src/wizard/Filter.js b/src/wizard/Filter.js
index 5a39cac..3d822df 100644
--- a/src/wizard/Filter.js
+++ b/src/wizard/Filter.js
@@ -1,6 +1,13 @@
 import React, { useState } from "react"
 import { shallowEqual, useSelector } from "react-redux"
-import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from "reactstrap"
+import {
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  Card,
+  CardBody,
+} from "reactstrap"
 
 import * as R from "ramda"
 import Easyfix from "./Easyfix"
@@ -28,20 +35,20 @@ function Filter() {
     return tags
   }
 
-  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
-    const getProcessedData = R.pipe(
-      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
-      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
-    )
-    return getProcessedData(data)
-  }
+  //   const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
+  //     const getProcessedData = R.pipe(
+  //       R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
+  //       R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
+  //     )
+  //     return getProcessedData(data)
+  //   }
 
   //   const getData2 = () => {
   //     const actions = R.filter((a) => a.tags.includes(lang), grouped["easyfix"])
   //     return actions
   //   }
 
-  const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
+  //   const easyfixTestingData = processData(grouped["easyfix"] || [], "repo_org", "repo_name")
 
   console.log(lang)
 
@@ -55,7 +62,7 @@ function Filter() {
           ))}
         </DropdownMenu>
       </UncontrolledDropdown>
-      <Easyfix data={easyfixTestingData} key="easyfix" />
+      {/* <Easyfix data={easyfixTestingData} key="easyfix" /> */}
     </div>
   )
 }

From fcd21b0dfb4cf07f7c6fe81dd6e3d55abdd89467 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 09 2021 08:03:24 +0000
Subject: [PATCH 6/9] filter based implementation of wizard


---

diff --git a/package.json b/package.json
index 438f2b2..19c311e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.3.0",
+    "react-select": "^4.3.1",
     "react-step-wizard": "^5.3.6",
     "reactstrap": "^6.5.0",
     "redux": "^4.0.5",
diff --git a/src/App.js b/src/App.js
index ec0ae5d..8b8864d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,6 @@ import { BrowserRouter } from "react-router-dom"
 import Wizard from "./wizard/Wizard"
 import LandingPage from "./landingpage/LandingPage"
 import NotFound from "./NotFound"
-import Connecting from "./wizard/Connecting"
 
 class App extends Component {
   render() {
@@ -17,8 +16,6 @@ class App extends Component {
             <Route path="/" exact component={LandingPage} />
 
             <Route path="/wizard" component={Wizard} />
-            <Route path="/connecting" component={Connecting} />
-
             <Route path="/landingpage" component={LandingPage} />
             <Route component={NotFound} />
           </Switch>
diff --git a/src/index.css b/src/index.css
index 430d3da..859619d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -203,4 +203,11 @@ ol.steps > li {
 .actions {
   margin-top: 10px;
   margin-bottom: 10px;
+  margin-left: 9px;
+}
+
+.card-container {
+  min-height: 5rem;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
diff --git a/src/wizard/Connecting.js b/src/wizard/Connecting.js
deleted file mode 100644
index e683270..0000000
--- a/src/wizard/Connecting.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, { Component } from "react"
-import Layout from "../layout/Layout"
-import { Col, Container, Row } from "reactstrap"
-
-import { connect } from "react-redux"
-import { loadWizardData } from "../actions/reduxActions"
-import WizardStepper from "./WizardStepper"
-import Filter from "./Filter"
-
-class Wizard extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      actions: [],
-      steps: {
-        currentStep: "STEP1",
-        step: {
-          STEP1: null,
-          STEP2: null,
-          STEP3: null,
-          STEP4: null,
-        },
-      },
-    }
-    this.getData = this.getData.bind(this)
-    this.onNext = this.onNext.bind(this)
-    this.onPrev = this.onPrev.bind(this)
-  }
-
-  onPrev(pre) {
-    this.setState({
-      steps: {
-        ...this.state.steps,
-        currentStep: pre,
-      },
-    })
-  }
-
-  onNext(step, selectedOption) {
-    const nextStep = "STEP" + String(Number(step.slice(-1)) + 1)
-    this.setState({
-      steps: {
-        currentStep: nextStep,
-        step: {
-          ...this.state.steps.step,
-          [step]: selectedOption,
-        },
-      },
-    })
-  }
-
-  getData() {
-    this.props.dispatch(loadWizardData())
-  }
-
-  componentDidMount() {
-    this.getData()
-  }
-
-  show_actions(actions) {
-    this.setState({ actions })
-  }
-
-  render() {
-    console.log(this.state.steps)
-    return (
-      <Layout apiCallStatus={this.props.api_call_status}>
-        <Container>
-          <Row className="justify-content-center align-items-center">
-            <Col md="12">
-              <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
-              <Filter />
-              {this.state.steps.currentStep === "STEP1" ? (
-                <Col md="12">
-                  <h1 className="padded text-center">Nothing sparked joy?</h1>
-                  <h4 className="padded text-center">
-                    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>
-                    !
-                  </h4>
-                </Col>
-              ) : null}
-            </Col>
-          </Row>
-        </Container>
-      </Layout>
-    )
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    ...state.wizard,
-  }
-}
-
-export default connect(mapStateToProps)(Wizard)
diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js
index 830cce5..41a05a1 100644
--- a/src/wizard/FedoraEasyKarma.js
+++ b/src/wizard/FedoraEasyKarma.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { CollapsableBadge, ModalBadge } from "./components"
+import { CollapsableBadge, CollapsableCard, ModalBadge } from "./components"
 
 export default class FedoraEasyKarmaItemsList extends Component {
   render() {
@@ -7,130 +7,131 @@ export default class FedoraEasyKarmaItemsList extends Component {
     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.{" "}
-          <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/">
-              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.
-          </CollapsableBadge>
-          <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>
-          <ol className="steps">
-            <li>
-              Fedora Accounts System (FAS) account is required.{" "}
-              <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.
-                  </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>
-            </li>
-            <li>
-              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.
-              </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.
-              <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.{" "}
-              <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.
-                <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.{" "}
-                <ModalBadge 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.
-                  <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>.
-                  <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.
-                </ModalBadge>
-              </CollapsableBadge>
-            </li>
-            <li>
-              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.
-                <br />
-                You are then presented with the relevant updates one-by-one, to submit Karma and a
-                comment.{" "}
-                <ModalBadge expand_text="Not sure what Karma means?">
-                  <ol>
+          <CollapsableBadge expand_text="Karma">
+            ModalBadge Before a new version of a package is pushed to the Fedora&apos;s Updates
+            repository, it needs to be tested and proved functional.{" "}
+            <ModalBadge expand_text="Tell me more about the process!">
+              The updates are kept in{" "}
+              <a target="_blank" rel="noopener noreferrer" href="https://bodhi.fedoraproject.org/">
+                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.
+            </ModalBadge>
+            <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>
+            <ol className="steps">
+              <li>
+                Fedora Accounts System (FAS) account is required.{" "}
+                <ModalBadge expand_text="Don&#39;t have one yet?">
+                  <ul>
                     <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{" "}
+                      Visit{" "}
                       <a
                         target="_blank"
-                        href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines"
-                        rel="noopener noreferrer">
-                        Update Feedback Guidelines
-                      </a>
-                      <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.
-                      <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.
+                        rel="noopener noreferrer"
+                        href="https://admin.fedoraproject.org/accounts/user/new">
+                        FAS Sign-up page
+                      </a>{" "}
+                      and create it.
                     </li>
-                  </ol>
+                    <li>Note the username and password, you will need it later on.</li>
+                  </ul>
                 </ModalBadge>
-              </CollapsableBadge>
-            </li>
-            <li>
-              Restore the stable-packages on your system by running{" "}
-              <code>sudo dnf distro-sync</code>
-            </li>
-          </ol>
+              </li>
+              <li>
+                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>
+              </li>
+              <li>
+                Choose an update to test{" "}
+                <ModalBadge 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.
+                </ModalBadge>
+              </li>
+              <li>
+                Install the package{" "}
+                <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.{" "}
+                <ModalBadge 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.
+                  <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.{" "}
+                  <ModalBadge 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.
+                    <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>.
+                    <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.
+                  </ModalBadge>
+                </ModalBadge>
+              </li>
+              <li>
+                Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code> and report what you
+                found out.{" "}
+                <ModalBadge 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.
+                  <br />
+                  You are then presented with the relevant updates one-by-one, to submit Karma and
+                  a comment.{" "}
+                  <ModalBadge 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">
+                          Update Feedback Guidelines
+                        </a>
+                        <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.
+                        <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.
+                      </li>
+                    </ol>
+                  </ModalBadge>
+                </ModalBadge>
+              </li>
+              <li>
+                Restore the stable-packages on your system by running{" "}
+                <code>sudo dnf distro-sync</code>
+              </li>
+            </ol>
+          </CollapsableBadge>
         </div>
       )
   }
diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index 9ef1f50..b1a7f0d 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
-import { CollapsableCard, ModalBadge } from "./components"
+import { CollapsableCard, CollapsableBadge, ModalBadge } from "./components"
 
 export default class FedoraManualTesting extends Component {
   render() {
@@ -36,84 +36,87 @@ class FedoraManualTestingItemsListSub1 extends Component {
     subsections = <ul>{subsections}</ul>
 
     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.
-            <br />
-            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.
-          </div>
-        )
-        break
-      case "Desktop":
-        l1 = (
-          <div>
-            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.
-          </div>
-        )
-        break
-      case "Base":
-        l1 = (
-          <div>
-            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.
-            <br />
-            <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No
-            need to reinstall for every testcase.
-          </div>
-        )
-        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.
-          </div>
-        )
-        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.
-            <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.
-          </div>
-        )
-        break
-      default:
-        break
+    switch (
+      this.props.title
+      // case "Installation":
+      //   l1 = (
+      //     <div>
+      //       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.
+      //       <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.
+      //     </div>
+      //   )
+      //   break
+      // case "Desktop":
+      //   l1 = (
+      //     <div>
+      //       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.
+      //     </div>
+      //   )
+      //   break
+      // case "Base":
+      //   l1 = (
+      //     <div>
+      //       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.
+      //       <br />
+      //       <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No
+      //       need to reinstall for every testcase.
+      //     </div>
+      //   )
+      //   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.
+      //     </div>
+      //   )
+      //   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.
+      //       <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.
+      //     </div>
+      //   )
+      //   break
+      // default:
+      //   break
+    ) {
     }
 
     return (
-      <CollapsableCard title={l1} expand_text="See" expand_class="primary">
-        {subsections}
-      </CollapsableCard>
+      // <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
+      //   {subsections}
+      // </CollapsableCard>
+      <> {subsections}</>
     )
   }
 }
 
-class FedoraManualTestingItem extends Component {
+export class FedoraManualTestingItem extends Component {
   render() {
     const extra_data = this.props.data.extra_data
 
@@ -230,7 +233,7 @@ class FedoraManualTestingItem extends Component {
                 </li>
                 <li>
                   Make sure to read about identifying the environment above.{" "}
-                  <ModalBadge expand_text="See">
+                  <ModalBadge expand_text="Show me!">
                     <ul>
                       <li>
                         Have a look at the matrix. The rows are the testcases, and the columns are
diff --git a/src/wizard/Filter.js b/src/wizard/Filter.js
index 3d822df..2568f68 100644
--- a/src/wizard/Filter.js
+++ b/src/wizard/Filter.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { shallowEqual, useSelector } from "react-redux"
 import {
   UncontrolledDropdown,
@@ -7,23 +7,41 @@ import {
   DropdownItem,
   Card,
   CardBody,
+  Col,
+  Row,
+  Button,
+  CardHeader,
 } from "reactstrap"
 
 import * as R from "ramda"
-import Easyfix from "./Easyfix"
+import { FedoraManualTestingItem } from "./FedoraManualTesting"
+import FedoraEasyKarma from "./FedoraEasyKarma"
 
-function Filter() {
-  const [lang, setLang] = useState(null)
-
-  const getlang = (lang) => {
-    setLang(lang)
-  }
+const intialFilter = {
+  language: null,
+  testtype: null,
+  duration: null,
+  area: null,
+}
 
+function Filter() {
   const selectAction = (state) => state.wizard.all_actions
-
   const actions = useSelector(selectAction, shallowEqual)
-  console.log(actions)
+
   const grouped = R.groupBy((action) => action.provider, actions["easyfix"])
+  const grouped2 = R.groupBy((action) => action.provider, actions["fedora_manual_testing"])
+  const grouped3 = R.groupBy((action) => action.provider, actions["fedora_easy_karma"])
+
+  const [filteredData, setfilteredData] = useState(actions)
+
+  const [filters, setFilters] = useState(intialFilter)
+
+  const setFilter = (filterType, value) => {
+    setFilters({
+      ...filters,
+      [filterType]: value,
+    })
+  }
 
   const getData = () => {
     const getUniqueTags = R.pipe(
@@ -35,36 +53,210 @@ function Filter() {
     return tags
   }
 
-  //   const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
-  //     const getProcessedData = R.pipe(
-  //       R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
-  //       R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
-  //     )
-  //     return getProcessedData(data)
-  //   }
+  const getDataTestcase = () => {
+    const getUniqueTags = R.pipe(
+      R.map((action) => action.extra_data.testtype),
+      R.flatten,
+      R.uniq
+    )
+    const testtype = getUniqueTags(grouped2["fedora_manual_testing"])
+    return testtype
+  }
+
+  const resetData = () => {
+    setfilteredData({ ...actions })
+    setFilters(intialFilter)
+  }
 
-  //   const getData2 = () => {
-  //     const actions = R.filter((a) => a.tags.includes(lang), grouped["easyfix"])
-  //     return actions
-  //   }
+  const filterData = () => {
+    let data = { ...actions }
+    const { language, testtype, area, duration } = filters
 
-  //   const easyfixTestingData = processData(grouped["easyfix"] || [], "repo_org", "repo_name")
+    if (language) {
+      data = {
+        easyfix: data.easyfix?.filter((issue) => issue.tags.includes(language)),
+        fedora_manual_testing: null,
+        fedora_easy_karma: null,
+      }
+    }
+    if (testtype) {
+      data = {
+        fedora_manual_testing: data.fedora_manual_testing?.filter((test) =>
+          test.extra_data.testtype.includes(testtype)
+        ),
+        easyfix: null,
+        fedora_easy_karma: null,
+      }
+    }
+    if (area) {
+      switch (area) {
+        case "PROGRAMMING":
+          data = {
+            easyfix: data.easyfix,
+            fedora_manual_testing: null,
+            fedora_easy_karma: null,
+          }
+          break
+        case "TESTING":
+          data = {
+            fedora_manual_testing: data.fedora_manual_testing,
+            fedora_easy_karma: data.fedora_easy_karma,
+            easy_fix: null,
+          }
+          break
+        default:
+      }
+    }
+    if (duration) {
+      switch (duration) {
+        case "FEW_HOURS":
+          data = {
+            fedora_manual_testing: data.fedora_manual_testing,
+            fedora_easy_karma: data.fedora_easy_karma,
+            easyfix: null,
+          }
+          break
+        case "SEVERAL_DAYS":
+          data = {
+            easyfix: data.easyfix,
+            fedora_manual_testing: null,
+            fedora_easy_karma: null,
+          }
+          break
+        default:
+      }
+    }
+    setfilteredData(data)
+  }
 
-  console.log(lang)
+  useEffect(() => {
+    filterData()
+  }, [filters])
 
   return (
     <div>
-      <UncontrolledDropdown>
-        <DropdownToggle caret>language</DropdownToggle>
-        <DropdownMenu>
-          {getData().map((language) => (
-            <DropdownItem onClick={() => getlang(language)}>{language}</DropdownItem>
-          ))}
-        </DropdownMenu>
-      </UncontrolledDropdown>
-      {/* <Easyfix data={easyfixTestingData} key="easyfix" /> */}
+      <Row>
+        <Col sm="2">
+          <UncontrolledDropdown className="actions">
+            <DropdownToggle caret>
+              {filters.duration ? filters.duration : "Duration"}
+            </DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => setFilter("duration", "SEVERAL_DAYS")}>
+                Several Days
+              </DropdownItem>
+              <DropdownItem onClick={() => setFilter("duration", "FEW_HOURS")}>
+                Few Hours
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Col>
+
+        <Col sm="2">
+          <UncontrolledDropdown className="actions">
+            <DropdownToggle caret>{filters.area ? filters.area : "Area"}</DropdownToggle>
+            <DropdownMenu>
+              <DropdownItem onClick={() => setFilter("area", "TESTING")}>Testing</DropdownItem>
+              <DropdownItem onClick={() => setFilter("area", "PROGRAMMING")}>
+                Programming
+              </DropdownItem>
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Col>
+
+        <Col sm="2">
+          <UncontrolledDropdown className="actions">
+            <DropdownToggle caret>
+              {filters.language ? filters.language : "language"}
+            </DropdownToggle>
+            <DropdownMenu>
+              {getData().map((language) => (
+                <DropdownItem onClick={() => setFilter("language", language)}>
+                  {language}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Col>
+        <Col sm="2">
+          <UncontrolledDropdown className="actions">
+            <DropdownToggle caret>
+              {filters.testtype ? filters.testtype : "testtype"}
+            </DropdownToggle>
+            <DropdownMenu>
+              {getDataTestcase().map((testtype) => (
+                <DropdownItem onClick={() => setFilter("testtype", testtype)}>
+                  {testtype}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </Col>
+        <Col sm="2">
+          <Button onClick={resetData} className="actions" color="primary">
+            Click to reset! <i class="fas fa-wrench"></i>
+          </Button>
+        </Col>
+      </Row>
+      <Row>
+        {Object.keys(filteredData).map((key, index) => (
+          <React.Fragment key={key}>
+            {key === "easyfix" &&
+              filteredData[key] &&
+              filteredData[key].map((data) => (
+                <Col sm="4" md="3" className="card-container">
+                  <Card key={data.extra_data.ticket_url} className="actions">
+                    <CardHeader>
+                      <i class="fas fa-terminal"></i>
+                      &nbsp; {data.extra_data.repo_fullname}
+                    </CardHeader>
+                    <CardBody>
+                      <a
+                        href={data.extra_data.ticket_url}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        {data.name}
+                      </a>
+                    </CardBody>
+                  </Card>
+                </Col>
+              ))}
+
+            {key === "fedora_manual_testing" &&
+              filteredData[key] &&
+              filteredData[key].map((data) => (
+                <Col sm="4" md="3" className="card-container">
+                  <Card className="actions">
+                    <CardHeader>
+                      <i class="fas fa-flask"></i>
+                      &nbsp; {data.extra_data.milestone}
+                    </CardHeader>
+                    <CardBody>
+                      <FedoraManualTestingItem data={data} />
+                    </CardBody>
+                  </Card>
+                </Col>
+              ))}
+
+            {key === "fedora_easy_karma" &&
+              filteredData[key] &&
+              filteredData[key].map((data) => (
+                <Col sm="4" md="3" className="card-container">
+                  <Card className="actions">
+                    <CardHeader>
+                      <i class="fab fa-fedora"></i>
+                      &nbsp; {data.name}
+                    </CardHeader>
+                    <CardBody>
+                      <FedoraEasyKarma data={grouped3["fedora_easy_karma"]} key="karma" />
+                    </CardBody>
+                  </Card>
+                </Col>
+              ))}
+          </React.Fragment>
+        ))}
+      </Row>
     </div>
   )
 }
-
 export default Filter
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index d854992..4da056d 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -4,7 +4,6 @@ import { Col, Container, Row } from "reactstrap"
 
 import { connect } from "react-redux"
 import { loadWizardData } from "../actions/reduxActions"
-import WizardStepper from "./WizardStepper"
 import Filter from "./Filter"
 
 class Wizard extends Component {
@@ -12,41 +11,8 @@ class Wizard extends Component {
     super(props)
     this.state = {
       actions: [],
-      steps: {
-        currentStep: "STEP1",
-        step: {
-          STEP1: null,
-          STEP2: null,
-          STEP3: null,
-          STEP4: null,
-        },
-      },
     }
     this.getData = this.getData.bind(this)
-    this.onNext = this.onNext.bind(this)
-    this.onPrev = this.onPrev.bind(this)
-  }
-
-  onPrev(pre) {
-    this.setState({
-      steps: {
-        ...this.state.steps,
-        currentStep: pre,
-      },
-    })
-  }
-
-  onNext(step, selectedOption) {
-    const nextStep = "STEP" + String(Number(step.slice(-1)) + 1)
-    this.setState({
-      steps: {
-        currentStep: nextStep,
-        step: {
-          ...this.state.steps.step,
-          [step]: selectedOption,
-        },
-      },
-    })
   }
 
   getData() {
@@ -68,19 +34,7 @@ class Wizard extends Component {
         <Container>
           <Row className="justify-content-center align-items-center">
             <Col md="12">
-              {/* <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} /> */}
               <Filter />
-              {/* {this.state.steps.currentStep === "STEP1" ? (
-                <Col md="12">
-                  <h1 className="padded text-center">Nothing sparked joy?</h1>
-                  <h4 className="padded text-center">
-                    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>
-                    !
-                  </h4>
-                </Col>
-              ) : null} */}
             </Col>
           </Row>
         </Container>
diff --git a/src/wizard/step/Step1.js b/src/wizard/step/Step1.js
deleted file mode 100644
index 7d00f14..0000000
--- a/src/wizard/step/Step1.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useState } from "react"
-import { Card, CardText, Button, Col, Row } from "reactstrap"
-
-const Step1 = (props) => {
-  const { onNext, onPrev, steps } = props
-  const {
-    step: { STEP1 },
-  } = steps
-  const [selectedItem, setItem] = useState(STEP1)
-
-  const handleStep = (option) => {
-    setItem(option)
-  }
-
-  return (
-    <Row className="padded">
-      <Col sm="12">
-        <h1 className="event text-center">
-          Click on any of the below card to see data of your choice and press next
-        </h1>
-      </Col>
-      <Col sm="6">
-        <Card
-          className={
-            "clickable text-center" + (selectedItem === "SEVERAL_DAYS" ? " card-selected" : "")
-          }
-          body
-          type="btn"
-          onClick={() => {
-            handleStep("SEVERAL_DAYS")
-          }}>
-          <h1 className="padded">
-            Several Days <i class="fas fa-calendar-week"></i>
-          </h1>
-          <CardText>Task that can take up to Several Days </CardText>
-        </Card>
-      </Col>
-      <Col sm="6">
-        <Card
-          className={
-            "clickable text-center" + (selectedItem === "FEW_HOURS" ? " card-selected" : "")
-          }
-          body
-          type="btn"
-          onClick={() => {
-            handleStep("FEW_HOURS")
-          }}>
-          <h1 className="padded">
-            Few Hours <i class="fas fa-calendar-day"></i>
-          </h1>
-          <CardText>Task that can take up to Few Hours </CardText>
-        </Card>
-      </Col>
-      <Col sm="12" className="d-flex justify-content-around">
-        <Button
-          color="primary"
-          className="actions float-right"
-          disabled={selectedItem === null}
-          onClick={() => {
-            onNext("STEP1", selectedItem)
-          }}>
-          Next <i class="fas fa-chevron-circle-right"></i>
-        </Button>
-      </Col>
-    </Row>
-  )
-}
-
-export default Step1
diff --git a/src/wizard/step/Step2.js b/src/wizard/step/Step2.js
deleted file mode 100644
index 3694c8e..0000000
--- a/src/wizard/step/Step2.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useState } from "react"
-import { shallowEqual, useSelector } from "react-redux"
-import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
-
-const Step2 = (props) => {
-  const {
-    onNext,
-    onPrev,
-    steps: { step },
-  } = props
-
-  const [selectedItem, setItem] = useState(step.STEP2)
-
-  const handleStep = (option) => {
-    setItem(option)
-  }
-
-  const selectProvider = (state) => state.wizard.providers
-
-  const providers = useSelector(selectProvider, shallowEqual)
-  console.log(providers)
-  const fewHours = providers.filter((provider) => provider.duration === 3)
-  const severalDays = providers.filter((provider) => provider.duration === 72)
-
-  const getIcon = (type) => {
-    switch (type) {
-      case "fedora_manual_testing":
-        return <i class="fas fa-user-check"></i>
-      case "easy_fix":
-        return <i class="fas fa-magic"></i>
-      default:
-        return <i class="fab fa-fedora"></i>
-    }
-  }
-
-  return (
-    <Row className="justify-content-center">
-      <Col sm="12">
-        <h1 className="event text-center">
-          Click on any of the below card to see data of your choice and press next
-        </h1>
-      </Col>
-      {step.STEP1 === "SEVERAL_DAYS" && (
-        <>
-          {severalDays.map((item) => (
-            <Col sm="6">
-              <Card
-                className={
-                  "clickable text-center" +
-                  (selectedItem === item.provider ? " card-selected" : "")
-                }
-                onClick={() => {
-                  handleStep(item.provider)
-                }}>
-                <CardBody>
-                  <CardTitle tag="h4">
-                    {item.name} {getIcon(item.provider)}
-                  </CardTitle>
-                  <CardText>{item.description}</CardText>
-                </CardBody>
-              </Card>
-            </Col>
-          ))}
-        </>
-      )}
-
-      {step.STEP1 === "FEW_HOURS" && (
-        <>
-          {fewHours.map((item) => (
-            <Col sm="6">
-              <Card
-                className={
-                  "clickable text-center" +
-                  (selectedItem === item.provider ? " card-selected" : "")
-                }
-                onClick={() => {
-                  handleStep(item.provider)
-                }}>
-                <CardBody>
-                  <CardTitle tag="h4">
-                    {item.name} {getIcon(item.provider)}
-                  </CardTitle>
-                  <CardText>{item.description}</CardText>
-                </CardBody>
-              </Card>
-            </Col>
-          ))}
-        </>
-      )}
-      <Col sm="12" className="d-flex justify-content-around">
-        <Button
-          className="actions float-left"
-          color="primary"
-          onClick={() => {
-            onPrev("STEP1")
-          }}>
-          <i class="fas fa-chevron-circle-left"></i> Previous
-        </Button>
-        <Button
-          color="primary"
-          className="actions btn float-right"
-          disabled={selectedItem === null}
-          onClick={(e) => onNext("STEP2", selectedItem)}>
-          Next <i class="fas fa-chevron-circle-right"></i>
-        </Button>
-      </Col>
-    </Row>
-  )
-}
-
-export default Step2
diff --git a/src/wizard/step/Step3.js b/src/wizard/step/Step3.js
deleted file mode 100644
index af126a1..0000000
--- a/src/wizard/step/Step3.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useState } from "react"
-import { shallowEqual, useSelector } from "react-redux"
-import { Card, CardBody, CardTitle, Button, Col, Row } from "reactstrap"
-
-import FedoraManualTesting from "../FedoraManualTesting"
-import FedoraEasyKarma from "../FedoraEasyKarma"
-import * as R from "ramda"
-
-const Step3 = (props) => {
-  const {
-    onNext,
-    onPrev,
-    steps: { step },
-  } = props
-
-  const [selectedItem, setItem] = useState(step.STEP3)
-
-  const handleStep = (option) => {
-    setItem(option)
-  }
-  const { STEP2 } = step
-  const selectAction = (state) => state.wizard.all_actions
-
-  const actions = useSelector(selectAction, shallowEqual)
-  console.log(actions)
-  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
-
-  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
-    const getProcessedData = R.pipe(
-      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
-      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
-    )
-    return getProcessedData(data)
-  }
-
-  const manualTestingData = processData(
-    grouped["fedora_manual_testing"] || [],
-    "testtype",
-    "section"
-  )
-
-  const getData = () => {
-    const getUniqueTags = R.pipe(
-      R.map((action) => action.tags),
-      R.flatten,
-      R.uniq
-    )
-    const tags = getUniqueTags(grouped["easyfix"])
-    return tags
-  }
-
-  const getLanguageIcon = (lang) => {
-    switch (lang) {
-      case "Python":
-        return <i class="fab fa-python"></i>
-      case "JavaScript":
-        return <i class="fab fa-js-square"></i>
-      case "HTML":
-        return <i class="fab fa-html5"></i>
-      case "PHP":
-        return <i class="fab fa-php"></i>
-      default:
-        return <i class="fas fa-terminal"></i>
-    }
-  }
-
-  return (
-    <Row>
-      {step.STEP2 === "fedora_manual_testing" && (
-        <Col sm="12">
-          <FedoraManualTesting data={manualTestingData} key="fmtl" />
-
-          <Button
-            onClick={() => {
-              onPrev("STEP2")
-            }}
-            className="actions btn float-left"
-            color="primary">
-            <i class="fas fa-chevron-circle-left"></i> Previous
-          </Button>
-        </Col>
-      )}
-
-      {step.STEP2 === "fedora_easy_karma" && (
-        <Col sm="12">
-          <Card>
-            <CardBody>
-              <FedoraEasyKarma data={grouped["fedora_easy_karma"]} key="karma" />
-            </CardBody>
-          </Card>
-          <Button
-            className="actions btn float-left"
-            color="primary"
-            onClick={() => {
-              onPrev("STEP2")
-            }}>
-            <i class="fas fa-chevron-circle-left"></i> Previous
-          </Button>
-        </Col>
-      )}
-      {step.STEP2 === "easyfix" && (
-        <>
-          <Col sm="12">
-            <h1 className="event text-center">
-              Click on any of the below card to see programming language of your choice and press
-              next
-            </h1>
-          </Col>
-          {getData().map((lang) => (
-            <Col sm="6">
-              <Card
-                className={
-                  "clickable text-center" + (selectedItem === lang ? " card-selected" : "")
-                }
-                onClick={() => {
-                  handleStep(lang)
-                }}>
-                <CardBody>
-                  <CardTitle tag="h1">
-                    {lang} {getLanguageIcon(lang)}{" "}
-                  </CardTitle>
-                </CardBody>
-              </Card>
-            </Col>
-          ))}
-          <Col md="12">
-            <Button
-              className="actions btn float-left"
-              color="primary"
-              onClick={() => {
-                onPrev("STEP2")
-              }}>
-              <i class="fas fa-chevron-circle-left"></i> Previous
-            </Button>
-            <Button
-              color="primary"
-              className="actions btn float-right"
-              disabled={selectedItem === null}
-              onClick={(e) => onNext("STEP3", selectedItem)}>
-              <i class="fas fa-chevron-circle-right"></i> Next
-            </Button>
-          </Col>
-        </>
-      )}
-    </Row>
-  )
-}
-
-export default Step3
diff --git a/src/wizard/step/Step4.js b/src/wizard/step/Step4.js
deleted file mode 100644
index 357f11e..0000000
--- a/src/wizard/step/Step4.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react"
-import { Button, Row, Col } from "reactstrap"
-import { shallowEqual, useSelector } from "react-redux"
-import * as R from "ramda"
-import Easyfix from "../Easyfix"
-
-const Step4 = (props) => {
-  const {
-    onNext,
-    onPrev,
-    steps: { step },
-  } = props
-
-  const { STEP2, STEP3 } = step
-
-  const selectAction = (state) => state.wizard.all_actions
-
-  const actions = useSelector(selectAction, shallowEqual)
-  console.log(actions)
-  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
-
-  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
-    const getProcessedData = R.pipe(
-      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
-      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
-    )
-    return getProcessedData(data)
-  }
-
-  const getData = () => {
-    const actions = R.filter((a) => a.tags.includes(STEP3), grouped["easyfix"])
-    return actions
-  }
-
-  const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
-
-  return (
-    <Row>
-      <Col sm="12">
-        <Easyfix data={easyfixTestingData} key="easyfix" />
-
-        <Button
-          className="actions btn float-left"
-          color="primary"
-          onClick={() => {
-            onPrev("STEP3")
-          }}>
-          <i class="fas fa-chevron-circle-left"></i> Previous
-        </Button>
-      </Col>
-    </Row>
-  )
-}
-
-export default Step4
diff --git a/yarn.lock b/yarn.lock
index 8c2d60b..f89d35e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1129,7 +1129,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -1185,6 +1185,71 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/cache@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
+  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.0.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1378,16 +1443,6 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@reduxjs/toolkit@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5"
-  integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==
-  dependencies:
-    immer "^8.0.1"
-    redux "^4.0.0"
-    redux-thunk "^2.3.0"
-    reselect "^4.0.0"
-
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -2495,11 +2550,6 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.4.1:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
-  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3787,6 +3837,14 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5093,7 +5151,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5300,11 +5358,6 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
-immer@^8.0.1:
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a"
-  integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==
-
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -6764,6 +6817,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8501,7 +8559,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8727,6 +8785,13 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8846,6 +8911,24 @@ react-scripts@^3.3.0:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-select@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
+  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.1.1"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
+react-step-wizard@^5.3.6:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/react-step-wizard/-/react-step-wizard-5.3.6.tgz#d109d741d258166fc2c08dabefd689764ec7a194"
+  integrity sha512-cJiJ+Pgku10scyL39HYKPgwoZQLgtOs4tVo9LC6IUoUqXdElrMrwRjSwOJrRgL6OmTAUaLIzAhq7mNSqaYtvMw==
+
 react-transition-group@^2.3.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -8856,6 +8939,16 @@ react-transition-group@^2.3.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-transition-group@^4.3.0:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.5.2:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -9156,11 +9249,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-reselect@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
-  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -10044,6 +10132,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

From fd1e9efd663668e61b691230a85152e646bd9d14 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 09 2021 08:05:31 +0000
Subject: [PATCH 7/9] added icons


---

diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index b1a7f0d..01c26d5 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
-import { CollapsableCard, CollapsableBadge, ModalBadge } from "./components"
+import { CollapsableCard, CollapsableBadge } from "./components"
 
 export default class FedoraManualTesting extends Component {
   render() {
@@ -36,82 +36,79 @@ class FedoraManualTestingItemsListSub1 extends Component {
     subsections = <ul>{subsections}</ul>
 
     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.
-      //       <br />
-      //       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.
-      //     </div>
-      //   )
-      //   break
-      // case "Desktop":
-      //   l1 = (
-      //     <div>
-      //       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.
-      //     </div>
-      //   )
-      //   break
-      // case "Base":
-      //   l1 = (
-      //     <div>
-      //       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.
-      //       <br />
-      //       <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No
-      //       need to reinstall for every testcase.
-      //     </div>
-      //   )
-      //   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.
-      //     </div>
-      //   )
-      //   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.
-      //       <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.
-      //     </div>
-      //   )
-      //   break
-      // default:
-      //   break
-    ) {
+    switch (this.props.title) {
+      case "Installation":
+        l1 = (
+          <div>
+            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.
+            <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.
+          </div>
+        )
+        break
+      case "Desktop":
+        l1 = (
+          <div>
+            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.
+          </div>
+        )
+        break
+      case "Base":
+        l1 = (
+          <div>
+            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.
+            <br />
+            <i>Pro tip:</i> using a snapshot of cleanly installed Virtual machine is just fine. No
+            need to reinstall for every testcase.
+          </div>
+        )
+        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.
+          </div>
+        )
+        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.
+            <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.
+          </div>
+        )
+        break
+      default:
+        break
     }
 
     return (
-      // <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
-      //   {subsections}
-      // </CollapsableCard>
-      <> {subsections}</>
+      <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
+        {subsections}
+      </CollapsableCard>
     )
   }
 }
@@ -170,7 +167,7 @@ export class FedoraManualTestingItem extends Component {
             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
               Tescase matrix
             </a>{" "}
-            <ModalBadge expand_text="Not sure what that means?">
+            <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
@@ -184,7 +181,7 @@ export class FedoraManualTestingItem extends Component {
                   results.
                 </li>
               </ul>
-            </ModalBadge>
+            </CollapsableBadge>
           </li>
 
           <li>
@@ -193,7 +190,7 @@ export class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             briefly, just to have a general idea of what you will be doing.{" "}
-            <ModalBadge expand_text="Not making much sense?">
+            <CollapsableBadge expand_text="Not making much sense?">
               The testcases are generally split into four sections:
               <ul>
                 <li>
@@ -213,7 +210,7 @@ export class FedoraManualTestingItem extends Component {
                   order to decide whether it Passed of Failed
                 </li>
               </ul>
-            </ModalBadge>
+            </CollapsableBadge>
           </li>
 
           <li>
@@ -225,7 +222,7 @@ export class FedoraManualTestingItem extends Component {
               here
             </a>
             .{" "}
-            <ModalBadge expand_text="Not sure how?">
+            <CollapsableBadge expand_text="Not sure how?">
               <ul>
                 <li>
                   Most of the time Workstation Live, or Server DVD are fine, but sometimes there
@@ -233,7 +230,7 @@ export class FedoraManualTestingItem extends Component {
                 </li>
                 <li>
                   Make sure to read about identifying the environment above.{" "}
-                  <ModalBadge expand_text="Show me!">
+                  <CollapsableBadge expand_text="Show me!">
                     <ul>
                       <li>
                         Have a look at the matrix. The rows are the testcases, and the columns are
@@ -248,10 +245,10 @@ export class FedoraManualTestingItem extends Component {
                         missing results.
                       </li>
                     </ul>
-                  </ModalBadge>
+                  </CollapsableBadge>
                 </li>
               </ul>
-            </ModalBadge>
+            </CollapsableBadge>
           </li>
 
           <li>
@@ -260,11 +257,11 @@ export class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             thoroughly, to be sure you know what to do.{" "}
-            <ModalBadge expand_text="Feeling a bit lost?">
+            <CollapsableBadge expand_text="Feeling a bit lost?">
               <ul>
                 <li>
                   The testcase structure is not making sense?{" "}
-                  <ModalBadge expand_text="Click here">
+                  <CollapsableBadge expand_text="Click here">
                     The testcases are generally split into four sections:
                     <ul>
                       <li>
@@ -284,12 +281,12 @@ export class FedoraManualTestingItem extends Component {
                         testing in order to decide whether it Passed of Failed
                       </li>
                     </ul>
-                  </ModalBadge>
+                  </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{" "}
-                  <ModalBadge expand_text="Don&#39;t have an IRC client?">
+                  <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"
@@ -299,15 +296,15 @@ export class FedoraManualTestingItem extends Component {
                     </a>{" "}
                     just enter a Nickname of your choice, #fedora-qa (including the hash sign) in
                     the Channels field, and click Connect.
-                  </ModalBadge>
+                  </CollapsableBadge>
                 </li>
               </ul>
-            </ModalBadge>
+            </CollapsableBadge>
           </li>
 
           <li>Get your hands dirty, and test the hell out of it!</li>
           <li>
-            <ModalBadge expand_class="success" expand_text="Everything went well" type="btn">
+            <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}>
@@ -316,9 +313,9 @@ export class FedoraManualTestingItem extends Component {
               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.
-            </ModalBadge>
+            </CollapsableBadge>
 
-            <ModalBadge expand_class="danger" expand_text="I found a bug!" type="btn">
+            <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
@@ -344,11 +341,11 @@ export class FedoraManualTestingItem extends Component {
                 <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{" "}
-                  <ModalBadge expand_text="Don&#39;t have an IRC client?">
+                  <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.
-                  </ModalBadge>
+                  </CollapsableBadge>
                 </li>
               </ul>
               Once you get the Bug reported, make sure to also submit the result into the testing
@@ -360,7 +357,7 @@ export class FedoraManualTestingItem extends Component {
               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.
-            </ModalBadge>
+            </CollapsableBadge>
           </li>
         </ol>
       </ModalInfo>

From 0df3011950872cfffb048ba7a7c87354c7b34db6 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 09 2021 08:08:30 +0000
Subject: [PATCH 8/9] removed react-select


---

diff --git a/src/wizard/WizardStepper.js b/src/wizard/WizardStepper.js
deleted file mode 100644
index a5e84ad..0000000
--- a/src/wizard/WizardStepper.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react"
-import { Container, Row } from "reactstrap"
-import Step1 from "./step/Step1"
-import Step2 from "./step/Step2"
-import Step3 from "./step/Step3"
-import Step4 from "./step/Step4"
-
-const WizardStepper = (props) => {
-  const {
-    steps: { currentStep },
-  } = props
-
-  return (
-    <Container className="wrapper">
-      <div className="wizard">
-        {currentStep === "STEP1" && <Step1 {...props} />}
-        {currentStep === "STEP2" && <Step2 {...props} />}
-        {currentStep === "STEP3" && <Step3 {...props} />}
-        {currentStep === "STEP4" && <Step4 {...props} />}
-      </div>
-    </Container>
-  )
-}
-
-export default WizardStepper

From 6151e7e8011b97fd42c6cc01fefb0dbf97719f26 Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jun 09 2021 11:42:04 +0000
Subject: [PATCH 9/9] wizard stepper implementation


---

diff --git a/package.json b/package.json
index 19c311e..438f2b2 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.3.0",
-    "react-select": "^4.3.1",
     "react-step-wizard": "^5.3.6",
     "reactstrap": "^6.5.0",
     "redux": "^4.0.5",
diff --git a/src/index.css b/src/index.css
index 859619d..430d3da 100644
--- a/src/index.css
+++ b/src/index.css
@@ -203,11 +203,4 @@ ol.steps > li {
 .actions {
   margin-top: 10px;
   margin-bottom: 10px;
-  margin-left: 9px;
-}
-
-.card-container {
-  min-height: 5rem;
-  margin-bottom: 10px;
-  margin-top: 10px;
 }
diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js
index 41a05a1..830cce5 100644
--- a/src/wizard/FedoraEasyKarma.js
+++ b/src/wizard/FedoraEasyKarma.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react"
-import { CollapsableBadge, CollapsableCard, ModalBadge } from "./components"
+import { CollapsableBadge, ModalBadge } from "./components"
 
 export default class FedoraEasyKarmaItemsList extends Component {
   render() {
@@ -7,131 +7,130 @@ export default class FedoraEasyKarmaItemsList extends Component {
     else
       return (
         <div>
-          <CollapsableBadge expand_text="Karma">
-            ModalBadge Before a new version of a package is pushed to the Fedora&apos;s Updates
-            repository, it needs to be tested and proved functional.{" "}
-            <ModalBadge expand_text="Tell me more about the process!">
-              The updates are kept in{" "}
-              <a target="_blank" rel="noopener noreferrer" href="https://bodhi.fedoraproject.org/">
-                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.
-            </ModalBadge>
-            <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>
-            <ol className="steps">
-              <li>
-                Fedora Accounts System (FAS) account is required.{" "}
-                <ModalBadge expand_text="Don&#39;t have one yet?">
-                  <ul>
+          <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.{" "}
+          <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/">
+              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.
+          </CollapsableBadge>
+          <h1 style={{ marginTop: 1 + "em" }}>Sure, let me do it!</h1>
+          <ol className="steps">
+            <li>
+              Fedora Accounts System (FAS) account is required.{" "}
+              <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.
+                  </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>
+            </li>
+            <li>
+              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.
+              </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.
+              <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.{" "}
+              <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.
+                <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.{" "}
+                <ModalBadge 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.
+                  <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>.
+                  <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.
+                </ModalBadge>
+              </CollapsableBadge>
+            </li>
+            <li>
+              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.
+                <br />
+                You are then presented with the relevant updates one-by-one, to submit Karma and a
+                comment.{" "}
+                <ModalBadge expand_text="Not sure what Karma means?">
+                  <ol>
                     <li>
-                      Visit{" "}
+                      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"
-                        rel="noopener noreferrer"
-                        href="https://admin.fedoraproject.org/accounts/user/new">
-                        FAS Sign-up page
-                      </a>{" "}
-                      and create it.
+                        href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines"
+                        rel="noopener noreferrer">
+                        Update Feedback Guidelines
+                      </a>
+                      <br />
+                      Still not sure? Just press <code>Enter</code> to skip it.
                     </li>
-                    <li>Note the username and password, you will need it later on.</li>
-                  </ul>
-                </ModalBadge>
-              </li>
-              <li>
-                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>
-              </li>
-              <li>
-                Choose an update to test{" "}
-                <ModalBadge 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.
-                </ModalBadge>
-              </li>
-              <li>
-                Install the package{" "}
-                <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.{" "}
-                <ModalBadge 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.
-                  <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.{" "}
-                  <ModalBadge 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.
-                    <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>.
-                    <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.
-                  </ModalBadge>
-                </ModalBadge>
-              </li>
-              <li>
-                Run <code>fedora-easy-karma --fas-username=FAS_USERNAME</code> and report what you
-                found out.{" "}
-                <ModalBadge 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.
-                  <br />
-                  You are then presented with the relevant updates one-by-one, to submit Karma and
-                  a comment.{" "}
-                  <ModalBadge 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">
-                          Update Feedback Guidelines
-                        </a>
-                        <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.
-                        <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.
-                      </li>
-                    </ol>
-                  </ModalBadge>
+                    <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.
+                      <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.
+                    </li>
+                  </ol>
                 </ModalBadge>
-              </li>
-              <li>
-                Restore the stable-packages on your system by running{" "}
-                <code>sudo dnf distro-sync</code>
-              </li>
-            </ol>
-          </CollapsableBadge>
+              </CollapsableBadge>
+            </li>
+            <li>
+              Restore the stable-packages on your system by running{" "}
+              <code>sudo dnf distro-sync</code>
+            </li>
+          </ol>
         </div>
       )
   }
diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index 01c26d5..9ef1f50 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap"
-import { CollapsableCard, CollapsableBadge } from "./components"
+import { CollapsableCard, ModalBadge } from "./components"
 
 export default class FedoraManualTesting extends Component {
   render() {
@@ -106,14 +106,14 @@ class FedoraManualTestingItemsListSub1 extends Component {
     }
 
     return (
-      <CollapsableCard title={l1} expand_text="Show me!" expand_class="primary">
+      <CollapsableCard title={l1} expand_text="See" expand_class="primary">
         {subsections}
       </CollapsableCard>
     )
   }
 }
 
-export class FedoraManualTestingItem extends Component {
+class FedoraManualTestingItem extends Component {
   render() {
     const extra_data = this.props.data.extra_data
 
@@ -167,7 +167,7 @@ export class FedoraManualTestingItem extends Component {
             <a target="_blank" rel="noopener noreferrer" href={matrix_url}>
               Tescase matrix
             </a>{" "}
-            <CollapsableBadge expand_text="Not sure what that means?">
+            <ModalBadge 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
@@ -181,7 +181,7 @@ export class FedoraManualTestingItem extends Component {
                   results.
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -190,7 +190,7 @@ export class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             briefly, just to have a general idea of what you will be doing.{" "}
-            <CollapsableBadge expand_text="Not making much sense?">
+            <ModalBadge expand_text="Not making much sense?">
               The testcases are generally split into four sections:
               <ul>
                 <li>
@@ -210,7 +210,7 @@ export class FedoraManualTestingItem extends Component {
                   order to decide whether it Passed of Failed
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -222,7 +222,7 @@ export class FedoraManualTestingItem extends Component {
               here
             </a>
             .{" "}
-            <CollapsableBadge expand_text="Not sure how?">
+            <ModalBadge expand_text="Not sure how?">
               <ul>
                 <li>
                   Most of the time Workstation Live, or Server DVD are fine, but sometimes there
@@ -230,7 +230,7 @@ export class FedoraManualTestingItem extends Component {
                 </li>
                 <li>
                   Make sure to read about identifying the environment above.{" "}
-                  <CollapsableBadge expand_text="Show me!">
+                  <ModalBadge expand_text="See">
                     <ul>
                       <li>
                         Have a look at the matrix. The rows are the testcases, and the columns are
@@ -245,10 +245,10 @@ export class FedoraManualTestingItem extends Component {
                         missing results.
                       </li>
                     </ul>
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <li>
@@ -257,11 +257,11 @@ export class FedoraManualTestingItem extends Component {
               Testcase
             </a>{" "}
             thoroughly, to be sure you know what to do.{" "}
-            <CollapsableBadge expand_text="Feeling a bit lost?">
+            <ModalBadge expand_text="Feeling a bit lost?">
               <ul>
                 <li>
                   The testcase structure is not making sense?{" "}
-                  <CollapsableBadge expand_text="Click here">
+                  <ModalBadge expand_text="Click here">
                     The testcases are generally split into four sections:
                     <ul>
                       <li>
@@ -281,12 +281,12 @@ export class FedoraManualTestingItem extends Component {
                         testing in order to decide whether it Passed of Failed
                       </li>
                     </ul>
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </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{" "}
-                  <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
+                  <ModalBadge expand_text="Don&#39;t have an IRC client?">
                     If you are not that familiar with IRC, you can use the{" "}
                     <a
                       target="_blank"
@@ -296,15 +296,15 @@ export class FedoraManualTestingItem extends Component {
                     </a>{" "}
                     just enter a Nickname of your choice, #fedora-qa (including the hash sign) in
                     the Channels field, and click Connect.
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
 
           <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">
+            <ModalBadge 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}>
@@ -313,9 +313,9 @@ export class FedoraManualTestingItem extends Component {
               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>
+            </ModalBadge>
 
-            <CollapsableBadge expand_class="danger" expand_text="I found a bug!" type="btn">
+            <ModalBadge 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
@@ -341,11 +341,11 @@ export class FedoraManualTestingItem extends Component {
                 <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{" "}
-                  <CollapsableBadge expand_text="Don&#39;t have an IRC client?">
+                  <ModalBadge 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.
-                  </CollapsableBadge>
+                  </ModalBadge>
                 </li>
               </ul>
               Once you get the Bug reported, make sure to also submit the result into the testing
@@ -357,7 +357,7 @@ export class FedoraManualTestingItem extends Component {
               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.
-            </CollapsableBadge>
+            </ModalBadge>
           </li>
         </ol>
       </ModalInfo>
diff --git a/src/wizard/Filter.js b/src/wizard/Filter.js
deleted file mode 100644
index 2568f68..0000000
--- a/src/wizard/Filter.js
+++ /dev/null
@@ -1,262 +0,0 @@
-import React, { useEffect, useState } from "react"
-import { shallowEqual, useSelector } from "react-redux"
-import {
-  UncontrolledDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  Card,
-  CardBody,
-  Col,
-  Row,
-  Button,
-  CardHeader,
-} from "reactstrap"
-
-import * as R from "ramda"
-import { FedoraManualTestingItem } from "./FedoraManualTesting"
-import FedoraEasyKarma from "./FedoraEasyKarma"
-
-const intialFilter = {
-  language: null,
-  testtype: null,
-  duration: null,
-  area: null,
-}
-
-function Filter() {
-  const selectAction = (state) => state.wizard.all_actions
-  const actions = useSelector(selectAction, shallowEqual)
-
-  const grouped = R.groupBy((action) => action.provider, actions["easyfix"])
-  const grouped2 = R.groupBy((action) => action.provider, actions["fedora_manual_testing"])
-  const grouped3 = R.groupBy((action) => action.provider, actions["fedora_easy_karma"])
-
-  const [filteredData, setfilteredData] = useState(actions)
-
-  const [filters, setFilters] = useState(intialFilter)
-
-  const setFilter = (filterType, value) => {
-    setFilters({
-      ...filters,
-      [filterType]: value,
-    })
-  }
-
-  const getData = () => {
-    const getUniqueTags = R.pipe(
-      R.map((action) => action.tags),
-      R.flatten,
-      R.uniq
-    )
-    const tags = getUniqueTags(grouped["easyfix"])
-    return tags
-  }
-
-  const getDataTestcase = () => {
-    const getUniqueTags = R.pipe(
-      R.map((action) => action.extra_data.testtype),
-      R.flatten,
-      R.uniq
-    )
-    const testtype = getUniqueTags(grouped2["fedora_manual_testing"])
-    return testtype
-  }
-
-  const resetData = () => {
-    setfilteredData({ ...actions })
-    setFilters(intialFilter)
-  }
-
-  const filterData = () => {
-    let data = { ...actions }
-    const { language, testtype, area, duration } = filters
-
-    if (language) {
-      data = {
-        easyfix: data.easyfix?.filter((issue) => issue.tags.includes(language)),
-        fedora_manual_testing: null,
-        fedora_easy_karma: null,
-      }
-    }
-    if (testtype) {
-      data = {
-        fedora_manual_testing: data.fedora_manual_testing?.filter((test) =>
-          test.extra_data.testtype.includes(testtype)
-        ),
-        easyfix: null,
-        fedora_easy_karma: null,
-      }
-    }
-    if (area) {
-      switch (area) {
-        case "PROGRAMMING":
-          data = {
-            easyfix: data.easyfix,
-            fedora_manual_testing: null,
-            fedora_easy_karma: null,
-          }
-          break
-        case "TESTING":
-          data = {
-            fedora_manual_testing: data.fedora_manual_testing,
-            fedora_easy_karma: data.fedora_easy_karma,
-            easy_fix: null,
-          }
-          break
-        default:
-      }
-    }
-    if (duration) {
-      switch (duration) {
-        case "FEW_HOURS":
-          data = {
-            fedora_manual_testing: data.fedora_manual_testing,
-            fedora_easy_karma: data.fedora_easy_karma,
-            easyfix: null,
-          }
-          break
-        case "SEVERAL_DAYS":
-          data = {
-            easyfix: data.easyfix,
-            fedora_manual_testing: null,
-            fedora_easy_karma: null,
-          }
-          break
-        default:
-      }
-    }
-    setfilteredData(data)
-  }
-
-  useEffect(() => {
-    filterData()
-  }, [filters])
-
-  return (
-    <div>
-      <Row>
-        <Col sm="2">
-          <UncontrolledDropdown className="actions">
-            <DropdownToggle caret>
-              {filters.duration ? filters.duration : "Duration"}
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={() => setFilter("duration", "SEVERAL_DAYS")}>
-                Several Days
-              </DropdownItem>
-              <DropdownItem onClick={() => setFilter("duration", "FEW_HOURS")}>
-                Few Hours
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
-        </Col>
-
-        <Col sm="2">
-          <UncontrolledDropdown className="actions">
-            <DropdownToggle caret>{filters.area ? filters.area : "Area"}</DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem onClick={() => setFilter("area", "TESTING")}>Testing</DropdownItem>
-              <DropdownItem onClick={() => setFilter("area", "PROGRAMMING")}>
-                Programming
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
-        </Col>
-
-        <Col sm="2">
-          <UncontrolledDropdown className="actions">
-            <DropdownToggle caret>
-              {filters.language ? filters.language : "language"}
-            </DropdownToggle>
-            <DropdownMenu>
-              {getData().map((language) => (
-                <DropdownItem onClick={() => setFilter("language", language)}>
-                  {language}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </UncontrolledDropdown>
-        </Col>
-        <Col sm="2">
-          <UncontrolledDropdown className="actions">
-            <DropdownToggle caret>
-              {filters.testtype ? filters.testtype : "testtype"}
-            </DropdownToggle>
-            <DropdownMenu>
-              {getDataTestcase().map((testtype) => (
-                <DropdownItem onClick={() => setFilter("testtype", testtype)}>
-                  {testtype}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </UncontrolledDropdown>
-        </Col>
-        <Col sm="2">
-          <Button onClick={resetData} className="actions" color="primary">
-            Click to reset! <i class="fas fa-wrench"></i>
-          </Button>
-        </Col>
-      </Row>
-      <Row>
-        {Object.keys(filteredData).map((key, index) => (
-          <React.Fragment key={key}>
-            {key === "easyfix" &&
-              filteredData[key] &&
-              filteredData[key].map((data) => (
-                <Col sm="4" md="3" className="card-container">
-                  <Card key={data.extra_data.ticket_url} className="actions">
-                    <CardHeader>
-                      <i class="fas fa-terminal"></i>
-                      &nbsp; {data.extra_data.repo_fullname}
-                    </CardHeader>
-                    <CardBody>
-                      <a
-                        href={data.extra_data.ticket_url}
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        {data.name}
-                      </a>
-                    </CardBody>
-                  </Card>
-                </Col>
-              ))}
-
-            {key === "fedora_manual_testing" &&
-              filteredData[key] &&
-              filteredData[key].map((data) => (
-                <Col sm="4" md="3" className="card-container">
-                  <Card className="actions">
-                    <CardHeader>
-                      <i class="fas fa-flask"></i>
-                      &nbsp; {data.extra_data.milestone}
-                    </CardHeader>
-                    <CardBody>
-                      <FedoraManualTestingItem data={data} />
-                    </CardBody>
-                  </Card>
-                </Col>
-              ))}
-
-            {key === "fedora_easy_karma" &&
-              filteredData[key] &&
-              filteredData[key].map((data) => (
-                <Col sm="4" md="3" className="card-container">
-                  <Card className="actions">
-                    <CardHeader>
-                      <i class="fab fa-fedora"></i>
-                      &nbsp; {data.name}
-                    </CardHeader>
-                    <CardBody>
-                      <FedoraEasyKarma data={grouped3["fedora_easy_karma"]} key="karma" />
-                    </CardBody>
-                  </Card>
-                </Col>
-              ))}
-          </React.Fragment>
-        ))}
-      </Row>
-    </div>
-  )
-}
-export default Filter
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index 4da056d..4149eb9 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -4,15 +4,48 @@ import { Col, Container, Row } from "reactstrap"
 
 import { connect } from "react-redux"
 import { loadWizardData } from "../actions/reduxActions"
-import Filter from "./Filter"
+import WizardStepper from "./WizardStepper"
 
 class Wizard extends Component {
   constructor(props) {
     super(props)
     this.state = {
       actions: [],
+      steps: {
+        currentStep: "STEP1",
+        step: {
+          STEP1: null,
+          STEP2: null,
+          STEP3: null,
+          STEP4: null,
+        },
+      },
     }
     this.getData = this.getData.bind(this)
+    this.onNext = this.onNext.bind(this)
+    this.onPrev = this.onPrev.bind(this)
+  }
+
+  onPrev(pre) {
+    this.setState({
+      steps: {
+        ...this.state.steps,
+        currentStep: pre,
+      },
+    })
+  }
+
+  onNext(step, selectedOption) {
+    const nextStep = "STEP" + String(Number(step.slice(-1)) + 1)
+    this.setState({
+      steps: {
+        currentStep: nextStep,
+        step: {
+          ...this.state.steps.step,
+          [step]: selectedOption,
+        },
+      },
+    })
   }
 
   getData() {
@@ -34,7 +67,19 @@ class Wizard extends Component {
         <Container>
           <Row className="justify-content-center align-items-center">
             <Col md="12">
-              <Filter />
+              <WizardStepper steps={this.state.steps} onNext={this.onNext} onPrev={this.onPrev} />
+
+              {this.state.steps.currentStep === "STEP1" ? (
+                <Col md="12">
+                  <h1 className="padded text-center">Nothing sparked joy?</h1>
+                  <h4 className="padded text-center">
+                    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>
+                    !
+                  </h4>
+                </Col>
+              ) : null}
             </Col>
           </Row>
         </Container>
diff --git a/src/wizard/WizardStepper.js b/src/wizard/WizardStepper.js
new file mode 100644
index 0000000..a5e84ad
--- /dev/null
+++ b/src/wizard/WizardStepper.js
@@ -0,0 +1,25 @@
+import React from "react"
+import { Container, Row } from "reactstrap"
+import Step1 from "./step/Step1"
+import Step2 from "./step/Step2"
+import Step3 from "./step/Step3"
+import Step4 from "./step/Step4"
+
+const WizardStepper = (props) => {
+  const {
+    steps: { currentStep },
+  } = props
+
+  return (
+    <Container className="wrapper">
+      <div className="wizard">
+        {currentStep === "STEP1" && <Step1 {...props} />}
+        {currentStep === "STEP2" && <Step2 {...props} />}
+        {currentStep === "STEP3" && <Step3 {...props} />}
+        {currentStep === "STEP4" && <Step4 {...props} />}
+      </div>
+    </Container>
+  )
+}
+
+export default WizardStepper
diff --git a/src/wizard/step/Step1.js b/src/wizard/step/Step1.js
new file mode 100644
index 0000000..7d00f14
--- /dev/null
+++ b/src/wizard/step/Step1.js
@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { Card, CardText, Button, Col, Row } from "reactstrap"
+
+const Step1 = (props) => {
+  const { onNext, onPrev, steps } = props
+  const {
+    step: { STEP1 },
+  } = steps
+  const [selectedItem, setItem] = useState(STEP1)
+
+  const handleStep = (option) => {
+    setItem(option)
+  }
+
+  return (
+    <Row className="padded">
+      <Col sm="12">
+        <h1 className="event text-center">
+          Click on any of the below card to see data of your choice and press next
+        </h1>
+      </Col>
+      <Col sm="6">
+        <Card
+          className={
+            "clickable text-center" + (selectedItem === "SEVERAL_DAYS" ? " card-selected" : "")
+          }
+          body
+          type="btn"
+          onClick={() => {
+            handleStep("SEVERAL_DAYS")
+          }}>
+          <h1 className="padded">
+            Several Days <i class="fas fa-calendar-week"></i>
+          </h1>
+          <CardText>Task that can take up to Several Days </CardText>
+        </Card>
+      </Col>
+      <Col sm="6">
+        <Card
+          className={
+            "clickable text-center" + (selectedItem === "FEW_HOURS" ? " card-selected" : "")
+          }
+          body
+          type="btn"
+          onClick={() => {
+            handleStep("FEW_HOURS")
+          }}>
+          <h1 className="padded">
+            Few Hours <i class="fas fa-calendar-day"></i>
+          </h1>
+          <CardText>Task that can take up to Few Hours </CardText>
+        </Card>
+      </Col>
+      <Col sm="12" className="d-flex justify-content-around">
+        <Button
+          color="primary"
+          className="actions float-right"
+          disabled={selectedItem === null}
+          onClick={() => {
+            onNext("STEP1", selectedItem)
+          }}>
+          Next <i class="fas fa-chevron-circle-right"></i>
+        </Button>
+      </Col>
+    </Row>
+  )
+}
+
+export default Step1
diff --git a/src/wizard/step/Step2.js b/src/wizard/step/Step2.js
new file mode 100644
index 0000000..3694c8e
--- /dev/null
+++ b/src/wizard/step/Step2.js
@@ -0,0 +1,111 @@
+import React, { useState } from "react"
+import { shallowEqual, useSelector } from "react-redux"
+import { Card, CardBody, CardTitle, CardText, Button, Row, Col } from "reactstrap"
+
+const Step2 = (props) => {
+  const {
+    onNext,
+    onPrev,
+    steps: { step },
+  } = props
+
+  const [selectedItem, setItem] = useState(step.STEP2)
+
+  const handleStep = (option) => {
+    setItem(option)
+  }
+
+  const selectProvider = (state) => state.wizard.providers
+
+  const providers = useSelector(selectProvider, shallowEqual)
+  console.log(providers)
+  const fewHours = providers.filter((provider) => provider.duration === 3)
+  const severalDays = providers.filter((provider) => provider.duration === 72)
+
+  const getIcon = (type) => {
+    switch (type) {
+      case "fedora_manual_testing":
+        return <i class="fas fa-user-check"></i>
+      case "easy_fix":
+        return <i class="fas fa-magic"></i>
+      default:
+        return <i class="fab fa-fedora"></i>
+    }
+  }
+
+  return (
+    <Row className="justify-content-center">
+      <Col sm="12">
+        <h1 className="event text-center">
+          Click on any of the below card to see data of your choice and press next
+        </h1>
+      </Col>
+      {step.STEP1 === "SEVERAL_DAYS" && (
+        <>
+          {severalDays.map((item) => (
+            <Col sm="6">
+              <Card
+                className={
+                  "clickable text-center" +
+                  (selectedItem === item.provider ? " card-selected" : "")
+                }
+                onClick={() => {
+                  handleStep(item.provider)
+                }}>
+                <CardBody>
+                  <CardTitle tag="h4">
+                    {item.name} {getIcon(item.provider)}
+                  </CardTitle>
+                  <CardText>{item.description}</CardText>
+                </CardBody>
+              </Card>
+            </Col>
+          ))}
+        </>
+      )}
+
+      {step.STEP1 === "FEW_HOURS" && (
+        <>
+          {fewHours.map((item) => (
+            <Col sm="6">
+              <Card
+                className={
+                  "clickable text-center" +
+                  (selectedItem === item.provider ? " card-selected" : "")
+                }
+                onClick={() => {
+                  handleStep(item.provider)
+                }}>
+                <CardBody>
+                  <CardTitle tag="h4">
+                    {item.name} {getIcon(item.provider)}
+                  </CardTitle>
+                  <CardText>{item.description}</CardText>
+                </CardBody>
+              </Card>
+            </Col>
+          ))}
+        </>
+      )}
+      <Col sm="12" className="d-flex justify-content-around">
+        <Button
+          className="actions float-left"
+          color="primary"
+          onClick={() => {
+            onPrev("STEP1")
+          }}>
+          <i class="fas fa-chevron-circle-left"></i> Previous
+        </Button>
+        <Button
+          color="primary"
+          className="actions btn float-right"
+          disabled={selectedItem === null}
+          onClick={(e) => onNext("STEP2", selectedItem)}>
+          Next <i class="fas fa-chevron-circle-right"></i>
+        </Button>
+      </Col>
+    </Row>
+  )
+}
+
+export default Step2
diff --git a/src/wizard/step/Step3.js b/src/wizard/step/Step3.js
new file mode 100644
index 0000000..af126a1
--- /dev/null
+++ b/src/wizard/step/Step3.js
@@ -0,0 +1,149 @@
+import React, { useState } from "react"
+import { shallowEqual, useSelector } from "react-redux"
+import { Card, CardBody, CardTitle, Button, Col, Row } from "reactstrap"
+
+import FedoraManualTesting from "../FedoraManualTesting"
+import FedoraEasyKarma from "../FedoraEasyKarma"
+import * as R from "ramda"
+
+const Step3 = (props) => {
+  const {
+    onNext,
+    onPrev,
+    steps: { step },
+  } = props
+
+  const [selectedItem, setItem] = useState(step.STEP3)
+
+  const handleStep = (option) => {
+    setItem(option)
+  }
+  const { STEP2 } = step
+  const selectAction = (state) => state.wizard.all_actions
+
+  const actions = useSelector(selectAction, shallowEqual)
+  console.log(actions)
+  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
+
+  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
+    const getProcessedData = R.pipe(
+      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
+      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
+    )
+    return getProcessedData(data)
+  }
+
+  const manualTestingData = processData(
+    grouped["fedora_manual_testing"] || [],
+    "testtype",
+    "section"
+  )
+
+  const getData = () => {
+    const getUniqueTags = R.pipe(
+      R.map((action) => action.tags),
+      R.flatten,
+      R.uniq
+    )
+    const tags = getUniqueTags(grouped["easyfix"])
+    return tags
+  }
+
+  const getLanguageIcon = (lang) => {
+    switch (lang) {
+      case "Python":
+        return <i class="fab fa-python"></i>
+      case "JavaScript":
+        return <i class="fab fa-js-square"></i>
+      case "HTML":
+        return <i class="fab fa-html5"></i>
+      case "PHP":
+        return <i class="fab fa-php"></i>
+      default:
+        return <i class="fas fa-terminal"></i>
+    }
+  }
+
+  return (
+    <Row>
+      {step.STEP2 === "fedora_manual_testing" && (
+        <Col sm="12">
+          <FedoraManualTesting data={manualTestingData} key="fmtl" />
+
+          <Button
+            onClick={() => {
+              onPrev("STEP2")
+            }}
+            className="actions btn float-left"
+            color="primary">
+            <i class="fas fa-chevron-circle-left"></i> Previous
+          </Button>
+        </Col>
+      )}
+
+      {step.STEP2 === "fedora_easy_karma" && (
+        <Col sm="12">
+          <Card>
+            <CardBody>
+              <FedoraEasyKarma data={grouped["fedora_easy_karma"]} key="karma" />
+            </CardBody>
+          </Card>
+          <Button
+            className="actions btn float-left"
+            color="primary"
+            onClick={() => {
+              onPrev("STEP2")
+            }}>
+            <i class="fas fa-chevron-circle-left"></i> Previous
+          </Button>
+        </Col>
+      )}
+      {step.STEP2 === "easyfix" && (
+        <>
+          <Col sm="12">
+            <h1 className="event text-center">
+              Click on any of the below card to see programming language of your choice and press
+              next
+            </h1>
+          </Col>
+          {getData().map((lang) => (
+            <Col sm="6">
+              <Card
+                className={
+                  "clickable text-center" + (selectedItem === lang ? " card-selected" : "")
+                }
+                onClick={() => {
+                  handleStep(lang)
+                }}>
+                <CardBody>
+                  <CardTitle tag="h1">
+                    {lang} {getLanguageIcon(lang)}{" "}
+                  </CardTitle>
+                </CardBody>
+              </Card>
+            </Col>
+          ))}
+          <Col md="12">
+            <Button
+              className="actions btn float-left"
+              color="primary"
+              onClick={() => {
+                onPrev("STEP2")
+              }}>
+              <i class="fas fa-chevron-circle-left"></i> Previous
+            </Button>
+            <Button
+              color="primary"
+              className="actions btn float-right"
+              disabled={selectedItem === null}
+              onClick={(e) => onNext("STEP3", selectedItem)}>
+              <i class="fas fa-chevron-circle-right"></i> Next
+            </Button>
+          </Col>
+        </>
+      )}
+    </Row>
+  )
+}
+
+export default Step3
diff --git a/src/wizard/step/Step4.js b/src/wizard/step/Step4.js
new file mode 100644
index 0000000..357f11e
--- /dev/null
+++ b/src/wizard/step/Step4.js
@@ -0,0 +1,55 @@
+import React from "react"
+import { Button, Row, Col } from "reactstrap"
+import { shallowEqual, useSelector } from "react-redux"
+import * as R from "ramda"
+import Easyfix from "../Easyfix"
+
+const Step4 = (props) => {
+  const {
+    onNext,
+    onPrev,
+    steps: { step },
+  } = props
+
+  const { STEP2, STEP3 } = step
+
+  const selectAction = (state) => state.wizard.all_actions
+
+  const actions = useSelector(selectAction, shallowEqual)
+  console.log(actions)
+  const grouped = R.groupBy((action) => action.provider, actions[STEP2])
+
+  const processData = (data, firstLevelGroupKey, secondLevelGroupKey) => {
+    const getProcessedData = R.pipe(
+      R.groupBy((a) => a.extra_data[firstLevelGroupKey]),
+      R.map((v) => R.groupBy((a) => a.extra_data[secondLevelGroupKey], v))
+    )
+    return getProcessedData(data)
+  }
+
+  const getData = () => {
+    const actions = R.filter((a) => a.tags.includes(STEP3), grouped["easyfix"])
+    return actions
+  }
+
+  const easyfixTestingData = processData(getData() || [], "repo_org", "repo_name")
+
+  return (
+    <Row>
+      <Col sm="12">
+        <Easyfix data={easyfixTestingData} key="easyfix" />
+
+        <Button
+          className="actions btn float-left"
+          color="primary"
+          onClick={() => {
+            onPrev("STEP3")
+          }}>
+          <i class="fas fa-chevron-circle-left"></i> Previous
+        </Button>
+      </Col>
+    </Row>
+  )
+}
+
+export default Step4
diff --git a/yarn.lock b/yarn.lock
index f89d35e..8c2d60b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1129,7 +1129,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -1185,71 +1185,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@emotion/cache@^11.4.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
-  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/sheet" "^1.0.0"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    stylis "^4.0.3"
-
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/memoize@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
-  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
-
-"@emotion/react@^11.1.1":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
-  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.1"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
-  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
-  dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
-  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
-
-"@emotion/unitless@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
-  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
-
-"@emotion/weak-memoize@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1443,6 +1378,16 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@reduxjs/toolkit@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5"
+  integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==
+  dependencies:
+    immer "^8.0.1"
+    redux "^4.0.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -2550,6 +2495,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^4.4.1:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
+  integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3837,14 +3787,6 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5151,7 +5093,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5358,6 +5300,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@^8.0.1:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a"
+  integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -6817,11 +6764,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoize-one@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -8559,7 +8501,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8785,13 +8727,6 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8911,24 +8846,6 @@ react-scripts@^3.3.0:
   optionalDependencies:
     fsevents "2.1.2"
 
-react-select@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
-  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.1.1"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
-    react-transition-group "^4.3.0"
-
-react-step-wizard@^5.3.6:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/react-step-wizard/-/react-step-wizard-5.3.6.tgz#d109d741d258166fc2c08dabefd689764ec7a194"
-  integrity sha512-cJiJ+Pgku10scyL39HYKPgwoZQLgtOs4tVo9LC6IUoUqXdElrMrwRjSwOJrRgL6OmTAUaLIzAhq7mNSqaYtvMw==
-
 react-transition-group@^2.3.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -8939,16 +8856,6 @@ react-transition-group@^2.3.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-transition-group@^4.3.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^16.5.2:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -9249,6 +9156,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -10132,11 +10044,6 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylis@^4.0.3:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

