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

* chore: empty state code refactor and translation fix * chore: code refactor
2026-01-30 18:29:30 -06:00 · 2025-10-27 19:55:46 +05:30
parent 3faf768112
commit cf7f891bcb
29 changed files with 52 additions and 59 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -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,
+                },
+              ]}
            />
          )}
        </>
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -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 ? (
--- a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -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"),
--- a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -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",
--- a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -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",
--- a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -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"),
--- a/apps/web/core/components/modules/modules-list-view.tsx
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -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")}
      />
    );

--- a/apps/web/core/components/pages/pages-list-main-content.tsx
+++ b/apps/web/core/components/pages/pages-list-main-content.tsx
@@ -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")}
      />
    );

--- a/apps/web/core/components/project/card-list.tsx
+++ b/apps/web/core/components/project/card-list.tsx
@@ -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 &&
--- a/apps/web/core/components/views/views-list.tsx
+++ b/apps/web/core/components/views/views-list.tsx
@@ -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")}
      />
    );
  }
--- a/packages/i18n/src/locales/cs/empty-state.ts
+++ b/packages/i18n/src/locales/cs/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Zatím nejsou k dispozici žádné metriky pokroku.",
      description: "Začněte nastavovat hodnoty vlastností v pracovních položkách, abyste zde viděli metriky pokroku.",
--- a/packages/i18n/src/locales/de/empty-state.ts
+++ b/packages/i18n/src/locales/de/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Es gibt noch keine Fortschrittsmetriken anzuzeigen.",
      description:
--- a/packages/i18n/src/locales/en/empty-state.ts
+++ b/packages/i18n/src/locales/en/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "There're no progress metrics to show yet.",
      description: "Start setting property values in work items to see progress metrics here.",
--- a/packages/i18n/src/locales/es/empty-state.ts
+++ b/packages/i18n/src/locales/es/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Todavía no hay métricas de progreso para mostrar.",
      description:
--- a/packages/i18n/src/locales/fr/empty-state.ts
+++ b/packages/i18n/src/locales/fr/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Il n'y a pas encore de métriques de progression à afficher.",
      description:
--- a/packages/i18n/src/locales/id/empty-state.ts
+++ b/packages/i18n/src/locales/id/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Belum ada metrik progres untuk ditampilkan.",
      description: "Mulai mengatur nilai properti dalam item kerja untuk melihat metrik progres di sini.",
--- a/packages/i18n/src/locales/it/empty-state.ts
+++ b/packages/i18n/src/locales/it/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Non ci sono ancora metriche di progresso da mostrare.",
      description:
--- a/packages/i18n/src/locales/ja/empty-state.ts
+++ b/packages/i18n/src/locales/ja/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "表示する進捗メトリクスがまだありません。",
      description: "作業項目にプロパティ値を設定して、ここに進捗メトリクスを表示します。",
--- a/packages/i18n/src/locales/ko/empty-state.ts
+++ b/packages/i18n/src/locales/ko/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "아직 표시할 진행 지표가 없습니다.",
      description: "작업 항목에서 속성 값을 설정하여 여기에서 진행 지표를 확인하세요.",
--- a/packages/i18n/src/locales/pl/empty-state.ts
+++ b/packages/i18n/src/locales/pl/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Nie ma jeszcze metryk postępu do wyświetlenia.",
      description: "Zacznij ustawiać wartości właściwości w elementach roboczych, aby zobaczyć tutaj metryki postępu.",
--- a/packages/i18n/src/locales/pt-BR/empty-state.ts
+++ b/packages/i18n/src/locales/pt-BR/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Ainda não há métricas de progresso para mostrar.",
      description:
--- a/packages/i18n/src/locales/ro/empty-state.ts
+++ b/packages/i18n/src/locales/ro/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Nu există încă metrici de progres de afișat.",
      description:
--- a/packages/i18n/src/locales/ru/empty-state.ts
+++ b/packages/i18n/src/locales/ru/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Пока нет показателей прогресса для отображения.",
      description:
--- a/packages/i18n/src/locales/sk/empty-state.ts
+++ b/packages/i18n/src/locales/sk/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Zatiaľ nie sú k dispozícii žiadne metriky pokroku.",
      description: "Začnite nastavovať hodnoty vlastností v pracovných položkách, aby ste tu videli metriky pokroku.",
--- a/packages/i18n/src/locales/tr-TR/empty-state.ts
+++ b/packages/i18n/src/locales/tr-TR/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Henüz gösterilecek ilerleme metriği yok.",
      description: "İlerleme metriklerini burada görmek için iş öğelerinde özellik değerleri belirlemeye başlayın.",
--- a/packages/i18n/src/locales/ua/empty-state.ts
+++ b/packages/i18n/src/locales/ua/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Ще немає метрик прогресу для відображення.",
      description:
--- a/packages/i18n/src/locales/vi-VN/empty-state.ts
+++ b/packages/i18n/src/locales/vi-VN/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "Chưa có số liệu tiến độ để hiển thị.",
      description: "Bắt đầu đặt giá trị thuộc tính trong các mục công việc để xem số liệu tiến độ ở đây.",
--- a/packages/i18n/src/locales/zh-CN/empty-state.ts
+++ b/packages/i18n/src/locales/zh-CN/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "暂无进度指标可显示。",
      description: "开始在工作项中设置属性值以在此查看进度指标。",
--- a/packages/i18n/src/locales/zh-TW/empty-state.ts
+++ b/packages/i18n/src/locales/zh-TW/empty-state.ts
@@ -1,5 +1,5 @@
 export default {
-  common: {
+  common_empty_state: {
    progress: {
      title: "暫無進度指標可顯示。",
      description: "開始在工作項中設定屬性值以在此查看進度指標。",