IO-2543 Move queries to jobs.queries.js and correct layout

client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx

@@ -1,9 +1,10 @@
-import { gql, useMutation } from "@apollo/client";
-import { Form, Switch, notification } from "antd";
+import { useMutation } from "@apollo/client";
+import { Switch, notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { UPDATE_REMOVE_FROM_AR } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 
@@ -20,21 +21,11 @@ export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
   const [loading, setLoading] = useState(false);
   const [switchValue, setSwitchValue] = useState(job.remove_from_ar);
 
-  const [updateJob] = useMutation(gql`
-    mutation REMOVE_FROM_AR_JOB($jobId: uuid!, $remove_from_ar: Boolean!) {
-      update_jobs_by_pk(
-        pk_columns: { id: $jobId }
-        _set: { remove_from_ar: $remove_from_ar }
-      ) {
-        id
-        remove_from_ar
-      }
-    }
-  `);
+  const [mutationUpdateRemoveFromAR] = useMutation(UPDATE_REMOVE_FROM_AR);
 
   const handleChange = async (value) => {
     setLoading(true);
-    const result = await updateJob({
+    const result = await mutationUpdateRemoveFromAR({
       variables: { jobId: job.id, remove_from_ar: value },
     });
 
@@ -56,8 +47,19 @@ export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
   };
 
   return (
-    <Form.Item name="remove_from_ar" label={t("jobs.labels.remove_from_ar")}>
-      <Switch checked={switchValue} loading={loading} onChange={handleChange} />
-    </Form.Item>
+    <>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div style={{ marginRight: "10px" }}>
+          {t("jobs.labels.remove_from_ar")}:
+        </div>
+        <div>
+          <Switch
+            checked={switchValue}
+            loading={loading}
+            onChange={handleChange}
+          />
+        </div>
+      </div>
+    </>
   );
 }