From 8c1f169f610db3c10d21291d67043005123a6377 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 23 Feb 2024 19:08:50 +0530
Subject: [PATCH] chore: workspace view header scroll to view improvement
 (#3771)

---
 web/components/workspace/views/header.tsx | 42 +++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index faa710131..223fda13c 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
@@ -24,9 +24,8 @@ const ViewTab = observer((props: { viewId: string }) => {
   if (!view) return null;
 
   return (
-    <Link key={viewId} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
+    <Link key={viewId} id={`global-view-${viewId}`} href={`/${workspaceSlug}/workspace-views/${viewId}`}>
       <span
-        id={`global-view-${viewId}`}
         className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
           viewId === globalViewId
             ? "border-custom-primary-100 text-custom-primary-100"
@@ -42,6 +41,7 @@ const ViewTab = observer((props: { viewId: string }) => {
 export const GlobalViewsHeader: React.FC = observer(() => {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
@@ -54,19 +54,22 @@ export const GlobalViewsHeader: React.FC = observer(() => {
 
   // bring the active view to the centre of the header
   useEffect(() => {
-    if (!globalViewId) return;
-
-    captureEvent(GLOBAL_VIEW_OPENED, {
-      view_id: globalViewId,
-      view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
-        ? "Default"
-        : "Custom",
-    });
-
-    const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
-
-    if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
-  }, [globalViewId]);
+    if (globalViewId && currentWorkspaceViews) {
+      captureEvent(GLOBAL_VIEW_OPENED, {
+        view_id: globalViewId,
+        view_type: ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId.toString())
+          ? "Default"
+          : "Custom",
+      });
+      const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
+      if (activeTabElement && containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const activeTabRect = activeTabElement.getBoundingClientRect();
+        const diff = containerRect.right - activeTabRect.right;
+        activeTabElement.scrollIntoView({ behavior: "smooth", inline: diff > 500 ? "center" : "nearest" });
+      }
+    }
+  }, [globalViewId, currentWorkspaceViews, containerRef]);
 
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -74,9 +77,12 @@ export const GlobalViewsHeader: React.FC = observer(() => {
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div className="group relative flex border-b border-custom-border-200">
-        <div className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm">
+        <div
+          ref={containerRef}
+          className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
+        >
           {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
-            <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
+            <Link key={tab.key} id={`global-view-${tab.key}`} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
               <span
                 className={`flex min-w-min flex-shrink-0 whitespace-nowrap border-b-2 p-3 text-sm font-medium outline-none ${
                   tab.key === globalViewId