From 29f47225448e5c8a92db051232502a445017e032 Mon Sep 17 00:00:00 2001 From: manisha Date: Jul 22 2021 10:53:01 +0000 Subject: changed class based components to functional based --- diff --git a/src/App.js b/src/App.js index 2858284..e04e484 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { Component } from "react" +import React from "react" import { Route, Switch } from "react-router" import { BrowserRouter } from "react-router-dom" @@ -6,51 +6,49 @@ import { BrowserRouter } from "react-router-dom" import Wizard from "./wizard/Wizard" import LandingPage from "./landingpage/LandingPage" import NotFound from "./NotFound" -class App extends Component { - render() { - return ( - - - - - { - return - }} - /> - { - return - }} - /> +const App = () => { + return ( + + + + + { + return + }} + /> + { + return + }} + /> - { - return - }} - /> + { + return + }} + /> - { - return - }} - /> + { + return + }} + /> - { - return - }} - /> - - - - ) - } + { + return + }} + /> + + + + ) } export default App diff --git a/src/NotFound.js b/src/NotFound.js index 7ff839c..9790a44 100644 --- a/src/NotFound.js +++ b/src/NotFound.js @@ -1,28 +1,24 @@ -import React, { Component } from "react" +import React from "react" import Layout from "./layout/Layout" import { Link } from "react-router-dom" import { Container } from "reactstrap" -class Wizard extends Component { - render() { - return ( - - -

-

404

-

- - 😢 - -

- - Go to home page - -

- - - ) - } +const Wizard = () => { + return ( + + +

+

404

+

+ + 😢 + +

+ Go to home page +

+ + + ) } export default Wizard diff --git a/src/landingpage/Blockers.js b/src/landingpage/Blockers.js index 22e1a9a..95e71bf 100644 --- a/src/landingpage/Blockers.js +++ b/src/landingpage/Blockers.js @@ -1,32 +1,25 @@ -import React, { Component } from "react" +import React from "react" import { Row, Card, CardBody } from "reactstrap" import SourceLink from "./SourceLink" import BugStats from "./common/BugStats" -class Blockers extends Component { - constructor(props) { - super(props) - this.state = { blockerbugs: {}, release: 0 } - } - - render() { - if (this.props.data) - return ( - - -

- Fedora {this.props.release} blockers and FEs{" "} - -

- - - - - - - - ) - } +const Blockers = (props) => { + return ( + props.data && ( + + +

+ Fedora {props.release} blockers and FEs{" "} + +

+ + + + + + + ) + ) } export default Blockers diff --git a/src/landingpage/Events.js b/src/landingpage/Events.js index 811f07e..0c5d3c1 100644 --- a/src/landingpage/Events.js +++ b/src/landingpage/Events.js @@ -1,77 +1,64 @@ -import React, { Component } from "react" +import React from "react" import dateFormat from "dateformat" import SourceLink from "./SourceLink" import { Card, CardBody, Row, Col } from "reactstrap" -class Events extends Component { - constructor(props) { - super(props) - this.state = { meetings: [] } - } - - render() { - const meetings = this.props.data.map((meeting) => { - const old = new Date(meeting.start) - 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 ( - - ) - }) +const Events = (props) => { + const meetings = props.data.map((meeting) => { + const old = new Date(meeting.start) + 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 ( - - -

- Meetings and testdays in the next 7 days{" "} - -

-
{meetings}
- - + ) - } + }) + return ( + + +

+ Meetings and testdays in the next 7 days{" "} + +

+
{meetings}
+ + + ) } -class Event extends Component { - render() { - return ( - - -
-
- {this.props.month} - {this.props.date} -
+const Event = (props) => { + return ( + + +
+
+ {props.month} + {props.date} +
-
- - - {this.props.summary} - - - {this.props.time} -
+
+ + + {props.summary} + + + {props.time}
- - - ) - } +
+ + + ) } export default Events diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js index 76f261f..f95ebed 100644 --- a/src/landingpage/LandingPage.js +++ b/src/landingpage/LandingPage.js @@ -1,4 +1,4 @@ -import React, { Component } from "react" +import React, { useEffect, useState } from "react" import { Container, Row, @@ -16,94 +16,93 @@ import Events from "./Events" import Blockers from "./Blockers" import Minutes from "./Minutes" import * as R from "ramda" -import { connect } from "react-redux" +import { shallowEqual, useDispatch, useSelector } from "react-redux" import { loadData } from "../actions/reduxActions" import Cookies from "universal-cookie" -class LandingPage extends Component { - constructor(props) { - super(props) - this.cookies = new Cookies() - this.available_components = ["events", "blockers", "minutes"] - let enabled_components = this.cookies.get("landingpage_enabled_components") - if (enabled_components === undefined) { - enabled_components = [...this.available_components] - this.cookies.set("landingpage_enabled_components", enabled_components, { - path: "/", - }) - } - this.state = { - blockerbugs: {}, - devel: 0, - meetings: [], - schedule: [], - last_qa_meeting: {}, - 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()) +const LandingPage = () => { + const cookies = new Cookies() + let available_components = ["events", "blockers", "minutes"] + let enabled_components = cookies.get("landingpage_enabled_components") + if (enabled_components === undefined) { + enabled_components = [...available_components] + cookies.set("landingpage_enabled_components", enabled_components, { + path: "/", + }) } - handleVisibilityChange(e, item) { - let enabled_components = [...this.state.enabled_components] + const [state, setState] = useState({ + blockerbugs: {}, + devel: 0, + meetings: [], + schedule: [], + last_qa_meeting: {}, + stable: 0, + config_mode: false, + enabled_components: enabled_components, + showModal: false, + }) + + const selectAction = (state) => state.landing_page.api_call_status + const api_call_status = useSelector(selectAction, shallowEqual) + const dispatch = useDispatch() + + const landingPageData = useSelector((state) => state.landing_page) + + useEffect(() => { + dispatch(loadData()) + }, [dispatch]) + + const handleVisibilityChange = (e, item) => { + let enabled_components = [...state.enabled_components] if (enabled_components.includes(item)) { enabled_components.splice(enabled_components.indexOf(item), 1) } else { enabled_components.push(item) - enabled_components = this.available_components.filter((c) => enabled_components.includes(c)) + enabled_components = available_components.filter((c) => enabled_components.includes(c)) } - this.cookies.set("landingpage_enabled_components", enabled_components, { + 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() + setState({ ...state, enabled_components: enabled_components }) } - toggleModal() { - let modalState = !this.state.showModal - this.setState({ + const toggleModal = () => { + let modalState = !state.showModal + setState({ + ...state, showModal: modalState, }) } - render() { - const available_components = { - events: , - blockers: , - minutes: , - } - let components = R.splitEvery( - 2, - this.state.config_mode ? this.available_components : this.state.enabled_components - ) - components = components.map((row) => ( - - {row.map((item) => ( -
- {available_components[item]} -
- ))} - - )) - return ( - + const available_components_mapper = { + events: , + blockers: , + minutes: , + } + let components = R.splitEvery( + 2, + state.config_mode ? available_components : state.enabled_components + ) + components = components.map((row) => ( + + {row.map((item) => ( +
+ {available_components_mapper[item]} +
+ ))} + + )) + + return ( + <> +
- +
@@ -112,13 +111,13 @@ class LandingPage extends Component { {components}
- - + Visibility Configuration - {this.available_components.map((item) => ( + {available_components.map((item) => (
@@ -126,8 +125,8 @@ class LandingPage extends Component { type="checkbox" className="custom-control-input" id={item} - checked={this.state.enabled_components.includes(item)} - onChange={(e) => this.handleVisibilityChange(e, item)} + checked={state.enabled_components.includes(item)} + onChange={(e) => handleVisibilityChange(e, item)} />{" "}
- ) - } -} - -const mapStateToProps = (state) => { - return { - ...state.landing_page, - } + + ) } -export default connect(mapStateToProps)(LandingPage) +export default LandingPage diff --git a/src/landingpage/Minutes.js b/src/landingpage/Minutes.js index 7f82197..297ba37 100644 --- a/src/landingpage/Minutes.js +++ b/src/landingpage/Minutes.js @@ -1,31 +1,29 @@ -import React, { Component } from "react" +import React from "react" import { Card, CardBody } from "reactstrap" -class Events extends Component { - render() { - return ( - - -

Fedora QA Meeting Minutes

-
- - Latest minutes from {this.props.data.date} - -
- Visit{" "} - - meetbot - {" "} - to see older. -
-
- - - ) - } +const Events = (props) => { + return ( + + +

Fedora QA Meeting Minutes

+
+ + Latest minutes from {props.data.date} + +
+ Visit{" "} + + meetbot + {" "} + to see older. +
+
+ + + ) } export default Events diff --git a/src/landingpage/SourceLink.js b/src/landingpage/SourceLink.js index 76cfa0b..ce2909e 100644 --- a/src/landingpage/SourceLink.js +++ b/src/landingpage/SourceLink.js @@ -1,17 +1,11 @@ -import React, {Component} from 'react' +import React from "react" -class SourceLink extends Component { - render() { - return ( - - - - ) - } +const SourceLink = (props) => { + return ( + + + + ) } export default SourceLink diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js index c49caff..b68bc2b 100644 --- a/src/landingpage/Timeline.js +++ b/src/landingpage/Timeline.js @@ -1,14 +1,9 @@ -import React, { Component } from "react" +import React from "react" import { Card, CardBody } from "reactstrap" import SourceLink from "./SourceLink" -class Timeline extends Component { - constructor(props) { - super(props) - this.state = { schedule: [] } - } - - get_title(summary) { +const Timeline = (props) => { + const get_title = (summary) => { summary = summary.toLowerCase() if (summary.includes("freeze")) return "At the milestone freeze, pushes from the updates-testing to the stable repository are suspended until the release candidate is accepted." @@ -20,71 +15,64 @@ class Timeline extends Component { return "Release candidate was accepted (violating no milestone criteria) and was released." } - render() { - const line = this.props.data.map((milestone) => { - return ( - - - - ) - }) - - const dates = this.props.data.map((milestone) => { - return ( - - {milestone.date} - - ) - }) + const line = props.data.map((milestone) => { + return ( + + + + ) + }) - const schedule = this.props.data.map((milestone) => { - return ( - - {milestone.summary} - - ) - }) + const dates = props.data.map((milestone) => { return ( -
- - -

- Current development schedule{" "} - -

-
- - - {line} - {dates} - {schedule} - -
-
-
This is about the development schedule
- - -
+ + {milestone.date} + ) - } -} + }) -class Line extends Component { - render() { - const lineStyle = { - stroke: this.props.color, - strokeWidth: "3", - } + const schedule = props.data.map((milestone) => { return ( - - - - + + {milestone.summary} + ) + }) + return ( +
+ + +

+ Current development schedule{" "} + +

+
+ + + {line} + {dates} + {schedule} + +
+
+
This is about the development schedule
+ + +
+ ) +} + +const Line = (props) => { + const lineStyle = { + stroke: props.color, + strokeWidth: "3", } + return ( + + + + + ) } export default Timeline diff --git a/src/landingpage/common/BugStats.js b/src/landingpage/common/BugStats.js index b3be054..015de59 100644 --- a/src/landingpage/common/BugStats.js +++ b/src/landingpage/common/BugStats.js @@ -15,22 +15,26 @@ const BugStats = (props) => { - - Proposed Blockers - {stats.blockers_proposed} - - - Accepted Blockers - {stats.blockers} - - - Proposed FEs - {stats.fe_proposed} - - - Accepted FEs - {stats.fe} - + {stats && ( + <> + + Proposed Blockers + {stats.blockers_proposed} + + + Accepted Blockers + {stats.blockers} + + + Proposed FEs + {stats.fe_proposed} + + + Accepted FEs + {stats.fe} + + + )}
diff --git a/src/layout/Masthead.js b/src/layout/Masthead.js index 018db74..4fac37c 100644 --- a/src/layout/Masthead.js +++ b/src/layout/Masthead.js @@ -57,7 +57,7 @@ const Masthead = () => { {api_call_status() === API_CALL_STATUS_VALUES.RETRYING && ( <> - + Retrying diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js index 71ac755..384d63f 100644 --- a/src/wizard/Easyfix.js +++ b/src/wizard/Easyfix.js @@ -1,89 +1,83 @@ -import React, { Component } from "react" +import React from "react" import { CollapsableCard } from "./components" import { Col } from "reactstrap" -export default class Easyfix extends Component { - render() { - return ( - <> - {Object.keys(this.props.data).map((k) => ( - - - - ))} - - ) - } +export default (props) => { + return ( + <> + {Object.keys(props.data).map((k) => ( + + + + ))} + + ) } -class EasyfixSection extends Component { - render() { - var title = this.props.title - var subsections = Object.keys(this.props.data) - - if (subsections.length > 1) { - subsections = Object.keys(this.props.data).map((k) => { - const title = ( - - {k} - {this.props.data[k][0].extra_data.description} - - ) +const EasyfixSection = (props) => { + var title = props.title + var subsections = Object.keys(props.data) - return ( - - - - ) - }) - title = ( + if (subsections.length > 1) { + subsections = Object.keys(props.data).map((k) => { + const title = ( - {title} - Is a group containing several projects. Expand to see more. + {k} - {props.data[k][0].extra_data.description} ) return ( - - {subsections} + + ) - } else { - if (title !== subsections[0]) { - title = ( - - {title + "/" + subsections[0]} -{" "} - {this.props.data[subsections[0]][0].extra_data.description} - - ) - } else { - title = ( - - {title} - {this.props.data[subsections[0]][0].extra_data.description} - - ) - } - const links = Object.keys(this.props.data).map((k) => ( - - )) + }) + title = ( + + {title} - Is a group containing several projects. Expand to see more. + + ) - return ( - - {links} - + return ( + + {subsections} + + ) + } else { + if (title !== subsections[0]) { + title = ( + + {title + "/" + subsections[0]} -{" "} + {props.data[subsections[0]][0].extra_data.description} + + ) + } else { + title = ( + + {title} - {props.data[subsections[0]][0].extra_data.description} + ) } + const links = Object.keys(props.data).map((k) => ( + + )) + + return ( + + {links} + + ) } } -class EasyfixLinksList extends Component { - render() { - const items = this.props.data.map((action) => ( -
  • - - {action.name} - -
    • - )) +const EasyfixLinksList = (props) => { + const items = props.data.map((action) => ( +
  • + + {action.name} + +
    • + )) - return
      {items}
    - } + return
      {items}
    } diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js index 830cce5..5c29c4b 100644 --- a/src/wizard/FedoraEasyKarma.js +++ b/src/wizard/FedoraEasyKarma.js @@ -1,137 +1,131 @@ -import React, { Component } from "react" +import React from "react" import { CollapsableBadge, ModalBadge } from "./components" -export default class FedoraEasyKarmaItemsList extends Component { - render() { - if (this.props.data === undefined) return null - else - return ( -
    -

    What is Karma

    - Before a new version of a package is pushed to the Fedora's Updates repository, it - needs to be tested and proved functional.{" "} - - The updates are kept in{" "} - - Bodhi - - , 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. - -

    Sure, let me do it!

    -
      -
    1. - Fedora Accounts System (FAS) account is required.{" "} - -
        +export default (props) => { + if (props.data === undefined) return null + else + return ( +
        +

        What is Karma

        + Before a new version of a package is pushed to the Fedora's Updates repository, it + needs to be tested and proved functional.{" "} + + The updates are kept in{" "} + + Bodhi + + , 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. + +

        Sure, let me do it!

        +
          +
        1. + Fedora Accounts System (FAS) account is required.{" "} + +
            +
          • + Visit{" "} + + FAS Sign-up page + {" "} + and create it. +
            • +
          • Note the username and password, you will need it later on.
            • +
          +           +
          2. +
        2. + Make sure your system is up-to-date: sudo dnf update --refresh +
          3. +
        3. + Install fedora-easy-karma tool: sudo dnf install fedora-easy-karma +
          4. +
        4. + Choose an update to test{" "} + + Have a look at the available packages in updates-testing repo, by + running dnf --enablerepo=updates-testing list --refresh --upgrades and + choose a package you know. + +
          5. +
        5. + Install the package{" "} + sudo dnf --enablerepo=updates-testing update PACKAGE_NAME, and test + whether it works, as you would expect. +
          + Note: Other packages from updates-testing repo may be + installed as dependencies (shown during the installation process). Try to test those + too, if possible.{" "} + + Sometimes, the update associated with the package you just installed fixes some + specific bugs, or has testcases associated with it. +
          + Run fedora-easy-karma --fas-username=FAS_USERNAME, and look for{" "} + Bugs, Test Cases, and/or Notes sections in the + detailed output.{" "} + + We already mentioned Bodhi, several times. Instead of using the{" "} + fedora-easy-karma interface for submitting Karma and/or learning about + the Update, you can visit Bodhi directly. +
          + fedora-easy-karma shows the URL of the relevant update near the bottom + of the text output - look for URL like{" "} + https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc. +
          + 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. +           +           +
          6. +
        6. + Run fedora-easy-karma --fas-username=FAS_USERNAME and report what you + found out.{" "} + + It identifies the packages installed from the updates-testing{" "} + repository, and matches them to the updates in Bodhi. +
          + You are then presented with the relevant updates one-by-one, to submit Karma and a + comment.{" "} + +
          1. - Visit{" "} + Enter 1 to mark positive karma (the update works just fine, as far + as you can tell), or -1 to mark the package as broken.
            + Not sure you can judge the package's state? Have a look at the{" "} - FAS Sign-up page - {" "} - and create it. + href="https://fedoraproject.org/wiki/QA:Update_feedback_guidelines" + rel="noopener noreferrer"> + Update Feedback Guidelines + +
            + Still not sure? Just press Enter to skip it.
            2. -
          2. Note the username and password, you will need it later on.
            3. -
      -       -
      2. -
    2. - Make sure your system is up-to-date: sudo dnf update --refresh -
      3. -
    3. - Install fedora-easy-karma tool: sudo dnf install fedora-easy-karma -
      4. -
    4. - Choose an update to test{" "} - - Have a look at the available packages in updates-testing repo, by - running dnf --enablerepo=updates-testing list --refresh --upgrades and - choose a package you know. - -
      5. -
    5. - Install the package{" "} - sudo dnf --enablerepo=updates-testing update PACKAGE_NAME, and test - whether it works, as you would expect. -
      - Note: Other packages from updates-testing repo may be - installed as dependencies (shown during the installation process). Try to test those - too, if possible.{" "} - - Sometimes, the update associated with the package you just installed fixes some - specific bugs, or has testcases associated with it. -
      - Run fedora-easy-karma --fas-username=FAS_USERNAME, and look for{" "} - Bugs, Test Cases, and/or Notes sections in - the detailed output.{" "} - - We already mentioned Bodhi, several times. Instead of using the{" "} - fedora-easy-karma interface for submitting Karma and/or learning - about the Update, you can visit Bodhi directly. -
      - fedora-easy-karma shows the URL of the relevant update near the - bottom of the text output - look for URL like{" "} - https://bodhi.fedoraproject.org/updates/FEDORA-2019-00870e8bfc. -
      - 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. -       -       -
      6. -
    6. - Run fedora-easy-karma --fas-username=FAS_USERNAME and report what you - found out.{" "} - - It identifies the packages installed from the updates-testing{" "} - repository, and matches them to the updates in Bodhi. -
      - You are then presented with the relevant updates one-by-one, to submit Karma and a - comment.{" "} - -
        -
      1. - Enter 1 to mark positive karma (the update works just fine, as - far as you can tell), or -1 to mark the package as broken.{" "} -
        - Not sure you can judge the package's state? Have a look at the{" "} - - Update Feedback Guidelines - -
        - Still not sure? Just press Enter to skip it. -
        2. -
      2. - Add a comment - even if it works, try to describe what you tested. It can be - as easy as{" "} - I tried openning and editing a document, and it worked. when you - test a text-editor, or{" "} - I opened a couple of tabs, and browsed random pages. for a - web-browser. -
        - 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. -
        3. -
      -       -       -
      7. -
    7. - Restore the stable-packages on your system by running{" "} - sudo dnf distro-sync -
      8. -
    -
    - ) - } +
  • + Add a comment - even if it works, try to describe what you tested. It can be as + easy as I tried openning and editing a document, and it worked.{" "} + when you test a text-editor, or{" "} + I opened a couple of tabs, and browsed random pages. for a + web-browser. +
    + 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. +
    • + + + + +
  • + Restore the stable-packages on your system by running sudo dnf distro-sync +
    • + +
    + ) } diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js index 10de4c2..aca861a 100644 --- a/src/wizard/FedoraManualTesting.js +++ b/src/wizard/FedoraManualTesting.js @@ -1,408 +1,382 @@ -import React, { Component } from "react" +import React, { useState } from "react" import { Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap" import { CollapsableCard, ModalBadge } from "./components" -export default class FedoraManualTesting extends Component { - render() { - let sections = Object.keys(this.props.data).map((k) => ( - - )) - return
    {sections}
    - } +export default (props) => { + let sections = Object.keys(props.data).map((k) => ( + + )) + return
    {sections}
    } -class FedoraManualTestingItemsListSub2 extends Component { - render() { - return ( -
      - {this.props.data.map((action) => ( -
    • - -
      • - ))} -
    - ) - } +const FedoraManualTestingItemsListSub2 = (props) => { + return ( +
      + {props.data.map((action) => ( +
    • + +
      • + ))} +
    + ) } -export class FedoraManualTestingItemsListSub1 extends Component { - render() { - var subsections = Object.keys(this.props.data).map((k) => ( -
  • - {k} - -
    • - )) - subsections =
      {subsections}
    +export function FedoraManualTestingItemsListSub1(props) { + var subsections = Object.keys(props.data).map((k) => ( +
  • + {k} + +
    • + )) + subsections =
      {subsections}
    - var l1 =
    - switch (this.props.title) { - case "Installation": - l1 = ( -
    - The Installation testcases generally deal with a part of the - installation procedure. -
    - You will certainly need an installation ISO, and either a Virtual or Bare-metal machine - to run the test. -
    - Note: some (not that many, though) of these testcases require Bare-metal - machine. Be sure to read the Description of the testcase carefully. -
    - ) - break - case "Desktop": - l1 = ( -
    - The Desktop testcases cover basic functionality of the desktop - environment. -
    - You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live - image instead. -
    - ) - break - case "Base": - l1 = ( -
    - The Base testcases cover the system's basic functionality just - after a clean installation. -
    - Most times, you will be asked to perform a clean Fedora installation. You can use - either Virtual or Bare-metal machine. -
    - Pro tip: using a snapshot of cleanly installed Virtual machine is just fine. No - need to reinstall for every testcase. -
    - ) - break - case "Server": - l1 = ( -
    - The Server testcases usually require multiple machines to test the - server-client behaviour, and might feel a bit advanced. -
    - ) - break - case "Cloud": - l1 = ( -
    - Even thought the Cloud testcases are best done in the specific - environments like EC2 or Openstack, you can also perform them locally using Testcloud. -
    - Have a look at the{" "} - - Cloud provider setup - {" "} - guides for more details. -
    - ) - break - default: - break - } - - return ( - - {subsections} - - ) + var l1 =
    + switch (props.title) { + case "Installation": + l1 = ( +
    + The Installation testcases generally deal with a part of the + installation procedure. +
    + You will certainly need an installation ISO, and either a Virtual or Bare-metal machine + to run the test. +
    + Note: some (not that many, though) of these testcases require Bare-metal machine. + Be sure to read the Description of the testcase carefully. +
    + ) + break + case "Desktop": + l1 = ( +
    + The Desktop testcases cover basic functionality of the desktop + environment. +
    + You can either install Fedora onto clean Virtual or Bare-metal machine, or use a Live + image instead. +
    + ) + break + case "Base": + l1 = ( +
    + The Base testcases cover the system's basic functionality just + after a clean installation. +
    + Most times, you will be asked to perform a clean Fedora installation. You can use either + Virtual or Bare-metal machine. +
    + Pro tip: using a snapshot of cleanly installed Virtual machine is just fine. No + need to reinstall for every testcase. +
    + ) + break + case "Server": + l1 = ( +
    + The Server testcases usually require multiple machines to test the + server-client behaviour, and might feel a bit advanced. +
    + ) + break + case "Cloud": + l1 = ( +
    + Even thought the Cloud testcases are best done in the specific + environments like EC2 or Openstack, you can also perform them locally using Testcloud. +
    + Have a look at the{" "} + + Cloud provider setup + {" "} + guides for more details. +
    + ) + break + default: + break } + + return ( + + {subsections} + + ) } -export class FedoraManualTestingItem extends Component { - render() { - const extra_data = this.props.data.extra_data +export function FedoraManualTestingItem(props) { + const extra_data = props.data.extra_data - const tc_url = extra_data.testcase_url - const name = this.props.data.name + const tc_url = extra_data.testcase_url + const name = props.data.name - const matrix_url = extra_data.matrix_url - var environment_examples = undefined - switch (extra_data.testtype) { - case "Installation": - environment_examples = ( - - x86_64 or ARM - - ) - break - case "Base": - environment_examples = ( - - Workstation, Server, Xfce or{" "} - Minimal - - ) - break - case "Desktop": - environment_examples = ( - - Workstation or KDE - - ) - break - case "Server": - environment_examples = ( - - x86_64 or aarch64 - - ) - break - default: - break - } + const matrix_url = extra_data.matrix_url + var environment_examples = undefined + switch (extra_data.testtype) { + case "Installation": + environment_examples = ( + + x86_64 or ARM + + ) + break + case "Base": + environment_examples = ( + + Workstation, Server, Xfce or Minimal + + ) + break + case "Desktop": + environment_examples = ( + + Workstation or KDE + + ) + break + case "Server": + environment_examples = ( + + x86_64 or aarch64 + + ) + break + default: + break + } - const testtype = extra_data.testtype + const testtype = extra_data.testtype - return ( - -
      -
    1. - Identify the testcase and `environment` in our{" "} - - Tescase matrix - {" "} - -
        -
      • - Have a look at the matrix. The rows are the testcases, and the columns are the - environments. Most of the time, these are {environment_examples} for the{" "} - {testtype} testcases, but you can also encouter a generic Result{" "} - column, which usually means you can use any media/architecture available. -
        • -
      • - For this particular testcase, {extra_data.envs.join(", ")}{" "} - {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing - results. -
        • -
      -       -
      2. + return ( + +
        +
      1. + Identify the testcase and `environment` in our{" "} + + Tescase matrix + {" "} + +
          +
        • + Have a look at the matrix. The rows are the testcases, and the columns are the + environments. Most of the time, these are {environment_examples} for the {testtype}{" "} + testcases, but you can also encouter a generic Result column, which + usually means you can use any media/architecture available. +
          • +
        • + For this particular testcase, {extra_data.envs.join(", ")}{" "} + {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing + results. +
          • +
        +         +
        2. -
      2. - Read the{" "} - - Testcase - {" "} - briefly, just to have a general idea of what you will be doing.{" "} - - The testcases are generally split into four sections: -
          -
        • - Description should give you a general idea of what is being - tested -
          • -
        • - Setup describes the steps to take before you begin working on - the testcase -
          • -
        • - How to test contains the individual steps to take in order to - perform the testcase -
          • -
        • - Expected results describe what you should check while testing in - order to decide whether it Passed of Failed -
          • -
        -         -
        3. +
      3. + Read the{" "} + + Testcase + {" "} + briefly, just to have a general idea of what you will be doing.{" "} + + The testcases are generally split into four sections: +
          +
        • + Description should give you a general idea of what is being tested +
          • +
        • + Setup describes the steps to take before you begin working on the + testcase +
          • +
        • + How to test contains the individual steps to take in order to + perform the testcase +
          • +
        • + Expected results describe what you should check while testing in + order to decide whether it Passed of Failed +
          • +
        +         +
        4. -
      4. - Based on the enviromnent, select and download and appropriate ISO{" "} - - here - - .{" "} - -
          -
        • - Most of the time Workstation Live, or Server DVD are fine, but sometimes there - are specific products (e.g. Xfce) to be tested -
          • -
        • - Make sure to read about identifying the environment above.{" "} - -
            -
          • - Have a look at the matrix. The rows are the testcases, and the columns are - the environments. Most of the time, these are {environment_examples} for - the {testtype} testcases, but you can also encouter a generic{" "} - Result column, which usually means you can use any - media/architecture available. -
            • -
          • - For this particular testcase, {extra_data.envs.join(", ")}{" "} - {extra_data.envs.length > 1 ? "environments are" : "environment is"}{" "} - missing results. -
            • -
          -           -
          • -
        -         -
        5. +
      5. + Based on the enviromnent, select and download and appropriate ISO{" "} + + here + + .{" "} + +
          +
        • + Most of the time Workstation Live, or Server DVD are fine, but sometimes there are + specific products (e.g. Xfce) to be tested +
          • +
        • + Make sure to read about identifying the environment above.{" "} + +
            +
          • + Have a look at the matrix. The rows are the testcases, and the columns are + the environments. Most of the time, these are {environment_examples} for the{" "} + {testtype} testcases, but you can also encouter a generic Result{" "} + column, which usually means you can use any media/architecture available. +
            • +
          • + For this particular testcase, {extra_data.envs.join(", ")}{" "} + {extra_data.envs.length > 1 ? "environments are" : "environment is"} missing + results. +
            • +
          +           +
          • +
        +         +
        6. -
      6. - Study the{" "} - - Testcase - {" "} - thoroughly, to be sure you know what to do.{" "} - -
          -
        • - The testcase structure is not making sense?{" "} - - The testcases are generally split into four sections: -
            -
          • - Description should give you a general idea of what is - being tested -
            • -
          • - Setup describes the steps to take before you begin working - on the testcase -
            • -
          • - How to test contains the individual steps to take in order - to perform the testcase -
            • -
          • - Expected results describe what you should check while - testing in order to decide whether it Passed of Failed -
            • -
          -           -
          • -
        • - Maybe you are stuck, or just do not understand something? Feel free to ask on our - IRC channel #fedora-qa at freenode.net{" "} - - If you are not that familiar with IRC, you can use the{" "} - - web-interface - {" "} - just enter a Nickname of your choice, #fedora-qa (including the hash sign) in - the Channels field, and click Connect. - -
          • -
        -         -
        7. +
      7. + Study the{" "} + + Testcase + {" "} + thoroughly, to be sure you know what to do.{" "} + +
          +
        • + The testcase structure is not making sense?{" "} + + The testcases are generally split into four sections: +
            +
          • + Description should give you a general idea of what is being + tested +
            • +
          • + Setup describes the steps to take before you begin working + on the testcase +
            • +
          • + How to test contains the individual steps to take in order + to perform the testcase +
            • +
          • + Expected results describe what you should check while + testing in order to decide whether it Passed of Failed +
            • +
          +           +
          • +
        • + Maybe you are stuck, or just do not understand something? Feel free to ask on our + IRC channel #fedora-qa at freenode.net{" "} + + If you are not that familiar with IRC, you can use the{" "} + + web-interface + {" "} + just enter a Nickname of your choice, #fedora-qa (including the hash sign) in the + Channels field, and click Connect. + +
          • +
        +         +
        8. -
      8. Get your hands dirty, and test the hell out of it!
        9. -
      9. - - Great! Either use relval report-results on command line (make sure to - install the relval package first), or modify the{" "} - - matrix - {" "} - directly by clicking on the Edit link next to the Matrice's header, and - put {{result|pass|YOUR_NAME_HERE|}} in the - appropriate spot. - +
      10. Get your hands dirty, and test the hell out of it!
        11. +
      11. + + Great! Either use relval report-results on command line (make sure to + install the relval package first), or modify the{" "} + + matrix + {" "} + directly by clicking on the Edit link next to the Matrice's header, and + put {{result|pass|YOUR_NAME_HERE|}} in the appropriate + spot. + - - Awesome! Ideally read up on https://fedoraproject.org/wiki/How_to_file_a_bug_report -
        - If you don't feel like reading a wall of text, at least pot together a small document - containing: -
          -
        • - Brief description of what went wrong (e.g. "QA:Testcase_dualboot_with_windows - - Bootloader does not show the Windows option") -
          • -
        • - The name of the ISO image you used (e.g. - "Fedora-Server-netinst-i386-Rawhide-20181227.n.0.iso") -
          • -
        • - Note what you did, as precisely as possible, in a step-by-step fashion. Even - details like "Chose Polish as the languae for the installation process" can - matter. -
          • -
        • - Try to reproduce the same state again based on the steps above (you can also - experiment a bit, and try to come up with just the critical steps) -
          • -
        • - 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{" "} - - 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. - -
          • -
        - Once you get the Bug reported, make sure to also submit the result into the testing - matrix. Either use relval report-results on command line (make sure to - install the relval package first), or modify the{" "} - - matrix - {" "} - directly by clicking on the Edit link next to the Matrice's header, and - put {{result|fail|YOUR_NAME_HERE|BUG_NUMBER|}} in - the appropriate spot. -         -
        12. -
      -       - ) - } + + Awesome! Ideally read up on https://fedoraproject.org/wiki/How_to_file_a_bug_report +
      + If you don't feel like reading a wall of text, at least pot together a small document + containing: +
        +
      • + Brief description of what went wrong (e.g. "QA:Testcase_dualboot_with_windows - + Bootloader does not show the Windows option") +
        • +
      • + The name of the ISO image you used (e.g. + "Fedora-Server-netinst-i386-Rawhide-20181227.n.0.iso") +
        • +
      • + Note what you did, as precisely as possible, in a step-by-step fashion. Even + details like "Chose Polish as the languae for the installation process" can matter. +
        • +
      • + Try to reproduce the same state again based on the steps above (you can also + experiment a bit, and try to come up with just the critical steps) +
        • +
      • + 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{" "} + + 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. + +
        • +
      + Once you get the Bug reported, make sure to also submit the result into the testing + matrix. Either use relval report-results on command line (make sure to + install the relval package first), or modify the{" "} + + matrix + {" "} + directly by clicking on the Edit link next to the Matrice's header, and + put {{result|fail|YOUR_NAME_HERE|BUG_NUMBER|}} in the + appropriate spot. +       + +
    +     + ) } -class ModalInfo extends Component { - constructor(props) { - super(props) - this.state = { - modal: false, - } +function ModalInfo(props) { + const [state, setState] = useState({ + modal: false, + }) - this.toggle = this.toggle.bind(this) - } - - toggle(e) { - this.setState({ - modal: !this.state.modal, + const toggle = (e) => { + setState({ + modal: !state.modal, }) e.preventDefault() } - render() { - const project = this.props.buttonLabel.split(":")[0] - const ticket = this.props.buttonLabel.split(":")[1] //strip whitespace? + const project = props.buttonLabel.split(":")[0] + const ticket = props.buttonLabel.split(":")[1] //strip whitespace? - return ( -
    - this.toggle(e)}> - {this.props.buttonLabel} - - - {project} - -

    {ticket}

    - {this.props.children} -     - -     -
    - ) - } + return ( +
    + toggle(e)}> + {props.buttonLabel} + + + {project} + +

    {ticket}

    + {props.children} +     + +     +
    + ) } diff --git a/src/wizard/components.js b/src/wizard/components.js index 85b7471..7e91f72 100644 --- a/src/wizard/components.js +++ b/src/wizard/components.js @@ -1,4 +1,4 @@ -import React, { Component } from "react" +import React, { useState } from "react" import { Card, CardHeader, @@ -12,102 +12,76 @@ import { } 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-") - return ( - - - -
    {title}
    -
    - -
    -     -     - - {children} - -     - ) - } +const CollapsableCard = (props) => { + const { title, expand_text, expand_class, children } = props + const id = uniqueID("collapsable-card-id-") + return ( + + + +
    {title}
    +
    + +
    +     +     + + {children} + +     + ) } -class CollapsableBadge extends Component { - constructor(props) { - super(props) - this.state = { - showModal: false, - } - this.toggleModal = this.toggleModal.bind(this) - } +const CollapsableBadge = (props) => { + const [state, setState] = useState({ showModal: false }) - toggleModal() { - let modalState = !this.state.showModal - this.setState({ + const toggleModal = () => { + let modalState = !state.showModal + setState({ showModal: modalState, }) } - render() { - const { expand_text, expand_class, children, type } = this.props - const id = uniqueID("collapsable-badge-id-") - return ( - - {" "} - - {children} - - - - - - ) - } + + const { expand_text, expand_class, children, type } = props + const id = uniqueID("collapsable-badge-id-") + return ( + + {" "} + + {children} + + + + + + ) } -class ModalBadge extends Component { - render() { - const { expand_text, expand_class, children, type } = this.props - const id = uniqueID("collapsable-badge-id-") - return ( - - +const ModalBadge = (props) => { + const { expand_text, expand_class, children, type } = props + const id = uniqueID("collapsable-badge-id-") + return ( + + - - - {children} - - - - ) - } + + + {children} + + + + ) } CollapsableBadge.defaultProps = { @@ -120,16 +94,14 @@ ModalBadge.defaultProps = { expand_class: "primary", } -class Toggler extends Component { - render() { - const { id, text, color } = this.props - const classes = "btn btn-sm float-right btn-" + color - return ( - - ) - } +const Toggler = (props) => { + const { id, text, color } = props + const classes = "btn btn-sm float-right btn-" + color + return ( + + ) } export { CollapsableCard, CollapsableBadge, ModalBadge }