Tasks indicator for the current branch (#4873)

* add pulse component

* add tasks link with status indicator

* fix indicator

* update tooltip

Author: pa-lem

frontend/app/src/components/ui/pulse.tsx

@@ -0,0 +1,14 @@
+import { classNames } from "@/utils/common";
+
+interface PulseProps {
+  className?: string;
+}
+
+export function Pulse({ className }: PulseProps) {
+  return (
+    <span className={classNames("absolute flex h-2 w-2", className)}>
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-custom-blue-500 opacity-75"></span>
+      <span className="relative inline-flex rounded-full h-2 w-2 bg-custom-blue-700"></span>
+    </span>
+  );
+}

frontend/app/src/config/constants.tsx

@@ -65,6 +65,8 @@ export const NUMBER_POOL_OBJECT = "CoreNumberPool";
 
 export const TASK_OBJECT = "InfrahubTask";
 
+export const TASKS_STATUS_OBJECT = "InfrahubTaskBranchStatus";
+
 export const ADMIN_ROLES = ["admin"];
 
 export const MENU_EXCLUDELIST = [

frontend/app/src/graphql/queries/tasks/getTasksStatus.ts

@@ -0,0 +1,9 @@
+import { gql } from "@apollo/client";
+
+export const TASKS_STATUS = gql`
+query TASKS_STATUS($branch: String!) {
+  InfrahubTaskBranchStatus(branch: $branch){
+    count
+  }
+}
+`;

frontend/app/src/images/icons/tasks-status.svg

@@ -4,6 +4,7 @@ import InfrahubLogo from "@/images/infrahub-logo.svg";
 import BreadcrumbNavigation from "@/screens/layout/breadcrumb-navigation/breadcrumb-navigation";
 import { constructPath } from "@/utils/fetch";
 import { Link } from "react-router-dom";
+import { TaskStatus } from "./tasks-status";
 
 export default function Header() {
   return (
@@ -16,7 +17,11 @@ export default function Header() {
 
       <BranchSelector />
 
-      <BreadcrumbNavigation />
+      <div className="flex-1">
+        <BreadcrumbNavigation />
+      </div>
+
+      <TaskStatus />
     </header>
   );
 }

frontend/app/src/screens/layout/header.tsx

@@ -0,0 +1,45 @@
+import { ButtonWithTooltip } from "@/components/buttons/button-primitive";
+import { Pulse } from "@/components/ui/pulse";
+import { Spinner } from "@/components/ui/spinner";
+import { TASKS_STATUS_OBJECT } from "@/config/constants";
+import { TASKS_STATUS } from "@/graphql/queries/tasks/getTasksStatus";
+import useQuery from "@/hooks/useQuery";
+import { ReactComponent as TasksStatusIcon } from "@/images/icons/tasks-status.svg";
+import { currentBranchAtom } from "@/state/atoms/branches.atom";
+import { constructPath } from "@/utils/fetch";
+import { Icon } from "@iconify-icon/react";
+import { useAtomValue } from "jotai";
+import { Link } from "react-router-dom";
+
+export function TaskStatus() {
+  const branch = useAtomValue(currentBranchAtom);
+
+  const { error, loading, data } = useQuery(TASKS_STATUS, {
+    variables: { branch: branch?.name },
+    pollInterval: 1000,
+  });
+
+  if (error) {
+    return <Icon icon="mdi:error-outline" className="text-red-500" />;
+  }
+
+  const count = data && data[TASKS_STATUS_OBJECT]?.count;
+
+  return (
+    <Link to={constructPath("/tasks")}>
+      <ButtonWithTooltip
+        size="square"
+        variant="ghost"
+        className="h-8 w-8 bg-neutral-50 border border-neutral-200 rounded-lg relative"
+        tooltipEnabled
+        tooltipContent={"Tasks"}
+      >
+        {loading && <Spinner />}
+
+        {!loading && <TasksStatusIcon />}
+
+        {!loading && count > 0 && <Pulse className="right-[6.5px] bottom-[6.5px]" />}
+      </ButtonWithTooltip>
+    </Link>
+  );
+}