fix: Filename issue while editing a macro with attachment action (#5775)

app/javascript/dashboard/helper/specs/macrosFixtures.js

@@ -69,3 +69,26 @@ export const labels = [
     show_on_sidebar: true,
   },
 ];
+
+export const files = [
+  {
+    id: 76,
+    macro_id: 77,
+    file_type: 'image/jpeg',
+    account_id: 1,
+    file_url:
+      'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBYUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--aa41b5a779a83c1d86b28475a5cf0bd17f41f0ff/fayaz_cropped.jpeg',
+    blob_id: 88,
+    filename: 'fayaz_cropped.jpeg',
+  },
+  {
+    id: 82,
+    macro_id: 77,
+    file_type: 'image/png',
+    account_id: 1,
+    file_url:
+      'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBZdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--260fda80b77409ffaaac10b96681fba447600545/screenshot.png',
+    blob_id: 94,
+    filename: 'screenshot.png',
+  },
+];

app/javascript/dashboard/helper/specs/macrosHelper.spec.js

@@ -3,9 +3,10 @@ import {
   resolveActionName,
   resolveLabels,
   resolveTeamIds,
+  getFileName,
 } from '../../routes/dashboard/settings/macros/macroHelper';
 import { MACRO_ACTION_TYPES } from '../../routes/dashboard/settings/macros/constants';
-import { teams, labels } from './macrosFixtures';
+import { teams, labels, files } from './macrosFixtures';
 
 describe('#emptyMacro', () => {
   const defaultMacro = {
@@ -50,3 +51,17 @@ describe('#resolveLabels', () => {
     expect(resolveLabels(labels, ['sales', 'billing'])).toEqual(resolvedLabels);
   });
 });
+
+describe('#getFileName', () => {
+  it('returns the correct file name from the list of files', () => {
+    expect(getFileName(files[0].blob_id, 'send_attachment', files)).toEqual(
+      files[0].filename
+    );
+    expect(getFileName(files[1].blob_id, 'send_attachment', files)).toEqual(
+      files[1].filename
+    );
+    expect(getFileName(files[0].blob_id, 'wrong_action', files)).toEqual('');
+    expect(getFileName(null, 'send_attachment', files)).toEqual('');
+    expect(getFileName(files[0].blob_id, 'send_attachment', [])).toEqual('');
+  });
+});

app/javascript/dashboard/i18n/locale/en/automation.json

@@ -109,7 +109,7 @@
       "UPLOAD_ERROR": "Could not upload attachment, Please try again",
       "LABEL_IDLE": "Upload Attachment",
       "LABEL_UPLOADING": "Uploading...",
-      "LABEL_UPLOADED": "Succesfully Uploaded",
+      "LABEL_UPLOADED": "Successfully Uploaded",
       "LABEL_UPLOAD_FAILED": "Upload Failed"
     }
   }

app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue

@@ -3,6 +3,7 @@
     <div class="small-8 columns with-right-space macros-canvas">
       <macro-nodes
         v-model="macro.actions"
+        :files="files"
         @addNewNode="appendNode"
         @deleteNode="deleteNode"
         @resetAction="resetNode"
@@ -46,6 +47,12 @@ export default {
       macro: this.macroData,
     };
   },
+  computed: {
+    files() {
+      if (this.macro && this.macro.files) return this.macro.files;
+      return [];
+    },
+  },
   watch: {
     $route: {
       handler() {

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -20,6 +20,7 @@
         :show-remove-button="false"
         :is-macro="true"
         :v="$v.macro.actions.$each[index]"
+        :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
       <macro-action-button
@@ -60,6 +61,10 @@ export default {
       type: Number,
       default: 0,
     },
+    fileName: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     ...mapGetters({

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue

@@ -15,6 +15,13 @@
           class="macros__node-action"
           type="add"
           :index="i"
+          :file-name="
+            fileName(
+              actionData[i].action_params[0],
+              actionData[i].action_name,
+              files
+            )
+          "
           :single-node="actionData.length === 1"
           @resetAction="$emit('resetAction', i)"
           @deleteNode="$emit('deleteNode', i)"
@@ -37,7 +44,7 @@ import MacrosPill from './Pill.vue';
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
 import MacroActionButton from './ActionButton.vue';
-
+import { getFileName } from './macroHelper';
 export default {
   components: {
     Draggable,
@@ -50,6 +57,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    files: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     actionData: {
@@ -61,6 +72,11 @@ export default {
       },
     },
   },
+  methods: {
+    fileName() {
+      return getFileName(...arguments);
+    },
+  },
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js

@@ -31,3 +31,12 @@ export const resolveLabels = (labels, ids) => {
     })
     .join(', ');
 };
+
+export const getFileName = (id, actionType, files) => {
+  if (!id || !files) return '';
+  if (actionType === 'send_attachment') {
+    const file = files.find(item => item.blob_id === id);
+    if (file) return file.filename.toString();
+  }
+  return '';
+};