Update resource info modal to new flow

#100

src/client/workflow/models/WorkflowOut.ts

@@ -27,7 +27,7 @@ export type WorkflowOut = {
     /**
      * ID of developer of the workflow
      */
-    developer_id?: (string | null);
+    developer_id: string;
     /**
      * Flag if the workflow is hosted in a private git repository
      */

src/components/CopyToClipboardIcon.vue

@@ -45,7 +45,11 @@ onMounted(() => {
     color-class="danger"
     >Can't copy to clipboard
   </bootstrap-toast>
-  <button v-if="props.button" @click="copyToClipboard" class="btn btn-primary">
+  <button
+    v-if="props.button"
+    @click="copyToClipboard"
+    class="btn btn-primary btn-sm"
+  >
     Copy to Clipboard
     <font-awesome-icon icon="fa-solid fa-clipboard" class="ms-1" />
   </button>

src/components/resources/RequestReviewButton.vue

+<script setup lang="ts">
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
+import { onMounted } from "vue";
+import { Tooltip } from "bootstrap";
+
+const props = defineProps<{
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "click-review"): void;
+  (e: "click-refresh"): void;
+}>();
+const randomIDSuffix = Math.random().toString(16).substring(2, 8);
+
+onMounted(() => {
+  new Tooltip("#refresh-s3-" + randomIDSuffix);
+});
+</script>
+
+<template>
+  <div class="btn-group" role="group">
+    <button
+      type="button"
+      class="btn btn-primary"
+      :disabled="props.disabled"
+      @click="emit('click-review')"
+    >
+      Request Review
+    </button>
+    <button
+      :id="'refresh-s3-' + randomIDSuffix"
+      type="button"
+      class="btn btn-primary"
+      @click="emit('click-refresh')"
+      data-bs-toggle="tooltip"
+      data-bs-title="Check if uploaded resource is ready"
+    >
+      <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
+    </button>
+  </div>
+</template>
+
+<style scoped></style>

src/components/resources/ResourceCard.vue

@@ -12,6 +12,7 @@ import { useS3ObjectStore } from "@/stores/s3objects";
 import { useResourceStore } from "@/stores/resources";
 import { Tooltip } from "bootstrap";
 import { useNameStore } from "@/stores/names";
+import RequestReviewButton from "@/components/resources/RequestReviewButton.vue";
 
 const randomIDSuffix: string = Math.random().toString(16).substring(2, 8);
 const objectRepository = useS3ObjectStore();
@@ -98,7 +99,7 @@ onMounted(() => {
       ...(document
         .querySelector("#resource-card-" + randomIDSuffix)
         ?.querySelectorAll("[data-bs-toggle='tooltip']") ?? []),
-    ].map((el) => new Tooltip(el));
+    ].forEach((el) => new Tooltip(el));
   }
 });
 </script>
@@ -224,33 +225,20 @@ onMounted(() => {
                     props.extended &&
                     resourceVersion.status == Status.RESOURCE_REQUESTED
                   "
+                  class="d-flex justify-content-between align-items-center"
                 >
-                  <div class="btn-group" role="group">
-                    <button
-                      type="button"
-                      class="btn btn-primary"
-                      :disabled="
-                        !resourceVersionS3Ready[
-                          resourceVersion.resource_version_id
-                        ]
-                      "
-                      @click="requestReview(resourceVersion)"
-                    >
-                      Request Review
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-primary"
-                      @click="clickCheckS3Resource(resourceVersion)"
-                    >
-                      <font-awesome-icon
-                        icon="fa-solid fa-arrow-rotate-right"
-                      />
-                    </button>
-                  </div>
+                  <request-review-button
+                    :disabled="
+                      !resourceVersionS3Ready[
+                        resourceVersion.resource_version_id
+                      ]
+                    "
+                    @click-refresh="clickCheckS3Resource(resourceVersion)"
+                    @click-review="requestReview(resourceVersion)"
+                  />
                   <button
                     type="button"
-                    class="btn btn-info btn-sm float-end"
+                    class="btn btn-info btn-sm"
                     data-bs-toggle="modal"
                     data-bs-target="#uploadResourceInfoModal"
                     @click="emit('click-info', resourceVersion)"

src/components/resources/modals/UploadResourceInfoModal.vue

@@ -10,6 +10,7 @@ import { useS3ObjectStore } from "@/stores/s3objects";
 import { useResourceStore } from "@/stores/resources";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import { Modal } from "bootstrap";
+import RequestReviewButton from "@/components/resources/RequestReviewButton.vue";
 
 const props = defineProps<{
   modalId: string;
@@ -160,6 +161,7 @@ onMounted(() => {
           </p>
         </li>
         <li
+          class="pb-2"
           :class="{
             'text-decoration-line-through': resourceReviewEnabled,
           }"
@@ -298,47 +300,45 @@ s3 = boto3.resource(
               />
             </b>
           </template>
+          <copy-to-clipboard-icon
+            v-if="props.resourceVersion && !resourceReviewEnabled"
+            button
+            :text="codeExample"
+          />
         </li>
         <li>
           <h6>Request review</h6>
           <p>
             Click <b>Request Review</b> to request a review of the resource.
           </p>
-          <div class="btn-group mb-2" role="group" v-if="props.resourceVersion">
-            <button
-              type="button"
-              class="btn btn-primary"
-              :disabled="!resourceReviewEnabled"
-              @click="requestReview(props.resourceVersion)"
-            >
-              Request Review
-            </button>
-            <button
-              v-if="props.resourceVersion.status === Status.RESOURCE_REQUESTED"
-              type="button"
-              class="btn btn-primary"
-              @click="clickCheckS3Resource(props.resourceVersion)"
-            >
-              <font-awesome-icon icon="fa-solid fa-arrow-rotate-right" />
-            </button>
-          </div>
+          <request-review-button
+            v-if="props.resourceVersion?.status === Status.RESOURCE_REQUESTED"
+            class="mb-2"
+            :disabled="!resourceReviewEnabled"
+            @click-review="requestReview(props.resourceVersion)"
+            @click-refresh="clickCheckS3Resource(props.resourceVersion)"
+          />
+        </li>
+        <li>
+          <h6>Request resource synchronization</h6>
+          <p>
+            Once a Reviewer approves your resource, the resource will be
+            publicly visible in CloWM. To use it in during a workflow execution,
+            you can request the synchronization of the resource to the cluster.
+          </p>
         </li>
         <li>
           <h6>Resource availability</h6>
           <p>
-            Once a Reviewer approves your resource synchronization request, the
-            resource will be made available in CloWM and is accessible for every
-            workflow via its <b>Nextflow Access Path</b>.
+            When an administrator approves the synchronization request and the
+            resource is download to the cluster, the resource will now available
+            for a workflow execution and is accessible for every workflow via
+            its <b>Nextflow Access Path</b>.
           </p>
         </li>
       </ol>
     </template>
     <template #footer>
-      <copy-to-clipboard-icon
-        v-if="props.resourceVersion && !resourceReviewEnabled"
-        button
-        :text="codeExample"
-      />
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
         Close
       </button>

src/components/workflows/WorkflowWithVersionsCard.vue

@@ -218,7 +218,7 @@ onMounted(() => {
                 <th scope="col">Updated at</th>
                 <th scope="col" class="text-align-center">Usage</th>
                 <th scope="col" class="text-align-center">Icon</th>
-                <th scope="col">Link</th>
+                <th scope="col"></th>
               </tr>
             </thead>
             <tbody class="table-group-divider">
@@ -287,31 +287,45 @@ onMounted(() => {
                     data-bs-toggle="modal"
                     data-bs-target="#updateWorkflowVersionIconModal"
                   />
+                </td>
+                <td class="text-end">
                   <font-awesome-icon
-                    v-else
-                    icon="fa-solid fa-circle-plus"
-                    class="add-icon-hover cursor-pointer"
-                    @click="emit('workflow-update-icon-click', version)"
-                    data-bs-toggle="modal"
-                    data-bs-target="#updateWorkflowVersionIconModal"
+                    icon="fa-solid fa-bars"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    class="cursor-pointer p-1"
                   />
-                </td>
-                <td>
-                  <router-link
-                    class="w-fit mx-0"
-                    :to="{
-                      name: 'workflow-version',
-                      params: {
-                        workflowId: props.workflow.workflow_id,
-                        versionId: version.workflow_version_id,
-                      },
-                      query: {
-                        workflowModeId: version.modes?.[0] ?? undefined,
-                        developerView: 'true',
-                      },
-                    }"
-                    >View
-                  </router-link>
+                  <ul class="dropdown-menu dropdown-menu-end">
+                    <li>
+                      <router-link
+                        class="dropdown-item"
+                        :to="{
+                          name: 'workflow-version',
+                          params: {
+                            workflowId: props.workflow.workflow_id,
+                            versionId: version.workflow_version_id,
+                          },
+                          query: {
+                            workflowModeId: version.modes?.[0] ?? undefined,
+                            developerView: 'true',
+                          },
+                        }"
+                        >View
+                      </router-link>
+                    </li>
+                    <li>
+                      <a
+                        class="dropdown-item"
+                        href="#"
+                        data-bs-toggle="modal"
+                        data-bs-target="#updateWorkflowVersionIconModal"
+                        @click.prevent="
+                          emit('workflow-update-icon-click', version)
+                        "
+                        >Update icon</a
+                      >
+                    </li>
+                  </ul>
                 </td>
               </tr>
               <tr>

src/views/admin/AdminResourcesView.vue

@@ -11,7 +11,7 @@ import type { User } from "@/client/auth";
 import { useNameStore } from "@/stores/names";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import dayjs from "dayjs";
-import ResourceVersionInfoModal from "@/components/resources/ResourceVersionInfoModal.vue";
+import ResourceVersionInfoModal from "@/components/resources/modals/ResourceVersionInfoModal.vue";
 
 const resourceRepository = useResourceStore();
 const nameRepository = useNameStore();

src/views/admin/AdminSyncRequestsView.vue

 <script setup lang="ts">
 import BootstrapToast from "@/components/BootstrapToast.vue";
 import ReasonModal from "@/components/modals/ReasonModal.vue";
-import ResourceVersionInfoModal from "@/components/resources/ResourceVersionInfoModal.vue";
+import ResourceVersionInfoModal from "@/components/resources/modals/ResourceVersionInfoModal.vue";
 import { onMounted, reactive } from "vue";
 import {
   type ResourceOut,

src/views/resources/ListResourcesView.vue

@@ -118,15 +118,15 @@ onMounted(() => {
         />
       </div>
     </div>
-    <div class="form-check fs-5 ms-auto">
+    <div class="form-check form-check-reverse form-check-inline fs-6 ms-auto">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        v-model="resourceState.showPrivate"
+        id="public-resources-checkbox"
+      />
       <label class="form-check-label" for="public-resources-checkbox">
         Show only public resources
-        <input
-          class="form-check-input"
-          type="checkbox"
-          v-model="resourceState.showPrivate"
-          id="public-resources-checkbox"
-        />
       </label>
     </div>
     <font-awesome-icon

src/views/resources/ReviewResourceView.vue

@@ -8,7 +8,7 @@ import {
 } from "@/client/resource";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import { Modal, Toast, Tooltip } from "bootstrap";
-import ResourceVersionInfoModal from "@/components/resources/ResourceVersionInfoModal.vue";
+import ResourceVersionInfoModal from "@/components/resources/modals/ResourceVersionInfoModal.vue";
 import { useNameStore } from "@/stores/names";
 import BootstrapToast from "@/components/BootstrapToast.vue";
 import ReasonModal from "@/components/modals/ReasonModal.vue";

src/views/workflows/MyWorkflowsView.vue

@@ -114,7 +114,7 @@ onMounted(() => {
     modal-id="updateWorkflowCredentialsModal"
   />
   <div
-    class="row border-bottom mb-4 justify-content-between align-items-center pb-2"
+    class="row border-bottom mb-4 justify-content-between align-items-center pb-2 pe-2"
   >
     <h2 class="w-fit">My Workflows</h2>
     <button

src/views/workflows/ReviewWorkflowsView.vue

@@ -35,10 +35,6 @@ function updateWorkflowVersionStatus(
     });
 }
 
-function isDefined<T>(argument: T | undefined | null): argument is T {
-  return argument != undefined;
-}
-
 onMounted(() => {
   workflowRepository
     .fetchReviewableWorkflows(() => {
@@ -55,9 +51,7 @@ onMounted(() => {
       }, 1000);
       return workflows;
     })
-    .then((workflows) =>
-      workflows.map((workflow) => workflow.developer_id).filter(isDefined),
-    )
+    .then((workflows) => workflows.map((workflow) => workflow.developer_id))
     .then(userRepository.fetchUsernames);
 });
 </script>

src/views/workflows/WorkflowView.vue

@@ -16,9 +16,11 @@ import {
 import { determineGitIcon } from "@/utils/GitRepository";
 import { useAuthStore } from "@/stores/users";
 import { useWorkflowStore } from "@/stores/workflows";
+import { useNameStore } from "@/stores/names";
 
 const workflowRepository = useWorkflowStore();
 const userRepository = useAuthStore();
+const nameRepository = useNameStore();
 
 // Props
 // =============================================================================
@@ -132,6 +134,10 @@ function updateWorkflow(workflowId: string) {
       workflowState.loading = false;
       workflowState.initialOpen = false;
     })
+    .then((workflow) => {
+      userRepository.fetchUsernames([workflow.developer_id]);
+      return workflow;
+    })
     .then((workflow) => {
       document.title = workflow.name + " - CloWM";
       if (props.versionId == undefined) {
@@ -230,6 +236,9 @@ onMounted(() => {
       <h3 class="w-fit">
         {{ workflow.name }}
         <span v-if="activeVersionString">@{{ activeVersionString }}</span>
+        <span v-if="nameRepository.getName(workflow.developer_id)" class="fs-4">
+          by {{ nameRepository.getName(workflow.developer_id) }}</span
+        >
       </h3>
       <img
         v-if="activeVersionIcon != null"