From 2357f76cc864cc2f5a66a61b02761cb7ef0b3f90 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Sun, 2 Apr 2023 10:21:58 +0000
Subject: [PATCH] CALCOM-8011 - [CAL-1372] /workflows: Filters avatars not
 showing (#8036)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 packages/features/ee/workflows/pages/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index 99283ba05c..934f6e02a4 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
@@ -157,6 +158,7 @@ const Filter = (props: {
     slug: string | null;
     name: string | null;
     teamId: number | null | undefined;
+    image?: string | undefined | null;
   }[];
   checked: {
     userId: number | null;
@@ -171,7 +173,9 @@ const Filter = (props: {
 }) => {
   const session = useSession();
   const userId = session.data?.user.id || 0;
-  const userName = session.data?.user.name || "";
+  const user = session.data?.user.name || "";
+  const userName = session.data?.user.username;
+  const userAvatar = WEBAPP_URL + "/" + userName + "/avatar.png";
 
   const teams = props.profiles.filter((profile) => !!profile.teamId);
   const { checked, setChecked } = props;
@@ -183,9 +187,9 @@ const Filter = (props: {
       <AnimatedPopover text={noFilter ? "All" : "Filtered"}>
         <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
           <Avatar
-            imageSrc=""
+            imageSrc={userAvatar || ""}
             size="sm"
-            alt={`${userName} Avatar`}
+            alt={`${user} Avatar`}
             gravatarFallbackMd5="fallback"
             className="self-center"
             asChild
@@ -193,7 +197,7 @@ const Filter = (props: {
           <label
             htmlFor="yourWorkflows"
             className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700">
-            {userName}
+            {user}
           </label>
 
           <input
@@ -220,7 +224,7 @@ const Filter = (props: {
             className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
             key={`${profile.teamId || 0}`}>
             <Avatar
-              imageSrc=""
+              imageSrc={profile.image || ""}
               size="sm"
               alt={`${profile.slug} Avatar`}
               gravatarFallbackMd5="fallback"