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

anmolsinghbhatia · web-flow · commit cf7f891bcb3c · 2025-10-27T19:55:46.000+05:30
* chore: empty state code refactor and translation fix

* chore: code refactor
diff --git 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,
+                },
+              ]}
             />
           )}
         </>
diff --git 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 ? (
diff --git 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"),
diff --git 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",
diff --git 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",
diff --git 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"),
diff --git 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")}
       />
     );
 
diff --git 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")}
       />
     );
 
diff --git 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 &&
diff --git 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")}
       />
     );
   }
diff --git 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.",
diff --git 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:
diff --git 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.",
diff --git 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:
diff --git 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:
diff --git 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.",
diff --git 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:
diff --git 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: "作業項目にプロパティ値を設定して、ここに進捗メトリクスを表示します。",
diff --git 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: "작업 항목에서 속성 값을 설정하여 여기에서 진행 지표를 확인하세요.",
diff --git 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.",
diff --git 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:
diff --git 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:
diff --git 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:
diff --git 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.",
diff --git 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.",
diff --git 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:
diff --git 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.",
diff --git 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: "开始在工作项中设置属性值以在此查看进度指标。",
diff --git 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: "開始在工作項中設定屬性值以在此查看進度指標。",
