Description

• Current Context
• Proposal
  • Quickswitch
    • Option 1
    • Option 2
  • Admin Section
    • Overview Page
    • Adding a new configuration
    • Editing a configuration

Current Context

Currently, on Cristal the switching between configurations is done via the cog icon on the sidebar. This is a development artifact only and should be changed before the final version.

When clicking this icon, a list of previously configured configs is shown.

Proposal

The new method being proposed includes a Quickswitch and an Admin page for config management.

Quickswitch

Quickswitch is the behavior of changing configs without going into the admin section. With this, users can select previously configured configs at will.

Another benefit of having this component in all pages of the wiki is as a reminder of the config currently selected. Something that can get tricky (or too cumbersome) to see without it.

We have two possible locations to place the switch access. At the top of the sidebar and at the bottom. Both have their advantages and disadvantages.

Switcher isolated:

Option 1

Name of the config on the bottom of the sidebar.

Pros:

- Out of the way, users don't see the switcher constantly on a high traffic area of the app.

Cons:

- Can be too hidden, some users will likely miss the switcher for a while. But it should be easily accessible when they do see its location.

Option 2

Name of the config on the top.

Pros:

- This brings the selector to a more prominent place.

- Provides a more direct relation between the config and what it contains. As in, everything under this section belongs to the config, even the logo.

Cons:

- Makes the UI a bit more convoluted.

- Users might hit it when trying to click the logo to go to the home page.

When clicking/touching the config name the rest of the available configs is shown for easy switching.

Admin Section

Overview Page

This page shows the current selected config in the top with the following fields:

• Logo
• Name
• Design System in use

Below it comes a list of already configured configs

• each line can be clicked to bring the edit page
• at the end of each line there are two buttons, to select the configuration and delete it (with confirmation)
• at the top of the table, there's a "New configuration" button.

Adding a new configuration

Clicking the "New Configuration" button brings a list of types of backend to select.

When selecting a backend, the configuration dialog is shown with the type already selected and the cursor positioned in "Name" so the user can start inputting the rest of the fields.

Editing a configuration

To start editing the configuration, the user must click or touch the line of the desired configuration. Note that there's no "Edit" button, this makes the UI a bit cleaner while still providing functionality.

The same configuration dialog will be used when editing the config.