Skip to content

Commit

Permalink
feat(ui): enhance the guided onboarding (#1940)
Browse files Browse the repository at this point in the history 
closes #1936
  • Loading branch information
@anna-geller
anna-geller authored Aug 25, 2023
1 parent b6b426f commit bf6ee18
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 127 deletions.
56 changes: 28 additions & 28 deletions ui/src/components/inputs/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,36 +284,36 @@
editor.onDidContentSizeChange(e => {
this.$refs.container.style.height = (e.contentHeight + 7) + "px";
});
}
this.editor.onDidContentSizeChange(_ => {
if (this.guidedProperties.monacoRange) {
editor.revealLine(this.guidedProperties.monacoRange.endLineNumber);
let decorations = [
{
range: this.guidedProperties.monacoRange,
options: {
isWholeLine: true,
inlineClassName: "highlight-text"
},
className: "highlight-text",
}
];
decorations = this.guidedProperties.monacoDisableRange ? decorations.concat([
{
range: this.guidedProperties.monacoDisableRange,
options: {
isWholeLine: true,
inlineClassName: "disable-text"
},
className: "disable-text",
this.editor.onDidContentSizeChange(_ => {
if (this.guidedProperties.monacoRange) {
editor.revealLine(this.guidedProperties.monacoRange.endLineNumber);
let decorations = [
{
range: this.guidedProperties.monacoRange,
options: {
isWholeLine: true,
inlineClassName: "highlight-text"
},
]) : decorations;
this.oldDecorations = this.editor.deltaDecorations(this.oldDecorations, decorations)
} else {
this.oldDecorations = this.editor.deltaDecorations(this.oldDecorations, []);
}
});
}
className: "highlight-text",
}
];
decorations = this.guidedProperties.monacoDisableRange ? decorations.concat([
{
range: this.guidedProperties.monacoDisableRange,
options: {
isWholeLine: true,
inlineClassName: "disable-text"
},
className: "disable-text",
},
]) : decorations;
this.oldDecorations = this.editor.deltaDecorations(this.oldDecorations, decorations)
} else {
this.oldDecorations = this.editor.deltaDecorations(this.oldDecorations, []);
}
});
this.editor.onDidChangeCursorPosition(() => {
let position = this.editor.getPosition();
Expand Down
169 changes: 117 additions & 52 deletions ui/src/components/onboarding/VueTour.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,8 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts[0],
monacoRange: new monaco.Range(1, 1, 5, 1)
monacoRange: new monaco.Range(1, 1, 5, 1),
monacoDisableRange: undefined
});
resolve(true);
}),
Expand All @@ -158,8 +159,8 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 2).join("\n"),
monacoRange: new monaco.Range(6, 1, 12, 1),
monacoDisableRange: new monaco.Range(1, 1, 5, 1)
monacoRange: new monaco.Range(7, 1, 12, 1),
monacoDisableRange: new monaco.Range(1, 1, 6, 1)
});
resolve(true);
}),
Expand All @@ -178,8 +179,8 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 3).join("\n"),
monacoRange: new monaco.Range(13, 1, 16, 1),
monacoDisableRange: new monaco.Range(1, 1, 12, 1)
monacoRange: new monaco.Range(14, 1, 17, 1),
monacoDisableRange: new monaco.Range(1, 1, 13, 1)
});
resolve(true);
}),
Expand All @@ -198,8 +199,8 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 4).join("\n"),
monacoRange: new monaco.Range(17, 1, 21, 1),
monacoDisableRange: new monaco.Range(1, 1, 16, 1)
monacoRange: new monaco.Range(19, 1, 24, 1),
monacoDisableRange: new monaco.Range(1, 1, 18, 1)
});
resolve(true);
}),
Expand All @@ -218,8 +219,8 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 5).join("\n"),
monacoRange: new monaco.Range(22, 1, 27, 1),
monacoDisableRange: new monaco.Range(1, 1, 21, 1)
monacoRange: new monaco.Range(26, 1, 29, 1),
monacoDisableRange: new monaco.Range(1, 1, 25, 1)
});
resolve(true);
}),
Expand All @@ -238,37 +239,77 @@
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 6).join("\n"),
monacoRange: new monaco.Range(28, 1, 47, 1),
monacoDisableRange: new monaco.Range(1, 1, 27, 1)
monacoRange: new monaco.Range(31, 1, 44, 1),
monacoDisableRange: new monaco.Range(1, 1, 30, 1)
});
resolve(true);
}),
},
{
target: ".edit-flow-save-button",
target: "#guided-right",
highlightElement: ".edit-flow-editor",
header: {
title: this.$t("onboarding-content.step9.title"),
},
content: this.$t("onboarding-content.step9.content"),
params: {
placement: "top"
placement: "left"
},
before: () => new Promise((resolve) => {
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 6).join("\n") + "\n",
monacoRange: null,
monacoDisableRange: null
source: this.flowParts.slice(0, 7).join("\n"),
monacoRange: new monaco.Range(46, 1, 56, 1),
monacoDisableRange: new monaco.Range(1, 1, 45, 1)
});
resolve(true);
}),
},
{
target: ".edit-flow-trigger-button",
target: "#guided-right",
highlightElement: ".edit-flow-editor",
header: {
title: this.$t("onboarding-content.step10.title"),
},
content: this.$t("onboarding-content.step10.content"),
params: {
placement: "left"
},
before: () => new Promise((resolve) => {
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 8).join("\n"),
monacoRange: new monaco.Range(58, 1, 65, 1),
monacoDisableRange: new monaco.Range(1, 1, 57, 1)
});
resolve(true);
}),
},
{
target: ".edit-flow-save-button",
header: {
title: this.$t("onboarding-content.step11.title"),
},
content: this.$t("onboarding-content.step11.content"),
params: {
placement: "top"
},
before: () => new Promise((resolve) => {
this.$store.commit("core/setGuidedProperties", {
...this.guidedProperties,
source: this.flowParts.slice(0, 8).join("\n") + "\n",
monacoRange: undefined,
monacoDisableRange: undefined
});
resolve(true);
}),
},
{
target: ".edit-flow-trigger-button",
header: {
title: this.$t("onboarding-content.step12.title"),
},
content: this.$t("onboarding-content.step12.content"),
params: {
placement: "top"
},
Expand All @@ -283,9 +324,9 @@
{
target: ".flow-run-trigger-button",
header: {
title: this.$t("onboarding-content.step11.title"),
title: this.$t("onboarding-content.step13.title"),
},
content: this.$t("onboarding-content.step11.content"),
content: this.$t("onboarding-content.step13.content"),
params: {
placement: "bottom"
},
Expand All @@ -300,39 +341,63 @@
],
flowParts: [
"# " + this.$t("onboarding-flow.onboardComment1") + "\n" +
"# " + this.$t("onboarding-flow.onboardComment2") + "\n" +
"id: welcomeKestra" + "\n" +
"namespace: io.kestra.tour\n" +
"description: Welcome to Kestra!" + "\n",
"# " + this.$t("onboarding-flow.inputs") + "\n" +
"inputs:" + "\n" +
" # " + this.$t("onboarding-flow.inputsDetails1") + "\n" +
"- name: user" + "\n" +
" type: STRING" + "\n" +
" defaults: Kestra user" + "\n",
"# " + this.$t("onboarding-flow.tasks1") + "\n" +
"# " + this.$t("onboarding-flow.tasks2") + "\n" +
"# " + this.$t("onboarding-flow.tasks3") + "\n" +
"tasks:",
" # " + this.$t("onboarding-flow.taskLog1") + "\n" +
" # " + this.$t("onboarding-flow.taskLog2") + "\n" +
" # " + this.$t("onboarding-flow.taskLog3") + "\n" +
"- id: hello" + "\n" +
" type: io.kestra.core.tasks.log.Log" + "\n" +
" message: Hey there, {{ inputs.user }}!" + "\n",
" # " + this.$t("onboarding-flow.taskBash1") + "\n" +
" # " + this.$t("onboarding-flow.taskBash2") + "\n" +
"- id: goodbye" + "\n" +
" type: io.kestra.core.tasks.log.Log" + "\n" +
" message: See you soon, {{ inputs.user }}!" + "\n" +
" # " + this.$t("onboarding-flow.triggers") + "\n" +
"triggers:" + "\n" +
" # " + this.$t("onboarding-flow.triggerSchedule1") + "\n" +
" - id: everyMinute" + "\n" +
" type: io.kestra.core.models.triggers.types.Schedule" + "\n" +
" cron: \"*/1 * * * *\"" + "\n" +
" inputs:" + "\n" +
" name: Kestra master user" + "\n"
"# " + this.$t("onboarding-flow.onboardComment2") + "\n" +
"id: welcome" + "\n" +
"namespace: dev\n" +
"description: Welcome to Kestra!",
"\n# " + this.$t("onboarding-flow.inputs") + "\n" +
"inputs:" + "\n" +
" # " + this.$t("onboarding-flow.inputsDetails1") + "\n" +
"- name: user" + "\n" +
" type: STRING" + "\n" +
" defaults: Kestra user",
"\n# " + this.$t("onboarding-flow.tasks1") + "\n" +
"# " + this.$t("onboarding-flow.tasks2") + "\n" +
"# " + this.$t("onboarding-flow.tasks3") + "\n" +
"tasks:",
"\n # " + this.$t("onboarding-flow.taskLog1") + "\n" +
" # " + this.$t("onboarding-flow.taskLog2") + "\n" +
" # " + this.$t("onboarding-flow.taskLog3") + "\n" +
"- id: hello" + "\n" +
" type: io.kestra.core.tasks.log.Log" + "\n" +
" message: Hey there, {{ inputs.user }}!",
"\n # " + this.$t("onboarding-flow.taskAPI") + "\n" +
"- id: api" + "\n" +
" type: io.kestra.plugin.fs.http.Request" + "\n" +
" uri: https://dummyjson.com/products",
"\n # " + this.$t("onboarding-flow.taskPython") + "\n" +
"- id: python" + "\n" +
" type: io.kestra.plugin.scripts.python.Script" + "\n" +
" docker:" + "\n" +
" image: python:slim" + "\n" +
" beforeCommands:" + "\n" +
" - pip install polars" + "\n" +
" warningOnStdErr: false" + "\n" +
" script: |" + "\n" +
" import polars as pl" + "\n" +
" data = {{outputs.api.body | jq('.products') | first}}" + "\n" +
" df = pl.from_dicts(data)" + "\n" +
" df.glimpse()" + "\n" +
" df.select([\"brand\", \"price\"]).write_csv(\"{{outputDir}}/products.csv\")",
"\n # " + this.$t("onboarding-flow.taskQuery") + "\n" +
"- id: sqlQuery" + "\n" +
" type: io.kestra.plugin.jdbc.duckdb.Query" + "\n" +
" inputFiles:" + "\n" +
" in.csv: \"{{ outputs.python.outputFiles['products.csv'] }}\"" + "\n" +
" sql: |" + "\n" +
" SELECT brand, round(avg(price), 2) as avg_price" + "\n" +
" FROM read_csv_auto('{{workingDir}}/in.csv', header=True)" + "\n" +
" GROUP BY brand" + "\n" +
" ORDER BY avg_price DESC;" + "\n" +
" store: true",
"\n # " + this.$t("onboarding-flow.triggers") + "\n" +
"triggers:" + "\n" +
" # " + this.$t("onboarding-flow.triggerSchedule1") + "\n" +
"- id: everyMinute" + "\n" +
" type: io.kestra.core.models.triggers.types.Schedule" + "\n" +
" cron: \"*/1 * * * *\"" + "\n" +
" inputs:" + "\n" +
" name: Kestra pro user"
]
}
},
Expand Down
Loading

0 comments on commit bf6ee18

Please sign in to comment.