Add counters for which features result in users following each other (#40226)

app/javascript/mastodon/actions/accounts.js

@@ -149,6 +149,7 @@ export function fetchAccountFail(id, error) {
  * @param {Object} options
  * @param {boolean} [options.reblogs]
  * @param {boolean} [options.notify]
+ * @param {string} [options.ref]
  * @returns {function(): void}
  */
 export function followAccount(id, options = { reblogs: true }) {

app/javascript/mastodon/api/accounts.ts

@@ -32,7 +32,8 @@ export const apiSubmitAccountNote = (id: string, value: string) =>
 export const apiFollowAccount = (
   id: string,
   params?: {
-    reblogs: boolean;
+    reblogs?: boolean;
+    ref?: string;
   },
 ) =>
   apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/follow`, {

app/javascript/mastodon/components/account/index.tsx

@@ -77,6 +77,7 @@ interface AccountProps {
   extraAccountInfo?: React.ReactNode;
   className?: string;
   children?: React.ReactNode;
+  reference?: string;
 }
 
 export const Account: React.FC<AccountProps> = ({
@@ -91,6 +92,7 @@ export const Account: React.FC<AccountProps> = ({
   extraAccountInfo,
   className,
   children,
+  reference,
 }) => {
   const intl = useIntl();
   const { signedIn } = useIdentity();
@@ -169,7 +171,7 @@ export const Account: React.FC<AccountProps> = ({
                 modalProps: {
                   accountId: id,
                   onConfirm: () => {
-                    apiFollowAccount(id)
+                    apiFollowAccount(id, { ref: reference })
                       .then((relationship) => {
                         dispatch(
                           followAccountSuccess({
@@ -225,6 +227,7 @@ export const Account: React.FC<AccountProps> = ({
     defaultAction,
     isRemote,
     signedIn,
+    reference,
   ]);
 
   if (hidden) {
@@ -269,7 +272,7 @@ export const Account: React.FC<AccountProps> = ({
       />
     );
   } else {
-    button = <FollowButton accountId={id} />;
+    button = <FollowButton accountId={id} reference={reference} />;
   }
 
   let muteTimeRemaining: React.ReactNode;

app/javascript/mastodon/components/account_header/buttons.tsx

@@ -96,6 +96,7 @@ const AccountButtonsOther: FC<
           accountId={accountId}
           className={classes.followButton}
           labelLength='long'
+          reference='profile'
         />
       )}
       {isFollowing && (

app/javascript/mastodon/components/account_list_item/index.tsx

@@ -199,6 +199,12 @@ const defaultRenderButton = ({ accountId }: RenderButtonOptions) => (
 
 export const AccountListItemFollowButton: React.FC<{
   accountId: string | undefined;
-}> = ({ accountId }) => (
-  <FollowButton compact labelLength='short' accountId={accountId} />
+  reference?: string;
+}> = ({ accountId, reference }) => (
+  <FollowButton
+    compact
+    labelLength='short'
+    accountId={accountId}
+    reference={reference}
+  />
 );

app/javascript/mastodon/components/follow_button.tsx

@@ -61,12 +61,14 @@ export const FollowButton: React.FC<{
   labelLength?: 'auto' | 'short' | 'long';
   className?: string;
   withUnmute?: boolean;
+  reference?: string;
 }> = ({
   accountId,
   compact,
   labelLength = 'auto',
   className,
   withUnmute = true,
+  reference,
 }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -125,9 +127,17 @@ export const FollowButton: React.FC<{
       );
     } else {
       // @ts-expect-error this action is not typed yet
-      dispatch(followAccount(accountId));
+      dispatch(followAccount(accountId, { ref: reference }));
     }
-  }, [signedIn, relationship, accountId, withUnmute, account, dispatch]);
+  }, [
+    signedIn,
+    relationship,
+    accountId,
+    withUnmute,
+    account,
+    dispatch,
+    reference,
+  ]);
 
   const isNarrow = useBreakpoint('narrow');
   const useShortLabel =

app/javascript/mastodon/features/collections/detail/accounts_list.tsx

@@ -143,7 +143,12 @@ export const CollectionAccountsList: React.FC<{
     ({ relationship, accountId }: RenderButtonOptions) => {
       if (!me || !relationship) {
         // Show follow button when logged out (it will trigger the remote interaction modal)
-        return <AccountListItemFollowButton accountId={accountId} />;
+        return (
+          <AccountListItemFollowButton
+            accountId={accountId}
+            reference='collection'
+          />
+        );
       }
 
       // When viewing your own collection, only show the Follow button
@@ -165,7 +170,12 @@ export const CollectionAccountsList: React.FC<{
         );
       }
 
-      return <AccountListItemFollowButton accountId={accountId} />;
+      return (
+        <AccountListItemFollowButton
+          accountId={accountId}
+          reference='collection'
+        />
+      );
     },
     [collectionOwnerId, confirmRevoke],
   );

app/javascript/mastodon/features/onboarding/follows.tsx

@@ -169,7 +169,13 @@ export const Follows: React.FC<{
         }
       >
         {displayedAccountIds.map((accountId) => (
-          <Account id={accountId} key={accountId} withBio withMenu={false} />
+          <Account
+            id={accountId}
+            key={accountId}
+            withBio
+            withMenu={false}
+            reference='onboarding'
+          />
         ))}
       </ScrollableList>