fix: workspace settings bugs (#2743)

* fix: double layout in exports

* fix: typo in jira email address section

* fix: workspace members not mutating

* fix: removed un-used variable

* fix: workspace members can't be filtered using email

* fix: autocomplete in workspace delete

* fix: autocomplete in project delete modal

* fix: update member function in store

* fix: sidebar link not active when in github/jira

* style: margin top & icon inconsistency

* fix: typo in create workspace

* fix: workspace leave flow

* fix: redirection to delete issue

* fix: autocomplete off in jira api token

* refactor: reduced api call, added optional chaining & removed variable with low scope

web/components/core/activity.tsx

@@ -42,9 +42,12 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   return (
     <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
       <a
-        href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
+        aria-disabled={activity.issue === null}
-        target="_blank"
+        href={`${
-        rel="noopener noreferrer"
+          activity.issue_detail ? `/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}` : "#"
+        }`}
+        target={activity.issue === null ? "_self" : "_blank"}
+        rel={activity.issue === null ? "" : "noopener noreferrer"}
         className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
       >
         {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}

web/components/integration/github/root.tsx

@@ -163,7 +163,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
 
   return (
     <form onSubmit={handleSubmit(createGithubImporterService)}>
-      <div className="space-y-2">
+      <div className="space-y-2 mt-4">
         <Link href={`/${workspaceSlug}/settings/imports`}>
           <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
             <ArrowLeft className="h-3 w-3" />
@@ -191,9 +191,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                     }`}
                   >
                     <integration.icon
-                      width="18px"
+                      className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                      height="18px"
-                      color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
                     />
                   </div>
                   {index < integrationWorkflowData.length - 1 && (

web/components/integration/jira/give-details.tsx

@@ -56,6 +56,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                 ref={ref}
                 placeholder="XXXXXXXX"
                 className="w-full"
+                autoComplete="off"
               />
             )}
           />
@@ -94,7 +95,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">Enter the Gmail account that you use in Jira account</p>
+          <p className="text-sm text-custom-text-200">Enter the Email account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
           <Controller

web/components/integration/jira/root.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { FormProvider, useForm } from "react-hook-form";
 // icons
-import { ArrowLeft, Check, List, Settings } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, Users2 } from "lucide-react";
 // services
 import { JiraImporterService } from "services/integrations";
 // fetch keys
@@ -98,7 +98,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   };
 
   return (
-    <div className="flex h-full flex-col space-y-2">
+    <div className="flex h-full flex-col space-y-2 mt-4">
       <Link href={`/${workspaceSlug}/settings/imports`}>
         <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
@@ -136,9 +136,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   }`}
                 >
                   <integration.icon
-                    width="18px"
+                    className={`w-5 h-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
-                    height="18px"
-                    color={index <= activeIntegrationState() ? "#ffffff" : "#d1d5db"}
                   />
                 </button>
                 {index < integrationWorkflowData.length - 1 && (

web/components/project/delete-project-modal.tsx

@@ -139,6 +139,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                           hasError={Boolean(errors.projectName)}
                           placeholder="Project name"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />
@@ -162,6 +163,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                           hasError={Boolean(errors.confirmDelete)}
                           placeholder="Enter 'delete my project'"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />

web/components/workspace/create-workspace-form.tsx

@@ -161,7 +161,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.slug)}
-                  placeholder="Enter workspace name..."
+                  placeholder="Enter workspace url..."
                   className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full border-none"
                 />
               )}

web/components/workspace/delete-workspace-modal.tsx

@@ -141,6 +141,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.workspaceName)}
                           placeholder="Workspace name"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />
@@ -165,6 +166,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
                           hasError={Boolean(errors.confirmDelete)}
                           placeholder="Enter 'delete my workspace'"
                           className="mt-2 w-full"
+                          autoComplete="off"
                         />
                       )}
                     />

web/components/workspace/settings/members-list-item.tsx

@@ -1,6 +1,7 @@
 import { useState, FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { mutate } from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -39,7 +40,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
   // store
   const {
     workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
-    user: { currentWorkspaceMemberInfo, currentWorkspaceRole },
+    user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings },
   } = useMobxStore();
   const isAdmin = currentWorkspaceRole === 20;
   // states
@@ -51,14 +52,22 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
     if (!workspaceSlug) return;
 
     if (member.member)
-      await removeMember(workspaceSlug.toString(), member.id).catch((err) => {
+      await removeMember(workspaceSlug.toString(), member.id)
-        const error = err?.error;
+        .then(() => {
-        setToastAlert({
+          const memberId = member.memberId;
-          type: "error",
+
-          title: "Error",
+          if (memberId === currentUser?.id && currentUserSettings) {
-          message: error || "Something went wrong",
+            if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
+            else router.push("/create-workspace");
+          }
+        })
+        .catch((err) => {
+          setToastAlert({
+            type: "error",
+            title: "Error",
+            message: err?.error || "Something went wrong",
+          });
         });
-      });
     else
       await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
         .then(() => {
@@ -69,12 +78,17 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
           });
         })
         .catch((err) => {
-          const error = err?.error;
-
           setToastAlert({
             type: "error",
             title: "Error",
-            message: error || "Something went wrong",
+            message: err?.error || "Something went wrong",
+          });
+        })
+        .finally(() => {
+          mutate(`WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`, (prevData: any) => {
+            if (!prevData) return prevData;
+
+            return prevData.filter((item: any) => item.id !== member.id);
           });
         });
   };

web/components/workspace/settings/members-list.tsx

@@ -29,9 +29,15 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
   );
 
   const searchedMembers = workspaceMembersWithInvitations?.filter((member: any) => {
-    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    const email = member.email?.toLowerCase();
     const displayName = member.display_name.toLowerCase();
-    return displayName.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+    const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+
+    return (
+      displayName.includes(searchQuery.toLowerCase()) ||
+      fullName.includes(searchQuery.toLowerCase()) ||
+      email?.includes(searchQuery.toLowerCase())
+    );
   });
 
   if (

web/layouts/settings-layout/workspace/sidebar.tsx

@@ -64,7 +64,7 @@ export const WorkspaceSettingsSidebar = () => {
               <a>
                 <div
                   className={`px-4 py-2 text-sm font-medium rounded-md ${
-                    (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
+                    router.pathname.split("/")?.[3] === link.href.split("/")?.[3]
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                   }`}

web/pages/[workspaceSlug]/settings/exports.tsx

@@ -9,12 +9,12 @@ import ExportGuide from "components/exporter/guide";
 import { NextPageWithLayout } from "types/app";
 
 const ExportsPage: NextPageWithLayout = () => (
-      <div className="pr-9 py-8 w-full overflow-y-auto">
+  <div className="pr-9 py-8 w-full overflow-y-auto">
-        <div className="flex items-center py-3.5 border-b border-custom-border-100">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
-          <h3 className="text-xl font-medium">Exports</h3>
+      <h3 className="text-xl font-medium">Exports</h3>
-        </div>
+    </div>
-        <ExportGuide />
+    <ExportGuide />
-      </div>
+  </div>
 );
 
 ExportsPage.getLayout = function getLayout(page: ReactElement) {

web/store/workspace/workspace-member.store.ts

@@ -208,29 +208,38 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param data
    */
   updateMember = async (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => {
-    const members = this.members?.[workspaceSlug];
+    const originalMembers = [...this.members?.[workspaceSlug]]; // in case of error, we will revert back to original members
-    members?.map((m) => (m.id === memberId ? { ...m, ...data } : m));
+
+    const members = [...this.members?.[workspaceSlug]];
+
+    const index = members.findIndex((m) => m.id === memberId);
+    members[index] = { ...members[index], ...data };
+
+    // optimistic update
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
 
     try {
-      runInAction(() => {
-        this.loader = true;
-        this.error = null;
-      });
-
       await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data);
 
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.members = {
-          ...this.members,
-          [workspaceSlug]: members,
-        };
       });
     } catch (error) {
       runInAction(() => {
         this.loader = false;
         this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
       });
 
       throw error;
@@ -243,8 +252,20 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param memberId
    */
   removeMember = async (workspaceSlug: string, memberId: string) => {
-    const members = this.members?.[workspaceSlug];
+    const members = [...this.members?.[workspaceSlug]];
-    members?.filter((m) => m.id !== memberId);
+    const originalMembers = this.members?.[workspaceSlug]; // in case of error, we will revert back to original members
+
+    // removing member from the array
+    const index = members.findIndex((m) => m.id === memberId);
+    members.splice(index, 1);
+
+    // optimistic update
+    runInAction(() => {
+      this.members = {
+        ...this.members,
+        [workspaceSlug]: members,
+      };
+    });
 
     try {
       runInAction(() => {
@@ -257,15 +278,15 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       runInAction(() => {
         this.loader = false;
         this.error = null;
-        this.members = {
-          ...this.members,
-          [workspaceSlug]: members,
-        };
       });
     } catch (error) {
       runInAction(() => {
         this.loader = false;
         this.error = error;
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: originalMembers,
+        };
       });
 
       throw error;