From 1b2812591938d1c2f5c273ec7e55c3066127a87c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:29:50 +0530
Subject: [PATCH] chore: workspace view order by removed (#2303)

---
 .../spreadsheet-view/spreadsheet-view.tsx     | 385 +++++++++---------
 1 file changed, 194 insertions(+), 191 deletions(-)

diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 538ad5743..7852a5a9d 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -234,8 +234,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (!globalViewId || !currentWorkspaceIssuePath)
-      handleFilters("display_filters", { order_by: order });
+    if (globalViewId) handleFilters("display_filters", { order_by: order });
     else setDisplayFilters({ order_by: order });
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
@@ -250,199 +249,203 @@ export const SpreadsheetView: React.FC<Props> = ({
   ) => (
     <div className="relative flex flex-col h-max w-full bg-custom-background-100">
       <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-        <CustomMenu
-          customButtonClassName="!w-full"
-          className="!w-full"
-          position="left"
-          customButton={
-            <div
-              className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
-                activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
-              }`}
-            >
-              {activeSortingProperty === propertyName && (
-                <div className="absolute top-1 right-1.5">
-                  <Icon
-                    iconName="filter_list"
-                    className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                  />
-                </div>
-              )}
-
-              {header}
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </div>
-          }
-          width="xl"
-        >
-          <CustomMenu.MenuItem
-            onClick={() => {
-              handleOrderBy(ascendingOrder, propertyName);
-            }}
-          >
-            <div
-              className={`group flex gap-1.5 px-1 items-center justify-between ${
-                selectedMenuItem === `${ascendingOrder}_${propertyName}`
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
-              }`}
-            >
-              <div className="flex gap-2 items-center">
-                {propertyName === "assignee" || propertyName === "labels" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>A</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Z</span>
-                  </>
-                ) : propertyName === "due_date" ||
-                  propertyName === "created_on" ||
-                  propertyName === "updated_on" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>New</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Old</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 rotate-90 text-xs leading-3"
-                      />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
-                    <span>First</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>Last</span>
-                  </>
-                )}
-              </div>
-
-              <CheckIcon
-                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                  selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+        {currentWorkspaceIssuePath ? (
+          <span>{header}</span>
+        ) : (
+          <CustomMenu
+            customButtonClassName="!w-full"
+            className="!w-full"
+            position="left"
+            customButton={
+              <div
+                className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
+                  activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
                 }`}
-              />
-            </div>
-          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            className={`mt-0.5 ${
-              selectedMenuItem === `${descendingOrder}_${propertyName}`
-                ? "bg-custom-background-80"
-                : ""
-            }`}
-            key={propertyName}
-            onClick={() => {
-              handleOrderBy(descendingOrder, propertyName);
-            }}
-          >
-            <div
-              className={`group flex gap-1.5 px-1 items-center justify-between ${
-                selectedMenuItem === `${descendingOrder}_${propertyName}`
-                  ? "text-custom-text-100"
-                  : "text-custom-text-200 hover:text-custom-text-100"
-              }`}
-            >
-              <div className="flex gap-2 items-center">
-                {propertyName === "assignee" || propertyName === "labels" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Z</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>A</span>
-                  </>
-                ) : propertyName === "due_date" ? (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Old</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>New</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon
-                        iconName="east"
-                        className="absolute left-0 -rotate-90 text-xs leading-3"
-                      />
-                      <Icon
-                        iconName="sort"
-                        className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                      />
-                    </span>
-                    <span>Last</span>
-                    <Icon iconName="east" className="text-sm" />
-                    <span>First</span>
-                  </>
-                )}
-              </div>
-
-              <CheckIcon
-                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                  selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
-                }`}
-              />
-            </div>
-          </CustomMenu.MenuItem>
-          {selectedMenuItem &&
-            selectedMenuItem !== "" &&
-            displayFilters?.order_by !== "-created_at" &&
-            selectedMenuItem.includes(propertyName) && (
-              <CustomMenu.MenuItem
-                className={`mt-0.5${
-                  selectedMenuItem === `-created_at_${propertyName}`
-                    ? "bg-custom-background-80"
-                    : ""
-                }`}
-                key={propertyName}
-                onClick={() => {
-                  handleOrderBy("-created_at", propertyName);
-                }}
               >
-                <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
-                  <div className="flex gap-1.5 items-center">
-                    <span className="relative flex items-center justify-center h-6 w-6">
-                      <Icon iconName="ink_eraser" className="text-sm" />
-                    </span>
-
-                    <span>Clear sorting</span>
+                {activeSortingProperty === propertyName && (
+                  <div className="absolute top-1 right-1.5">
+                    <Icon
+                      iconName="filter_list"
+                      className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
+                    />
                   </div>
+                )}
+
+                {header}
+                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+              </div>
+            }
+            width="xl"
+          >
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleOrderBy(ascendingOrder, propertyName);
+              }}
+            >
+              <div
+                className={`group flex gap-1.5 px-1 items-center justify-between ${
+                  selectedMenuItem === `${ascendingOrder}_${propertyName}`
+                    ? "text-custom-text-100"
+                    : "text-custom-text-200 hover:text-custom-text-100"
+                }`}
+              >
+                <div className="flex gap-2 items-center">
+                  {propertyName === "assignee" || propertyName === "labels" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>A</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Z</span>
+                    </>
+                  ) : propertyName === "due_date" ||
+                    propertyName === "created_on" ||
+                    propertyName === "updated_on" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>New</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Old</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 rotate-90 text-xs leading-3"
+                        />
+                        <Icon iconName="sort" className="absolute right-0 text-sm" />
+                      </span>
+                      <span>First</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>Last</span>
+                    </>
+                  )}
                 </div>
-              </CustomMenu.MenuItem>
-            )}
-        </CustomMenu>
+
+                <CheckIcon
+                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                    selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+                  }`}
+                />
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              className={`mt-0.5 ${
+                selectedMenuItem === `${descendingOrder}_${propertyName}`
+                  ? "bg-custom-background-80"
+                  : ""
+              }`}
+              key={propertyName}
+              onClick={() => {
+                handleOrderBy(descendingOrder, propertyName);
+              }}
+            >
+              <div
+                className={`group flex gap-1.5 px-1 items-center justify-between ${
+                  selectedMenuItem === `${descendingOrder}_${propertyName}`
+                    ? "text-custom-text-100"
+                    : "text-custom-text-200 hover:text-custom-text-100"
+                }`}
+              >
+                <div className="flex gap-2 items-center">
+                  {propertyName === "assignee" || propertyName === "labels" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Z</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>A</span>
+                    </>
+                  ) : propertyName === "due_date" ? (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Old</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>New</span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="relative flex items-center h-6 w-6">
+                        <Icon
+                          iconName="east"
+                          className="absolute left-0 -rotate-90 text-xs leading-3"
+                        />
+                        <Icon
+                          iconName="sort"
+                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                        />
+                      </span>
+                      <span>Last</span>
+                      <Icon iconName="east" className="text-sm" />
+                      <span>First</span>
+                    </>
+                  )}
+                </div>
+
+                <CheckIcon
+                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                    selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
+                  }`}
+                />
+              </div>
+            </CustomMenu.MenuItem>
+            {selectedMenuItem &&
+              selectedMenuItem !== "" &&
+              displayFilters?.order_by !== "-created_at" &&
+              selectedMenuItem.includes(propertyName) && (
+                <CustomMenu.MenuItem
+                  className={`mt-0.5${
+                    selectedMenuItem === `-created_at_${propertyName}`
+                      ? "bg-custom-background-80"
+                      : ""
+                  }`}
+                  key={propertyName}
+                  onClick={() => {
+                    handleOrderBy("-created_at", propertyName);
+                  }}
+                >
+                  <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                    <div className="flex gap-1.5 items-center">
+                      <span className="relative flex items-center justify-center h-6 w-6">
+                        <Icon iconName="ink_eraser" className="text-sm" />
+                      </span>
+
+                      <span>Clear sorting</span>
+                    </div>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+          </CustomMenu>
+        )}
       </div>
       <div className="h-full min-w-[9rem] w-full">
         {spreadsheetIssues.map((issue: IIssue, index) => (