cleanup and polish to redactors

replicatedhq · May 26, 2020 · accfe98 · accfe98
1 parent dfd9664
commit accfe98
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 69 deletions.
diff --git a/kotsadm/api/package-lock.json b/kotsadm/api/package-lock.json
diff --git a/kotsadm/web/src/components/modals/DeleteRedactorModal.jsx b/kotsadm/web/src/components/modals/DeleteRedactorModal.jsx
@@ -23,7 +23,7 @@ export default function DeleteRedactorModal(props) {
             <p className="u-color--chestnut u-fontSize--small u-fontWeight--medium u-lineHeight--normal">{deleteErrMsg}</p>
             : null}
           <p className="u-fontSize--normal u-fontWeight--normal u-color--dustyGray u-lineHeight--normal">
-            Are you sure you want to delete a redactor? This action cannot be reversed.
+            Are you sure you want to delete this redactor? This action cannot be reversed.
               </p>
           <div className="flex flex1 justifyContent--spaceBetween u-marginTop--20">
             <div className="flex flex-column">

diff --git a/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReport.jsx b/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReport.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Link } from "react-router-dom";
+import { Link, withRouter } from "react-router-dom";
 import isEmpty from "lodash/isEmpty";
 
 import AnalyzerRedactorReportRow from "./AnalyzerRedactorReportRow";
@@ -80,12 +80,13 @@ export class AnalyzerRedactorReport extends Component {
 
     return (
       <div className="flex flex-column">
-        <p className="u-fontSize--normal u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--small u-marginBottom--20">Below is list of the redactors that were applied when collecting this support bundle. You can see how many files each redactor affected and how many values were redacted. To re-generate a support bundle with more or fewer rules applied,
+        <p className="u-fontSize--normal u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--small u-marginBottom--20">Below is a list of the redactors that were applied when collecting this support bundle. You can see how many files each redactor affected and how many values were redacted. To re-generate a support bundle with more or fewer rules applied,
          go to  <Link to="/redactors" className="replicated-link"> your redactor list </Link> enable/disable any of the redactor, and generate a new support bundle.</p>
         {!isEmpty(redactions) && Object.keys(redactions?.byRedactor).map((redactor) => ( 
           <AnalyzerRedactorReportRow
             key={`redactor-${redactor}`}
             redactor={redactor}
+            match={this.props.match}
             redactorFiles={redactions?.byRedactor[redactor]}
           />  
         ))}
@@ -94,4 +95,4 @@ export class AnalyzerRedactorReport extends Component {
   }
 }
 
-export default AnalyzerRedactorReport;
+export default withRouter(AnalyzerRedactorReport);
diff --git a/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReportRow.jsx b/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReportRow.jsx
@@ -40,13 +40,9 @@ class AnalyzerRedactorReportRow extends React.Component {
         </div>
         <div className="flex flex-column">
           <p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna">{this.calculateRedactorFileName(file?.file)} <span className="u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-color--chateauGreen"> 1 redaction </span> </p>
-          <div className="flex flex1 alignItems--center">
-            <p className="u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-color--dustyGray"> {file?.file} </p>
-            <div class="arrow">
-              <div class="line"></div>
-              <div class="point"></div>
+            <div className="flex flex1 alignItems--center">
+              <p className="u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-color--dustyGray"> {file?.file} </p>
             </div>
-          </div>
         </div>
       </div>
     )

diff --git a/kotsadm/web/src/components/troubleshoot/ConfigureRedactorsModal.jsx b/kotsadm/web/src/components/troubleshoot/ConfigureRedactorsModal.jsx
@@ -235,7 +235,7 @@ export default class ConfigureRedactorsModal extends Component {
                 <span className={`${this.state.activeRedactorTab === "linkSpec" ? "is-active" : ""} tab-item`} onClick={() => this.toggleRedactorAction("linkSpec")}>Link to a spec</span>
                 <span className={`${this.state.activeRedactorTab === "writeSpec" ? "is-active" : ""} tab-item`} onClick={() => this.toggleRedactorAction("writeSpec")}>Write your own spec</span>
               </div>
-              <div className="flex-column flex1 action-content">
+              <div className="flex-column flex1 action-content old">
                 {this.state.loadingRedactor ?
                   <div className="flex1 flex-column justifyContent--center alignItems--center">
                     <Loader size="60" />

diff --git a/kotsadm/web/src/images/main_spritesheet.svg b/kotsadm/web/src/images/main_spritesheet.svg
diff --git a/kotsadm/web/src/scss/components/troubleshoot/SupportBundleAnalysis.scss b/kotsadm/web/src/scss/components/troubleshoot/SupportBundleAnalysis.scss
@@ -229,6 +229,10 @@
   padding: 16px 14px;
   border-top: 1px solid #DFDFDF;
   border-radius: 0 0 4px 4px;
+
+  &.old {
+    margin-top: 12px;
+  }
 }
 
 .action-tab-bar .tab-item {
@@ -336,8 +340,27 @@
 .Timeline--wrapper {
   position: relative;
   width: 100%;
-  padding: 0 0 0 15px;
-  border-left: 2px solid #C4C4C4;
+  padding-left: 15px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    border: 1px solid #c4c4c4;
+    height: 1px;
+    border-radius: 20px 20px 0 0;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    left: -2px;
+    width: 2px;
+    top: 0;
+    bottom: 35px;
+    background-color: #C4C4C4;
+  }
 
   .section {
     position: relative
@@ -349,7 +372,7 @@
     height: 20px;
     border-left: 2px solid #c4c4c4;
     border-bottom: 2px solid #c4c4c4;
-    border-radius: 0 0 0 100px;
+    border-bottom-left-radius: 100px;
     position: absolute;
     top: 5px;
     left: -17px;
@@ -366,47 +389,9 @@
   }
 }
 
-.Timeline--wrapper:before {
-  content: "";
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  border: 1px solid #c4c4c4;
-  height: 1px;
-  border-radius: 20px 20px 0 0;
-}
-
-.Timeline--wrapper:after {
-  content: "";
-  position: absolute;
-  bottom: -1px;
-  left: -2px;
-  border: 1px solid #c4c4c4;
-  height: 1px;
-  border-radius: 20px;
-}
-
-.arrow {
+.ActiveDownstreamVersionRow--wrapper .icon.u-iconFullArrowGray {
   margin-left: 10px;
-  margin-bottom: 6px;
-  .line {
-    position: absolute;
-    margin-top: -1.1px;
-    height: 9.68px;
-    border: 1px solid #9B9B9B;
-    transform: rotate(-90deg);
-    border-radius: 20px;
-  }
-  .point {
-    position: absolute;
-    width: 6.01px;
-    height: 5.95px;
-    border-top: 2px solid #9B9B9B;
-    border-left: 2px solid #9B9B9B;
-    border-bottom-left-radius: 2px;
-    border-top-right-radius: 2px;
-    transform: rotate(-220deg);
-  }
+  top: 2px;
 }
 
 

diff --git a/kotsadm/web/src/scss/utilities/icons.scss b/kotsadm/web/src/scss/utilities/icons.scss
@@ -642,11 +642,16 @@
 }
 .icon.redactor-json-icon {
   background-position: -171px -589px;
-  width: 22.1px;
+  width: 22px;
   height: 26px;
 }
 .icon.redactor-text-icon {
   background-position: -171px -622px;
-  width: 22.1px;
+  width: 22px;
   height: 26px;
 }
+.icon.u-iconFullArrowGray {
+  background-position: -108px -289px;
+  width: 13px;
+  height: 11px;
+}