Fix Wrapstodon Storybook & other Wrapstodon issues (#37189)

2025-12-12 10:43:28 +00:00 · 2025-12-10 15:07:25 +01:00 · 2025-12-10 15:07:25 +01:00 · 8137ce87ce
commit 8137ce87ce
parent 37426288d9
9 changed files with 250 additions and 136 deletions
--- a/app/javascript/mastodon/features/annual_report/annual_report.stories.tsx
+++ b/app/javascript/mastodon/features/annual_report/annual_report.stories.tsx
@ -2,11 +2,17 @@ import type { Meta, StoryObj } from '@storybook/react-vite';

 import {
  accountFactoryState,
-  // statusFactoryState
+  annualReportFactory,
+  statusFactoryState,
 } from '@/testing/factories';

 import { AnnualReport } from '.';

+const SAMPLE_HASHTAG = {
+  name: 'Mastodon',
+  count: 14,
+};
+
 const meta = {
  title: 'Components/AnnualReport',
  component: AnnualReport,
@ -16,108 +22,14 @@ const meta = {
  parameters: {
    state: {
      accounts: {
-        '1': accountFactoryState(),
+        '1': accountFactoryState({ display_name: 'Freddie Fruitbat' }),
      },
-      // statuses: {
-      //   '1': statusFactoryState(),
-      // },
-      annualReport: {
-        state: 'available',
-        report: {
-          schema_version: 2,
-          share_url: '#',
-          account_id: '1',
-          year: 2025,
-          data: {
-            archetype: 'lurker',
-            time_series: [
-              {
-                month: 1,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 2,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 3,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 4,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 5,
-                statuses: 1,
-                followers: 1,
-                following: 3,
-              },
-              {
-                month: 6,
-                statuses: 7,
-                followers: 1,
-                following: 0,
-              },
-              {
-                month: 7,
-                statuses: 2,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 8,
-                statuses: 2,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 9,
-                statuses: 11,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 10,
-                statuses: 12,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 11,
-                statuses: 6,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 12,
-                statuses: 4,
-                followers: 0,
-                following: 0,
-              },
-            ],
-            top_hashtags: [
-              {
-                name: 'Mastodon',
-                count: 14,
-              },
-            ],
-            top_statuses: {
-              by_reblogs: '1',
-              by_replies: '1',
-              by_favourites: '1',
-            },
-          },
-        },
+      statuses: {
+        '1': statusFactoryState(),
      },
+      annualReport: annualReportFactory({
+        top_hashtag: SAMPLE_HASHTAG,
+      }),
    },
  },
 } satisfies Meta<typeof AnnualReport>;
@ -126,6 +38,68 @@ export default meta;

 type Story = StoryObj<typeof meta>;

-export const Default: Story = {
+export const Standalone: Story = {
+  args: {
+    context: 'standalone',
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const InModal: Story = {
+  args: {
+    context: 'modal',
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const ArchetypeOracle: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'oracle',
+        top_hashtag: SAMPLE_HASHTAG,
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoHashtag: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'booster',
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoNewPosts: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'pollster',
+        top_hashtag: SAMPLE_HASHTAG,
+        without_posts: true,
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoNewPostsNoHashtag: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'replier',
+        without_posts: true,
+      }),
+    },
+  },
  render: (args) => <AnnualReport {...args} />,
 };
--- a/app/javascript/mastodon/features/annual_report/archetype.tsx
+++ b/app/javascript/mastodon/features/annual_report/archetype.tsx
@ -12,7 +12,6 @@ import replier from '@/images/archetypes/replier.png';
 import space_elements from '@/images/archetypes/space_elements.png';
 import { Avatar } from '@/mastodon/components/avatar';
 import { Button } from '@/mastodon/components/button';
-import { me } from '@/mastodon/initial_state';
 import type { Account } from '@/mastodon/models/account';
 import type {
  AnnualReport,
@ -112,11 +111,11 @@ const illustrations = {
 export const Archetype: React.FC<{
  report: AnnualReport;
  account?: Account;
-  canShare: boolean;
-}> = ({ report, account, canShare }) => {
+  context: 'modal' | 'standalone';
+}> = ({ report, account, context }) => {
  const intl = useIntl();
  const wrapperRef = useRef<HTMLDivElement>(null);
-  const isSelfView = account?.id === me;
+  const isSelfView = context === 'modal';

  const [isRevealed, setIsRevealed] = useState(!isSelfView);
  const reveal = useCallback(() => {
@ -209,7 +208,7 @@ export const Archetype: React.FC<{
          />
        </Button>
      )}
-      {isRevealed && canShare && <ShareButton report={report} />}
+      {isRevealed && isSelfView && <ShareButton report={report} />}
    </div>
  );
 };
--- a/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
+++ b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
@ -19,7 +19,8 @@ const getStatus = makeGetStatus() as unknown as (arg0: any, arg1: any) => any;

 export const HighlightedPost: React.FC<{
  data: TopStatuses;
-}> = ({ data }) => {
+  context: 'modal' | 'standalone';
+}> = ({ data, context }) => {
  const { by_reblogs, by_favourites, by_replies } = data;

  const statusId = by_reblogs || by_favourites || by_replies;
@ -68,10 +69,10 @@ export const HighlightedPost: React.FC<{
            defaultMessage='Most popular post'
          />
        </h2>
-        <p>{label}</p>
+        {context === 'modal' && <p>{label}</p>}
      </div>

-      <StatusQuoteManager showActions={false} id={`${statusId}`} />
+      <StatusQuoteManager showActions={false} id={statusId} />
    </div>
  );
 };
--- a/app/javascript/mastodon/features/annual_report/index.tsx
+++ b/app/javascript/mastodon/features/annual_report/index.tsx
@ -66,10 +66,9 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
    0,
  );

-  const newFollowerCount = report.data.time_series.reduce(
-    (sum, item) => sum + item.followers,
-    0,
-  );
+  const newFollowerCount =
+    context === 'modal' &&
+    report.data.time_series.reduce((sum, item) => sum + item.followers, 0);

  const topHashtag = report.data.top_hashtags[0];

@ -99,7 +98,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
      </div>

      <div className={styles.stack}>
-        <HighlightedPost data={report.data.top_statuses} />
+        <HighlightedPost data={report.data.top_statuses} context={context} />
        <div
          className={moduleClassNames(styles.statsGrid, {
            noHashtag: !topHashtag,
@ -109,13 +108,15 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
        >
          {!!newFollowerCount && <Followers count={newFollowerCount} />}
          {!!newPostCount && <NewPosts count={newPostCount} />}
-          {topHashtag && <MostUsedHashtag hashtag={topHashtag} />}
+          {topHashtag && (
+            <MostUsedHashtag
+              hashtag={topHashtag}
+              name={account?.display_name}
+              context={context}
+            />
+          )}
        </div>
-        <Archetype
-          report={report}
-          account={account}
-          canShare={context === 'modal'}
-        />
+        <Archetype report={report} account={account} context={context} />
      </div>
    </div>
  );
--- a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
+++ b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
@ -8,7 +8,9 @@ import styles from './index.module.scss';

 export const MostUsedHashtag: React.FC<{
  hashtag: NameAndCount;
-}> = ({ hashtag }) => {
+  name: string | undefined;
+  context: 'modal' | 'standalone';
+}> = ({ hashtag, name, context }) => {
  return (
    <div
      className={classNames(styles.box, styles.mostUsedHashtag, styles.content)}
@ -23,11 +25,21 @@ export const MostUsedHashtag: React.FC<{
      <div className={styles.statExtraLarge}>#{hashtag.name}</div>

      <p>
-        <FormattedMessage
-          id='annual_report.summary.most_used_hashtag.used_count'
-          defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
-          values={{ count: hashtag.count }}
-        />
+        {context === 'modal' ? (
+          <FormattedMessage
+            id='annual_report.summary.most_used_hashtag.used_count'
+            defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
+            values={{ count: hashtag.count }}
+          />
+        ) : (
+          name && (
+            <FormattedMessage
+              id='annual_report.summary.most_used_hashtag.used_count_public'
+              defaultMessage='{name} included this hashtag in {count, plural, one {one post} other {# posts}}.'
+              values={{ count: hashtag.count, name }}
+            />
+          )
+        )}
      </p>
    </div>
  );
--- a/app/javascript/mastodon/features/annual_report/shared_page.tsx
+++ b/app/javascript/mastodon/features/annual_report/shared_page.tsx
@ -1,5 +1,7 @@
 import type { FC } from 'react';

+import { FormattedMessage } from 'react-intl';
+
 import { IconLogo } from '@/mastodon/components/logo';

 import { AnnualReport } from './index';
@ -11,7 +13,11 @@ export const WrapstodonSharedPage: FC = () => {
      <AnnualReport />
      <footer className={classes.footer}>
        <IconLogo className={classes.logo} />
-        Generated with ♥ by the Mastodon team
+        <FormattedMessage
+          id='annual_report.shared_page.footer'
+          defaultMessage='Generated with {heart} by the Mastodon team'
+          values={{ heart: '♥' }}
+        />
      </footer>
    </main>
  );
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@ -117,6 +117,7 @@
  "annual_report.announcement.action_view": "View my Wrapstodon",
  "annual_report.announcement.description": "Discover more about your engagement on Mastodon over the past year.",
  "annual_report.announcement.title": "Wrapstodon {year} has arrived",
+  "annual_report.shared_page.footer": "Generated with {heart} by the Mastodon team",
  "annual_report.summary.archetype.booster.desc_public": "{name} stayed on the hunt for posts to boost, amplifying other creators with perfect aim.",
  "annual_report.summary.archetype.booster.desc_self": "You stayed on the hunt for posts to boost, amplifying other creators with perfect aim.",
  "annual_report.summary.archetype.booster.name": "The Archer",
@ -146,6 +147,7 @@
  "annual_report.summary.most_used_app.most_used_app": "most used app",
  "annual_report.summary.most_used_hashtag.most_used_hashtag": "most used hashtag",
  "annual_report.summary.most_used_hashtag.used_count": "You included this hashtag in {count, plural, one {one post} other {# posts}}.",
+  "annual_report.summary.most_used_hashtag.used_count_public": "{name} included this hashtag in {count, plural, one {one post} other {# posts}}.",
  "annual_report.summary.new_posts.new_posts": "new posts",
  "annual_report.summary.percentile.text": "<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of {domain} users.</bottomLabel>",
  "annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",
--- a/app/javascript/mastodon/models/annual_report.ts
+++ b/app/javascript/mastodon/models/annual_report.ts
@ -16,9 +16,9 @@ export interface TimeSeriesMonth {
 }

 export interface TopStatuses {
-  by_reblogs: number;
-  by_favourites: number;
-  by_replies: number;
+  by_reblogs: string;
+  by_favourites: string;
+  by_replies: string;
 }

 export type Archetype =
--- a/app/javascript/testing/factories.ts
+++ b/app/javascript/testing/factories.ts
@ -1,4 +1,4 @@
-import { Map as ImmutableMap } from 'immutable';
+import { Map as ImmutableMap, List } from 'immutable';

 import type { ApiRelationshipJSON } from '@/mastodon/api_types/relationships';
 import type { ApiStatusJSON } from '@/mastodon/api_types/statuses';
@ -7,6 +7,7 @@ import type {
  UnicodeEmojiData,
 } from '@/mastodon/features/emoji/types';
 import { createAccountFromServerJSON } from '@/mastodon/models/account';
+import type { AnnualReport } from '@/mastodon/models/annual_report';
 import type { Status } from '@/mastodon/models/status';
 import type { ApiAccountJSON } from 'mastodon/api_types/accounts';

@ -75,16 +76,18 @@ export const statusFactory: FactoryFunction<ApiStatusJSON> = ({
  mentions: [],
  tags: [],
  emojis: [],
-  content: '<p>This is a test status.</p>',
+  contentHtml: '<p>This is a test status.</p>',
  ...data,
 });

 export const statusFactoryState = (
  options: FactoryOptions<ApiStatusJSON> = {},
 ) =>
-  ImmutableMap<string, unknown>(
-    statusFactory(options) as unknown as Record<string, unknown>,
-  ) as unknown as Status;
+  ImmutableMap<string, unknown>({
+    ...(statusFactory(options) as unknown as Record<string, unknown>),
+    account: options.account?.id ?? '1',
+    tags: List(options.tags),
+  }) as unknown as Status;

 export const relationshipsFactory: FactoryFunction<ApiRelationshipJSON> = ({
  id,
@ -130,3 +133,119 @@ export function customEmojiFactory(
    ...data,
  };
 }
+
+interface AnnualReportState {
+  state: 'available';
+  report: AnnualReport;
+}
+
+interface AnnualReportFactoryOptions {
+  account_id?: string;
+  status_id?: string;
+  archetype?: AnnualReport['data']['archetype'];
+  year?: number;
+  top_hashtag?: AnnualReport['data']['top_hashtags'][0];
+  without_posts?: boolean;
+}
+
+export function annualReportFactory({
+  account_id = '1',
+  status_id = '1',
+  archetype = 'lurker',
+  year,
+  top_hashtag,
+  without_posts = false,
+}: AnnualReportFactoryOptions = {}): AnnualReportState {
+  return {
+    state: 'available',
+    report: {
+      schema_version: 2,
+      share_url: '#',
+      account_id,
+      year: year ?? 2025,
+      data: {
+        archetype,
+        time_series: [
+          {
+            month: 1,
+            statuses: 0,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 2,
+            statuses: 0,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 3,
+            statuses: 0,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 4,
+            statuses: 0,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 5,
+            statuses: without_posts ? 0 : 1,
+            followers: 1,
+            following: 3,
+          },
+          {
+            month: 6,
+            statuses: without_posts ? 0 : 7,
+            followers: 1,
+            following: 0,
+          },
+          {
+            month: 7,
+            statuses: without_posts ? 0 : 2,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 8,
+            statuses: without_posts ? 0 : 2,
+            followers: 0,
+            following: 0,
+          },
+          {
+            month: 9,
+            statuses: without_posts ? 0 : 11,
+            followers: 0,
+            following: 1,
+          },
+          {
+            month: 10,
+            statuses: without_posts ? 0 : 12,
+            followers: 0,
+            following: 1,
+          },
+          {
+            month: 11,
+            statuses: without_posts ? 0 : 6,
+            followers: 0,
+            following: 1,
+          },
+          {
+            month: 12,
+            statuses: without_posts ? 0 : 4,
+            followers: 0,
+            following: 0,
+          },
+        ],
+        top_hashtags: top_hashtag ? [top_hashtag] : [],
+        top_statuses: {
+          by_reblogs: status_id,
+          by_replies: status_id,
+          by_favourites: status_id,
+        },
+      },
+    },
+  };
+}