From 866ca4e49ff74ffadf8e6f6ff663a168489c2aba Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Fri, 14 Feb 2020 21:09:08 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../javascripts/monitoring/stores/actions.js       |   4 +-
 .../javascripts/monitoring/stores/mutations.js     |  23 +--
 .../pages/projects/releases/edit/index.js          |   2 +-
 .../pages/projects/releases/index/index.js         |   2 +-
 .../javascripts/releases/components/app_edit.vue   | 172 +++++++++++++++++++++
 .../javascripts/releases/components/app_index.vue  |  98 ++++++++++++
 .../releases/components/evidence_block.vue         |  76 +++++++++
 .../releases/components/release_block.vue          | 120 ++++++++++++++
 .../releases/components/release_block_assets.vue   |  65 ++++++++
 .../releases/components/release_block_author.vue   |  42 +++++
 .../releases/components/release_block_footer.vue   | 112 ++++++++++++++
 .../releases/components/release_block_header.vue   |  53 +++++++
 .../releases/components/release_block_metadata.vue |  84 ++++++++++
 .../components/release_block_milestone_info.vue    | 136 ++++++++++++++++
 .../components/release_block_milestones.vue        |  51 ++++++
 app/assets/javascripts/releases/constants.js       |   7 +
 .../javascripts/releases/detail/components/app.vue | 172 ---------------------
 app/assets/javascripts/releases/detail/index.js    |  19 ---
 .../javascripts/releases/detail/store/actions.js   |  62 --------
 .../javascripts/releases/detail/store/index.js     |  14 --
 .../releases/detail/store/mutation_types.js        |  12 --
 .../javascripts/releases/detail/store/mutations.js |  42 -----
 .../javascripts/releases/detail/store/state.js     |  16 --
 .../javascripts/releases/list/components/app.vue   |  98 ------------
 .../releases/list/components/evidence_block.vue    |  76 ---------
 .../releases/list/components/release_block.vue     | 120 --------------
 .../list/components/release_block_assets.vue       |  65 --------
 .../list/components/release_block_author.vue       |  42 -----
 .../list/components/release_block_footer.vue       | 112 --------------
 .../list/components/release_block_header.vue       |  53 -------
 .../list/components/release_block_metadata.vue     |  84 ----------
 .../components/release_block_milestone_info.vue    | 136 ----------------
 .../list/components/release_block_milestones.vue   |  51 ------
 app/assets/javascripts/releases/list/constants.js  |   7 -
 app/assets/javascripts/releases/list/index.js      |  24 ---
 .../javascripts/releases/list/store/actions.js     |  40 -----
 .../javascripts/releases/list/store/index.js       |  14 --
 .../releases/list/store/mutation_types.js          |   3 -
 .../javascripts/releases/list/store/mutations.js   |  39 -----
 .../javascripts/releases/list/store/state.js       |   6 -
 app/assets/javascripts/releases/mount_edit.js      |  17 ++
 app/assets/javascripts/releases/mount_index.js     |  21 +++
 app/assets/javascripts/releases/stores/index.js    |   6 +
 .../releases/stores/modules/detail/actions.js      |  62 ++++++++
 .../releases/stores/modules/detail/index.js        |  10 ++
 .../stores/modules/detail/mutation_types.js        |  12 ++
 .../releases/stores/modules/detail/mutations.js    |  42 +++++
 .../releases/stores/modules/detail/state.js        |  16 ++
 .../releases/stores/modules/list/actions.js        |  40 +++++
 .../releases/stores/modules/list/index.js          |  10 ++
 .../releases/stores/modules/list/mutation_types.js |   3 +
 .../releases/stores/modules/list/mutations.js      |  39 +++++
 .../releases/stores/modules/list/state.js          |   6 +
 .../admin/application_settings_controller.rb       |  10 +-
 app/controllers/admin/projects_controller.rb       |   2 +-
 app/controllers/admin/services_controller.rb       |   2 +-
 app/controllers/projects/issues_controller.rb      |   2 +-
 .../projects/pipeline_schedules_controller.rb      |   2 +-
 .../projects/registry/repositories_controller.rb   |   2 +-
 .../projects/settings/ci_cd_controller.rb          |   2 +
 .../projects/settings/repository_controller.rb     |   2 +-
 .../repositories/git_http_controller.rb            |   2 +-
 app/helpers/analytics_navbar_helper.rb             |   6 +-
 app/services/ci/process_build_service.rb           |   8 +-
 .../layouts/nav/sidebar/_analytics_links.html.haml |   4 +-
 app/views/layouts/nav/sidebar/_group.html.haml     |   2 +-
 app/views/layouts/nav/sidebar/_project.html.haml   |   4 +-
 67 files changed, 1345 insertions(+), 1343 deletions(-)
 create mode 100644 app/assets/javascripts/releases/components/app_edit.vue
 create mode 100644 app/assets/javascripts/releases/components/app_index.vue
 create mode 100644 app/assets/javascripts/releases/components/evidence_block.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_assets.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_author.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_footer.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_header.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_metadata.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_milestone_info.vue
 create mode 100644 app/assets/javascripts/releases/components/release_block_milestones.vue
 create mode 100644 app/assets/javascripts/releases/constants.js
 delete mode 100644 app/assets/javascripts/releases/detail/components/app.vue
 delete mode 100644 app/assets/javascripts/releases/detail/index.js
 delete mode 100644 app/assets/javascripts/releases/detail/store/actions.js
 delete mode 100644 app/assets/javascripts/releases/detail/store/index.js
 delete mode 100644 app/assets/javascripts/releases/detail/store/mutation_types.js
 delete mode 100644 app/assets/javascripts/releases/detail/store/mutations.js
 delete mode 100644 app/assets/javascripts/releases/detail/store/state.js
 delete mode 100644 app/assets/javascripts/releases/list/components/app.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/evidence_block.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_assets.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_author.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_footer.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_header.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_metadata.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_milestone_info.vue
 delete mode 100644 app/assets/javascripts/releases/list/components/release_block_milestones.vue
 delete mode 100644 app/assets/javascripts/releases/list/constants.js
 delete mode 100644 app/assets/javascripts/releases/list/index.js
 delete mode 100644 app/assets/javascripts/releases/list/store/actions.js
 delete mode 100644 app/assets/javascripts/releases/list/store/index.js
 delete mode 100644 app/assets/javascripts/releases/list/store/mutation_types.js
 delete mode 100644 app/assets/javascripts/releases/list/store/mutations.js
 delete mode 100644 app/assets/javascripts/releases/list/store/state.js
 create mode 100644 app/assets/javascripts/releases/mount_edit.js
 create mode 100644 app/assets/javascripts/releases/mount_index.js
 create mode 100644 app/assets/javascripts/releases/stores/index.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/detail/actions.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/detail/index.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/detail/mutation_types.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/detail/mutations.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/detail/state.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/list/actions.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/list/index.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/list/mutation_types.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/list/mutations.js
 create mode 100644 app/assets/javascripts/releases/stores/modules/list/state.js

(limited to 'app')

diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 3a052200ab9..8bb5047ef04 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -6,7 +6,7 @@ import { gqClient, parseEnvironmentsResponse, removeLeadingSlash } from './utils
 import trackDashboardLoad from '../monitoring_tracking_helper';
 import getEnvironments from '../queries/getEnvironments.query.graphql';
 import statusCodes from '../../lib/utils/http_status';
-import { backOff } from '../../lib/utils/common_utils';
+import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
 
 import { PROMETHEUS_TIMEOUT } from '../constants';
@@ -52,6 +52,8 @@ export const requestMetricsDashboard = ({ commit }) => {
 export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
   commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
   commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard);
+  commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(response.metrics_data));
+
   return dispatch('fetchPrometheusMetrics', params);
 };
 export const receiveMetricsDashboardFailure = ({ commit }, error) => {
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 5f559290ff7..8bd53a24b61 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import pick from 'lodash/pick';
 import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
 import { normalizeMetric, normalizeQueryResult } from './utils';
@@ -174,15 +175,19 @@ export default {
       state: emptyStateFromError(error),
     });
   },
-
-  [types.SET_ENDPOINTS](state, endpoints) {
-    state.metricsEndpoint = endpoints.metricsEndpoint;
-    state.deploymentsEndpoint = endpoints.deploymentsEndpoint;
-    state.dashboardEndpoint = endpoints.dashboardEndpoint;
-    state.dashboardsEndpoint = endpoints.dashboardsEndpoint;
-    state.currentDashboard = endpoints.currentDashboard;
-    state.projectPath = endpoints.projectPath;
-    state.logsPath = endpoints.logsPath || state.logsPath;
+  [types.SET_ENDPOINTS](state, endpoints = {}) {
+    const endpointKeys = [
+      'metricsEndpoint',
+      'deploymentsEndpoint',
+      'dashboardEndpoint',
+      'dashboardsEndpoint',
+      'currentDashboard',
+      'projectPath',
+      'logsPath',
+    ];
+    Object.entries(pick(endpoints, endpointKeys)).forEach(([key, value]) => {
+      state[key] = value;
+    });
   },
   [types.SET_TIME_RANGE](state, timeRange) {
     state.timeRange = timeRange;
diff --git a/app/assets/javascripts/pages/projects/releases/edit/index.js b/app/assets/javascripts/pages/projects/releases/edit/index.js
index 98ec196fc37..efa059dcd6d 100644
--- a/app/assets/javascripts/pages/projects/releases/edit/index.js
+++ b/app/assets/javascripts/pages/projects/releases/edit/index.js
@@ -1,5 +1,5 @@
 import ZenMode from '~/zen_mode';
-import initEditRelease from '~/releases/detail';
+import initEditRelease from '~/releases/mount_edit';
 
 document.addEventListener('DOMContentLoaded', () => {
   new ZenMode(); // eslint-disable-line no-new
diff --git a/app/assets/javascripts/pages/projects/releases/index/index.js b/app/assets/javascripts/pages/projects/releases/index/index.js
index 6402023149f..24c9cd528b3 100644
--- a/app/assets/javascripts/pages/projects/releases/index/index.js
+++ b/app/assets/javascripts/pages/projects/releases/index/index.js
@@ -1,3 +1,3 @@
-import initReleases from '~/releases/list';
+import initReleases from '~/releases/mount_index';
 
 document.addEventListener('DOMContentLoaded', initReleases);
diff --git a/app/assets/javascripts/releases/components/app_edit.vue b/app/assets/javascripts/releases/components/app_edit.vue
new file mode 100644
index 00000000000..bdc2b3abb8c
--- /dev/null
+++ b/app/assets/javascripts/releases/components/app_edit.vue
@@ -0,0 +1,172 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import _ from 'underscore';
+import { __, sprintf } from '~/locale';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+
+export default {
+  name: 'ReleaseEditApp',
+  components: {
+    GlFormInput,
+    GlFormGroup,
+    GlButton,
+    MarkdownField,
+  },
+  directives: {
+    autofocusonshow,
+  },
+  computed: {
+    ...mapState('detail', [
+      'isFetchingRelease',
+      'fetchError',
+      'markdownDocsPath',
+      'markdownPreviewPath',
+      'releasesPagePath',
+      'updateReleaseApiDocsPath',
+    ]),
+    showForm() {
+      return !this.isFetchingRelease && !this.fetchError;
+    },
+    subtitleText() {
+      return sprintf(
+        __(
+          'Releases are based on Git tags. We recommend naming tags that fit within semantic versioning, for example %{codeStart}v1.0%{codeEnd}, %{codeStart}v2.0-pre%{codeEnd}.',
+        ),
+        {
+          codeStart: '<code>',
+          codeEnd: '</code>',
+        },
+        false,
+      );
+    },
+    tagName() {
+      return this.$store.state.detail.release.tagName;
+    },
+    tagNameHintText() {
+      return sprintf(
+        __(
+          'Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}',
+        ),
+        {
+          linkStart: `<a href="${_.escape(
+            this.updateReleaseApiDocsPath,
+          )}" target="_blank" rel="noopener noreferrer">`,
+          linkEnd: '</a>',
+        },
+        false,
+      );
+    },
+    releaseTitle: {
+      get() {
+        return this.$store.state.detail.release.name;
+      },
+      set(title) {
+        this.updateReleaseTitle(title);
+      },
+    },
+    releaseNotes: {
+      get() {
+        return this.$store.state.detail.release.description;
+      },
+      set(notes) {
+        this.updateReleaseNotes(notes);
+      },
+    },
+  },
+  created() {
+    this.fetchRelease();
+  },
+  methods: {
+    ...mapActions('detail', [
+      'fetchRelease',
+      'updateRelease',
+      'updateReleaseTitle',
+      'updateReleaseNotes',
+      'navigateToReleasesPage',
+    ]),
+  },
+};
+</script>
+<template>
+  <div class="d-flex flex-column">
+    <p class="pt-3 js-subtitle-text" v-html="subtitleText"></p>
+    <form v-if="showForm" @submit.prevent="updateRelease()">
+      <gl-form-group>
+        <div class="row">
+          <div class="col-md-6 col-lg-5 col-xl-4">
+            <label for="git-ref">{{ __('Tag name') }}</label>
+            <gl-form-input
+              id="git-ref"
+              v-model="tagName"
+              type="text"
+              class="form-control"
+              aria-describedby="tag-name-help"
+              disabled
+            />
+          </div>
+        </div>
+        <div id="tag-name-help" class="form-text text-muted" v-html="tagNameHintText"></div>
+      </gl-form-group>
+      <gl-form-group>
+        <label for="release-title">{{ __('Release title') }}</label>
+        <gl-form-input
+          id="release-title"
+          ref="releaseTitleInput"
+          v-model="releaseTitle"
+          v-autofocusonshow
+          autofocus
+          type="text"
+          class="form-control"
+        />
+      </gl-form-group>
+      <gl-form-group>
+        <label for="release-notes">{{ __('Release notes') }}</label>
+        <div class="bordered-box pr-3 pl-3">
+          <markdown-field
+            :can-attach-file="true"
+            :markdown-preview-path="markdownPreviewPath"
+            :markdown-docs-path="markdownDocsPath"
+            :add-spacing-classes="false"
+            class="prepend-top-10 append-bottom-10"
+          >
+            <textarea
+              id="release-notes"
+              slot="textarea"
+              v-model="releaseNotes"
+              class="note-textarea js-gfm-input js-autosize markdown-area"
+              dir="auto"
+              data-supports-quick-actions="false"
+              :aria-label="__('Release notes')"
+              :placeholder="__('Write your release notes or drag your files here…')"
+              @keydown.meta.enter="updateRelease()"
+              @keydown.ctrl.enter="updateRelease()"
+            >
+            </textarea>
+          </markdown-field>
+        </div>
+      </gl-form-group>
+
+      <div class="d-flex pt-3">
+        <gl-button
+          class="mr-auto js-submit-button"
+          variant="success"
+          type="submit"
+          :aria-label="__('Save changes')"
+        >
+          {{ __('Save changes') }}
+        </gl-button>
+        <gl-button
+          class="js-cancel-button"
+          variant="default"
+          type="button"
+          :aria-label="__('Cancel')"
+          @click="navigateToReleasesPage()"
+        >
+          {{ __('Cancel') }}
+        </gl-button>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue
new file mode 100644
index 00000000000..f602c9fdda2
--- /dev/null
+++ b/app/assets/javascripts/releases/components/app_index.vue
@@ -0,0 +1,98 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoading, GlEmptyState } from '@gitlab/ui';
+import {
+  getParameterByName,
+  historyPushState,
+  buildUrlWithCurrentLocation,
+} from '~/lib/utils/common_utils';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import ReleaseBlock from './release_block.vue';
+
+export default {
+  name: 'ReleasesApp',
+  components: {
+    GlSkeletonLoading,
+    GlEmptyState,
+    ReleaseBlock,
+    TablePagination,
+  },
+  props: {
+    projectId: {
+      type: String,
+      required: true,
+    },
+    documentationLink: {
+      type: String,
+      required: true,
+    },
+    illustrationPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState('list', ['isLoading', 'releases', 'hasError', 'pageInfo']),
+    shouldRenderEmptyState() {
+      return !this.releases.length && !this.hasError && !this.isLoading;
+    },
+    shouldRenderSuccessState() {
+      return this.releases.length && !this.isLoading && !this.hasError;
+    },
+  },
+  created() {
+    this.fetchReleases({
+      page: getParameterByName('page'),
+      projectId: this.projectId,
+    });
+  },
+  methods: {
+    ...mapActions('list', ['fetchReleases']),
+    onChangePage(page) {
+      historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
+      this.fetchReleases({ page, projectId: this.projectId });
+    },
+  },
+};
+</script>
+<template>
+  <div class="prepend-top-default">
+    <gl-skeleton-loading v-if="isLoading" class="js-loading" />
+
+    <gl-empty-state
+      v-else-if="shouldRenderEmptyState"
+      class="js-empty-state"
+      :title="__('Getting started with releases')"
+      :svg-path="illustrationPath"
+      :description="
+        __(
+          'Releases are based on Git tags and mark specific points in a project\'s development history. They can contain information about the type of changes and can also deliver binaries, like compiled versions of your software.',
+        )
+      "
+      :primary-button-link="documentationLink"
+      :primary-button-text="__('Open Documentation')"
+    />
+
+    <div v-else-if="shouldRenderSuccessState" class="js-success-state">
+      <release-block
+        v-for="(release, index) in releases"
+        :key="release.tag_name"
+        :release="release"
+        :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
+      />
+    </div>
+
+    <table-pagination v-if="!isLoading" :change="onChangePage" :page-info="pageInfo" />
+  </div>
+</template>
+<style>
+.linked-card::after {
+  width: 1px;
+  content: ' ';
+  border: 1px solid #e5e5e5;
+  height: 17px;
+  top: 100%;
+  position: absolute;
+  left: 32px;
+}
+</style>
diff --git a/app/assets/javascripts/releases/components/evidence_block.vue b/app/assets/javascripts/releases/components/evidence_block.vue
new file mode 100644
index 00000000000..d9abd195fee
--- /dev/null
+++ b/app/assets/javascripts/releases/components/evidence_block.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+import { truncateSha } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
+
+export default {
+  name: 'EvidenceBlock',
+  components: {
+    ClipboardButton,
+    ExpandButton,
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    release: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    evidenceTitle() {
+      return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tag_name });
+    },
+    evidenceUrl() {
+      return this.release.assets && this.release.assets.evidence_file_path;
+    },
+    shortSha() {
+      return truncateSha(this.sha);
+    },
+    sha() {
+      return this.release.evidence_sha;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="card-text prepend-top-default">
+      <b>
+        {{ __('Evidence collection') }}
+      </b>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <gl-link
+        v-gl-tooltip
+        class="monospace"
+        :title="__('Download evidence JSON')"
+        :download="evidenceTitle"
+        :href="evidenceUrl"
+      >
+        <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span>
+      </gl-link>
+
+      <expand-button>
+        <template slot="short">
+          <span class="js-short monospace">{{ shortSha }}</span>
+        </template>
+        <template slot="expanded">
+          <span class="js-expanded monospace gl-pl-1">{{ sha }}</span>
+        </template>
+      </expand-button>
+      <clipboard-button
+        :title="__('Copy commit SHA')"
+        :text="sha"
+        css-class="btn-default btn-transparent btn-clipboard"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
new file mode 100644
index 00000000000..e6bb5325120
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -0,0 +1,120 @@
+<script>
+import _ from 'underscore';
+import $ from 'jquery';
+import { slugify } from '~/lib/utils/text_utility';
+import { getLocationHash } from '~/lib/utils/url_utility';
+import { scrollToElement } from '~/lib/utils/common_utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import '~/behaviors/markdown/render_gfm';
+import EvidenceBlock from './evidence_block.vue';
+import ReleaseBlockAssets from './release_block_assets.vue';
+import ReleaseBlockFooter from './release_block_footer.vue';
+import ReleaseBlockHeader from './release_block_header.vue';
+import ReleaseBlockMetadata from './release_block_metadata.vue';
+import ReleaseBlockMilestoneInfo from './release_block_milestone_info.vue';
+
+export default {
+  name: 'ReleaseBlock',
+  components: {
+    EvidenceBlock,
+    ReleaseBlockAssets,
+    ReleaseBlockFooter,
+    ReleaseBlockHeader,
+    ReleaseBlockMetadata,
+    ReleaseBlockMilestoneInfo,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  props: {
+    release: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isHighlighted: false,
+    };
+  },
+  computed: {
+    id() {
+      return slugify(this.release.tag_name);
+    },
+    assets() {
+      return this.release.assets || {};
+    },
+    hasEvidence() {
+      return Boolean(this.release.evidence_sha);
+    },
+    milestones() {
+      return this.release.milestones || [];
+    },
+    shouldShowEvidence() {
+      return this.glFeatures.releaseEvidenceCollection;
+    },
+    shouldShowFooter() {
+      return this.glFeatures.releaseIssueSummary;
+    },
+    shouldRenderAssets() {
+      return Boolean(
+        this.assets.links.length || (this.assets.sources && this.assets.sources.length),
+      );
+    },
+    shouldRenderReleaseMetaData() {
+      return !this.glFeatures.releaseIssueSummary;
+    },
+    shouldRenderMilestoneInfo() {
+      return Boolean(this.glFeatures.releaseIssueSummary && !_.isEmpty(this.release.milestones));
+    },
+  },
+
+  mounted() {
+    this.renderGFM();
+
+    const hash = getLocationHash();
+    if (hash && slugify(hash) === this.id) {
+      this.isHighlighted = true;
+      setTimeout(() => {
+        this.isHighlighted = false;
+      }, 2000);
+
+      scrollToElement(this.$el);
+    }
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs['gfm-content']).renderGFM();
+    },
+  },
+};
+</script>
+<template>
+  <div :id="id" :class="{ 'bg-line-target-blue': isHighlighted }" class="card release-block">
+    <release-block-header :release="release" />
+    <div class="card-body">
+      <div v-if="shouldRenderMilestoneInfo">
+        <release-block-milestone-info :milestones="milestones" />
+        <hr class="mb-3 mt-0" />
+      </div>
+
+      <release-block-metadata v-if="shouldRenderReleaseMetaData" :release="release" />
+      <release-block-assets v-if="shouldRenderAssets" :assets="assets" />
+      <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
+
+      <div ref="gfm-content" class="card-text prepend-top-default">
+        <div v-html="release.description_html"></div>
+      </div>
+    </div>
+
+    <release-block-footer
+      v-if="shouldShowFooter"
+      class="card-footer"
+      :commit="release.commit"
+      :commit-path="release.commit_path"
+      :tag-name="release.tag_name"
+      :tag-path="release.tag_path"
+      :author="release.author"
+      :released-at="release.released_at"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue
new file mode 100644
index 00000000000..06b7f97a8de
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_assets.vue
@@ -0,0 +1,65 @@
+<script>
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'ReleaseBlockAssets',
+  components: {
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    assets: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    hasAssets() {
+      return Boolean(this.assets.count);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card-text prepend-top-default">
+    <b>
+      {{ __('Assets') }}
+      <span class="js-assets-count badge badge-pill">{{ assets.count }}</span>
+    </b>
+
+    <ul v-if="assets.links.length" class="pl-0 mb-0 prepend-top-8 list-unstyled js-assets-list">
+      <li v-for="link in assets.links" :key="link.name" class="append-bottom-8">
+        <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.url">
+          <icon name="package" class="align-middle append-right-4 align-text-bottom" />
+          {{ link.name }}
+          <span v-if="link.external">{{ __('(external source)') }}</span>
+        </gl-link>
+      </li>
+    </ul>
+
+    <div v-if="hasAssets" class="dropdown">
+      <button
+        type="button"
+        class="btn btn-link"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        <icon name="doc-code" class="align-top append-right-4" />
+        {{ __('Source code') }}
+        <icon name="chevron-down" />
+      </button>
+
+      <div class="js-sources-dropdown dropdown-menu">
+        <li v-for="asset in assets.sources" :key="asset.url">
+          <gl-link :href="asset.url">{{ __('Download') }} {{ asset.format }}</gl-link>
+        </li>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_author.vue b/app/assets/javascripts/releases/components/release_block_author.vue
new file mode 100644
index 00000000000..e7075d4d67a
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_author.vue
@@ -0,0 +1,42 @@
+<script>
+import { __, sprintf } from '~/locale';
+import { GlSprintf } from '@gitlab/ui';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+export default {
+  name: 'ReleaseBlockAuthor',
+  components: {
+    GlSprintf,
+    UserAvatarLink,
+  },
+  props: {
+    author: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    userImageAltDescription() {
+      return this.author && this.author.username
+        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
+        : null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex">
+    <gl-sprintf :message="__('by %{user}')">
+      <template #user>
+        <user-avatar-link
+          class="prepend-left-4"
+          :link-href="author.web_url"
+          :img-src="author.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="author.username"
+        />
+      </template>
+    </gl-sprintf>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_footer.vue b/app/assets/javascripts/releases/components/release_block_footer.vue
new file mode 100644
index 00000000000..8533fc17ffd
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_footer.vue
@@ -0,0 +1,112 @@
+<script>
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { __, sprintf } from '~/locale';
+
+export default {
+  name: 'ReleaseBlockFooter',
+  components: {
+    Icon,
+    GlLink,
+    UserAvatarLink,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    commit: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    commitPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tagName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tagPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    author: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    releasedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    releasedAtTimeAgo() {
+      return this.timeFormatted(this.releasedAt);
+    },
+    userImageAltDescription() {
+      return this.author && this.author.username
+        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
+        : null;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div v-if="commit" class="float-left mr-3 d-flex align-items-center js-commit-info">
+      <icon ref="commitIcon" name="commit" class="mr-1" />
+      <div v-gl-tooltip.bottom :title="commit.title">
+        <gl-link v-if="commitPath" :href="commitPath">
+          {{ commit.short_id }}
+        </gl-link>
+        <span v-else>{{ commit.short_id }}</span>
+      </div>
+    </div>
+
+    <div v-if="tagName" class="float-left mr-3 d-flex align-items-center js-tag-info">
+      <icon name="tag" class="mr-1" />
+      <div v-gl-tooltip.bottom :title="__('Tag')">
+        <gl-link v-if="tagPath" :href="tagPath">
+          {{ tagName }}
+        </gl-link>
+        <span v-else>{{ tagName }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="releasedAt || author"
+      class="float-left d-flex align-items-center js-author-date-info"
+    >
+      <span class="text-secondary">{{ __('Created') }}&nbsp;</span>
+      <template v-if="releasedAt">
+        <span
+          v-gl-tooltip.bottom
+          :title="tooltipTitle(releasedAt)"
+          class="text-secondary flex-shrink-0"
+        >
+          {{ releasedAtTimeAgo }}&nbsp;
+        </span>
+      </template>
+
+      <div v-if="author" class="d-flex">
+        <span class="text-secondary">{{ __('by') }}&nbsp;</span>
+        <user-avatar-link
+          :link-href="author.web_url"
+          :img-src="author.avatar_url"
+          :img-alt="userImageAltDescription"
+          :tooltip-text="author.username"
+          tooltip-placement="bottom"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_header.vue b/app/assets/javascripts/releases/components/release_block_header.vue
new file mode 100644
index 00000000000..b459418aef2
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_header.vue
@@ -0,0 +1,53 @@
+<script>
+import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'ReleaseBlockHeader',
+  components: {
+    GlLink,
+    GlBadge,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    release: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    editLink() {
+      return this.release._links?.edit_url;
+    },
+    selfLink() {
+      return this.release._links?.self;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card-header d-flex align-items-center bg-white pr-0">
+    <h2 class="card-title my-2 mr-auto gl-font-size-20">
+      <gl-link v-if="selfLink" :href="selfLink" class="font-size-inherit">
+        {{ release.name }}
+      </gl-link>
+      <template v-else>{{ release.name }}</template>
+      <gl-badge v-if="release.upcoming_release" variant="warning" class="align-middle">{{
+        __('Upcoming Release')
+      }}</gl-badge>
+    </h2>
+    <gl-link
+      v-if="editLink"
+      v-gl-tooltip
+      class="btn btn-default append-right-10 js-edit-button ml-2"
+      :title="__('Edit this release')"
+      :href="editLink"
+    >
+      <icon name="pencil" />
+    </gl-link>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_metadata.vue b/app/assets/javascripts/releases/components/release_block_metadata.vue
new file mode 100644
index 00000000000..f0aad594062
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_metadata.vue
@@ -0,0 +1,84 @@
+<script>
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import ReleaseBlockAuthor from './release_block_author.vue';
+import ReleaseBlockMilestones from './release_block_milestones.vue';
+
+export default {
+  name: 'ReleaseBlockMetadata',
+  components: {
+    Icon,
+    GlLink,
+    ReleaseBlockAuthor,
+    ReleaseBlockMilestones,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    release: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    author() {
+      return this.release.author;
+    },
+    commit() {
+      return this.release.commit || {};
+    },
+    commitUrl() {
+      return this.release.commit_path;
+    },
+    hasAuthor() {
+      return Boolean(this.author);
+    },
+    releasedTimeAgo() {
+      return sprintf(__('released %{time}'), {
+        time: this.timeFormatted(this.release.released_at),
+      });
+    },
+    shouldRenderMilestones() {
+      return Boolean(this.release.milestones?.length);
+    },
+    tagUrl() {
+      return this.release.tag_path;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="card-subtitle d-flex flex-wrap text-secondary">
+    <div class="append-right-8">
+      <icon name="commit" class="align-middle" />
+      <gl-link v-if="commitUrl" v-gl-tooltip.bottom :title="commit.title" :href="commitUrl">
+        {{ commit.short_id }}
+      </gl-link>
+      <span v-else v-gl-tooltip.bottom :title="commit.title">{{ commit.short_id }}</span>
+    </div>
+
+    <div class="append-right-8">
+      <icon name="tag" class="align-middle" />
+      <gl-link v-if="tagUrl" v-gl-tooltip.bottom :title="__('Tag')" :href="tagUrl">
+        {{ release.tag_name }}
+      </gl-link>
+      <span v-else v-gl-tooltip.bottom :title="__('Tag')">{{ release.tag_name }}</span>
+    </div>
+
+    <release-block-milestones v-if="shouldRenderMilestones" :milestones="release.milestones" />
+
+    <div class="append-right-4">
+      &bull;
+      <span v-gl-tooltip.bottom :title="tooltipTitle(release.released_at)">
+        {{ releasedTimeAgo }}
+      </span>
+    </div>
+
+    <release-block-author v-if="hasAuthor" :author="author" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
new file mode 100644
index 00000000000..d3e354d6157
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -0,0 +1,136 @@
+<script>
+import { GlProgressBar, GlLink, GlBadge, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __, n__, sprintf } from '~/locale';
+import { MAX_MILESTONES_TO_DISPLAY } from '../constants';
+
+/** Sums the values of an array. For use with Array.reduce. */
+const sumReducer = (acc, curr) => acc + curr;
+
+export default {
+  name: 'ReleaseBlockMilestoneInfo',
+  components: {
+    GlProgressBar,
+    GlLink,
+    GlBadge,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    milestones: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAllMilestones: false,
+    };
+  },
+  computed: {
+    percentCompleteText() {
+      return sprintf(__('%{percent}%{percentSymbol} complete'), {
+        percent: this.percentComplete,
+        percentSymbol: '%',
+      });
+    },
+    percentComplete() {
+      const percent = Math.round((this.closedIssuesCount / this.totalIssuesCount) * 100);
+      return Number.isNaN(percent) ? 0 : percent;
+    },
+    allIssueStats() {
+      return this.milestones.map(m => m.issue_stats || {});
+    },
+    openIssuesCount() {
+      return this.allIssueStats.map(stats => stats.opened || 0).reduce(sumReducer);
+    },
+    closedIssuesCount() {
+      return this.allIssueStats.map(stats => stats.closed || 0).reduce(sumReducer);
+    },
+    totalIssuesCount() {
+      return this.openIssuesCount + this.closedIssuesCount;
+    },
+    milestoneLabelText() {
+      return n__('Milestone', 'Milestones', this.milestones.length);
+    },
+    issueCountsText() {
+      return sprintf(__('Open: %{open} • Closed: %{closed}'), {
+        open: this.openIssuesCount,
+        closed: this.closedIssuesCount,
+      });
+    },
+    milestonesToDisplay() {
+      return this.showAllMilestones
+        ? this.milestones
+        : this.milestones.slice(0, MAX_MILESTONES_TO_DISPLAY);
+    },
+    showMoreLink() {
+      return this.milestones.length > MAX_MILESTONES_TO_DISPLAY;
+    },
+    moreText() {
+      return this.showAllMilestones
+        ? __('show fewer')
+        : sprintf(__('show %{count} more'), {
+            count: this.milestones.length - MAX_MILESTONES_TO_DISPLAY,
+          });
+    },
+  },
+  methods: {
+    toggleShowAll() {
+      this.showAllMilestones = !this.showAllMilestones;
+    },
+    shouldRenderBullet(milestoneIndex) {
+      return Boolean(milestoneIndex !== this.milestonesToDisplay.length - 1 || this.showMoreLink);
+    },
+    shouldRenderShowMoreLink(milestoneIndex) {
+      return Boolean(milestoneIndex === this.milestonesToDisplay.length - 1 && this.showMoreLink);
+    },
+  },
+};
+</script>
+<template>
+  <div class="release-block-milestone-info d-flex align-items-start flex-wrap">
+    <div
+      v-gl-tooltip
+      class="milestone-progress-bar-container js-milestone-progress-bar-container d-flex flex-column align-items-start flex-shrink-1 mr-4 mb-3"
+      :title="__('Closed issues')"
+    >
+      <span class="mb-2">{{ percentCompleteText }}</span>
+      <span class="w-100">
+        <gl-progress-bar :value="closedIssuesCount" :max="totalIssuesCount" variant="success" />
+      </span>
+    </div>
+    <div class="d-flex flex-column align-items-start mr-4 mb-3 js-milestone-list-container">
+      <span class="mb-1">{{ milestoneLabelText }}</span>
+      <div class="d-flex flex-wrap align-items-end">
+        <template v-for="(milestone, index) in milestonesToDisplay">
+          <gl-link
+            :key="milestone.id"
+            v-gl-tooltip
+            :title="milestone.description"
+            :href="milestone.web_url"
+            class="append-right-4"
+          >
+            {{ milestone.title }}
+          </gl-link>
+          <template v-if="shouldRenderBullet(index)">
+            <span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
+          </template>
+          <template v-if="shouldRenderShowMoreLink(index)">
+            <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">
+              {{ moreText }}
+            </gl-button>
+          </template>
+        </template>
+      </div>
+    </div>
+    <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
+      <span class="mb-1">
+        {{ __('Issues') }}
+        <gl-badge pill variant="light" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
+      </span>
+      {{ issueCountsText }}
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_milestones.vue b/app/assets/javascripts/releases/components/release_block_milestones.vue
new file mode 100644
index 00000000000..a3dff75b828
--- /dev/null
+++ b/app/assets/javascripts/releases/components/release_block_milestones.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { n__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  name: 'ReleaseBlockMilestones',
+  components: {
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    milestones: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    labelText() {
+      return n__('Milestone', 'Milestones', this.milestones.length);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="js-milestone-list-label">
+      <icon name="flag" class="align-middle" />
+      <span class="js-label-text">{{ labelText }}</span>
+    </div>
+
+    <template v-for="(milestone, index) in milestones">
+      <gl-link
+        :key="milestone.id"
+        v-gl-tooltip
+        :title="milestone.description"
+        :href="milestone.web_url"
+        class="mx-1 js-milestone-link"
+      >
+        {{ milestone.title }}
+      </gl-link>
+      <template v-if="index !== milestones.length - 1">
+        &bull;
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/constants.js b/app/assets/javascripts/releases/constants.js
new file mode 100644
index 00000000000..defcd917465
--- /dev/null
+++ b/app/assets/javascripts/releases/constants.js
@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+// This eslint-disable ^^^ can be removed when at least
+// one more constant is added to this file. Currently
+// constants.js files with only a single constant
+// are flagged by this rule.
+
+export const MAX_MILESTONES_TO_DISPLAY = 5;
diff --git a/app/assets/javascripts/releases/detail/components/app.vue b/app/assets/javascripts/releases/detail/components/app.vue
deleted file mode 100644
index 073cfcd7694..00000000000
--- a/app/assets/javascripts/releases/detail/components/app.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script>
-import { mapState, mapActions } from 'vuex';
-import { GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
-import _ from 'underscore';
-import { __, sprintf } from '~/locale';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
-import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
-
-export default {
-  name: 'ReleaseDetailApp',
-  components: {
-    GlFormInput,
-    GlFormGroup,
-    GlButton,
-    MarkdownField,
-  },
-  directives: {
-    autofocusonshow,
-  },
-  computed: {
-    ...mapState([
-      'isFetchingRelease',
-      'fetchError',
-      'markdownDocsPath',
-      'markdownPreviewPath',
-      'releasesPagePath',
-      'updateReleaseApiDocsPath',
-    ]),
-    showForm() {
-      return !this.isFetchingRelease && !this.fetchError;
-    },
-    subtitleText() {
-      return sprintf(
-        __(
-          'Releases are based on Git tags. We recommend naming tags that fit within semantic versioning, for example %{codeStart}v1.0%{codeEnd}, %{codeStart}v2.0-pre%{codeEnd}.',
-        ),
-        {
-          codeStart: '<code>',
-          codeEnd: '</code>',
-        },
-        false,
-      );
-    },
-    tagName() {
-      return this.$store.state.release.tagName;
-    },
-    tagNameHintText() {
-      return sprintf(
-        __(
-          'Changing a Release tag is only supported via Releases API. %{linkStart}More information%{linkEnd}',
-        ),
-        {
-          linkStart: `<a href="${_.escape(
-            this.updateReleaseApiDocsPath,
-          )}" target="_blank" rel="noopener noreferrer">`,
-          linkEnd: '</a>',
-        },
-        false,
-      );
-    },
-    releaseTitle: {
-      get() {
-        return this.$store.state.release.name;
-      },
-      set(title) {
-        this.updateReleaseTitle(title);
-      },
-    },
-    releaseNotes: {
-      get() {
-        return this.$store.state.release.description;
-      },
-      set(notes) {
-        this.updateReleaseNotes(notes);
-      },
-    },
-  },
-  created() {
-    this.fetchRelease();
-  },
-  methods: {
-    ...mapActions([
-      'fetchRelease',
-      'updateRelease',
-      'updateReleaseTitle',
-      'updateReleaseNotes',
-      'navigateToReleasesPage',
-    ]),
-  },
-};
-</script>
-<template>
-  <div class="d-flex flex-column">
-    <p class="pt-3 js-subtitle-text" v-html="subtitleText"></p>
-    <form v-if="showForm" @submit.prevent="updateRelease()">
-      <gl-form-group>
-        <div class="row">
-          <div class="col-md-6 col-lg-5 col-xl-4">
-            <label for="git-ref">{{ __('Tag name') }}</label>
-            <gl-form-input
-              id="git-ref"
-              v-model="tagName"
-              type="text"
-              class="form-control"
-              aria-describedby="tag-name-help"
-              disabled
-            />
-          </div>
-        </div>
-        <div id="tag-name-help" class="form-text text-muted" v-html="tagNameHintText"></div>
-      </gl-form-group>
-      <gl-form-group>
-        <label for="release-title">{{ __('Release title') }}</label>
-        <gl-form-input
-          id="release-title"
-          ref="releaseTitleInput"
-          v-model="releaseTitle"
-          v-autofocusonshow
-          autofocus
-          type="text"
-          class="form-control"
-        />
-      </gl-form-group>
-      <gl-form-group>
-        <label for="release-notes">{{ __('Release notes') }}</label>
-        <div class="bordered-box pr-3 pl-3">
-          <markdown-field
-            :can-attach-file="true"
-            :markdown-preview-path="markdownPreviewPath"
-            :markdown-docs-path="markdownDocsPath"
-            :add-spacing-classes="false"
-            class="prepend-top-10 append-bottom-10"
-          >
-            <textarea
-              id="release-notes"
-              slot="textarea"
-              v-model="releaseNotes"
-              class="note-textarea js-gfm-input js-autosize markdown-area"
-              dir="auto"
-              data-supports-quick-actions="false"
-              :aria-label="__('Release notes')"
-              :placeholder="__('Write your release notes or drag your files here…')"
-              @keydown.meta.enter="updateRelease()"
-              @keydown.ctrl.enter="updateRelease()"
-            >
-            </textarea>
-          </markdown-field>
-        </div>
-      </gl-form-group>
-
-      <div class="d-flex pt-3">
-        <gl-button
-          class="mr-auto js-submit-button"
-          variant="success"
-          type="submit"
-          :aria-label="__('Save changes')"
-        >
-          {{ __('Save changes') }}
-        </gl-button>
-        <gl-button
-          class="js-cancel-button"
-          variant="default"
-          type="button"
-          :aria-label="__('Cancel')"
-          @click="navigateToReleasesPage()"
-        >
-          {{ __('Cancel') }}
-        </gl-button>
-      </div>
-    </form>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/detail/index.js b/app/assets/javascripts/releases/detail/index.js
deleted file mode 100644
index 0dab90a1ede..00000000000
--- a/app/assets/javascripts/releases/detail/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Vue from 'vue';
-import ReleaseDetailApp from './components/app.vue';
-import createStore from './store';
-
-export default () => {
-  const el = document.getElementById('js-edit-release-page');
-
-  const store = createStore();
-  store.dispatch('setInitialState', el.dataset);
-
-  return new Vue({
-    el,
-    store,
-    components: { ReleaseDetailApp },
-    render(createElement) {
-      return createElement('release-detail-app');
-    },
-  });
-};
diff --git a/app/assets/javascripts/releases/detail/store/actions.js b/app/assets/javascripts/releases/detail/store/actions.js
deleted file mode 100644
index c9749582f5c..00000000000
--- a/app/assets/javascripts/releases/detail/store/actions.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as types from './mutation_types';
-import api from '~/api';
-import createFlash from '~/flash';
-import { s__ } from '~/locale';
-import { redirectTo } from '~/lib/utils/url_utility';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-
-export const setInitialState = ({ commit }, initialState) =>
-  commit(types.SET_INITIAL_STATE, initialState);
-
-export const requestRelease = ({ commit }) => commit(types.REQUEST_RELEASE);
-export const receiveReleaseSuccess = ({ commit }, data) =>
-  commit(types.RECEIVE_RELEASE_SUCCESS, data);
-export const receiveReleaseError = ({ commit }, error) => {
-  commit(types.RECEIVE_RELEASE_ERROR, error);
-  createFlash(s__('Release|Something went wrong while getting the release details'));
-};
-
-export const fetchRelease = ({ dispatch, state }) => {
-  dispatch('requestRelease');
-
-  return api
-    .release(state.projectId, state.tagName)
-    .then(({ data: release }) => {
-      const camelCasedRelease = convertObjectPropsToCamelCase(release, { deep: true });
-      dispatch('receiveReleaseSuccess', camelCasedRelease);
-    })
-    .catch(error => {
-      dispatch('receiveReleaseError', error);
-    });
-};
-
-export const updateReleaseTitle = ({ commit }, title) => commit(types.UPDATE_RELEASE_TITLE, title);
-export const updateReleaseNotes = ({ commit }, notes) => commit(types.UPDATE_RELEASE_NOTES, notes);
-
-export const requestUpdateRelease = ({ commit }) => commit(types.REQUEST_UPDATE_RELEASE);
-export const receiveUpdateReleaseSuccess = ({ commit, dispatch }) => {
-  commit(types.RECEIVE_UPDATE_RELEASE_SUCCESS);
-  dispatch('navigateToReleasesPage');
-};
-export const receiveUpdateReleaseError = ({ commit }, error) => {
-  commit(types.RECEIVE_UPDATE_RELEASE_ERROR, error);
-  createFlash(s__('Release|Something went wrong while saving the release details'));
-};
-
-export const updateRelease = ({ dispatch, state }) => {
-  dispatch('requestUpdateRelease');
-
-  return api
-    .updateRelease(state.projectId, state.tagName, {
-      name: state.release.name,
-      description: state.release.description,
-    })
-    .then(() => dispatch('receiveUpdateReleaseSuccess'))
-    .catch(error => {
-      dispatch('receiveUpdateReleaseError', error);
-    });
-};
-
-export const navigateToReleasesPage = ({ state }) => {
-  redirectTo(state.releasesPagePath);
-};
diff --git a/app/assets/javascripts/releases/detail/store/index.js b/app/assets/javascripts/releases/detail/store/index.js
deleted file mode 100644
index e8623a49356..00000000000
--- a/app/assets/javascripts/releases/detail/store/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import * as actions from './actions';
-import mutations from './mutations';
-import state from './state';
-
-Vue.use(Vuex);
-
-export default () =>
-  new Vuex.Store({
-    actions,
-    mutations,
-    state,
-  });
diff --git a/app/assets/javascripts/releases/detail/store/mutation_types.js b/app/assets/javascripts/releases/detail/store/mutation_types.js
deleted file mode 100644
index 75e1d78a645..00000000000
--- a/app/assets/javascripts/releases/detail/store/mutation_types.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
-
-export const REQUEST_RELEASE = 'REQUEST_RELEASE';
-export const RECEIVE_RELEASE_SUCCESS = 'RECEIVE_RELEASE_SUCCESS';
-export const RECEIVE_RELEASE_ERROR = 'RECEIVE_RELEASE_ERROR';
-
-export const UPDATE_RELEASE_TITLE = 'UPDATE_RELEASE_TITLE';
-export const UPDATE_RELEASE_NOTES = 'UPDATE_RELEASE_NOTES';
-
-export const REQUEST_UPDATE_RELEASE = 'REQUEST_UPDATE_RELEASE';
-export const RECEIVE_UPDATE_RELEASE_SUCCESS = 'RECEIVE_UPDATE_RELEASE_SUCCESS';
-export const RECEIVE_UPDATE_RELEASE_ERROR = 'RECEIVE_UPDATE_RELEASE_ERROR';
diff --git a/app/assets/javascripts/releases/detail/store/mutations.js b/app/assets/javascripts/releases/detail/store/mutations.js
deleted file mode 100644
index d739978d755..00000000000
--- a/app/assets/javascripts/releases/detail/store/mutations.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as types from './mutation_types';
-
-export default {
-  [types.SET_INITIAL_STATE](state, initialState) {
-    Object.keys(state).forEach(key => {
-      state[key] = initialState[key];
-    });
-  },
-
-  [types.REQUEST_RELEASE](state) {
-    state.isFetchingRelease = true;
-  },
-  [types.RECEIVE_RELEASE_SUCCESS](state, data) {
-    state.fetchError = undefined;
-    state.isFetchingRelease = false;
-    state.release = data;
-  },
-  [types.RECEIVE_RELEASE_ERROR](state, error) {
-    state.fetchError = error;
-    state.isFetchingRelease = false;
-    state.release = undefined;
-  },
-
-  [types.UPDATE_RELEASE_TITLE](state, title) {
-    state.release.name = title;
-  },
-  [types.UPDATE_RELEASE_NOTES](state, notes) {
-    state.release.description = notes;
-  },
-
-  [types.REQUEST_UPDATE_RELEASE](state) {
-    state.isUpdatingRelease = true;
-  },
-  [types.RECEIVE_UPDATE_RELEASE_SUCCESS](state) {
-    state.updateError = undefined;
-    state.isUpdatingRelease = false;
-  },
-  [types.RECEIVE_UPDATE_RELEASE_ERROR](state, error) {
-    state.updateError = error;
-    state.isUpdatingRelease = false;
-  },
-};
diff --git a/app/assets/javascripts/releases/detail/store/state.js b/app/assets/javascripts/releases/detail/store/state.js
deleted file mode 100644
index 7e3d975f1ae..00000000000
--- a/app/assets/javascripts/releases/detail/store/state.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default () => ({
-  projectId: null,
-  tagName: null,
-  releasesPagePath: null,
-  markdownDocsPath: null,
-  markdownPreviewPath: null,
-  updateReleaseApiDocsPath: null,
-
-  release: null,
-
-  isFetchingRelease: false,
-  fetchError: null,
-
-  isUpdatingRelease: false,
-  updateError: null,
-});
diff --git a/app/assets/javascripts/releases/list/components/app.vue b/app/assets/javascripts/releases/list/components/app.vue
deleted file mode 100644
index eb63e709ebd..00000000000
--- a/app/assets/javascripts/releases/list/components/app.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script>
-import { mapState, mapActions } from 'vuex';
-import { GlSkeletonLoading, GlEmptyState } from '@gitlab/ui';
-import {
-  getParameterByName,
-  historyPushState,
-  buildUrlWithCurrentLocation,
-} from '~/lib/utils/common_utils';
-import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
-import ReleaseBlock from './release_block.vue';
-
-export default {
-  name: 'ReleasesApp',
-  components: {
-    GlSkeletonLoading,
-    GlEmptyState,
-    ReleaseBlock,
-    TablePagination,
-  },
-  props: {
-    projectId: {
-      type: String,
-      required: true,
-    },
-    documentationLink: {
-      type: String,
-      required: true,
-    },
-    illustrationPath: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['isLoading', 'releases', 'hasError', 'pageInfo']),
-    shouldRenderEmptyState() {
-      return !this.releases.length && !this.hasError && !this.isLoading;
-    },
-    shouldRenderSuccessState() {
-      return this.releases.length && !this.isLoading && !this.hasError;
-    },
-  },
-  created() {
-    this.fetchReleases({
-      page: getParameterByName('page'),
-      projectId: this.projectId,
-    });
-  },
-  methods: {
-    ...mapActions(['fetchReleases']),
-    onChangePage(page) {
-      historyPushState(buildUrlWithCurrentLocation(`?page=${page}`));
-      this.fetchReleases({ page, projectId: this.projectId });
-    },
-  },
-};
-</script>
-<template>
-  <div class="prepend-top-default">
-    <gl-skeleton-loading v-if="isLoading" class="js-loading" />
-
-    <gl-empty-state
-      v-else-if="shouldRenderEmptyState"
-      class="js-empty-state"
-      :title="__('Getting started with releases')"
-      :svg-path="illustrationPath"
-      :description="
-        __(
-          'Releases are based on Git tags and mark specific points in a project\'s development history. They can contain information about the type of changes and can also deliver binaries, like compiled versions of your software.',
-        )
-      "
-      :primary-button-link="documentationLink"
-      :primary-button-text="__('Open Documentation')"
-    />
-
-    <div v-else-if="shouldRenderSuccessState" class="js-success-state">
-      <release-block
-        v-for="(release, index) in releases"
-        :key="release.tag_name"
-        :release="release"
-        :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
-      />
-    </div>
-
-    <table-pagination v-if="!isLoading" :change="onChangePage" :page-info="pageInfo" />
-  </div>
-</template>
-<style>
-.linked-card::after {
-  width: 1px;
-  content: ' ';
-  border: 1px solid #e5e5e5;
-  height: 17px;
-  top: 100%;
-  position: absolute;
-  left: 32px;
-}
-</style>
diff --git a/app/assets/javascripts/releases/list/components/evidence_block.vue b/app/assets/javascripts/releases/list/components/evidence_block.vue
deleted file mode 100644
index d9abd195fee..00000000000
--- a/app/assets/javascripts/releases/list/components/evidence_block.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import { GlLink, GlTooltipDirective } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
-import { truncateSha } from '~/lib/utils/text_utility';
-import Icon from '~/vue_shared/components/icon.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import ExpandButton from '~/vue_shared/components/expand_button.vue';
-
-export default {
-  name: 'EvidenceBlock',
-  components: {
-    ClipboardButton,
-    ExpandButton,
-    GlLink,
-    Icon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    release: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    evidenceTitle() {
-      return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tag_name });
-    },
-    evidenceUrl() {
-      return this.release.assets && this.release.assets.evidence_file_path;
-    },
-    shortSha() {
-      return truncateSha(this.sha);
-    },
-    sha() {
-      return this.release.evidence_sha;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="card-text prepend-top-default">
-      <b>
-        {{ __('Evidence collection') }}
-      </b>
-    </div>
-    <div class="d-flex align-items-baseline">
-      <gl-link
-        v-gl-tooltip
-        class="monospace"
-        :title="__('Download evidence JSON')"
-        :download="evidenceTitle"
-        :href="evidenceUrl"
-      >
-        <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span>
-      </gl-link>
-
-      <expand-button>
-        <template slot="short">
-          <span class="js-short monospace">{{ shortSha }}</span>
-        </template>
-        <template slot="expanded">
-          <span class="js-expanded monospace gl-pl-1">{{ sha }}</span>
-        </template>
-      </expand-button>
-      <clipboard-button
-        :title="__('Copy commit SHA')"
-        :text="sha"
-        css-class="btn-default btn-transparent btn-clipboard"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block.vue b/app/assets/javascripts/releases/list/components/release_block.vue
deleted file mode 100644
index e6bb5325120..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script>
-import _ from 'underscore';
-import $ from 'jquery';
-import { slugify } from '~/lib/utils/text_utility';
-import { getLocationHash } from '~/lib/utils/url_utility';
-import { scrollToElement } from '~/lib/utils/common_utils';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import '~/behaviors/markdown/render_gfm';
-import EvidenceBlock from './evidence_block.vue';
-import ReleaseBlockAssets from './release_block_assets.vue';
-import ReleaseBlockFooter from './release_block_footer.vue';
-import ReleaseBlockHeader from './release_block_header.vue';
-import ReleaseBlockMetadata from './release_block_metadata.vue';
-import ReleaseBlockMilestoneInfo from './release_block_milestone_info.vue';
-
-export default {
-  name: 'ReleaseBlock',
-  components: {
-    EvidenceBlock,
-    ReleaseBlockAssets,
-    ReleaseBlockFooter,
-    ReleaseBlockHeader,
-    ReleaseBlockMetadata,
-    ReleaseBlockMilestoneInfo,
-  },
-  mixins: [glFeatureFlagsMixin()],
-  props: {
-    release: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      isHighlighted: false,
-    };
-  },
-  computed: {
-    id() {
-      return slugify(this.release.tag_name);
-    },
-    assets() {
-      return this.release.assets || {};
-    },
-    hasEvidence() {
-      return Boolean(this.release.evidence_sha);
-    },
-    milestones() {
-      return this.release.milestones || [];
-    },
-    shouldShowEvidence() {
-      return this.glFeatures.releaseEvidenceCollection;
-    },
-    shouldShowFooter() {
-      return this.glFeatures.releaseIssueSummary;
-    },
-    shouldRenderAssets() {
-      return Boolean(
-        this.assets.links.length || (this.assets.sources && this.assets.sources.length),
-      );
-    },
-    shouldRenderReleaseMetaData() {
-      return !this.glFeatures.releaseIssueSummary;
-    },
-    shouldRenderMilestoneInfo() {
-      return Boolean(this.glFeatures.releaseIssueSummary && !_.isEmpty(this.release.milestones));
-    },
-  },
-
-  mounted() {
-    this.renderGFM();
-
-    const hash = getLocationHash();
-    if (hash && slugify(hash) === this.id) {
-      this.isHighlighted = true;
-      setTimeout(() => {
-        this.isHighlighted = false;
-      }, 2000);
-
-      scrollToElement(this.$el);
-    }
-  },
-  methods: {
-    renderGFM() {
-      $(this.$refs['gfm-content']).renderGFM();
-    },
-  },
-};
-</script>
-<template>
-  <div :id="id" :class="{ 'bg-line-target-blue': isHighlighted }" class="card release-block">
-    <release-block-header :release="release" />
-    <div class="card-body">
-      <div v-if="shouldRenderMilestoneInfo">
-        <release-block-milestone-info :milestones="milestones" />
-        <hr class="mb-3 mt-0" />
-      </div>
-
-      <release-block-metadata v-if="shouldRenderReleaseMetaData" :release="release" />
-      <release-block-assets v-if="shouldRenderAssets" :assets="assets" />
-      <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
-
-      <div ref="gfm-content" class="card-text prepend-top-default">
-        <div v-html="release.description_html"></div>
-      </div>
-    </div>
-
-    <release-block-footer
-      v-if="shouldShowFooter"
-      class="card-footer"
-      :commit="release.commit"
-      :commit-path="release.commit_path"
-      :tag-name="release.tag_name"
-      :tag-path="release.tag_path"
-      :author="release.author"
-      :released-at="release.released_at"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_assets.vue b/app/assets/javascripts/releases/list/components/release_block_assets.vue
deleted file mode 100644
index 06b7f97a8de..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_assets.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  name: 'ReleaseBlockAssets',
-  components: {
-    GlLink,
-    Icon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    assets: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    hasAssets() {
-      return Boolean(this.assets.count);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="card-text prepend-top-default">
-    <b>
-      {{ __('Assets') }}
-      <span class="js-assets-count badge badge-pill">{{ assets.count }}</span>
-    </b>
-
-    <ul v-if="assets.links.length" class="pl-0 mb-0 prepend-top-8 list-unstyled js-assets-list">
-      <li v-for="link in assets.links" :key="link.name" class="append-bottom-8">
-        <gl-link v-gl-tooltip.bottom :title="__('Download asset')" :href="link.url">
-          <icon name="package" class="align-middle append-right-4 align-text-bottom" />
-          {{ link.name }}
-          <span v-if="link.external">{{ __('(external source)') }}</span>
-        </gl-link>
-      </li>
-    </ul>
-
-    <div v-if="hasAssets" class="dropdown">
-      <button
-        type="button"
-        class="btn btn-link"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        <icon name="doc-code" class="align-top append-right-4" />
-        {{ __('Source code') }}
-        <icon name="chevron-down" />
-      </button>
-
-      <div class="js-sources-dropdown dropdown-menu">
-        <li v-for="asset in assets.sources" :key="asset.url">
-          <gl-link :href="asset.url">{{ __('Download') }} {{ asset.format }}</gl-link>
-        </li>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_author.vue b/app/assets/javascripts/releases/list/components/release_block_author.vue
deleted file mode 100644
index e7075d4d67a..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_author.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-import { __, sprintf } from '~/locale';
-import { GlSprintf } from '@gitlab/ui';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-
-export default {
-  name: 'ReleaseBlockAuthor',
-  components: {
-    GlSprintf,
-    UserAvatarLink,
-  },
-  props: {
-    author: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    userImageAltDescription() {
-      return this.author && this.author.username
-        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
-        : null;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="d-flex">
-    <gl-sprintf :message="__('by %{user}')">
-      <template #user>
-        <user-avatar-link
-          class="prepend-left-4"
-          :link-href="author.web_url"
-          :img-src="author.avatar_url"
-          :img-alt="userImageAltDescription"
-          :tooltip-text="author.username"
-        />
-      </template>
-    </gl-sprintf>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_footer.vue b/app/assets/javascripts/releases/list/components/release_block_footer.vue
deleted file mode 100644
index 8533fc17ffd..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_footer.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { __, sprintf } from '~/locale';
-
-export default {
-  name: 'ReleaseBlockFooter',
-  components: {
-    Icon,
-    GlLink,
-    UserAvatarLink,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  mixins: [timeagoMixin],
-  props: {
-    commit: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    commitPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    tagName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    tagPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    author: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    releasedAt: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    releasedAtTimeAgo() {
-      return this.timeFormatted(this.releasedAt);
-    },
-    userImageAltDescription() {
-      return this.author && this.author.username
-        ? sprintf(__("%{username}'s avatar"), { username: this.author.username })
-        : null;
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div v-if="commit" class="float-left mr-3 d-flex align-items-center js-commit-info">
-      <icon ref="commitIcon" name="commit" class="mr-1" />
-      <div v-gl-tooltip.bottom :title="commit.title">
-        <gl-link v-if="commitPath" :href="commitPath">
-          {{ commit.short_id }}
-        </gl-link>
-        <span v-else>{{ commit.short_id }}</span>
-      </div>
-    </div>
-
-    <div v-if="tagName" class="float-left mr-3 d-flex align-items-center js-tag-info">
-      <icon name="tag" class="mr-1" />
-      <div v-gl-tooltip.bottom :title="__('Tag')">
-        <gl-link v-if="tagPath" :href="tagPath">
-          {{ tagName }}
-        </gl-link>
-        <span v-else>{{ tagName }}</span>
-      </div>
-    </div>
-
-    <div
-      v-if="releasedAt || author"
-      class="float-left d-flex align-items-center js-author-date-info"
-    >
-      <span class="text-secondary">{{ __('Created') }}&nbsp;</span>
-      <template v-if="releasedAt">
-        <span
-          v-gl-tooltip.bottom
-          :title="tooltipTitle(releasedAt)"
-          class="text-secondary flex-shrink-0"
-        >
-          {{ releasedAtTimeAgo }}&nbsp;
-        </span>
-      </template>
-
-      <div v-if="author" class="d-flex">
-        <span class="text-secondary">{{ __('by') }}&nbsp;</span>
-        <user-avatar-link
-          :link-href="author.web_url"
-          :img-src="author.avatar_url"
-          :img-alt="userImageAltDescription"
-          :tooltip-text="author.username"
-          tooltip-placement="bottom"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_header.vue b/app/assets/javascripts/releases/list/components/release_block_header.vue
deleted file mode 100644
index b459418aef2..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_header.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  name: 'ReleaseBlockHeader',
-  components: {
-    GlLink,
-    GlBadge,
-    Icon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    release: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    editLink() {
-      return this.release._links?.edit_url;
-    },
-    selfLink() {
-      return this.release._links?.self;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="card-header d-flex align-items-center bg-white pr-0">
-    <h2 class="card-title my-2 mr-auto gl-font-size-20">
-      <gl-link v-if="selfLink" :href="selfLink" class="font-size-inherit">
-        {{ release.name }}
-      </gl-link>
-      <template v-else>{{ release.name }}</template>
-      <gl-badge v-if="release.upcoming_release" variant="warning" class="align-middle">{{
-        __('Upcoming Release')
-      }}</gl-badge>
-    </h2>
-    <gl-link
-      v-if="editLink"
-      v-gl-tooltip
-      class="btn btn-default append-right-10 js-edit-button ml-2"
-      :title="__('Edit this release')"
-      :href="editLink"
-    >
-      <icon name="pencil" />
-    </gl-link>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_metadata.vue b/app/assets/javascripts/releases/list/components/release_block_metadata.vue
deleted file mode 100644
index f0aad594062..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_metadata.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-import timeagoMixin from '~/vue_shared/mixins/timeago';
-import ReleaseBlockAuthor from './release_block_author.vue';
-import ReleaseBlockMilestones from './release_block_milestones.vue';
-
-export default {
-  name: 'ReleaseBlockMetadata',
-  components: {
-    Icon,
-    GlLink,
-    ReleaseBlockAuthor,
-    ReleaseBlockMilestones,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  mixins: [timeagoMixin],
-  props: {
-    release: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    author() {
-      return this.release.author;
-    },
-    commit() {
-      return this.release.commit || {};
-    },
-    commitUrl() {
-      return this.release.commit_path;
-    },
-    hasAuthor() {
-      return Boolean(this.author);
-    },
-    releasedTimeAgo() {
-      return sprintf(__('released %{time}'), {
-        time: this.timeFormatted(this.release.released_at),
-      });
-    },
-    shouldRenderMilestones() {
-      return Boolean(this.release.milestones?.length);
-    },
-    tagUrl() {
-      return this.release.tag_path;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="card-subtitle d-flex flex-wrap text-secondary">
-    <div class="append-right-8">
-      <icon name="commit" class="align-middle" />
-      <gl-link v-if="commitUrl" v-gl-tooltip.bottom :title="commit.title" :href="commitUrl">
-        {{ commit.short_id }}
-      </gl-link>
-      <span v-else v-gl-tooltip.bottom :title="commit.title">{{ commit.short_id }}</span>
-    </div>
-
-    <div class="append-right-8">
-      <icon name="tag" class="align-middle" />
-      <gl-link v-if="tagUrl" v-gl-tooltip.bottom :title="__('Tag')" :href="tagUrl">
-        {{ release.tag_name }}
-      </gl-link>
-      <span v-else v-gl-tooltip.bottom :title="__('Tag')">{{ release.tag_name }}</span>
-    </div>
-
-    <release-block-milestones v-if="shouldRenderMilestones" :milestones="release.milestones" />
-
-    <div class="append-right-4">
-      &bull;
-      <span v-gl-tooltip.bottom :title="tooltipTitle(release.released_at)">
-        {{ releasedTimeAgo }}
-      </span>
-    </div>
-
-    <release-block-author v-if="hasAuthor" :author="author" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/list/components/release_block_milestone_info.vue
deleted file mode 100644
index d3e354d6157..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_milestone_info.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script>
-import { GlProgressBar, GlLink, GlBadge, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { __, n__, sprintf } from '~/locale';
-import { MAX_MILESTONES_TO_DISPLAY } from '../constants';
-
-/** Sums the values of an array. For use with Array.reduce. */
-const sumReducer = (acc, curr) => acc + curr;
-
-export default {
-  name: 'ReleaseBlockMilestoneInfo',
-  components: {
-    GlProgressBar,
-    GlLink,
-    GlBadge,
-    GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    milestones: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      showAllMilestones: false,
-    };
-  },
-  computed: {
-    percentCompleteText() {
-      return sprintf(__('%{percent}%{percentSymbol} complete'), {
-        percent: this.percentComplete,
-        percentSymbol: '%',
-      });
-    },
-    percentComplete() {
-      const percent = Math.round((this.closedIssuesCount / this.totalIssuesCount) * 100);
-      return Number.isNaN(percent) ? 0 : percent;
-    },
-    allIssueStats() {
-      return this.milestones.map(m => m.issue_stats || {});
-    },
-    openIssuesCount() {
-      return this.allIssueStats.map(stats => stats.opened || 0).reduce(sumReducer);
-    },
-    closedIssuesCount() {
-      return this.allIssueStats.map(stats => stats.closed || 0).reduce(sumReducer);
-    },
-    totalIssuesCount() {
-      return this.openIssuesCount + this.closedIssuesCount;
-    },
-    milestoneLabelText() {
-      return n__('Milestone', 'Milestones', this.milestones.length);
-    },
-    issueCountsText() {
-      return sprintf(__('Open: %{open} • Closed: %{closed}'), {
-        open: this.openIssuesCount,
-        closed: this.closedIssuesCount,
-      });
-    },
-    milestonesToDisplay() {
-      return this.showAllMilestones
-        ? this.milestones
-        : this.milestones.slice(0, MAX_MILESTONES_TO_DISPLAY);
-    },
-    showMoreLink() {
-      return this.milestones.length > MAX_MILESTONES_TO_DISPLAY;
-    },
-    moreText() {
-      return this.showAllMilestones
-        ? __('show fewer')
-        : sprintf(__('show %{count} more'), {
-            count: this.milestones.length - MAX_MILESTONES_TO_DISPLAY,
-          });
-    },
-  },
-  methods: {
-    toggleShowAll() {
-      this.showAllMilestones = !this.showAllMilestones;
-    },
-    shouldRenderBullet(milestoneIndex) {
-      return Boolean(milestoneIndex !== this.milestonesToDisplay.length - 1 || this.showMoreLink);
-    },
-    shouldRenderShowMoreLink(milestoneIndex) {
-      return Boolean(milestoneIndex === this.milestonesToDisplay.length - 1 && this.showMoreLink);
-    },
-  },
-};
-</script>
-<template>
-  <div class="release-block-milestone-info d-flex align-items-start flex-wrap">
-    <div
-      v-gl-tooltip
-      class="milestone-progress-bar-container js-milestone-progress-bar-container d-flex flex-column align-items-start flex-shrink-1 mr-4 mb-3"
-      :title="__('Closed issues')"
-    >
-      <span class="mb-2">{{ percentCompleteText }}</span>
-      <span class="w-100">
-        <gl-progress-bar :value="closedIssuesCount" :max="totalIssuesCount" variant="success" />
-      </span>
-    </div>
-    <div class="d-flex flex-column align-items-start mr-4 mb-3 js-milestone-list-container">
-      <span class="mb-1">{{ milestoneLabelText }}</span>
-      <div class="d-flex flex-wrap align-items-end">
-        <template v-for="(milestone, index) in milestonesToDisplay">
-          <gl-link
-            :key="milestone.id"
-            v-gl-tooltip
-            :title="milestone.description"
-            :href="milestone.web_url"
-            class="append-right-4"
-          >
-            {{ milestone.title }}
-          </gl-link>
-          <template v-if="shouldRenderBullet(index)">
-            <span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
-          </template>
-          <template v-if="shouldRenderShowMoreLink(index)">
-            <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">
-              {{ moreText }}
-            </gl-button>
-          </template>
-        </template>
-      </div>
-    </div>
-    <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
-      <span class="mb-1">
-        {{ __('Issues') }}
-        <gl-badge pill variant="light" class="font-weight-bold">{{ totalIssuesCount }}</gl-badge>
-      </span>
-      {{ issueCountsText }}
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/components/release_block_milestones.vue b/app/assets/javascripts/releases/list/components/release_block_milestones.vue
deleted file mode 100644
index a3dff75b828..00000000000
--- a/app/assets/javascripts/releases/list/components/release_block_milestones.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
-import { n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
-
-export default {
-  name: 'ReleaseBlockMilestones',
-  components: {
-    GlLink,
-    Icon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    milestones: {
-      type: Array,
-      required: true,
-    },
-  },
-  computed: {
-    labelText() {
-      return n__('Milestone', 'Milestones', this.milestones.length);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="js-milestone-list-label">
-      <icon name="flag" class="align-middle" />
-      <span class="js-label-text">{{ labelText }}</span>
-    </div>
-
-    <template v-for="(milestone, index) in milestones">
-      <gl-link
-        :key="milestone.id"
-        v-gl-tooltip
-        :title="milestone.description"
-        :href="milestone.web_url"
-        class="mx-1 js-milestone-link"
-      >
-        {{ milestone.title }}
-      </gl-link>
-      <template v-if="index !== milestones.length - 1">
-        &bull;
-      </template>
-    </template>
-  </div>
-</template>
diff --git a/app/assets/javascripts/releases/list/constants.js b/app/assets/javascripts/releases/list/constants.js
deleted file mode 100644
index defcd917465..00000000000
--- a/app/assets/javascripts/releases/list/constants.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-// This eslint-disable ^^^ can be removed when at least
-// one more constant is added to this file. Currently
-// constants.js files with only a single constant
-// are flagged by this rule.
-
-export const MAX_MILESTONES_TO_DISPLAY = 5;
diff --git a/app/assets/javascripts/releases/list/index.js b/app/assets/javascripts/releases/list/index.js
deleted file mode 100644
index adbed3cb8e2..00000000000
--- a/app/assets/javascripts/releases/list/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import Vue from 'vue';
-import App from './components/app.vue';
-import createStore from './store';
-
-export default () => {
-  const element = document.getElementById('js-releases-page');
-
-  return new Vue({
-    el: element,
-    store: createStore(),
-    components: {
-      App,
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          projectId: element.dataset.projectId,
-          documentationLink: element.dataset.documentationPath,
-          illustrationPath: element.dataset.illustrationPath,
-        },
-      });
-    },
-  });
-};
diff --git a/app/assets/javascripts/releases/list/store/actions.js b/app/assets/javascripts/releases/list/store/actions.js
deleted file mode 100644
index b15fb69226f..00000000000
--- a/app/assets/javascripts/releases/list/store/actions.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as types from './mutation_types';
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import api from '~/api';
-import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
-
-/**
- * Commits a mutation to update the state while the main endpoint is being requested.
- */
-export const requestReleases = ({ commit }) => commit(types.REQUEST_RELEASES);
-
-/**
- * Fetches the main endpoint.
- * Will dispatch requestNamespace action before starting the request.
- * Will dispatch receiveNamespaceSuccess if the request is successful
- * Will dispatch receiveNamesapceError if the request returns an error
- *
- * @param {String} projectId
- */
-export const fetchReleases = ({ dispatch }, { page = '1', projectId }) => {
-  dispatch('requestReleases');
-
-  api
-    .releases(projectId, { page })
-    .then(response => dispatch('receiveReleasesSuccess', response))
-    .catch(() => dispatch('receiveReleasesError'));
-};
-
-export const receiveReleasesSuccess = ({ commit }, { data, headers }) => {
-  const pageInfo = parseIntPagination(normalizeHeaders(headers));
-  commit(types.RECEIVE_RELEASES_SUCCESS, { data, pageInfo });
-};
-
-export const receiveReleasesError = ({ commit }) => {
-  commit(types.RECEIVE_RELEASES_ERROR);
-  createFlash(__('An error occurred while fetching the releases. Please try again.'));
-};
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/releases/list/store/index.js b/app/assets/javascripts/releases/list/store/index.js
deleted file mode 100644
index 968b94f0e0d..00000000000
--- a/app/assets/javascripts/releases/list/store/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import state from './state';
-import * as actions from './actions';
-import mutations from './mutations';
-
-Vue.use(Vuex);
-
-export default () =>
-  new Vuex.Store({
-    actions,
-    mutations,
-    state: state(),
-  });
diff --git a/app/assets/javascripts/releases/list/store/mutation_types.js b/app/assets/javascripts/releases/list/store/mutation_types.js
deleted file mode 100644
index a74bf15c515..00000000000
--- a/app/assets/javascripts/releases/list/store/mutation_types.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const REQUEST_RELEASES = 'REQUEST_RELEASES';
-export const RECEIVE_RELEASES_SUCCESS = 'RECEIVE_RELEASES_SUCCESS';
-export const RECEIVE_RELEASES_ERROR = 'RECEIVE_RELEASES_ERROR';
diff --git a/app/assets/javascripts/releases/list/store/mutations.js b/app/assets/javascripts/releases/list/store/mutations.js
deleted file mode 100644
index 99fc096264a..00000000000
--- a/app/assets/javascripts/releases/list/store/mutations.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as types from './mutation_types';
-
-export default {
-  /**
-   * Sets isLoading to true while the request is being made.
-   * @param {Object} state
-   */
-  [types.REQUEST_RELEASES](state) {
-    state.isLoading = true;
-  },
-
-  /**
-   * Sets isLoading to false.
-   * Sets hasError to false.
-   * Sets the received data
-   * Sets the received pagination information
-   * @param {Object} state
-   * @param {Object} resp
-   */
-  [types.RECEIVE_RELEASES_SUCCESS](state, { data, pageInfo }) {
-    state.hasError = false;
-    state.isLoading = false;
-    state.releases = data;
-    state.pageInfo = pageInfo;
-  },
-
-  /**
-   * Sets isLoading to false.
-   * Sets hasError to true.
-   * Resets the data
-   * @param {Object} state
-   * @param {Object} data
-   */
-  [types.RECEIVE_RELEASES_ERROR](state) {
-    state.isLoading = false;
-    state.releases = [];
-    state.hasError = true;
-  },
-};
diff --git a/app/assets/javascripts/releases/list/store/state.js b/app/assets/javascripts/releases/list/store/state.js
deleted file mode 100644
index c251f56c9c5..00000000000
--- a/app/assets/javascripts/releases/list/store/state.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default () => ({
-  isLoading: false,
-  hasError: false,
-  releases: [],
-  pageInfo: {},
-});
diff --git a/app/assets/javascripts/releases/mount_edit.js b/app/assets/javascripts/releases/mount_edit.js
new file mode 100644
index 00000000000..343de8c56d3
--- /dev/null
+++ b/app/assets/javascripts/releases/mount_edit.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import ReleaseEditApp from './components/app_edit.vue';
+import createStore from './stores';
+import detailModule from './stores/modules/detail';
+
+export default () => {
+  const el = document.getElementById('js-edit-release-page');
+
+  const store = createStore({ detail: detailModule });
+  store.dispatch('setInitialState', el.dataset);
+
+  return new Vue({
+    el,
+    store,
+    render: h => h(ReleaseEditApp),
+  });
+};
diff --git a/app/assets/javascripts/releases/mount_index.js b/app/assets/javascripts/releases/mount_index.js
new file mode 100644
index 00000000000..6fcb6d802e4
--- /dev/null
+++ b/app/assets/javascripts/releases/mount_index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import ReleaseListApp from './components/app_index.vue';
+import createStore from './stores';
+import listModule from './stores/modules/list';
+
+export default () => {
+  const el = document.getElementById('js-releases-page');
+
+  return new Vue({
+    el,
+    store: createStore({ list: listModule }),
+    render: h =>
+      h(ReleaseListApp, {
+        props: {
+          projectId: el.dataset.projectId,
+          documentationLink: el.dataset.documentationPath,
+          illustrationPath: el.dataset.illustrationPath,
+        },
+      }),
+  });
+};
diff --git a/app/assets/javascripts/releases/stores/index.js b/app/assets/javascripts/releases/stores/index.js
new file mode 100644
index 00000000000..aa607906a0e
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/index.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default modules => new Vuex.Store({ modules });
diff --git a/app/assets/javascripts/releases/stores/modules/detail/actions.js b/app/assets/javascripts/releases/stores/modules/detail/actions.js
new file mode 100644
index 00000000000..c9749582f5c
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/detail/actions.js
@@ -0,0 +1,62 @@
+import * as types from './mutation_types';
+import api from '~/api';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+export const setInitialState = ({ commit }, initialState) =>
+  commit(types.SET_INITIAL_STATE, initialState);
+
+export const requestRelease = ({ commit }) => commit(types.REQUEST_RELEASE);
+export const receiveReleaseSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_RELEASE_SUCCESS, data);
+export const receiveReleaseError = ({ commit }, error) => {
+  commit(types.RECEIVE_RELEASE_ERROR, error);
+  createFlash(s__('Release|Something went wrong while getting the release details'));
+};
+
+export const fetchRelease = ({ dispatch, state }) => {
+  dispatch('requestRelease');
+
+  return api
+    .release(state.projectId, state.tagName)
+    .then(({ data: release }) => {
+      const camelCasedRelease = convertObjectPropsToCamelCase(release, { deep: true });
+      dispatch('receiveReleaseSuccess', camelCasedRelease);
+    })
+    .catch(error => {
+      dispatch('receiveReleaseError', error);
+    });
+};
+
+export const updateReleaseTitle = ({ commit }, title) => commit(types.UPDATE_RELEASE_TITLE, title);
+export const updateReleaseNotes = ({ commit }, notes) => commit(types.UPDATE_RELEASE_NOTES, notes);
+
+export const requestUpdateRelease = ({ commit }) => commit(types.REQUEST_UPDATE_RELEASE);
+export const receiveUpdateReleaseSuccess = ({ commit, dispatch }) => {
+  commit(types.RECEIVE_UPDATE_RELEASE_SUCCESS);
+  dispatch('navigateToReleasesPage');
+};
+export const receiveUpdateReleaseError = ({ commit }, error) => {
+  commit(types.RECEIVE_UPDATE_RELEASE_ERROR, error);
+  createFlash(s__('Release|Something went wrong while saving the release details'));
+};
+
+export const updateRelease = ({ dispatch, state }) => {
+  dispatch('requestUpdateRelease');
+
+  return api
+    .updateRelease(state.projectId, state.tagName, {
+      name: state.release.name,
+      description: state.release.description,
+    })
+    .then(() => dispatch('receiveUpdateReleaseSuccess'))
+    .catch(error => {
+      dispatch('receiveUpdateReleaseError', error);
+    });
+};
+
+export const navigateToReleasesPage = ({ state }) => {
+  redirectTo(state.releasesPagePath);
+};
diff --git a/app/assets/javascripts/releases/stores/modules/detail/index.js b/app/assets/javascripts/releases/stores/modules/detail/index.js
new file mode 100644
index 00000000000..243c2389d8c
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/detail/index.js
@@ -0,0 +1,10 @@
+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+export default {
+  namespaced: true,
+  actions,
+  mutations,
+  state,
+};
diff --git a/app/assets/javascripts/releases/stores/modules/detail/mutation_types.js b/app/assets/javascripts/releases/stores/modules/detail/mutation_types.js
new file mode 100644
index 00000000000..75e1d78a645
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/detail/mutation_types.js
@@ -0,0 +1,12 @@
+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
+
+export const REQUEST_RELEASE = 'REQUEST_RELEASE';
+export const RECEIVE_RELEASE_SUCCESS = 'RECEIVE_RELEASE_SUCCESS';
+export const RECEIVE_RELEASE_ERROR = 'RECEIVE_RELEASE_ERROR';
+
+export const UPDATE_RELEASE_TITLE = 'UPDATE_RELEASE_TITLE';
+export const UPDATE_RELEASE_NOTES = 'UPDATE_RELEASE_NOTES';
+
+export const REQUEST_UPDATE_RELEASE = 'REQUEST_UPDATE_RELEASE';
+export const RECEIVE_UPDATE_RELEASE_SUCCESS = 'RECEIVE_UPDATE_RELEASE_SUCCESS';
+export const RECEIVE_UPDATE_RELEASE_ERROR = 'RECEIVE_UPDATE_RELEASE_ERROR';
diff --git a/app/assets/javascripts/releases/stores/modules/detail/mutations.js b/app/assets/javascripts/releases/stores/modules/detail/mutations.js
new file mode 100644
index 00000000000..d739978d755
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/detail/mutations.js
@@ -0,0 +1,42 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_INITIAL_STATE](state, initialState) {
+    Object.keys(state).forEach(key => {
+      state[key] = initialState[key];
+    });
+  },
+
+  [types.REQUEST_RELEASE](state) {
+    state.isFetchingRelease = true;
+  },
+  [types.RECEIVE_RELEASE_SUCCESS](state, data) {
+    state.fetchError = undefined;
+    state.isFetchingRelease = false;
+    state.release = data;
+  },
+  [types.RECEIVE_RELEASE_ERROR](state, error) {
+    state.fetchError = error;
+    state.isFetchingRelease = false;
+    state.release = undefined;
+  },
+
+  [types.UPDATE_RELEASE_TITLE](state, title) {
+    state.release.name = title;
+  },
+  [types.UPDATE_RELEASE_NOTES](state, notes) {
+    state.release.description = notes;
+  },
+
+  [types.REQUEST_UPDATE_RELEASE](state) {
+    state.isUpdatingRelease = true;
+  },
+  [types.RECEIVE_UPDATE_RELEASE_SUCCESS](state) {
+    state.updateError = undefined;
+    state.isUpdatingRelease = false;
+  },
+  [types.RECEIVE_UPDATE_RELEASE_ERROR](state, error) {
+    state.updateError = error;
+    state.isUpdatingRelease = false;
+  },
+};
diff --git a/app/assets/javascripts/releases/stores/modules/detail/state.js b/app/assets/javascripts/releases/stores/modules/detail/state.js
new file mode 100644
index 00000000000..7e3d975f1ae
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/detail/state.js
@@ -0,0 +1,16 @@
+export default () => ({
+  projectId: null,
+  tagName: null,
+  releasesPagePath: null,
+  markdownDocsPath: null,
+  markdownPreviewPath: null,
+  updateReleaseApiDocsPath: null,
+
+  release: null,
+
+  isFetchingRelease: false,
+  fetchError: null,
+
+  isUpdatingRelease: false,
+  updateError: null,
+});
diff --git a/app/assets/javascripts/releases/stores/modules/list/actions.js b/app/assets/javascripts/releases/stores/modules/list/actions.js
new file mode 100644
index 00000000000..b15fb69226f
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/list/actions.js
@@ -0,0 +1,40 @@
+import * as types from './mutation_types';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import api from '~/api';
+import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
+
+/**
+ * Commits a mutation to update the state while the main endpoint is being requested.
+ */
+export const requestReleases = ({ commit }) => commit(types.REQUEST_RELEASES);
+
+/**
+ * Fetches the main endpoint.
+ * Will dispatch requestNamespace action before starting the request.
+ * Will dispatch receiveNamespaceSuccess if the request is successful
+ * Will dispatch receiveNamesapceError if the request returns an error
+ *
+ * @param {String} projectId
+ */
+export const fetchReleases = ({ dispatch }, { page = '1', projectId }) => {
+  dispatch('requestReleases');
+
+  api
+    .releases(projectId, { page })
+    .then(response => dispatch('receiveReleasesSuccess', response))
+    .catch(() => dispatch('receiveReleasesError'));
+};
+
+export const receiveReleasesSuccess = ({ commit }, { data, headers }) => {
+  const pageInfo = parseIntPagination(normalizeHeaders(headers));
+  commit(types.RECEIVE_RELEASES_SUCCESS, { data, pageInfo });
+};
+
+export const receiveReleasesError = ({ commit }) => {
+  commit(types.RECEIVE_RELEASES_ERROR);
+  createFlash(__('An error occurred while fetching the releases. Please try again.'));
+};
+
+// prevent babel-plugin-rewire from generating an invalid default during karma tests
+export default () => {};
diff --git a/app/assets/javascripts/releases/stores/modules/list/index.js b/app/assets/javascripts/releases/stores/modules/list/index.js
new file mode 100644
index 00000000000..e4633b15a0c
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/list/index.js
@@ -0,0 +1,10 @@
+import state from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+export default {
+  namespaced: true,
+  actions,
+  mutations,
+  state,
+};
diff --git a/app/assets/javascripts/releases/stores/modules/list/mutation_types.js b/app/assets/javascripts/releases/stores/modules/list/mutation_types.js
new file mode 100644
index 00000000000..a74bf15c515
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/list/mutation_types.js
@@ -0,0 +1,3 @@
+export const REQUEST_RELEASES = 'REQUEST_RELEASES';
+export const RECEIVE_RELEASES_SUCCESS = 'RECEIVE_RELEASES_SUCCESS';
+export const RECEIVE_RELEASES_ERROR = 'RECEIVE_RELEASES_ERROR';
diff --git a/app/assets/javascripts/releases/stores/modules/list/mutations.js b/app/assets/javascripts/releases/stores/modules/list/mutations.js
new file mode 100644
index 00000000000..99fc096264a
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/list/mutations.js
@@ -0,0 +1,39 @@
+import * as types from './mutation_types';
+
+export default {
+  /**
+   * Sets isLoading to true while the request is being made.
+   * @param {Object} state
+   */
+  [types.REQUEST_RELEASES](state) {
+    state.isLoading = true;
+  },
+
+  /**
+   * Sets isLoading to false.
+   * Sets hasError to false.
+   * Sets the received data
+   * Sets the received pagination information
+   * @param {Object} state
+   * @param {Object} resp
+   */
+  [types.RECEIVE_RELEASES_SUCCESS](state, { data, pageInfo }) {
+    state.hasError = false;
+    state.isLoading = false;
+    state.releases = data;
+    state.pageInfo = pageInfo;
+  },
+
+  /**
+   * Sets isLoading to false.
+   * Sets hasError to true.
+   * Resets the data
+   * @param {Object} state
+   * @param {Object} data
+   */
+  [types.RECEIVE_RELEASES_ERROR](state) {
+    state.isLoading = false;
+    state.releases = [];
+    state.hasError = true;
+  },
+};
diff --git a/app/assets/javascripts/releases/stores/modules/list/state.js b/app/assets/javascripts/releases/stores/modules/list/state.js
new file mode 100644
index 00000000000..c251f56c9c5
--- /dev/null
+++ b/app/assets/javascripts/releases/stores/modules/list/state.js
@@ -0,0 +1,6 @@
+export default () => ({
+  isLoading: false,
+  hasError: false,
+  releases: [],
+  pageInfo: {},
+});
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 8a583e16c0b..54c9bde067d 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -56,7 +56,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
   end
 
   def clear_repository_check_states
-    RepositoryCheck::ClearWorker.perform_async
+    RepositoryCheck::ClearWorker.perform_async # rubocop:disable CodeReuse/Worker
 
     redirect_to(
       general_admin_application_settings_path,
@@ -73,7 +73,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   # Specs are in spec/requests/self_monitoring_project_spec.rb
   def create_self_monitoring_project
-    job_id = SelfMonitoringProjectCreateWorker.perform_async
+    job_id = SelfMonitoringProjectCreateWorker.perform_async # rubocop:disable CodeReuse/Worker
 
     render status: :accepted, json: {
       job_id: job_id,
@@ -92,7 +92,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
-    if SelfMonitoringProjectCreateWorker.in_progress?(job_id)
+    if SelfMonitoringProjectCreateWorker.in_progress?(job_id) # rubocop:disable CodeReuse/Worker
       ::Gitlab::PollingInterval.set_header(response, interval: 3_000)
 
       return render status: :accepted, json: {
@@ -112,7 +112,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   # Specs are in spec/requests/self_monitoring_project_spec.rb
   def delete_self_monitoring_project
-    job_id = SelfMonitoringProjectDeleteWorker.perform_async
+    job_id = SelfMonitoringProjectDeleteWorker.perform_async # rubocop:disable CodeReuse/Worker
 
     render status: :accepted, json: {
       job_id: job_id,
@@ -131,7 +131,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
       }
     end
 
-    if SelfMonitoringProjectDeleteWorker.in_progress?(job_id)
+    if SelfMonitoringProjectDeleteWorker.in_progress?(job_id) # rubocop:disable CodeReuse/Worker
       ::Gitlab::PollingInterval.set_header(response, interval: 3_000)
 
       return render status: :accepted, json: {
diff --git a/app/controllers/admin/projects_controller.rb b/app/controllers/admin/projects_controller.rb
index cdedc34e634..7015da8bd50 100644
--- a/app/controllers/admin/projects_controller.rb
+++ b/app/controllers/admin/projects_controller.rb
@@ -55,7 +55,7 @@ class Admin::ProjectsController < Admin::ApplicationController
   # rubocop: enable CodeReuse/ActiveRecord
 
   def repository_check
-    RepositoryCheck::SingleRepositoryWorker.perform_async(@project.id)
+    RepositoryCheck::SingleRepositoryWorker.perform_async(@project.id) # rubocop:disable CodeReuse/Worker
 
     redirect_to(
       admin_project_path(@project),
diff --git a/app/controllers/admin/services_controller.rb b/app/controllers/admin/services_controller.rb
index e31e0e09978..50b79cde5c5 100644
--- a/app/controllers/admin/services_controller.rb
+++ b/app/controllers/admin/services_controller.rb
@@ -19,7 +19,7 @@ class Admin::ServicesController < Admin::ApplicationController
 
   def update
     if service.update(service_params[:service])
-      PropagateServiceTemplateWorker.perform_async(service.id) if service.active?
+      PropagateServiceTemplateWorker.perform_async(service.id) if service.active? # rubocop:disable CodeReuse/Worker
 
       redirect_to admin_application_settings_services_path,
         notice: 'Application settings saved successfully'
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 0944d7b47bf..35f803302eb 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -188,7 +188,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
   def import_csv
     if uploader = UploadService.new(project, params[:file]).execute
-      ImportIssuesCsvWorker.perform_async(current_user.id, project.id, uploader.upload.id)
+      ImportIssuesCsvWorker.perform_async(current_user.id, project.id, uploader.upload.id) # rubocop:disable CodeReuse/Worker
 
       flash[:notice] = _("Your issues are being imported. Once finished, you'll get a confirmation email.")
     else
diff --git a/app/controllers/projects/pipeline_schedules_controller.rb b/app/controllers/projects/pipeline_schedules_controller.rb
index 6a7e2b69652..ead839e8441 100644
--- a/app/controllers/projects/pipeline_schedules_controller.rb
+++ b/app/controllers/projects/pipeline_schedules_controller.rb
@@ -47,7 +47,7 @@ class Projects::PipelineSchedulesController < Projects::ApplicationController
   end
 
   def play
-    job_id = RunPipelineScheduleWorker.perform_async(schedule.id, current_user.id)
+    job_id = RunPipelineScheduleWorker.perform_async(schedule.id, current_user.id) # rubocop:disable CodeReuse/Worker
 
     if job_id
       pipelines_link_start = "<a href=\"#{project_pipelines_path(@project)}\">"
diff --git a/app/controllers/projects/registry/repositories_controller.rb b/app/controllers/projects/registry/repositories_controller.rb
index b31a74540e2..e524d1c29a2 100644
--- a/app/controllers/projects/registry/repositories_controller.rb
+++ b/app/controllers/projects/registry/repositories_controller.rb
@@ -32,7 +32,7 @@ module Projects
       end
 
       def destroy
-        DeleteContainerRepositoryWorker.perform_async(current_user.id, image.id)
+        DeleteContainerRepositoryWorker.perform_async(current_user.id, image.id) # rubocop:disable CodeReuse/Worker
         track_event(:delete_repository)
 
         respond_to do |format|
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 6af815b8daa..bf0c2d885f8 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -69,7 +69,9 @@ module Projects
           return
         end
 
+        # rubocop:disable CodeReuse/Worker
         CreatePipelineWorker.perform_async(project.id, current_user.id, project.default_branch, :web, ignore_skip_ci: true, save_on_errors: false)
+        # rubocop:enable CodeReuse/Worker
 
         pipelines_link_start = '<a href="%{url}">'.html_safe % { url: project_pipelines_path(@project) }
         flash[:toast] = _("A new Auto DevOps pipeline has been created, go to %{pipelines_link_start}Pipelines page%{pipelines_link_end} for details") % { pipelines_link_start: pipelines_link_start, pipelines_link_end: "</a>".html_safe }
diff --git a/app/controllers/projects/settings/repository_controller.rb b/app/controllers/projects/settings/repository_controller.rb
index 0c634bbea03..63f5d5073a7 100644
--- a/app/controllers/projects/settings/repository_controller.rb
+++ b/app/controllers/projects/settings/repository_controller.rb
@@ -25,7 +25,7 @@ module Projects
         result = Projects::UpdateService.new(project, current_user, cleanup_params).execute
 
         if result[:status] == :success
-          RepositoryCleanupWorker.perform_async(project.id, current_user.id)
+          RepositoryCleanupWorker.perform_async(project.id, current_user.id) # rubocop:disable CodeReuse/Worker
           flash[:notice] = _('Repository cleanup has started. You will receive an email once the cleanup operation is complete.')
         else
           flash[:alert] = _('Failed to upload object map file')
diff --git a/app/controllers/repositories/git_http_controller.rb b/app/controllers/repositories/git_http_controller.rb
index 82431ae286a..75c79881264 100644
--- a/app/controllers/repositories/git_http_controller.rb
+++ b/app/controllers/repositories/git_http_controller.rb
@@ -80,7 +80,7 @@ module Repositories
       return unless repo_type.project?
       return unless project&.daily_statistics_enabled?
 
-      ProjectDailyStatisticsWorker.perform_async(project.id)
+      ProjectDailyStatisticsWorker.perform_async(project.id) # rubocop:disable CodeReuse/Worker
     end
 
     def access
diff --git a/app/helpers/analytics_navbar_helper.rb b/app/helpers/analytics_navbar_helper.rb
index bbb7470d1fd..021b9bb10cd 100644
--- a/app/helpers/analytics_navbar_helper.rb
+++ b/app/helpers/analytics_navbar_helper.rb
@@ -31,7 +31,7 @@ module AnalyticsNavbarHelper
   end
 
   def cycle_analytics_navbar_link(project, current_user)
-    return unless Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, project)
+    return unless Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, project, default_enabled: true)
     return unless project_nav_tab?(:cycle_analytics)
 
     navbar_sub_item(
@@ -43,7 +43,7 @@ module AnalyticsNavbarHelper
   end
 
   def repository_analytics_navbar_link(project, current_user)
-    return if Feature.disabled?(:analytics_pages_under_project_analytics_sidebar, project)
+    return if Feature.disabled?(:analytics_pages_under_project_analytics_sidebar, project, default_enabled: true)
     return if project.empty_repo?
 
     navbar_sub_item(
@@ -55,7 +55,7 @@ module AnalyticsNavbarHelper
   end
 
   def ci_cd_analytics_navbar_link(project, current_user)
-    return unless Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, project)
+    return unless Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, project, default_enabled: true)
     return unless project_nav_tab?(:pipelines)
     return unless project.feature_available?(:builds, current_user) || !project.empty_repo?
 
diff --git a/app/services/ci/process_build_service.rb b/app/services/ci/process_build_service.rb
index eb92c7d1a27..12cdca24066 100644
--- a/app/services/ci/process_build_service.rb
+++ b/app/services/ci/process_build_service.rb
@@ -3,7 +3,7 @@
 module Ci
   class ProcessBuildService < BaseService
     def execute(build, current_status)
-      if valid_statuses_for_when(build.when).include?(current_status)
+      if valid_statuses_for_build(build).include?(current_status)
         if build.schedulable?
           build.schedule
         elsif build.action?
@@ -25,10 +25,10 @@ module Ci
       build.enqueue
     end
 
-    def valid_statuses_for_when(value)
-      case value
+    def valid_statuses_for_build(build)
+      case build.when
       when 'on_success'
-        %w[success skipped]
+        build.scheduling_type_dag? ? %w[success] : %w[success skipped]
       when 'on_failure'
         %w[failed]
       when 'always'
diff --git a/app/views/layouts/nav/sidebar/_analytics_links.html.haml b/app/views/layouts/nav/sidebar/_analytics_links.html.haml
index b859a1ade66..e87cf92374a 100644
--- a/app/views/layouts/nav/sidebar/_analytics_links.html.haml
+++ b/app/views/layouts/nav/sidebar/_analytics_links.html.haml
@@ -6,10 +6,10 @@
     = link_to navbar_links.first.link do
       .nav-icon-container
         = sprite_icon('chart')
-      %span.nav-item-name
+      %span.nav-item-name{ data: { qa_selector: 'analytics_link' } }
         = _('Analytics')
 
-    %ul.sidebar-sub-level-items
+    %ul.sidebar-sub-level-items{ data: { qa_selector: 'analytics_sidebar_submenu' } }
       - navbar_links.each do |menu_item|
         = nav_link(path: menu_item.path) do
           = link_to(menu_item.link, menu_item.link_to_options) do
diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml
index 60c5ef3877f..c00c48b623c 100644
--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/app/views/layouts/nav/sidebar/_group.html.haml
@@ -1,4 +1,4 @@
-- should_display_analytics_pages_in_sidebar = Feature.enabled?(:analytics_pages_under_group_analytics_sidebar, @group)
+- should_display_analytics_pages_in_sidebar = Feature.enabled?(:analytics_pages_under_group_analytics_sidebar, @group, default_enabled: true)
 - issues_count = group_issues_count(state: 'opened')
 - merge_requests_count = group_merge_requests_count(state: 'opened')
 
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index c587d0ca053..b9324f0596c 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -1,4 +1,4 @@
-- should_display_analytics_pages_in_sidebar = Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, @project)
+- should_display_analytics_pages_in_sidebar = Feature.enabled?(:analytics_pages_under_project_analytics_sidebar, @project, default_enabled: true)
 
 .nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
@@ -9,7 +9,7 @@
           = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile', width: 40, height: 40)
         .sidebar-context-title
           = @project.name
-    %ul.sidebar-top-level-items
+    %ul.sidebar-top-level-items.qa-project-sidebar
       - paths = sidebar_projects_paths
       - paths << 'cycle_analytics#show' unless should_display_analytics_pages_in_sidebar
       = nav_link(path: paths, html_options: { class: 'home' }) do
-- 
cgit v1.2.3