Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[24.2] Move invocation view running actions and improve styling of annotation section #19168

Merged
Merged
Prev Previous commit
Next Next commit
remove success message from WorkflowRunSuccess in case of 1 run
and add it to `WorkflowNavigationTitle` where it fades out to reveal the title and actions
ahmedhamidawan committed Nov 21, 2024
commit 72b590a7f3ad74a61cdf1d05c73eed0540cd580e
4 changes: 2 additions & 2 deletions client/src/components/Workflow/Run/WorkflowRunSuccess.vue
Original file line number Diff line number Diff line change
@@ -39,9 +39,9 @@ const wasNewHistoryTarget =

<template>
<div>
<div class="donemessagelarge">
<div v-if="props.invocations.length > 1" class="donemessagelarge">
Successfully invoked workflow <b>{{ props.workflowName }}</b>
<em v-if="props.invocations.length > 1"> - {{ props.invocations.length }} times</em>.
<em> - {{ props.invocations.length }} times</em>.
<span v-if="targetHistories.length > 1">
This workflow will generate results in multiple histories. You can observe progress in the
<router-link to="/histories/view_multiple">history multi-view</router-link>.
53 changes: 39 additions & 14 deletions client/src/components/Workflow/WorkflowNavigationTitle.vue
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ interface Props {
runDisabled?: boolean;
runWaiting?: boolean;
invocationRunning?: boolean;
success?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
@@ -85,20 +86,20 @@ const workflowImportTitle = computed(() => {

<template>
<div>
<div>
<BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
{{ importErrorMessage }}
</BAlert>
<BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
<span>
Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
</span>
<RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
list.
</BAlert>

<BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>

<BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
{{ importErrorMessage }}
</BAlert>
<BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
<span>
Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
</span>
<RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
list.
</BAlert>

<BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>

<div class="position-relative">
<div v-if="workflow" class="ui-portlet-section">
<div class="d-flex portlet-header align-items-center">
<div class="flex-grow-1" data-description="workflow heading">
@@ -165,6 +166,30 @@ const workflowImportTitle = computed(() => {
</BButtonGroup>
</div>
</div>
<div v-if="props.success" class="donemessagelarge">
Successfully invoked workflow
<b>{{ getWorkflowName() }}</b>
</div>
</div>
</div>
</template>

<style scoped lang="scss">
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
pointer-events: none;
}
}

.donemessagelarge {
top: 0;
position: absolute;
width: 100%;
animation: fadeOut 3s forwards;
}
</style>
Original file line number Diff line number Diff line change
@@ -230,10 +230,11 @@ function cancelWorkflowSchedulingLocal() {
<template>
<div v-if="invocation" class="d-flex flex-column w-100" data-description="workflow invocation state">
<WorkflowNavigationTitle
v-if="props.isFullPage && !props.success"
v-if="props.isFullPage"
:invocation="invocation"
:workflow-id="invocation.workflow_id"
:invocation-running="!invocationAndJobTerminal">
:invocation-running="!invocationAndJobTerminal"
:success="props.success">
<template v-slot:workflow-title-actions>
<BButton
v-if="!invocationAndJobTerminal"

Unchanged files with check annotations Beta

<template>
<div class="d-flex">
<div

Check warning on line 145 in client/src/components/ActivityBar/ActivityBar.vue

GitHub Actions / client-unit-test (18)

Visible, non-interactive elements should not have an interactive handler
class="activity-bar d-flex flex-column no-highlight"
data-description="activity bar"
@dragover.prevent="onDragOver"
<template>
<Popper reference-is="span" popper-is="span" :placement="tooltipPlacement">
<template v-slot:reference>
<div :id="id" class="activity-item" @click="onClick">

Check warning on line 59 in client/src/components/ActivityBar/ActivityItem.vue

GitHub Actions / client-unit-test (18)

Visible, non-interactive elements with click handlers must have at least one keyboard listener

Check warning on line 59 in client/src/components/ActivityBar/ActivityItem.vue

GitHub Actions / client-unit-test (18)

Visible, non-interactive elements should not have an interactive handler
<b-nav-item
class="position-relative my-1 p-2"
:class="{ 'nav-item-active': isActive }"
<template>

Check warning on line 1 in client/src/components/Alert.vue

GitHub Actions / client-unit-test (18)

Component name "Alert" should always be multi-word
<b-alert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
<!-- @slot Message to display in alert -->
<slot> {{ message }} </slot>
/** Display a close button in the alert that allows it to be dismissed */
dismissible: Boolean,
/** Label for the close button, for aria */
dismissLabel: String,

Check warning on line 35 in client/src/components/Alert.vue

GitHub Actions / client-unit-test (18)

Prop 'dismissLabel' requires default value to be set
/** If a number, number of seconds to show before dismissing */
show: [Boolean, Number],

Check warning on line 37 in client/src/components/Alert.vue

GitHub Actions / client-unit-test (18)

Prop 'show' requires default value to be set
/** Should the alert fade out */
fade: Boolean,
},
<template>

Check warning on line 1 in client/src/components/Annotation.vue

GitHub Actions / client-unit-test (18)

Component name "Annotation" should always be multi-word
<ClickToEdit
ref="annotationInput"
v-slot="{ toggleEdit, placeholder, stateValidator }"
<template>
<div>
{{ prefix }}
<span v-html="citationHtml" />

Check warning on line 41 in client/src/components/Citation/CitationItem.vue

GitHub Actions / client-unit-test (18)

'v-html' directive can lead to XSS attack
<a v-if="link" :href="link" target="_blank">
Visit Citation
</template>
<div v-if="source === 'histories'" class="infomessage">
<div v-html="config?.citations_export_message_html"></div>

Check warning on line 68 in client/src/components/Citation/CitationsList.vue

GitHub Actions / client-unit-test (18)

'v-html' directive can lead to XSS attack
</div>
<div class="citations-formatted">
</script>
<template>
<div class="collection-element" @click="emit('element-is-selected', element)">

Check warning on line 36 in client/src/components/Collections/ListDatasetCollectionElementView.vue

GitHub Actions / client-unit-test (18)

Visible, non-interactive elements with click handlers must have at least one keyboard listener
<ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
<button class="discard-btn btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">