[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

packages/propel/src/empty-state/assets/asset-registry.tsx

@@ -39,6 +39,7 @@ import {
   DraftVerticalStackIllustration,
   EpicVerticalStackIllustration,
   Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
   InvalidLinkVerticalStackIllustration,
   ModuleVerticalStackIllustration,
   NoAccessVerticalStackIllustration,
@@ -85,6 +86,7 @@ export const VERTICAL_STACK_ASSETS: Record<VerticalStackAssetType, React.Compone
   draft: DraftVerticalStackIllustration,
   epic: EpicVerticalStackIllustration,
   "error-404": Error404VerticalStackIllustration,
+  initiative: InitiativeVerticalStackIllustration,
   "invalid-link": InvalidLinkVerticalStackIllustration,
   module: ModuleVerticalStackIllustration,
   "no-access": NoAccessVerticalStackIllustration,

packages/propel/src/empty-state/assets/asset-types.ts

@@ -32,6 +32,7 @@ export type VerticalStackAssetType =
   | "draft"
   | "epic"
   | "error-404"
+  | "initiative"
   | "invalid-link"
   | "module"
   | "no-access"

packages/propel/src/empty-state/assets/vertical-stack/constant.tsx

@@ -8,6 +8,7 @@ import {
   DraftVerticalStackIllustration,
   EpicVerticalStackIllustration,
   Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
   InvalidLinkVerticalStackIllustration,
   ModuleVerticalStackIllustration,
   NoAccessVerticalStackIllustration,
@@ -56,6 +57,10 @@ export const VerticalStackAssetsMap = [
     asset: <Error404VerticalStackIllustration />,
     title: "Error404VerticalStackIllustration",
   },
+  {
+    asset: <InitiativeVerticalStackIllustration />,
+    title: "InitiativeVerticalStackIllustration",
+  },
   {
     asset: <InvalidLinkVerticalStackIllustration />,
     title: "InvalidLinkVerticalStackIllustration",

packages/propel/src/empty-state/compact-empty-state.tsx

@@ -15,6 +15,7 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
   rootClassName,
   assetClassName,
   align = "center",
+  customButton,
 }) => {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getCompactAsset(assetKey as CompactAssetType, assetClassName) : asset;
@@ -39,18 +40,21 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
             title && <p className="text-sm leading-5 text-custom-text-300">{title}</p>
           )}
 
-          {actions && actions.length > 0 && (
-            <div className="flex flex-col gap-4 sm:flex-row">
-              {actions.map((action, index) => {
-                const { label, variant, ...rest } = action;
-                return (
-                  <Button key={index} variant={variant} {...rest}>
-                    {label}
-                  </Button>
-                );
-              })}
-            </div>
-          )}
+          {customButton
+            ? customButton
+            : actions &&
+              actions.length > 0 && (
+                <div className="flex flex-col gap-4 sm:flex-row">
+                  {actions.map((action, index) => {
+                    const { label, variant, ...rest } = action;
+                    return (
+                      <Button key={index} variant={variant} {...rest}>
+                        {label}
+                      </Button>
+                    );
+                  })}
+                </div>
+              )}
         </div>
       </div>
     </div>

packages/propel/src/empty-state/detailed-empty-state.tsx

@@ -14,6 +14,7 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
   className,
   rootClassName,
   assetClassName,
+  customButton,
 }) => {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
@@ -31,18 +32,21 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
             </div>
           )}
 
-          {actions && actions.length > 0 && (
-            <div className="flex flex-col gap-4 sm:flex-row">
-              {actions.map((action, index) => {
-                const { label, variant, ...rest } = action;
-                return (
-                  <Button key={index} variant={variant} {...rest}>
-                    {label}
-                  </Button>
-                );
-              })}
-            </div>
-          )}
+          {customButton
+            ? customButton
+            : actions &&
+              actions.length > 0 && (
+                <div className="flex flex-col gap-4 sm:flex-row">
+                  {actions.map((action, index) => {
+                    const { label, variant, ...rest } = action;
+                    return (
+                      <Button key={index} variant={variant} {...rest}>
+                        {label}
+                      </Button>
+                    );
+                  })}
+                </div>
+              )}
         </div>
       </div>
     </div>

packages/propel/src/empty-state/types.ts

@@ -21,4 +21,5 @@ export interface BaseEmptyStateCommonProps {
   assetKey?: CompactAssetType | DetailedAssetType;
   asset?: React.ReactNode;
   align?: TAlign;
+  customButton?: React.ReactNode;
 }