Fix workflow image update [SCI-10073]

app/controllers/experiments_controller.rb

@@ -313,11 +313,7 @@ class ExperimentsController < ApplicationController
     end
 
     render json: {
-      workflowimg: render_to_string(
-        partial: 'projects/show/workflow_img',
-        locals: { experiment: @experiment },
-        formats: :html
-      )
+      workflowimg_url: rails_blob_path(@experiment.workflowimg, only_path: true),
     }
   end
 

app/javascript/vue/experiments/card.vue

@@ -39,8 +39,11 @@
           }
         ) }}</span>
       </div>
-      <div class="h-20 w-20 p-0.5 bg-sn-light-grey rounded-sm shrink-0 ml-auto">
-        <img :src="params.workflow_img" class="max-h-18 max-w-[72px]">
+      <div class="h-20 w-20 p-0.5 bg-sn-light-grey rounded-sm shrink-0 ml-auto relative">
+        <div v-if="imageLoading" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
+          <img src="/images/medium/loading.svg" alt="Loading" />
+        </div>
+        <img v-else :src="workflow_img" class="max-h-18 max-w-[72px]">
       </div>
     </div>
     <div class="py-2">
@@ -58,6 +61,7 @@
 
 import RowMenuRenderer from '../shared/datatable/row_menu_renderer.vue';
 import CardSelectorMixin from '../shared/datatable/mixins/card_selector.js';
+import workflowImgMixin from './workflow_img_mixin.js';
 import Description from './renderers/description.vue';
 
 export default {
@@ -70,6 +74,6 @@ export default {
     RowMenuRenderer,
     Description,
   },
-  mixins: [CardSelectorMixin],
+  mixins: [CardSelectorMixin, workflowImgMixin],
 };
 </script>

app/javascript/vue/experiments/renderers/name.vue

@@ -1,19 +1,26 @@
 <template>
   <div class="relative leading-5 h-full flex items-center gap-2 truncate">
-    <div class="h-10 w-10 p-0.5 bg-sn-light-grey rounded-sm shrink-0">
-      <img :src="params.data.workflow_img" class="max-h-9 max-w-[36px]">
+    <div class="h-10 w-10 p-0.5 bg-sn-light-grey rounded-sm shrink-0 relative">
+      <div v-if="imageLoading" class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-10">
+        <img src="/images/medium/loading.svg" alt="Loading" class="w-4 h-4" />
+      </div>
+      <img v-else :src="workflow_img" class="max-h-9 max-w-[36px]">
     </div>
     <a :href="params.data.urls.show" class="hover:no-underline truncate">{{ params.data.name  }}</a>
   </div>
 </template>
 
 <script>
+
+import workflowImgMixin from '../workflow_img_mixin.js';
+
 export default {
   name: 'NameRenderer',
   props: {
     params: {
       required: true
     }
-  }
+  },
+  mixins: [workflowImgMixin]
 };
 </script>

app/javascript/vue/experiments/workflow_img_mixin.js

@@ -0,0 +1,29 @@
+import axios from '../../packs/custom_axios.js';
+
+export default {
+  mounted() {
+    const img = this.params.data ? this.params.data.workflow_img : this.params.workflow_img;
+    if (img) {
+      this.workflow_img = img;
+    } else {
+      this.loadExprimentWorflowImage();
+    }
+  },
+  data() {
+    return {
+      workflow_img: null,
+      imageLoading: false
+    };
+  },
+  methods: {
+    loadExprimentWorflowImage() {
+      const url = this.params.data ? this.params.data.urls.workflow_img : this.params.urls.workflow_img;
+      this.imageLoading = true;
+      axios.get(url)
+        .then((response) => {
+          this.workflow_img = response.data.workflowimg_url;
+          this.imageLoading = false;
+        });
+    }
+  }
+};

app/serializers/lists/experiment_serializer.rb

@@ -15,6 +15,10 @@ module Lists
       I18n.l(object.created_at, format: :full_date)
     end
 
+    def workflow_img
+      rails_blob_path(object.workflowimg, only_path: true) if object.workflowimg.attached?
+    end
+
     def sa_description
       @user = scope[:user] || @instance_options[:user]
       custom_auto_link(object.description,
@@ -68,7 +72,8 @@ module Lists
         clone: clone_experiment_path(object),
         move: move_experiment_path(object),
         update: experiment_path(object),
-        show_access: access_permissions_experiment_path(object)
+        show_access: access_permissions_experiment_path(object),
+        workflow_img: fetch_workflow_img_experiment_path(object)
       }
 
       if can_manage_project_users?(object.project)