makeplane · vamsi · Jan 10, 2023 · Dec 27, 2022 · Dec 27, 2022 · Dec 27, 2022
diff --git a/apps/app/components/command-palette/index.tsx b/apps/app/components/command-palette/index.tsx
@@ -59,7 +59,9 @@ const CommandPalette: React.FC = () => {
   );
 
   const router = useRouter();
-
+  const {
+    query: { workspaceSlug },
+  } = router;
   const { toggleCollapsed } = useTheme();
 
   const { setToastAlert } = useToast();
@@ -245,7 +247,7 @@ const CommandPalette: React.FC = () => {
                                 htmlFor={`issue-${issue.id}`}
                                 value={{
                                   name: issue.name,
-                                  url: `/projects/${issue.project}/issues/${issue.id}`,
+                                  url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
                                 }}
                                 className={({ active }) =>
                                   classNames(

diff --git a/apps/app/components/common/board-view/single-issue.tsx b/apps/app/components/common/board-view/single-issue.tsx
@@ -2,6 +2,7 @@ import React from "react";
 // next
 import Link from "next/link";
 import Image from "next/image";
+import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
 // react-beautiful-dnd
@@ -55,6 +56,10 @@ const SingleBoardIssue: React.FC<Props> = ({
   partialUpdateIssue,
 }) => {
   const { activeProject, activeWorkspace } = useUser();
+  const router = useRouter();
+  const {
+    query: { workspaceSlug },
+  } = router;
 
   const { data: issues } = useSWR<IssueResponse>(
     activeWorkspace && activeProject
@@ -92,7 +97,7 @@ const SingleBoardIssue: React.FC<Props> = ({
             </button>
           </div>
         )}
-        <Link href={`/projects/${issue.project}/issues/${issue.id}`}>
+        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
           <a>
             {properties.key && (
               <div className="mb-2 text-xs font-medium text-gray-500">

diff --git a/apps/app/components/common/bulk-delete-issues-modal.tsx b/apps/app/components/common/bulk-delete-issues-modal.tsx
@@ -1,5 +1,7 @@
 // react
 import React, { useState } from "react";
+// next
+import { useRouter } from "next/router";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
@@ -35,6 +37,12 @@ type Props = {
 const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const [query, setQuery] = useState("");
 
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { activeWorkspace, activeProject } = useUser();
 
   const { data: issues } = useSWR(
@@ -164,7 +172,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                   htmlFor={`issue-${issue.id}`}
                                   value={{
                                     name: issue.name,
-                                    url: `/projects/${issue.project}/issues/${issue.id}`,
+                                    url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
                                   }}
                                   className={({ active }) =>
                                     classNames(

diff --git a/apps/app/components/common/list-view/single-issue.tsx b/apps/app/components/common/list-view/single-issue.tsx
@@ -1,5 +1,6 @@
 // next
 import Link from "next/link";
+import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
 // hooks
@@ -40,6 +41,12 @@ const SingleListIssue: React.FC<Props> = ({
 }) => {
   const { activeWorkspace, activeProject } = useUser();
 
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { data: issues } = useSWR<IssueResponse>(
     activeWorkspace && activeProject
       ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
@@ -63,7 +70,7 @@ const SingleListIssue: React.FC<Props> = ({
             backgroundColor: issue.state_detail.color,
           }}
         />
-        <Link href={`/projects/${activeProject?.id}/issues/${issue.id}`}>
+        <Link href={`/${workspaceSlug}/projects/${activeProject?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties.key && (
               <span className="flex-shrink-0 text-xs text-gray-500">

diff --git a/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx b/apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
@@ -1,5 +1,7 @@
 // react
 import { useEffect } from "react";
+// next
+import { useRouter } from "next/router";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // hooks
@@ -37,6 +39,11 @@ const defaultValues: Partial<ICycle> = {
 const CycleDetailSidebar: React.FC<Props> = ({ cycle, cycleIssues }) => {
   const { activeWorkspace, activeProject } = useUser();
 
+  const router = useRouter();
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { setToastAlert } = useToast();
 
   const { reset, watch, control } = useForm({
@@ -87,7 +94,7 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, cycleIssues }) => {
                 className="rounded-md border p-2 shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                 onClick={() =>
                   copyTextToClipboard(
-                    `https://app.plane.so/projects/${activeProject?.id}/cycles/${cycle.id}`
+                    `https://app.plane.so/${workspaceSlug}/projects/${activeProject?.id}/cycles/${cycle.id}`
                   )
                     .then(() => {
                       setToastAlert({

diff --git a/apps/app/components/project/cycles/stats-view/single-stat.tsx b/apps/app/components/project/cycles/stats-view/single-stat.tsx
@@ -117,7 +117,9 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
               <Button
                 theme="secondary"
                 className="flex items-center gap-2"
-                onClick={() => router.push(`/projects/${activeProject?.id}/cycles/${cycle.id}`)}
+                onClick={() =>
+                  router.push(`/${workspaceSlug}/projects/${activeProject?.id}/cycles/${cycle.id}`)
+                }
               >
                 <ArrowPathIcon className="h-3 w-3" />
                 Open Cycle

diff --git a/apps/app/components/project/issues/create-update-issue-modal/index.tsx b/apps/app/components/project/issues/create-update-issue-modal/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 // next
 import Link from "next/link";
 import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
 // swr
 import useSWR, { mutate } from "swr";
 // react hook form
@@ -75,6 +76,12 @@ const CreateUpdateIssuesModal: React.FC<Props> = (props) => {
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
   const [mostSimilarIssue, setMostSimilarIssue] = useState<string | undefined>();
 
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { setToastAlert } = useToast();
   const { activeWorkspace, activeProject, user } = useUser();
 
@@ -321,7 +328,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = (props) => {
                               <div className="flex items-center gap-x-2">
                                 <p className="text-sm text-gray-500">
                                   <Link
-                                    href={`/projects/${activeProject?.id}/issues/${mostSimilarIssue}`}
+                                    href={`/${workspaceSlug}/projects/${activeProject?.id}/issues/${mostSimilarIssue}`}
                                   >
                                     <a target="_blank" type="button" className="inline text-left">
                                       <span>Did you mean </span>

diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+// next
+import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
 // react hook form
@@ -63,6 +65,12 @@ const IssueDetailSidebar: React.FC<Props> = ({
 
   const { activeWorkspace, activeProject } = useUser();
 
+  const router = useRouter();
+
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { setToastAlert } = useToast();
 
   const { data: issues } = useSWR(
@@ -138,7 +146,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
               className="rounded-md border p-2 shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
               onClick={() =>
                 copyTextToClipboard(
-                  `https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
+                  `https://app.plane.so/${workspaceSlug}/projects/${activeProject?.id}/issues/${issueDetail?.id}`
                 )
                   .then(() => {
                     setToastAlert({

diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 // next
 import Link from "next/link";
+import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
 // react-hook-form
@@ -40,6 +41,11 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issueDetail, issuesList
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
+  const router = useRouter();
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { activeWorkspace, activeProject } = useUser();
   const { setToastAlert } = useToast();
 
@@ -99,7 +105,7 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issueDetail, issuesList
                   }}
                 >
                   <Link
-                    href={`/projects/${activeProject?.id}/issues/${
+                    href={`/${workspaceSlug}/projects/${activeProject?.id}/issues/${
                       issues?.results.find((i) => i.id === issue)?.id
                     }`}
                   >
@@ -186,7 +192,7 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issueDetail, issuesList
                                         htmlFor={`issue-${issue.id}`}
                                         value={{
                                           name: issue.name,
-                                          url: `/projects/${issue.project}/issues/${issue.id}`,
+                                          url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
                                         }}
                                         className={({ active }) =>
                                           classNames(

diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 // next
 import Link from "next/link";
+import { useRouter } from "next/router";
 // swr
 import useSWR from "swr";
 // react-hook-form
@@ -42,6 +43,11 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
   const { activeProject, activeWorkspace } = useUser();
   const { setToastAlert } = useToast();
 
+  const router = useRouter();
+  const {
+    query: { workspaceSlug },
+  } = router;
+
   const { data: issues } = useSWR(
     activeWorkspace && activeProject
       ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
@@ -90,7 +96,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                   className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500 hover:bg-yellow-50"
                 >
                   <Link
-                    href={`/projects/${activeProject?.id}/issues/${
+                    href={`/${workspaceSlug}/projects/${activeProject?.id}/issues/${
                       issues?.results.find((i) => i.id === issue)?.id
                     }`}
                   >
@@ -187,7 +193,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                                         htmlFor={`issue-${issue.id}`}
                                         value={{
                                           name: issue.name,
-                                          url: `/projects/${issue.project}/issues/${issue.id}`,
+                                          url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
                                         }}
                                         className={({ active }) =>
                                           classNames(

diff --git a/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx b/apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
@@ -39,22 +39,21 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, control, handleCycleChange,
   const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
     if (!activeWorkspace || !activeProject) return;
 
-    mutate<CycleIssueResponse[]>(
-      CYCLE_ISSUES(cycleId),
-      (prevData) => prevData?.filter((p) => p.id !== bridgeId),
-      false
-    );
-
-    mutate(
-      activeWorkspace && activeProject
-        ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
-        : null
-    );
-
     issuesService
       .removeIssueFromCycle(activeWorkspace.slug, activeProject.id, cycleId, bridgeId)
       .then((res) => {
         console.log(res);
+        mutate<CycleIssueResponse[]>(
+          CYCLE_ISSUES(cycleId),
+          (prevData) => prevData?.filter((p) => p.id !== bridgeId),
+          false
+        );
+
+        mutate(
+          activeWorkspace && activeProject
+            ? PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)
+            : null
+        );
       })
       .catch((e) => {
         console.log(e);
@@ -68,23 +67,6 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, control, handleCycleChange,
         <p>Cycle</p>
       </div>
       <div className="space-y-1 sm:basis-1/2">
-        {issueDetail?.issue_cycle && watch("issue_cycle") && (
-          <div className="flex flex-wrap gap-1">
-            <span
-              className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-white px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500 hover:bg-yellow-50"
-              onClick={() =>
-                removeIssueFromCycle(
-                  issueDetail.issue_cycle?.id ?? "",
-                  issueDetail.issue_cycle?.cycle ?? ""
-                )
-              }
-            >
-              <ArrowPathIcon className="h-3 w-3" />
-              {watch("issue_cycle")?.cycle_detail.name}
-              <XMarkIcon className="h-2 w-2 opacity-0 duration-300 group-hover:text-red-500 group-hover:opacity-100" />
-            </span>
-          </div>
-        )}
         <Controller
           control={control}
           name="issue_cycle"
@@ -103,16 +85,26 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, control, handleCycleChange,
                 }
                 value={value}
                 onChange={(value: any) => {
-                  handleCycleChange(cycles?.find((c) => c.id === value) as any);
+                  value === null
+                    ? removeIssueFromCycle(
+                        issueDetail?.issue_cycle?.id ?? "",
+                        issueDetail?.issue_cycle?.cycle ?? ""
+                      )
+                    : handleCycleChange(cycles?.find((c) => c.id === value) as any);
                 }}
               >
                 {cycles ? (
                   cycles.length > 0 ? (
-                    cycles.map((option) => (
-                      <CustomSelect.Option key={option.id} value={option.id}>
-                        {option.name}
+                    <>
+                      <CustomSelect.Option value={null} className="capitalize">
+                        <>None</>
                       </CustomSelect.Option>
-                    ))
+                      {cycles.map((option) => (
+                        <CustomSelect.Option key={option.id} value={option.id}>
+                          {option.name}
+                        </CustomSelect.Option>
+                      ))}
+                    </>
                   ) : (
                     <div className="text-center">No cycles found</div>
                   )