Improve welcome screen, add opt-out analytics (#8474)

Author: justjanne

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");

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;
 
@@ -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);