From d61e2c473f64609ecebc738384b30a605c1cbe0a Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 8 Apr 2021 14:04:21 -0700
Subject: [PATCH] IO-843 Admin Page Updates

---
 .../jobs-admin-class.component.jsx            | 39 +++++++-------
 .../jobs-admin-dates.component.jsx            |  1 -
 .../jobs-admin-delete-intake.component.jsx    | 10 ++--
 .../src/pages/jobs-admin/jobs-admin.page.jsx  | 53 ++++++++++++++-----
 4 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx b/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
index 465b693d8..c6a28667b 100644
--- a/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
+++ b/client/src/components/jobs-admin-class/jobs-admin-class.component.jsx
@@ -6,7 +6,6 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -55,26 +54,24 @@ export function JobsAdminClass({ bodyshop, job }) {
         layout="vertical"
         initialValues={job}
       >
-        <LayoutFormRow>
-          <Form.Item
-            name={["class"]}
-            label={t("jobs.fields.class")}
-            rules={[
-              {
-                required: bodyshop.enforce_class,
-                message: t("general.validation.required"),
-              },
-            ]}
-          >
-            <Select>
-              {bodyshop.md_classes.map((s) => (
-                <Select.Option key={s} value={s}>
-                  {s}
-                </Select.Option>
-              ))}
-            </Select>
-          </Form.Item>
-        </LayoutFormRow>
+        <Form.Item
+          name={["class"]}
+          label={t("jobs.fields.class")}
+          rules={[
+            {
+              required: bodyshop.enforce_class,
+              message: t("general.validation.required"),
+            },
+          ]}
+        >
+          <Select>
+            {bodyshop.md_classes.map((s) => (
+              <Select.Option key={s} value={s}>
+                {s}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
       </Form>
 
       <Popconfirm
diff --git a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
index ae3089287..9a4c4a398 100644
--- a/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
+++ b/client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx
@@ -38,7 +38,6 @@ export default function JobsAdminDatesChange({ job }) {
 
   return (
     <div>
-      <div>{t("jobs.labels.ownerassociation")}</div>
       <Form
         onFinish={handleFinish}
         autoComplete={"off"}
diff --git a/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx b/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
index 5e4c33ff1..011ba9f99 100644
--- a/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
+++ b/client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx
@@ -38,12 +38,8 @@ export default function JobAdminDeleteIntake({ job }) {
   };
 
   return (
-    <div>
-      <div>{t("jobs.labels.deleteintake")}</div>
-
-      <Button loading={loading} onClick={handleDelete}>
-        {t("general.actions.delete")}
-      </Button>
-    </div>
+    <Button loading={loading} onClick={handleDelete}>
+      {t("jobs.labels.deleteintake")}
+    </Button>
   );
 }
diff --git a/client/src/pages/jobs-admin/jobs-admin.page.jsx b/client/src/pages/jobs-admin/jobs-admin.page.jsx
index eec245e9a..3a2b73295 100644
--- a/client/src/pages/jobs-admin/jobs-admin.page.jsx
+++ b/client/src/pages/jobs-admin/jobs-admin.page.jsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Result } from "antd";
+import { Card, Col, Result, Row, Space } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,7 +12,6 @@ import JobsAdminDatesChange from "../../components/jobs-admin-dates/jobs-admin-d
 import JobsAdminDeleteIntake from "../../components/jobs-admin-delete-intake/jobs-admin-delete-intake.component";
 import JobAdminOwnerReassociate from "../../components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component";
 import JobAdminVehicleReassociate from "../../components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component";
-import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import NotFound from "../../components/not-found/not-found.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
@@ -27,6 +26,13 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
 });
 
+const colSpan = {
+  sm: { span: 24 },
+  md: { span: 12 },
+  lg: { span: 8 },
+  xl: { span: 6 },
+};
+
 export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
@@ -70,18 +76,37 @@ export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader }) {
 
   return (
     <RbacWrapper action="jobs:admin">
-      <div>
-        <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
-        <LayoutFormRow grow>
-          <JobAdminOwnerReassociate job={data ? data.jobs_by_pk : {}} />
-          <JobAdminVehicleReassociate job={data ? data.jobs_by_pk : {}} />
-        </LayoutFormRow>
-        <LayoutFormRow>
-          <JobsAdminDeleteIntake job={data ? data.jobs_by_pk : {}} />
-        </LayoutFormRow>
-        <JobsAdminDatesChange job={data ? data.jobs_by_pk : {}} />
-        <JobsAdminClass job={data ? data.jobs_by_pk : {}} />
-      </div>
+      <Row gutter={[16, 16]}>
+        <Col {...colSpan}>
+          <Card>
+            <Space wrap>
+              <ScoreboardAddButton job={data ? data.jobs_by_pk : {}} />
+              <JobsAdminDeleteIntake job={data ? data.jobs_by_pk : {}} />
+            </Space>
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card>
+            <JobsAdminClass job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card>
+            <JobAdminOwnerReassociate job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+        <Col {...colSpan}>
+          <Card>
+            <JobAdminVehicleReassociate job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+
+        <Col span={24}>
+          <Card>
+            <JobsAdminDatesChange job={data ? data.jobs_by_pk : {}} />
+          </Card>
+        </Col>
+      </Row>
     </RbacWrapper>
   );
 }