Add indicators to let the user know if they are on staging or dev #2506

Jag96 · 2021-04-21T01:13:53Z

@roryabraham @shawnborton will you please review this?

Details

This PR adds visuals to the sign in screen, the main app screen, and the desktop icon to let the user know what environment they are running the app in (dev/staging/prod).

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/158445

Tests

Run the app on dev on all platforms and sign out, confirm that you see a dev badge on the sign-in screen logo. On desktop, confirm you see a dev badge for the doc icon.
Login to any account, confirm after logging in you see a dev badge on the main app screen next to Chats, and that the badge also shows up in Settings
On desktop, run npm run desktop-build-staging, then open the Expensify.cash app inside dist/mac. Confirm the icon has the stg badge.
Confirm on the sign-in screen the icon has a stg badge. Sign in and confirm the stg badge shows up next to Chats and Settings
Update your .env file to include ENVIRONMENT=STAGING and run the app on web/ios/android, confirm you see the stg badge on the sign-in screen and in the app
Update your .env file to include ENVIRONMENT=PRODUCTION and run the app on web/ios/android, confirm you see no badges on the sign-in screen and in the app

QA Steps

Confirm that when running the app on staging, a STG badge appears on the sign in screen icon, and in the main app next to Chats and Settings (after login)
2. Confirm that on desktop, the desktop icon shows with the STG badge
Confirm that when running the app on prod, there are no badges

Tested On

Screenshots

Web/Mobile Web/Desktop

Dev	Staging	Prod

iOS/Android

Dev	Staging

src/components/EnvironmentBadge.js

Jag96 · 2021-04-22T00:19:24Z

desktop/main.js

+    // Prod and staging set the icon in the electron-builder config, so only update it here for dev
+    if (isDev) {
+        app.dock.setIcon(`${__dirname}/icon-dev.png`);
+        app.setName('Expensify.cash');


On dev, Electron is still shown in the dock and in the OS menu bar. https://www.electronjs.org/docs/tutorial/application-distribution had some examples on how to make this display properly on mac but I wasn't able to sort it out. Open to suggestions to fix that.

I personally think that this is fine to leave on dev.

Jag96 · 2021-04-22T00:20:55Z

src/styles/styles.js

@@ -231,7 +231,6 @@ const styles = {

    badge: {
        backgroundColor: themeColors.badgeDefaultBG,
-        borderRadius: 14,


For the IOUbadge, this border-radius is now set to 12 instead of 14 since I wanted to keep the increments of small/medium/large as multiples of 4 like we do for the spacing file. @shawnborton let me know if this should be set back to 14 and I can update the value in the new borders.js file.

I think for badges, we want them to look like rounded pills and not rounded rectangles because buttons look like rounded rectangles. So maybe go the other way and jack this up to 16 or 20?

Here's what 16 and 20 look like, I can update to either

16 20

Hmm I am not seeing a difference. Just to make sure we're on the same page, I think the style we are using for the $2.00 in your mockup is the general style we have for badges, and we should just reuse that style for the Chats header too.

Ah ok sounds good, I'll revert the styles then so both badges have the old border-radius that the IOUBadge had

For some reason the pill doesn't look perfectly rounded, but maybe my eyes are playing tricks on me. Can you double check that the "DEV" pill is only 20px tall? if that's the case, a border radius of > 10px should make it perfectly round.

Here's the box model and element style for the DEV div

Is it just me, or is the text in the pill (both DEV and $2.00) not completely centered?

Can we see w/ borderRadius: 14?

Here it is with 14

roryabraham

Just some minor comments, haven't tested yet

src/CONFIG.js

src/components/EnvironmentBadge.js

src/components/ExpensifyCashLogo.js

roryabraham · 2021-04-22T16:58:45Z

src/styles/styles.js

@@ -231,7 +231,6 @@ const styles = {

    badge: {
        backgroundColor: themeColors.badgeDefaultBG,
-        borderRadius: 14,


Is it just me, or is the text in the pill (both DEV and $2.00) not completely centered?

roryabraham · 2021-04-22T16:59:17Z

src/styles/styles.js

@@ -231,7 +231,6 @@ const styles = {

    badge: {
        backgroundColor: themeColors.badgeDefaultBG,
-        borderRadius: 14,


Can we see w/ borderRadius: 14?

roryabraham

Okay, code LGTM 👍

@shawnborton I leave any remaining design-themed reviews in your capable hands 🙇🏽‍♂️

Jag96 · 2021-04-26T17:13:25Z

@shawnborton pulling this out of the thread, here's the updated border-radius of 14 for both badges

shawnborton · 2021-04-26T21:03:14Z

Looks good to me!

roryabraham · 2021-04-26T21:05:48Z

@Jag96 Sorry bud, you've got conflicts 🙂

Jag96 · 2021-04-27T01:14:46Z

Conflicts resolved

roryabraham · 2021-04-27T01:46:34Z

Nice!

roryabraham

Cool. This PR just makes the staging / QA process feel so much more real for me. 😁

OSBotify · 2021-04-27T02:17:00Z

🚀 Deployed to staging in version: 1.0.31-2🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

isagoico · 2021-04-27T18:48:12Z

iOS/Android - STG badge doesn't appear

Expected Result

An STG badge appears on the sign-in screen icon, and in the main app next to Chats and Settings (after login)

Actual Result

STG badge doesn't appear

Action performed

Install test build 1.0.32-0
Open sign-in screen
Login
Observe chat screen
Open settings

Platform

Issue confirmed in:

iOS ✔️
Android ✔️

Notes/Images/Video

Jag96 · 2021-04-27T18:59:23Z

@isagoico thanks! I'll create an issue and have a look, no need to block the deploy

OSBotify · 2021-05-08T01:43:19Z

🚀 Deployed to production in version: 1.0.39-5🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

Jag96 added 6 commits April 20, 2021 13:48

add new icons

58edb14

add new component for ExpensifyCashLogo

2b5e6eb

Add environment variable and set logo dynamically

c679039

update other svg imports to use new component

432d29c

add environmentBadge

65a5ee5

remove unnecessary var

f6608c6

Jag96 self-assigned this Apr 21, 2021

shawnborton reviewed Apr 21, 2021

View reviewed changes

src/components/EnvironmentBadge.js Outdated Show resolved Hide resolved

Jag96 added 4 commits April 21, 2021 10:32

style environmentBadge

00dfb7a

fix error for production runs

4c49990

show dev icon for dev builds

f9ae00e

set app name for dev

c08fd7f

Jag96 requested a review from roryabraham April 22, 2021 00:16

Jag96 marked this pull request as ready for review April 22, 2021 00:16

Jag96 requested a review from a team as a code owner April 22, 2021 00:16

MelvinBot requested review from ctkochan22 and removed request for a team April 22, 2021 00:17

Jag96 commented Apr 22, 2021

View reviewed changes

use old border-radius for all badges

7e12f38

roryabraham reviewed Apr 22, 2021

View reviewed changes

Jag96 added 2 commits April 22, 2021 12:34

use constants, review refactors

0106b20

use switch

92c4a8d

roryabraham previously approved these changes Apr 23, 2021

View reviewed changes

shawnborton previously approved these changes Apr 26, 2021

View reviewed changes

merge main

e50a700

Jag96 dismissed shawnborton’s stale review via e50a700 April 27, 2021 01:11

Jag96 dismissed roryabraham’s stale review via e50a700 April 27, 2021 01:11

roryabraham self-requested a review April 27, 2021 01:36

roryabraham approved these changes Apr 27, 2021

View reviewed changes

roryabraham merged commit da26cfe into main Apr 27, 2021

roryabraham deleted the joe-platform-icons branch April 27, 2021 01:47

OSBotify mentioned this pull request Apr 27, 2021

Deploy Checklist: Expensify.cash 2021-04-13 #2380

Closed

66 tasks

Jag96 mentioned this pull request Apr 27, 2021

Only show environment badge next to chats header #2593

Merged

5 tasks

Jag96 mentioned this pull request Apr 27, 2021

STG badge doesn't appear on iOS/Android #2597

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add indicators to let the user know if they are on staging or dev #2506

Add indicators to let the user know if they are on staging or dev #2506

Jag96 commented Apr 21, 2021 •

edited

Loading

Jag96 Apr 22, 2021

roryabraham Apr 22, 2021

Jag96 Apr 22, 2021

shawnborton Apr 22, 2021

Jag96 Apr 22, 2021

shawnborton Apr 22, 2021

Jag96 Apr 22, 2021

shawnborton Apr 22, 2021

Jag96 Apr 22, 2021

roryabraham Apr 22, 2021

roryabraham Apr 22, 2021

Jag96 Apr 22, 2021

roryabraham left a comment

roryabraham Apr 22, 2021

roryabraham Apr 22, 2021

roryabraham left a comment

Jag96 commented Apr 26, 2021

shawnborton commented Apr 26, 2021

roryabraham commented Apr 26, 2021

Jag96 commented Apr 27, 2021

roryabraham commented Apr 27, 2021

roryabraham left a comment

OSBotify commented Apr 27, 2021

isagoico commented Apr 27, 2021

Jag96 commented Apr 27, 2021

OSBotify commented May 8, 2021

Add indicators to let the user know if they are on staging or dev #2506

Add indicators to let the user know if they are on staging or dev #2506

Conversation

Jag96 commented Apr 21, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web/Mobile Web/Desktop

iOS/Android

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roryabraham left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roryabraham left a comment

Choose a reason for hiding this comment

Jag96 commented Apr 26, 2021

shawnborton commented Apr 26, 2021

roryabraham commented Apr 26, 2021

Jag96 commented Apr 27, 2021

roryabraham commented Apr 27, 2021

roryabraham left a comment

Choose a reason for hiding this comment

OSBotify commented Apr 27, 2021

isagoico commented Apr 27, 2021

iOS/Android - STG badge doesn't appear

Expected Result

Actual Result

Action performed

Platform

Jag96 commented Apr 27, 2021

OSBotify commented May 8, 2021

Jag96 commented Apr 21, 2021 •

edited

Loading