### [:art: Figma design file](https://www.figma.com/file/HleI3QERmiISph4ChGa3Mv/%234219-Admin-%3EUsers-screen-UX-updates?node-id=2%3A2935&t=F5XRWAtIepEM98u0-1) ## Issue See originating issue: https://gitlab.com/gitlab-org/gitlab/-/issues/327378 The user edit screen has a two columns layout. We propose to convert the page to a standard, one column, layout similar to other settings. Follow-up: The `Admin / User / User details` page has an appearance that does not really look like it fits into our standard ~Pajamas UI. Can we make this screen more user friendly. As well, the `Edit` button takes users away from this screen to a completely different looking screen. Perhaps we can unify these experiences. This issue will address the `Edit` screen. | `Edit` user page | | ------ | |  | ## Proposal Convert page to our standard format for displaying Settings.  ## Implementation plan 1. Use [`parseRailsFormFields`](https://docs.gitlab.com/ee/development/fe_guide/vue.html#providing-rails-form-fields-to-vue-applications) to pass the form fields to a Vue application 1. Use [ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_upload_form.vue#L154](https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_upload_form.vue#L154) as an example of how to do the upload form. 1. For the MVC the way the form submits won't change. It will still submit as a normal HTTP request 1. The rest of the fields should be fairly easily rendered with `GlFormInput`, `GlFormCheckbox` and `GlFormRadio` ### Availability & Testing <!-- This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier. What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing? Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance. * Unit test changes * Integration test changes * End-to-end test change See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning --> Please run the `package-and-qa` job to ensure all existing end-to-end tests are fine.