Style and remove "Save" button for Default Room Settings

[nickmurray47]

Details

"Save" button is hidden for default/archived rooms and updated the style.

Fixed Issues

$ GH_LINK

Tests / QA Steps

1. See default room - either #announce or #admins
2. Click room avatar
3. Click settings
4. Verify "Save" button is no longer visible and text inputs are just text.
5. Click "+" Global create, create a new room, add name and in the new room's settings, verify you can edit and save the name of the room but not the workspace.

PR Review Checklist

Contributor (PR Author) Checklist

• I verified the PR has a small number of commits behind main
• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I clearly indicated the environment tests should be run in (Staging vs Production)
• I wrote testing steps that cover success & fail scenarios (if applicable)
• I included screenshots or videos for tests on all platforms
• I ran the tests & verified they passed on:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • MacOS / Desktop
• I verified there are no console errors related to changes in this PR
• I followed proper code patterns (see Reviewing the code)
  • I added comments when the code was not self explanatory
  • I put all copy / text shown in the product in all src/languages/* files (if applicable)
  • I followed proper naming convention for platform-specific files (if applicable)
  • I followed style guidelines (in Styling.md) for all style edits I made
  • I followed the JSDocs style guidelines (in STYLE.md)
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I corroborated the UI performance was not affected (the performance is the same than main branch)
• If I created a new component I verified that a similar component doesn't exist in the codebase

PR Reviewer Checklist

• I verified the PR has a small number of commits behind main
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the testing environment is mentioned in the test steps
• I verified testing steps cover success & fail scenarios (if applicable)
• I checked that screenshots or videos are included for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • MacOS / Desktop
• I verified there are no console errors related to changes in this PR
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified comments were added when the code was not self explanatory
  • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
  • I verified proper naming convention for platform-specific files was followed (if applicable)
  • I verified style guidelines were followed
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified the UI performance was not affected (the performance is the same than main branch)
• If a new component is created I verified that a similar component doesn't exist in the codebase

Screenshots

Web

default room

new room

Mobile Web

Desktop

iOS

Android


[nickmurray47]

cc @shawnborton what do you think of the initial Web screenshot?

[shawnborton]

Just to make sure I am following, in this case the room name input is not editable right? Same with the workspace input?

[nickmurray47]

in this case the room name input is not editable right? Same with the workspace input?

Correct, they are both not editable. Should we make that clear to the end-user? We could gray the text box out.

[shawnborton]

I was thinking we'd use this pattern when the input is read-only and can't be edited:

[nickmurray47]

got it, will update

[nickmurray47]

[shawnborton]

So close! Final details would be that the total height of the small label + value should be 40px:

And we get that by making that upper label have a line height of 16px, a bottom margin of 4px, and then the value below has a line height of 20px.

[nickmurray47]

How do we feel about the lefthand spacing difference between the picker and the two labels below it? Also looks a little off to me but not sure if that's intended.

[shawnborton]

I think it's okay for now. Ideally at some point we will convert the notifications select menu to be a "push input" and the page would look like this:

And tapping that would take you to a new page.

[bondydaa]

no blockers from me, going to tap someone else who's actually written App code though too.

[nickmurray47]

screenshots and review comments updated, gonna pull in one more App reviewer!

[shawnborton]

How exactly does the visibility: restricted stuff work? I feel like that should look identical to the sections above it where "Visibility" is in the smaller gray text.

[nickmurray47]

How exactly does the visibility: restricted stuff work?

It's a setting you adjust when you create the room, it seems. "Private" is invite-only and "Restricted" means that anyone in the workspace can see it.

I feel like that should look identical to the sections above it where "Visibility" is in the smaller gray text.

Would the "Visibility" + restricted/private appear on the same line? It seems like for this setting we have three sections.

[nickmurray47]

How does this look @shawnborton?

[shawnborton]

Looks great!

…

On Wed, Mar 16, 2022 at 12:56 PM Nicholas Murray ***@***.***> wrote: How does this look @shawnborton <https://github.com/shawnborton>? [image: Screen Shot 2022-03-16 at 12 55 20 PM] <https://user-images.githubusercontent.com/24466196/158678882-e857d98a-73c4-4bff-abe1-cd06b766ed77.png> — Reply to this email directly, view it on GitHub <#8164 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5XLQ2XNALZWI2BX5N3VAI4FFANCNFSM5QZSSYNA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[nickmurray47]

checks pass, ready for review @stitesExpensify @bondydaa

[shawnborton]

Nice, I think you just need to update the screenshots given the "Visibility" changes and then we're good.

[nickmurray47]

screenshots updated, gonna merge soon

[shawnborton]

I'll go ahead and merge this one.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @shawnborton in version: 1.1.44-0 🚀

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