binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-504] chore: command k and issue relation modal empty state (#3955)

Browse source 
* chore: empty state asset updated

* chore: empty state asset updated

* chore: empty state config file updated

* chore: notification empty state updated

* chore: command-k, bulk delete and issue relation modal empty state updated

* chore: code refactor

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-03-15 17:28:45 +05:30 • committed by GitHub
parent ed2e4ad6f7
commit 92a077dce1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 231 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web/components/command-palette/command-modal.tsx
View file

@ -4,9 +4,19 @@ import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import useSWR from "swr";
import { Dialog, Transition } from "@headlessui/react";
// icons
import { FolderPlus, Search, Settings } from "lucide-react";
// hooks
import { useApplication, useEventTracker, useProject } from "hooks/store";
import { usePlatformOS } from "hooks/use-platform-os";
import useDebounce from "hooks/use-debounce";
// services
import { IssueService } from "services/issue";
import { WorkspaceService } from "services/workspace.service";
// ui
import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// components
import { EmptyState } from "components/empty-state";
import {
CommandPaletteThemeActions,
ChangeIssueAssignee,
@ -18,18 +28,13 @@ import {
CommandPaletteWorkspaceSettingsActions,
CommandPaletteSearchResults,
} from "components/command-palette";
import { ISSUE_DETAILS } from "constants/fetch-keys";
import { useApplication, useEventTracker, useProject } from "hooks/store";
import { usePlatformOS } from "hooks/use-platform-os";
// services
import useDebounce from "hooks/use-debounce";
import { IssueService } from "services/issue";
import { WorkspaceService } from "services/workspace.service";
// types
import { IWorkspaceSearchResults } from "@plane/types";
// fetch-keys
// constants
import { EmptyStateType } from "constants/empty-state";
import { ISSUE_DETAILS } from "constants/fetch-keys";
// services
const workspaceService = new WorkspaceService();
const issueService = new IssueService();
@ -244,7 +249,9 @@ export const CommandModal: React.FC = observer(() => {
)}
{!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
<div className="my-4 text-center text-sm text-custom-text-200">No results found.</div>
<div className="flex flex-col items-center justify-center px-3 py-8 text-center">
<EmptyState type={EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE} layout="screen-simple" />
</div>
)}
{(isLoading || isSearching) && (

29
web/components/core/modals/bulk-delete-issues-modal.tsx
View file

@ -5,22 +5,22 @@ import { SubmitHandler, useForm } from "react-hook-form";
import useSWR from "swr";
import { Combobox, Dialog, Transition } from "@headlessui/react";
// services
import { Search } from "lucide-react";
import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
import { EIssuesStoreType } from "constants/issue";
import { useIssues, useProject } from "hooks/store";
import { IssueService } from "services/issue";
// ui
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// icons
import { Search } from "lucide-react";
// types
import { IUser, TIssue } from "@plane/types";
// fetch keys
// store hooks
import { useIssues, useProject } from "hooks/store";
// components
import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
import { EmptyState } from "components/empty-state";
// constants
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
import { EIssuesStoreType } from "constants/issue";
import { EmptyStateType } from "constants/empty-state";
type FormInput = {
delete_issue_ids: string[];
@ -178,12 +178,15 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
</ul>
</li>
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayersIcon height="56" width="56" />
<h3 className="text-custom-text-200">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
</h3>
<div className="flex flex-col items-center justify-center px-3 py-8 text-center">
<EmptyState
type={
query === ""
? EmptyStateType.ISSUE_RELATION_EMPTY_STATE
: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
}
layout="screen-simple"
/>
</div>
)}
</Combobox.Options>

25
web/components/core/modals/existing-issues-list-modal.tsx
View file

@ -2,12 +2,14 @@ import React, { useEffect, useState } from "react";
import { Combobox, Dialog, Transition } from "@headlessui/react";
import { Rocket, Search, X } from "lucide-react";
// services
import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
import { ProjectService } from "services/project";
// hooks
import useDebounce from "hooks/use-debounce";
import { usePlatformOS } from "hooks/use-platform-os";
import { ProjectService } from "services/project";
// components
import { IssueSearchModalEmptyState } from "./issue-search-modal-empty-state";
// ui
import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
// types
import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
@ -40,7 +42,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
const [isSearching, setIsSearching] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
const { isMobile } = usePlatformOS();
const { isMobile } = usePlatformOS();
const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
const handleClose = () => {
@ -192,15 +194,12 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
</h5>
)}
{!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayersIcon height="52" width="52" />
<h3 className="text-custom-text-200">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
</h3>
</div>
)}
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
<Loader className="space-y-3 p-3">

1
web/components/core/modals/index.ts
View file

@ -4,3 +4,4 @@ export * from "./gpt-assistant-popover";
export * from "./link-modal";
export * from "./user-image-upload-modal";
export * from "./workspace-image-upload-modal";
export * from "./issue-search-modal-empty-state";

36
web/components/core/modals/issue-search-modal-empty-state.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from "react";
// components
import { EmptyState } from "components/empty-state";
// types
import { ISearchIssueResponse } from "@plane/types";
// constants
import { EmptyStateType } from "constants/empty-state";
interface EmptyStateProps {
issues: ISearchIssueResponse[];
searchTerm: string;
debouncedSearchTerm: string;
isSearching: boolean;
}
export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
issues,
searchTerm,
debouncedSearchTerm,
isSearching,
}) => {
const renderEmptyState = (type: EmptyStateType) => (
<div className="flex flex-col items-center justify-center px-3 py-8 text-center">
<EmptyState type={type} layout="screen-simple" />
</div>
);
const emptyState =
issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching
? renderEmptyState(EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE)
: issues.length === 0
? renderEmptyState(EmptyStateType.ISSUE_RELATION_EMPTY_STATE)
: null;
return emptyState;
};

24
web/components/empty-state/empty-state.tsx
View file

@ -16,7 +16,7 @@ import { cn } from "helpers/common.helper";
export type EmptyStateProps = {
type: EmptyStateType;
size?: "sm" | "md" | "lg";
layout?: "widget-simple" | "screen-detailed" | "screen-simple";
layout?: "screen-detailed" | "screen-simple";
additionalPath?: string;
primaryButtonOnClick?: () => void;
primaryButtonLink?: string;
@ -149,6 +149,28 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
</div>
</div>
)}
{layout === "screen-simple" && (
<div className="text-center flex flex-col gap-2.5 items-center">
<div className="h-28 w-28">
<Image
src={resolvedEmptyStatePath}
alt={key || "button image"}
width={96}
height={96}
layout="responsive"
lazyBoundary="100%"
/>
</div>
{description ? (
<>
<h3 className="text-lg font-medium text-custom-text-300 whitespace-pre-line">{title}</h3>
<p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>
</>
) : (
<h3 className="text-sm font-medium text-custom-text-400 whitespace-pre-line">{title}</h3>
)}
</div>
)}
</>
);
};

27
web/components/inbox/modals/select-duplicate.tsx
View file

@ -2,15 +2,19 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { Combobox, Dialog, Transition } from "@headlessui/react";
// hooks
import { useProject, useProjectState } from "hooks/store";
// icons
import { Search } from "lucide-react";
// components
import { EmptyState } from "components/empty-state";
// ui
import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
import { useProject, useProjectState } from "hooks/store";
import { Button, TOAST_TYPE, setToast } from "@plane/ui";
// services
import { IssueService } from "services/issue";
// constants
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
import { EmptyStateType } from "constants/empty-state";
type Props = {
isOpen: boolean;
@ -158,12 +162,15 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
</ul>
</li>
) : (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayersIcon height="56" width="56" />
<h3 className="text-sm text-custom-text-200">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
</h3>
<div className="flex flex-col items-center justify-center px-3 py-8 text-center">
<EmptyState
type={
query === ""
? EmptyStateType.ISSUE_RELATION_EMPTY_STATE
: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
}
layout="screen-simple"
/>
</div>
)}
</Combobox.Options>

23
web/components/issues/parent-issues-list-modal.tsx
View file

@ -3,14 +3,16 @@ import { useRouter } from "next/router";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// services
import { Rocket, Search } from "lucide-react";
import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
import useDebounce from "hooks/use-debounce";
import { ProjectService } from "services/project";
// hooks
import useDebounce from "hooks/use-debounce";
import { usePlatformOS } from "hooks/use-platform-os";
// components
import { IssueSearchModalEmptyState } from "components/core";
// ui
import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// icons
import { Rocket, Search } from "lucide-react";
// types
import { ISearchIssueResponse } from "@plane/types";
@ -151,15 +153,12 @@ export const ParentIssuesListModal: React.FC<Props> = ({
</h5>
)}
{!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
<div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
<LayersIcon height="52" width="52" />
<h3 className="text-custom-text-200">
No issues found. Create a new issue with{" "}
<pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
</h3>
</div>
)}
<IssueSearchModalEmptyState
debouncedSearchTerm={debouncedSearchTerm}
isSearching={isSearching}
issues={issues}
searchTerm={searchTerm}
/>
{isSearching ? (
<Loader className="space-y-3 p-3">

41
web/components/notifications/notification-popover.tsx
View file

@ -1,21 +1,22 @@
import React, { Fragment } from "react";
import { observer } from "mobx-react-lite";
import { Popover, Transition } from "@headlessui/react";
import { Bell } from "lucide-react";
// hooks
import { Tooltip } from "@plane/ui";
import { EmptyState } from "components/common";
import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
import { NotificationsLoader } from "components/ui";
import { getNumberCount } from "helpers/string.helper";
import { useApplication } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
import useUserNotification from "hooks/use-user-notifications";
import { usePlatformOS } from "hooks/use-platform-os";
// icons
import { Bell } from "lucide-react";
// components
// images
import emptyNotification from "public/empty-state/notification.svg";
import { Tooltip } from "@plane/ui";
import { EmptyState } from "components/empty-state";
import { NotificationsLoader } from "components/ui";
import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
// constants
import { EmptyStateType } from "constants/empty-state";
// helpers
import { getNumberCount } from "helpers/string.helper";
export const NotificationPopover = observer(() => {
// states
@ -59,6 +60,16 @@ export const NotificationPopover = observer(() => {
if (selectedNotificationForSnooze === null) setIsActive(false);
});
const currentTabEmptyState = snoozed
? EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE
: archived
? EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE
: selectedTab === "created"
? EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE
: selectedTab === "watching"
? EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE
: EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE;
return (
<>
<SnoozeNotificationModal
@ -70,7 +81,13 @@ export const NotificationPopover = observer(() => {
/>
<Popover ref={notificationPopoverRef} className="md:relative w-full">
<>
<Tooltip tooltipContent="Notifications" position="right" className="ml-2" disabled={!isSidebarCollapsed} isMobile={isMobile}>
<Tooltip
tooltipContent="Notifications"
position="right"
className="ml-2"
disabled={!isSidebarCollapsed}
isMobile={isMobile}
>
<button
className={`group relative flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
isActive
@ -184,11 +201,7 @@ export const NotificationPopover = observer(() => {
</div>
) : (
<div className="grid h-full w-full scale-75 place-items-center overflow-hidden">
<EmptyState
title="You're updated with all the notifications"
description="You have read all the notifications."
image={emptyNotification}
/>
<EmptyState type={currentTabEmptyState} layout="screen-simple" />
</div>
)
) : (