Skip to content

Commit

Permalink
feat(ui): documentation as a tab options (#1141)
Browse files Browse the repository at this point in the history 
- clear graph when leaving topology
- extract dynamic documentation as a new view in the editor
- Re-introduce topology tab; source is now the complete editor
  • Loading branch information
@Skraye
Skraye authored Apr 11, 2023
1 parent 4019be2 commit 876ec73
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 92 deletions.
10 changes: 6 additions & 4 deletions ui/src/components/flows/FlowRoot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@

<script>
import Topology from "./Topology.vue";
import FlowSource from "./FlowSource.vue";
import FlowRevisions from "./FlowRevisions.vue";
import FlowLogs from "./FlowLogs.vue";
import FlowExecutions from "./FlowExecutions.vue";
Expand Down Expand Up @@ -89,12 +88,15 @@
{
name: undefined,
component: Topology,
title: this.$t("editor"),
title: this.$t("topology"),
props: {
isReadOnly: true
}
},
];
if (this.user.hasAny(permission.EXECUTION)) {
tabs[0].name = "editor";
tabs[0].name = "topology";
tabs = [
{
Expand All @@ -116,7 +118,7 @@
if (this.user && this.flow && this.user.isAllowed(permission.FLOW, action.READ, this.flow.namespace)) {
tabs.push({
name: "source",
component: FlowSource,
component: Topology,
title: this.$t("source"),
});
}
Expand Down
6 changes: 5 additions & 1 deletion ui/src/components/flows/Topology.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
:flow-id="flow.id"
:namespace="flow.namespace"
:flow-graph="flowGraph"
:is-read-only="false"
:is-read-only="isReadOnly"
:flow-error="flowError"
/>
</template>
Expand All @@ -20,6 +20,10 @@
preventRouteInfo: {
type: Boolean,
default: false
},
isReadOnly: {
type: Boolean,
default: false
}
},
computed: {
Expand Down
6 changes: 4 additions & 2 deletions ui/src/components/graph/SwitchView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<el-tooltip :content="$t('source')" transition="" :hide-after="0" :persistent="false">
<el-button :type="buttonType('source')" @click="switchView('source')" :icon="FileDocumentEdit" />
</el-tooltip>
<el-tooltip :content="$t('source and doc')" transition="" :hide-after="0" :persistent="false">
<el-button :type="buttonType('doc')" @click="switchView('doc')" :icon="BookOpenPageVariantOutline" />
</el-tooltip>
<el-tooltip :content="$t('source and topology')" transition="" :hide-after="0" :persistent="false">
<el-button :type="buttonType('combined')" @click="switchView('combined')" :icon="FileChart" />
</el-tooltip>
Expand All @@ -17,8 +20,7 @@
import FileDocumentEdit from "vue-material-design-icons/FileDocumentEdit.vue";
import Graph from "vue-material-design-icons/Graph.vue";
import FileChart from "vue-material-design-icons/FileChart.vue";
import CloseCircleOutline from "vue-material-design-icons/CloseCircleOutline.vue";
import CheckCircleOutline from "vue-material-design-icons/CheckCircleOutline.vue";
import BookOpenPageVariantOutline from "vue-material-design-icons/BookOpenPageVariantOutline.vue";
</script>

<script>
Expand Down
63 changes: 43 additions & 20 deletions ui/src/components/graph/Topology.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import TriggerFlow from "../../components/flows/TriggerFlow.vue";
import ValidationError from "../../components/flows/ValidationError.vue";
import SwitchView from "./SwitchView.vue";
import PluginDocumentation from "../plugins/PluginDocumentation.vue";
import {cssVariable} from "../../utils/global"
import Cluster from "./nodes/Cluster.vue";
import Dot from "./nodes/Dot.vue"
Expand Down Expand Up @@ -118,7 +119,7 @@
const isNewErrorOpen = ref(false)
const isEditMetadataOpen = ref(false)
const metadata = ref(null);
const showTopology = ref(props.isCreating ? "source" : (props.execution ? "topology" : "combined"));
const showTopology = ref(props.isCreating ? "source" : (props.execution || props.isReadOnly ? "topology" : "combined"));
const updatedFromEditor = ref(false);
const timer = ref(null);
const dragging = ref(false);
Expand Down Expand Up @@ -415,6 +416,7 @@
&& localStorage.getItem("tourDoneOrSkip") !== "true"
&& props.total === 0) {
tours["guidedTour"].start();
showTopology.value = "source";
}
}, 200)
window.addEventListener("popstate", () => {
Expand All @@ -427,6 +429,7 @@
document.removeEventListener("popstate", () => {
stopTour();
});
store.commit("flow/setFlowGraph", undefined);
})
const stopTour = () => {
Expand Down Expand Up @@ -454,6 +457,10 @@
regenerateGraph()
});
watch(() => props.isReadOnly, async () => {
showTopology.value = props.isCreating ? "source" : (props.execution || props.isReadOnly ? "topology" : "combined");
});
watch(() => props.guidedProperties, () => {
if (localStorage.getItem("tourDoneOrSkip") !== "true") {
if (props.guidedProperties.source !== undefined) {
Expand All @@ -479,7 +486,7 @@
if (!dragging.value) {
linkedElements(id, node.uid).forEach((n) => {
if (n.type === "task") {
n.style = {...n.style, outline: "0.5px solid " + cssVariable('--bs-yellow')}
n.style = {...n.style, outline: "0.5px solid " + cssVariable("--bs-yellow")}
}
});
}
Expand Down Expand Up @@ -687,10 +694,10 @@
if (!checkIntersections(e.intersections, e.node) && e.intersections.filter(n => n.type === "task").length === 1) {
e.intersections.forEach(n => {
if (n.type === "task") {
n.style = {...n.style, outline: "0.5px solid " + cssVariable('--bs-primary')}
n.style = {...n.style, outline: "0.5px solid " + cssVariable("--bs-primary")}
}
})
e.node.style = {...e.node.style, outline: "0.5px solid " + cssVariable('--bs-primary')}
e.node.style = {...e.node.style, outline: "0.5px solid " + cssVariable("--bs-primary")}
}
})
Expand Down Expand Up @@ -847,30 +854,24 @@
<ArrowCollapseRight v-if="isHorizontal" />
</ControlButton>
</Controls>
<Panel v-if="!isReadOnly" :position="PanelPosition.TopRight">
<SwitchView :type="showTopology" @switch-view="switchView" />
</Panel>
</VueFlow>
</div>
<editor
v-if="showTopology === 'source' || showTopology === 'combined'"
:class="showTopology === 'combined'? 'editor-combined' : ''"
v-if="['doc', 'combined', 'source'].includes(showTopology)"
:class="['doc','combined'].includes(showTopology) ? 'editor-combined' : ''"
@save="save"
v-model="flowYaml"
schema-type="flow"
lang="yaml"
@update:model-value="editorUpdate($event)"
@cursor="updatePluginDocumentation($event)"
:show-doc="showTopology !== 'combined'"
:creating="isCreating"
>
<SwitchView
v-if="showTopology === 'source' && !guidedProperties.tourStarted"
:type="showTopology"
class="to-topology-button"
@switch-view="switchView"
/>
</editor>
@restartGuidedTour="() => showTopology = 'source'"
/>
<PluginDocumentation
v-if="showTopology === 'doc'"
class="plugin-doc"
/>
<el-drawer
v-if="isNewErrorOpen"
v-model="isNewErrorOpen"
Expand Down Expand Up @@ -943,6 +944,12 @@
</el-button>
</template>
</el-drawer>
<SwitchView
v-if="!isReadOnly"
:type="showTopology"
class="to-topology-button"
@switch-view="switchView"
/>
</el-card>
<bottom-line>
<ul>
Expand Down Expand Up @@ -1007,6 +1014,7 @@
<style lang="scss" scoped>
.el-card {
height: calc(100vh - 300px);
position: relative;
:deep(.el-card__body) {
height: 100%;
Expand All @@ -1015,8 +1023,8 @@
.to-topology-button {
position: absolute;
top: 15px;
right: 15px;
top: 30px;
right: 30px;
}
.editor {
Expand Down Expand Up @@ -1044,4 +1052,19 @@
.vueflow-hide {
width: 0%;
}
.plugin-doc {
overflow-x: hidden;
padding: calc(var(--spacer) * 3);
height: 100%;
width: 50%;
float: right;
overflow-y: scroll;
padding: calc(var(--spacer) * 1.5);
background-color: var(--bs-gray-300);
html.dark & {
background-color: var(--bs-gray-500);
}
}
</style>
67 changes: 2 additions & 65 deletions ui/src/components/inputs/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,6 @@
<el-button :icon="icon.Help" @click="restartGuidedTour" size="small" />
</el-tooltip>
</el-button-group>
<span v-if="!this.guidedProperties.tourStarted && showDoc" class="hide-on-small-screen">
<el-tooltip
:content="editorDocumentation ? $t('hide task documentation') : $t('show task documentation')"
:persistent="false"
transition=""
:hide-after="0"
>
<el-button
type="primary"
:icon="editorDocumentation ? icon.Close : icon.BookMultipleOutline"
circle
style="float: right"
size="small"
@click="setShowDocumentation"
/>
</el-tooltip>
</span>
</div>
</nav>

Expand All @@ -54,7 +37,6 @@
:schema-type="schemaType"
class="position-relative"
/>
<slot />
<div
v-show="showPlaceholder"
class="placeholder"
Expand All @@ -63,16 +45,6 @@
{{ placeholder }}
</div>
</div>
<div
v-if="!this.guidedProperties.tourStarted && showDoc"
:class="[editorDocumentation ? 'plugin-doc-active' : '','plugin-doc']"
class="hide-on-small-screen">
<markdown v-if="editorPlugin" :source="editorPlugin.markdown" />
<div v-else>
<div class="img get-started" />
<el-alert type="info" :title="$t('focus task')" show-icon :closable="false" />
</div>
</div>
</div>
</div>
</template>
Expand All @@ -83,7 +55,6 @@
import UnfoldMoreHorizontal from "vue-material-design-icons/UnfoldMoreHorizontal.vue";
import Help from "vue-material-design-icons/Help.vue";
import {mapGetters, mapState} from "vuex";
import Markdown from "../layout/Markdown.vue";
import BookMultipleOutline from "vue-material-design-icons/BookMultipleOutline.vue";
import Close from "vue-material-design-icons/Close.vue";
Expand All @@ -106,14 +77,12 @@
readOnly: {type: Boolean, default: false},
lineNumbers: {type: Boolean, default: undefined},
minimap: {type: Boolean, default: false},
showDoc: {type: Boolean, default: true},
creating: {type: Boolean, default: false},
},
components: {
MonacoEditor,
Markdown,
},
emits: ["save", "focusout", "tab", "update:modelValue", "cursor"],
emits: ["save", "focusout", "tab", "update:modelValue", "cursor", "restartGuidedTour"],
editor: undefined,
data() {
return {
Expand All @@ -132,7 +101,6 @@
};
},
computed: {
...mapState("plugin", ["editorPlugin", "pluginsDocumentation"]),
...mapGetters("core", ["guidedProperties"]),
...mapGetters("flow", ["flowError"]),
themeComputed() {
Expand Down Expand Up @@ -381,17 +349,13 @@
}
);
this.$tours["guidedTour"].start();
},
setShowDocumentation() {
this.editorDocumentation = !this.editorDocumentation;
localStorage.setItem("editorDocumentation", (this.editorDocumentation).toString());
this.$emit("restartGuidedTour", true);
}
},
};
</script>

<style lang="scss">
@use 'element-plus/theme-chalk/src/mixins/mixins' as *;
.ks-editor {
width: 100%;
Expand Down Expand Up @@ -447,7 +411,6 @@
.editor-wrapper {
min-width: 75%;
width: 100%;
position: relative;
.monaco-hover-content {
h4 {
Expand Down Expand Up @@ -500,25 +463,6 @@
color: grey !important;
}
.plugin-doc {
position: relative;
overflow-x: hidden;
width: 0px;
margin: 0px;
padding: 0px;
transition: width var(--el-transition-duration) ease-in-out, padding var(--el-transition-duration) ease-in-out;
background-color: var(--bs-gray-300);
html.dark & {
background-color: var(--bs-gray-100);
}
}
.plugin-doc-active {
width: 30%;
padding: calc(var(--spacer) * 1.5);
}
div.img {
min-height: 130px;
height: 100%;
Expand All @@ -532,11 +476,4 @@
}
}
.hide-on-small-screen {
display: none;
@include res(md) {
display: initial;
}
}
</style>
Loading

0 comments on commit 876ec73

Please sign in to comment.