job que only shows on job page/modal

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

@@ -15,6 +15,7 @@ interface JobsListProps {
   value?: JobListTypes;
   onSelect?: (e: any) => any;
   panel?: boolean;
+  showJobQueue?: boolean;
   showNoJobs?: boolean;
   showHeader?: boolean;
 }
@@ -35,8 +36,9 @@ export default function InferenceJobsList({
   value,
   onSelect,
   panel = true,
-  showNoJobs = false,
   showHeader = true,
+  showJobQueue = false,
+  showNoJobs = false
 }: JobsListProps) {
   const jobValue = value !== undefined ? value : jobType !== undefined ? (jobType || 0) + 1 : 0;
   // undefined specified here to allow 0.
@@ -51,7 +53,7 @@ export default function InferenceJobsList({
   const jobContent = (
     <>
       {showHeader &&<h3 className="fw-semibold mb-3">{t("core.heading")}</h3>}
-      <JobQueueTicker {...{ hasPaidFeatures }}/>
+      { showJobQueue && <JobQueueTicker {...{ hasPaidFeatures }}/> }
       <div {...{ className: "fy-inference-jobs-list-grid" }}>
         { inferenceJobs.map((job: InferenceJob, key: number) => 
           <JobItem {...{

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

@@ -1,7 +1,7 @@
 import React from "react"; // useState
 import InferenceJobsList from "components/layout/InferenceJobsList";
 import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-// import { TempSelect } from "components/common";
+// import { TempSelect as Select } from "components/common";
 // import { enumToKeyArr } from "resources";
 import ModalHeader from "../ModalHeader";
 import { useLocalize } from "hooks";
@@ -9,11 +9,14 @@ import { useLocalize } from "hooks";
 interface Props {
   handleClose?: any;
   jobType?: FrontendInferenceJobType;
+  showModalHeader?: boolean;
 }
 
 export default function InferenceJobsModal({
   handleClose,
   jobType: inJobType = -1,
+  showModalHeader = true,
+  ...rest
 }: Props) {
   // const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType];
   // const [jobType,jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All");
@@ -36,9 +39,9 @@ export default function InferenceJobsModal({
 
   return (
     <>
-      <ModalHeader {...{ handleClose, title: t("core.jobsTitle") }} />
+      { showModalHeader && <ModalHeader {...{ handleClose, title: t("core.jobsTitle") }} /> }
       {
-        // <TempSelect {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
+        // <Select {...{ onChange: ({ target }: { target: any }) => jobTypeSet(target.value), options, value: jobType }} />
       }
       <InferenceJobsList
         {...{
@@ -49,7 +52,10 @@ export default function InferenceJobsModal({
           value: 0, // fixed for now
           // value: typeObj.indexOf(jobType),
           showHeader: false,
+          showJobQueue: true,
+          showNoJobs: true,
           panel: false,
+          ...rest
         }}
       />
     </>

packages/fakeyou.com/src/v2/view/pages/inference_jobs_page/InferenceJobsPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Container, Panel } from "components/common";
+import { InferenceJobsModal } from "components/modals";
 import PageHeader from "components/layout/PageHeader";
-import JobsPageList from "./JobsPageList";
 import { useLocalize } from "hooks";
 
 export default function InferenceJobsPage() {
@@ -14,7 +14,7 @@ export default function InferenceJobsPage() {
         subText={t("core.jobsSubtitle")}
       />
       <Panel padding={true}>
-        <JobsPageList />
+        <InferenceJobsModal {...{ showModalHeader: false }} />
       </Panel>
     </Container>
   );

packages/fakeyou.com/src/v2/view/pages/inference_jobs_page/JobsPageList.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import InferenceJobsList from "components/layout/InferenceJobsList";
-import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
-interface Props {
-  handleClose?: any;
-  jobType?: FrontendInferenceJobType;
-}
-
-export default function JobsPageList({
-  handleClose,
-  jobType: inJobType = -1,
-}: Props) {
-  // const presetFilter = enumToKeyArr(FrontendInferenceJobType)[inJobType];
-  // const [jobType,jobTypeSet] = useState(inJobType > -1 ? presetFilter : "All");
-  // const typeObj = ["All", ...Object.values(FrontendInferenceJobType)];
-
-  // const options = typeObj.filter(val => isNaN(Number(val)))
-  // .map((value) => {
-  //   if (typeof value === "string") return { value, label: value }
-  //   return { label: "", value: "" };
-  // });
-
-  const failures = (fail = "") => {
-    switch (fail) {
-      default:
-        return "Uknown failure";
-    }
-  };
-
-  return (
-    <>
-      {
-        // <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,
-          showNoJobs: true,
-        }}
-      />
-    </>
-  );
-}