Implementer Tools UI - Project Plan

Backend module management tab

Design

• Basically just the existing backed modules page

Create "Frontend modules" left nav

Design

• List frontend modules with pages at top; those with no pages under the break
• Clicking a module should reveal its config in the right panel (not in designs)

Configuration editor in right panel

Design

• Show configuration elements, appropriately formatted up to 1 level of nesting deep.
• Show slot configurations.
• Extensions should be draggable and deletable

• Make config system warn about any schemas that have nesting more than one level deep
• Flatten existing nested config schemas

Make implementer tools wrap around the screen

Design

• Top bar with "UI editor" and "Module manager"
• Left bar with Pages and Extensions buttons
• Right bar with "Nothing selected'
• Toggle between desktop and tablet view
• Download button

Should / Hard

The design is really built around this, though it requires pretty brutal CSS hacks.

We may end up deciding to keep the current bottom-drawer style.

Create "Pages" navigation scheme

Design

• Allow access even to pages that have dynamic URL parts
• Create a new way of defining pages that gives app shell access to their featureName
• Include modules with no pages (Styleguide, API) under a line break

• Split Login page into separate Login and Location pages
• Ensure all page featureNames are nice

Create sub-pages navigation scheme

Design

• Have core manage the left nav. It could produce the left nav as an extension which the patient chart simply plugs in to a slot.

• Slots should support setting configurable={false}  for examples like this left nav extension.

Array of objects modal editor

Design

• Config elements which have "array of object" type should bring up a modal for adding a new element
• Config elements which have "freeform object" type should bring up the same modal, and show "key" as a field name in the modal.

• Patient chart should support adding dashboards via config

Create "View connections" modal from "Frontend modules" view

Design (and next screen)

• Clicking "View connections" brings up modal showing the frontend module's Pages
• "View connections" should not appear for any frontend module which has no pages
• Clicking a page jumps to that page in the implementer tools "Pages" navigation

Add extension modal

Design

• Modal that lists extensions that can be added
• Extensions should have descriptions
• Search bar that filters list of extensions

• Extensions and slots should have "types"

• Clicking the "edit" button on an extension should open the configuration in the right pane for that extension specifically
• The extension should have a purple border in the UI when its configuration is open in the right pane

• Extensions should be able to tell the app shell what subset of the module config schema they use

Concepts tab of configuration pane

Design

• If a config schema has a top-level element "concepts," its contents are shown in the "Concepts" tab, separate from the rest of the config

Add extension from template

Design and next 3 screens

• If templates are available for the Type of the selected slot, a "Create extension from template" link should appear
• Add app shell support for "templates." These are registered like extensions, but under a "templates" key in setupOpenMRS , and they also get added to a registry of templates, which probably can be managed by esm-extensions.
• Implement "select a template" modal
• Implement "customize your <template name>" modal
• Create registerTemplateConfig  that allows templates to register schemas that do not have defaults for everything.