Feat: Make tasks progress component more flexible (#664)

Author: mykalmax

web/client/src/library/components/ide/ActivePlan.tsx

@@ -1,7 +1,7 @@
 import { Popover, Transition } from '@headlessui/react'
 import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { lazy, Fragment, type MouseEvent } from 'react'
+import { Fragment, type MouseEvent } from 'react'
 import { apiCancelPlanApply } from '~/api'
 import { useStoreContext } from '~/context/context'
 import {
@@ -14,10 +14,7 @@ import {
 } from '~/context/plan'
 import { EnumSize, EnumVariant } from '~/types/enum'
 import { Button } from '../button/Button'
-
-const TasksProgress = lazy(
-  async () => await import('../tasksProgress/TasksProgress'),
-)
+import TasksOverview from '../tasksOverview/TasksOverview'
 
 export default function ActivePlan({
   plan,
@@ -67,15 +64,33 @@ export default function ActivePlan({
           >
             <Popover.Panel className="absolute right-1 z-10 mt-8 transform">
               <div className="overflow-hidden rounded-lg bg-theme shadow-lg ring-1 ring-black ring-opacity-5">
-                <TasksProgress
-                  environment={environment}
-                  tasks={plan.tasks}
-                  updated_at={plan.updated_at}
-                  headline="Most Recent Plan"
-                  showBatches={plan.type !== EnumPlanApplyType.Virtual}
-                  showVirtualUpdate={plan.type === EnumPlanApplyType.Virtual}
-                  planState={planState}
-                />
+                <TasksOverview tasks={plan.tasks}>
+                  {({ total, completed, models }) => (
+                    <>
+                      <TasksOverview.Summary
+                        environment={environment.name}
+                        planState={planState}
+                        headline="Most Recent Plan"
+                        completed={completed}
+                        total={total}
+                        updateType={
+                          plan.type === EnumPlanApplyType.Virtual
+                            ? 'Virtual'
+                            : 'Backfill'
+                        }
+                        updatedAt={plan.updated_at}
+                      />
+                      <TasksOverview.Details
+                        models={models}
+                        showBatches={plan.type !== EnumPlanApplyType.Virtual}
+                        showVirtualUpdate={
+                          plan.type === EnumPlanApplyType.Virtual
+                        }
+                        showProgress={true}
+                      />
+                    </>
+                  )}
+                </TasksOverview>
                 <div className="my-4 px-4">
                   {planState === EnumPlanState.Applying && (
                     <Button

web/client/src/library/components/plan/Plan.tsx

@@ -279,7 +279,7 @@ function Plan({
       <Plan.Header error={error} />
       <Divider />
       <div className="flex flex-col w-full h-full overflow-hidden overflow-y-auto p-4 scrollbar scrollbar--vertical">
-        <Plan.Wizard setRefTaskProgress={elTaskProgress} />
+        <Plan.Wizard setRefTasksOverview={elTaskProgress} />
       </div>
       <Divider />
       <Plan.Actions

web/client/src/library/components/plan/PlanWizard.tsx

@@ -25,19 +25,19 @@ import {
   isObjectNotEmpty,
 } from '../../../utils'
 import Spinner from '../logo/Spinner'
-import TasksProgress from '../tasksProgress/TasksProgress'
 import { EnumPlanChangeType, usePlan } from './context'
 import { getBackfillStepHeadline, isModified } from './help'
 import Plan from './Plan'
 import PlanChangePreview from './PlanChangePreview'
 import { useChannelEvents } from '@api/channels'
 import { EnumVariant } from '~/types/enum'
 import Banner from '@components/banner/Banner'
+import TasksOverview from '../tasksOverview/TasksOverview'
 
 export default function PlanWizard({
-  setRefTaskProgress,
+  setRefTasksOverview,
 }: {
-  setRefTaskProgress: RefObject<HTMLDivElement>
+  setRefTasksOverview: RefObject<HTMLDivElement>
 }): JSX.Element {
   const [subscribe] = useChannelEvents()
 
@@ -338,20 +338,39 @@ export default function PlanWizard({
                           <Suspense
                             fallback={<Spinner className="w-4 h-4 mr-2" />}
                           >
-                            <TasksProgress
-                              environment={environment}
+                            <TasksOverview
                               tasks={tasks}
-                              changes={{
-                                modified,
-                                added,
-                                removed,
-                              }}
-                              updated_at={activeBackfill?.updated_at}
-                              showBatches={hasBackfills}
-                              showVirtualUpdate={hasVirtualUpdate}
-                              planState={planState}
-                              setRefTaskProgress={setRefTaskProgress}
-                            />
+                              setRefTasksOverview={setRefTasksOverview}
+                            >
+                              {({ total, completed, models }) => (
+                                <>
+                                  <TasksOverview.Summary
+                                    environment={environment.name}
+                                    planState={planState}
+                                    headline="Target Environment"
+                                    completed={completed}
+                                    total={total}
+                                    updateType={
+                                      hasVirtualUpdate ? 'Virtual' : 'Backfill'
+                                    }
+                                    updatedAt={activeBackfill?.updated_at}
+                                  />
+                                  {models != null && (
+                                    <TasksOverview.Details
+                                      models={models}
+                                      changes={{
+                                        modified,
+                                        added,
+                                        removed,
+                                      }}
+                                      showBatches={hasBackfills}
+                                      showVirtualUpdate={hasVirtualUpdate}
+                                      showProgress={true}
+                                    />
+                                  )}
+                                </>
+                              )}
+                            </TasksOverview>
                           </Suspense>
                         </>
                       )}