Feat(store): Add global store and project refactor

canvas/app/dashboard/project/id/[id]/job.tsx

@@ -5,7 +5,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { TProjectStepJob } from "@/services/job";
-import { ProjectStepJobRun } from "./run";
+import { ProjectStepJobRunsContainer } from "./runs-container";
 import React from "react";
 
 export type TProjectStepJobProps = {
@@ -22,7 +22,7 @@ export function ProjectStepJob(props: TProjectStepJobProps) {
           {job.name}
         </AccordionTrigger>
         <AccordionContent>
-          <ProjectStepJobRun job={job} />
+          <ProjectStepJobRunsContainer job={job} />
         </AccordionContent>
       </AccordionItem>
     </Accordion>

canvas/app/dashboard/project/id/[id]/jobs-actions.tsx

@@ -0,0 +1,65 @@
+import { ActionsButtons } from "@/components/custom/action-buttons";
+import { TRunStatus } from "@/services/run";
+import React from "react";
+
+export function JobsActions() {
+  const [currentState, setCurrentState] = React.useState<TRunStatus>("init");
+
+  return (
+    <ActionsButtons
+      currentState={currentState}
+      cancelButton={{
+        isDisabled:
+          currentState === "init" ||
+          currentState === "failed" ||
+          currentState === "success",
+        onClick: () => {
+          setCurrentState("failed");
+        },
+        tooltipText: "To cancel all the jobs running.",
+      }}
+      playButton={{
+        isDisabled: false,
+        tooltipText: "To run all the jobs in the current step.",
+        onClick: () => {
+          setCurrentState("pending");
+          setTimeout(() => {
+            setCurrentState("running");
+          }, 3000);
+          setTimeout(() => {
+            setCurrentState("failed");
+          }, 5000);
+        },
+      }}
+      pendingButton={{
+        isDisabled: false,
+        tooltipText: "All jobs execution is in pending.",
+      }}
+      runningButton={{
+        isDisabled: false,
+        tooltipText: "Executing all the jobs in the current steps.",
+      }}
+      successButton={{
+        isDisabled: false,
+        onClick: () => {
+          setCurrentState("pending");
+        },
+        tooltipText: "Click to run all the jobs again.",
+      }}
+      failedButton={{
+        tooltipText:
+          "Last execution was failed. Press this button to retry the execution.",
+        onClick: () => {
+          setCurrentState("pending");
+          setTimeout(() => {
+            setCurrentState("running");
+          }, 3000);
+
+          setTimeout(() => {
+            setCurrentState("success");
+          }, 6000);
+        },
+      }}
+    />
+  );
+}

canvas/app/dashboard/project/id/[id]/jobs.tsx

@@ -6,17 +6,19 @@ import useSWR from "swr";
 import { Accordion } from "@/components/ui/accordion";
 import { ProjectStepJob } from "./job";
 import { JobsSkeleton } from "./skeleton/jobs-skeleton";
-import { Button } from "@/components/ui/button";
+import { JobsActions } from "./jobs-actions";
+import React from "react";
+import { useProjectStore } from "@/stores/project";
 
-export type TProjectStepJobProps = {
-  step: TProjectStep;
-};
+export function ProjectStepJobs() {
+  const { step, updateJobs } = useProjectStore((state) => ({
+    step: state.currentStep,
+    updateJobs: state.updateCurrentStepJobs,
+  }));
 
-export function ProjectStepJobs(props: TProjectStepJobProps) {
-  const { step } = props;
   const { data, error, isLoading } = useSWR(
-    `/job/?step_id=${step.id}`,
-    () => getJobs({ stepId: step.id, canThrowOnError: true }),
+    `/job/?step_id=${step!.id}`,
+    () => getJobs({ stepId: step!.id, canThrowOnError: true }),
     {
       revalidateIfStale: false,
       revalidateOnFocus: false,
@@ -25,6 +27,12 @@ export function ProjectStepJobs(props: TProjectStepJobProps) {
     }
   );
 
+  React.useEffect(() => {
+    if (data && data.response) {
+      updateJobs(data.response);
+    }
+  }, [updateJobs, data]);
+
   if (isLoading && !data) {
     return <JobsSkeleton />;
   }
@@ -35,15 +43,12 @@ export function ProjectStepJobs(props: TProjectStepJobProps) {
 
   return (
     <div className="flex flex-col flex-1 overflow-auto">
-      <h4 className="font-bold text-2xl">{step.name}</h4>
-      <div className="py-4">
-        <p>
-          This step includes {data.response.length} job(s). You can run each job
-          individually or use the &quot;Execute Step&quot; button to run all
-          jobs at once.
-        </p>
-        <br />
-        <Button size="sm">Execute Step</Button>
+      <h4 className="font-bold text-2xl">{step!.name}</h4>
+      <div className="py-4 flex justify-between">
+        <p className="pt-2">{step!.description}</p>
+        <div>
+          <JobsActions />
+        </div>
       </div>
       <div className="mt-4">
         <Accordion type="single" collapsible>

canvas/app/dashboard/project/id/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { PageContainer } from "../../../_layout/page-container";
-import { ProjectMainContent } from "./main-content";
+import { ProjectMainContent } from "./project";
 import { getProject } from "@/services/projects";
 import { ProjectError } from "./project-error";
 

canvas/app/dashboard/project/id/[id]/project-actions.tsx

@@ -0,0 +1,65 @@
+import { ActionsButtons } from "@/components/custom/action-buttons";
+import { TRunStatus } from "@/services/run";
+import React from "react";
+
+export function ProjectActions() {
+  const [currentState, setCurrentState] = React.useState<TRunStatus>("init");
+
+  return (
+    <ActionsButtons
+      currentState={currentState}
+      cancelButton={{
+        isDisabled:
+          currentState === "init" ||
+          currentState === "failed" ||
+          currentState === "success",
+        onClick: () => {
+          setCurrentState("failed");
+        },
+        tooltipText: "To cancel all the steps running in this Project.",
+      }}
+      playButton={{
+        isDisabled: false,
+        tooltipText: "To run all the steps in the current project.",
+        onClick: () => {
+          setCurrentState("pending");
+          setTimeout(() => {
+            setCurrentState("running");
+          }, 3000);
+          setTimeout(() => {
+            setCurrentState("failed");
+          }, 5000);
+        },
+      }}
+      pendingButton={{
+        isDisabled: false,
+        tooltipText: "Project execution is in pending.",
+      }}
+      runningButton={{
+        isDisabled: false,
+        tooltipText: "Executing all the steps in the current project.",
+      }}
+      successButton={{
+        isDisabled: false,
+        onClick: () => {
+          setCurrentState("pending");
+        },
+        tooltipText: "Click to run all the steps in the project again.",
+      }}
+      failedButton={{
+        tooltipText:
+          "Last execution was failed. Press this button to retry the execution.",
+        onClick: () => {
+          setCurrentState("pending");
+          setTimeout(() => {
+            setCurrentState("running");
+          }, 3000);
+
+          setTimeout(() => {
+            setCurrentState("success");
+          }, 6000);
+        },
+      }}
+    />
+  );
+}

canvas/app/dashboard/project/id/[id]/project.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Breadcrumb } from "@/components/custom/breadcrumb";
+import { PageHeading } from "@/components/custom/page-heading";
+import { PROJECTS_LISTING_URL } from "@/constants/routes";
+import { TProject } from "@/services/projects";
+import { ProjectStoreProvider } from "@/stores/project";
+import { StepsContainer } from "./steps-container";
+import { ProjectActions } from "./project-actions";
+
+export type TProjectMainContentProps = {
+  project: TProject;
+};
+
+export function ProjectMainContent(props: TProjectMainContentProps) {
+  const { project } = props;
+
+  return (
+    <ProjectStoreProvider project={project}>
+      <div className="flex flex-col flex-1 overflow-auto">
+        <PageHeading heading={project.name} />
+        <Breadcrumb
+          links={[
+            { title: "All Projects", href: PROJECTS_LISTING_URL },
+            { title: project.name },
+          ]}
+        />
+        <div className="flex flex-1 flex-col">
+          <div className="py-4">
+            <p>{project.description}</p>
+            <div className="flex justify-end">
+              <ProjectActions />
+            </div>
+          </div>
+          <StepsContainer />
+        </div>
+      </div>
+    </ProjectStoreProvider>
+  );
+}