# Epic OP-13219 - File Storages - Administration settings with Primer
Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-13219
## Detailed specification
### Motivation and background information
### Acceptance criteria
### Out of scope
| Attribute | Value |
| --- | --- |
| Mockups | |
## Planning
| Attribute | Value |
| --- | --- |
| Roadmap | |
| Date | |
| Votes | |
| List | |
| Target versions | 13.1.0 |
| Sprint | 13.1.0 |
| Backlog bucket | |
| Relevance | |
## Subitems
| ID | Type | Subject | Status | Assignee | Target versions | Project | Priority | Spent time |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| OP-13247 | Implementation | Convert the index page to Primer design | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13358 | Implementation | Convert the edit page to Primer design | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13478 | Implementation | Add navigational elements (breadcrumb and back buttons) to the storage edit and new page | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13516 | Implementation | Add danger zone for storage delete | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13579 | Implementation | Convert new storage page to primer design | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13582 | Implementation | Allow setting Primer form input widths | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13685 | Implementation | Use correct input field widths in storage view component | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13686 | Implementation | Extend Primer page header view component with breadcrumbs and back navigation | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13697 | Implementation | Use Primer Flash for Administration settings with Primer | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13715 | Implementation | Extend Primer page header view component with parent link and default responsiveness | closed | | 13.1.0 | OpenProject | Medium | |
| OP-13717 | Feature | Test for basic accessibility for the new and edit (primer) file storage pages | closed | | 13.1.0 | OpenProject | Medium | |
## Bugs and other work packages
| ID | Type | Subject | Status | Assignee | Target versions | Module |
| --- | --- | --- | --- | --- | --- | --- |
| OP-13847 | Bug | Upon submitting the general info the storage view component is nested | closed | | 13.1.0 | |
| OP-13932 | Bug | Incomplete Automatically managed form does not toggle the submit button label | closed | | 13.1.0 | |
| OP-13850 | Task | Toggle Automatically managed password input on initial view render | closed | | 13.1.0 | |
| OP-13839 | Task | Update invalid provider flash error to primer | closed | | 13.1.0 | |
| OP-13785 | Task | Update OneDrive/SharePoint oauth client form design | closed | | 13.1.0 | |
| OP-13781 | Bug | When OAuth clients are "Incomplete" we should skip alert confirmation and icon should be pencil icon | closed | | 13.1.0 | |
| OP-13743 | Bug | Primer form input widths should account for mobile screens | closed | | 13.1.0 | |
| OP-13742 | Task | Update the button labels for the automatically managed form to change based on checkbox active | closed | | 13.1.0 | |
| OP-13718 | Task | Revisit the create storage workflow | closed | | 13.1.0 | |
| OP-13584 | Code maintenance | Replace `StorageErrorPresenter` with new contract x model errors | closed | | 13.1.0 | |
| OP-13583 | Code maintenance | Extract `InputGroup` and primerise sizes | closed | | 13.1.0 | |
| OP-13581 | Bug | DELETE storage button fails and is converted to a GET request | closed | | 13.1.0 | |
| OP-13580 | Bug | On Storage name update, also update PageHeader title without refreshing the full page | closed | | 13.1.0 | |
| OP-13710 | Bug | Long text overflows in MOBILE storage primer views | rejected | | 13.1.0 | |
| OP-13597 | Bug | OAuth ID overflows in mobile screens | rejected | | 13.1.0 | |
| OP-13723 | Code maintenance | Enable OAuth Client Form submit button and show validation errors in case of invalid submission | closed | | 13.1.1 | |
| OP-13824 | Bug | In mobile view, the primer banner does not take the full width | closed | | 13.2.0 | |
| OP-13819 | Bug | Dismiss action of the primer banner is not translated | closed | | 13.2.0 | |
| OP-13588 | Code maintenance | Remove obsolete file storages translations (title was updated) | closed | | 13.2.0 | |
## Details
| Attribute | Value |
| --- | --- |
| Module | |
| Enterprise plan | |
| Labels | |
## People
| Attribute | Value |
| --- | --- |
| Assignee | |
| Accountable | |
| Product manager | |
| Designer | Marc Alcobé |
| Developers | OP Dev Titan Team |
| Requested by | |
| Interest by | |
## Estimates and progress
| Attribute | Value |
| --- | --- |
| Work | |
## Description
# User Problem
## User
- Administrator
## Problem
- The current setup is complex to follow.
- The current structure divides the setup in multiple steps where you lose context of the previous points.
- Is not adapted to the new system with Primer.
##
# Business Case
## Solution
- Implement a two phase solution to transform the current administration setup to use Primer components and improve the UX:
1. **Primer migration:** Change the current OP forms to Primer forms without touching the architecture of the setup (keep the separate pages for each step). This allows us to be sure we can release a Primer form based setup in case the step 2 is not completed in this release. Please note, there is no designs for this point.
2. **Unique page solution:** Improve the setup page by transforming the steps in a single page approach (based on these [designs](https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?type=design&node-id=4974-117398&mode=design)). This step will improve the UX of the flow and achieve an even more Primer look and feel.
- There is an option to keep the 2nd step under feature flag in order to release it in the feature when is complete.
## Out of Scope
- This does not add any extra feature or step to the current process but prepares the screen for future development coming.
- The flow of SharePoint/OneDrive is tracked separately in ##36057.
## Next iteration
- Add the option to include the created file storages into projects without need to navigate to the Project settings.
- Transform the project settings into Primer based.
## Open questions
- Using deprecated components or reworking them into a OP Primer component?
- Do we want the user to be able to modify data already entered in previous steps in the middle of the setup?
- Do we want to display the filled information (like in NC) in the already completed steps?
- There is need to review the texts properly to make sure they are clear.
# Acceptance criteria
1. **Phase 1 - Primer migration:**
- All the current pages architecture and navigation is maintained.
- The form content of each page/step of the process is migrated to Primer keeping their functionality.
- The index page of the storage is transformed according to these [designs](https://www.figma.com/file/gtLQfPe09X7XugAH8L7dTy/Nextcloud-Integration?type=design&node-id=4974-117412&mode=design&t=UkcAirwSLuBAwlZE-4).
2. **Phase 2 - Unique page solution:**
- Bring all the steps of the setup into a step by step approach but in a single page following the mockups.
- Use Primer (or OP Primer) components only for the creation of the page as indicated in the designs.
- The selection of the storage provider should dynamically change the required fields and blocks needed for the setup.
- The forms in Primer allow always to click the "Save" button. In case the user hasn't filled a mandatory field or there is an error, display the same error messages already developed.
- The success message after completing the setup is happening on top of the index page in a full width flash format.
- Editing an already existing storage will enter a page with the General Information open in edit mode and the other sections collapsed with their respective edit/replace actions.
# Figma
All designs and references available in: