From 8aa303f9b739f6b9d8211eb7d4ab5f675b759b53 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Mon, 9 May 2022 15:10:22 +0200
Subject: [PATCH] Improve welcome screen, add opt-out analytics (#8474)

---
 src/components/structures/HomePage.tsx        |  4 ++-
 .../views/elements/MiniAvatarUploader.tsx     | 29 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index ddba1c81d7..e84d115e43 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -75,6 +75,8 @@ const UserWelcomeTop = () => {
             hasAvatarLabel={_tDom("Great, that'll help people know it's you")}
             noAvatarLabel={_tDom("Add a photo so people know it's you.")}
             setAvatarUrl={url => cli.setAvatarUrl(url)}
+            isUserAvatar
+            onClick={ev => PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton", ev)}
         >
             <BaseAvatar
                 idName={userId}
@@ -100,7 +102,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
     }
 
     let introSection;
-    if (justRegistered) {
+    if (justRegistered || !!OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_SIZE)) {
         introSection = <UserWelcomeTop />;
     } else {
         const brandingConfig = SdkConfig.getObject("branding");
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 43e66db09c..c501c92ac9 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext, useRef, useState } from 'react';
-import { EventType } from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import React, { useContext, useRef, useState, MouseEvent } from 'react';
 
+import Analytics from "../../../Analytics";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
+import { useTimeout } from "../../../hooks/useTimeout";
+import { TranslatedString } from '../../../languageHandler';
+import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { useTimeout } from "../../../hooks/useTimeout";
-import Analytics from "../../../Analytics";
-import { TranslatedString } from '../../../languageHandler';
-import RoomContext from "../../../contexts/RoomContext";
-import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 
 export const AVATAR_SIZE = 52;
 
@@ -34,9 +34,13 @@ interface IProps {
     noAvatarLabel?: TranslatedString;
     hasAvatarLabel?: TranslatedString;
     setAvatarUrl(url: string): Promise<unknown>;
+    isUserAvatar?: boolean;
+    onClick?(ev: MouseEvent<HTMLInputElement>): void;
 }
 
-const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+const MiniAvatarUploader: React.FC<IProps> = ({
+    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children, onClick,
+}) => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
     const [hover, setHover] = useState(false);
@@ -54,7 +58,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
     const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
 
     const { room } = useContext(RoomContext);
-    const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
+    const canSetAvatar = isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
     if (!canSetAvatar) return <React.Fragment>{ children }</React.Fragment>;
 
     const visible = !!label && (hover || show);
@@ -63,7 +67,10 @@ const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAva
             type="file"
             ref={uploadRef}
             className="mx_MiniAvatarUploader_input"
-            onClick={chromeFileInputFix}
+            onClick={(ev) => {
+                chromeFileInputFix(ev);
+                onClick?.(ev);
+            }}
             onChange={async (ev) => {
                 if (!ev.target.files?.length) return;
                 setBusy(true);