Create CRUD for environment variables

[girl-loves-coding]

Duplicates

• I have searched the existing issues

Summary 💡

We can take inspiration from Postmen and how they handle env variables, but do not copy it 1:1. (see screenshot). As we already have a side bar to configure blocks, lets reuse it to add environment variables

1. An icon to open a side bar to add a new environment variables
2. A form to add a variable
3. An icon to save the variable
4. Add an option to select available environment variables

Examples 🌈

Look up how they do it for Postmen

Motivation 🔦

No response

[girl-loves-coding]

How to:
Look into these files, https://github.com/softflow24/data-river/blob/main/packages/editor/src/components/controls/top-right-controls/RunWorkflowButton.tsx#L45-L48 and https://github.com/softflow24/data-river/blob/main/packages/execution-engine/src/VariableResolver.ts . There is already some implemented functionality

[girl-loves-coding]

We have already implemented side bar, please re-use it and make the UI for env variables similar to the one on the screenshot

[girl-loves-coding]

Inspiration:

[IraBoh]

After the talk on 12.11.2024, the following style was agreed upon:

1. Placement. The Component Environment Variables should be placed under:

• Settings - Developer Settings - as Enviroment Variables

2. Style

• Env Var should get the style as Rep Var

• Only Env Var schould be implemented

• After clicking on New Env Var there should be seen those input fields:

Was my interpretation correct? @girl-loves-coding @iploooox

[girl-loves-coding]

yes, all looks good. A couple of details to the last screenshot:

1. Remove Save icon. Save methos will be triggered from Save variable button at the bottom.
2. rename: Filter param -> fiilter var

iables; Add New Param -> Add new variable; Save configuration -> save variable

[IraBoh]

14.11.24
Current state before the review:

Environment Variables Management Implementation - Phase 1

Current Implementation Status:

Navigation & Layout

1. Added "Environment Variables" section to the sidebar
2. Implemented route-based navigation with two sections:
   • "/settings/environment-variables" for Variables
   • "/settings/environment-variables/secrets" for Secrets
3. Each section has its own card with description and action button

Variables Route Features (/settings/environment-variables)

1. Main card displays:

   • Title: "Environment Variables"
   • Description text
   • "New environment variable" button (green variant)

2. Clicking the button navigates to /settings/environment-variables/new where the form is implemented

Form Implementation

1. New variable form includes:
   • Filter input field
   • "Add new variable" button with PlusCircle icon
   • Table structure with:
     • Key column (with sort icon)
     • Value column
     • Actions column
   • Save Variable button

Next Steps

1. move filter input field and table to /env-var
2. key var input fileds initiased from beginning
3. adjust layout /new: keep "add var" button at the current position
4. Make changes
5. Pull request

• create dummy responce API that represent env var from db
• make filtering of the table
• add new var: key value - save - console log (payload of sent data)

[IraBoh]

19.11.24
Current state before the review:
feat(env-vars): Enhance environment variables UI and functionality

Environment Variables Management - Phase 2

Environment Variable Table Changes

• Move environment variable table to /env-var route
• Add dummy API response to simulate database data
• Implement table filtering functionality

Key-Value Input Fields Improvements

• Show input fields initialized from start
• Adjust layout in /new route:
  • Keep "Add new variable" button position
  • Maintain consistent spacing

• Add form submission handling:
  • Capture key-value pairs
  • Log payload to console on save
  • Prepare for API integration

Note: Dummy API response simulates future backend integration