Creating, and getting redactor

replicatedhq · May 22, 2020 · 11f1e98 · 11f1e98
1 parent 33142f6
commit 11f1e98
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 29 deletions.
diff --git a/kotsadm/web/src/components/redactors/EditRedactor.jsx b/kotsadm/web/src/components/redactors/EditRedactor.jsx
@@ -7,47 +7,72 @@ import "brace/mode/text";
 import "brace/mode/yaml";
 import "brace/theme/chrome";
 
+import Loader from "../shared/Loader";
 import { Utilities } from "../../utilities/utilities";
 
-// const redactor = {
-//   id: "1",
-//   name: "my-demo-redactor",
-//   createdAt: "2020-05-10T21:17:37.002Z",
-//   updatedOn: "2020-05-18T22:17:37.002Z",
-//   details: "Redact all AWS secrets",
-//   status: "enabled",
-//   yaml: `apiVersion: troubleshoot.replicated.com/v1beta1
-// kind: Redactor
-// metadata:
-//   name: my-application-name
-// spec:
-//   redactors:
-//   - name: example replacement
-//     values:
-//     - abc123`
-// }
-
 class EditRedactor extends Component {
   state = {
     redactorEnabled: false,
     redactorYaml: "",
     redactorName: "",
     creatingRedactor: false,
-    createErrMsg: ""
+    createErrMsg: "",
+    isLoadingRedactor: false,
+    redactorErrMsg: ""
   };
 
-  createRedactor = (name, slug, enabled, newRedactor, yaml) => {
+  getRedactor = (slug) => {
+    this.setState({
+      isLoadingRedactor: true,
+      redactorErrMsg: ""
+    });
+
+    fetch(`${window.env.API_ENDPOINT}/redact/spec/${slug}`, {
+      method: "GET",
+      headers: {
+        "Authorization": Utilities.getToken(),
+        "Content-Type": "application/json",
+      }
+    })
+      .then(res => res.json())
+      .then(result => {
+        if (result.success) {
+          this.setState({
+            redactorYaml: result.redactor,
+            redactorName: result.redactorMetadata.name,
+            redactorEnabled: result.redactorMetadata.enabled,
+            isLoadingRedactor: false,
+            redactorErrMsg: "",
+          }, () => {
+            if (this.state.selectedOption) {
+              this.sortRedactors(this.state.selectedOption.value);
+            }
+          })
+        } else {
+          this.setState({
+            isLoadingRedactor: false,
+            redactorErrMsg: result.error,
+          })
+        }
+      })
+      .catch(err => {
+        this.setState({
+          isLoadingRedactor: false,
+          redactorErrMsg: err,
+        })
+      })
+  }
+
+  createRedactor = (enabled, newRedactor, yaml) => {
     this.setState({ creatingRedactor: true, createErrMsg: "" });
 
     const payload = {
-      name: name,
-      slug: slug,
       enabled: enabled,
       new: newRedactor,
       redactor: yaml
     }
 
-    fetch(`${window.env.API_ENDPOINT}/redact/spec/${name}`, {
+    fetch(`${window.env.API_ENDPOINT}/redact/spec/new`, {
       method: "POST",
       headers: {
         "Authorization": Utilities.getToken(),
@@ -101,9 +126,16 @@ class EditRedactor extends Component {
   componentDidMount() {
     //TODO get redactor for id
     if (this.props.match.params.slug) {
+      this.getRedactor(this.props.match.params.slug);
       // this.setState({ redactorEnabled: redactor.status === "enabled" ? true : false, redactorYaml: redactor.yaml, redactorName: redactor.name });
     } else {
-      this.setState({ redactorEnabled: false, redactorYaml: "", redactorName: "New redactor" });
+      const defaultYaml=`name: ""
+files: []
+values: []
+regex: []
+multiLine: []
+yaml: []`
+      this.setState({ redactorEnabled: false, redactorYaml: defaultYaml, redactorName: "New redactor" });
     }
   }
 
@@ -115,12 +147,21 @@ class EditRedactor extends Component {
     if (this.props.match.params.slug) {
       console.log("a")
     } else {
-      this.createRedactor(this.state.redactorName, "", this.state.redactorEnabled, true, this.state.redactorYaml)
+      this.createRedactor(this.state.redactorEnabled, true, this.state.redactorYaml);
     }
   }
 
 
   render() {
+    const { isLoadingRedactor } = this.state;
+
+    if (isLoadingRedactor) {
+      return (
+        <div className="flex-column flex1 alignItems--center justifyContent--center">
+          <Loader size="60" />
+        </div>
+      )
+    }
     return (
       <div className="container flex-column flex1 u-overflow--auto u-paddingTop--30 u-paddingBottom--20 justifyContent--center alignItems--center">
         <Helmet>

diff --git a/kotsadm/web/src/components/redactors/RedactorRow.jsx b/kotsadm/web/src/components/redactors/RedactorRow.jsx
@@ -27,7 +27,7 @@ class RedactorRow extends React.Component {
     const { redactor } = this.props;
 
     return (
-      <div className="flex flex-auto ActiveDownstreamVersionRow--wrapper" key={redactor?.name}>
+      <div className="flex flex-auto ActiveDownstreamVersionRow--wrapper" key={redactor?.slug}>
         <div className="flex-column flex1">
           <div className="flex flex1 alignItems--center u-marginBottom--small">
             <span className={`status-indicator u-marginBottom--10 ${this.state.redactorEnabled ? "enabled" : "disabled"}`} />
@@ -37,7 +37,7 @@ class RedactorRow extends React.Component {
           <p className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--nevada u-marginLeft--10"> {redactor?.description} </p>
         </div>
         <div className="flex alignItems--center">
-          <Link to={`/redactors/${redactor?.id}`} className="u-fontSize--normal u-fontWeight--medium u-color--royalBlue u-textDecoration--underlineOnHover u-marginRight--20">Edit redactor</Link>
+          <Link to={`/redactors/${redactor?.slug}`} className="u-fontSize--normal u-fontWeight--medium u-color--royalBlue u-textDecoration--underlineOnHover u-marginRight--20">Edit redactor</Link>
           <span className="u-fontSize--normal u-fontWeight--medium u-color--chestnut u-textDecoration--underlineOnHover u-marginRight--20" onClick={() => this.handleDeleteClick(redactor)}>Delete</span>
           <div className={`Checkbox--switch ${this.state.redactorEnabled ? "is-checked" : "is-notChecked"}`}>
             <input

diff --git a/kotsadm/web/src/components/redactors/Redactors.jsx b/kotsadm/web/src/components/redactors/Redactors.jsx
@@ -78,7 +78,6 @@ class Redactors extends Component {
 
   sortRedactors = value => {
     if (value === "createdAt") {
-      console.log(this.state.redactors)
       this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.createdAt) - dayjs(a.createdAt)) });
     } else {
       this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.updatedOn) - dayjs(a.updatedOn)) });
@@ -149,7 +148,7 @@ class Redactors extends Component {
           <a href="" target="_blank" rel="noopener noreferrer" className="replicated-link"> check out our docs</a>.</p>
           {sortedRedactors?.map((redactor) => (
             <RedactorRow
-              key={`redactor-${redactor.id}`}
+              key={`redactor-${redactor.slug}`}
               redactor={redactor}
               toggleConfirmDeleteModal={this.toggleConfirmDeleteModal}
             />