Added base jobline edit modal. To be confirmed if required.

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -0,0 +1,33 @@
+import { Input, Modal } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function JobLinesUpsertModalComponent({
+  visible,
+  changeVisibility,
+  lineState,
+  setLineState,
+  updateExistingLine,
+  insertNewLine
+}) {
+  const { t } = useTranslation();
+  const handleChange = e => {
+    setLineState({ ...lineState, [e.target.name]: e.target.value });
+  };
+  return (
+    <Modal
+      title={
+        lineState.id ? t("joblines.actions.edit") : t("joblines.actions.new")
+      }
+      visible={visible}
+      okText={t("general.labels.save")}
+      onOk={() => {
+        lineState.id ? updateExistingLine() : insertNewLine();
+      }}
+      onCancel={() => {
+        changeVisibility(false);
+      }}>
+      <Input.TextArea rows={8} value={lineState.text} onChange={handleChange} />
+    </Modal>
+  );
+}

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -0,0 +1,72 @@
+import { notification } from "antd";
+import React, { useEffect, useState } from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import {
+  INSERT_NEW_JOB_LINE,
+  UPDATE_JOB_LINE
+} from "../../graphql/jobs-lines.queries";
+import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
+
+export default function JobLinesUpsertModalContainer({
+  jobId,
+  visible,
+  changeVisibility,
+  refetch,
+  existingLine
+}) {
+  const { t } = useTranslation();
+  const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
+  const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
+
+  const [lineState, setLineState] = useState({});
+
+  useEffect(() => {
+    //Required to prevent infinite looping.
+    if (existingLine) {
+      setLineState(existingLine);
+    }
+  }, [existingLine]);
+
+  const insertNewLine = () => {
+    insertJobLine({
+      variables: {
+        lineInput: [{ ...lineState, jobid: jobId }]
+      }
+    }).then(r => {
+      refetch();
+      changeVisibility(!visible);
+      notification["success"]({
+        message: t("joblines.successes.create")
+      });
+    });
+  };
+
+  const updateExistingLine = () => {
+    //Required, otherwise unable to spread in new note prop.
+    delete lineState.__typename;
+    updateJobLine({
+      variables: {
+        lineId: lineState.id,
+        line: lineState
+      }
+    }).then(r => {
+      notification["success"]({
+        message: t("joblines.successes.updated")
+      });
+    });
+    refetch();
+    changeVisibility(!visible);
+  };
+  console.log("lineSTate", lineState);
+  return (
+    <JobLinesUpdsertModal
+      visible={visible}
+      changeVisibility={changeVisibility}
+      updateExistingLine={updateExistingLine}
+      insertNewLine={insertNewLine}
+      lineState={lineState}
+      setLineState={setLineState}
+    />
+  );
+}