From 8324339c87b34f5bf4538f5f0214c215f90aa811 Mon Sep 17 00:00:00 2001
From: Max Mykal <mykalmax@yahoo.com>
Date: Mon, 3 Apr 2023 14:10:14 -0700
Subject: [PATCH 1/3] split task component

---
 .../src/library/components/ide/ActivePlan.tsx |  43 +-
 .../library/components/plan/PlanWizard.tsx    |  43 +-
 .../tasksOverview/TasksOverview.tsx           | 501 ++++++++++++++++++
 .../tasksProgress/TasksProgress.tsx           | 202 -------
 web/client/tailwind.config.js                 |   5 -
 5 files changed, 560 insertions(+), 234 deletions(-)
 create mode 100644 web/client/src/library/components/tasksOverview/TasksOverview.tsx
 delete mode 100644 web/client/src/library/components/tasksProgress/TasksProgress.tsx

diff --git a/web/client/src/library/components/ide/ActivePlan.tsx b/web/client/src/library/components/ide/ActivePlan.tsx
index 54a1fe608f..8590f590a9 100644
--- a/web/client/src/library/components/ide/ActivePlan.tsx
+++ b/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
diff --git a/web/client/src/library/components/plan/PlanWizard.tsx b/web/client/src/library/components/plan/PlanWizard.tsx
index c4fefd09b3..c08902c04b 100644
--- a/web/client/src/library/components/plan/PlanWizard.tsx
+++ b/web/client/src/library/components/plan/PlanWizard.tsx
@@ -25,7 +25,6 @@ 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'
@@ -33,6 +32,7 @@ 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,
@@ -338,20 +338,37 @@ 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}
-                            />
+                            >
+                              {({ 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}
+                                  />
+                                  <TasksOverview.Details
+                                    models={models}
+                                    changes={{
+                                      modified,
+                                      added,
+                                      removed,
+                                    }}
+                                    showBatches={hasBackfills}
+                                    showVirtualUpdate={hasVirtualUpdate}
+                                    showProgress={true}
+                                  />
+                                </>
+                              )}
+                            </TasksOverview>
                           </Suspense>
                         </>
                       )}
diff --git a/web/client/src/library/components/tasksOverview/TasksOverview.tsx b/web/client/src/library/components/tasksOverview/TasksOverview.tsx
new file mode 100644
index 0000000000..2e301becd5
--- /dev/null
+++ b/web/client/src/library/components/tasksOverview/TasksOverview.tsx
@@ -0,0 +1,501 @@
+import clsx from 'clsx'
+import React, { type RefObject, useMemo } from 'react'
+import {
+  EnumPlanState,
+  type PlanTaskStatus,
+  type PlanState,
+  type PlanTasks,
+} from '~/context/plan'
+import { toDateFormat, toRatio } from '~/utils'
+import { Divider } from '../divider/Divider'
+import Progress from '../progress/Progress'
+import pluralize from 'pluralize'
+import { type EnvironmentName } from '~/models/environment'
+import { type ContextEnvironmentChanges } from '~/api/client'
+import { EnumPlanChangeType, type PlanChangeType } from '../plan/context'
+
+interface PropsTasks {
+  tasks: PlanTasks
+  setRefTaskProgress?: RefObject<HTMLDivElement>
+  children: (options: {
+    models: Array<[string, PlanTaskStatus]>
+    completed: number
+    total: number
+  }) => JSX.Element
+}
+
+const TasksOverview = function TasksOverview({
+  children,
+  setRefTaskProgress,
+  tasks,
+}: PropsTasks): JSX.Element {
+  const { models, taskCompleted, taskTotal } = useMemo(() => {
+    const models = Object.entries(tasks)
+    const taskCompleted = models.filter(
+      ([_, { completed, total }]) => completed === total,
+    ).length
+    const taskTotal = models.length
+
+    return {
+      models,
+      taskCompleted,
+      taskTotal,
+    }
+  }, [tasks])
+
+  return (
+    <div
+      className="text-prose"
+      ref={setRefTaskProgress}
+    >
+      {children({
+        models,
+        completed: taskCompleted,
+        total: taskTotal,
+      })}
+    </div>
+  )
+}
+
+function TasksSummary({
+  className,
+  headline,
+  environment,
+  planState,
+  completed,
+  total,
+  updatedAt,
+  updateType,
+}: {
+  className?: string
+  headline: string
+  environment: EnvironmentName
+  planState: PlanState
+  completed: number
+  total: number
+  updateType: string
+  updatedAt?: string
+}): JSX.Element {
+  return (
+    <TasksBlock className={className}>
+      <Task>
+        <TaskDetails>
+          <TaskDetailsInfo>
+            <TaskHeadline
+              headline={headline}
+              environment={environment}
+              planState={planState}
+            />
+          </TaskDetailsInfo>
+          <TaskDetailsProgress>
+            <TaskSize
+              completed={completed}
+              total={total}
+              unit="task"
+            />
+            <TaskDivider />
+            <TaskProgress
+              completed={completed}
+              total={total}
+            />
+          </TaskDetailsProgress>
+        </TaskDetails>
+        <Progress progress={toRatio(completed, total)} />
+        {updatedAt != null && (
+          <TaskCompletedMeta
+            updatedAt={updatedAt}
+            updateType={updateType}
+          />
+        )}
+      </Task>
+    </TasksBlock>
+  )
+}
+
+function TasksDetails({
+  models,
+  className,
+  changes,
+  showBatches = true,
+  showProgress = true,
+  showVirtualUpdate = false,
+}: {
+  className?: string
+  changes?: ContextEnvironmentChanges
+  models: Array<[string, PlanTaskStatus]>
+  showBatches: boolean
+  showProgress: boolean
+  showVirtualUpdate: boolean
+}): JSX.Element {
+  const {
+    changesAdded,
+    changesRemoved,
+    changesModifiedDirect,
+    changesModifiedIndirect,
+  } = useMemo(() => {
+    const modified = changes?.modified
+
+    return {
+      changesAdded: changes?.added ?? [],
+      changesRemoved: changes?.removed ?? [],
+      changesModifiedMetadata: modified?.metadata ?? [],
+      changesModifiedIndirect: (modified?.indirect ?? []).map(
+        ({ model_name }) => model_name,
+      ),
+      changesModifiedDirect: (modified?.direct ?? []).map(
+        ({ model_name }) => model_name,
+      ),
+    }
+  }, [changes])
+
+  return (
+    <TasksBlock className={className}>
+      <Tasks models={models}>
+        {([modelName, task]) => (
+          <Task>
+            <TaskDetails>
+              <TaskDetailsInfo>
+                {task.interval != null && (
+                  <TaskInterval
+                    start={task.interval[0]}
+                    end={task.interval[1]}
+                  />
+                )}
+                <TaskModelName
+                  modelName={modelName}
+                  changeType={getChangeType({
+                    modelName,
+                    changesAdded,
+                    changesRemoved,
+                    changesModifiedDirect,
+                    changesModifiedIndirect,
+                  })}
+                />
+              </TaskDetailsInfo>
+              <TaskDetailsProgress>
+                {showBatches && (
+                  <TaskSize
+                    completed={task.completed}
+                    total={task.total}
+                    unit="batch"
+                  />
+                )}
+                <TaskDivider />
+                {showProgress && (
+                  <>
+                    {task.end == null || task.start == null ? (
+                      <TaskProgress
+                        total={task.total}
+                        completed={task.completed}
+                      />
+                    ) : (
+                      <TaskCompletionTime
+                        start={task.start}
+                        end={task.end}
+                      />
+                    )}
+                  </>
+                )}
+                {showVirtualUpdate && (
+                  <span className="inline-block whitespace-nowrap font-bold ml-2">
+                    Updated
+                  </span>
+                )}
+              </TaskDetailsProgress>
+            </TaskDetails>
+            {showProgress ? (
+              <Progress progress={toRatio(task.completed, task.total)} />
+            ) : (
+              <Divider className="my-1 border-neutral-200 opacity-50" />
+            )}
+          </Task>
+        )}
+      </Tasks>
+    </TasksBlock>
+  )
+}
+
+function TasksBlock({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}): JSX.Element {
+  return <div className={clsx('my-3 mx-4', className)}>{children}</div>
+}
+
+function Task({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}): JSX.Element {
+  return <div className={clsx('px-4', className)}>{children}</div>
+}
+
+function Tasks({
+  className,
+  models,
+  children,
+}: {
+  className?: string
+  models: Array<[string, PlanTaskStatus]>
+  children: (model: [string, PlanTaskStatus]) => JSX.Element
+}): JSX.Element {
+  return (
+    <ul
+      className={clsx(
+        'bg-neutral-10 rounded-lg py-4 overflow-auto text-prose scrollbar scrollbar--vertical scrollbar--horizontal',
+        className,
+      )}
+    >
+      {models.map(([modelName, task]) => (
+        <li
+          key={modelName}
+          className="mb-2"
+        >
+          {children([modelName, task])}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function TaskDetails({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <div
+      className={clsx(
+        'flex sm:justify-between sm:items-baseline text-xs',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function TaskHeadline({
+  className,
+  headline,
+  environment,
+  planState,
+}: {
+  headline: string
+  environment: EnvironmentName
+  planState: PlanState
+  className?: string
+}): JSX.Element {
+  return (
+    <span className={clsx('flex items-center', className)}>
+      <span className="block whitespace-nowrap text-sm font-medium">
+        {headline}
+      </span>
+      <small className="inline-block ml-1 px-2 py-[0.125rem] text-xs font-bold bg-neutral-10 rounded-md">
+        {environment}
+      </small>
+      {planState !== EnumPlanState.Init && (
+        <>
+          <TaskDivider />
+          <small className="ml-1">{planState}</small>
+        </>
+      )}
+    </span>
+  )
+}
+
+function TaskDetailsInfo({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <div
+      className={clsx('flex mr-6 w-full sm:w-auto overflow-hidden', className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+function TaskDetailsProgress({
+  className,
+  children,
+}: {
+  className?: string
+  children: React.ReactNode
+}): JSX.Element {
+  return <div className={clsx('flex items-center', className)}>{children}</div>
+}
+
+function TaskInterval({
+  className,
+  start,
+  end,
+}: {
+  start: string
+  end: string
+  className?: string
+}): JSX.Element {
+  return (
+    <span
+      className={clsx(
+        'inline-block mr-2 whitespace-nowrap font-mono',
+        className,
+      )}
+    >
+      {start}&nbsp;&ndash;&nbsp;{end}
+    </span>
+  )
+}
+
+function TaskSize({
+  className,
+  total,
+  completed,
+  unit,
+}: {
+  total: number
+  completed: number
+  unit: string
+  className?: string
+}): JSX.Element {
+  return (
+    <span className={clsx('inline-block whitespace-nowrap', className)}>
+      {completed} of {total} {pluralize(unit, total)}
+    </span>
+  )
+}
+
+function TaskDivider({ className }: { className?: string }): JSX.Element {
+  return <span className={clsx('inline-block mx-2', className)}>|</span>
+}
+
+function TaskProgress({
+  className,
+  total,
+  completed,
+}: {
+  total: number
+  completed: number
+  className?: string
+}): JSX.Element {
+  return (
+    <span
+      className={clsx('inline-block whitespace-nowrap font-bold', className)}
+    >
+      {Math.ceil(toRatio(completed, total))}%
+    </span>
+  )
+}
+
+function TaskCompletionTime({
+  className,
+  start,
+  end,
+}: {
+  start: number
+  end: number
+  className?: string
+}): JSX.Element {
+  return (
+    <span
+      className={clsx('inline-block whitespace-nowrap font-bold', className)}
+    >
+      {`${Math.floor((end - start) / 60000)}:${String(
+        Math.ceil(((end - start) / 1000) % 60),
+      ).padStart(2, '0')}`}
+    </span>
+  )
+}
+
+function TaskCompletedMeta({
+  updateType,
+  updatedAt,
+}: {
+  updateType: string
+  updatedAt: string
+}): JSX.Element {
+  return (
+    <div className="flex justify-between mt-1">
+      <small className="text-xs">
+        <b>Update Type:</b>
+        <span className="inline-block ml-1">{updateType}</span>
+      </small>
+      <small className="text-xs">
+        <b>Last Update:</b>
+        <span className="inline-block ml-1">
+          {toDateFormat(new Date(updatedAt), 'yyyy-mm-dd hh-mm-ss', false)}
+        </span>
+      </small>
+    </div>
+  )
+}
+
+function TaskModelName({
+  className,
+  modelName,
+  changeType,
+}: {
+  className?: string
+  modelName: string
+  changeType: PlanChangeType
+}): JSX.Element {
+  return (
+    <span
+      className={clsx(
+        'font-bold whitespace-nowrap',
+        changeType === EnumPlanChangeType.Add &&
+          'text-success-600  dark:text-success-500',
+        changeType === EnumPlanChangeType.Remove && 'text-danger-500',
+        changeType === EnumPlanChangeType.Direct &&
+          'text-secondary-500 dark:text-primary-500',
+        changeType === EnumPlanChangeType.Indirect && 'text-warning-500',
+        changeType === EnumPlanChangeType.Metadata && 'text-prose',
+        className,
+      )}
+    >
+      {modelName}
+    </span>
+  )
+}
+
+TasksOverview.Block = TasksBlock
+TasksOverview.Summary = TasksSummary
+TasksOverview.Details = TasksDetails
+TasksOverview.Task = Task
+TasksOverview.Tasks = Tasks
+
+export default TasksOverview
+
+function getChangeType({
+  modelName,
+  changesAdded,
+  changesRemoved,
+  changesModifiedDirect,
+  changesModifiedIndirect,
+}: {
+  modelName: string
+  changesAdded: string[]
+  changesRemoved: string[]
+  changesModifiedDirect: string[]
+  changesModifiedIndirect: string[]
+}): PlanChangeType {
+  if (changesAdded.includes(modelName)) return EnumPlanChangeType.Add
+  if (changesRemoved.includes(modelName)) return EnumPlanChangeType.Remove
+  if (changesModifiedDirect.includes(modelName))
+    return EnumPlanChangeType.Direct
+  if (changesModifiedIndirect.includes(modelName))
+    return EnumPlanChangeType.Indirect
+
+  return EnumPlanChangeType.Metadata
+}
diff --git a/web/client/src/library/components/tasksProgress/TasksProgress.tsx b/web/client/src/library/components/tasksProgress/TasksProgress.tsx
deleted file mode 100644
index 16933d1fcb..0000000000
--- a/web/client/src/library/components/tasksProgress/TasksProgress.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import clsx from 'clsx'
-import { type RefObject, useMemo } from 'react'
-import { EnumPlanState, type PlanState, type PlanTasks } from '~/context/plan'
-import { toDateFormat, toRatio } from '~/utils'
-import { Divider } from '../divider/Divider'
-import Progress from '../progress/Progress'
-import pluralize from 'pluralize'
-import { type ModelEnvironment } from '~/models/environment'
-import { type ContextEnvironmentChanges } from '~/api/client'
-
-interface PropsTasks {
-  environment: ModelEnvironment
-  tasks: PlanTasks
-  planState: PlanState
-  headline?: string
-  updated_at?: string
-  changes?: ContextEnvironmentChanges
-  showBatches?: boolean
-  showProgress?: boolean
-  showVirtualUpdate?: boolean
-  setRefTaskProgress?: RefObject<HTMLDivElement>
-}
-
-export default function TasksProgress({
-  environment,
-  tasks,
-  updated_at,
-  changes,
-  headline = 'Target Environment',
-  showBatches = true,
-  showProgress = true,
-  showVirtualUpdate = false,
-  planState,
-  setRefTaskProgress,
-}: PropsTasks): JSX.Element {
-  const { models, taskCompleted, taskTotal } = useMemo(() => {
-    const models = Object.entries(tasks)
-    const taskCompleted = models.filter(
-      ([_, { completed, total }]) => completed === total,
-    ).length
-    const taskTotal = models.length
-
-    return {
-      models,
-      taskCompleted,
-      taskTotal,
-    }
-  }, [tasks])
-
-  const {
-    changesAdded,
-    changesRemoved,
-    changesModifiedDirect,
-    changesModifiedIndirect,
-    changesModifiedMetadata,
-  } = useMemo(() => {
-    const modified = changes?.modified
-
-    return {
-      changesAdded: changes?.added ?? [],
-      changesRemoved: changes?.removed ?? [],
-      changesModifiedMetadata: modified?.metadata ?? [],
-      changesModifiedIndirect: (modified?.indirect ?? []).map(
-        ({ model_name }) => model_name,
-      ),
-      changesModifiedDirect: (modified?.direct ?? []).map(
-        ({ model_name }) => model_name,
-      ),
-    }
-  }, [changes])
-
-  return (
-    <div
-      className="text-prose"
-      ref={setRefTaskProgress}
-    >
-      <div className="my-3 mx-4">
-        <div className="flex justify-between items-baseline">
-          <span className="flex items-center">
-            <span className="block whitespace-nowrap text-sm font-medium">
-              {headline}
-            </span>
-            <small className="inline-block ml-1 px-2 py-[0.125rem] text-xs font-bold bg-neutral-10 rounded-md">
-              {environment.name}
-            </small>
-            {planState !== EnumPlanState.Init && (
-              <small className="ml-2">{planState}</small>
-            )}
-          </span>
-          <small className="block whitespace-nowrap text-xs font-bold">
-            <span>
-              {taskCompleted} of {taskTotal} {pluralize('task', taskTotal)}
-            </span>
-            <span className="inline-block mx-2">|</span>
-            <span className="inline-block whitespace-nowrap font-bold">
-              {Math.ceil(toRatio(taskCompleted, taskTotal))}%
-            </span>
-          </small>
-        </div>
-        <Progress progress={toRatio(taskCompleted, taskTotal)} />
-        {updated_at != null && (
-          <div className="flex justify-between mt-1">
-            <small className="text-xs">
-              <b>Update Type:</b>
-              <span className="inline-block ml-1">
-                {showVirtualUpdate ? 'Virtual' : 'Backfill'}
-              </span>
-            </small>
-            <small className="text-xs">
-              <b>Last Update:</b>
-              <span className="inline-block ml-1">
-                {toDateFormat(
-                  new Date(updated_at),
-                  'yyyy-mm-dd hh-mm-ss',
-                  false,
-                )}
-              </span>
-            </small>
-          </div>
-        )}
-      </div>
-      <div className="my-4 px-4">
-        <div className="bg-neutral-10 rounded-lg">
-          <ul className="p-4 overflow-auto text-prose scrollbar scrollbar--vertical scrollbar--horizontal">
-            {models.map(([model_name, task]) => (
-              <li
-                key={model_name}
-                className="mb-2"
-              >
-                <small className="flex sm:justify-between sm:items-baseline text-xs">
-                  <span className="flex mr-6 w-full sm:w-auto overflow-hidden">
-                    {task.interval != null && (
-                      <span className="inline-block mr-2 whitespace-nowrap">
-                        {task.interval[0]}&nbsp;&ndash;&nbsp;{task.interval[1]}
-                      </span>
-                    )}
-                    <span
-                      className={clsx(
-                        'font-bold whitespace-nowrap',
-                        changesAdded.includes(model_name) && 'text-success-500',
-                        changesRemoved.includes(model_name) &&
-                          'text-danger-500',
-                        changesModifiedDirect.includes(model_name) &&
-                          'text-secondary-500 dark:text-primary-500',
-                        changesModifiedIndirect.includes(model_name) &&
-                          'text-warning-500',
-                        changesModifiedMetadata.includes(model_name) &&
-                          'text-prose',
-                      )}
-                    >
-                      {task.view_name}
-                    </span>
-                  </span>
-                  <span className="flex items-center">
-                    {showBatches && (
-                      <>
-                        <span className="block whitespace-nowrap">
-                          {task.completed} of {task.total}&nbsp;
-                          {pluralize('batch', task.total)}
-                        </span>
-                        <span className="inline-block mx-2">|</span>
-                      </>
-                    )}
-                    {showProgress && (
-                      <>
-                        {task.end == null || task.start == null ? (
-                          <span className="inline-block whitespace-nowrap font-bold">
-                            {Math.ceil(toRatio(task.completed, task.total))}%
-                          </span>
-                        ) : (
-                          <span className="inline-block whitespace-nowrap font-bold">
-                            {`${Math.floor(
-                              (task.end - task.start) / 60000,
-                            )}:${String(
-                              Math.ceil(((task.end - task.start) / 1000) % 60),
-                            ).padStart(2, '0')}`}
-                          </span>
-                        )}
-                      </>
-                    )}
-                    {showVirtualUpdate && (
-                      <>
-                        <span className="inline-block whitespace-nowrap font-bold ml-2">
-                          Updated
-                        </span>
-                      </>
-                    )}
-                  </span>
-                </small>
-                {showProgress ? (
-                  <Progress progress={toRatio(task.completed, task.total)} />
-                ) : (
-                  <Divider className="my-1 border-neutral-200 opacity-50" />
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/web/client/tailwind.config.js b/web/client/tailwind.config.js
index 2f753ad16f..4fffb94aff 100644
--- a/web/client/tailwind.config.js
+++ b/web/client/tailwind.config.js
@@ -3,11 +3,6 @@ module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: ['class', '[mode="dark"]'],
   theme: {
-    extend: {
-      boxShadow: {
-        border: 'inset 0 0 0 1px',
-      },
-    },
     colors: {
       prose: {
         DEFAULT: 'var(--color-text)',

From 939df0220d5d5d578a94290a9f5b727402db5450 Mon Sep 17 00:00:00 2001
From: Max Mykal <mykalmax@yahoo.com>
Date: Thu, 6 Apr 2023 11:10:35 -0700
Subject: [PATCH 2/3] reformat task progress component to be more modular

---
 .../src/library/components/plan/Plan.tsx      |  2 +-
 .../library/components/plan/PlanWizard.tsx    | 30 ++++++++++---------
 .../tasksOverview/TasksOverview.tsx           |  8 ++---
 web/client/src/workers/sqlglot/worker.ts      |  2 --
 4 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/web/client/src/library/components/plan/Plan.tsx b/web/client/src/library/components/plan/Plan.tsx
index 203414d29b..4d8fd9e893 100644
--- a/web/client/src/library/components/plan/Plan.tsx
+++ b/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
diff --git a/web/client/src/library/components/plan/PlanWizard.tsx b/web/client/src/library/components/plan/PlanWizard.tsx
index c08902c04b..32d9de6d1b 100644
--- a/web/client/src/library/components/plan/PlanWizard.tsx
+++ b/web/client/src/library/components/plan/PlanWizard.tsx
@@ -35,9 +35,9 @@ 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()
 
@@ -340,7 +340,7 @@ export default function PlanWizard({
                           >
                             <TasksOverview
                               tasks={tasks}
-                              setRefTaskProgress={setRefTaskProgress}
+                              setRefTasksOverview={setRefTasksOverview}
                             >
                               {({ total, completed, models }) => (
                                 <>
@@ -355,17 +355,19 @@ export default function PlanWizard({
                                     }
                                     updatedAt={activeBackfill?.updated_at}
                                   />
-                                  <TasksOverview.Details
-                                    models={models}
-                                    changes={{
-                                      modified,
-                                      added,
-                                      removed,
-                                    }}
-                                    showBatches={hasBackfills}
-                                    showVirtualUpdate={hasVirtualUpdate}
-                                    showProgress={true}
-                                  />
+                                  {models != null && (
+                                    <TasksOverview.Details
+                                      models={models}
+                                      changes={{
+                                        modified,
+                                        added,
+                                        removed,
+                                      }}
+                                      showBatches={hasBackfills}
+                                      showVirtualUpdate={hasVirtualUpdate}
+                                      showProgress={true}
+                                    />
+                                  )}
                                 </>
                               )}
                             </TasksOverview>
diff --git a/web/client/src/library/components/tasksOverview/TasksOverview.tsx b/web/client/src/library/components/tasksOverview/TasksOverview.tsx
index 2e301becd5..b7cc5d4f9b 100644
--- a/web/client/src/library/components/tasksOverview/TasksOverview.tsx
+++ b/web/client/src/library/components/tasksOverview/TasksOverview.tsx
@@ -16,9 +16,9 @@ import { EnumPlanChangeType, type PlanChangeType } from '../plan/context'
 
 interface PropsTasks {
   tasks: PlanTasks
-  setRefTaskProgress?: RefObject<HTMLDivElement>
+  setRefTasksOverview?: RefObject<HTMLDivElement>
   children: (options: {
-    models: Array<[string, PlanTaskStatus]>
+    models?: Array<[string, PlanTaskStatus]>
     completed: number
     total: number
   }) => JSX.Element
@@ -26,7 +26,7 @@ interface PropsTasks {
 
 const TasksOverview = function TasksOverview({
   children,
-  setRefTaskProgress,
+  setRefTasksOverview,
   tasks,
 }: PropsTasks): JSX.Element {
   const { models, taskCompleted, taskTotal } = useMemo(() => {
@@ -46,7 +46,7 @@ const TasksOverview = function TasksOverview({
   return (
     <div
       className="text-prose"
-      ref={setRefTaskProgress}
+      ref={setRefTasksOverview}
     >
       {children({
         models,
diff --git a/web/client/src/workers/sqlglot/worker.ts b/web/client/src/workers/sqlglot/worker.ts
index 3857ec067c..3c3c5a023a 100644
--- a/web/client/src/workers/sqlglot/worker.ts
+++ b/web/client/src/workers/sqlglot/worker.ts
@@ -1,7 +1,5 @@
 declare function importScripts(...urls: string[]): void
 
-importScripts('https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js')
-
 const scope = self as any
 
 async function loadPyodideAndPackages(): Promise<any[]> {

From 829f830b9d7865cf0f747559fbec9acb65dd3ec3 Mon Sep 17 00:00:00 2001
From: Max Mykal <mykalmax@yahoo.com>
Date: Thu, 6 Apr 2023 11:14:20 -0700
Subject: [PATCH 3/3] fix import pyodide

---
 web/client/src/workers/sqlglot/worker.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/client/src/workers/sqlglot/worker.ts b/web/client/src/workers/sqlglot/worker.ts
index 3c3c5a023a..3857ec067c 100644
--- a/web/client/src/workers/sqlglot/worker.ts
+++ b/web/client/src/workers/sqlglot/worker.ts
@@ -1,5 +1,7 @@
 declare function importScripts(...urls: string[]): void
 
+importScripts('https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js')
+
 const scope = self as any
 
 async function loadPyodideAndPackages(): Promise<any[]> {