diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue index 9506a25386af..243845d41381 100644 --- a/client/src/components/Workflow/Editor/Index.vue +++ b/client/src/components/Workflow/Editor/Index.vue @@ -60,7 +60,11 @@ :license="license" :steps="steps" :datatypes-mapper="datatypesMapper" - @onAttributes="showAttributes" + @onAttributes=" + (e) => { + showAttributes(e); + } + " @onHighlight="onHighlight" @onUnhighlight="onUnhighlight" @onRefactor="onAttemptRefactor" @@ -75,6 +79,7 @@ v-else-if="isActiveSideBar('workflow-editor-attributes')" :id="id" :tags="tags" + :highlight="highlightAttribute" :parameters="parameters" :annotation="annotation" :name="name" @@ -297,10 +302,13 @@ export default { parameters.value = getUntypedWorkflowParameters(steps.value); } - function showAttributes() { + function showAttributes(args) { ensureParametersSet(); stateStore.activeNodeId = null; activityBar.value?.setActiveSideBar("workflow-editor-attributes"); + if (args.highlight) { + this.highlightAttribute = args.highlight; + } } const name = ref("Unnamed Workflow"); @@ -522,6 +530,7 @@ export default { refactorActions: [], scrollToId: null, highlightId: null, + highlightAttribute: null, messageTitle: null, messageBody: null, messageIsError: false, diff --git a/client/src/components/Workflow/Editor/Lint.vue b/client/src/components/Workflow/Editor/Lint.vue index 3cb265c9d90c..88d3781ccca4 100644 --- a/client/src/components/Workflow/Editor/Lint.vue +++ b/client/src/components/Workflow/Editor/Lint.vue @@ -7,26 +7,21 @@ :okay="checkAnnotation" success-message="This workflow is annotated. Ideally, this helps the executors of the workflow understand the purpose and usage of the workflow." - warning-message="This workflow is not annotated. Providing an annotation helps workflow executors - understand the purpose and usage of the workflow." + :warning-message="bestPracticeWarningAnnotation" attribute-link="Annotate your Workflow." - @onClick="onAttributes" /> + @onClick="onAttributes('annotation')" /> + @onClick="onAttributes('creator')" /> + @onClick="onAttributes('license')" /> -
+
Annotation
These notes will be visible when this workflow is viewed.
+ +
-
+
License - + + +
-
+
Creator - + + +
Tags @@ -60,6 +96,11 @@ import { format, parseISO } from "date-fns"; import { Services } from "@/components/Workflow/services"; +import { + bestPracticeWarningAnnotation, + bestPracticeWarningCreator, + bestPracticeWarningLicense, +} from "./modules/linting"; import { UntypedParameters } from "./modules/parameters"; import LicenseSelector from "@/components/License/LicenseSelector.vue"; @@ -67,6 +108,8 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue"; import CreatorEditor from "@/components/SchemaOrg/CreatorEditor.vue"; import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue"; +const bestPracticeHighlightTime = 20000; + export default { name: "WorkflowAttributes", components: { @@ -84,6 +127,10 @@ export default { type: String, default: null, }, + highlight: { + type: String, + default: null, + }, tags: { type: Array, required: true, @@ -115,11 +162,17 @@ export default { }, data() { return { + bestPracticeWarningAnnotation: bestPracticeWarningAnnotation, + bestPracticeWarningCreator: bestPracticeWarningCreator, + bestPracticeWarningLicense: bestPracticeWarningLicense, message: null, messageVariant: null, versionCurrent: this.version, annotationCurrent: this.annotation, nameCurrent: this.name, + showAnnotationHightlight: false, + showLicenseHightlight: false, + showCreatorHightlight: false, }; }, computed: { @@ -179,6 +232,36 @@ export default { name() { this.nameCurrent = this.name; }, + highlight: { + immediate: true, + handler(newHighlight, oldHighlight) { + if (newHighlight == oldHighlight) { + return; + } + if (newHighlight == "annotation") { + this.showAnnotationHightlight = true; + this.showCreatorHightlight = false; + this.showLicenseHightlight = false; + setTimeout(() => { + this.showAnnotationHightlight = false; + }, bestPracticeHighlightTime); + } else if (newHighlight == "creator") { + this.showAnnotationHightlight = false; + this.showCreatorHightlight = true; + this.showLicenseHightlight = false; + setTimeout(() => { + this.showCreatorHightlight = false; + }, bestPracticeHighlightTime); + } else if (newHighlight == "license") { + this.showAnnotationHightlight = false; + this.showCreatorHightlight = false; + this.showLicenseHightlight = true; + setTimeout(() => { + this.showLicenseHightlight = false; + }, bestPracticeHighlightTime); + } + }, + }, }, created() { this.services = new Services(); @@ -211,3 +294,14 @@ export default { }, }; + + diff --git a/client/src/components/Workflow/Editor/modules/linting.ts b/client/src/components/Workflow/Editor/modules/linting.ts index 21d02cafff88..75a7c142ab43 100644 --- a/client/src/components/Workflow/Editor/modules/linting.ts +++ b/client/src/components/Workflow/Editor/modules/linting.ts @@ -15,6 +15,13 @@ interface LintState { autofix?: boolean; } +export const bestPracticeWarningAnnotation = + "This workflow is not annotated. Providing an annotation helps workflow executors understand the purpose and usage of the workflow."; +export const bestPracticeWarningCreator = + "This workflow does not specify creator(s). This is important metadata for workflows that will be published and/or shared to help workflow executors know how to cite the workflow authors."; +export const bestPracticeWarningLicense = + "This workflow does not specify a license. This is important metadata for workflows that will be published and/or shared to help workflow executors understand how it may be used."; + export function getDisconnectedInputs( steps: Steps = {}, datatypesMapper: DatatypesMapperModel,