Add latest changes from gitlab-org/gitlab@master

2 files changed, 69 insertions, 14 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue
index 8111948e55d..3f77f7ad13f 100644
--- a/app/assets/javascripts/work_items/components/work_item_description.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlFormGroup } from '@gitlab/ui';
+import { GlAlert, GlButton, GlFormGroup } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave';
@@ -19,6 +19,7 @@ import WorkItemDescriptionRendered from './work_item_description_rendered.vue';
 export default {
   components: {
     EditedAt,
+    GlAlert,
     GlButton,
     GlFormGroup,
     MarkdownEditor,
@@ -54,6 +55,7 @@ export default {
       isSubmittingWithKeydown: false,
       descriptionText: '',
       descriptionHtml: '',
+      conflictedDescription: '',
     };
   },
   apollo: {
@@ -71,8 +73,14 @@ export default {
         return !this.queryVariables.id && !this.queryVariables.iid;
       },
       result() {
-        this.descriptionText = this.workItemDescription?.description;
-        this.descriptionHtml = this.workItemDescription?.descriptionHtml;
+        if (this.isEditing) {
+          if (this.descriptionText !== this.workItemDescription?.description) {
+            this.conflictedDescription = this.workItemDescription?.description;
+          }
+        } else {
+          this.descriptionText = this.workItemDescription?.description;
+          this.descriptionHtml = this.workItemDescription?.descriptionHtml;
+        }
       },
       error() {
         this.$emit('error', i18n.fetchError);
@@ -94,6 +102,9 @@ export default {
     canEdit() {
       return this.workItem?.userPermissions?.updateWorkItem || false;
     },
+    hasConflicts() {
+      return Boolean(this.conflictedDescription);
+    },
     tracking() {
       return {
         category: TRACKING_CATEGORY_SHOW,
@@ -196,6 +207,7 @@ export default {
 
         this.isEditing = false;
         clearDraft(this.autosaveKey);
+        this.conflictedDescription = '';
       } catch (error) {
         this.$emit('error', error.message);
         Sentry.captureException(error);
@@ -267,17 +279,59 @@ export default {
         </template>
       </markdown-field>
       <div class="gl-display-flex">
-        <gl-button
-          category="primary"
-          variant="confirm"
-          :loading="isSubmitting"
-          data-testid="save-description"
-          @click="updateWorkItem"
-          >{{ __('Save') }}
-        </gl-button>
-        <gl-button category="tertiary" class="gl-ml-3" data-testid="cancel" @click="cancelEditing"
-          >{{ __('Cancel') }}
-        </gl-button>
+        <gl-alert
+          v-if="hasConflicts"
+          :dismissible="false"
+          variant="danger"
+          class="gl-w-full"
+          data-testid="work-item-description-conflicts"
+        >
+          <p>
+            {{
+              s__(
+                "WorkItem|Someone edited the description at the same time you did. If you save it will overwrite their changes. Please confirm you'd like to save your edits.",
+              )
+            }}
+          </p>
+          <details class="gl-mb-5">
+            <summary class="gl-text-blue-500">{{ s__('WorkItem|View current version') }}</summary>
+            <textarea
+              class="note-textarea js-gfm-input js-autosize markdown-area gl-p-3"
+              readonly
+              :value="conflictedDescription"
+            ></textarea>
+          </details>
+          <template #actions>
+            <gl-button
+              category="primary"
+              variant="confirm"
+              :loading="isSubmitting"
+              data-testid="save-description"
+              @click="updateWorkItem"
+              >{{ s__('WorkItem|Save and overwrite') }}
+            </gl-button>
+            <gl-button
+              category="secondary"
+              class="gl-ml-3"
+              data-testid="cancel"
+              @click="cancelEditing"
+              >{{ s__('WorkItem|Discard changes') }}
+            </gl-button>
+          </template>
+        </gl-alert>
+        <template v-else>
+          <gl-button
+            category="primary"
+            variant="confirm"
+            :loading="isSubmitting"
+            data-testid="save-description"
+            @click="updateWorkItem"
+            >{{ __('Save') }}
+          </gl-button>
+          <gl-button category="tertiary" class="gl-ml-3" data-testid="cancel" @click="cancelEditing"
+            >{{ __('Cancel') }}
+          </gl-button>
+        </template>
       </div>
     </gl-form-group>
     <work-item-description-rendered
diff --git a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
index 2cdff901978..4e9ebef289e 100644
--- a/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description_rendered.vue
@@ -115,6 +115,7 @@ export default {
       ref="gfm-content"
       v-safe-html="descriptionHtml"
       class="md gl-mb-5 gl-min-h-8"
+      data-testid="work-item-description"
       @change="toggleCheckboxes"
     ></div>
   </div>