Improve UI for show workflow page

#37

src/views/workflows/WorkflowVersionView.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 
 const versionState = reactive({
   loading: true,
-  markdownLoading: true,
+  fileLoading: true,
   version: undefined,
   errorLoading: false,
   descriptionMarkdown: "",
@@ -21,7 +21,7 @@ const versionState = reactive({
   parameterSchema: {},
 } as {
   loading: boolean;
-  markdownLoading: boolean;
+  fileLoading: boolean;
   version: undefined | WorkflowVersionFull;
   descriptionMarkdown: string;
   changelogMarkdown: string;
@@ -40,6 +40,7 @@ watch(
 
 function updateVersion(versionId: string, workflowId: string) {
   versionState.loading = true;
+  versionState.fileLoading = true;
   WorkflowVersionService.workflowVersionGetWorkflowVersion(
     versionId,
     workflowId
@@ -61,15 +62,23 @@ onMounted(() => {
 });
 
 function downloadVersionFiles(version: WorkflowVersionFull) {
-  axios.get(version.readme_url).then((response) => {
+  const descriptionPromise = axios.get(version.readme_url).then((response) => {
     versionState.descriptionMarkdown = response.data;
   });
-  axios.get(version.changelog_url).then((response) => {
+  const changelogPromise = axios.get(version.changelog_url).then((response) => {
     versionState.changelogMarkdown = response.data;
   });
-  axios.get(version.parameter_schema_url).then((response) => {
-    versionState.parameterSchema = response.data;
-  });
+  const parameterPromise = axios
+    .get(version.parameter_schema_url)
+    .then((response) => {
+      versionState.parameterSchema = response.data;
+    });
+  Promise.all([descriptionPromise, changelogPromise, parameterPromise]).finally(
+    () => {
+      versionState.fileLoading = false;
+      console.log("All loaded");
+    }
+  );
 }
 </script>
 
@@ -79,7 +88,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
       <router-link
         class="nav-link"
         aria-current="page"
-        :to="{ path: '#', query: { tab: 'description' } }"
+        :to="{ query: { tab: 'description' } }"
         :class="{ active: props.activeTab === 'description' }"
         >Description
       </router-link>
@@ -87,7 +96,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
     <li class="nav-item">
       <router-link
         class="nav-link"
-        :to="{ path: '#', query: { tab: 'parameters' } }"
+        :to="{ query: { tab: 'parameters' } }"
         :class="{ active: props.activeTab === 'parameters' }"
         >Parameters
       </router-link>
@@ -95,7 +104,7 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
     <li class="nav-item">
       <router-link
         class="nav-link"
-        :to="{ path: '#', query: { tab: 'changes' } }"
+        :to="{ query: { tab: 'changes' } }"
         :class="{ active: props.activeTab === 'changes' }"
         >Releases
       </router-link>

src/views/workflows/WorkflowView.vue

 <script setup lang="ts">
-import { onMounted, reactive, watch } from "vue";
+import { computed, onMounted, reactive, watch } from "vue";
+import type { ComputedRef } from "vue";
 import type { WorkflowOut } from "@/client/workflow";
 import { WorkflowService } from "@/client/workflow";
 import { useRoute, useRouter } from "vue-router";
@@ -60,6 +61,14 @@ function updateWorkflow(workflowId: string) {
     });
 }
 
+const activeVersionString: ComputedRef<string> = computed(() => {
+  return (
+    workflowState.workflow?.versions.find(
+      (w) => w.git_commit_hash === workflowState.activeVersionId
+    )?.version ?? ""
+  );
+});
+
 onMounted(() => {
   updateWorkflow(props.workflowId);
 });
@@ -67,32 +76,49 @@ onMounted(() => {
 
 <template>
   <div v-if="workflowState.workflow != null">
-    <h1>{{ workflowState.workflow.name }}</h1>
-    <p class="fs-4">{{ workflowState.workflow.short_description }}</p>
-    <div class="input-group w-fit mb-3">
-      <span class="input-group-text pe-2 ps-2" id="workflows-search-wrapping"
-        ><bootstrap-icon icon="tags-fill" class="text-secondary"
-      /></span>
-      <select
-        class="form-select form-select-sm"
-        aria-label="Workflow version selection"
-        aria-describedby="workflows-search-wrapping"
-        v-model="workflowState.activeVersionId"
-      >
-        <option
-          v-for="(version, index) in [
-            ...workflowState.workflow.versions,
-          ].reverse()"
-          :key="version.git_commit_hash"
-          :value="version.git_commit_hash"
-          :selected="index === 1"
+    <h1 class="fs-0">{{ workflowState.workflow.name }}</h1>
+    <p class="fs-4 mb-5 mt-3">{{ workflowState.workflow.short_description }}</p>
+    <div class="row align-items-center">
+      <a role="button" class="btn btn-success btn-lg w-fit mx-auto" href="#">
+        <bootstrap-icon icon="rocket-takeoff-fill" class="me-2" />
+        <span class="align-middle">Launch {{ activeVersionString }}</span>
+      </a>
+      <div class="input-group w-fit position-absolute end-0">
+        <span class="input-group-text px-2" id="workflow-version-wrapping"
+          ><bootstrap-icon icon="tags-fill" class="text-secondary"
+        /></span>
+        <select
+          class="form-select form-select-sm"
+          aria-label="Workflow version selection"
+          aria-describedby="workflow-version-wrapping"
+          v-model="workflowState.activeVersionId"
         >
-          {{ version.version }}
-        </option>
-      </select>
+          <option
+            v-for="version in [...workflowState.workflow.versions].reverse()"
+            :key="version.git_commit_hash"
+            :value="version.git_commit_hash"
+          >
+            {{ version.version }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div class="row w-100 mb-4 mt-2 mx-0">
+      <a
+        :href="workflowState.workflow.repository_url"
+        target="_blank"
+        class="text-secondary text-decoration-none mx-auto w-fit p-0"
+        ><bootstrap-icon icon="git" class="me-1" /><span class="align-middle">
+          {{ workflowState.workflow.repository_url }}</span
+        ></a
+      >
     </div>
     <router-view />
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.fs-0 {
+  font-size: 4em;
+}
+</style>