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
This commit is contained in:
Dakshesh Jain 2023-11-13 13:34:05 +05:30 committed by sriram veeraghanta
parent 4d35c931cd
commit 21988e8528
12 changed files with 96 additions and 51 deletions

View File

@ -42,9 +42,12 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
return ( return (
<Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}> <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
<a <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" 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"} {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}

View File

@ -163,7 +163,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
return ( return (
<form onSubmit={handleSubmit(createGithubImporterService)}> <form onSubmit={handleSubmit(createGithubImporterService)}>
<div className="space-y-2"> <div className="space-y-2 mt-4">
<Link href={`/${workspaceSlug}/settings/imports`}> <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 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" /> <ArrowLeft className="h-3 w-3" />
@ -191,9 +191,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
}`} }`}
> >
<integration.icon <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> </div>
{index < integrationWorkflowData.length - 1 && ( {index < integrationWorkflowData.length - 1 && (

View File

@ -56,6 +56,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
ref={ref} ref={ref}
placeholder="XXXXXXXX" placeholder="XXXXXXXX"
className="w-full" 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="grid grid-cols-1 gap-10 md:grid-cols-2">
<div className="col-span-1"> <div className="col-span-1">
<h3 className="font-semibold">Jira Email Address</h3> <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>
<div className="col-span-1"> <div className="col-span-1">
<Controller <Controller

View File

@ -5,7 +5,7 @@ import { useRouter } from "next/router";
import { mutate } from "swr"; import { mutate } from "swr";
import { FormProvider, useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form";
// icons // icons
import { ArrowLeft, Check, List, Settings } from "lucide-react"; import { ArrowLeft, Check, List, Settings, Users2 } from "lucide-react";
// services // services
import { JiraImporterService } from "services/integrations"; import { JiraImporterService } from "services/integrations";
// fetch keys // fetch keys
@ -98,7 +98,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
}; };
return ( 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`}> <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 className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
<div> <div>
@ -136,9 +136,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
}`} }`}
> >
<integration.icon <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> </button>
{index < integrationWorkflowData.length - 1 && ( {index < integrationWorkflowData.length - 1 && (

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import { useState, FC } from "react"; import { useState, FC } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// hooks // hooks
@ -39,7 +40,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
// store // store
const { const {
workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation }, workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
user: { currentWorkspaceMemberInfo, currentWorkspaceRole }, user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings },
} = useMobxStore(); } = useMobxStore();
const isAdmin = currentWorkspaceRole === 20; const isAdmin = currentWorkspaceRole === 20;
// states // states
@ -51,14 +52,22 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
if (!workspaceSlug) return; if (!workspaceSlug) return;
if (member.member) 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 else
await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id) await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
.then(() => { .then(() => {
@ -69,12 +78,17 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
}); });
}) })
.catch((err) => { .catch((err) => {
const error = err?.error;
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "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);
}); });
}); });
}; };

View File

@ -29,9 +29,15 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
); );
const searchedMembers = workspaceMembersWithInvitations?.filter((member: any) => { 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(); 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 ( if (

View File

@ -64,7 +64,7 @@ export const WorkspaceSettingsSidebar = () => {
<a> <a>
<div <div
className={`px-4 py-2 text-sm font-medium rounded-md ${ 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" ? "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" : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
}`} }`}

View File

@ -9,12 +9,12 @@ import ExportGuide from "components/exporter/guide";
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
const ExportsPage: NextPageWithLayout = () => ( 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) { ExportsPage.getLayout = function getLayout(page: ReactElement) {

View File

@ -208,29 +208,38 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
* @param data * @param data
*/ */
updateMember = async (workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>) => { 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 { try {
runInAction(() => {
this.loader = true;
this.error = null;
});
await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data); await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data);
runInAction(() => { runInAction(() => {
this.loader = false; this.loader = false;
this.error = null; this.error = null;
this.members = {
...this.members,
[workspaceSlug]: members,
};
}); });
} catch (error) { } catch (error) {
runInAction(() => { runInAction(() => {
this.loader = false; this.loader = false;
this.error = error; this.error = error;
this.members = {
...this.members,
[workspaceSlug]: originalMembers,
};
}); });
throw error; throw error;
@ -243,8 +252,20 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
* @param memberId * @param memberId
*/ */
removeMember = async (workspaceSlug: string, memberId: string) => { 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 { try {
runInAction(() => { runInAction(() => {
@ -257,15 +278,15 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
runInAction(() => { runInAction(() => {
this.loader = false; this.loader = false;
this.error = null; this.error = null;
this.members = {
...this.members,
[workspaceSlug]: members,
};
}); });
} catch (error) { } catch (error) {
runInAction(() => { runInAction(() => {
this.loader = false; this.loader = false;
this.error = error; this.error = error;
this.members = {
...this.members,
[workspaceSlug]: originalMembers,
};
}); });
throw error; throw error;