Allow urlText to be saved on metric images

Changed: added

ee/app/assets/javascripts/api.js

@@ -328,7 +328,7 @@ export default {
     return axios.get(metricImagesUrl);
   },
 
-  uploadIssueMetricImage({ issueIid, id, file, url = null }) {
+  uploadIssueMetricImage({ issueIid, id, file, url = null, urlText = null }) {
     const options = { headers: { ...ContentTypeMultipartFormData } };
     const metricImagesUrl = Api.buildUrl(this.issueMetricImagesPath)
       .replace(':id', encodeURIComponent(id))
@@ -340,6 +340,9 @@ export default {
     if (url) {
       formData.append('url', url);
     }
+    if (urlText) {
+      formData.append('url_text', urlText);
+    }
 
     return axios.post(metricImagesUrl, formData, options);
   },

ee/app/assets/javascripts/issues/show/components/incidents/metrics_image.vue

@@ -37,6 +37,11 @@ export default {
       required: false,
       default: null,
     },
+    urlText: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -126,9 +131,9 @@ export default {
             <gl-icon class="gl-mr-2" :name="arrowIconName" />
           </gl-button>
           <gl-link v-if="url" :href="url">
-            {{ filename }}
+            {{ urlText != null ? urlText : filename }}
           </gl-link>
-          <span v-else>{{ filename }}</span>
+          <span v-else>{{ urlText != null ? urlText : filename }}</span>
           <gl-button
             v-if="canUpdate"
             class="gl-ml-auto"

ee/app/assets/javascripts/issues/show/components/incidents/metrics_tab.vue

@@ -22,6 +22,7 @@ export default {
       currentFiles: [],
       modalVisible: false,
       modalUrl: '',
+      modalUrlText: '',
     };
   },
   store: createStore(),
@@ -48,6 +49,7 @@ export default {
     clearInputs() {
       this.modalVisible = false;
       this.modalUrl = '';
+      this.modalUrlText = '';
       this.currentFile = false;
     },
     openMetricDialog(files) {
@@ -56,7 +58,11 @@ export default {
     },
     async onUpload() {
       try {
-        await this.uploadImage({ files: this.currentFiles, url: this.modalUrl });
+        await this.uploadImage({
+          files: this.currentFiles,
+          url: this.modalUrl,
+          urlText: this.modalUrlText,
+        });
         // Error case handled within action
       } finally {
         this.clearInputs();
@@ -67,9 +73,7 @@ export default {
     modalUpload: __('Upload'),
     modalCancel: __('Cancel'),
     modalTitle: s__('Incidents|Add a URL'),
-    modalDescription: s__(
-      'Incidents|You can optionally add a URL to link users to the original graph.',
-    ),
+    modalDescription: s__('Incidents|Add a link to the uploaded image.'),
     dropDescription: s__(
       'Incidents|Drop or %{linkStart}upload%{linkEnd} a metric screenshot to attach it to the incident',
     ),
@@ -93,8 +97,12 @@ export default {
       @primary.prevent="onUpload"
     >
       <p>{{ $options.i18n.modalDescription }}</p>
+      <gl-form-group :label="__('Text (optional)')" label-for="upload-text-input">
+        <gl-form-input id="upload-text-input" v-model="modalUrlText" />
+      </gl-form-group>
+
       <gl-form-group
-        :label="__('URL')"
+        :label="__('Link (optional)')"
         label-for="upload-url-input"
         :description="s__('Incidents|Must start with http or https')"
       >

ee/app/assets/javascripts/issues/show/components/incidents/store/actions.js

@@ -17,13 +17,19 @@ export const fetchMetricImages = async ({ state, commit }) => {
   }
 };
 
-export const uploadImage = async ({ state, commit }, { files, url }) => {
+export const uploadImage = async ({ state, commit }, { files, url, urlText }) => {
   commit(types.REQUEST_METRIC_UPLOAD);
 
   const { issueIid, projectId } = state;
 
   try {
-    const response = await uploadMetricImage({ file: files.item(0), id: projectId, issueIid, url });
+    const response = await uploadMetricImage({
+      file: files.item(0),
+      id: projectId,
+      issueIid,
+      url,
+      urlText,
+    });
     commit(types.RECEIVE_METRIC_UPLOAD_SUCCESS, response);
   } catch (error) {
     commit(types.RECEIVE_METRIC_UPLOAD_ERROR);

ee/spec/frontend/api_spec.js

@@ -732,12 +732,13 @@ describe('Api', () => {
     describe('uploadIssueMetricImage', () => {
       const file = 'mock file';
       const url = 'mock url';
+      const urlText = 'mock urlText';
 
       it('uploads an image', async () => {
         jest.spyOn(axios, 'post');
         mock.onPost(expectedUrl).replyOnce(httpStatus.OK, {});
 
-        await Api.uploadIssueMetricImage({ issueIid, id: projectId, file, url }).then(
+        await Api.uploadIssueMetricImage({ issueIid, id: projectId, file, url, urlText }).then(
           ({ data }) => {
             expect(data).toEqual({});
             expect(axios.post.mock.calls[0][2]).toEqual({

ee/spec/frontend/issues/show/components/incidents/metrics_image_spec.js

@@ -47,6 +47,7 @@ describe('Metrics upload item', () => {
   });
 
   const findImageLink = () => wrapper.findComponent(GlLink);
+  const findSpan = () => wrapper.findAll('span').at(-1);
   const findCollapseButton = () => wrapper.find('[data-testid="collapse-button"]');
   const findMetricImageBody = () => wrapper.find('[data-testid="metric-image-body"]');
   const findModal = () => wrapper.findComponent(GlModal);
@@ -70,6 +71,22 @@ describe('Metrics upload item', () => {
     expect(findImageLink().text()).toBe(defaultProps.filename);
   });
 
+  it('shows a link with the url text, if url text is present', () => {
+    const testUrl = 'test_url';
+    const testUrlText = 'test_url_text';
+    mountComponent({ propsData: { url: testUrl, urlText: testUrlText } });
+
+    expect(findImageLink().attributes('href')).toBe(testUrl);
+    expect(findImageLink().text()).toBe(testUrlText);
+  });
+
+  it('shows the url text with no url, if no url is present', () => {
+    const testUrlText = 'test_url_text';
+    mountComponent({ propsData: { urlText: testUrlText } });
+
+    expect(findSpan().text()).toBe(testUrlText);
+  });
+
   describe('expand and collapse', () => {
     beforeEach(() => {
       mountComponent();

ee/spec/frontend/issues/show/components/incidents/metrics_tab_spec.js

@@ -131,7 +131,7 @@ describe('Metrics tab', () => {
 
       await waitForPromises();
 
-      expect(dispatchSpy).toHaveBeenCalledWith('uploadImage', { files: fileList, url: testUrl });
+      expect(dispatchSpy).toHaveBeenCalledWith('uploadImage', { files: fileList, url: testUrl, urlText: "" });
     });
 
     describe('url field', () => {
@@ -144,7 +144,11 @@ describe('Metrics tab', () => {
       });
 
       it('should display the url field', () => {
-        expect(wrapper.findComponent(GlFormInput).attributes('value')).toBe(testUrl);
+        expect(wrapper.find('#upload-url-input').attributes('value')).toBe(testUrl);
+      });
+
+      it('should display the url text field', () => {
+        expect(wrapper.find('#upload-text-input').attributes('value')).toBe('');
       });
 
       it('should clear url when cancelled', async () => {

locale/gitlab.pot

@@ -18957,6 +18957,9 @@ msgstr ""
 msgid "Incidents|Add a URL"
 msgstr ""
 
+msgid "Incidents|Add a link to the uploaded image."
+msgstr ""
+
 msgid "Incidents|Drop or %{linkStart}upload%{linkEnd} a metric screenshot to attach it to the incident"
 msgstr ""
 
@@ -18972,9 +18975,6 @@ msgstr ""
 msgid "Incidents|There was an issue uploading your image."
 msgstr ""
 
-msgid "Incidents|You can optionally add a URL to link users to the original graph."
-msgstr ""
-
 msgid "Incident|Alert details"
 msgstr ""
 
@@ -21483,6 +21483,9 @@ msgstr ""
 msgid "Link"
 msgstr ""
 
+msgid "Link (optional)"
+msgstr ""
+
 msgid "Link Prometheus monitoring to GitLab."
 msgstr ""
 
@@ -35619,6 +35622,9 @@ msgstr ""
 msgid "Tests"
 msgstr ""
 
+msgid "Text (optional)"
+msgstr ""
+
 msgid "Text added to the body of all email messages. %{character_limit} character limit"
 msgstr ""