fix: home quick start widget validation (#6626)
* fix: Handled workspace switcher closing on click * fix: home quickstart widget
This commit is contained in:
parent
ffe87cc3b4
commit
cba27c348d
1 changed files with 44 additions and 24 deletions
|
|
@ -12,7 +12,14 @@ import { useTranslation } from "@plane/i18n";
|
||||||
import { cn } from "@plane/utils";
|
import { cn } from "@plane/utils";
|
||||||
import { getFileURL } from "@/helpers/file.helper";
|
import { getFileURL } from "@/helpers/file.helper";
|
||||||
// hooks
|
// hooks
|
||||||
import { useCommandPalette, useEventTracker, useProject, useUser, useUserPermissions } from "@/hooks/store";
|
import {
|
||||||
|
useCommandPalette,
|
||||||
|
useEventTracker,
|
||||||
|
useProject,
|
||||||
|
useUser,
|
||||||
|
useUserPermissions,
|
||||||
|
useWorkspace,
|
||||||
|
} from "@/hooks/store";
|
||||||
// plane web constants
|
// plane web constants
|
||||||
|
|
||||||
export const NoProjectsEmptyState = observer(() => {
|
export const NoProjectsEmptyState = observer(() => {
|
||||||
|
|
@ -24,6 +31,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
const { setTrackElement } = useEventTracker();
|
const { setTrackElement } = useEventTracker();
|
||||||
const { data: currentUser } = useUser();
|
const { data: currentUser } = useUser();
|
||||||
const { joinedProjectIds } = useProject();
|
const { joinedProjectIds } = useProject();
|
||||||
|
const { currentWorkspace: activeWorkspace } = useWorkspace();
|
||||||
// local storage
|
// local storage
|
||||||
const { storedValue, setValue } = useLocalStorage(`quickstart-guide-${workspaceSlug}`, {
|
const { storedValue, setValue } = useLocalStorage(`quickstart-guide-${workspaceSlug}`, {
|
||||||
hide: false,
|
hide: false,
|
||||||
|
|
@ -37,6 +45,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
||||||
EUserPermissionsLevel.WORKSPACE
|
EUserPermissionsLevel.WORKSPACE
|
||||||
);
|
);
|
||||||
|
const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
|
||||||
|
|
||||||
const EMPTY_STATE_DATA = [
|
const EMPTY_STATE_DATA = [
|
||||||
{
|
{
|
||||||
|
|
@ -54,6 +63,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
setTrackElement("Sidebar");
|
setTrackElement("Sidebar");
|
||||||
toggleCreateProjectModal(true);
|
toggleCreateProjectModal(true);
|
||||||
},
|
},
|
||||||
|
disabled: !canCreateProject,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -65,6 +75,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
cta: {
|
cta: {
|
||||||
text: "home.empty.invite_team.cta",
|
text: "home.empty.invite_team.cta",
|
||||||
link: `/${workspaceSlug}/settings/members`,
|
link: `/${workspaceSlug}/settings/members`,
|
||||||
|
disabled: !isWorkspaceAdmin,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -76,6 +87,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
cta: {
|
cta: {
|
||||||
text: "home.empty.configure_workspace.cta",
|
text: "home.empty.configure_workspace.cta",
|
||||||
link: "settings",
|
link: "settings",
|
||||||
|
disabled: !isWorkspaceAdmin,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -104,6 +116,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
cta: {
|
cta: {
|
||||||
text: "home.empty.personalize_account.cta",
|
text: "home.empty.personalize_account.cta",
|
||||||
link: "/profile",
|
link: "/profile",
|
||||||
|
disabled: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
@ -112,7 +125,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
case "projects":
|
case "projects":
|
||||||
return joinedProjectIds?.length > 0;
|
return joinedProjectIds?.length > 0;
|
||||||
case "visited_members":
|
case "visited_members":
|
||||||
return storedValue?.visited_members;
|
return (activeWorkspace?.total_members || 0) >= 2;
|
||||||
case "visited_workspace":
|
case "visited_workspace":
|
||||||
return storedValue?.visited_workspace;
|
return storedValue?.visited_workspace;
|
||||||
case "visited_profile":
|
case "visited_profile":
|
||||||
|
|
@ -120,7 +133,7 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (storedValue?.hide) return null;
|
if (storedValue?.hide || (joinedProjectIds?.length > 0 && (activeWorkspace?.total_members || 0) >= 2)) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -161,28 +174,35 @@ export const NoProjectsEmptyState = observer(() => {
|
||||||
<div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1">
|
<div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1">
|
||||||
<Check className="size-3 text-custom-primary-100 text-white" />
|
<Check className="size-3 text-custom-primary-100 text-white" />
|
||||||
</div>
|
</div>
|
||||||
) : item.cta.link ? (
|
|
||||||
<Link
|
|
||||||
href={item.cta.link}
|
|
||||||
onClick={() => {
|
|
||||||
if (!storedValue) return;
|
|
||||||
setValue({
|
|
||||||
...storedValue,
|
|
||||||
[item.flag]: true,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
|
|
||||||
>
|
|
||||||
{t(item.cta.text)}
|
|
||||||
</Link>
|
|
||||||
) : (
|
) : (
|
||||||
<button
|
!item.cta.disabled &&
|
||||||
type="button"
|
(item.cta.link ? (
|
||||||
className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
|
<Link
|
||||||
onClick={item.cta.onClick}
|
href={item.cta.link}
|
||||||
>
|
onClick={(e) => {
|
||||||
{t(item.cta.text)}
|
if (!storedValue) {
|
||||||
</button>
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setValue({
|
||||||
|
...storedValue,
|
||||||
|
[item.flag]: true,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className={cn("text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium", {})}
|
||||||
|
>
|
||||||
|
{t(item.cta.text)}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
|
||||||
|
onClick={item.cta.onClick}
|
||||||
|
>
|
||||||
|
{t(item.cta.text)}
|
||||||
|
</button>
|
||||||
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue