[WEB-3567] chore: empty state refactoring and translation fix (#8014)

* chore: empty state component improvement and code refactor * chore: translation code refactor * chore: empty state code refactor
2025-10-27 17:03:35 +05:30 · 2025-10-27 17:03:35 +05:30 · 3faf768112
commit 3faf768112
parent be0d1871f0
14 changed files with 121 additions and 116 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx
@ -8,9 +8,9 @@ import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { PageHead } from "@/components/core/page-title";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
 import { SettingsHeading } from "@/components/settings/heading";
 import { WebhookSettingsLoader } from "@/components/ui/loader/settings/web-hook";
@ -20,7 +20,6 @@ import { captureClick } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store/use-webhook";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 const WebhooksListPage = observer(() => {
  // states
@ -35,7 +34,6 @@ const WebhooksListPage = observer(() => {
  const { currentWorkspace } = useWorkspace();
  // derived values
  const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/webhooks" });

  useSWR(
    workspaceSlug && canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
@ -90,21 +88,23 @@ const WebhooksListPage = observer(() => {
        ) : (
          <div className="flex h-full w-full flex-col">
            <div className="h-full w-full flex items-center justify-center">
-              <DetailedEmptyState
-                className="!p-0"
-                title=""
-                description=""
-                assetPath={resolvedPath}
-                size="md"
-                primaryButton={{
-                  text: t("workspace_settings.settings.webhooks.add_webhook"),
-                  onClick: () => {
-                    captureClick({
-                      elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
-                    });
-                    setShowCreateWebhookModal(true);
+              <EmptyStateCompact
+                assetKey="webhook"
+                title={t("settings.webhooks.title")}
+                description={t("settings.webhooks.description")}
+                actions={[
+                  {
+                    label: t("settings.webhooks.cta_primary"),
+                    onClick: () => {
+                      captureClick({
+                        elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
+                      });
+                      setShowCreateWebhookModal(true);
+                    },
                  },
-                }}
+                ]}
+                align="start"
+                rootClassName="py-20"
              />
            </div>
          </div>
--- a/apps/web/core/components/cycles/archived-cycles/root.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/root.tsx
@ -4,15 +4,14 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TCycleFilters } from "@plane/types";
 import { calculateTotalFilters } from "@plane/utils";
 // components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // local imports
 import { CycleAppliedFiltersList } from "../applied-filters";
 import { ArchivedCyclesView } from "./view";
@ -28,7 +27,6 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useCycleFilter();
  // derived values
  const totalArchivedCycles = currentProjectArchivedCycleIds?.length ?? 0;
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-cycles" });

  useSWR(
    workspaceSlug && projectId ? `ARCHIVED_CYCLES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@ -69,10 +67,10 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
      )}
      {totalArchivedCycles === 0 ? (
        <div className="h-full place-items-center">
-          <DetailedEmptyState
-            title={t("project_cycles.empty_state.archived.title")}
-            description={t("project_cycles.empty_state.archived.description")}
-            assetPath={resolvedPath}
+          <EmptyStateDetailed
+            assetKey="archived-cycle"
+            title={t("workspace.archive_cycles.title")}
+            description={t("workspace.archive_cycles.description")}
          />
        </div>
      ) : (
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@ -4,15 +4,13 @@ import useSWR, { mutate } from "swr";
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
 import type { IExportData } from "@plane/types";
 import { Table } from "@plane/ui";
 // components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
 // constants
 import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
-// hooks
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // services
 import { IntegrationService } from "@/services/integrations";
 // local imports
@ -35,7 +33,6 @@ export const PrevExports = observer((props: Props) => {
  // hooks
  const { t } = useTranslation();
  const columns = useExportColumns();
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/exports" });

  const { data: exporterServices } = useSWR(
    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
@ -125,12 +122,12 @@ export const PrevExports = observer((props: Props) => {
            </div>
          ) : (
            <div className="flex h-full w-full items-center justify-center">
-              <DetailedEmptyState
-                title={t("workspace_settings.empty_state.exports.title")}
-                description={t("workspace_settings.empty_state.exports.description")}
-                assetPath={resolvedPath}
-                className="w-full !px-0"
-                size="sm"
+              <EmptyStateCompact
+                assetKey="export"
+                title={t("settings.exports.title")}
+                description={t("settings.exports.description")}
+                align="start"
+                rootClassName="py-20"
              />
            </div>
          )
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@ -162,6 +162,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                    title="No request closed yet"
                    description="All the work items whether accepted or declined can be found here."
                    assetClassName="size-20"
+                    className="px-10"
                  />
                )}
              </div>
--- 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
@ -3,15 +3,12 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
-// components
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 // hooks
-import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 export const ProjectArchivedEmptyState: React.FC = observer(() => {
  // router
@ -22,48 +19,45 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
  // plane hooks
  const { t } = useTranslation();
  // store hooks
-  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
  const { allowPermissions } = useUserPermissions();
  // derived values
  const archivedWorkItemFilter = projectId
    ? useWorkItemFilterInstance(EIssuesStoreType.ARCHIVED, projectId)
    : undefined;
-  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
-  const additionalPath = archivedWorkItemFilter?.hasActiveFilters ? (activeLayout ?? "list") : undefined;
  const canPerformEmptyStateActions = allowPermissions(
    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
    EUserPermissionsLevel.PROJECT
  );
-  const emptyFilterResolvedPath = useResolvedAssetPath({
-    basePath: "/empty-state/empty-filters/",
-    additionalPath: additionalPath,
-  });
-  const archivedIssuesResolvedPath = useResolvedAssetPath({
-    basePath: "/empty-state/archived/empty-issues",
-  });

  return (
    <div className="relative h-full w-full overflow-y-auto">
      {archivedWorkItemFilter?.hasActiveFilters ? (
-        <DetailedEmptyState
-          title={t("project_issues.empty_state.issues_empty_filter.title")}
-          assetPath={emptyFilterResolvedPath}
-          secondaryButton={{
-            text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
-            onClick: archivedWorkItemFilter?.clearFilters,
-            disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
-          }}
+        <EmptyStateDetailed
+          assetKey="search"
+          title={t("common.search.title")}
+          description={t("common.search.description")}
+          actions={[
+            {
+              label: t("common.search.cta_secondary"),
+              onClick: archivedWorkItemFilter?.clearFilters,
+              disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
+              variant: "outline-primary",
+            },
+          ]}
        />
      ) : (
-        <DetailedEmptyState
-          title={t("project_issues.empty_state.no_archived_issues.title")}
-          description={t("project_issues.empty_state.no_archived_issues.description")}
-          assetPath={archivedIssuesResolvedPath}
-          primaryButton={{
-            text: t("project_issues.empty_state.no_archived_issues.primary_button.text"),
-            onClick: () => router.push(`/${workspaceSlug}/settings/projects/${projectId}/automations`),
-            disabled: !canPerformEmptyStateActions,
-          }}
+        <EmptyStateDetailed
+          assetKey="archived-work-item"
+          title={t("workspace.archive_work_items.title")}
+          description={t("workspace.archive_work_items.description")}
+          actions={[
+            {
+              label: t("workspace.archive_work_items.cta_primary"),
+              onClick: () => router.push(`/${workspaceSlug}/settings/projects/${projectId}/automations`),
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
        />
      )}
    </div>
--- a/apps/web/core/components/modules/archived-modules/root.tsx
+++ b/apps/web/core/components/modules/archived-modules/root.tsx
@ -4,17 +4,16 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
 import type { TModuleFilters } from "@plane/types";
 // components
 import { calculateTotalFilters } from "@plane/utils";
-import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
 import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
 import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
 // helpers
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";

 export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
  // router
@ -26,7 +25,6 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
  // derived values
  const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-modules" });

  useSWR(
    workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@ -72,10 +70,10 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
      )}
      {totalArchivedModules === 0 ? (
        <div className="h-full place-items-center">
-          <DetailedEmptyState
-            title={t("project_module.empty_state.archived.title")}
-            description={t("project_module.empty_state.archived.description")}
-            assetPath={resolvedPath}
+          <EmptyStateDetailed
+            assetKey="archived-module"
+            title={t("workspace.archive_modules.title")}
+            description={t("workspace.archive_modules.description")}
          />
        </div>
      ) : (