Skip to content

Commit b69e02b

Browse files
ahmedhamidawanahmedhamidawan
committed
use more GButton in workflow title bar and fix recently replaced ones
1 parent 58b65ca commit b69e02b

9 files changed

Lines changed: 108 additions & 226 deletions

‎client/src/components/Common/AsyncButton.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ async function onClick() {
4040
:title="loading ? loadingTitle : title"
4141
:size="size"
4242
:color="color"
43+
:transparent="transparent"
4344
:disabled="loading || disabled"
4445
@click="onClick">
4546
<span v-if="loading" class="loading-icon fa fa-spinner fa-spin" />

‎client/src/components/Workflow/Run/WorkflowRunFormSimple.vue‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { faReadme } from "@fortawesome/free-brands-svg-icons";
33
import { faArrowRight, faCog, faSitemap, faTimes } from "@fortawesome/free-solid-svg-icons";
44
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
5-
import { BAlert, BButton, BButtonGroup, BFormCheckbox, BOverlay } from "bootstrap-vue";
5+
import { BAlert, BFormCheckbox, BOverlay } from "bootstrap-vue";
66
import { storeToRefs } from "pinia";
77
import { computed, ref, watch } from "vue";
88
@@ -26,6 +26,7 @@ import WorkflowHelpDisplay from "./WorkflowHelpDisplay.vue";
2626
import WorkflowRunGraph from "./WorkflowRunGraph.vue";
2727
import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration.vue";
2828
import GButton from "@/components/BaseComponents/GButton.vue";
29+
import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
2930
import Heading from "@/components/Common/Heading.vue";
3031
import FormInputMismatchBadge from "@/components/Form/Elements/FormInputMismatchBadge.vue";
3132
import FormDisplay from "@/components/Form/FormDisplay.vue";
@@ -319,37 +320,40 @@ async function onExecute() {
319320
:run-waiting="waitingForRequest"
320321
@on-execute="onExecute">
321322
<template v-slot:workflow-title-actions>
322-
<BButtonGroup>
323-
<BButton
324-
v-b-tooltip.hover.noninteractive.html
325-
size="sm"
323+
<GButtonGroup>
324+
<GButton
325+
tooltip
326+
size="small"
326327
:title="!showGraph ? 'Show workflow graph' : 'Hide workflow graph'"
327-
variant="link"
328+
transparent
329+
color="blue"
328330
:pressed="showGraph"
329331
@click="showRightPanel = showGraph ? null : 'graph'">
330332
<FontAwesomeIcon :icon="faSitemap" fixed-width />
331-
</BButton>
332-
<BButton
333+
</GButton>
334+
<GButton
333335
v-if="workflow?.readme || workflow?.help"
334-
v-b-tooltip.hover.noninteractive.html
335-
size="sm"
336+
tooltip
337+
size="small"
336338
:title="!showHelp ? 'Show workflow help' : 'Hide workflow help'"
337-
variant="link"
339+
transparent
340+
color="blue"
338341
:pressed="showHelp"
339342
@click="showRightPanel = showHelp ? null : 'help'">
340343
<FontAwesomeIcon :icon="faReadme" fixed-width />
341-
</BButton>
342-
<BButton
343-
v-b-tooltip.hover.noninteractive
344-
size="sm"
345-
title="Workflow Run Settings"
346-
variant="link"
347-
class="workflow-run-settings"
348-
:pressed="showRuntimeSettingsPanel"
349-
@click="toggleRuntimeSettings">
350-
<FontAwesomeIcon :icon="faCog" fixed-width />
351-
</BButton>
352-
</BButtonGroup>
344+
</GButton>
345+
</GButtonGroup>
346+
<GButton
347+
tooltip
348+
size="small"
349+
title="Workflow Run Settings"
350+
transparent
351+
color="blue"
352+
class="workflow-run-settings"
353+
:pressed="showRuntimeSettingsPanel"
354+
@click="toggleRuntimeSettings">
355+
<FontAwesomeIcon :icon="faCog" fixed-width />
356+
</GButton>
353357
</template>
354358
</WorkflowNavigationTitle>
355359

@@ -394,15 +398,16 @@ async function onExecute() {
394398
</template>
395399

396400
<div class="mr-4">
397-
<BButton
398-
v-b-tooltip.hover.noninteractive
399-
variant="link"
400-
size="sm"
401-
class="text-decoration-none workflow-expand-form-link"
401+
<GButton
402+
tooltip
403+
transparent
404+
color="blue"
405+
size="small"
406+
class="workflow-expand-form-link"
402407
title="Switch to the legacy workflow form"
403408
@click="$emit('showAdvanced')">
404409
Expanded workflow form <FontAwesomeIcon :icon="faArrowRight" />
405-
</BButton>
410+
</GButton>
406411
</div>
407412
</div>
408413
</div>

‎client/src/components/Workflow/WorkflowNavigationTitle.test.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ const IMPORT_ERROR_MESSAGE = "Failed to import workflow";
2525
const SELECTORS = {
2626
WORKFLOW_HEADING: "[data-description='workflow heading']",
2727
ACTIONS_BUTTON_GROUP: "[data-button-group]",
28-
EDIT_WORKFLOW_BUTTON: `[data-button-edit][title='Edit ${SAMPLE_WORKFLOW.name}']`,
28+
EDIT_WORKFLOW_BUTTON: `[data-button-edit][title='Edit Workflow']`,
2929
IMPORT_WORKFLOW_BUTTON: "[data-description='import workflow button']",
3030
EXECUTE_WORKFLOW_BUTTON: "[data-description='execute workflow button']",
31-
ROUTE_TO_RUN_BUTTON: "[data-description='route to workflow run button']",
31+
ROUTE_TO_RERUN_BUTTON: "[data-button-rerun][title='Rerun Workflow with same inputs']",
3232
ALERT_MESSAGE: "balert-stub",
3333
};
3434

@@ -111,9 +111,8 @@ describe("WorkflowNavigationTitle renders", () => {
111111
expect(heading.text()).toContain(`Invoked Workflow: ${SAMPLE_WORKFLOW.name}`);
112112
expect(heading.text()).toContain(`(Version: ${SAMPLE_WORKFLOW.version + 1})`);
113113

114-
const runButton = wrapper.find(SELECTORS.ROUTE_TO_RUN_BUTTON);
115-
expect(runButton.attributes("title")).toContain("Rerun");
116-
expect(runButton.attributes("title")).toContain(SAMPLE_WORKFLOW.name);
114+
const rerunButton = wrapper.find(SELECTORS.ROUTE_TO_RERUN_BUTTON);
115+
expect(rerunButton.attributes("title")).toContain("Rerun");
117116
});
118117

119118
it("the workflow name in header and run button in actions; run form version", async () => {
@@ -128,7 +127,7 @@ describe("WorkflowNavigationTitle renders", () => {
128127
});
129128

130129
it("edit button if user owns the workflow", async () => {
131-
async function findAndClickEditButton(version: "invocation" | "run_form") {
130+
async function findEditButton(version: "invocation" | "run_form") {
132131
const { wrapper } = await mountWorkflowNavigationTitle(version);
133132
const actionsGroup = wrapper.find(SELECTORS.ACTIONS_BUTTON_GROUP);
134133

@@ -137,8 +136,8 @@ describe("WorkflowNavigationTitle renders", () => {
137136
`/workflows/edit?id=${SAMPLE_WORKFLOW.id}&version=${SAMPLE_WORKFLOW.version}`
138137
);
139138
}
140-
await findAndClickEditButton("invocation");
141-
await findAndClickEditButton("run_form");
139+
await findEditButton("invocation");
140+
await findEditButton("run_form");
142141
});
143142

144143
it("import button instead if user does not own the workflow", async () => {

‎client/src/components/Workflow/WorkflowNavigationTitle.vue‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { faEdit, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
2+
import { faEdit, faRedo, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
33
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
44
import { BAlert } from "bootstrap-vue";
55
import { storeToRefs } from "pinia";
@@ -20,7 +20,6 @@ import GButtonGroup from "../BaseComponents/GButtonGroup.vue";
2020
import AsyncButton from "../Common/AsyncButton.vue";
2121
import ButtonSpinner from "../Common/ButtonSpinner.vue";
2222
import LoadingSpan from "../LoadingSpan.vue";
23-
import WorkflowRunButton from "./WorkflowRunButton.vue";
2423
2524
interface Props {
2625
invocation?: WorkflowInvocationElementView;
@@ -69,6 +68,8 @@ const workflowImportTitle = computed(() => {
6968
return localize("Login to import this workflow");
7069
} else if (workflowImportedAttempted.value) {
7170
return localize("Workflow imported");
71+
} else if (workflow.value?.deleted) {
72+
return localize("This workflow has been deleted");
7273
} else {
7374
return localize("Import this workflow");
7475
}
@@ -108,7 +109,8 @@ const workflowImportTitle = computed(() => {
108109
transparent
109110
color="blue"
110111
size="small"
111-
:title="!workflow.deleted ? `Edit ${getWorkflowName()}` : 'This workflow has been deleted.'"
112+
title="Edit Workflow"
113+
disabled-title="This workflow has been deleted."
112114
:disabled="workflow.deleted"
113115
:to="`/workflows/edit?id=${workflow.id}&version=${workflow.version}`">
114116
<FontAwesomeIcon :icon="faEdit" fixed-width />
@@ -136,20 +138,19 @@ const workflowImportTitle = computed(() => {
136138
size="small"
137139
title="Run Workflow"
138140
@onClick="emit('on-execute')" />
139-
<WorkflowRunButton
141+
<GButton
140142
v-else
141-
:id="workflow.id"
142-
data-description="route to workflow run button"
143-
variant="primary"
144-
:title="
145-
!workflow.deleted
146-
? `<b>Rerun</b><br>${getWorkflowName()}<br><b>with same inputs</b>`
147-
: 'This workflow has been deleted.'
148-
"
143+
title="Rerun Workflow with same inputs"
144+
disabled-title="This workflow has been deleted."
145+
data-button-rerun
146+
tooltip
147+
color="blue"
148+
size="small"
149149
:disabled="workflow.deleted"
150-
full
151-
:invocation-id="props.invocation.id"
152-
:version="workflow.version" />
150+
:to="`/workflows/rerun?invocation_id=${props.invocation.id}`">
151+
<FontAwesomeIcon :icon="faRedo" fixed-width />
152+
<span v-localize>Rerun Workflow</span>
153+
</GButton>
153154
</div>
154155
</div>
155156
<div v-if="props.success" class="donemessagelarge">

‎client/src/components/Workflow/WorkflowRunButton.test.ts‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎client/src/components/Workflow/WorkflowRunButton.vue‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)
⚡