[MM-12068] Add ability to remove custom branding image

[hahmadia]

NOTE
I am not very experienced and understanding of how the styling works within the APP. If someone could explain how to style a className that I attach to a <div/>, I would greatly appreciate it because I couldn't figure it out. Other than the styling, I think all else should be okay (unless I have implemented something incorrectly)

As a junior dev and a first contribution, all and any advice would be greatly appreciated.
Thank you!

Summary

This ticket gives the user the ability to remove custom branding image

Ticket Link

Fixes mattermost/mattermost#9507

Demonstration Video

[hanzei]

Hey @hahmadia,

looks like you have a linter error:

eslint --ignore-pattern node_modules --ignore-pattern non_npm_dependencies --ignore-pattern dist --ext .js --ext .jsx . --quiet


/root/mattermost-webapp/components/admin_console/schema_admin_settings.jsx
  600:41  error  use `Boolean(saveNeeded)` instead  no-implicit-coercion

[hahmadia]

Thanks for pointing that out @hanzei. I have fixed all lint + translation issues.

[esethna]

Thanks for the PR @hahmadia! @asaadmahmood may be able to help provide some styling guidance

[asaadmahmood]

One thing that's not working is if I lets say I don't have any image uploaded, but if I do upload it, the save button does not turn blue, I have to change some other setting to make it recognise that something has changed.

[asaadmahmood]

@hahmadia I have updated the css, please pull my changes from your remote branch before making any changes locally and pushing them.

[asaadmahmood]

@esethna We have an outstanding question on UX, which is, whether the save button should detect a change when a user uploads a picture.

The way it's currently implemented is that if a user uploads a picture, the save button does not change because I think it automatically uploads and saves it without the user performing a "Save" action like he does for all the other fields.

[esethna]

Thanks @hahmadia @asaadmahmood, as per the designs the user should have to hit the "Save" button after selecting an image from the file window:

https://projects.invisionapp.com/share/T6O2PN04EFC#/screens/320132211

[saturninoabril]

Functionality looks good. Only few requests, thanks @hahmadia!

[saturninoabril]

We're actually moving away from this pattern into a more redux-friendly format which is dispatching an action directly. That can be done by creating components/admin_console/brand_image_setting/index.js and from there pass uploadBrandImage and deleteBrandImage as actions into brand_image_setting.jsx. That would be not necessary for this PR but good to have.
Let me know what's your plan. That could also be done on separate PR if you're interested.

[hmhealey]

I think that can be done separately. I was going to ask for the newly-added action to be changed to the new format, but I didn't because the existing action would also need to be changed in that case.

[hahmadia]

As discussed through private messages, It was decided that this will be done in as a separate ticket and separate pull request.

[mattermod]

Mattermost test server updated with git commit c76e151c4814472b8edce85450bfee01953d277a.

Access here: https://mattermost-webapp-pr-3207.test.mattermost.cloud

[cpanato]

will remove the test server to do some maintenance in the cloud infra. will create a new test server after that

[saturninoabril]

Added unit test.

Looks good to me now, thank you @hahmadia for your contribution!

[mattermod]

Test server creation failed. See the logs for more information.