Gemfile.lock

@@ -857,7 +857,7 @@ GEM
     re2 (1.2.0)
     recaptcha (4.13.1)
       json
-    recursive-open-struct (1.1.0)
+    recursive-open-struct (1.1.1)
     redis (4.1.3)
     redis-actionpack (5.2.0)
       actionpack (>= 5, < 7)

Guardfile

@@ -2,28 +2,51 @@
 
 # More info at https://github.com/guard/guard#readme
 
+require "guard/rspec/dsl"
+
 cmd = ENV['GUARD_CMD'] || (ENV['SPRING'] ? 'spring rspec' : 'bundle exec rspec')
 
-guard :rspec, cmd: cmd do
-  require "guard/rspec/dsl"
-  dsl = Guard::RSpec::Dsl.new(self)
+directories %w(app ee lib spec)
+
+rspec_context_for = proc do |context_path|
+  OpenStruct.new(to_s: "spec").tap do |rspec|
+    rspec.spec_dir = "#{context_path}spec"
+    rspec.spec = ->(m) { Guard::RSpec::Dsl.detect_spec_file_for(rspec, m) }
+    rspec.spec_helper = "#{rspec.spec_dir}/spec_helper.rb"
+    rspec.spec_files = %r{^#{rspec.spec_dir}/.+_spec\.rb$}
+    rspec.spec_support = %r{^#{rspec.spec_dir}/support/(.+)\.rb$}
+  end
+end
+
+rails_context_for = proc do |context_path, exts|
+  OpenStruct.new.tap do |rails|
+    rails.app_files = %r{^#{context_path}app/(.+)\.rb$}
+
+    rails.views = %r{^#{context_path}app/(views/.+/[^/]*\.(?:#{exts}))$}
+    rails.view_dirs = %r{^#{context_path}app/views/(.+)/[^/]*\.(?:#{exts})$}
+    rails.layouts = %r{^#{context_path}app/layouts/(.+)/[^/]*\.(?:#{exts})$}
 
-  directories %w(app ee lib spec)
+    rails.controllers = %r{^#{context_path}app/controllers/(.+)_controller\.rb$}
+    rails.routes = "#{context_path}config/routes.rb"
+    rails.app_controller = "#{context_path}app/controllers/application_controller.rb"
+    rails.spec_helper = "#{context_path}spec/rails_helper.rb"
+  end
+end
 
+guard_setup = proc do |context_path|
   # RSpec files
-  rspec = dsl.rspec
+  rspec = rspec_context_for.call(context_path)
   watch(rspec.spec_helper) { rspec.spec_dir }
   watch(rspec.spec_support) { rspec.spec_dir }
   watch(rspec.spec_files)
 
   # Ruby files
-  ruby = dsl.ruby
-  dsl.watch_spec_files_for(ruby.lib_files)
+  watch(%r{^#{context_path}(lib/.+)\.rb$}) { |m| rspec.spec.call(m[1]) }
 
   # Rails files
-  rails = dsl.rails(view_extensions: %w(erb haml slim))
-  dsl.watch_spec_files_for(rails.app_files)
-  dsl.watch_spec_files_for(rails.views)
+  rails = rails_context_for.call(context_path, %w(erb haml slim))
+  watch(rails.app_files) { |m| rspec.spec.call(m[1]) }
+  watch(rails.views)     { |m| rspec.spec.call(m[1]) }
 
   watch(rails.controllers) do |m|
     [
@@ -41,3 +64,11 @@ guard :rspec, cmd: cmd do
   watch(rails.view_dirs)     { |m| rspec.spec.call("features/#{m[1]}") }
   watch(rails.layouts)       { |m| rspec.spec.call("features/#{m[1]}") }
 end
+
+context_paths = ['', 'ee/']
+
+context_paths.each do |context_path|
+  guard :rspec, cmd: cmd, spec_paths: ["#{context_path}spec/"] do
+    guard_setup.call(context_path)
+  end
+end

app/assets/javascripts/api.js

@@ -23,6 +23,8 @@ const Api = {
   projectMergeRequestVersionsPath: '/api/:version/projects/:id/merge_requests/:mrid/versions',
   projectRunnersPath: '/api/:version/projects/:id/runners',
   projectProtectedBranchesPath: '/api/:version/projects/:id/protected_branches',
+  projectSearchPath: '/api/:version/projects/:id/search',
+  projectMilestonesPath: '/api/:version/projects/:id/milestones',
   mergeRequestsPath: '/api/:version/merge_requests',
   groupLabelsPath: '/groups/:namespace_path/-/labels',
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
@@ -75,13 +77,11 @@ const Api = {
     const url = Api.buildUrl(Api.groupsPath);
     return axios
       .get(url, {
-        params: Object.assign(
-          {
-            search: query,
-            per_page: DEFAULT_PER_PAGE,
-          },
-          options,
-        ),
+        params: {
+          search: query,
+          per_page: DEFAULT_PER_PAGE,
+          ...options,
+        },
       })
       .then(({ data }) => {
         callback(data);
@@ -248,6 +248,23 @@ const Api = {
       .then(({ data }) => data);
   },
 
+  projectSearch(id, options = {}) {
+    const url = Api.buildUrl(Api.projectSearchPath).replace(':id', encodeURIComponent(id));
+
+    return axios.get(url, {
+      params: {
+        search: options.search,
+        scope: options.scope,
+      },
+    });
+  },
+
+  projectMilestones(id) {
+    const url = Api.buildUrl(Api.projectMilestonesPath).replace(':id', encodeURIComponent(id));
+
+    return axios.get(url);
+  },
+
   mergeRequests(params = {}) {
     const url = Api.buildUrl(Api.mergeRequestsPath);
 
@@ -282,7 +299,7 @@ const Api = {
     };
     return axios
       .get(url, {
-        params: Object.assign({}, defaults, options),
+        params: { ...defaults, ...options },
       })
       .then(({ data }) => callback(data))
       .catch(() => flash(__('Something went wrong while fetching projects')));
@@ -365,13 +382,11 @@ const Api = {
   users(query, options) {
     const url = Api.buildUrl(this.usersPath);
     return axios.get(url, {
-      params: Object.assign(
-        {
-          search: query,
-          per_page: DEFAULT_PER_PAGE,
-        },
-        options,
-      ),
+      params: {
+        search: query,
+        per_page: DEFAULT_PER_PAGE,
+        ...options,
+      },
     });
   },
 
@@ -402,7 +417,7 @@ const Api = {
     };
     return axios
       .get(url, {
-        params: Object.assign({}, defaults, options),
+        params: { ...defaults, ...options },
       })
       .then(({ data }) => callback(data))
       .catch(() => flash(__('Something went wrong while fetching projects')));

app/assets/javascripts/behaviors/shortcuts/shortcuts_blob.js

@@ -22,7 +22,7 @@ function eventHasModifierKeys(event) {
 
 export default class ShortcutsBlob extends Shortcuts {
   constructor(opts) {
-    const options = Object.assign({}, defaults, opts);
+    const options = { ...defaults, ...opts };
     super(options.skipResetBindings);
     this.options = options;
 

app/assets/javascripts/blob/blob_fork_suggestion.js

@@ -17,7 +17,7 @@ const defaults = {
 
 class BlobForkSuggestion {
   constructor(options) {
-    this.elementMap = Object.assign({}, defaults, options);
+    this.elementMap = { ...defaults, ...options };
     this.onOpenButtonClick = this.onOpenButtonClick.bind(this);
     this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
   }

app/assets/javascripts/boards/mixins/sortable_default_options.js

@@ -19,14 +19,15 @@ export function getBoardSortableDefaultOptions(obj) {
   const touchEnabled =
     'ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch);
 
-  const defaultSortOptions = Object.assign({}, sortableConfig, {
+  const defaultSortOptions = {
+    ...sortableConfig,
     filter: '.no-drag',
     delay: touchEnabled ? 100 : 0,
     scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
     onStart: sortableStart,
     onEnd: sortableEnd,
-  });
+  };
 
   Object.keys(obj).forEach(key => {
     defaultSortOptions[key] = obj[key];

app/assets/javascripts/close_reopen_report_toggle.js

@@ -2,7 +2,7 @@ import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 class CloseReopenReportToggle {
   constructor(opts = {}) {

app/assets/javascripts/clusters/clusters_bundle.js

@@ -325,7 +325,7 @@ export default class Clusters {
 
   handleClusterStatusSuccess(data) {
     const prevStatus = this.store.state.status;
-    const prevApplicationMap = Object.assign({}, this.store.state.applications);
+    const prevApplicationMap = { ...this.store.state.applications };
 
     this.store.updateStateFromServer(data.data);
 

app/assets/javascripts/code_navigation/store/actions.js

@@ -30,7 +30,9 @@ export default {
     });
   },
   showBlobInteractionZones({ state }, path) {
-    Object.values(state.data[path]).forEach(d => addInteractionClass(path, d));
+    if (state.data && state.data[path]) {
+      Object.values(state.data[path]).forEach(d => addInteractionClass(path, d));
+    }
   },
   showDefinition({ commit, state }, { target: el }) {
     let definition;

app/assets/javascripts/comment_type_toggle.js

@@ -2,7 +2,7 @@ import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 class CommentTypeToggle {
   constructor(opts = {}) {

app/assets/javascripts/create_merge_request_dropdown.js

@@ -13,7 +13,7 @@ import {
 import confidentialMergeRequestState from './confidential_merge_request/state';
 
 // Todo: Remove this when fixing issue in input_setter plugin
-const InputSetter = Object.assign({}, ISetter);
+const InputSetter = { ...ISetter };
 
 const CREATE_MERGE_REQUEST = 'create-mr';
 const CREATE_BRANCH = 'create-branch';

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js

@@ -84,7 +84,7 @@ export default {
     events.forEach(item => {
       if (!item) return;
 
-      const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
+      const eventItem = { ...DEFAULT_EVENT_OBJECTS[stage.slug], ...item };
 
       eventItem.totalTime = eventItem.total_time;
 

app/assets/javascripts/design_management/components/design_note_pin.vue

@@ -28,9 +28,7 @@ export default {
       return this.label === null;
     },
     pinStyle() {
-      return this.repositioning
-        ? Object.assign({}, this.position, { cursor: 'move' })
-        : this.position;
+      return this.repositioning ? { ...this.position, cursor: 'move' } : this.position;
     },
     pinLabel() {
       return this.isNewNote

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -103,7 +103,13 @@ export default {
       class="design-discussion bordered-box position-relative"
       data-qa-selector="design_discussion_content"
     >
-      <design-note v-for="note in discussion.notes" :key="note.id" :note="note" />
+      <design-note
+        v-for="note in discussion.notes"
+        :key="note.id"
+        :note="note"
+        :markdown-preview-path="markdownPreviewPath"
+        @error="$emit('updateNoteError', $event)"
+      />
       <div class="reply-wrapper">
         <reply-placeholder
           v-if="!isFormRendered"

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
+import { ApolloMutation } from 'vue-apollo';
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import DesignReplyForm from './design_reply_form.vue';
 import { findNoteId } from '../../utils/design_management_utils';
+import { hasErrors } from '../../utils/cache_update';
 
 export default {
   components: {
     UserAvatarLink,
     TimelineEntryItem,
     TimeAgoTooltip,
+    DesignReplyForm,
+    ApolloMutation,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     note: {
       type: Object,
       required: true,
     },
+    markdownPreviewPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      noteText: this.note.body,
+      isEditing: false,
+    };
   },
   computed: {
     author() {
@@ -26,12 +48,31 @@ export default {
     isNoteLinked() {
       return this.$route.hash === `#note_${this.noteAnchorId}`;
     },
+    mutationPayload() {
+      return {
+        id: this.note.id,
+        body: this.noteText,
+      };
+    },
   },
   mounted() {
     if (this.isNoteLinked) {
       this.$refs.anchor.$el.scrollIntoView({ behavior: 'smooth', inline: 'start' });
     }
   },
+  methods: {
+    hideForm() {
+      this.isEditing = false;
+      this.noteText = this.note.body;
+    },
+    onDone({ data }) {
+      this.hideForm();
+      if (hasErrors(data.updateNote)) {
+        this.$emit('error', data.errors[0]);
+      }
+    },
+  },
+  updateNoteMutation,
 };
 </script>
 
@@ -43,26 +84,65 @@ export default {
       :img-alt="author.username"
       :img-size="40"
     />
-    <a
-      v-once
-      :href="author.webUrl"
-      class="js-user-link"
-      :data-user-id="author.id"
-      :data-username="author.username"
-    >
-      <span class="note-header-author-name bold">{{ author.name }}</span>
-      <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
-      <span class="note-headline-light">@{{ author.username }}</span>
-    </a>
-    <span class="note-headline-light note-headline-meta">
-      <span class="system-note-message"> <slot></slot> </span>
-      <template v-if="note.createdAt">
-        <span class="system-note-separator"></span>
-        <a class="note-timestamp system-note-separator" :href="`#note_${noteAnchorId}`">
-          <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
+    <div class="d-flex justify-content-between">
+      <div>
+        <a
+          v-once
+          :href="author.webUrl"
+          class="js-user-link"
+          :data-user-id="author.id"
+          :data-username="author.username"
+        >
+          <span class="note-header-author-name bold">{{ author.name }}</span>
+          <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
+          <span class="note-headline-light">@{{ author.username }}</span>
         </a>
-      </template>
-    </span>
-    <div class="note-text md" data-qa-selector="note_content" v-html="note.bodyHtml"></div>
+        <span class="note-headline-light note-headline-meta">
+          <span class="system-note-message"> <slot></slot> </span>
+          <template v-if="note.createdAt">
+            <span class="system-note-separator"></span>
+            <a class="note-timestamp system-note-separator" :href="`#note_${noteAnchorId}`">
+              <time-ago-tooltip :time="note.createdAt" tooltip-placement="bottom" />
+            </a>
+          </template>
+        </span>
+      </div>
+      <button
+        v-if="!isEditing"
+        v-gl-tooltip
+        type="button"
+        title="Edit comment"
+        class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
+        @click="isEditing = true"
+      >
+        <gl-icon name="pencil" class="link-highlight" />
+      </button>
+    </div>
+    <div
+      v-if="!isEditing"
+      class="note-text js-note-text md"
+      data-qa-selector="note_content"
+      v-html="note.bodyHtml"
+    ></div>
+    <apollo-mutation
+      v-else
+      #default="{ mutate, loading }"
+      :mutation="$options.updateNoteMutation"
+      :variables="{
+        input: mutationPayload,
+      }"
+      @error="$emit('error', $event)"
+      @done="onDone"
+    >
+      <design-reply-form
+        v-model="noteText"
+        :is-saving="loading"
+        :markdown-preview-path="markdownPreviewPath"
+        :is-new-comment="false"
+        class="mt-5"
+        @submitForm="mutate"
+        @cancelForm="hideForm"
+      />
+    </apollo-mutation>
   </timeline-entry-item>
 </template>

app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue

 <script>
 import { GlDeprecatedButton, GlModal } from '@gitlab/ui';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import { s__ } from '~/locale';
 
 export default {
   name: 'DesignReplyForm',
@@ -23,11 +24,42 @@ export default {
       type: Boolean,
       required: true,
     },
+    isNewComment: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      formText: this.value,
+    };
   },
   computed: {
     hasValue() {
       return this.value.trim().length > 0;
     },
+    modalSettings() {
+      if (this.isNewComment) {
+        return {
+          title: s__('DesignManagement|Cancel comment confirmation'),
+          okTitle: s__('DesignManagement|Discard comment'),
+          cancelTitle: s__('DesignManagement|Keep comment'),
+          content: s__('DesignManagement|Are you sure you want to cancel creating this comment?'),
+        };
+      }
+      return {
+        title: s__('DesignManagement|Cancel comment update confirmation'),
+        okTitle: s__('DesignManagement|Cancel changes'),
+        cancelTitle: s__('DesignManagement|Keep changes'),
+        content: s__('DesignManagement|Are you sure you want to cancel changes to this comment?'),
+      };
+    },
+    buttonText() {
+      return this.isNewComment
+        ? s__('DesignManagement|Comment')
+        : s__('DesignManagement|Save comment');
+    },
   },
   mounted() {
     this.$refs.textarea.focus();
@@ -37,7 +69,7 @@ export default {
       if (this.hasValue) this.$emit('submitForm');
     },
     cancelComment() {
-      if (this.hasValue) {
+      if (this.hasValue && this.formText !== this.value) {
         this.$refs.cancelCommentModal.show();
       } else {
         this.$emit('cancelForm');
@@ -85,7 +117,7 @@ export default {
         data-qa-selector="save_comment_button"
         @click="$emit('submitForm')"
       >
-        {{ __('Comment') }}
+        {{ buttonText }}
       </gl-deprecated-button>
       <gl-deprecated-button ref="cancelButton" @click="cancelComment">{{
         __('Cancel')
@@ -94,12 +126,12 @@ export default {
     <gl-modal
       ref="cancelCommentModal"
       ok-variant="danger"
-      :title="s__('DesignManagement|Cancel comment confirmation')"
-      :ok-title="s__('DesignManagement|Discard comment')"
-      :cancel-title="s__('DesignManagement|Keep comment')"
+      :title="modalSettings.title"
+      :ok-title="modalSettings.okTitle"
+      :cancel-title="modalSettings.cancelTitle"
       modal-id="cancel-comment-modal"
       @ok="$emit('cancelForm')"
-      >{{ s__('DesignManagement|Are you sure you want to cancel creating this comment?') }}
+      >{{ modalSettings.content }}
     </gl-modal>
   </form>
 </template>

app/assets/javascripts/design_management/graphql/mutations/update_note.mutation.graphql

+#import "../fragments/designNote.fragment.graphql"
+
+mutation updateNote($input: UpdateNoteInput!) {
+  updateNote(input: $input) {
+    note {
+      ...DesignNote
+    }
+    errors
+  }
+}

app/assets/javascripts/design_management/pages/design/index.vue

@@ -32,8 +32,10 @@ import {
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
   DESIGN_NOT_FOUND_ERROR,
   DESIGN_VERSION_NOT_EXIST_ERROR,
+  UPDATE_NOTE_ERROR,
   designDeletionError,
 } from '../../utils/error_messages';
+import { trackDesignDetailView } from '../../utils/tracking';
 import { DESIGNS_ROUTE_NAME } from '../../router/constants';
 
 export default {
@@ -231,6 +233,9 @@ export default {
     onCreateImageDiffNoteError(e) {
       this.onError(ADD_IMAGE_DIFF_NOTE_ERROR, e);
     },
+    onUpdateNoteError(e) {
+      this.onError(UPDATE_NOTE_ERROR, e);
+    },
     onDesignDiscussionError(e) {
       this.onError(ADD_DISCUSSION_COMMENT_ERROR, e);
     },
@@ -253,8 +258,21 @@ export default {
         query: this.$route.query,
       });
     },
+    trackEvent() {
+      trackDesignDetailView(
+        'issue-design-collection',
+        this.$route.query.version || this.latestVersionId,
+        this.isLatestVersion,
+      );
+    },
+  },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.trackEvent();
+    });
   },
   beforeRouteUpdate(to, from, next) {
+    this.trackEvent();
     this.closeCommentForm();
     next();
   },
@@ -329,6 +347,7 @@ export default {
             :discussion-index="index + 1"
             :markdown-preview-path="markdownPreviewPath"
             @error="onDesignDiscussionError"
+            @updateNoteError="onUpdateNoteError"
           />
           <apollo-mutation
             v-if="annotationCoordinates"
@@ -345,7 +364,7 @@ export default {
               v-model="comment"
               :is-saving="loading"
               :markdown-preview-path="markdownPreviewPath"
-              @submitForm="mutate()"
+              @submitForm="mutate"
               @cancelForm="closeCommentForm"
             />
           </apollo-mutation>

app/assets/javascripts/design_management/utils/cache_update.js

@@ -214,7 +214,7 @@ const onError = (data, message) => {
   throw new Error(data.errors);
 };
 
-const hasErrors = ({ errors = [] }) => errors?.length;
+export const hasErrors = ({ errors = [] }) => errors?.length;
 
 /**
  * Updates a store after design deletion

app/assets/javascripts/design_management/utils/error_messages.js

@@ -12,6 +12,8 @@ export const UPDATE_IMAGE_DIFF_NOTE_ERROR = s__(
   'DesignManagement|Could not update discussion. Please try again.',
 );
 
+export const UPDATE_NOTE_ERROR = s__('DesignManagement|Could not update note. Please try again.');
+
 export const UPLOAD_DESIGN_ERROR = s__(
   'DesignManagement|Error uploading a new design. Please try again.',
 );