styling updates

packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx

@@ -15,7 +15,9 @@ interface JobsListProps {
   jobType?: FrontendInferenceJobType;
   value?: JobListTypes;
   onSelect?: (e: any) => any;
+  panel?: boolean;
   showNoJobs?: boolean;
+  showHeader?: boolean;
 }
 
 const resultPaths = {
@@ -32,7 +34,9 @@ export default function InferenceJobsList({
   jobType,
   value,
   onSelect,
+  panel = true,
   showNoJobs = false,
+  showHeader = true,
 }: JobsListProps) {
   // undefined specified here to allow 0.
   // jobType + 1 because the difference between FrontendInferenceJobType and JobListTypes is an "all" option
@@ -48,31 +52,43 @@ export default function InferenceJobsList({
     useInferenceJobs(jobValue);
   const { t } = useLocalize("InferenceJobs");
 
+  const jobContent = (
+    <>
+      {showHeader && <h3 className="fw-semibold mb-3">{t("core.heading")}</h3>}
+      {inferenceJobs
+        .map((job: InferenceJob, key: number) => (
+          <JobItem
+            {...{
+              failures,
+              jobStatusDescription,
+              key,
+              onSelect,
+              resultPaths,
+              t,
+              ...job,
+            }}
+          />
+        ))
+        .reverse()}
+      {!inferenceJobs.length && showNoJobs && (
+        <p>Currently, there are current no jobs pending.</p>
+      )}
+    </>
+  );
+
   if (inferenceJobs.length || showNoJobs) {
     return (
-      <Panel
-        {...{ className: "fy-inference-jobs-list rounded", padding: true }}
-      >
-        <h5>{t("core.heading")}</h5>
-        {inferenceJobs
-          .map((job: InferenceJob, key: number) => (
-            <JobItem
-              {...{
-                failures,
-                jobStatusDescription,
-                key,
-                onSelect,
-                resultPaths,
-                t,
-                ...job,
-              }}
-            />
-          ))
-          .reverse()}
-        {!inferenceJobs.length && showNoJobs && (
-          <p>Currently, there are current no jobs pending.</p>
+      <>
+        {panel ? (
+          <Panel
+            {...{ className: "fy-inference-jobs-list rounded", padding: true }}
+          >
+            {jobContent}
+          </Panel>
+        ) : (
+          jobContent
         )}
-      </Panel>
+      </>
     );
   } else {
     return null;

packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx

@@ -1,6 +1,4 @@
-import React, {
-  // useState
-} from "react";
+import React from "react"; // useState
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 // import { TempSelect } from "components/common";
@@ -8,11 +6,14 @@ import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/Infer
 import ModalHeader from "../ModalHeader";
 
 interface Props {
-  handleClose?: any,
-  jobType?: FrontendInferenceJobType
+  handleClose?: any;
+  jobType?: FrontendInferenceJobType;
 }
 
-export default function InferenceJobsModal({ handleClose, jobType: inJobType = -1 }: Props) {
+export default function InferenceJobsModal({
+  handleClose,
+  jobType: inJobType = -1,
+}: Props) {
   // const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType];
   // const [jobType,jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All");
   // const typeObj = ["All", ...Object.values(FrontendInferenceJobType)];
@@ -30,18 +31,24 @@ export default function InferenceJobsModal({ handleClose, jobType: inJobType = -
     }
   };
 
-  return <>
-    <ModalHeader {...{ handleClose, title: "My Jobs" }} />
-    {
-     // <TempSelect {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
-    }
-    <InferenceJobsList {...{
-        failures,
-        onSelect: () => {
-          if (handleClose) handleClose();
-        },
-        value: 0 // fixed for now
-        // value: typeObj.indexOf(jobType),
-      }} />
-  </>;
-};
+  return (
+    <>
+      <ModalHeader {...{ handleClose, title: "My Jobs" }} />
+      {
+        // <TempSelect {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
+      }
+      <InferenceJobsList
+        {...{
+          failures,
+          onSelect: () => {
+            if (handleClose) handleClose();
+          },
+          value: 0, // fixed for now
+          // value: typeObj.indexOf(jobType),
+          showHeader: false,
+          panel: false,
+        }}
+      />
+    </>
+  );
+}