Added new note to the job details screen.

client/src/components/jobs-notes/jobs.notes.component.jsx

@@ -15,17 +15,36 @@ export default function JobNotesComponent({
   const [noteModalVisible, setNoteModalVisible] = useState(false);
   const [existingNote, setExistingNote] = useState(null);
   const columns = [
+    {
+      title: "",
+      dataIndex: "icons",
+      key: "icons",
+      width: 80,
+      render: (text, record) => (
+        <span>
+          {" "}
+          {record.critical ? (
+            <Icon style={{ margin: 4, color: "red" }} type='warning' />
+          ) : null}
+          {record.private ? (
+            <Icon style={{ margin: 4 }} type='eye-invisible' />
+          ) : null}
+        </span>
+      )
+    },
     {
       title: t("notes.fields.text"),
       dataIndex: "text",
       key: "text",
       ellipsis: true
     },
+
     {
       title: t("notes.fields.updatedat"),
       dataIndex: "updated_at",
       key: "updated_at",
       defaultSortOrder: "descend",
+      width: 200,
       sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
       render: (text, record) => (
         <span>
@@ -36,12 +55,14 @@ export default function JobNotesComponent({
     {
       title: t("notes.fields.createdby"),
       dataIndex: "created_by",
-      key: "created_by"
+      key: "created_by",
+      width: 200
     },
     {
       title: t("notes.actions.actions"),
       dataIndex: "actions",
       key: "actions",
+      width: 150,
       render: (text, record) => (
         <span>
           <Button
@@ -80,6 +101,13 @@ export default function JobNotesComponent({
         refetch={refetch}
         existingNote={existingNote}
       />
+      <Button
+        onClick={() => {
+          setExistingNote(null);
+          setNoteModalVisible(true);
+        }}>
+        {t("notes.actions.new")}
+      </Button>
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/react-hooks";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
@@ -25,6 +25,7 @@ function JobsDetailPageContainer({ match, location }) {
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
+
   return (
     <JobsDetailPage
       hash={hash ? hash.substring(1) : "#lines"}

client/src/pages/jobs-detail/jobs-detail.page.jsx

@@ -1,16 +1,16 @@
 import { Icon, Row, Tabs } from "antd";
 import React from "react";
-import { withRouter } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { FaRegStickyNote } from "react-icons/fa";
+import { withRouter } from "react-router-dom";
 import JobLinesContainer from "../../components/job-lines/job-lines.container.component";
 import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
 import JobsDocumentsContainer from "../../components/jobs-documents/jobs-documents.container";
-import { FaRegStickyNote } from "react-icons/fa";
 import JobNotesContainer from "../../components/jobs-notes/jobs-notes.container";
 
 function JobsDetailPage({ jobId, hash, data, match, history }) {
   const { t } = useTranslation();
-
+  console.log("hash", hash);
   return (
     <div>
       <Row>
@@ -18,7 +18,7 @@ function JobsDetailPage({ jobId, hash, data, match, history }) {
       </Row>
       <Row>
         <Tabs
-          defaultActiveKey={hash}
+          defaultActiveKey={`#${hash}`}
           onChange={p => {
             history.push(p);
           }}>