[HOLD for payment 2022-03-31] Update avatars for #announce and #admins default rooms

[kevinksullivan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Add account to defaultRooms beta
2. Search for a default room - either #announce or #admins
3. See avatar

Expected Result:

Avatars should be more related to the purpose of the room itself:

• #announce - Mega phone
  
• #admins - shield
  

Actual Result:

Both rooms use a couch icon

Notes/Photos/Videos:

Slack conversation: https://expensify.slack.com/archives/C02MW39LT9N/p1646421753395089?thread_ts=1646419035.253859&cid=C02MW39LT9N

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @trjExpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[kevinksullivan]

Well would ya look at that @trjExpensify 😀 !

[MelvinBot]

Triggered auto assignment to @bondydaa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[trjExpensify]

My, my.. issue looks good! I'll keep myself assigned for the CM piece anyhow, once Bondy has given it the all clear and adds the External label.

[MelvinBot]

Current assignee @trjExpensify is eligible for the External assigner, not assigning anyone new.

[bondydaa]

👍 seems straight forward, throwing external on this one

[thesahindia]

Proposal

We need to add two more functions in reportUtils.js

/**
 * Whether the provided report is a Announce room
 * @param {Object} report
 * @param {String} report.chatType
 * @returns {Boolean}
 */
function isAnnounceRoom(report) {
    return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE;
}

/**
 * Whether the provided report is a Admins room
 * @param {Object} report
 * @param {String} report.chatType
 * @returns {Boolean}
 */
function isAdminsRoom(report) {
    return lodashGet(report, ['chatType'], '') === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS;
}

and we can add these in getAvatarSources function to return different avatar

        if (ReportUtils.isAdminsRoom(report)) {
            return Expensicons.AdminsRoomAvatar;
        }
        if (ReportUtils.isAnnounceRoom(report)) {
            return Expensicons.AnnounceRoomAvatar;
        } 

App/src/libs/OptionsListUtils.js

Lines 214 to 229 in 3696074

	function getAvatarSources(report) {
	return _.map(lodashGet(report, 'icons', ['']), (source) => {
	if (source) {
	return source;
	}
	if (ReportUtils.isArchivedRoom(report)) {
	return Expensicons.DeletedRoomAvatar;
	}
	if (ReportUtils.isChatRoom(report)) {
	return Expensicons.ActiveRoomAvatar;
	}
	if (ReportUtils.isPolicyExpenseChat(report)) {
	return Expensicons.Workspace;
	}
	return Expensicons.Profile;
	});

and need to add new icons in Expensicons.js

Also if we don't wanna add these functions we can just directly check if it's an announce/admins room like below -

        if (reports.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE) {
            return Expensicons.AdminsRoomAvatar;
        }
        if (reports.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS {
            return Expensicons.AnnounceRoomAvatar;
        }

but using functions will be better.

[trjExpensify]

Issue on Upwork here: https://www.upwork.com/jobs/~01a413a7606e22ee6b

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (Exported)

[MelvinBot]

Triggered auto assignment to @stitesExpensify (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

Hmm, I spent too much time thinking if we can do this in a cleaner way.

[rushatgabhane]

🎀 👀 🎀 C+ reviewed

@stitesExpensify I like @thesahindia's proposal.

[stitesExpensify]

I also like the proposal! @thesahindia I also agree that functions is the way to go here.

Feel free to apply on upwork Sahil!

[thesahindia]

Feel free to apply on upwork Sahil!

Done ✅

Looks like we don't have these icons right now. @kevinksullivan, can you please share the SVGs here?

[stitesExpensify]

cc @Expensify/design do these icons exist yet?

[shawnborton]

I can grab this one. I think the room icons are provided as full square svgs? @stitesExpensify can you share here what the existing room icon looks like, then I will provide new ones? I think we had previously chatted about making them all use a dark background so perhaps we can make that change here too.

[shawnborton]

These are the icons we need right?

[stitesExpensify]

@thesahindia you can take it from here with shawn :)

[trjExpensify]

#8147 (comment) - Hired on Upwork, assigning you the issue @thesahindia. 👍

[rushatgabhane]

@shawnborton the existing icons are circle svgs, and grey in color.

[shawnborton]

Great, here are the updated icons: Expensify-RoomIcons.zip

[MelvinBot]

📣 @thesahindia You have been assigned to this job by @trjExpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[trjExpensify]

Waiting on a prod deploy, Melv!

[mountiny]

This should be good to be paid out on Thursday. There was a bug with the deploy comments all was deployed to production one week ago!

[shawnborton]

Looks like we're all good here?

[trjExpensify]

Yeah, I think they look great! If anything, do you reckon Chronos and Concierge icons need a spruce now to be bolder?

[shawnborton]

I think they are okay for now.

[trjExpensify]

Cool, cool. Settled up!