chore: workspace level toggle (#1625)

apps/app/components/core/issues-view.tsx

@@ -31,7 +31,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
 import { TransferIssues, TransferIssuesModal } from "components/cycles";
 // ui
-import { EmptyState, PrimaryButton, Spinner, Icon } from "components/ui";
+import { EmptyState, PrimaryButton, Spinner, SecondaryButton } from "components/ui";
 // icons
 import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
 // images
@@ -601,6 +601,17 @@ export const IssuesView: React.FC<Props> = ({
               image={emptyIssue}
               buttonText="New Issue"
               buttonIcon={<PlusIcon className="h-4 w-4" />}
+              secondaryButton={
+                cycleId || moduleId ? (
+                  <SecondaryButton
+                    className="flex items-center gap-1.5"
+                    onClick={openIssuesListModal}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add an existing issue
+                  </SecondaryButton>
+                ) : null
+              }
               onClick={() => {
                 const e = new KeyboardEvent("keydown", {
                   key: "c",

apps/app/components/core/modals/existing-issues-list-modal.tsx

@@ -33,6 +33,7 @@ type Props = {
   handleClose: () => void;
   searchParams: Partial<TProjectIssuesSearchParams>;
   handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
+  workspaceLevelToggle?: boolean;
 };
 
 export const ExistingIssuesListModal: React.FC<Props> = ({
@@ -40,6 +41,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
   handleClose: onClose,
   searchParams,
   handleOnSubmit,
+  workspaceLevelToggle = false,
 }) => {
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
@@ -194,25 +196,27 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         No issues selected
                       </div>
                     )}
-                    <Tooltip tooltipContent="Toggle workspace level search">
-                      <div
-                        className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
-                          isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
-                        }`}
-                      >
-                        <ToggleSwitch
-                          value={isWorkspaceLevel}
-                          onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          className="flex-shrink-0"
+                    {workspaceLevelToggle && (
+                      <Tooltip tooltipContent="Toggle workspace level search">
+                        <div
+                          className={`flex-shrink-0 flex items-center gap-1 text-xs cursor-pointer ${
+                            isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
+                          }`}
                         >
-                          workspace level
-                        </button>
-                      </div>
-                    </Tooltip>
+                          <ToggleSwitch
+                            value={isWorkspaceLevel}
+                            onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                            className="flex-shrink-0"
+                          >
+                            workspace level
+                          </button>
+                        </div>
+                      </Tooltip>
+                    )}
                   </div>
 
                   <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">

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

@@ -82,6 +82,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         handleClose={() => setIsBlockedModalOpen(false)}
         searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
+        workspaceLevelToggle
       />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">

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

@@ -82,6 +82,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         handleClose={() => setIsBlockerModalOpen(false)}
         searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
+        workspaceLevelToggle
       />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">

apps/app/components/issues/sub-issues-list.tsx

@@ -115,6 +115,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }
         handleClose={() => setSubIssuesListModal(false)}
         searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
         handleOnSubmit={addAsSubIssue}
+        workspaceLevelToggle
       />
       {subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (
         <Disclosure defaultOpen={true}>

apps/app/components/ui/empty-state.tsx

@@ -11,6 +11,7 @@ type Props = {
   image: any;
   buttonText?: string;
   buttonIcon?: any;
+  secondaryButton?: React.ReactNode;
   onClick?: () => void;
   isFullScreen?: boolean;
 };
@@ -22,6 +23,7 @@ export const EmptyState: React.FC<Props> = ({
   onClick,
   buttonText,
   buttonIcon,
+  secondaryButton,
   isFullScreen = true,
 }) => (
   <div
@@ -33,12 +35,15 @@ export const EmptyState: React.FC<Props> = ({
       <Image src={image} className="w-52 sm:w-60" alt={buttonText} />
       <h6 className="text-xl font-semibold mt-6 sm:mt-8 mb-3">{title}</h6>
       <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>
-      {buttonText && (
-        <PrimaryButton className="flex items-center gap-1.5" onClick={onClick}>
-          {buttonIcon}
-          {buttonText}
-        </PrimaryButton>
-      )}
+      <div className="flex items-center gap-4">
+        {buttonText && (
+          <PrimaryButton className="flex items-center gap-1.5" onClick={onClick}>
+            {buttonIcon}
+            {buttonText}
+          </PrimaryButton>
+        )}
+        {secondaryButton}
+      </div>
     </div>
   </div>
 );