feat: peek overview for spreadsheet issues (#1979)

* feat: peak overview for issues

* fix: peek spelling

* chore: truncate issue property labels

* style: full screen view designed

* chore: add comment section

* chore: copy link and delete options added

* chore: update icons

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -9,26 +9,16 @@ import projectService from "services/project.service";
 // ui
 import { CustomSearchSelect } from "components/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
-// types
-import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   value: string[];
   onChange: (val: string[]) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarAssigneeSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -50,36 +40,27 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({
     ),
   }));
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Assignees</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSearchSelect
-          value={value}
-          label={
-            <div className="flex items-center gap-2 text-custom-text-200">
-              {value && value.length > 0 && Array.isArray(value) ? (
-                <div className="-my-0.5 flex items-center justify-center gap-2">
-                  <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-custom-text-100">{value.length} Assignees</span>
-                </div>
-              ) : (
-                "No assignees"
-              )}
+    <CustomSearchSelect
+      value={value}
+      customButton={
+        <>
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="-my-0.5 flex items-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={false} />
+              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
             </div>
-          }
-          options={options}
-          onChange={onChange}
-          position="right"
-          multiple
-          disabled={isNotAllowed}
-        />
-      </div>
-    </div>
+          ) : (
+            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
+              No assignees
+            </button>
+          )}
+        </>
+      }
+      options={options}
+      onChange={onChange}
+      multiple
+      disabled={disabled}
+    />
   );
 };

apps/app/components/issues/sidebar-select/estimate.tsx

@@ -6,75 +6,56 @@ import useEstimateOption from "hooks/use-estimate-option";
 import { CustomSelect } from "components/ui";
 // icons
 import { PlayIcon } from "@heroicons/react/24/outline";
-// types
-import { UserAuth } from "types";
 
 type Props = {
   value: number | null;
   onChange: (val: number | null) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarEstimateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const { isEstimateActive, estimatePoints } = useEstimateOption();
 
   if (!isEstimateActive) return null;
 
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-        <p>Estimate</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          value={value}
-          label={
-            <div className="flex items-center gap-2 text-xs">
-              <PlayIcon
-                className={`h-4 w-4 -rotate-90 ${
-                  value !== null ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              />
-              {estimatePoints?.find((e) => e.key === value)?.value ?? (
-                <span className="text-custom-text-200">No estimates</span>
-              )}
-            </div>
-          }
-          onChange={onChange}
-          position="right"
-          width="w-full"
-          disabled={isNotAllowed || disabled}
+    <CustomSelect
+      value={value}
+      customButton={
+        <button
+          type="button"
+          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
         >
-          <CustomSelect.Option value={null}>
+          <PlayIcon
+            className={`h-4 w-4 -rotate-90 ${
+              value !== null ? "text-custom-text-100" : "text-custom-text-200"
+            }`}
+          />
+          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
+        </button>
+      }
+      onChange={onChange}
+      disabled={disabled}
+    >
+      <CustomSelect.Option value={null}>
+        <>
+          <span>
+            <PlayIcon className="h-4 w-4 -rotate-90" />
+          </span>
+          None
+        </>
+      </CustomSelect.Option>
+      {estimatePoints &&
+        estimatePoints.map((point) => (
+          <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
                 <PlayIcon className="h-4 w-4 -rotate-90" />
               </span>
-              None
+              {point.value}
             </>
           </CustomSelect.Option>
-          {estimatePoints &&
-            estimatePoints.map((point) => (
-              <CustomSelect.Option key={point.key} value={point.key}>
-                <>
-                  <span>
-                    <PlayIcon className="h-4 w-4 -rotate-90" />
-                  </span>
-                  {point.value}
-                </>
-              </CustomSelect.Option>
-            ))}
-        </CustomSelect>
-      </div>
-    </div>
+        ))}
+    </CustomSelect>
   );
 };

apps/app/components/issues/sidebar-select/priority.tsx

@@ -3,62 +3,51 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon } from "components/icons/priority-icon";
-// types
-import { UserAuth } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
 type Props = {
   value: string | null;
   onChange: (val: string) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarPrioritySelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
-  return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-        <p>Priority</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          label={
-            <div className="flex items-center gap-2 text-left capitalize">
-              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                {getPriorityIcon(value ?? "None", "text-sm")}
-              </span>
-              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
-                {value ?? "None"}
-              </span>
-            </div>
-          }
-          value={value}
-          onChange={onChange}
-          width="w-full"
-          position="right"
-          disabled={isNotAllowed}
-        >
-          {PRIORITIES.map((option) => (
-            <CustomSelect.Option key={option} value={option} className="capitalize">
-              <>
-                {getPriorityIcon(option, "text-sm")}
-                {option ?? "None"}
-              </>
-            </CustomSelect.Option>
-          ))}
-        </CustomSelect>
-      </div>
-    </div>
-  );
-};
+export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
+  <CustomSelect
+    customButton={
+      <button
+        type="button"
+        className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
+          value === "urgent"
+            ? "border-red-500/20 bg-red-500/20 text-red-500"
+            : value === "high"
+            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+            : value === "medium"
+            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+            : value === "low"
+            ? "border-green-500/20 bg-green-500/20 text-green-500"
+            : "bg-custom-background-80 border-custom-border-200"
+        }`}
+      >
+        <span className="grid place-items-center -my-1">
+          {getPriorityIcon(value ?? "None", "!text-sm")}
+        </span>
+        <span>{value ?? "None"}</span>
+      </button>
+    }
+    value={value}
+    onChange={onChange}
+    optionsClassName="w-min"
+    disabled={disabled}
+  >
+    {PRIORITIES.map((option) => (
+      <CustomSelect.Option key={option} value={option} className="capitalize">
+        <>
+          {getPriorityIcon(option, "text-sm")}
+          {option ?? "None"}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);

apps/app/components/issues/sidebar-select/state.tsx

@@ -9,29 +9,20 @@ import stateService from "services/state.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { UserAuth } from "types";
 // constants
 import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   value: string;
   onChange: (val: string) => void;
-  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarStateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
 
@@ -45,60 +36,52 @@ export const SidebarStateSelect: React.FC<Props> = ({
 
   const selectedState = states?.find((s) => s.id === value);
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
   return (
-    <div className="flex flex-wrap items-center py-2">
-      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-        <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-        <p>State</p>
-      </div>
-      <div className="sm:basis-1/2">
-        <CustomSelect
-          label={
-            selectedState ? (
-              <div className="flex items-center gap-2 text-left text-custom-text-100">
-                {getStateGroupIcon(
-                  selectedState?.group ?? "backlog",
-                  "16",
-                  "16",
-                  selectedState?.color ?? ""
-                )}
-                {addSpaceIfCamelCase(selectedState?.name ?? "")}
-              </div>
-            ) : inboxIssueId ? (
-              <div className="flex items-center gap-2 text-left text-custom-text-100">
-                {getStateGroupIcon("backlog", "16", "16", "#ff7700")}
-                Triage
-              </div>
-            ) : (
-              "None"
-            )
-          }
-          value={value}
-          onChange={onChange}
-          width="w-full"
-          position="right"
-          disabled={isNotAllowed}
-        >
-          {states ? (
-            states.length > 0 ? (
-              states.map((state) => (
-                <CustomSelect.Option key={state.id} value={state.id}>
-                  <>
-                    {getStateGroupIcon(state.group, "16", "16", state.color)}
-                    {state.name}
-                  </>
-                </CustomSelect.Option>
-              ))
-            ) : (
-              <div className="text-center">No states found</div>
-            )
+    <CustomSelect
+      customButton={
+        <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
+          {selectedState ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              {getStateGroupIcon(
+                selectedState?.group ?? "backlog",
+                "14",
+                "14",
+                selectedState?.color ?? ""
+              )}
+              {addSpaceIfCamelCase(selectedState?.name ?? "")}
+            </div>
+          ) : inboxIssueId ? (
+            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
+              {getStateGroupIcon("backlog", "14", "14", "#ff7700")}
+              Triage
+            </div>
           ) : (
-            <Spinner />
+            "None"
           )}
-        </CustomSelect>
-      </div>
-    </div>
+        </button>
+      }
+      value={value}
+      onChange={onChange}
+      optionsClassName="w-min"
+      position="left"
+      disabled={disabled}
+    >
+      {states ? (
+        states.length > 0 ? (
+          states.map((state) => (
+            <CustomSelect.Option key={state.id} value={state.id}>
+              <>
+                {getStateGroupIcon(state.group, "16", "16", state.color)}
+                {state.name}
+              </>
+            </CustomSelect.Option>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </CustomSelect>
   );
 };