[WEB-5248] chore: empty state code refactor and translation fix (#8017)

* chore: empty state code refactor and translation fix

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-10-27 19:55:46 +05:30 committed by GitHub
parent 3faf768112
commit cf7f891bcb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 52 additions and 59 deletions

View file

@ -6,20 +6,18 @@ import { useRouter } from "next/navigation";
// plane package imports
import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { EmptyStateDetailed } from "@plane/propel/empty-state";
import { Tabs } from "@plane/ui";
import type { TabItem } from "@plane/ui";
// components
import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
import { PageHead } from "@/components/core/page-title";
import { ComicBoxButton } from "@/components/empty-state/comic-box-button";
import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
// hooks
import { captureClick } from "@/helpers/event-tracker.helper";
import { useCommandPalette } from "@/hooks/store/use-command-palette";
import { useProject } from "@/hooks/store/use-project";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { useUserPermissions } from "@/hooks/store/user";
import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
type Props = {
@ -46,9 +44,6 @@ const AnalyticsPage = observer((props: Props) => {
const { currentWorkspace } = useWorkspace();
const { allowPermissions } = useUserPermissions();
// helper hooks
const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/analytics" });
// permissions
const canPerformEmptyStateActions = allowPermissions(
[EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@ -96,22 +91,20 @@ const AnalyticsPage = observer((props: Props) => {
/>
</div>
) : (
<DetailedEmptyState
title={t("workspace_analytics.empty_state.general.title")}
description={t("workspace_analytics.empty_state.general.description")}
assetPath={resolvedPath}
customPrimaryButton={
<ComicBoxButton
label={t("workspace_analytics.empty_state.general.primary_button.text")}
title={t("workspace_analytics.empty_state.general.primary_button.comic.title")}
description={t("workspace_analytics.empty_state.general.primary_button.comic.description")}
onClick={() => {
<EmptyStateDetailed
assetKey="project"
title={t("workspace_projects.empty_state.no_projects.title")}
description={t("workspace_projects.empty_state.no_projects.description")}
actions={[
{
label: "Create a project",
onClick: () => {
toggleCreateProjectModal(true);
captureClick({ elementName: PROJECT_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_PROJECT_BUTTON });
}}
disabled={!canPerformEmptyStateActions}
/>
}
},
disabled: !canPerformEmptyStateActions,
},
]}
/>
)}
</>

View file

@ -137,8 +137,8 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
{getAppliedFiltersCount > 0 ? (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
assetClassName="size-20"
/>
) : currentTab === EInboxIssueCurrentTab.OPEN ? (

View file

@ -34,8 +34,8 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
{archivedWorkItemFilter?.hasActiveFilters ? (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
actions={[
{
label: t("common.search.cta_secondary"),

View file

@ -89,11 +89,11 @@ export const CycleEmptyState: React.FC = observer(() => {
) : cycleWorkItemFilter?.hasActiveFilters ? (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
actions={[
{
label: t("common.search.cta_secondary"),
label: t("common_empty_state.search.cta_secondary"),
onClick: cycleWorkItemFilter?.clearFilters,
disabled: !canPerformEmptyStateActions || !cycleWorkItemFilter,
variant: "outline-primary",

View file

@ -76,11 +76,11 @@ export const ModuleEmptyState: React.FC = observer(() => {
{moduleWorkItemFilter?.hasActiveFilters ? (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
actions={[
{
label: t("common.search.cta_secondary"),
label: t("common_empty_state.search.cta_secondary"),
onClick: moduleWorkItemFilter?.clearFilters,
disabled: !canPerformEmptyStateActions || !moduleWorkItemFilter,
variant: "outline-primary",

View file

@ -34,8 +34,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
{projectWorkItemFilter?.hasActiveFilters ? (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
actions={[
{
label: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),

View file

@ -68,8 +68,8 @@ export const ModulesListView: React.FC = observer(() => {
return (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
/>
);

View file

@ -162,8 +162,8 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
return (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
/>
);

View file

@ -78,13 +78,13 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
currentWorkspaceDisplayFilters?.archived_projects &&
calculateTotalFilters(currentWorkspaceFilters ?? {}) === 0
? t("workspace.projects_archived.title")
: t("common.search.title")
: t("common_empty_state.search.title")
}
description={
currentWorkspaceDisplayFilters?.archived_projects &&
calculateTotalFilters(currentWorkspaceFilters ?? {}) === 0
? t("workspace.projects_archived.description")
: t("common.search.description")
: t("common_empty_state.search.description")
}
assetKey={
currentWorkspaceDisplayFilters?.archived_projects &&

View file

@ -37,8 +37,8 @@ export const ProjectViewsList = observer(() => {
return (
<EmptyStateDetailed
assetKey="search"
title={t("common.search.title")}
description={t("common.search.description")}
title={t("common_empty_state.search.title")}
description={t("common_empty_state.search.description")}
/>
);
}