Draft: Organization application settings frontend architecture

Designs: #419543 (comment 2028474262)

Discovery into frontend architecture to move application settings over to Organizations.

The below flow charts use the General -> Visibility and access controls section as an example

1️⃣ HAML updated with full page reload

POC

Draft: POC for application settings in HAML wit... (!163399 - closed)

Demo

https://www.youtube.com/watch?v=GE3lSZweK-8

Mermaid charts

Rendered in Admin area
graph TD
    controllerGeneral[Admin::ApplicationSettingsController#general]
    controllerGeneral --> finder[@application_setting = ::ApplicationSetting.current_without_cache]
    finder --> hamlForm[HAML form in `Visibility and access controls` section]
    hamlForm --> organizationSelector[Vue application with organization selector]
    organizationSelector --> selectOrganization[User selects organization]
    selectOrganization -->|update query string with settings section and Org ID|controllerGeneral
    hamlForm -->|change form fields| submitForm[Submit form]
    submitForm -->|POST json| controllerUpdate[Admin::ApplicationSettingsController#update]
    controllerUpdate --> updateService[Organizations::ApplicationSettings::UpdateService]
    submitForm -->|listen for `ajax:success`|successAlert[success alert]
Rendered in organization dashboard
graph TD
    controllerGeneral[Organizations::ApplicationSettingsController#general]
    controllerGeneral --> finder[@application_setting = Organizations::ApplicationSetting.current_without_cache]
    finder --> hamlForm[HAML form in `Visibility and access controls` section]
    hamlForm -->|change form fields| submitForm[Submit form]
    submitForm -->|POST json| controllerUpdate[Organizations::ApplicationSettingsController#update]
    controllerUpdate --> updateService[Organizations::ApplicationSettings::UpdateService]
    submitForm -->|listen for `ajax:success`|successAlert[success alert]

Pros

  • No changes required to the HAML code for each setting
  • No JavaScript manipulation required to change the value of each setting
  • Move settings without migrating to Vue
  • Settings fields that are static (no interactivity) are rendered quicker than if they were rendered with Vue

Cons

  • Page needs to fully reload when changing the Organization in the Admin area. Not ideal UX.
  • Older HAML and Vanilla JavaScript is moved over to Organizations

2️⃣ HAML updated with async API call

POC

Draft: POC for application settings in HAML (!162082 - closed)

Demo

https://www.youtube.com/watch?v=eqxQX17iTBE

Mermaid charts

Rendered in Admin area
graph TD
    controllerGeneral[Admin::ApplicationSettingsController#general]
    controllerGeneral --> finder[@application_setting = ::ApplicationSetting.current_without_cache]
    finder --> hamlForm[HAML form in `Visibility and access controls` section]
    hamlForm --> organizationSelector[Vue application with organization selector]
    organizationSelector --> selectOrganization[User selects organization]
    selectOrganization -->|GraphQL request|graphqlResolver[Resolvers::Organizations::ApplicationSettingsResolver]
    graphqlResolver -->|"`update form field values and form action so controller knows what organization to use`"| hamlForm
    hamlForm -->|change form fields| submitForm[Submit form]
    submitForm -->|POST json| controllerUpdate[Organizations::ApplicationSettingsController#update]
    controllerUpdate --> updateService[Organizations::ApplicationSettings::UpdateService]
    submitForm -->|listen for `ajax:success`|successAlert[success alert]
Rendered in organization dashboard
graph TD
    controllerGeneral[Organizations::ApplicationSettingsController#general]
    controllerGeneral --> finder[@application_setting = Organizations::ApplicationSetting.current_without_cache]
    finder --> hamlForm[HAML form in `Visibility and access controls` section]
    hamlForm -->|change form fields| submitForm[Submit form]
    submitForm -->|POST json| controllerUpdate[Organizations::ApplicationSettingsController#update]
    controllerUpdate --> updateService[Organizations::ApplicationSettings::UpdateService]
    submitForm -->|listen for `ajax:success`|successAlert[success alert]

Pros

  • No changes required to the HAML code for each setting
  • Move settings without migrating to Vue
  • Settings fields that are static (no interactivity) are rendered quicker than if they were rendered with Vue
  • Page does not need to reload when changing organizations in the admin area.

Cons

  • Requires some JavaScript DOM manipulation to update values of settings without reloading the page. This can feel a bit brittle.
  • Older HAML and Vanilla JavaScript is moved over to Organizations

3️⃣ Vue

POC

Draft: POC for application settings in Vue (!161964 - closed)

Demo

https://www.youtube.com/watch?v=1yv4n52yeQc

Mermaid charts

Rendered in Admin area
graph TD
    controllerGeneral[Admin::ApplicationSettingsController#general] --> hamlPage[HAML page]
    hamlPage --> vueApp[Vue application with organization selector]
    vueApp -->|GraphQL request|graphQLResolver[Resolvers::Organizations::ApplicationSettingsResolver]
    graphQLResolver -->|update form fields| vueForm[Vue form in `Visibility and access controls` section]
    vueForm -->|change form field|submitForm[submit form]
    submitForm -->|GraphQL request| graphQLMutation[Mutations::Organizations::ApplicationSettings::Update]
    graphQLMutation --> successAlert[success alert]
    vueApp --> selectOrganization[user selects organization]
    selectOrganization -->|GraphQL request|graphQLResolver
Rendered in organization dashboard
graph TD
    controllerGeneral[Organizations::ApplicationSettingsController#general] --> hamlPage[HAML page]
    hamlPage --> vueApp[Vue application]
    vueApp -->|GraphQL request|graphQLResolver[Resolvers::Organizations::ApplicationSettingsResolver]
    graphQLResolver -->|update form fields| vueForm[Vue form in `Visibility and access controls` section]
    vueForm -->|change form fields|submitForm[submit form]
    submitForm -->|GraphQL request| graphQLMutation[Mutations::Organizations::ApplicationSettings::Update]
    graphQLMutation --> successAlert[success alert]

Pros

  • Page does not need to reload when changing organizations in the admin area
  • Settings will comply with Pajamas Design system because they will use Vue components
  • No older HAML or JavaScript will be moved to Organizations
  • Settings can be fetched async per section which could potentially speed up the initial load of the page

Cons

  • Moving every setting from HAML to Vue will be time consuming and difficult for some of the more complex settings
  • Static settings that do not need interactivity will render slower than if built with HAML
Edited by Peter Hegman