Add doc links to UI

frontend/src/Layout.js

@@ -1,35 +1,35 @@
-import React from "react"
-import { Switch, Route } from "react-router-dom"
-import { Link } from "react-router-dom"
-import { Layout, Menu, Icon } from "antd"
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { Layout, Menu, Icon } from "antd";
 
-import logo from "./static/listmonk.svg"
+import logo from "./static/listmonk.svg";
 
 // Views.
-import Dashboard from "./Dashboard"
-import Lists from "./Lists"
-import Subscribers from "./Subscribers"
-import Subscriber from "./Subscriber"
-import Templates from "./Templates"
-import Import from "./Import"
-import Campaigns from "./Campaigns"
-import Campaign from "./Campaign"
-import Media from "./Media"
+import Dashboard from "./Dashboard";
+import Lists from "./Lists";
+import Subscribers from "./Subscribers";
+import Subscriber from "./Subscriber";
+import Templates from "./Templates";
+import Import from "./Import";
+import Campaigns from "./Campaigns";
+import Campaign from "./Campaign";
+import Media from "./Media";
 
-const { Content, Footer, Sider } = Layout
-const SubMenu = Menu.SubMenu
-const year = new Date().getUTCFullYear()
+const { Content, Footer, Sider } = Layout;
+const SubMenu = Menu.SubMenu;
+const year = new Date().getUTCFullYear();
 
 class Base extends React.Component {
   state = {
     basePath: "/" + window.location.pathname.split("/")[1],
     error: null,
     collapsed: false
-  }
+  };
 
   onCollapse = collapsed => {
-    this.setState({ collapsed })
-  }
+    this.setState({ collapsed });
+  };
 
   render() {
     return (
@@ -245,13 +245,20 @@ class Base extends React.Component {
               >
                 listmonk
               </a>{" "}
-              &copy; 2019 {year !== 2019 ? " - " + year : ""}
+              &copy; 2019 {year !== 2019 ? " - " + year : ""} &mdash;{" "}
+              <a
+                href="https://listmonk.app/docs"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Docs
+              </a>
             </span>
           </Footer>
         </Layout>
       </Layout>
-    )
+    );
   }
 }
 
-export default Base
+export default Base;

frontend/src/Subscribers.js

@@ -650,9 +650,14 @@ class Subscribers extends React.PureComponent {
                       autosize={{ minRows: 2, maxRows: 10 }}
                     />
                     <span className="text-tiny text-small">
-                      Write a partial SQL expression to query the subscribers
-                      based on their primary information or attributes. Learn
-                      more.
+                      Partial SQL expression to query subscriber attributes.{" "}
+                      <a
+                        href="https://listmonk.app/docs/querying-and-segmentation"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Learn more <Icon type="link" />.
+                      </a>
                     </span>
                   </p>
                   <p>

frontend/src/Templates.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   Row,
   Col,
@@ -13,11 +13,11 @@ import {
   Popconfirm,
   Spin,
   notification
-} from "antd"
+} from "antd";
 
-import ModalPreview from "./ModalPreview"
-import Utils from "./utils"
-import * as cs from "./constants"
+import ModalPreview from "./ModalPreview";
+import Utils from "./utils";
+import * as cs from "./constants";
 
 class CreateFormDef extends React.PureComponent {
   state = {
@@ -25,17 +25,17 @@ class CreateFormDef extends React.PureComponent {
     modalWaiting: false,
     previewName: "",
     previewBody: ""
-  }
+  };
 
   // Handle create / edit form submission.
   handleSubmit = e => {
-    e.preventDefault()
+    e.preventDefault();
     this.props.form.validateFields((err, values) => {
       if (err) {
-        return
+        return;
       }
 
-      this.setState({ modalWaiting: true })
+      this.setState({ modalWaiting: true });
       if (this.props.formType === cs.FormCreate) {
         // Create a new list.
         this.props
@@ -50,19 +50,19 @@ class CreateFormDef extends React.PureComponent {
               placement: cs.MsgPosition,
               message: "Template added",
               description: `"${values["name"]}" added`
-            })
-            this.props.fetchRecords()
-            this.props.onClose()
-            this.setState({ modalWaiting: false })
+            });
+            this.props.fetchRecords();
+            this.props.onClose();
+            this.setState({ modalWaiting: false });
           })
           .catch(e => {
             notification["error"]({
               placement: cs.MsgPosition,
               message: "Error",
               description: e.message
-            })
-            this.setState({ modalWaiting: false })
-          })
+            });
+            this.setState({ modalWaiting: false });
+          });
       } else {
         // Edit a list.
         this.props
@@ -77,43 +77,43 @@ class CreateFormDef extends React.PureComponent {
               placement: cs.MsgPosition,
               message: "Template updated",
               description: `"${values["name"]}" modified`
-            })
-            this.props.fetchRecords()
-            this.props.onClose()
-            this.setState({ modalWaiting: false })
+            });
+            this.props.fetchRecords();
+            this.props.onClose();
+            this.setState({ modalWaiting: false });
           })
           .catch(e => {
             notification["error"]({
               placement: cs.MsgPosition,
               message: "Error",
               description: e.message
-            })
-            this.setState({ modalWaiting: false })
-          })
+            });
+            this.setState({ modalWaiting: false });
+          });
       }
-    })
-  }
+    });
+  };
 
   handleConfirmBlur = e => {
-    const value = e.target.value
-    this.setState({ confirmDirty: this.state.confirmDirty || !!value })
-  }
+    const value = e.target.value;
+    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
+  };
 
   handlePreview = (name, body) => {
-    this.setState({ previewName: name, previewBody: body })
-  }
+    this.setState({ previewName: name, previewBody: body });
+  };
 
   render() {
-    const { formType, record, onClose } = this.props
-    const { getFieldDecorator } = this.props.form
+    const { formType, record, onClose } = this.props;
+    const { getFieldDecorator } = this.props.form;
 
     const formItemLayout = {
       labelCol: { xs: { span: 16 }, sm: { span: 4 } },
       wrapperCol: { xs: { span: 16 }, sm: { span: 18 } }
-    }
+    };
 
     if (formType === null) {
-      return null
+      return null;
     }
 
     return (
@@ -173,8 +173,12 @@ class CreateFormDef extends React.PureComponent {
                 {"}"}
               </code>{" "}
               should appear in the template.{" "}
-              <a href="" target="_blank">
-                Read more on templating
+              <a
+                href="https://listmonk.app/docs/templating"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learn more <Icon type="link" />.
               </a>
               .
             </Col>
@@ -191,26 +195,26 @@ class CreateFormDef extends React.PureComponent {
             previewURL={cs.Routes.PreviewNewTemplate}
             body={this.state.previewBody}
             onCancel={() => {
-              this.setState({ previewBody: null, previewName: null })
+              this.setState({ previewBody: null, previewName: null });
             }}
           />
         )}
       </div>
-    )
+    );
   }
 }
 
-const CreateForm = Form.create()(CreateFormDef)
+const CreateForm = Form.create()(CreateFormDef);
 
 class Templates extends React.PureComponent {
   state = {
     formType: null,
     record: {},
     previewRecord: null
-  }
+  };
 
   constructor(props) {
-    super(props)
+    super(props);
 
     this.columns = [
       {
@@ -230,21 +234,21 @@ class Templates extends React.PureComponent {
                 </div>
               )}
             </div>
-          )
+          );
         }
       },
       {
         title: "Created",
         dataIndex: "created_at",
         render: (date, _) => {
-          return Utils.DateString(date)
+          return Utils.DateString(date);
         }
       },
       {
         title: "Updated",
         dataIndex: "updated_at",
         render: (date, _) => {
-          return Utils.DateString(date)
+          return Utils.DateString(date);
         }
       },
       {
@@ -299,15 +303,15 @@ class Templates extends React.PureComponent {
                 </Popconfirm>
               )}
             </div>
-          )
+          );
         }
       }
-    ]
+    ];
   }
 
   componentDidMount() {
-    this.props.pageTitle("Templates")
-    this.fetchRecords()
+    this.props.pageTitle("Templates");
+    this.fetchRecords();
   }
 
   fetchRecords = () => {
@@ -315,8 +319,8 @@ class Templates extends React.PureComponent {
       cs.ModelTemplates,
       cs.Routes.GetTemplates,
       cs.MethodGet
-    )
-  }
+    );
+  };
 
   handleDeleteRecord = record => {
     this.props
@@ -331,15 +335,15 @@ class Templates extends React.PureComponent {
           placement: cs.MsgPosition,
           message: "Template deleted",
           description: `"${record.name}" deleted`
-        })
+        });
 
         // Reload the table.
-        this.fetchRecords()
+        this.fetchRecords();
       })
       .catch(e => {
-        notification["error"]({ message: "Error", description: e.message })
-      })
-  }
+        notification["error"]({ message: "Error", description: e.message });
+      });
+  };
 
   handleSetDefault = record => {
     this.props
@@ -354,35 +358,35 @@ class Templates extends React.PureComponent {
           placement: cs.MsgPosition,
           message: "Template updated",
           description: `"${record.name}" set as default`
-        })
+        });
 
         // Reload the table.
-        this.fetchRecords()
+        this.fetchRecords();
       })
       .catch(e => {
         notification["error"]({
           placement: cs.MsgPosition,
           message: "Error",
           description: e.message
-        })
-      })
-  }
+        });
+      });
+  };
 
   handlePreview = record => {
-    this.setState({ previewRecord: record })
-  }
+    this.setState({ previewRecord: record });
+  };
 
   hideForm = () => {
-    this.setState({ formType: null })
-  }
+    this.setState({ formType: null });
+  };
 
   handleShowCreateForm = () => {
-    this.setState({ formType: cs.FormCreate, record: {} })
-  }
+    this.setState({ formType: cs.FormCreate, record: {} });
+  };
 
   handleShowEditForm = record => {
-    this.setState({ formType: cs.FormEdit, record: record })
-  }
+    this.setState({ formType: cs.FormEdit, record: record });
+  };
 
   render() {
     return (
@@ -427,13 +431,13 @@ class Templates extends React.PureComponent {
               this.state.previewRecord.id
             )}
             onCancel={() => {
-              this.setState({ previewRecord: null })
+              this.setState({ previewRecord: null });
             }}
           />
         )}
       </section>
-    )
+    );
   }
 }
 
-export default Templates
+export default Templates;