feat(metrics): creator scene analytics

Author: Esteban Ordano

packages/creator-hub/renderer/src/components/EditorPage/MetricsAction/component.spec.tsx

@@ -0,0 +1,90 @@
+import { Provider as StoreProvider } from 'react-redux';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { getKeys } from '/@/modules/store/translation/utils';
+import { actions as featureFlagsActions } from '/@/modules/store/featureFlags';
+import type { Project } from '/shared/types/projects';
+import { createTestStore, type TestStore } from '../../../../tests/utils/testStore';
+import { MetricsAction } from './component';
+
+const METRICS_FLAG = 'creatorhub-creator-hub-metrics';
+
+const navigateMock = vi.fn();
+
+vi.mock('react-router-dom', async () => {
+  const actual = (await vi.importActual('react-router-dom')) as Record<string, unknown>;
+  return { ...actual, useNavigate: () => navigateMock };
+});
+
+vi.mock('/@/lib/metrics', () => ({
+  isMetricsEnabled: (flags: Record<string, boolean>) => !!flags[METRICS_FLAG],
+}));
+
+const project = (overrides: Partial<Project> = {}): Project =>
+  ({
+    id: 'p',
+    path: '/tmp/p',
+    title: 'My Scene',
+    scene: { base: '0,0', parcels: ['0,0'] },
+    ...overrides,
+  }) as unknown as Project;
+
+function enableMetrics(store: TestStore) {
+  store.dispatch(
+    featureFlagsActions.fetchFeatureFlags.fulfilled(
+      { flags: { [METRICS_FLAG]: true }, variants: {} },
+      'req',
+      undefined,
+    ),
+  );
+}
+
+function renderAction(proj: Project | undefined, { enabled = true } = {}) {
+  const store = createTestStore();
+  if (enabled) enableMetrics(store);
+  return render(
+    <StoreProvider store={store}>
+      <MetricsAction project={proj} />
+    </StoreProvider>,
+  );
+}
+
+describe('MetricsAction (editor entry)', () => {
+  beforeAll(() => {
+    getKeys('en');
+  });
+
+  afterEach(() => {
+    navigateMock.mockReset();
+    cleanup();
+  });
+
+  it('renders nothing when the metrics flag is off', () => {
+    renderAction(project({ worldConfiguration: { name: 'w.dcl.eth' } }), { enabled: false });
+    expect(screen.queryByText('Analytics')).toBeNull();
+  });
+
+  it('navigates to the world drill-down when the scene is deployed to a World', () => {
+    renderAction(project({ worldConfiguration: { name: 'Kick-Off.dcl.eth' } }));
+    fireEvent.click(screen.getByText('Analytics'));
+    expect(navigateMock).toHaveBeenCalledWith('/metrics', {
+      state: { sceneType: 'world', sceneId: 'kick-off.dcl.eth', source: 'editor' },
+    });
+  });
+
+  it('navigates to the genesis drill-down when the scene is deployed to LAND', () => {
+    renderAction(project({ scene: { base: '10,20', parcels: ['10,20'] } }));
+    fireEvent.click(screen.getByText('Analytics'));
+    expect(navigateMock).toHaveBeenCalledWith('/metrics', {
+      state: { sceneType: 'genesis', sceneId: '10|20', source: 'editor' },
+    });
+  });
+
+  it('disables the entry and does not navigate for an undeployed scene', () => {
+    renderAction(project());
+    const button = screen.getByRole('button', { name: /Analytics/ });
+    expect(button).toHaveProperty('disabled', true);
+    fireEvent.click(button);
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+});

packages/creator-hub/renderer/src/components/EditorPage/MetricsAction/component.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import InsightsIcon from '@mui/icons-material/Insights';
+import { Tooltip } from 'decentraland-ui2';
+import { t } from '/@/modules/store/translation/utils';
+import { useFeatureFlags } from '/@/hooks/useFeatureFlags';
+import { isMetricsEnabled } from '/@/lib/metrics';
+import type { Project } from '/shared/types/projects';
+import { Button } from '../../Button';
+import { resolveSceneMetricsTarget } from '../utils';
+
+export function MetricsAction({ project }: { project?: Project }) {
+  const navigate = useNavigate();
+  const { flags } = useFeatureFlags();
+  const target = useMemo(() => resolveSceneMetricsTarget(project), [project]);
+
+  const handleClick = useCallback(() => {
+    if (!target) return;
+    navigate('/metrics', { state: { ...target, source: 'editor' } });
+  }, [navigate, target]);
+
+  if (!isMetricsEnabled(flags)) return null;
+
+  const button = (
+    <span>
+      <Button
+        color="secondary"
+        onClick={handleClick}
+        disabled={!target}
+        startIcon={<InsightsIcon />}
+      >
+        {t('metrics.actions.analytics')}
+      </Button>
+    </span>
+  );
+
+  return target ? button : <Tooltip title={t('metrics.actions.editor_tooltip')}>{button}</Tooltip>;
+}

packages/creator-hub/renderer/src/components/EditorPage/MetricsAction/index.ts

@@ -0,0 +1 @@
+export { MetricsAction } from './component';

packages/creator-hub/renderer/src/components/EditorPage/component.tsx

@@ -36,6 +36,7 @@ import { ButtonGroup } from '../Button';
 import { ConnectionStatusIndicator } from '../ConnectionStatusIndicator';
 import { MobileQRCode } from '../Modals/MobileQRCode';
 import { DeployModal } from './DeployModal';
+import { MetricsAction } from './MetricsAction';
 import { PreviewOptions, PublishOptions } from './MenuOptions';
 import { getPublishButtonText, getPublishOptions } from './utils';
 
@@ -376,6 +377,7 @@ export function EditorPage() {
               >
                 {t('editor.header.actions.preview')}
               </ButtonGroup>
+              <MetricsAction project={project} />
               {publishOptions.length > 0 ? (
                 <ButtonGroup
                   color="primary"

packages/creator-hub/renderer/src/components/EditorPage/utils.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import type { Project } from '/shared/types/projects';
+import { resolveSceneMetricsTarget } from './utils';
+
+type Target = Pick<Project, 'worldConfiguration' | 'scene'>;
+
+const withScene = (base: string): Target['scene'] => ({ base, parcels: [base] });
+
+describe('resolveSceneMetricsTarget', () => {
+  it('resolves a World by its lowercased name', () => {
+    expect(
+      resolveSceneMetricsTarget({
+        worldConfiguration: { name: 'Kick-Off.dcl.eth' },
+        scene: withScene('0,0'),
+      }),
+    ).toEqual({ sceneType: 'world', sceneId: 'kick-off.dcl.eth' });
+  });
+
+  it('resolves a Genesis parcel by its base coords with a pipe separator', () => {
+    expect(resolveSceneMetricsTarget({ scene: withScene('10,20') })).toEqual({
+      sceneType: 'genesis',
+      sceneId: '10|20',
+    });
+  });
+
+  it('prefers the World target when both a world and a land base exist', () => {
+    expect(
+      resolveSceneMetricsTarget({
+        worldConfiguration: { name: 'my-world.dcl.eth' },
+        scene: withScene('10,20'),
+      }),
+    ).toEqual({ sceneType: 'world', sceneId: 'my-world.dcl.eth' });
+  });
+
+  it('returns null for a fresh scene at 0,0 with no world', () => {
+    expect(resolveSceneMetricsTarget({ scene: withScene('0,0') })).toBeNull();
+  });
+
+  it('returns null when there is no project', () => {
+    expect(resolveSceneMetricsTarget(undefined)).toBeNull();
+  });
+});

packages/creator-hub/renderer/src/components/EditorPage/utils.ts

@@ -1,8 +1,25 @@
 import type { Project } from '/shared/types/projects';
+import type { SceneType } from '/shared/types/metrics';
 import type { Deployment } from '/@/modules/store/deployment/slice';
 import { t } from '/@/modules/store/translation/utils';
 import type { PublishOption } from './MenuOptions';
 
+export type SceneMetricsTarget = { sceneType: SceneType; sceneId: string };
+
+export const resolveSceneMetricsTarget = (
+  project?: Pick<Project, 'worldConfiguration' | 'scene'>,
+): SceneMetricsTarget | null => {
+  const worldName = project?.worldConfiguration?.name;
+  if (worldName) return { sceneType: 'world', sceneId: worldName.toLowerCase() };
+
+  const landBase = project?.scene?.base;
+  if (landBase && landBase !== '0,0') {
+    return { sceneType: 'genesis', sceneId: landBase.replace(',', '|') };
+  }
+
+  return null;
+};
+
 type GetPublishButtonTextParams = {
   loadingPublish: boolean;
   deployment?: Deployment;

packages/creator-hub/renderer/src/components/HomePage/component.tsx

@@ -159,7 +159,7 @@ const ScenesCard: React.FC = React.memo(() => {
           <div className="CardList">
             {projects.slice(0, 6).map(project => (
               <CardItem
-                key={project.id}
+                key={project.path}
                 title={project.title}
                 icon={<LayersOutlinedIcon />}
                 onClick={() => handleProjectClick(project)}

packages/creator-hub/renderer/src/components/ManagePage/ManagedProjectsList/component.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Button as DCLButton, Typography } from 'decentraland-ui2';
 import { useDispatch, useSelector } from '#store';
 import { useAuth } from '/@/hooks/useAuth';
+import { useFeatureFlags } from '/@/hooks/useFeatureFlags';
+import { isMetricsEnabled } from '/@/lib/metrics';
 import { WorldPermissionName, WorldRoleType } from '/@/lib/worlds';
 import {
   fetchWorldSettings,
@@ -13,7 +15,7 @@ import {
   fetchParcelsPermission,
 } from '/@/modules/store/management';
 import { t } from '/@/modules/store/translation/utils';
-import { WorldSettingsTab, type ManagedProject } from '/shared/types/manage';
+import { ManagedProjectType, WorldSettingsTab, type ManagedProject } from '/shared/types/manage';
 import { Button } from '../../Button';
 import { Loader } from '../../Loader';
 import { Modal } from '../../Modals';
@@ -48,6 +50,8 @@ type Props = {
 const ManagedProjectsList: React.FC<Props> = React.memo(props => {
   const { projects, total, isLoading, onLoadMore } = props;
   const { wallet } = useAuth();
+  const { flags } = useFeatureFlags();
+  const metricsEnabled = isMetricsEnabled(flags);
   const [settingsModal, setSettingsModal] = useState<SettingsModalState>({
     isOpen: false,
     activeTab: WorldSettingsTab.DETAILS,
@@ -124,6 +128,17 @@ const ManagedProjectsList: React.FC<Props> = React.memo(props => {
     navigate('/scenes');
   }, [navigate]);
 
+  const handleViewMetrics = useCallback(
+    (project: ManagedProject) => {
+      const state =
+        project.type === ManagedProjectType.LAND
+          ? { sceneType: 'genesis', sceneId: project.id.replace(',', '|'), source: 'manage-card' }
+          : { sceneType: 'world', sceneId: project.id.toLowerCase(), source: 'manage-card' };
+      navigate('/metrics', { state });
+    },
+    [navigate],
+  );
+
   return (
     <div className="ManagedProjectsList">
       {projects.map(project => (
@@ -136,6 +151,7 @@ const ManagedProjectsList: React.FC<Props> = React.memo(props => {
           onOpenPermissions={() => handleOpenPermissionsModal(project.id)}
           onUnpublishWorld={() => handleShowUnpublishWorldConfirmation(project.id)}
           onViewScenes={handleViewScenes}
+          onViewMetrics={metricsEnabled ? () => handleViewMetrics(project) : undefined}
         />
       ))}
       {projects.length < total && (

packages/creator-hub/renderer/src/components/ManagePage/PublishedProjectCard/component.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { type ManagedProject, WorldSettingsTab } from '/shared/types/manage';
 import { ManagedProjectType } from '/shared/types/manage';
 import WorldSettingsIcon from '@mui/icons-material/SpaceDashboard';
+import MetricsIcon from '@mui/icons-material/Insights';
 import ParcelsIcon from '@mui/icons-material/Layers';
 import PermissionsIcon from '@mui/icons-material/Lock';
 import PersonIcon from '@mui/icons-material/Person';
@@ -40,10 +41,18 @@ export type Props = {
   onOpenPermissions: () => void;
   onViewScenes: () => void;
   onUnpublishWorld: () => void;
+  onViewMetrics?: () => void;
 };
 
 const PublishedProjectCard: React.FC<Props> = React.memo(
-  ({ project, onOpenSettings, onOpenPermissions, onViewScenes, onUnpublishWorld }) => {
+  ({
+    project,
+    onOpenSettings,
+    onOpenPermissions,
+    onViewScenes,
+    onUnpublishWorld,
+    onViewMetrics,
+  }) => {
     const { pushGeneric } = useSnackbar();
     const { id, displayName, type, role, deployment } = project;
     const roleLabel = isCollaboratorRole(role) ? COLLABORATOR_ROLES_LABELS[role] : null;
@@ -112,6 +121,15 @@ const PublishedProjectCard: React.FC<Props> = React.memo(
           handler: onOpenPermissions,
           active: type === ManagedProjectType.WORLD && role === WorldRoleType.OWNER,
         },
+        {
+          text: t('metrics.actions.metrics'),
+          icon: <MetricsIcon />,
+          handler: () => onViewMetrics?.(),
+          active:
+            !!onViewMetrics &&
+            (type === ManagedProjectType.LAND ||
+              (type === ManagedProjectType.WORLD && !!deployment)),
+        },
         {
           text: t('manage.cards.menu.view_storage'),
           icon: <OpenInNew />,
@@ -137,6 +155,7 @@ const PublishedProjectCard: React.FC<Props> = React.memo(
       handleViewParcel,
       handleViewStorage,
       onOpenPermissions,
+      onViewMetrics,
     ]);
 
     return (