-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
SF-02 SF-03 finish implementing subflows (#31)
* Adjust title of node-editor when editing subflow * Use new selectPaletteNodeByFlowNode selector for subflow compatibility * Update node editing flow with support for editing subflow instances * Make inputLabels and outputLabels optional * Update tests for flow/node.logic * Update tests for node-editor.logic * Correct error, support no editing node in new node-editor.tsx state call * Correctly set subflow icon when converting to palette node * Finish SF-02 and SF-03 * Write new SF-05 ticket for implementing subflow inputs/outputs and place it in ToDo
- Loading branch information
1 parent
cdc9748
commit 8564e23
Showing
11 changed files
with
463 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| { | ||
| "cSpell.words": [ | ||
| "curvyness", | ||
| "DEFINS", | ||
| "easymde", | ||
| "ENDDEFINS", | ||
| "jsonata", | ||
| "mopt", | ||
| "oneditcancel", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import { | ||
| EnvVarType, | ||
| EnvironmentVariable, | ||
| SubflowEntity, | ||
| } from '../redux/modules/flow/flow.slice'; | ||
|
|
||
| export const createSubflowEditorTemplate = (_subflow: SubflowEntity) => { | ||
| return ` | ||
| <div class="form-row"> | ||
| <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label> | ||
| <input type="text" id="node-input-name" style="width: calc(100% - 105px)" data-i18n="[placeholder]common.label.name"> | ||
| </div> | ||
| <div id="subflow-input-ui"></div> | ||
| `; | ||
| }; | ||
|
|
||
| type JQuery = { | ||
| (selector: string | JQuery, context?: unknown): JQuery; | ||
| append(...elements: JQuery[]): JQuery; | ||
| val(value: string): JQuery; | ||
| typedInput(method: string, ...args: unknown[]): string; | ||
| typedInput(options: Record<string, unknown>): JQuery; | ||
| text(value: string): JQuery; | ||
| text(): string; | ||
| addClass(value: string): JQuery; | ||
| appendTo(element: JQuery): JQuery; | ||
| children(selector: string): JQuery; | ||
| find(selector: string): JQuery; | ||
| each(callback: (index: number, element: JQuery) => void): JQuery; | ||
| }; | ||
|
|
||
| type NodeInstance = { | ||
| env?: EnvironmentVariable[]; | ||
| subflow: SubflowEntity; | ||
| }; | ||
|
|
||
| const subflowDefinition = ( | ||
| RED: { | ||
| nodes: { registerType: (type: string, node: unknown) => void }; | ||
| }, | ||
| $: JQuery | ||
| ) => { | ||
| return () => | ||
| RED.nodes.registerType('subflow:__DEFINS__subflow.id__ENDDEFINS__', { | ||
| type: 'subflow', | ||
| oneditprepare: function (this: NodeInstance) { | ||
| const $subflowInputUi = $('#subflow-input-ui'); | ||
|
|
||
| const initialEnv = Object.fromEntries( | ||
| (this.env ?? []).map(env => [env.name, env]) | ||
| ); | ||
| const nodeEnv = (this.subflow?.env ?? []).map( | ||
| env => initialEnv[env.name] ?? env | ||
| ); | ||
|
|
||
| for (const env of nodeEnv) { | ||
| const $formRow = $('<div>').addClass('form-row'); | ||
| $formRow.append( | ||
| $('<label>').addClass('env-name').text(env.name) | ||
| ); | ||
| const $valueInput = $('<input/>', { | ||
| type: 'text', | ||
| placeholder: 'Value', | ||
| class: 'node-input-prop-property-value', | ||
| }) | ||
| .appendTo($formRow) | ||
| .typedInput({ | ||
| types: [ | ||
| 'str', | ||
| 'num', | ||
| 'bool', | ||
| 'json', | ||
| 're', | ||
| 'date', | ||
| 'jsonata', | ||
| 'bin', | ||
| 'env', | ||
| 'node', | ||
| 'cred', | ||
| ], | ||
| }); | ||
| $valueInput.typedInput('value', env.value); | ||
| $valueInput.typedInput('type', env.type); | ||
| $subflowInputUi.append($formRow); | ||
| } | ||
| }, | ||
| oneditsave: function (this: NodeInstance) { | ||
| const defaultEnv = Object.fromEntries( | ||
| (this.subflow?.env ?? []).map(env => [env.name, env]) | ||
| ); | ||
| const newEnv: EnvironmentVariable[] = []; | ||
| $('#subflow-input-ui') | ||
| .children('.form-row') | ||
| .each((_index, element) => { | ||
| const $formRow = $(element); | ||
| const $valueInput = $formRow.find('input'); | ||
| const name = $formRow.find('.env-name').text(); | ||
| const value = $valueInput.typedInput('value'); | ||
| const type = $valueInput.typedInput( | ||
| 'type' | ||
| ) as EnvVarType; | ||
| if ( | ||
| defaultEnv[name]?.value !== value || | ||
| defaultEnv[name]?.type !== type | ||
| ) { | ||
| newEnv.push({ | ||
| name, | ||
| value, | ||
| type, | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| this.env = newEnv.length > 0 ? newEnv : undefined; | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| export const createSubflowDefinitionScript = (subflow: SubflowEntity) => { | ||
| const definitionString = subflowDefinition( | ||
| ...([] as unknown as Parameters<typeof subflowDefinition>) | ||
| ) | ||
| .toString() | ||
| .slice(5); | ||
|
|
||
| const replaceDefinsVariables = ( | ||
| definition: string, | ||
| context: Record<string, unknown> | ||
| ) => { | ||
| return definition.replace( | ||
| /__DEFINS__(.*?)__ENDDEFINS__/g, | ||
| (_, path) => { | ||
| const keys = path.split('.'); | ||
| let value = context; | ||
| for (const k of keys) { | ||
| value = value[k] as Record<string, unknown>; | ||
| } | ||
| return `${value}`; | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| return replaceDefinsVariables(definitionString, { subflow }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.