From adf0f5ba6f24109183070ed6e8cc11a2daf48357 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 3 May 2022 13:26:27 +0200
Subject: [PATCH 1/4] welcome screen: correct issue with avatar uploader

---
 src/components/structures/HomePage.tsx               | 1 +
 src/components/views/elements/MiniAvatarUploader.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index ddba1c81d71..daa0e3b9691 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -75,6 +75,7 @@ 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
         >
             <BaseAvatar
                 idName={userId}
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 43e66db09c1..3bb8f4a302c 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -34,9 +34,12 @@ interface IProps {
     noAvatarLabel?: TranslatedString;
     hasAvatarLabel?: TranslatedString;
     setAvatarUrl(url: string): Promise<unknown>;
+    isUserAvatar?: boolean;
 }
 
-const MiniAvatarUploader: React.FC<IProps> = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+const MiniAvatarUploader: React.FC<IProps> = ({
+    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children,
+}) => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
     const [hover, setHover] = useState(false);
@@ -54,7 +57,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);

From b6b9d67abc5df70f6380ec7c220f8ad83e232a21 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 3 May 2022 13:26:39 +0200
Subject: [PATCH 2/4] welcome screen: show for everyone without avatar

---
 src/components/structures/HomePage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index daa0e3b9691..a3aec945c13 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -101,7 +101,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");

From d5f22b3546bf65689fbda9db8e59de18500802d6 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Tue, 3 May 2022 13:41:52 +0200
Subject: [PATCH 3/4] welcome screen: add analytics to mini avatar upload

---
 src/components/structures/HomePage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index a3aec945c13..6facd941030 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -74,7 +74,10 @@ const UserWelcomeTop = () => {
             hasAvatar={!!ownProfile.avatarUrl}
             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)}
+            setAvatarUrl={async url => {
+                PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton");
+                await cli.setAvatarUrl(url);
+            }}
             isUserAvatar
         >
             <BaseAvatar

From 2c71502cf95961a472d528f96d5d43a6a3df70c8 Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <jannemk@element.io>
Date: Wed, 4 May 2022 15:16:08 +0200
Subject: [PATCH 4/4] welcome screen: track actual click interaction with
 upload avatar button

---
 src/components/structures/HomePage.tsx        |  6 ++----
 .../views/elements/MiniAvatarUploader.tsx     | 20 +++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx
index 6facd941030..e84d115e43d 100644
--- a/src/components/structures/HomePage.tsx
+++ b/src/components/structures/HomePage.tsx
@@ -74,11 +74,9 @@ const UserWelcomeTop = () => {
             hasAvatar={!!ownProfile.avatarUrl}
             hasAvatarLabel={_tDom("Great, that'll help people know it's you")}
             noAvatarLabel={_tDom("Add a photo so people know it's you.")}
-            setAvatarUrl={async url => {
-                PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton");
-                await cli.setAvatarUrl(url);
-            }}
+            setAvatarUrl={url => cli.setAvatarUrl(url)}
             isUserAvatar
+            onClick={ev => PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton", ev)}
         >
             <BaseAvatar
                 idName={userId}
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 3bb8f4a302c..c501c92ac9f 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 AccessibleButton from "./AccessibleButton";
-import Spinner from "./Spinner";
+import Analytics from "../../../Analytics";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
 import { useTimeout } from "../../../hooks/useTimeout";
-import Analytics from "../../../Analytics";
 import { TranslatedString } from '../../../languageHandler';
-import RoomContext from "../../../contexts/RoomContext";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import AccessibleButton from "./AccessibleButton";
+import Spinner from "./Spinner";
 
 export const AVATAR_SIZE = 52;
 
@@ -35,10 +35,11 @@ interface IProps {
     hasAvatarLabel?: TranslatedString;
     setAvatarUrl(url: string): Promise<unknown>;
     isUserAvatar?: boolean;
+    onClick?(ev: MouseEvent<HTMLInputElement>): void;
 }
 
 const MiniAvatarUploader: React.FC<IProps> = ({
-    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children,
+    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children, onClick,
 }) => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
@@ -66,7 +67,10 @@ const MiniAvatarUploader: React.FC<IProps> = ({
             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);