56058: Removing refresh state consumption for Dag header

airflow-core/src/airflow/ui/src/components/HeaderCard.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, GridItem, Heading, HStack, Spinner } from "@chakra-ui/react";
+import { Box, Flex, GridItem, Heading, HStack } from "@chakra-ui/react";
 import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,14 +27,13 @@ import { StateBadge } from "src/components/StateBadge";
 type Props = {
   readonly actions?: ReactNode;
   readonly icon: ReactNode;
-  readonly isRefreshing?: boolean;
   readonly state?: TaskInstanceState | null;
   readonly stats: Array<{ label: string; value: ReactNode | string }>;
   readonly subTitle?: ReactNode | string;
   readonly title: ReactNode | string;
 };
 
-export const HeaderCard = ({ actions, icon, isRefreshing, state, stats, subTitle, title }: Props) => {
+export const HeaderCard = ({ actions, icon, state, stats, subTitle, title }: Props) => {
   const { t: translate } = useTranslation();
 
   return (
@@ -47,7 +46,6 @@ export const HeaderCard = ({ actions, icon, isRefreshing, state, stats, subTitle
           {state === undefined ? undefined : (
             <StateBadge state={state}>{state ? translate(`common:states.${state}`) : undefined}</StateBadge>
           )}
-          {isRefreshing ? <Spinner /> : <div />}
         </Flex>
         <HStack gap={1}>{actions}</HStack>
       </Flex>

airflow-core/src/airflow/ui/src/pages/Asset/Header.tsx

@@ -24,13 +24,7 @@ import { HeaderCard } from "src/components/HeaderCard";
 
 import { DependencyPopover } from "../AssetsList/DependencyPopover";
 
-export const Header = ({
-  asset,
-  isRefreshing,
-}: {
-  readonly asset?: AssetResponse;
-  readonly isRefreshing?: boolean;
-}) => {
+export const Header = ({ asset }: { readonly asset?: AssetResponse }) => {
   const { t: translate } = useTranslation("assets");
 
   const stats = [
@@ -49,5 +43,5 @@ export const Header = ({
     },
   ];
 
-  return <HeaderCard icon={<FiDatabase />} isRefreshing={isRefreshing} stats={stats} title={asset?.name} />;
+  return <HeaderCard icon={<FiDatabase />} stats={stats} title={asset?.name} />;
 };

airflow-core/src/airflow/ui/src/pages/Dag/Dag.tsx

@@ -119,13 +119,7 @@ export const Dag = () => {
   return (
     <ReactFlowProvider>
       <DetailsLayout error={error ?? runsError} isLoading={isLoading || isLoadingRuns} tabs={displayTabs}>
-        <Header
-          dag={dag}
-          isRefreshing={
-            latestRun ? Boolean(isStatePending(latestRun.state) && Boolean(refetchInterval)) : false
-          }
-          latestRunInfo={latestRun ?? undefined}
-        />
+        <Header dag={dag} latestRunInfo={latestRun ?? undefined} />
       </DetailsLayout>
     </ReactFlowProvider>
   );

airflow-core/src/airflow/ui/src/pages/Dag/Header.tsx

@@ -50,11 +50,9 @@ type LatestRunInfo = {
 
 export const Header = ({
   dag,
-  isRefreshing,
   latestRunInfo,
 }: {
   readonly dag?: DAGDetailsResponse;
-  readonly isRefreshing?: boolean;
   readonly latestRunInfo?: LatestRunInfo;
 }) => {
   const { t: translate } = useTranslation(["common", "dag"]);
@@ -163,7 +161,6 @@ export const Header = ({
         )
       }
       icon={<DagIcon />}
-      isRefreshing={isRefreshing}
       stats={stats}
       subTitle={
         dag !== undefined && (

airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/GroupTaskInstance.tsx

@@ -23,7 +23,6 @@ import { useParams } from "react-router-dom";
 
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { useGridTiSummaries } from "src/queries/useGridTISummaries.ts";
-import { isStatePending, useAutoRefresh } from "src/utils";
 
 import { Header } from "./Header";
 
@@ -33,19 +32,12 @@ export const GroupTaskInstance = () => {
   const { data: gridTISummaries } = useGridTiSummaries({ dagId, runId });
   const taskInstance = gridTISummaries?.task_instances.find((ti) => ti.task_id === groupId);
 
-  const refetchInterval = useAutoRefresh({ dagId });
-
   const tabs = [{ icon: <MdOutlineTask />, label: translate("tabs.taskInstances"), value: "" }];
 
   return (
     <ReactFlowProvider>
       <DetailsLayout tabs={tabs}>
-        {taskInstance === undefined ? undefined : (
-          <Header
-            isRefreshing={Boolean(isStatePending(taskInstance.state) && Boolean(refetchInterval))}
-            taskInstance={taskInstance}
-          />
-        )}
+        {taskInstance === undefined ? undefined : <Header taskInstance={taskInstance} />}
       </DetailsLayout>
     </ReactFlowProvider>
   );

airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx

@@ -27,13 +27,7 @@ import { HeaderCard } from "src/components/HeaderCard";
 import Time from "src/components/Time";
 import { getDuration } from "src/utils";
 
-export const Header = ({
-  isRefreshing,
-  taskInstance,
-}: {
-  readonly isRefreshing?: boolean;
-  readonly taskInstance: LightGridTaskInstanceSummary;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance: LightGridTaskInstanceSummary }) => {
   const { t: translate } = useTranslation();
   const entries: Array<{ label: string; value: number | ReactNode | string }> = [];
 
@@ -62,7 +56,6 @@ export const Header = ({
       <HeaderCard
         actions={<ClearTaskInstanceButton groupTaskInstance={taskInstance} isHotkeyEnabled withText={true} />}
         icon={<MdOutlineTask />}
-        isRefreshing={isRefreshing}
         state={taskInstance.state}
         stats={stats}
         subTitle={<Time datetime={taskInstance.min_start_date} />}

airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/Header.tsx

@@ -26,13 +26,7 @@ import { HeaderCard } from "src/components/HeaderCard";
 import Time from "src/components/Time";
 import { getDuration } from "src/utils";
 
-export const Header = ({
-  isRefreshing,
-  taskInstance,
-}: {
-  readonly isRefreshing?: boolean;
-  readonly taskInstance: LightGridTaskInstanceSummary;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance: LightGridTaskInstanceSummary }) => {
   const { t: translate } = useTranslation();
   const entries: Array<{ label: string; value: number | ReactNode | string }> = [];
   let taskCount: number = 0;
@@ -62,7 +56,6 @@ export const Header = ({
     <Box>
       <HeaderCard
         icon={<MdOutlineTask />}
-        isRefreshing={isRefreshing}
         state={taskInstance.state}
         stats={stats}
         subTitle={<Time datetime={taskInstance.min_start_date} />}

airflow-core/src/airflow/ui/src/pages/MappedTaskInstance/MappedTaskInstance.tsx

@@ -23,13 +23,11 @@ import { useParams } from "react-router-dom";
 
 import { DetailsLayout } from "src/layouts/Details/DetailsLayout";
 import { useGridTiSummaries } from "src/queries/useGridTISummaries.ts";
-import { isStatePending, useAutoRefresh } from "src/utils";
 
 import { Header } from "./Header";
 
 export const MappedTaskInstance = () => {
   const { dagId = "", runId = "", taskId = "" } = useParams();
-  const refetchInterval = useAutoRefresh({ dagId });
   const { t: translate } = useTranslation("dag");
   const { data: gridTISummaries } = useGridTiSummaries({ dagId, runId });
 
@@ -47,12 +45,7 @@ export const MappedTaskInstance = () => {
   return (
     <ReactFlowProvider>
       <DetailsLayout tabs={tabs}>
-        {taskInstance === undefined ? undefined : (
-          <Header
-            isRefreshing={Boolean(isStatePending(taskInstance.state) && Boolean(refetchInterval))}
-            taskInstance={taskInstance}
-          />
-        )}
+        {taskInstance === undefined ? undefined : <Header taskInstance={taskInstance} />}
       </DetailsLayout>
     </ReactFlowProvider>
   );

airflow-core/src/airflow/ui/src/pages/Run/Header.tsx

@@ -37,13 +37,7 @@ import DeleteRunButton from "src/pages/DeleteRunButton";
 import { usePatchDagRun } from "src/queries/usePatchDagRun";
 import { getDuration, useContainerWidth } from "src/utils";
 
-export const Header = ({
-  dagRun,
-  isRefreshing,
-}: {
-  readonly dagRun: DAGRunResponse;
-  readonly isRefreshing?: boolean;
-}) => {
+export const Header = ({ dagRun }: { readonly dagRun: DAGRunResponse }) => {
   const { t: translate } = useTranslation();
   const [note, setNote] = useState<string | null>(dagRun.note);
 
@@ -113,7 +107,6 @@ export const Header = ({
           </>
         }
         icon={<FiBarChart />}
-        isRefreshing={isRefreshing}
         state={dagRun.state}
         stats={[
           ...(dagRun.logical_date === null

airflow-core/src/airflow/ui/src/pages/Run/Run.tsx

@@ -71,12 +71,7 @@ export const Run = () => {
   return (
     <ReactFlowProvider>
       <DetailsLayout error={error} isLoading={isLoading} tabs={displayTabs}>
-        {dagRun === undefined ? undefined : (
-          <Header
-            dagRun={dagRun}
-            isRefreshing={Boolean(isStatePending(dagRun.state) && Boolean(refetchInterval))}
-          />
-        )}
+        {dagRun === undefined ? undefined : <Header dagRun={dagRun} />}
       </DetailsLayout>
     </ReactFlowProvider>
   );

airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx

@@ -32,13 +32,7 @@ import Time from "src/components/Time";
 import { usePatchTaskInstance } from "src/queries/usePatchTaskInstance";
 import { renderDuration, useContainerWidth } from "src/utils";
 
-export const Header = ({
-  isRefreshing,
-  taskInstance,
-}: {
-  readonly isRefreshing?: boolean;
-  readonly taskInstance: TaskInstanceResponse;
-}) => {
+export const Header = ({ taskInstance }: { readonly taskInstance: TaskInstanceResponse }) => {
   const { t: translate } = useTranslation();
   const containerRef = useRef<HTMLDivElement>();
   const containerWidth = useContainerWidth(containerRef);
@@ -127,7 +121,6 @@ export const Header = ({
           </>
         }
         icon={<MdOutlineTask />}
-        isRefreshing={isRefreshing}
         state={taskInstance.state}
         stats={stats}
         title={`${taskInstance.task_display_name}${taskInstance.map_index > -1 ? ` [${taskInstance.rendered_map_index ?? taskInstance.map_index}]` : ""}`}

airflow-core/src/airflow/ui/src/pages/TaskInstance/TaskInstance.tsx

@@ -116,10 +116,7 @@ export const TaskInstance = () => {
             {translate("common:noItemsFound", { modelName: translate("common:taskInstance_one") })}
           </Heading>
         ) : (
-          <Header
-            isRefreshing={Boolean(isStatePending(taskInstance.state) && Boolean(refetchInterval))}
-            taskInstance={taskInstance}
-          />
+          <Header taskInstance={taskInstance} />
         )}
       </DetailsLayout>
     </ReactFlowProvider>