Configu App

[rannn505]

Suggestion

Develop a web interface for the Configu OSS project to provide an interactive, user-friendly environment for managing configuration data. This interface will be a single-page application (SPA) built using React and Next.js, incorporating shadcn/ui for UI components and Monaco Editor for advanced code editing capabilities. This application will be accessible through the --interactive flag alongside existing Configu CLI commands or directly via the configu app command. The primary goal is to offer an alternative to the CLI, catering to users who prefer graphical interfaces or require a more integrated view of their Configu configurations.

Motivation

The current Configu toolset includes a CLI and a proxy server, which, while powerful, can be enhanced with a graphical interface to accommodate a wider range of user preferences and to simplify complex configurations. The introduction of a web app aims to reduce the learning curve for new users, increase productivity by visualizing configuration data, and streamline the workflow for creating, editing, and managing configurations.

Context

Key Features and Functionalities:

• App Launch and Main Interface: Users can launch the web app using --interactive with any Configu command or directly through configu app. The main interface displays the first .configu file found, along with all related .cfgu files. It categorizes data into sections like stores, schemas, and scripts, providing a comprehensive overview and easy management options.

• Stores Section: Lists all ConfigStores found in the .configu file, with an action menu for each store including "run test command". Features a main action button for adding new stores directly from the UI.

• Schemas Section: Displays all Schemas located in the .configu file and additional ones found in current or nested directories. Each schema entry comes with an action menu offering "edit schema" and a main action for "create schema". The schema creation supports both blank files in JSON/YAML format and selection from predefined ConfigSchema example templates.

• Scripts Section: Enumerates all scripts specified in the .configu file, providing an action menu with "run script" for each script and a main action for "create script".

• Dedicated Command Interfaces:

  • Init: Features a dual-pane layout with Monaco Editor on one side for direct .cfgu file editing and a component-based .cfgu builder on the other, ensuring real-time synchronization between the two.
  • Upsert: Includes a form interface that dynamically generates input fields with validation for upserting values based on selected store, set, and schema.
  • Eval + Export: Introduces an eval pipeline builder allowing users to configure a sequence of operations starting from store and set selection, schema application, and culminating in an export action for generating configuration artifacts.

• Terminal Display: A terminal-like display is fixed to the bottom of the screen, showing the equivalent CLI command for the actions performed in the UI. This display adapts command syntax based on the user's OS, supports different styling formats (single line, semi, multiline), and allows for command execution, copying to clipboard, or integration into the script section. Future enhancements will include in-place command editing.

Design Guideline: @ttd-configu
See FigJam:
https://www.figma.com/file/mcGgSqMKGTbvstGfoDajeI/Features-drafts?type=whiteboard&node-id=145-625&t=HsbhHcaJz2LUsOJd-4

This feature aims to complement the existing CLI and proxy server functionalities with a graphical interface that provides a seamless, efficient way to manage Configu configurations.

[rannn505]

TBD: attach design @rannn505

[rannn505]

DRAFT - init

Suggestion

• Introduce a new --interactive flag for the configu init command.
• When a user runs configu init --interactive or just configu init in an interactive shell, a web-based UI for building ConfigSchema will open in a browser on port 8080, or another specified port using --interactive-port.
• This UI will display all existing .cfgu files in the current working directory for editing, along with options for a new blank schema in JSON/YAML format or predefined ConfigSchema example templates.
• Initially, we'll integrate the Monaco Editor with DiagnosticsOptions set according to the JSON schema of ConfigSchema contents.
• This feature and future web-based functionalities will be developed using React and the native Node.js HTTP module.
• In a future Phase B, we plan to develop a more comprehensive, component-based builder UI that allows users to download the schema file directly.

Motivation

• To enable faster and more user-friendly authoring of ConfigSchema.
• To enhance user familiarity with various Cfgu properties, including new additions, through an interactive and intuitive interface.

Context

No response

[rannn505]

PROMPT

Lets work on a new feature for the Configu oss, same structure as before for features with suggestion, motivation and context sections. please dont omit any details or fact I supplied on your output, use present tense, approchable lang, make it fluent and optimize it that our developers and designers can work on it smootly.
The feature is an app (web interface) for the configu oss.

• Currently the configu interfaces includes a cli and a proxy server.
• This web app will be based on React, Next.js SPA as framework and shadcn/ui for standard ui component and Monaco Editor with DiagnosticsOptions as code editor.
• This app is spawned from the cli with the --interactive flag for each of the Configu commands or with the configu app command
• The app general purpuse is to enable a faster and a user-friendly interface to work with Configu.
• The main page will visualize the .configu file the cli finds first togther with all the .cfgu files it can find. each section of the .configu file - stores, schemas. scripts and future one will have their own data display which will show:
  • stores: List of all ConfigStore from the
.configu and action menu for each of them currently conating a "run test command" action + a main action for adding a new one
  • Schemas: List of all the Schemas from 
the .configu file and
searching from other in the current and nested dirs - each have an action menu with "edit schema" action + a main action for a "create schema" (new blank schema in JSON/YAML format or predefined ConfigSchema example templates).
  • scripts: List all the scripts from the .configu file - each have an action menu with "run script" action + a main action for "create script".
• Each Configu Command has its own dedicated tab / page:
  • init: a side by side code editor (Monaco Editor with DiagnosticsOptions set according to the JSON schema of ConfigSchema contents.) and a component based .cfgu builder that changes together (two way binding) that allow editing or authoring a .cfgu file.
  • upsert: a form that takes a store + set + schema (store and schema options from the .configu data found) as parameters and renders inputs with proper validations to upsert values to each of the configkeys from the schema.
  • eval + export: a eval pipline builder to select a store + set + schema (store and schema options from the .configu data found) and an option to add a pipe to another command, can be added as much as the user want and the last step is a pipe to export to create the proper artifact.
• the ui will include a terminal like display sticky to the bottom of the screen that mirrors the actual cli command need to be run to exacute each of the commands from each of the pages. the command will change based on the OS (windows, unix), styling (single line, semi, multiline etc.) and will have options to run the command / copy it to the clipboard / adding it to the script section + a future options of in place editing.

[rannn505]

Ideas from internal product meeting:

• Convert between YAML <-> JSON @pelegpor
• + icon for init form for each Cfgu @pelegpor
• import ini/dotenv/flat json/flat yaml as cfgu in the create new schema modal
• components right and editor left - switch sides

Voting:

• Name: App, GUI, UI, Interactive, WebApp