From 04c679bf84ff40e3e37c20eeffa62f6fdf301678 Mon Sep 17 00:00:00 2001
From: Ryan Srofe <ryan.srofe@formidable.com>
Date: Wed, 17 Apr 2024 11:50:44 -0400
Subject: [PATCH] hide and show user avatars (#82)

Co-authored-by: Christy Presler <6210279+cpresler@users.noreply.github.com>
Co-authored-by: Christy Presler <cpresler@users.noreply.github.com>
---
 widget-src/Widget.tsx                   | 11 +++++
 widget-src/components/ChangeLogList.tsx |  3 ++
 widget-src/components/ChangeLogRow.tsx  |  9 +++-
 widget-src/components/log/User.tsx      | 65 ++++++++++++-------------
 4 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/widget-src/Widget.tsx b/widget-src/Widget.tsx
index 4c14ae5..12257a8 100644
--- a/widget-src/Widget.tsx
+++ b/widget-src/Widget.tsx
@@ -16,6 +16,7 @@ function Widget() {
   const [showVersion, setShowVersion] = useSyncedState('showVersion', false);
   const [showBranding, setShowBranding] = useSyncedState('showBradning', true); // fixing the typo messes with branding state on existing widgets
   const [showLogTypes, setShowLogTypes] = useSyncedState('showLogTypes', true);
+  const [showAvatars, setShowAvatars] = useSyncedState('showAvatars', true);
   const [isLocked, setIsLocked] = useSyncedState('isLocked', false);
   // Meta Data
   const [createdDate, setCreatedDate] = useSyncedState('createdDate', 0);
@@ -107,6 +108,12 @@ function Widget() {
         propertyName: 'logTypes',
         isToggled: showLogTypes,
       },
+      {
+        itemType: 'toggle',
+        tooltip: 'Avatars',
+        propertyName: 'avatars',
+        isToggled: showAvatars,
+      },
       {
         itemType: 'toggle',
         tooltip: 'Branding',
@@ -142,6 +149,9 @@ function Widget() {
         case 'logTypes':
           setShowLogTypes(!showLogTypes);
           break;
+        case 'avatars':
+          setShowAvatars(!showAvatars);
+          break;
         case 'isLocked':
           setIsLocked(!isLocked);
           break;
@@ -191,6 +201,7 @@ function Widget() {
           deleteChange={deleteChange}
           setUpdatedDate={setUpdatedDate}
           showTypes={showLogTypes}
+          showAvatars={showAvatars}
           isLocked={isLocked}
         />
       )}
diff --git a/widget-src/components/ChangeLogList.tsx b/widget-src/components/ChangeLogList.tsx
index e314bfc..742bd44 100644
--- a/widget-src/components/ChangeLogList.tsx
+++ b/widget-src/components/ChangeLogList.tsx
@@ -12,6 +12,7 @@ interface ChangeLogListProps {
   deleteChange: (changeId: string) => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
+  showAvatars: boolean;
   isLocked: boolean;
 }
 
@@ -22,6 +23,7 @@ export const ChangeLogList = ({
   deleteChange,
   setUpdatedDate,
   showTypes,
+  showAvatars,
   isLocked,
 }: ChangeLogListProps) => {
   useEffect(() => {
@@ -58,6 +60,7 @@ export const ChangeLogList = ({
               deleteChange={() => deleteChange(changeLogId)}
               setUpdatedDate={setUpdatedDate}
               showTypes={showTypes}
+              showAvatars={showAvatars}
               locked={isLocked}
             />
           );
diff --git a/widget-src/components/ChangeLogRow.tsx b/widget-src/components/ChangeLogRow.tsx
index d339a2b..da6d8e1 100644
--- a/widget-src/components/ChangeLogRow.tsx
+++ b/widget-src/components/ChangeLogRow.tsx
@@ -17,6 +17,7 @@ interface ChangeLogRowProps {
   deleteChange: () => void;
   setUpdatedDate: (updatedDate: number) => void;
   showTypes: boolean;
+  showAvatars: boolean;
   locked: boolean;
 }
 
@@ -30,6 +31,7 @@ export const ChangeLogRow = ({
   deleteChange,
   setUpdatedDate,
   showTypes,
+  showAvatars,
   locked,
 }: ChangeLogRowProps) => {
   return (
@@ -42,7 +44,12 @@ export const ChangeLogRow = ({
       width="fill-parent"
     >
       <AutoLayout name="Wrapper" overflow="visible" spacing={GAP.md} width="fill-parent">
-        <User userName={changeLog.user?.name} userPhotoUrl={changeLog.user?.photoUrl} isLastRow={isLastRow} />
+        <User
+          userName={changeLog.user?.name}
+          userPhotoUrl={changeLog.user?.photoUrl}
+          showAvatars={showAvatars}
+          isLastRow={isLastRow}
+        />
         {!!changeLog.state?.editing && !locked ? (
           <ChangeLogEditing
             changeLog={changeLog}
diff --git a/widget-src/components/log/User.tsx b/widget-src/components/log/User.tsx
index 142c387..0335706 100644
--- a/widget-src/components/log/User.tsx
+++ b/widget-src/components/log/User.tsx
@@ -6,10 +6,11 @@ const { AutoLayout, Image, Rectangle, Text } = widget;
 interface UserProps {
   userName: string | undefined;
   userPhotoUrl: string | null | undefined;
+  showAvatars: boolean;
   isLastRow: boolean;
 }
 
-export const User = ({ userName, userPhotoUrl, isLastRow }: UserProps) => {
+export const User = ({ userName, userPhotoUrl, showAvatars, isLastRow }: UserProps) => {
   return (
     <AutoLayout
       name="User"
@@ -18,43 +19,41 @@ export const User = ({ userName, userPhotoUrl, isLastRow }: UserProps) => {
       spacing={GAP.none}
       padding={{
         top: PADDING.xl,
+        right: showAvatars ? PADDING.none : PADDING.sm,
         bottom: isLastRow ? PADDING.xxs : PADDING.xl,
-        horizontal: PADDING.none,
+        left: PADDING.none,
       }}
       height="fill-parent"
       horizontalAlignItems="center"
     >
-      <AutoLayout name="Avatar" overflow="visible" spacing={GAP.md} verticalAlignItems="center">
-        {userPhotoUrl ? (
-          <Image name="UserImage" cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} src={userPhotoUrl} />
-        ) : (
-          <Rectangle name="Placeholder" fill={COLOR.grey} cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} />
-        )}
-        <Text
-          name="UserName"
-          hidden={true}
-          fill={COLOR.black}
-          lineHeight={FONT.lineHeight.sm}
-          fontFamily={FONT.family}
-          fontSize={FONT.size.sm}
-          letterSpacing={FONT.letterSpacing.sm}
-          textCase="upper"
-        >
-          {userName || 'Unknown User'}
-        </Text>
-      </AutoLayout>
-      <Rectangle
-        name="Divider"
-        fill={COLOR.grey}
-        cornerRadius={{
-          topLeft: RADIUS.none,
-          topRight: RADIUS.none,
-          bottomRight: RADIUS.md,
-          bottomLeft: RADIUS.md,
-        }}
-        width={SPACE.one}
-        height="fill-parent"
-      />
+      {showAvatars && (
+        <AutoLayout name="Avatar" overflow="visible" spacing={GAP.md} verticalAlignItems="center">
+          {userPhotoUrl ? (
+            <Image name="UserImage" cornerRadius={RADIUS.lg} width={SPACE.sm} height={SPACE.sm} src={userPhotoUrl} />
+          ) : (
+            <Rectangle
+              name="Placeholder"
+              fill={COLOR.grey}
+              cornerRadius={RADIUS.lg}
+              width={SPACE.sm}
+              height={SPACE.sm}
+            />
+          )}
+          <Text
+            name="UserName"
+            hidden={true}
+            fill={COLOR.black}
+            lineHeight={FONT.lineHeight.sm}
+            fontFamily={FONT.family}
+            fontSize={FONT.size.sm}
+            letterSpacing={FONT.letterSpacing.sm}
+            textCase="upper"
+          >
+            {userName || 'Unknown User'}
+          </Text>
+        </AutoLayout>
+      )}
+      <Rectangle name="Divider" fill={COLOR.grey} cornerRadius={RADIUS.md} width={SPACE.one} height="fill-parent" />
     </AutoLayout>
   );
 };