workflow page can now deal with showing inference jobs much better

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

@@ -13,18 +13,20 @@ interface JobsListProps {
   failures: (fail: string) => string;
   jobType: FrontendInferenceJobType;
   onSelect?: (e: any) => any;
+  showNoJobs?: boolean;
 }
 
 export default function InferenceJobsList({
   failures,
   jobType,
   onSelect,
+  showNoJobs = false,
 }: JobsListProps) {
   const { inferenceJobs = [], jobStatusDescription } =
     useInferenceJobs(jobType);
   const { t } = useLocalize("InferenceJobs");
 
-  if (inferenceJobs.length) {
+  if (inferenceJobs.length || showNoJobs) {
     return (
       <Panel {...{ className: "fy-inference-jobs-list", padding: true }}>
         <h5>{t("core.heading")}</h5>
@@ -43,6 +45,9 @@ export default function InferenceJobsList({
             />
           ))
           .reverse()}
+          {!inferenceJobs.length && showNoJobs &&
+            <p>Currently, there are current no jobs pending.</p> 
+          }
       </Panel>
     );
   } else {

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/compWorkflowJoblist.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Analytics } from "common/Analytics";
+import InferenceJobsList from "components/layout/InferenceJobsList";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
+
+export default function CompWorkflowJobList({
+  showNoJobs = false
+}:{
+  showNoJobs?:boolean
+}){
+  const failures = (fail = "") => {
+    switch (fail) {
+      case "sample case": 
+        return "Sample Case, this should not have been shown";
+      default:
+        return "Unknown failure";
+    }
+  };
+  return (
+    <InferenceJobsList {...{
+      showNoJobs,
+      failures,
+      onSelect: () => Analytics.voiceConversionClickDownload(),
+      jobType: FrontendInferenceJobType.VideoWorkflow,
+    }}/>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageVideoProvision.tsx

@@ -5,6 +5,7 @@ import { BasicVideo, Panel, Tabs } from "components/common";
 import { State, Action } from "../videoWorkflowReducer";
 import TabContentUpload from "./tabContentUpload";
 import TabContentLibrary from "./tabContentLibrary";
+import CompWorkflowJobList from "./compWorkflowJoblist";
 
 export default function PageVideoProvision({
   debug=false, parentPath, t, pageState, dispatchPageState
@@ -36,20 +37,23 @@ export default function PageVideoProvision({
   ];
 
   return(
-    <Panel>
-      <div className="row g-0">
-        <div className="col-12 col-md-6">
-          <Tabs tabs={tabs} />
+    <>
+      <Panel className="mb-4">
+        <div className="row g-0">
+          <div className="col-12 col-md-6">
+            <Tabs tabs={tabs} />
+          </div>
+          <div className="col-12 col-md-6">
+            <Panel padding={true} clear={true}>
+              <BasicVideo
+                title={t("video.sample")}
+                src="/videos/face-animator-instruction-en.mp4"
+              />
+            </Panel>
+          </div>
         </div>
-        <div className="col-12 col-md-6">
-          <Panel padding={true} clear={true}>
-            <BasicVideo
-              title={t("video.sample")}
-              src="/videos/face-animator-instruction-en.mp4"
-            />
-          </Panel>
-        </div>
-      </div>
-    </Panel>
+      </Panel>
+      <CompWorkflowJobList />
+    </>
   );
 }

packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowJoblist.tsx

@@ -1,49 +1,37 @@
 import React, { memo } from 'react'
-
-import { Analytics } from "common/Analytics";
-import InferenceJobsList from "components/layout/InferenceJobsList";
-import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
+import { NavLink } from 'react-router-dom';
 import { states, Action, State } from "../videoWorkflowReducer";
-import { Spinner } from 'components/common';
+import { Button, Spinner } from 'components/common';
 
-function VideoWorkflowJobList(){
-  const failures = (fail = "") => {
-    switch (fail) {
-      case "sample case": 
-        return "Sample Case, this should not have been shown";
-      default:
-        return "Unknown failure";
-    }
-  };
-
-  return (
-    <InferenceJobsList {...{
-      failures,
-      onSelect: () => Analytics.voiceConversionClickDownload(),
-      jobType: FrontendInferenceJobType.VideoWorkflow,
-    }}/>
-  );
-}
+import CompWorkflowJobList from './compWorkflowJoblist';
 
 export default memo (function PageWorkflowJoblist({
-  t, pageState, dispatchPageState
+  t, pageState, dispatchPageState, parentPath
 }: {
   debug?: boolean;
   t: Function;
   pageState: State;
+  parentPath: string
   dispatchPageState: (action: Action) => void;
 }) {
-  console.log(pageState);
+
   return(
     <>
-      <h1>Jobs</h1>
+      <div className="row mb-3">
+        <NavLink to={`${parentPath}`}>
+          <Button
+            label={t("generateNewWorkflow")}
+            variant="primary"
+          />
+        </NavLink>
+      </div>
       {pageState.status === states.WORKFLOW_ENQUEUEING &&
         <div>
           <h2> Requesting Filter Job</h2>
           <Spinner />
         </div>
       }
-      <VideoWorkflowJobList />
+      <CompWorkflowJobList showNoJobs />
     </>
   );
 });