app/assets/javascripts/releases/components/release_block_milestone_info.vue

@@ -126,12 +126,12 @@ export default {
             v-gl-tooltip
             :title="milestone.description"
             :href="milestone.webUrl"
-            class="append-right-4"
+            class="gl-mr-2"
           >
             {{ milestone.title }}
           </gl-link>
           <template v-if="shouldRenderBullet(index)">
-            <span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
+            <span :key="'bullet-' + milestone.id" class="gl-mr-2">&bull;</span>
           </template>
           <template v-if="shouldRenderShowMoreLink(index)">
             <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { __ } from '~/locale';
 import Flash from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
@@ -18,6 +18,10 @@ export default {
   },
   mixins: [recaptchaModalImplementor],
   props: {
+    fullPath: {
+      required: true,
+      type: String,
+    },
     isEditable: {
       required: true,
       type: Boolean,
@@ -42,16 +46,24 @@ export default {
     },
   },
   created() {
+    eventHub.$on('updateConfidentialAttribute', this.updateConfidentialAttribute);
     eventHub.$on('closeConfidentialityForm', this.toggleForm);
   },
   beforeDestroy() {
+    eventHub.$off('updateConfidentialAttribute', this.updateConfidentialAttribute);
     eventHub.$off('closeConfidentialityForm', this.toggleForm);
   },
   methods: {
+    ...mapActions(['setConfidentiality']),
     toggleForm() {
       this.edit = !this.edit;
     },
-    updateConfidentialAttribute(confidential) {
+    closeForm() {
+      this.edit = false;
+    },
+    updateConfidentialAttribute() {
+      // TODO: rm when FF is defaulted to on.
+      const confidential = !this.confidential;
       this.service
         .update('issue', { confidential })
         .then(({ data }) => this.checkForSpam(data))
@@ -97,12 +109,8 @@ export default {
       >
     </div>
     <div class="value sidebar-item-value hide-collapsed">
-      <edit-form
-        v-if="edit"
-        :is-confidential="confidential"
-        :update-confidential-attribute="updateConfidentialAttribute"
-      />
-      <div v-if="!confidential" class="no-value sidebar-item-value">
+      <edit-form v-if="edit" :is-confidential="confidential" :full-path="fullPath" />
+      <div v-if="!confidential" class="no-value sidebar-item-value" data-testid="not-confidential">
         <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>

app/assets/javascripts/sidebar/components/confidential/edit_form.vue

@@ -11,9 +11,9 @@ export default {
       required: true,
       type: Boolean,
     },
-    updateConfidentialAttribute: {
+    fullPath: {
       required: true,
-      type: Function,
+      type: String,
     },
   },
   computed: {
@@ -37,10 +37,7 @@ export default {
       <div>
         <p v-if="!isConfidential" v-html="confidentialityOnWarning"></p>
         <p v-else v-html="confidentialityOffWarning"></p>
-        <edit-form-buttons
-          :is-confidential="isConfidential"
-          :update-confidential-attribute="updateConfidentialAttribute"
-        />
+        <edit-form-buttons :full-path="fullPath" />
       </div>
     </div>
   </div>

app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue

 <script>
 import $ from 'jquery';
-import eventHub from '../../event_hub';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
 import { __ } from '~/locale';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import Flash from '~/flash';
+import eventHub from '../../event_hub';
 
 export default {
+  components: {
+    GlLoadingIcon,
+  },
+  mixins: [glFeatureFlagsMixin()],
   props: {
-    isConfidential: {
-      required: true,
-      type: Boolean,
-    },
-    updateConfidentialAttribute: {
+    fullPath: {
       required: true,
-      type: Function,
+      type: String,
     },
   },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
   computed: {
+    ...mapState({ confidential: ({ noteableData }) => noteableData.confidential }),
     toggleButtonText() {
-      return this.isConfidential ? __('Turn Off') : __('Turn On');
-    },
-    updateConfidentialBool() {
-      return !this.isConfidential;
+      if (this.isLoading) {
+        return __('Applying');
+      }
+
+      return this.confidential ? __('Turn Off') : __('Turn On');
     },
   },
   methods: {
+    ...mapActions(['updateConfidentialityOnIssue']),
     closeForm() {
       eventHub.$emit('closeConfidentialityForm');
       $(this.$el).trigger('hidden.gl.dropdown');
     },
     submitForm() {
-      this.closeForm();
-      this.updateConfidentialAttribute(this.updateConfidentialBool);
+      this.isLoading = true;
+      const confidential = !this.confidential;
+
+      if (this.glFeatures.confidentialApolloSidebar) {
+        this.updateConfidentialityOnIssue({ confidential, fullPath: this.fullPath })
+          .catch(() => {
+            Flash(__('Something went wrong trying to change the confidentiality of this issue'));
+          })
+          .finally(() => {
+            this.closeForm();
+            this.isLoading = false;
+          });
+      } else {
+        eventHub.$emit('updateConfidentialAttribute');
+      }
     },
   },
 };
@@ -44,8 +69,10 @@ export default {
       type="button"
       class="btn btn-close"
       data-testid="confidential-toggle"
+      :disabled="isLoading"
       @click.prevent="submitForm"
     >
+      <gl-loading-icon v-if="isLoading" inline />
       {{ toggleButtonText }}
     </button>
   </div>

app/assets/javascripts/sidebar/components/confidential/queries/update_issue_confidential.mutation.graphql

+mutation updateIssueConfidential($input: IssueSetConfidentialInput!) {
+  issueSetConfidential(input: $input) {
+    issue {
+      confidential
+    }
+  }
+}

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -52,20 +52,30 @@ function mountAssigneesComponent(mediator) {
 function mountConfidentialComponent(mediator) {
   const el = document.getElementById('js-confidential-entry-point');
 
+  const { fullPath, iid } = getSidebarOptions();
+
   if (!el) return;
 
   const dataNode = document.getElementById('js-confidential-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
-
-  new ConfidentialComp({
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
     store,
-    propsData: {
-      isEditable: initialData.is_editable,
-      service: mediator.service,
+    components: {
+      ConfidentialIssueSidebar,
     },
-  }).$mount(el);
+    render: createElement =>
+      createElement('confidential-issue-sidebar', {
+        props: {
+          iid: String(iid),
+          fullPath,
+          isEditable: initialData.is_editable,
+          service: mediator.service,
+        },
+      }),
+  });
 }
 
 function mountLockComponent(mediator) {

app/assets/javascripts/static_site_editor/components/edit_area.vue

@@ -37,41 +37,28 @@ export default {
       saveable: false,
       parsedSource: parseSourceFile(this.content),
       editorMode: EDITOR_TYPES.wysiwyg,
+      isModified: false,
     };
   },
   computed: {
     editableContent() {
-      return this.parsedSource.editable;
-    },
-    editableKey() {
-      return this.isWysiwygMode ? 'body' : 'raw';
+      return this.parsedSource.content(this.isWysiwygMode);
     },
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
-    modified() {
-      return this.isWysiwygMode
-        ? this.parsedSource.isModifiedBody()
-        : this.parsedSource.isModifiedRaw();
-    },
   },
   methods: {
-    syncSource() {
-      if (this.isWysiwygMode) {
-        this.parsedSource.syncBodyToRaw();
-        return;
-      }
-
-      this.parsedSource.syncRawToBody();
+    onInputChange(newVal) {
+      this.parsedSource.sync(newVal, this.isWysiwygMode);
+      this.isModified = this.parsedSource.isModified();
     },
     onModeChange(mode) {
-      // Sequentially sync then switch modes (rich-content-editor's v-model computed source content update)
-      this.syncSource();
       this.editorMode = mode;
+      this.$refs.editor.resetInitialValue(this.editableContent);
     },
     onSubmit() {
-      this.syncSource();
-      this.$emit('submit', { content: this.editableContent.raw });
+      this.$emit('submit', { content: this.parsedSource.content() });
     },
   },
 };
@@ -80,16 +67,18 @@ export default {
   <div class="d-flex flex-grow-1 flex-column h-100">
     <edit-header class="py-2" :title="title" />
     <rich-content-editor
-      v-model="editableContent[editableKey]"
+      ref="editor"
+      :content="editableContent"
       :initial-edit-type="editorMode"
       class="mb-9 h-100"
       @modeChange="onModeChange"
+      @input="onInputChange"
     />
-    <unsaved-changes-confirm-dialog :modified="modified" />
+    <unsaved-changes-confirm-dialog :modified="isModified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :return-url="returnUrl"
-      :saveable="modified"
+      :saveable="isModified"
       :saving-changes="savingChanges"
       @submit="onSubmit"
     />

app/assets/javascripts/static_site_editor/services/parse_source_file.js

@@ -22,33 +22,43 @@ const parseSourceFile = raw => {
     return buildPayload(source, '', '', source);
   };
 
-  const computedRaw = () => `${editable.header}${editable.spacing}${editable.body}`;
-
-  const syncRawToBody = () => {
+  const syncEditable = () => {
     /*
     We re-parse as markdown editing could have added non-body changes (preFrontMatter, frontMatter, or spacing).
-    Re-parsing additionally gets us the desired body that was extracted from the mutated editable.raw
-    Additionally we intentionally mutate the existing editable's key values as opposed to reassigning the object itself so consumers of the potentially reactive property stay in sync.
+    Re-parsing additionally gets us the desired body that was extracted from the potentially mutated editable.raw
     */
-    Object.assign(editable, parse(editable.raw));
+    editable = parse(editable.raw);
   };
 
   const syncBodyToRaw = () => {
-    editable.raw = computedRaw();
+    editable.raw = `${editable.header}${editable.spacing}${editable.body}`;
+  };
+
+  const sync = (newVal, isBodyToRaw) => {
+    const editableKey = isBodyToRaw ? 'body' : 'raw';
+    editable[editableKey] = newVal;
+
+    if (isBodyToRaw) {
+      syncBodyToRaw();
+    }
+
+    syncEditable();
+  };
+
+  const content = (isBody = false) => {
+    const editableKey = isBody ? 'body' : 'raw';
+    return editable[editableKey];
   };
 
-  const isModifiedRaw = () => initial.raw !== editable.raw;
-  const isModifiedBody = () => initial.raw !== computedRaw();
+  const isModified = () => initial.raw !== editable.raw;
 
   initial = parse(raw);
   editable = parse(raw);
 
   return {
-    editable,
-    isModifiedRaw,
-    isModifiedBody,
-    syncBodyToRaw,
-    syncRawToBody,
+    content,
+    isModified,
+    sync,
   };
 };
 

app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue

@@ -82,7 +82,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon append-right-4 align-self-baseline align-self-md-auto mt-xl-0"
+          class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0"
           :aria-label="__('Confidential')"
         />
         <a :href="computedPath" class="sortable-link gl-font-weight-normal">{{ title }}</a>

app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue

@@ -27,7 +27,7 @@ export default {
     AddImageModal,
   },
   props: {
-    value: {
+    content: {
       type: String,
       required: true,
     },
@@ -66,23 +66,6 @@ export default {
       return this.$refs.editor;
     },
   },
-  watch: {
-    value(newVal) {
-      const isSameMode = this.previousMode === this.editorApi.currentMode;
-      if (!isSameMode) {
-        /*
-        The ToastUI Editor consumes its content via the `initial-value` prop and then internally
-        manages changes. If we desire the `v-model` to work as expected, we need to manually call
-        `setMarkdown`. However, if we do this in each v-model change we'll continually prevent
-        the editor from internally managing changes. Thus we use the `previousMode` flag as
-        confirmation to actually update its internals. This is initially designed so that front
-        matter is excluded from editing in wysiwyg mode, but included in markdown mode.
-        */
-        this.editorInstance.invoke('setMarkdown', newVal);
-        this.previousMode = this.editorApi.currentMode;
-      }
-    },
-  },
   beforeDestroy() {
     removeCustomEventListener(
       this.editorApi,
@@ -93,6 +76,9 @@ export default {
     this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode);
   },
   methods: {
+    resetInitialValue(newVal) {
+      this.editorInstance.invoke('setMarkdown', newVal);
+    },
     onContentChanged() {
       this.$emit('input', getMarkdown(this.editorInstance));
     },
@@ -123,7 +109,7 @@ export default {
   <div>
     <toast-editor
       ref="editor"
-      :initial-value="value"
+      :initial-value="content"
       :options="editorOptions"
       :preview-style="previewStyle"
       :initial-edit-type="initialEditType"

app/assets/stylesheets/framework/common.scss

@@ -409,14 +409,12 @@ img.emoji {
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-64 { margin-left: 64px; }
 .append-right-2 { margin-right: 2px; }
-.append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-right-48 { margin-right: 48px; }
-.prepend-right-32 { margin-right: 32px; }
 .append-bottom-5 { margin-bottom: 5px; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }

app/assets/stylesheets/framework/mixins.scss

@@ -137,7 +137,8 @@
     transition-duration: 0.3s;
   }
 
-  .fa {
+  .fa,
+  svg {
     position: relative;
     top: 5px;
     font-size: 18px;

app/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -313,7 +313,7 @@
     right: 0;
     text-align: right;
 
-    .fa {
+    svg {
       right: 5px;
     }
   }
@@ -323,7 +323,7 @@
     left: 0;
     text-align: left;
 
-    .fa {
+    svg {
       left: 5px;
     }
   }

app/controllers/projects/issues_controller.rb

@@ -51,6 +51,8 @@ def set_issuables_index_only_actions
 
   before_action only: :show do
     push_frontend_feature_flag(:real_time_issue_sidebar, @project)
+    push_frontend_feature_flag(:confidential_notes, @project)
+    push_frontend_feature_flag(:confidential_apollo_sidebar, @project)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:discussions]

app/controllers/projects/releases_controller.rb

@@ -13,6 +13,7 @@ class Projects::ReleasesController < Projects::ApplicationController
     push_frontend_feature_flag(:release_asset_link_type, project, default_enabled: true)
   end
   before_action :authorize_update_release!, only: %i[edit update]
+  before_action :authorize_create_release!, only: :new
 
   def index
     respond_to do |format|

app/finders/todos_finder.rb

@@ -11,7 +11,7 @@
 #     author_id: integer
 #     project_id; integer
 #     state: 'pending' (default) or 'done'
-#     type: 'Issue' or 'MergeRequest'
+#     type: 'Issue' or 'MergeRequest' or ['Issue', 'MergeRequest']
 #
 
 class TodosFinder
@@ -40,13 +40,14 @@ def initialize(current_user, params = {})
 
   def execute
     return Todo.none if current_user.nil?
+    raise ArgumentError, invalid_type_message unless valid_types?
 
     items = current_user.todos
     items = by_action_id(items)
     items = by_action(items)
     items = by_author(items)
     items = by_state(items)
-    items = by_type(items)
+    items = by_types(items)
     items = by_group(items)
     # Filtering by project HAS TO be the last because we use
     # the project IDs yielded by the todos query thus far
@@ -123,12 +124,16 @@ def group
     end
   end
 
-  def type?
-    type.present? && self.class.todo_types.include?(type)
+  def types
+    @types ||= Array(params[:type]).reject(&:blank?)
   end
 
-  def type
-    params[:type]
+  def valid_types?
+    types.all? { |type| self.class.todo_types.include?(type) }
+  end
+
+  def invalid_type_message
+    _("Unsupported todo type passed. Supported todo types are: %{todo_types}") % { todo_types: self.class.todo_types.to_a.join(', ') }
   end
 
   def sort(items)
@@ -193,9 +198,9 @@ def by_state(items)
     items.with_states(params[:state])
   end
 
-  def by_type(items)
-    if type?
-      items.for_type(type)
+  def by_types(items)
+    if types.any?
+      items.for_type(types)
     else
       items
     end

app/graphql/resolvers/release_resolver.rb

@@ -15,6 +15,8 @@ def self.single
     end
 
     def resolve(tag_name:)
+      return unless Feature.enabled?(:graphql_release_data, project, default_enabled: true)
+
       ReleasesFinder.new(
         project,
         current_user,

app/graphql/resolvers/releases_resolver.rb

@@ -12,6 +12,8 @@ def self.single
     end
 
     def resolve(**args)
+      return unless Feature.enabled?(:graphql_release_data, project, default_enabled: true)
+
       ReleasesFinder.new(
         project,
         current_user

app/graphql/types/diff_stats_summary_type.rb

+# frozen_string_literal: true
+
+module Types
+  # rubocop: disable Graphql/AuthorizeTypes
+  # Types that use DiffStatsType should have their own authorization
+  class DiffStatsSummaryType < BaseObject
+    graphql_name 'DiffStatsSummary'
+
+    description 'Aggregated summary of changes'
+
+    field :additions, GraphQL::INT_TYPE, null: false,
+          description: 'Number of lines added'
+    field :deletions, GraphQL::INT_TYPE, null: false,
+          description: 'Number of lines deleted'
+    field :changes, GraphQL::INT_TYPE, null: false,
+          description: 'Number of lines changed'
+
+    def changes
+      object[:additions] + object[:deletions]
+    end
+  end
+  # rubocop: enable Graphql/AuthorizeTypes
+end

app/graphql/types/diff_stats_type.rb

+# frozen_string_literal: true
+
+module Types
+  # rubocop: disable Graphql/AuthorizeTypes
+  # Types that use DiffStatsType should have their own authorization
+  class DiffStatsType < BaseObject
+    graphql_name 'DiffStats'
+
+    description 'Changes to a single file'
+
+    field :path, GraphQL::STRING_TYPE, null: false,
+          description: 'File path, relative to repository root'
+    field :additions, GraphQL::INT_TYPE, null: false,
+          description: 'Number of lines added to this file'
+    field :deletions, GraphQL::INT_TYPE, null: false,
+          description: 'Number of lines deleted from this file'
+  end
+  # rubocop: enable Graphql/AuthorizeTypes
+end