From e78da1e0010a8029dd965a8a58b189aac30d8016 Mon Sep 17 00:00:00 2001
From: Lukas Brabec <lbrabec@redhat.com>
Date: Jan 29 2019 12:11:07 +0000
Subject: easyfix cleanup


---

diff --git a/src/wizard/Easyfix.js b/src/wizard/Easyfix.js
index 22a3a95..4ebf5a1 100644
--- a/src/wizard/Easyfix.js
+++ b/src/wizard/Easyfix.js
@@ -1,19 +1,72 @@
 import React, { Component } from 'react';
 import { Card, CardHeader, CardBody, UncontrolledCollapse, Row } from 'reactstrap';
-
+import _ from 'lodash';
 
 export default class Easyfix extends Component {
     render() {
-        let sections = Object.keys(this.props.data).map(k => (<EasyfixItemsListSub1 title={k} data={this.props.data[k]} />));
-        return(<div>{sections}</div>)
+        console.log(this.props.data)
+        return (
+            <div>
+            {
+                Object.keys(this.props.data).map(k => {
+                    return (
+                        <EasyfixSection title={k} data={this.props.data[k]} key={'section'+k}/>
+                    )
+                })
+            }
+            </div>
+        )
     }
 }
 
+class EasyfixSection extends Component {
+    render() {
+        var title = this.props.title;
+        var subsections = Object.keys(this.props.data);
 
-class EasyfixItemsListSub2 extends Component {
+
+        if (subsections.length > 1){
+            subsections = Object.keys(this.props.data).map(k => {
+                const title = <span><b>{k}</b> - {this.props.data[k][0].extra_data.description}</span>
+                
+                return (  
+                    <CollapsableCard key={k} title={title} expand_class="primary" expand_text="Show me!">
+                        <EasyfixLinksList data={this.props.data[k]} />
+                    </CollapsableCard>
+                )
+            });
+            title = <span><b>{title}</b> - Is a group containing several projects. Expand to see more.</span>;
+
+            return (
+                <CollapsableCard key={title} title={title} expand_class="warning" expand_text="Expand!">
+                    {subsections}
+                </CollapsableCard>
+            )
+        }
+        else {
+            if (title !== subsections[0]){
+                title = <span><b>{title + '/' + subsections[0]}</b>  - {this.props.data[subsections[0]][0].extra_data.description}</span>;
+            }
+            else {
+                title = <span><b>{title}</b>  - {this.props.data[subsections[0]][0].extra_data.description}</span>;
+            }
+            const links = Object.keys(this.props.data).map(k => (
+                <EasyfixLinksList data={this.props.data[k]} key={'sub'+k}/>
+            ))
+
+            return (
+                <CollapsableCard key={title} title={title} expand_class="primary" expand_text="Show me!">
+                    {links}
+                </CollapsableCard>
+            )
+        }
+    }
+}
+
+class EasyfixLinksList extends Component {
     render() {
         const items = this.props.data.map(action => (
-            <li>
+            <li key={action.extra_data.ticket_url}>
                 <a href={action.extra_data.ticket_url} target="_blank" rel="noopener noreferrer">
                     {action.name}
                 </a>
@@ -28,79 +81,38 @@ class EasyfixItemsListSub2 extends Component {
     }
 }
 
-
-class EasyfixItemsListSub1 extends Component {
+class CollapsableCard extends Component {
     render() {
-        var subsections = Object.keys(this.props.data);
-        var title = this.props.title;
-        var btn_expand_class = 'primary';
-        var btn_expand_text = "Show me";
-        if (subsections.length > 1){
-            subsections = Object.keys(this.props.data).map(k => {
-
-              var subtoggler = "easyfix_il_subtoggler_"+title+"_"+k;
-              subtoggler = subtoggler.replace(/[\W_]+/g,"_");
-
-              return(
-                  <Card key={title+k}>
-                      <CardHeader>
-                          <Row>
-                              <div className="col-md-11 align-middle">
-                                  <b>{k}</b> - {this.props.data[k][0].extra_data.description}
-                              </div>
-                              <div className="col-md-1 align-middle">
-                                  <a class="btn btn-primary btn-sm float-right" href='example.com' id={subtoggler} role="button">Show me!</a>
-                              </div>
-                          </Row>
-                      </CardHeader>
-                      <UncontrolledCollapse toggler={'#'+subtoggler}>
-                          <CardBody>
-                                  <EasyfixItemsListSub2 data={this.props.data[k]} />
-                          </CardBody>
-                      </UncontrolledCollapse>
-                  </Card>);
-                }
-              );
-            title = <span><b>{title}</b> - Is a group containing several projects. Expand to see more.</span>;
-            btn_expand_class = 'warning';
-            btn_expand_text = 'Expand';
-        }
-        else{
-            if (title !== subsections[0]){
-                title = <span><b>{title + '/' + subsections[0]}</b>  - {this.props.data[subsections[0]][0].extra_data.description}</span>;
-            }
-            else {
-                title = <span><b>{title}</b>  - {this.props.data[subsections[0]][0].extra_data.description}</span>;
-            }
-            subsections = Object.keys(this.props.data).map(k => (
-                    <EasyfixItemsListSub2 data={this.props.data[k]} />
-              )
-            );
-        }
-
-        var toggler="easyfix_il_toggle_"+this.props.title;
-        toggler = toggler.replace(/[\W_]+/g,"_");
-
-        return(
-            <Card key={title}>
+        const {title, expand_text, expand_class, children} = this.props
+        const id = _.uniqueId('collapsable-card-id-')
+        return (
+            <Card>
                 <CardHeader>
                     <Row>
                         <div className="col-md-11">
                             {title}
                         </div>
                         <div className="col-md-1">
-                            <a className={"btn btn-"+btn_expand_class+" btn-sm float-right"} href='example.com' id={toggler} role="button">{btn_expand_text}!</a>
+                            <Toggler id={id} color={expand_class} text={expand_text} />
                         </div>
                     </Row>
                 </CardHeader>
-                <UncontrolledCollapse toggler={'#'+toggler}>
+                <UncontrolledCollapse toggler={'#'+id}>
                     <CardBody>
-                      {subsections}
+                        {children}
                     </CardBody>
                 </UncontrolledCollapse>
-            </Card>);
+            </Card>
+        )
     }
 }
 
-
-
+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}</button>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/wizard/FedoraEasyKarma.js b/src/wizard/FedoraEasyKarma.js
index 844d18d..5f86c26 100644
--- a/src/wizard/FedoraEasyKarma.js
+++ b/src/wizard/FedoraEasyKarma.js
@@ -63,7 +63,7 @@ export default class FedoraEasyKarmaItemsList extends Component {
                     <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">Update Feedback Guidelines</a><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>
diff --git a/src/wizard/FedoraManualTesting.js b/src/wizard/FedoraManualTesting.js
index 6f25081..a530238 100644
--- a/src/wizard/FedoraManualTesting.js
+++ b/src/wizard/FedoraManualTesting.js
@@ -71,7 +71,7 @@ class FedoraManualTestingItemsListSub1 extends Component {
                         {l1}
                       </div>
                       <div className="col-md-1">
-                        <a className="btn btn-primary btn-sm float-right" href='#' id={toggler} role="button">Show me!</a>
+                        <button className="btn btn-primary btn-sm float-right" id={toggler}>Show me!</button>
                       </div>
                     </Row>
                 </CardHeader>
diff --git a/src/wizard/WizardForm.js b/src/wizard/WizardForm.js
index 61e4a88..ea9b91b 100644
--- a/src/wizard/WizardForm.js
+++ b/src/wizard/WizardForm.js
@@ -45,7 +45,7 @@ class WizardForm extends Component {
             const duration_providers = this.props.providers.filter(p => p.duration === duration).map(p => {
                 const btncolor = (this.state.selected_provider.provider === p.provider) ? 'selected' : 'primary'
                 return (
-                    <div className="card">
+                    <div className="card" key={'provider_card' + p.provider}>
                         <div className="card-body">
                             <Row key={p.provider}>
                                 <div className="col-md-10">
@@ -112,8 +112,10 @@ class Tags extends Component {
     }
 
     render() {
-        var x = this.props.data.map(t => (
-            <Button onClick={() => this.selected(t)} className="btn-sm btn-tag" color={this.is_selected(t)}>{t}</Button>
+        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>)
     }