Notes lifecycle events added to job details.

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -0,0 +1,57 @@
+import { Input, Modal, Switch } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function NoteUpsertModalComponent({
+  visible,
+  changeVisibility,
+  noteState,
+  setNoteState,
+  updateExistingNote,
+  insertNewNote
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      title={noteState?.id ? t("notes.actions.edit") : t("notes.actions.new")}
+      visible={visible}
+      okText={t("general.labels.save")}
+      onOk={() => {
+        noteState.id ? updateExistingNote() : insertNewNote();
+      }}
+      onCancel={() => {
+        changeVisibility(false);
+      }}>
+      <div>
+        {t("notes.fields.critical")}
+        <Switch
+          title={t("notes.fields.critical")}
+          checked={noteState.critical}
+          onChange={checked => {
+            setNoteState({ ...noteState, critical: checked });
+          }}
+        />
+      </div>
+      <div>
+        {t("notes.fields.private")}
+        <Switch
+          title={t("notes.fields.private")}
+          checked={noteState.private}
+          onChange={checked => {
+            setNoteState({ ...noteState, private: checked });
+          }}
+        />
+      </div>
+
+      <Input.TextArea
+        rows={8}
+        value={noteState.text}
+        placeholder={t("notes.labels.newnoteplaceholder")}
+        onChange={e => {
+          setNoteState({ ...noteState, text: e.target.value });
+        }}
+      />
+    </Modal>
+  );
+}