diff options
| author | Grzegorz Bizon <grzegorz@gitlab.com> | 2018-12-20 11:47:01 +0000 |
|---|---|---|
| committer | Grzegorz Bizon <grzegorz@gitlab.com> | 2018-12-20 11:47:01 +0000 |
| commit | c111e2657df22c811191135369d599923dc89f54 (patch) | |
| tree | 2de468666124191dcf815cf4dd92ea21fa76ca16 /app/assets | |
| parent | cad0661aadff50b4d2c2b4cc7b012809b945213c (diff) | |
| parent | 37c934e089508e053e6ad4cf075b00cfaab53f3c (diff) | |
| download | gitlab-ce-c111e2657df22c811191135369d599923dc89f54.tar.gz | |
Merge branch 'master' into 'feature/option-to-make-variables-protected'
Conflicts:
db/schema.rb
Diffstat (limited to 'app/assets')
220 files changed, 4793 insertions, 1751 deletions
diff --git a/app/assets/images/none-scheme-preview.png b/app/assets/images/none-scheme-preview.png Binary files differnew file mode 100644 index 00000000000..2eb6bf96671 --- /dev/null +++ b/app/assets/images/none-scheme-preview.png diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js index 3f7a1ef1bfc..a1310d18c26 100644 --- a/app/assets/javascripts/api.js +++ b/app/assets/javascripts/api.js @@ -5,25 +5,31 @@ import axios from './lib/utils/axios_utils'; const Api = { groupsPath: '/api/:version/groups.json', groupPath: '/api/:version/groups/:id', + subgroupsPath: '/api/:version/groups/:id/subgroups', namespacesPath: '/api/:version/namespaces.json', groupProjectsPath: '/api/:version/groups/:id/projects.json', projectsPath: '/api/:version/projects.json', projectPath: '/api/:version/projects/:id', projectLabelsPath: '/:namespace_path/:project_path/labels', - mergeRequestPath: '/api/:version/projects/:id/merge_requests/:mrid', + projectMergeRequestPath: '/api/:version/projects/:id/merge_requests/:mrid', + projectMergeRequestChangesPath: '/api/:version/projects/:id/merge_requests/:mrid/changes', + projectMergeRequestVersionsPath: '/api/:version/projects/:id/merge_requests/:mrid/versions', + projectRunnersPath: '/api/:version/projects/:id/runners', mergeRequestsPath: '/api/:version/merge_requests', - mergeRequestChangesPath: '/api/:version/projects/:id/merge_requests/:mrid/changes', - mergeRequestVersionsPath: '/api/:version/projects/:id/merge_requests/:mrid/versions', groupLabelsPath: '/groups/:namespace_path/-/labels', issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key', projectTemplatePath: '/api/:version/projects/:id/templates/:type/:key', projectTemplatesPath: '/api/:version/projects/:id/templates/:type', usersPath: '/api/:version/users.json', - userStatusPath: '/api/:version/user/status', + userPath: '/api/:version/users/:id', + userStatusPath: '/api/:version/users/:id/status', + userPostStatusPath: '/api/:version/user/status', commitPath: '/api/:version/projects/:id/repository/commits', + applySuggestionPath: '/api/:version/suggestions/:id/apply', commitPipelinesPath: '/:project_id/commit/:sha/pipelines', branchSinglePath: '/api/:version/projects/:id/repository/branches/:branch', createBranchPath: '/api/:version/projects/:id/repository/branches', + releasesPath: '/api/:version/project/:id/releases', group(groupId, callback) { const url = Api.buildUrl(Api.groupPath).replace(':id', groupId); @@ -99,36 +105,45 @@ const Api = { }, // Return Merge Request for project - mergeRequest(projectPath, mergeRequestId, params = {}) { - const url = Api.buildUrl(Api.mergeRequestPath) + projectMergeRequest(projectPath, mergeRequestId, params = {}) { + const url = Api.buildUrl(Api.projectMergeRequestPath) .replace(':id', encodeURIComponent(projectPath)) .replace(':mrid', mergeRequestId); return axios.get(url, { params }); }, - mergeRequests(params = {}) { - const url = Api.buildUrl(Api.mergeRequestsPath); - - return axios.get(url, { params }); - }, - - mergeRequestChanges(projectPath, mergeRequestId) { - const url = Api.buildUrl(Api.mergeRequestChangesPath) + projectMergeRequestChanges(projectPath, mergeRequestId) { + const url = Api.buildUrl(Api.projectMergeRequestChangesPath) .replace(':id', encodeURIComponent(projectPath)) .replace(':mrid', mergeRequestId); return axios.get(url); }, - mergeRequestVersions(projectPath, mergeRequestId) { - const url = Api.buildUrl(Api.mergeRequestVersionsPath) + projectMergeRequestVersions(projectPath, mergeRequestId) { + const url = Api.buildUrl(Api.projectMergeRequestVersionsPath) .replace(':id', encodeURIComponent(projectPath)) .replace(':mrid', mergeRequestId); return axios.get(url); }, + projectRunners(projectPath, config = {}) { + const url = Api.buildUrl(Api.projectRunnersPath).replace( + ':id', + encodeURIComponent(projectPath), + ); + + return axios.get(url, config); + }, + + mergeRequests(params = {}) { + const url = Api.buildUrl(Api.mergeRequestsPath); + + return axios.get(url, { params }); + }, + newLabel(namespacePath, projectPath, data, callback) { let url; @@ -172,6 +187,12 @@ const Api = { }); }, + applySuggestion(id) { + const url = Api.buildUrl(Api.applySuggestionPath).replace(':id', encodeURIComponent(id)); + + return axios.put(url); + }, + commitPipelines(projectId, sha) { const encodedProjectId = projectId .split('/') @@ -243,6 +264,20 @@ const Api = { }); }, + user(id, options) { + const url = Api.buildUrl(this.userPath).replace(':id', encodeURIComponent(id)); + return axios.get(url, { + params: options, + }); + }, + + userStatus(id, options) { + const url = Api.buildUrl(this.userStatusPath).replace(':id', encodeURIComponent(id)); + return axios.get(url, { + params: options, + }); + }, + branches(id, query = '', options = {}) { const url = Api.buildUrl(this.createBranchPath).replace(':id', encodeURIComponent(id)); @@ -265,7 +300,7 @@ const Api = { }, postUserStatus({ emoji, message }) { - const url = Api.buildUrl(this.userStatusPath); + const url = Api.buildUrl(this.userPostStatusPath); return axios.put(url, { emoji, @@ -273,6 +308,12 @@ const Api = { }); }, + releases(id) { + const url = Api.buildUrl(this.releasesPath).replace(':id', encodeURIComponent(id)); + + return axios.get(url); + }, + buildUrl(url) { let urlRoot = ''; if (gon.relative_url_root != null) { diff --git a/app/assets/javascripts/behaviors/markdown/render_gfm.js b/app/assets/javascripts/behaviors/markdown/render_gfm.js index a2d4331b6d1..fc9286d15e6 100644 --- a/app/assets/javascripts/behaviors/markdown/render_gfm.js +++ b/app/assets/javascripts/behaviors/markdown/render_gfm.js @@ -3,6 +3,7 @@ import syntaxHighlight from '~/syntax_highlight'; import renderMath from './render_math'; import renderMermaid from './render_mermaid'; import highlightCurrentUser from './highlight_current_user'; +import initUserPopovers from '../../user_popovers'; // Render GitLab flavoured Markdown // @@ -13,6 +14,7 @@ $.fn.renderGFM = function renderGFM() { renderMath(this.find('.js-render-math')); renderMermaid(this.find('.js-render-mermaid')); highlightCurrentUser(this.find('.gfm-project_member').get()); + initUserPopovers(this.find('.gfm-project_member').get()); return this; }; diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js index 720f30e18e6..35380ca49fb 100644 --- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js +++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js @@ -26,6 +26,9 @@ export default function renderMermaid($els) { }, // mermaidAPI options theme: 'neutral', + flowchart: { + htmlLabels: false, + }, }); $els.each((i, el) => { diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js index c09d9ccddd6..d8056e48d4e 100644 --- a/app/assets/javascripts/behaviors/requires_input.js +++ b/app/assets/javascripts/behaviors/requires_input.js @@ -50,10 +50,11 @@ function hideOrShowHelpBlock(form) { } $(() => { - const $form = $('form.js-requires-input'); - if ($form) { + $('form.js-requires-input').each((i, el) => { + const $form = $(el); + $form.requiresInput(); hideOrShowHelpBlock($form); $('.select2.js-select-namespace').change(() => hideOrShowHelpBlock($form)); - } + }); }); diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js index fa9b2c9f755..bef1553703b 100644 --- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_navigation.js @@ -8,6 +8,7 @@ export default class ShortcutsNavigation extends Shortcuts { Mousetrap.bind('g p', () => findAndFollowLink('.shortcuts-project')); Mousetrap.bind('g v', () => findAndFollowLink('.shortcuts-project-activity')); + Mousetrap.bind('g r', () => findAndFollowLink('.shortcuts-project-releases')); Mousetrap.bind('g f', () => findAndFollowLink('.shortcuts-tree')); Mousetrap.bind('g c', () => findAndFollowLink('.shortcuts-commits')); Mousetrap.bind('g j', () => findAndFollowLink('.shortcuts-builds')); diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js index 9f547471170..b07f951346e 100644 --- a/app/assets/javascripts/blob_edit/blob_bundle.js +++ b/app/assets/javascripts/blob_edit/blob_bundle.js @@ -17,6 +17,11 @@ export default () => { const currentAction = $('.js-file-title').data('currentAction'); const projectId = editBlobForm.data('project-id'); const commitButton = $('.js-commit-button'); + const cancelLink = $('.btn.btn-cancel'); + + cancelLink.on('click', () => { + window.onbeforeunload = null; + }); commitButton.on('click', () => { window.onbeforeunload = null; diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue index 15937b1091a..e038198e6f0 100644 --- a/app/assets/javascripts/boards/components/issue_due_date.vue +++ b/app/assets/javascripts/boards/components/issue_due_date.vue @@ -15,6 +15,16 @@ export default { type: String, required: true, }, + cssClass: { + type: String, + required: false, + default: '', + }, + tooltipPlacement: { + type: String, + required: false, + default: 'bottom', + }, }, computed: { title() { @@ -66,15 +76,13 @@ export default { <template> <span> - <span ref="issueDueDate" class="board-card-info card-number"> - <icon - :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" - name="calendar" - /><time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{ + <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number"> + <icon :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" name="calendar" /> + <time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{ body }}</time> </span> - <gl-tooltip :target="() => $refs.issueDueDate" placement="bottom"> + <gl-tooltip :target="() => $refs.issueDueDate" :placement="tooltipPlacement"> <span class="bold">{{ __('Due date') }}</span> <br /> <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span> </gl-tooltip> diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js index f7016561f93..10577da9305 100644 --- a/app/assets/javascripts/boards/components/new_list_dropdown.js +++ b/app/assets/javascripts/boards/components/new_list_dropdown.js @@ -37,7 +37,7 @@ export default function initNewListDropdown() { }); }, renderRow(label) { - const active = boardsStore.findList('title', label.title); + const active = boardsStore.findListByLabelId(label.id); const $li = $('<li />'); const $a = $('<a />', { class: active ? `is-active js-board-list-${active.id}` : '', @@ -63,7 +63,7 @@ export default function initNewListDropdown() { const label = options.selectedObj; e.preventDefault(); - if (!boardsStore.findList('title', label.title)) { + if (!boardsStore.findListByLabelId(label.id)) { boardsStore.new({ title: label.title, position: boardsStore.state.lists.length - 2, diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue index 31651658fe6..d899b7fbd8c 100644 --- a/app/assets/javascripts/boards/components/project_select.vue +++ b/app/assets/javascripts/boards/components/project_select.vue @@ -92,20 +92,7 @@ export default { {{ selectedProjectName }} <icon name="chevron-down" /> </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> - <div class="dropdown-title"> - <span>Projects</span> - <button - aria-label="Close" - type="button" - class="dropdown-title-button dropdown-menu-close" - > - <icon - name="merge-request-close-m" - data-hidden="true" - class="dropdown-menu-close-icon" - /> - </button> - </div> + <div class="dropdown-title">Projects</div> <div class="dropdown-input"> <input class="dropdown-input-field" type="search" placeholder="Search projects" /> <icon name="search" class="dropdown-input-search" data-hidden="true" /> diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js index 5e0f0b07247..dd92d3c8552 100644 --- a/app/assets/javascripts/boards/models/issue.js +++ b/app/assets/javascripts/boards/models/issue.js @@ -55,12 +55,12 @@ class ListIssue { } findLabel(findLabel) { - return this.labels.filter(label => label.title === findLabel.title)[0]; + return this.labels.find(label => label.id === findLabel.id); } removeLabel(removeLabel) { if (removeLabel) { - this.labels = this.labels.filter(label => removeLabel.title !== label.title); + this.labels = this.labels.filter(label => removeLabel.id !== label.id); } } @@ -75,7 +75,7 @@ class ListIssue { } findAssignee(findAssignee) { - return this.assignees.filter(assignee => assignee.id === findAssignee.id)[0]; + return this.assignees.find(assignee => assignee.id === findAssignee.id); } removeAssignee(removeAssignee) { diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js index cf88a973d33..802796208c2 100644 --- a/app/assets/javascripts/boards/stores/boards_store.js +++ b/app/assets/javascripts/boards/stores/boards_store.js @@ -166,6 +166,9 @@ const boardsStore = { }); return filteredList[0]; }, + findListByLabelId(id) { + return this.state.lists.find(list => list.type === 'label' && list.label.id === id); + }, updateFiltersUrl() { window.history.pushState(null, null, `?${this.filter.path}`); }, diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index aff32d95db1..cf70a48f076 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -1,6 +1,6 @@ import Visibility from 'visibilityjs'; import Vue from 'vue'; -import PersistentUserCallout from '../persistent_user_callout'; +import initDismissableCallout from '~/dismissable_callout'; import { s__, sprintf } from '../locale'; import Flash from '../flash'; import Poll from '../lib/utils/poll'; @@ -67,7 +67,7 @@ export default class Clusters { this.showTokenButton = document.querySelector('.js-show-cluster-token'); this.tokenField = document.querySelector('.js-cluster-token'); - Clusters.initDismissableCallout(); + initDismissableCallout('.js-cluster-security-warning'); initSettingsPanels(); setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area')); this.initApplications(clusterType); @@ -108,12 +108,6 @@ export default class Clusters { }); } - static initDismissableCallout() { - const callout = document.querySelector('.js-cluster-security-warning'); - - if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new - } - addListeners() { if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken); eventHub.$on('installApplication', this.installApplication); diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue index a37cb4def28..489615f1f78 100644 --- a/app/assets/javascripts/clusters/components/applications.vue +++ b/app/assets/javascripts/clusters/components/applications.vue @@ -84,6 +84,9 @@ export default { ingressExternalIp() { return this.applications.ingress.externalIp; }, + certManagerInstalled() { + return this.applications.cert_manager.status === APPLICATION_STATUS.INSTALLED; + }, ingressDescription() { const extraCostParagraph = sprintf( _.escape( @@ -130,9 +133,9 @@ export default { return sprintf( _.escape( s__( - `ClusterIntegration|cert-manager is a native Kubernetes certificate management controller that helps with issuing certificates. - Installing cert-manager on your cluster will issue a certificate by %{letsEncrypt} and ensure that certificates - are valid and up to date.`, + `ClusterIntegration|Cert-Manager is a native Kubernetes certificate management controller that helps with issuing certificates. + Installing Cert-Manager on your cluster will issue a certificate by %{letsEncrypt} and ensure that certificates + are valid and up-to-date.`, ), ), { @@ -259,6 +262,16 @@ export default { </span> </div> <input v-else type="text" class="form-control js-ip-address" readonly value="?" /> + <p class="form-text text-muted"> + {{ + s__(`ClusterIntegration|Point a wildcard DNS to this + generated IP address in order to access + your application after it has been deployed.`) + }} + <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer"> + {{ __('More information') }} + </a> + </p> </div> <p v-if="!ingressExternalIp" class="settings-message js-no-ip-message"> @@ -272,17 +285,6 @@ export default { {{ __('More information') }} </a> </p> - - <p> - {{ - s__(`ClusterIntegration|Point a wildcard DNS to this - generated IP address in order to access - your application after it has been deployed.`) - }} - <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer"> - {{ __('More information') }} - </a> - </p> </template> <div v-html="ingressDescription"></div> </div> @@ -295,11 +297,41 @@ export default { :status-reason="applications.cert_manager.statusReason" :request-status="applications.cert_manager.requestStatus" :request-reason="applications.cert_manager.requestReason" + :install-application-request-params="{ email: applications.cert_manager.email }" :disabled="!helmInstalled" - class="hide-bottom-border rounded-bottom" title-link="https://cert-manager.readthedocs.io/en/latest/#" > - <div slot="description" v-html="certManagerDescription"></div> + <template> + <div slot="description"> + <p v-html="certManagerDescription"></p> + <div class="form-group"> + <label for="cert-manager-issuer-email"> + {{ s__('ClusterIntegration|Issuer Email') }} + </label> + <div class="input-group"> + <input + v-model="applications.cert_manager.email" + :readonly="certManagerInstalled" + type="text" + class="form-control js-email" + /> + </div> + <p class="form-text text-muted"> + {{ + s__(`ClusterIntegration|Issuers represent a certificate authority. + You must provide an email address for your Issuer. `) + }} + <a + href="http://docs.cert-manager.io/en/latest/reference/issuers.html?highlight=email" + target="_blank" + rel="noopener noreferrer" + > + {{ __('More information') }} + </a> + </p> + </div> + </div> + </template> </application-row> <application-row v-if="isProjectCluster" @@ -382,20 +414,22 @@ export default { /> </span> </div> + + <p v-if="ingressInstalled" class="form-text text-muted"> + {{ + s__(`ClusterIntegration|Replace this with your own hostname if you want. + If you do so, point hostname to Ingress IP Address from above.`) + }} + <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer"> + {{ __('More information') }} + </a> + </p> </div> - <p v-if="ingressInstalled"> - {{ - s__(`ClusterIntegration|Replace this with your own hostname if you want. - If you do so, point hostname to Ingress IP Address from above.`) - }} - <a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer"> - {{ __('More information') }} - </a> - </p> </template> </div> </application-row> <application-row + v-if="isProjectCluster" id="knative" :logo-url="knativeLogo" :title="applications.knative.title" @@ -405,17 +439,15 @@ export default { :request-reason="applications.knative.requestReason" :install-application-request-params="{ hostname: applications.knative.hostname }" :disabled="!helmInstalled" - class="hide-bottom-border rounded-bottom" title-link="https://github.com/knative/docs" > <div slot="description"> <p> {{ - s__(`ClusterIntegration|Knative (pronounced kay-nay-tiv) extends - Kubernetes to provide a set of middleware components that are - essential to build modern, source-centric, and container-based - applications that can run anywhere: on premises, in the cloud, or - even in a third-party data center.`) + s__(`ClusterIntegration|Knative extends Kubernetes to provide + a set of middleware components that are essential to build modern, + source-centric, and container-based applications that can run + anywhere: on premises, in the cloud, or even in a third-party data center.`) }} </p> @@ -433,7 +465,7 @@ export default { /> </div> </template> - <template v-else> + <template v-else-if="helmInstalled"> <div class="form-group"> <label for="knative-domainname"> {{ s__('ClusterIntegration|Knative Domain Name:') }} diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js index 15cf4a56138..e31afadf186 100644 --- a/app/assets/javascripts/clusters/constants.js +++ b/app/assets/javascripts/clusters/constants.js @@ -24,3 +24,4 @@ export const REQUEST_FAILURE = 'request-failure'; export const INGRESS = 'ingress'; export const JUPYTER = 'jupyter'; export const KNATIVE = 'knative'; +export const CERT_MANAGER = 'cert_manager'; diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index 2d69da8eaec..c750daab112 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -1,5 +1,5 @@ import { s__ } from '../../locale'; -import { INGRESS, JUPYTER, KNATIVE } from '../constants'; +import { INGRESS, JUPYTER, KNATIVE, CERT_MANAGER } from '../constants'; export default class ClusterStore { constructor() { @@ -30,6 +30,7 @@ export default class ClusterStore { statusReason: null, requestStatus: null, requestReason: null, + email: null, }, runner: { title: s__('ClusterIntegration|GitLab Runner'), @@ -103,6 +104,9 @@ export default class ClusterStore { if (appId === INGRESS) { this.state.applications.ingress.externalIp = serverAppEntry.external_ip; + } else if (appId === CERT_MANAGER) { + this.state.applications.cert_manager.email = + this.state.applications.cert_manager.email || serverAppEntry.email; } else if (appId === JUPYTER) { this.state.applications.jupyter.hostname = serverAppEntry.hostname || diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index 22da38ce7a5..d4c1b07093d 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -42,6 +42,16 @@ export default { type: Object, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, + changesEmptyStateIllustration: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -63,7 +73,7 @@ export default { plainDiffPath: state => state.diffs.plainDiffPath, emailPatchPath: state => state.diffs.emailPatchPath, }), - ...mapState('diffs', ['showTreeList', 'isLoading']), + ...mapState('diffs', ['showTreeList', 'isLoading', 'startVersion']), ...mapGetters('diffs', ['isParallelView']), ...mapGetters(['isNotesFetched', 'getNoteableData']), targetBranch() { @@ -79,6 +89,13 @@ export default { showCompareVersions() { return this.mergeRequestDiffs && this.mergeRequestDiff; }, + renderDiffFiles() { + return ( + this.diffFiles.length > 0 || + (this.startVersion && + this.startVersion.version_index === this.mergeRequestDiff.version_index) + ); + }, }, watch: { diffViewType() { @@ -102,6 +119,12 @@ export default { if (this.shouldShow) { this.fetchData(); } + + const id = window && window.location && window.location.hash; + + if (id) { + this.setHighlightedRow(id.slice(1)); + } }, created() { this.adjustView(); @@ -114,6 +137,7 @@ export default { 'fetchDiffFiles', 'startRenderDiffsQueue', 'assignDiscussionsToDiff', + 'setHighlightedRow', ]), fetchData() { this.fetchDiffFiles() @@ -184,15 +208,16 @@ export default { <div v-show="showTreeList" class="diff-tree-list"><tree-list /></div> <div class="diff-files-holder"> <commit-widget v-if="commit" :commit="commit" /> - <template v-if="diffFiles.length > 0"> + <template v-if="renderDiffFiles"> <diff-file v-for="file in diffFiles" :key="file.newPath" :file="file" + :help-page-path="helpPagePath" :can-current-user-fork="canCurrentUserFork" /> </template> - <no-changes v-else /> + <no-changes v-else :changes-empty-state-illustration="changesEmptyStateIllustration" /> </div> </div> </div> diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue index e405d8b20ae..42d09e44768 100644 --- a/app/assets/javascripts/diffs/components/diff_content.vue +++ b/app/assets/javascripts/diffs/components/diff_content.vue @@ -1,6 +1,7 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; +import EmptyFileViewer from '~/vue_shared/components/diff_viewer/viewers/empty_file.vue'; import InlineDiffView from './inline_diff_view.vue'; import ParallelDiffView from './parallel_diff_view.vue'; import NoteForm from '../../notes/components/note_form.vue'; @@ -17,12 +18,18 @@ export default { NoteForm, DiffDiscussions, ImageDiffOverlay, + EmptyFileViewer, }, props: { diffFile: { type: Object, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, computed: { ...mapState({ @@ -70,15 +77,18 @@ export default { <div class="diff-content"> <div class="diff-viewer"> <template v-if="isTextFile"> + <empty-file-viewer v-if="diffFile.empty" /> <inline-diff-view - v-if="isInlineView" + v-else-if="isInlineView" :diff-file="diffFile" :diff-lines="diffFile.highlighted_diff_lines || []" + :help-page-path="helpPagePath" /> <parallel-diff-view - v-if="isParallelView" + v-else-if="isParallelView" :diff-file="diffFile" :diff-lines="diffFile.parallel_diff_lines || []" + :help-page-path="helpPagePath" /> </template> <diff-viewer @@ -90,6 +100,8 @@ export default { :old-sha="diffFile.diff_refs.base_sha" :file-hash="diffFile.file_hash" :project-path="projectPath" + :a-mode="diffFile.a_mode" + :b-mode="diffFile.b_mode" > <image-diff-overlay slot="image-overlay" diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue index bee29b04e92..b2021cd6061 100644 --- a/app/assets/javascripts/diffs/components/diff_discussions.vue +++ b/app/assets/javascripts/diffs/components/diff_discussions.vue @@ -13,6 +13,11 @@ export default { type: Array, required: true, }, + line: { + type: Object, + required: false, + default: null, + }, shouldCollapseDiscussions: { type: Boolean, required: false, @@ -23,6 +28,11 @@ export default { required: false, default: false, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, methods: { ...mapActions(['toggleDiscussion']), @@ -72,6 +82,8 @@ export default { :render-diff-file="false" :always-expanded="true" :discussions-by-diff-order="true" + :line="line" + :help-page-path="helpPagePath" @noteDeleted="deleteNoteHandler" > <span v-if="renderAvatarBadge" slot="avatar-badge" class="badge badge-pill"> diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue index f7e3655ea40..449f7007077 100644 --- a/app/assets/javascripts/diffs/components/diff_file.vue +++ b/app/assets/javascripts/diffs/components/diff_file.vue @@ -4,6 +4,7 @@ import _ from 'underscore'; import { __, sprintf } from '~/locale'; import createFlash from '~/flash'; import { GlLoadingIcon } from '@gitlab/ui'; +import eventHub from '../../notes/event_hub'; import DiffFileHeader from './diff_file_header.vue'; import DiffContent from './diff_content.vue'; @@ -22,6 +23,11 @@ export default { type: Boolean, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -52,7 +58,9 @@ export default { (!this.file.highlighted_diff_lines && !this.isLoadingCollapsedDiff && !this.file.too_large && - this.file.text) + this.file.text && + !this.file.renamed_file && + !this.file.mode_changed) ); }, showLoadingIcon() { @@ -73,6 +81,9 @@ export default { } }, }, + created() { + eventHub.$on(`loadCollapsedDiff/${this.file.file_hash}`, this.handleLoadCollapsedDiff); + }, methods: { ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff']), handleToggle() { @@ -143,9 +154,8 @@ export default { <a :href="file.fork_path" class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success" + >Fork</a > - Fork - </a> <button class="js-cancel-fork-suggestion-button btn btn-grouped" type="button" @@ -159,13 +169,14 @@ export default { v-if="!isCollapsed && file.renderIt" :class="{ hidden: isCollapsed || file.too_large }" :diff-file="file" + :help-page-path="helpPagePath" /> <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" /> <div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed"> {{ __('This diff is collapsed.') }} - <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle"> - {{ __('Click to expand it.') }} - </a> + <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{ + __('Click to expand it.') + }}</a> </div> <div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff"> {{ __('This source diff could not be displayed because it is too large.') }} diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue index b969017a2bb..0c0a0faa59d 100644 --- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue +++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue @@ -56,9 +56,12 @@ export default { return `${noteData.author.name}: ${note}`; }, toggleDiscussions() { + const forceExpanded = this.discussions.some(discussion => !discussion.expanded); + this.discussions.forEach(discussion => { this.toggleDiscussion({ discussionId: discussion.id, + forceExpanded, }); }); }, diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue index c02561b7599..c0613d80d37 100644 --- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue +++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue @@ -72,6 +72,13 @@ export default { diffFiles: state => state.diffs.diffFiles, }), ...mapGetters(['isLoggedIn']), + lineCode() { + return ( + this.line.line_code || + (this.line.left && this.line.line.left.line_code) || + (this.line.right && this.line.right.line_code) + ); + }, lineHref() { return `#${this.line.line_code || ''}`; }, @@ -97,9 +104,9 @@ export default { }, }, methods: { - ...mapActions('diffs', ['loadMoreLines', 'showCommentForm']), + ...mapActions('diffs', ['loadMoreLines', 'showCommentForm', 'setHighlightedRow']), handleCommentButton() { - this.showCommentForm({ lineCode: this.line.line_code }); + this.showCommentForm({ lineCode: this.line.line_code, fileHash: this.fileHash }); }, handleLoadMoreLines() { if (this.isRequesting) { @@ -160,7 +167,7 @@ export default { > <template v-else> <button - v-if="shouldShowCommentButton" + v-show="shouldShowCommentButton" type="button" class="add-diff-note js-add-diff-note-button qa-diff-comment" title="Add a comment to this line" @@ -168,7 +175,13 @@ export default { > <icon :size="12" name="comment" /> </button> - <a v-if="lineNumber" :data-linenumber="lineNumber" :href="lineHref"> </a> + <a + v-if="lineNumber" + :data-linenumber="lineNumber" + :href="lineHref" + @click="setHighlightedRow(lineCode);" + > + </a> <diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" /> </template> </div> diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue index c7cef74fe40..e7569ba7b84 100644 --- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue +++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue @@ -73,6 +73,7 @@ export default { this.cancelCommentForm({ lineCode: this.line.line_code, + fileHash: this.diffFileHash, }); this.$nextTick(() => { this.resetAutoSave(); @@ -93,6 +94,7 @@ export default { ref="noteForm" :is-editing="true" :line-code="line.line_code" + :line="line" save-button-title="Comment" class="diff-comment-form" @cancelForm="handleCancelCommentForm" diff --git a/app/assets/javascripts/diffs/components/diff_table_cell.vue b/app/assets/javascripts/diffs/components/diff_table_cell.vue index f4eb956adcb..d174b13e133 100644 --- a/app/assets/javascripts/diffs/components/diff_table_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_table_cell.vue @@ -1,5 +1,5 @@ <script> -import { mapGetters } from 'vuex'; +import { mapGetters, mapActions } from 'vuex'; import DiffLineGutterContent from './diff_line_gutter_content.vue'; import { MATCH_LINE_TYPE, @@ -30,6 +30,11 @@ export default { type: String, required: true, }, + isHighlighted: { + type: Boolean, + required: true, + default: false, + }, diffViewType: { type: String, required: false, @@ -85,6 +90,7 @@ export default { const { type } = this.line; return { + hll: this.isHighlighted, [type]: type, [LINE_UNFOLD_CLASS_NAME]: this.isMatchLine, [LINE_HOVER_CLASS_NAME]: @@ -99,6 +105,7 @@ export default { return this.lineType === OLD_LINE_TYPE ? this.line.old_line : this.line.new_line; }, }, + methods: mapActions('diffs', ['setHighlightedRow']), }; </script> diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue index 91b87fb042c..814ee0b7c02 100644 --- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue +++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue @@ -1,5 +1,4 @@ <script> -import { mapState } from 'vuex'; import diffDiscussions from './diff_discussions.vue'; import diffLineNoteForm from './diff_line_note_form.vue'; @@ -17,29 +16,41 @@ export default { type: String, required: true, }, - lineIndex: { - type: Number, - required: true, + helpPagePath: { + type: String, + required: false, + default: '', }, }, computed: { - ...mapState({ - diffLineCommentForms: state => state.diffs.diffLineCommentForms, - }), className() { return this.line.discussions.length ? '' : 'js-temp-notes-holder'; }, + shouldRender() { + if (this.line.hasForm) return true; + + if (!this.line.discussions || !this.line.discussions.length) { + return false; + } + + return this.line.discussions.every(discussion => discussion.expanded); + }, }, }; </script> <template> - <tr :class="className" class="notes_holder"> + <tr v-if="shouldRender" :class="className" class="notes_holder"> <td class="notes_content" colspan="3"> <div class="content"> - <diff-discussions v-if="line.discussions.length" :discussions="line.discussions" /> + <diff-discussions + v-if="line.discussions.length" + :line="line" + :discussions="line.discussions" + :help-page-path="helpPagePath" + /> <diff-line-note-form - v-if="diffLineCommentForms[line.line_code]" + v-if="line.hasForm" :diff-file-hash="diffFileHash" :line="line" :note-target-line="line" diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue index 8d53fbded73..c764cbeb8e0 100644 --- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue +++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue @@ -1,5 +1,5 @@ <script> -import { mapGetters, mapActions } from 'vuex'; +import { mapGetters, mapActions, mapState } from 'vuex'; import DiffTableCell from './diff_table_cell.vue'; import { NEW_LINE_TYPE, @@ -40,6 +40,11 @@ export default { }; }, computed: { + ...mapState({ + isHighlighted(state) { + return this.line.line_code !== null && this.line.line_code === state.diffs.highlightedRow; + }, + }), ...mapGetters('diffs', ['isInlineView']), isContextLine() { return this.line.type === CONTEXT_LINE_TYPE; @@ -91,6 +96,7 @@ export default { :is-bottom="isBottom" :is-hover="isHover" :show-comment-button="true" + :is-highlighted="isHighlighted" class="diff-line-num old_line" /> <diff-table-cell @@ -100,8 +106,18 @@ export default { :line-type="newLineType" :is-bottom="isBottom" :is-hover="isHover" + :is-highlighted="isHighlighted" class="diff-line-num new_line qa-new-diff-line" /> - <td :class="line.type" class="line_content" v-html="line.rich_text"></td> + <td + :class="[ + line.type, + { + hll: isHighlighted, + }, + ]" + class="line_content" + v-html="line.rich_text" + ></td> </tr> </template> diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue index fafc1649ce7..e781397214d 100644 --- a/app/assets/javascripts/diffs/components/inline_diff_view.vue +++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue @@ -1,5 +1,5 @@ <script> -import { mapGetters, mapState } from 'vuex'; +import { mapGetters } from 'vuex'; import inlineDiffTableRow from './inline_diff_table_row.vue'; import inlineDiffCommentRow from './inline_diff_comment_row.vue'; @@ -17,25 +17,25 @@ export default { type: Array, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, computed: { - ...mapGetters('diffs', ['commitId', 'shouldRenderInlineCommentRow']), - ...mapState({ - diffLineCommentForms: state => state.diffs.diffLineCommentForms, - }), + ...mapGetters('diffs', ['commitId']), diffLinesLength() { return this.diffLines.length; }, - userColorScheme() { - return window.gon.user_color_scheme; - }, }, + userColorScheme: window.gon.user_color_scheme, }; </script> <template> <table - :class="userColorScheme" + :class="$options.userColorScheme" :data-commit-id="commitId" class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view" > @@ -49,11 +49,10 @@ export default { :is-bottom="index + 1 === diffLinesLength" /> <inline-diff-comment-row - v-if="shouldRenderInlineCommentRow(line)" - :key="index" + :key="`icr-${line.line_code || index}`" :diff-file-hash="diffFile.file_hash" :line="line" - :line-index="index" + :help-page-path="helpPagePath" /> </template> </tbody> diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue index 25ec157ed25..47e9627a957 100644 --- a/app/assets/javascripts/diffs/components/no_changes.vue +++ b/app/assets/javascripts/diffs/components/no_changes.vue @@ -1,34 +1,51 @@ <script> -import { mapState } from 'vuex'; -import emptyImage from '~/../../views/shared/icons/_mr_widget_empty_state.svg'; +import { mapGetters } from 'vuex'; +import _ from 'underscore'; +import { GlButton } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; export default { - data() { - return { - emptyImage, - }; + components: { + GlButton, + }, + props: { + changesEmptyStateIllustration: { + type: String, + required: true, + }, }, computed: { - ...mapState({ - sourceBranch: state => state.notes.noteableData.source_branch, - targetBranch: state => state.notes.noteableData.target_branch, - newBlobPath: state => state.notes.noteableData.new_blob_path, - }), + ...mapGetters(['getNoteableData']), + emptyStateText() { + return sprintf( + __( + 'No changes between %{ref_start}%{source_branch}%{ref_end} and %{ref_start}%{target_branch}%{ref_end}', + ), + { + ref_start: '<span class="ref-name">', + ref_end: '</span>', + source_branch: _.escape(this.getNoteableData.source_branch), + target_branch: _.escape(this.getNoteableData.target_branch), + }, + false, + ); + }, }, }; </script> <template> - <div class="row empty-state nothing-here-block"> - <div class="col-xs-12"> - <div class="svg-content"><span v-html="emptyImage"></span></div> + <div class="row empty-state"> + <div class="col-12"> + <div class="svg-content svg-250"><img :src="changesEmptyStateIllustration" /></div> </div> - <div class="col-xs-12"> + <div class="col-12"> <div class="text-content text-center"> - No changes between <span class="ref-name">{{ sourceBranch }}</span> and - <span class="ref-name">{{ targetBranch }}</span> + <span v-html="emptyStateText"></span> <div class="text-center"> - <a :href="newBlobPath" class="btn btn-success"> {{ __('Create commit') }} </a> + <gl-button :href="getNoteableData.new_blob_path" variant="success">{{ + __('Create commit') + }}</gl-button> </div> </div> </div> diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue index c6b50983277..a65cf025cde 100644 --- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue +++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue @@ -1,5 +1,4 @@ <script> -import { mapState } from 'vuex'; import diffDiscussions from './diff_discussions.vue'; import diffLineNoteForm from './diff_line_note_form.vue'; @@ -21,24 +20,20 @@ export default { type: Number, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, computed: { - ...mapState({ - diffLineCommentForms: state => state.diffs.diffLineCommentForms, - }), - leftLineCode() { - return this.line.left && this.line.left.line_code; - }, - rightLineCode() { - return this.line.right && this.line.right.line_code; - }, hasExpandedDiscussionOnLeft() { - return this.line.left && this.line.left.discussions + return this.line.left && this.line.left.discussions.length ? this.line.left.discussions.every(discussion => discussion.expanded) : false; }, hasExpandedDiscussionOnRight() { - return this.line.right && this.line.right.discussions + return this.line.right && this.line.right.discussions.length ? this.line.right.discussions.every(discussion => discussion.expanded) : false; }, @@ -57,9 +52,10 @@ export default { ); }, showRightSideCommentForm() { - return ( - this.line.right && this.line.right.type && this.diffLineCommentForms[this.rightLineCode] - ); + return this.line.right && this.line.right.type && this.line.right.hasForm; + }, + showLeftSideCommentForm() { + return this.line.left && this.line.left.hasForm; }, className() { return (this.left && this.line.left.discussions.length > 0) || @@ -67,21 +63,41 @@ export default { ? '' : 'js-temp-notes-holder'; }, + shouldRender() { + const { line } = this; + const hasDiscussion = + (line.left && line.left.discussions && line.left.discussions.length) || + (line.right && line.right.discussions && line.right.discussions.length); + + if ( + hasDiscussion && + (this.hasExpandedDiscussionOnLeft || this.hasExpandedDiscussionOnRight) + ) { + return true; + } + + const hasCommentFormOnLeft = line.left && line.left.hasForm; + const hasCommentFormOnRight = line.right && line.right.hasForm; + + return hasCommentFormOnLeft || hasCommentFormOnRight; + }, }, }; </script> <template> - <tr :class="className" class="notes_holder"> + <tr v-if="shouldRender" :class="className" class="notes_holder"> <td class="notes_content parallel old" colspan="2"> <div v-if="shouldRenderDiscussionsOnLeft" class="content"> <diff-discussions v-if="line.left.discussions.length" :discussions="line.left.discussions" + :line="line.left" + :help-page-path="helpPagePath" /> </div> <diff-line-note-form - v-if="diffLineCommentForms[leftLineCode]" + v-if="showLeftSideCommentForm" :diff-file-hash="diffFileHash" :line="line.left" :note-target-line="line.left" @@ -93,6 +109,8 @@ export default { <diff-discussions v-if="line.right.discussions.length" :discussions="line.right.discussions" + :line="line.right" + :help-page-path="helpPagePath" /> </div> <diff-line-note-form diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue index 248dfd9815e..caf0df8a4e3 100644 --- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue +++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue @@ -1,5 +1,5 @@ <script> -import { mapActions } from 'vuex'; +import { mapActions, mapState } from 'vuex'; import $ from 'jquery'; import DiffTableCell from './diff_table_cell.vue'; import { @@ -43,6 +43,15 @@ export default { }; }, computed: { + ...mapState({ + isHighlighted(state) { + const lineCode = + (this.line.left && this.line.left.line_code) || + (this.line.right && this.line.right.line_code); + + return lineCode ? lineCode === state.diffs.highlightedRow : false; + }, + }), isContextLine() { return this.line.left && this.line.left.type === CONTEXT_LINE_TYPE; }, @@ -57,7 +66,14 @@ export default { return OLD_NO_NEW_LINE_TYPE; } - return this.line.left ? this.line.left.type : EMPTY_CELL_TYPE; + const lineTypeClass = this.line.left ? this.line.left.type : EMPTY_CELL_TYPE; + + return [ + lineTypeClass, + { + hll: this.isHighlighted, + }, + ]; }, }, created() { @@ -114,6 +130,7 @@ export default { :line-type="oldLineType" :is-bottom="isBottom" :is-hover="isLeftHover" + :is-highlighted="isHighlighted" :show-comment-button="true" :diff-view-type="parallelDiffViewType" line-position="left" @@ -139,6 +156,7 @@ export default { :line-type="newLineType" :is-bottom="isBottom" :is-hover="isRightHover" + :is-highlighted="isHighlighted" :show-comment-button="true" :diff-view-type="parallelDiffViewType" line-position="right" @@ -146,7 +164,12 @@ export default { /> <td :id="line.right.line_code" - :class="line.right.type" + :class="[ + line.right.type, + { + hll: isHighlighted, + }, + ]" class="line_content parallel right-side" @mousedown.native="handleParallelLineMouseDown" v-html="line.right.rich_text" diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue index 771b8a80352..1bf693380db 100644 --- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue +++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue @@ -1,5 +1,5 @@ <script> -import { mapState, mapGetters } from 'vuex'; +import { mapGetters } from 'vuex'; import parallelDiffTableRow from './parallel_diff_table_row.vue'; import parallelDiffCommentRow from './parallel_diff_comment_row.vue'; @@ -17,25 +17,25 @@ export default { type: Array, required: true, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, computed: { - ...mapGetters('diffs', ['commitId', 'shouldRenderParallelCommentRow']), - ...mapState({ - diffLineCommentForms: state => state.diffs.diffLineCommentForms, - }), + ...mapGetters('diffs', ['commitId']), diffLinesLength() { return this.diffLines.length; }, - userColorScheme() { - return window.gon.user_color_scheme; - }, }, + userColorScheme: window.gon.user_color_scheme, }; </script> <template> <div - :class="userColorScheme" + :class="$options.userColorScheme" :data-commit-id="commitId" class="code diff-wrap-lines js-syntax-highlight text-file" > @@ -43,18 +43,18 @@ export default { <tbody> <template v-for="(line, index) in diffLines"> <parallel-diff-table-row - :key="index" + :key="line.line_code" :file-hash="diffFile.file_hash" :context-lines-path="diffFile.context_lines_path" :line="line" :is-bottom="index + 1 === diffLinesLength" /> <parallel-diff-comment-row - v-if="shouldRenderParallelCommentRow(line)" - :key="`dcr-${index}`" + :key="`dcr-${line.line_code || index}`" :line="line" :diff-file-hash="diffFile.file_hash" :line-index="index" + :help-page-path="helpPagePath" /> </template> </tbody> diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js index 06ef4207d85..b130cedc24c 100644 --- a/app/assets/javascripts/diffs/index.js +++ b/app/assets/javascripts/diffs/index.js @@ -16,7 +16,9 @@ export default function initDiffsApp(store) { return { endpoint: dataset.endpoint, projectPath: dataset.projectPath, + helpPagePath: dataset.helpPagePath, currentUser: JSON.parse(dataset.currentUserData) || {}, + changesEmptyStateIllustration: dataset.changesEmptyStateIllustration, }; }, computed: { @@ -30,7 +32,9 @@ export default function initDiffsApp(store) { endpoint: this.endpoint, currentUser: this.currentUser, projectPath: this.projectPath, + helpPagePath: this.helpPagePath, shouldShow: this.activeTab === 'diffs', + changesEmptyStateIllustration: this.changesEmptyStateIllustration, }, }); }, diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index a3de058b20e..00a4bb6d3a3 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/app/assets/javascripts/diffs/store/actions.js @@ -3,8 +3,9 @@ import axios from '~/lib/utils/axios_utils'; import Cookies from 'js-cookie'; import createFlash from '~/flash'; import { s__ } from '~/locale'; -import { handleLocationHash, historyPushState } from '~/lib/utils/common_utils'; +import { handleLocationHash, historyPushState, scrollToElement } from '~/lib/utils/common_utils'; import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility'; +import eventHub from '../../notes/event_hub'; import { getDiffPositionByLineCode, getNoteFormData } from './utils'; import * as types from './mutation_types'; import { @@ -33,6 +34,10 @@ export const fetchDiffFiles = ({ state, commit }) => { .then(handleLocationHash); }; +export const setHighlightedRow = ({ commit }, lineCode) => { + commit(types.SET_HIGHLIGHTED_ROW, lineCode); +}; + // This is adding line discussions to the actual lines in the diff tree // once for parallel and once for inline mode export const assignDiscussionsToDiff = ( @@ -49,6 +54,10 @@ export const assignDiscussionsToDiff = ( diffPositionByLineCode, }); }); + + Vue.nextTick(() => { + eventHub.$emit('scrollToDiscussion'); + }); }; export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => { @@ -56,6 +65,27 @@ export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => { commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash: file_hash, lineCode: line_code, id }); }; +export const renderFileForDiscussionId = ({ commit, rootState, state }, discussionId) => { + const discussion = rootState.notes.discussions.find(d => d.id === discussionId); + + if (discussion) { + const file = state.diffFiles.find(f => f.file_hash === discussion.diff_file.file_hash); + + if (file) { + if (!file.renderIt) { + commit(types.RENDER_FILE, file); + } + + if (file.collapsed) { + eventHub.$emit(`loadCollapsedDiff/${file.file_hash}`); + scrollToElement(document.getElementById(file.file_hash)); + } else { + eventHub.$emit('scrollToDiscussion'); + } + } + } +}; + export const startRenderDiffsQueue = ({ state, commit }) => { const checkItem = () => new Promise(resolve => { @@ -99,12 +129,12 @@ export const setParallelDiffViewType = ({ commit }) => { historyPushState(url); }; -export const showCommentForm = ({ commit }, params) => { - commit(types.ADD_COMMENT_FORM_LINE, params); +export const showCommentForm = ({ commit }, { lineCode, fileHash }) => { + commit(types.TOGGLE_LINE_HAS_FORM, { lineCode, fileHash, hasForm: true }); }; -export const cancelCommentForm = ({ commit }, params) => { - commit(types.REMOVE_COMMENT_FORM_LINE, params); +export const cancelCommentForm = ({ commit }, { lineCode, fileHash }) => { + commit(types.TOGGLE_LINE_HAS_FORM, { lineCode, fileHash, hasForm: false }); }; export const loadMoreLines = ({ commit }, options) => { @@ -127,7 +157,7 @@ export const loadMoreLines = ({ commit }, options) => { export const scrollToLineIfNeededInline = (_, line) => { const hash = getLocationHash(); - if (hash && line.lineCode === hash) { + if (hash && line.line_code === hash) { handleLocationHash(); } }; @@ -137,19 +167,25 @@ export const scrollToLineIfNeededParallel = (_, line) => { if ( hash && - ((line.left && line.left.lineCode === hash) || (line.right && line.right.lineCode === hash)) + ((line.left && line.left.line_code === hash) || (line.right && line.right.line_code === hash)) ) { handleLocationHash(); } }; -export const loadCollapsedDiff = ({ commit }, file) => - axios.get(file.loadCollapsedDiffUrl).then(res => { - commit(types.ADD_COLLAPSED_DIFFS, { - file, - data: res.data, +export const loadCollapsedDiff = ({ commit, getters }, file) => + axios + .get(file.load_collapsed_diff_url, { + params: { + commit_id: getters.commitId, + }, + }) + .then(res => { + commit(types.ADD_COLLAPSED_DIFFS, { + file, + data: res.data, + }); }); - }); export const expandAllFiles = ({ commit }) => { commit(types.EXPAND_ALL_FILES); @@ -182,8 +218,9 @@ export const toggleFileDiscussions = ({ getters, dispatch }, diff) => { }); }; -export const saveDiffDiscussion = ({ dispatch }, { note, formData }) => { +export const saveDiffDiscussion = ({ state, dispatch }, { note, formData }) => { const postData = getNoteFormData({ + commit: state.commit, note, ...formData, }); @@ -191,8 +228,8 @@ export const saveDiffDiscussion = ({ dispatch }, { note, formData }) => { return dispatch('saveNote', postData, { root: true }) .then(result => dispatch('updateDiscussion', result.discussion, { root: true })) .then(discussion => dispatch('assignDiscussionsToDiff', [discussion])) + .then(() => dispatch('updateResolvableDiscussonsCounts', null, { root: true })) .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash)) - .then(() => dispatch('startTaskList', null, { root: true })) .catch(() => createFlash(s__('MergeRequests|Saving the comment failed'))); }; diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js index 6a87b712b48..fdf1efbb10e 100644 --- a/app/assets/javascripts/diffs/store/getters.js +++ b/app/assets/javascripts/diffs/store/getters.js @@ -70,40 +70,6 @@ export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) = discussion => discussion.diff_discussion && discussion.diff_file.file_hash === diff.file_hash, ) || []; -export const shouldRenderParallelCommentRow = state => line => { - const hasDiscussion = - (line.left && line.left.discussions && line.left.discussions.length) || - (line.right && line.right.discussions && line.right.discussions.length); - - const hasExpandedDiscussionOnLeft = - line.left && line.left.discussions && line.left.discussions.length - ? line.left.discussions.every(discussion => discussion.expanded) - : false; - const hasExpandedDiscussionOnRight = - line.right && line.right.discussions && line.right.discussions.length - ? line.right.discussions.every(discussion => discussion.expanded) - : false; - - if (hasDiscussion && (hasExpandedDiscussionOnLeft || hasExpandedDiscussionOnRight)) { - return true; - } - - const hasCommentFormOnLeft = line.left && state.diffLineCommentForms[line.left.line_code]; - const hasCommentFormOnRight = line.right && state.diffLineCommentForms[line.right.line_code]; - - return hasCommentFormOnLeft || hasCommentFormOnRight; -}; - -export const shouldRenderInlineCommentRow = state => line => { - if (state.diffLineCommentForms[line.line_code]) return true; - - if (!line.discussions || line.discussions.length === 0) { - return false; - } - - return line.discussions.every(discussion => discussion.expanded); -}; - // prevent babel-plugin-rewire from generating an invalid default during karma∂ tests export const getDiffFileByHash = state => fileHash => state.diffFiles.find(file => file.file_hash === fileHash); diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js index 2f59a3822f4..98e57d52d77 100644 --- a/app/assets/javascripts/diffs/store/modules/diff_state.js +++ b/app/assets/javascripts/diffs/store/modules/diff_state.js @@ -18,7 +18,6 @@ export default () => ({ diffFiles: [], mergeRequestDiffs: [], mergeRequestDiff: null, - diffLineCommentForms: {}, diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType, tree: [], treeEntries: {}, @@ -27,4 +26,5 @@ export default () => ({ currentDiffFileId: '', projectPath: '', commentForms: [], + highlightedRow: null, }); diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js index e011031e72c..0338cde3658 100644 --- a/app/assets/javascripts/diffs/store/mutation_types.js +++ b/app/assets/javascripts/diffs/store/mutation_types.js @@ -3,8 +3,7 @@ export const SET_LOADING = 'SET_LOADING'; export const SET_DIFF_DATA = 'SET_DIFF_DATA'; export const SET_DIFF_VIEW_TYPE = 'SET_DIFF_VIEW_TYPE'; export const SET_MERGE_REQUEST_DIFFS = 'SET_MERGE_REQUEST_DIFFS'; -export const ADD_COMMENT_FORM_LINE = 'ADD_COMMENT_FORM_LINE'; -export const REMOVE_COMMENT_FORM_LINE = 'REMOVE_COMMENT_FORM_LINE'; +export const TOGGLE_LINE_HAS_FORM = 'TOGGLE_LINE_HAS_FORM'; export const ADD_CONTEXT_LINES = 'ADD_CONTEXT_LINES'; export const ADD_COLLAPSED_DIFFS = 'ADD_COLLAPSED_DIFFS'; export const EXPAND_ALL_FILES = 'EXPAND_ALL_FILES'; @@ -18,3 +17,4 @@ export const UPDATE_CURRENT_DIFF_FILE_ID = 'UPDATE_CURRENT_DIFF_FILE_ID'; export const OPEN_DIFF_FILE_COMMENT_FORM = 'OPEN_DIFF_FILE_COMMENT_FORM'; export const UPDATE_DIFF_FILE_COMMENT_FORM = 'UPDATE_DIFF_FILE_COMMENT_FORM'; export const CLOSE_DIFF_FILE_COMMENT_FORM = 'CLOSE_DIFF_FILE_COMMENT_FORM'; +export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW'; diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js index 2133cfe4825..ed4203cf5e0 100644 --- a/app/assets/javascripts/diffs/store/mutations.js +++ b/app/assets/javascripts/diffs/store/mutations.js @@ -1,4 +1,3 @@ -import Vue from 'vue'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { sortTree } from '~/ide/stores/utils'; import { @@ -49,12 +48,30 @@ export default { Object.assign(state, { diffViewType }); }, - [types.ADD_COMMENT_FORM_LINE](state, { lineCode }) { - Vue.set(state.diffLineCommentForms, lineCode, true); - }, + [types.TOGGLE_LINE_HAS_FORM](state, { lineCode, fileHash, hasForm }) { + const diffFile = state.diffFiles.find(f => f.file_hash === fileHash); + + if (!diffFile) return; + + if (diffFile.highlighted_diff_lines) { + diffFile.highlighted_diff_lines.find(l => l.line_code === lineCode).hasForm = hasForm; + } + + if (diffFile.parallel_diff_lines) { + const line = diffFile.parallel_diff_lines.find(l => { + const { left, right } = l; - [types.REMOVE_COMMENT_FORM_LINE](state, { lineCode }) { - Vue.delete(state.diffLineCommentForms, lineCode); + return (left && left.line_code === lineCode) || (right && right.line_code === lineCode); + }); + + if (line.left && line.left.line_code === lineCode) { + line.left.hasForm = hasForm; + } + + if (line.right && line.right.line_code === lineCode) { + line.right.hasForm = hasForm; + } + } }, [types.ADD_CONTEXT_LINES](state, options) { @@ -68,6 +85,7 @@ export default { ...line, line_code: line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`, discussions: line.discussions || [], + hasForm: false, })); addContextLines({ @@ -105,22 +123,23 @@ export default { diffPosition: diffPositionByLineCode[line.line_code], latestDiff, }); + const mapDiscussions = (line, extraCheck = () => true) => ({ + ...line, + discussions: extraCheck() + ? line.discussions + .filter(() => !line.discussions.some(({ id }) => discussion.id === id)) + .concat(lineCheck(line) ? discussion : line.discussions) + : [], + }); state.diffFiles = state.diffFiles.map(diffFile => { if (diffFile.file_hash === fileHash) { const file = { ...diffFile }; if (file.highlighted_diff_lines) { - file.highlighted_diff_lines = file.highlighted_diff_lines.map(line => { - if (lineCheck(line)) { - return { - ...line, - discussions: line.discussions.concat(discussion), - }; - } - - return line; - }); + file.highlighted_diff_lines = file.highlighted_diff_lines.map(line => + lineCheck(line) ? mapDiscussions(line) : line, + ); } if (file.parallel_diff_lines) { @@ -130,14 +149,8 @@ export default { if (left || right) { return { - left: { - ...line.left, - discussions: left ? line.left.discussions.concat(discussion) : [], - }, - right: { - ...line.right, - discussions: right && !left ? line.right.discussions.concat(discussion) : [], - }, + left: line.left ? mapDiscussions(line.left) : null, + right: line.right ? mapDiscussions(line.right, () => !left) : null, }; } @@ -146,7 +159,7 @@ export default { } if (!file.parallel_diff_lines || !file.highlighted_diff_lines) { - file.discussions = file.discussions.concat(discussion); + file.discussions = (file.discussions || []).concat(discussion); } return file; @@ -156,7 +169,7 @@ export default { }); }, - [types.REMOVE_LINE_DISCUSSIONS_FOR_FILE](state, { fileHash, lineCode, id }) { + [types.REMOVE_LINE_DISCUSSIONS_FOR_FILE](state, { fileHash, lineCode }) { const selectedFile = state.diffFiles.find(f => f.file_hash === fileHash); if (selectedFile) { if (selectedFile.parallel_diff_lines) { @@ -169,7 +182,7 @@ export default { const side = targetLine.left && targetLine.left.line_code === lineCode ? 'left' : 'right'; Object.assign(targetLine[side], { - discussions: [], + discussions: targetLine[side].discussions.filter(discussion => discussion.notes.length), }); } } @@ -181,14 +194,14 @@ export default { if (targetInlineLine) { Object.assign(targetInlineLine, { - discussions: [], + discussions: targetInlineLine.discussions.filter(discussion => discussion.notes.length), }); } } if (selectedFile.discussions && selectedFile.discussions.length) { selectedFile.discussions = selectedFile.discussions.filter( - discussion => discussion.id !== id, + discussion => discussion.notes.length, ); } } @@ -223,4 +236,7 @@ export default { [types.CLOSE_DIFF_FILE_COMMENT_FORM](state, fileHash) { state.commentForms = state.commentForms.filter(form => form.fileHash !== fileHash); }, + [types.SET_HIGHLIGHTED_ROW](state, lineCode) { + state.highlightedRow = lineCode; + }, }; diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js index d9d3c0f2ca2..2fe20551642 100644 --- a/app/assets/javascripts/diffs/store/utils.js +++ b/app/assets/javascripts/diffs/store/utils.js @@ -27,6 +27,7 @@ export const getReversePosition = linePosition => { export function getFormData(params) { const { + commit, note, noteableType, noteableData, @@ -66,7 +67,7 @@ export function getFormData(params) { position, noteable_type: noteableType, noteable_id: noteableData.id, - commit_id: '', + commit_id: commit && commit.id, type: diffFile.diff_refs.start_sha && diffFile.diff_refs.head_sha ? DIFF_NOTE_TYPE @@ -195,6 +196,15 @@ export function trimFirstCharOfLineContent(line = {}) { return parsedLine; } +function getLineCode({ left, right }, index) { + if (left && left.line_code) { + return left.line_code; + } else if (right && right.line_code) { + return right.line_code; + } + return index; +} + // This prepares and optimizes the incoming diff data from the server // by setting up incremental rendering and removing unneeded data export function prepareDiffData(diffData) { @@ -207,11 +217,15 @@ export function prepareDiffData(diffData) { const linesLength = file.parallel_diff_lines.length; for (let u = 0; u < linesLength; u += 1) { const line = file.parallel_diff_lines[u]; + + line.line_code = getLineCode(line, u); if (line.left) { line.left = trimFirstCharOfLineContent(line.left); + line.left.hasForm = false; } if (line.right) { line.right = trimFirstCharOfLineContent(line.right); + line.right.hasForm = false; } } } @@ -220,7 +234,7 @@ export function prepareDiffData(diffData) { const linesLength = file.highlighted_diff_lines.length; for (let u = 0; u < linesLength; u += 1) { const line = file.highlighted_diff_lines[u]; - Object.assign(line, { ...trimFirstCharOfLineContent(line) }); + Object.assign(line, { ...trimFirstCharOfLineContent(line), hasForm: false }); } showingLines += file.parallel_diff_lines.length; } @@ -322,5 +336,9 @@ export const generateTreeList = files => export const getDiffMode = diffFile => { const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}_file`]); - return diffModes[diffModeKey] || diffModes.replaced; + return ( + diffModes[diffModeKey] || + (diffFile.mode_changed && diffModes.mode_changed) || + diffModes.replaced + ); }; diff --git a/app/assets/javascripts/dismissable_callout.js b/app/assets/javascripts/dismissable_callout.js new file mode 100644 index 00000000000..5185b019376 --- /dev/null +++ b/app/assets/javascripts/dismissable_callout.js @@ -0,0 +1,27 @@ +import $ from 'jquery'; +import axios from '~/lib/utils/axios_utils'; +import { __ } from '~/locale'; +import Flash from '~/flash'; + +export default function initDismissableCallout(alertSelector) { + const alertEl = document.querySelector(alertSelector); + if (!alertEl) { + return; + } + + const closeButtonEl = alertEl.getElementsByClassName('close')[0]; + const { dismissEndpoint, featureId } = closeButtonEl.dataset; + + closeButtonEl.addEventListener('click', () => { + axios + .post(dismissEndpoint, { + feature_name: featureId, + }) + .then(() => { + $(alertEl).alert('close'); + }) + .catch(() => { + Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.')); + }); + }); +} diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index cd2f46fd07a..f44806d82a6 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -14,6 +14,7 @@ import MonitoringButtonComponent from './environment_monitoring.vue'; import CommitComponent from '../../vue_shared/components/commit.vue'; import eventHub from '../event_hub'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { CLUSTER_TYPE } from '~/clusters/constants'; /** * Environment Item Component @@ -85,6 +86,15 @@ export default { }, /** + * Hide group cluster features which are not currently implemented. + * + * @returns {Boolean} + */ + disableGroupClusterFeatures() { + return this.model && this.model.cluster_type === CLUSTER_TYPE.GROUP; + }, + + /** * Returns whether the environment can be stopped. * * @returns {Boolean} @@ -547,6 +557,7 @@ export default { <terminal-button-component v-if="model && model.terminal_path" :terminal-path="model.terminal_path" + :disabled="disableGroupClusterFeatures" /> <rollback-component diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 83727caad16..6d74d136a94 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -19,6 +19,11 @@ export default { required: false, default: '', }, + disabled: { + type: Boolean, + required: false, + default: false, + }, }, computed: { title() { @@ -33,6 +38,7 @@ export default { :title="title" :aria-label="title" :href="terminalPath" + :class="{ disabled: disabled }" class="btn terminal-button d-none d-sm-none d-md-block" > <icon name="terminal" /> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index 5164d87c5fa..533e90e2222 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -70,7 +70,7 @@ export default { <template v-if="shouldRenderFolderContent(model)"> <div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`"> - <gl-loading-icon :size="2" /> + <gl-loading-icon :size="2" class="prepend-top-16" /> </div> <template v-else> diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js index 1b79a3320c6..8d92af2cf7e 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js @@ -54,67 +54,6 @@ export default class DropdownUtils { return updatedItem; } - static mergeDuplicateLabels(dataMap, newLabel) { - const updatedMap = dataMap; - const key = newLabel.title; - - const hasKeyProperty = Object.prototype.hasOwnProperty.call(updatedMap, key); - - if (!hasKeyProperty) { - updatedMap[key] = newLabel; - } else { - const existing = updatedMap[key]; - - if (!existing.multipleColors) { - existing.multipleColors = [existing.color]; - } - - existing.multipleColors.push(newLabel.color); - } - - return updatedMap; - } - - static duplicateLabelColor(labelColors) { - const colors = labelColors; - const spacing = 100 / colors.length; - - // Reduce the colors to 4 - colors.length = Math.min(colors.length, 4); - - const color = colors - .map((c, i) => { - const percentFirst = Math.floor(spacing * i); - const percentSecond = Math.floor(spacing * (i + 1)); - return `${c} ${percentFirst}%, ${c} ${percentSecond}%`; - }) - .join(', '); - - return `linear-gradient(${color})`; - } - - static duplicateLabelPreprocessing(data) { - const results = []; - const dataMap = {}; - - data.forEach(DropdownUtils.mergeDuplicateLabels.bind(null, dataMap)); - - Object.keys(dataMap).forEach(key => { - const label = dataMap[key]; - - if (label.multipleColors) { - label.color = DropdownUtils.duplicateLabelColor(label.multipleColors); - label.text_color = '#000000'; - } - - results.push(label); - }); - - results.preprocessed = true; - - return results; - } - static filterHint(config, item) { const { input, allowedKeys } = config; const updatedItem = item; diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js index 89dcff74d0e..fba31f16d65 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js +++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js @@ -79,11 +79,7 @@ export default class FilteredSearchVisualTokens { static setTokenStyle(tokenContainer, backgroundColor, textColor) { const token = tokenContainer; - // Labels with linear gradient should not override default background color - if (backgroundColor.indexOf('linear-gradient') === -1) { - token.style.backgroundColor = backgroundColor; - } - + token.style.backgroundColor = backgroundColor; token.style.color = textColor; if (textColor === '#FFFFFF') { @@ -94,18 +90,6 @@ export default class FilteredSearchVisualTokens { return token; } - static preprocessLabel(labelsEndpoint, labels) { - let processed = labels; - - if (!labels.preprocessed) { - processed = DropdownUtils.duplicateLabelPreprocessing(labels); - AjaxCache.override(labelsEndpoint, processed); - processed.preprocessed = true; - } - - return processed; - } - static updateLabelTokenColor(tokenValueContainer, tokenValue) { const filteredSearchInput = FilteredSearchContainer.container.querySelector('.filtered-search'); const { baseEndpoint } = filteredSearchInput.dataset; @@ -115,7 +99,6 @@ export default class FilteredSearchVisualTokens { ); return AjaxCache.retrieve(labelsEndpoint) - .then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint)) .then(labels => { const matchingLabel = (labels || []).find( label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue, diff --git a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js index bb0ecb8efe7..b494b7e2de0 100644 --- a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js +++ b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js @@ -88,11 +88,16 @@ export const conditions = [ value: 'started', }, { - url: 'label_name[]=No+Label', + url: 'label_name[]=None', tokenKey: 'label', value: 'none', }, { + url: 'label_name[]=Any', + tokenKey: 'any', + value: 'any', + }, + { url: 'my_reaction_emoji=None', tokenKey: 'my-reaction', value: 'none', diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js index b4a3037c1b7..2049760fe29 100644 --- a/app/assets/javascripts/groups_select.js +++ b/app/assets/javascripts/groups_select.js @@ -10,13 +10,18 @@ export default function groupsSelect() { const $select = $(this); const allAvailable = $select.data('allAvailable'); const skipGroups = $select.data('skipGroups') || []; + const parentGroupID = $select.data('parentId'); + const groupsPath = parentGroupID + ? Api.subgroupsPath.replace(':id', parentGroupID) + : Api.groupsPath; + $select.select2({ placeholder: 'Search for a group', allowClear: $select.hasClass('allowClear'), multiple: $select.hasClass('multiselect'), minimumInputLength: 0, ajax: { - url: Api.buildUrl(Api.groupsPath), + url: Api.buildUrl(groupsPath), dataType: 'json', quietMillis: 250, transport(params) { diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index e318367a5ec..7a57ccf2dd3 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -105,7 +105,7 @@ export default { :key="tabView.name" class="h-100" > - <component :is="tabView.name" /> + <component :is="tabView.component || tabView.name" /> </div> </resizable-panel> <nav class="ide-activity-bar"> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 3b201f006aa..09245ed0296 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -26,6 +26,7 @@ export const diffModes = { new: 'new', deleted: 'deleted', renamed: 'renamed', + mode_changed: 'mode_changed', }; export const rightSidebarViews = { diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index fbf944499d5..6351948f750 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import { mapActions } from 'vuex'; +import _ from 'underscore'; import Translate from '~/vue_shared/translate'; import ide from './components/ide.vue'; import store from './stores'; @@ -13,19 +14,19 @@ Vue.use(Translate); * * @param {Element} el - The element that will contain the IDE. * @param {Object} options - Extra options for the IDE (Used by EE). - * @param {(e:Element) => Object} options.extraInitialData - - * Function that returns extra properties to seed initial data. * @param {Component} options.rootComponent - * Component that overrides the root component. + * @param {(store:Vuex.Store, el:Element) => Vuex.Store} options.extendStore - + * Function that receives the default store and returns an extended one. */ export function initIde(el, options = {}) { if (!el) return null; - const { extraInitialData = () => ({}), rootComponent = ide } = options; + const { rootComponent = ide, extendStore = _.identity } = options; return new Vue({ el, - store, + store: extendStore(store, el), router, created() { this.setEmptyStateSvgs({ @@ -41,7 +42,6 @@ export function initIde(el, options = {}) { }); this.setInitialData({ clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled), - ...extraInitialData(el), }); }, methods: { diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js index f0193d8e8ea..13449592e62 100644 --- a/app/assets/javascripts/ide/services/index.js +++ b/app/assets/javascripts/ide/services/index.js @@ -41,13 +41,13 @@ export default { return Api.project(`${namespace}/${project}`); }, getProjectMergeRequestData(projectId, mergeRequestId, params = {}) { - return Api.mergeRequest(projectId, mergeRequestId, params); + return Api.projectMergeRequest(projectId, mergeRequestId, params); }, getProjectMergeRequestChanges(projectId, mergeRequestId) { - return Api.mergeRequestChanges(projectId, mergeRequestId); + return Api.projectMergeRequestChanges(projectId, mergeRequestId); }, getProjectMergeRequestVersions(projectId, mergeRequestId) { - return Api.mergeRequestVersions(projectId, mergeRequestId); + return Api.projectMergeRequestVersions(projectId, mergeRequestId); }, getBranchData(projectId, currentBranchId) { return Api.branchSingle(projectId, currentBranchId); diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js index 4565c11a83f..8b5f7558654 100644 --- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js +++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js @@ -23,13 +23,19 @@ export const receiveMergeRequestsError = ({ commit, dispatch }, { type, search } export const receiveMergeRequestsSuccess = ({ commit }, data) => commit(types.RECEIVE_MERGE_REQUESTS_SUCCESS, data); -export const fetchMergeRequests = ({ dispatch, state: { state } }, { type, search = '' }) => { +export const fetchMergeRequests = ( + { dispatch, state: { state }, rootState: { currentProjectId } }, + { type, search = '' }, +) => { dispatch('requestMergeRequests'); dispatch('resetMergeRequests'); - const scope = type ? scopes[type] : 'all'; + const scope = type && scopes[type]; + const request = scope + ? Api.mergeRequests({ scope, state, search }) + : Api.projectMergeRequest(currentProjectId, '', { state, search }); - return Api.mergeRequests({ scope, state, search }) + return request .then(({ data }) => dispatch('receiveMergeRequestsSuccess', data)) .catch(() => dispatch('receiveMergeRequestsError', { type, search })); }; diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js index eddaeda9578..000157efad0 100644 --- a/app/assets/javascripts/image_diff/helpers/badge_helper.js +++ b/app/assets/javascripts/image_diff/helpers/badge_helper.js @@ -12,7 +12,7 @@ export function createImageBadge(noteId, { x, y }, classNames = []) { } export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) { - const buttonEl = createImageBadge(noteId, coordinate, ['badge']); + const buttonEl = createImageBadge(noteId, coordinate, ['badge', 'badge-pill']); buttonEl.innerText = badgeText; containerEl.appendChild(buttonEl); diff --git a/app/assets/javascripts/issuable_suggestions/components/app.vue b/app/assets/javascripts/issuable_suggestions/components/app.vue index eea0701312b..575c860851c 100644 --- a/app/assets/javascripts/issuable_suggestions/components/app.vue +++ b/app/assets/javascripts/issuable_suggestions/components/app.vue @@ -27,7 +27,7 @@ export default { apollo: { issues: { query, - debounce: 250, + debounce: 1000, skip() { return this.isSearchEmpty; }, diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue index 309b7427b9e..0bce860df91 100644 --- a/app/assets/javascripts/jobs/components/artifacts_block.vue +++ b/app/assets/javascripts/jobs/components/artifacts_block.vue @@ -28,27 +28,29 @@ export default { </script> <template> <div class="block"> - <div class="title">{{ s__('Job|Job artifacts') }}</div> + <div class="title font-weight-bold">{{ s__('Job|Job artifacts') }}</div> - <p v-if="isExpired" class="js-artifacts-removed build-detail-row"> - {{ s__('Job|The artifacts were removed') }} + <p + v-if="isExpired || willExpire" + :class="{ + 'js-artifacts-removed': isExpired, + 'js-artifacts-will-be-removed': willExpire, + }" + class="build-detail-row" + > + <span v-if="isExpired">{{ s__('Job|The artifacts were removed') }}</span> + <span v-if="willExpire">{{ s__('Job|The artifacts will be removed') }}</span> + <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" /> </p> - <p v-else-if="willExpire" class="js-artifacts-will-be-removed build-detail-row"> - {{ s__('Job|The artifacts will be removed in') }} - </p> - - <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" /> - - <div class="btn-group d-flex" role="group"> + <div class="btn-group d-flex prepend-top-10" role="group"> <gl-link v-if="artifact.keep_path" :href="artifact.keep_path" class="js-keep-artifacts btn btn-sm btn-default" data-method="post" + >{{ s__('Job|Keep') }}</gl-link > - {{ s__('Job|Keep') }} - </gl-link> <gl-link v-if="artifact.download_path" @@ -56,17 +58,15 @@ export default { class="js-download-artifacts btn btn-sm btn-default" download rel="nofollow" + >{{ s__('Job|Download') }}</gl-link > - {{ s__('Job|Download') }} - </gl-link> <gl-link v-if="artifact.browse_path" :href="artifact.browse_path" class="js-browse-artifacts btn btn-sm btn-default" + >{{ s__('Job|Browse') }}</gl-link > - {{ s__('Job|Browse') }} - </gl-link> </div> </div> </template> diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue index 3b9c61bd48c..e0f55518eef 100644 --- a/app/assets/javascripts/jobs/components/commit_block.vue +++ b/app/assets/javascripts/jobs/components/commit_block.vue @@ -31,12 +31,12 @@ export default { block: !isLastBlock, }" > - <p> - {{ __('Commit') }} + <p class="append-bottom-5"> + <span class="font-weight-bold">{{ __('Commit') }}</span> - <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">{{ - commit.short_id - }}</gl-link> + <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit"> + {{ commit.short_id }} + </gl-link> <clipboard-button :text="commit.short_id" @@ -44,11 +44,14 @@ export default { css-class="btn btn-clipboard btn-transparent" /> - <gl-link v-if="mergeRequest" :href="mergeRequest.path" class="js-link-commit link-commit" - >!{{ mergeRequest.iid }}</gl-link - > + <span v-if="mergeRequest"> + {{ __('in') }} + <gl-link :href="mergeRequest.path" class="js-link-commit link-commit" + >!{{ mergeRequest.iid }}</gl-link + > + </span> </p> - <p class="build-light-text append-bottom-0">{{ commit.title }}</p> + <p class="append-bottom-0">{{ commit.title }}</p> </div> </template> diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue index 2d09cf5760f..f7fbb9503a0 100644 --- a/app/assets/javascripts/jobs/components/environments_block.vue +++ b/app/assets/javascripts/jobs/components/environments_block.vue @@ -128,7 +128,7 @@ export default { }; </script> <template> - <div class="prepend-top-default js-environment-container"> + <div class="prepend-top-default append-bottom-default js-environment-container"> <div class="environment-information"> <ci-icon :status="iconStatus" /> <p class="inline append-bottom-0" v-html="environment"></p> diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue index 934ecd0e3ec..ad3e7dabc79 100644 --- a/app/assets/javascripts/jobs/components/sidebar.vue +++ b/app/assets/javascripts/jobs/components/sidebar.vue @@ -110,22 +110,20 @@ export default { <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix"> <div class="sidebar-container"> <div class="blocks-container"> - <div class="block"> - <strong class="inline prepend-top-8"> {{ job.name }} </strong> + <div class="block d-flex align-items-center"> + <h4 class="flex-grow-1 prepend-top-8 m-0">{{ job.name }}</h4> <gl-link v-if="job.retry_path" :class="retryButtonClass" :href="job.retry_path" data-method="post" rel="nofollow" + >{{ __('Retry') }}</gl-link > - {{ __('Retry') }} - </gl-link> <gl-link v-if="job.terminal_path" :href="job.terminal_path" - class="js-terminal-link pull-right btn btn-primary - btn-inverted visible-md-block visible-lg-block" + class="js-terminal-link pull-right btn btn-primary btn-inverted visible-md-block visible-lg-block" target="_blank" > {{ __('Debug') }} <icon name="external-link" /> @@ -133,8 +131,7 @@ export default { <gl-button :aria-label="__('Toggle Sidebar')" type="button" - class="btn btn-blank gutter-toggle - float-right d-block d-md-none js-sidebar-build-toggle" + class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle" @click="toggleSidebar" > <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i> @@ -145,25 +142,18 @@ export default { v-if="job.new_issue_path" :href="job.new_issue_path" class="js-new-issue btn btn-success btn-inverted" + >{{ __('New issue') }}</gl-link > - {{ __('New issue') }} - </gl-link> <gl-link v-if="job.retry_path" :href="job.retry_path" class="js-retry-job btn btn-inverted-secondary" data-method="post" rel="nofollow" + >{{ __('Retry') }}</gl-link > - {{ __('Retry') }} - </gl-link> </div> <div :class="{ block: renderBlock }"> - <p v-if="job.merge_request" class="build-detail-row js-job-mr"> - <span class="build-light-text"> {{ __('Merge Request:') }} </span> - <gl-link :href="job.merge_request.path"> !{{ job.merge_request.iid }} </gl-link> - </p> - <detail-row v-if="job.duration" :value="duration" @@ -198,10 +188,10 @@ export default { title="Coverage" /> <p v-if="job.tags.length" class="build-detail-row js-job-tags"> - <span class="build-light-text"> {{ __('Tags:') }} </span> - <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary"> - {{ tag }} - </span> + <span class="font-weight-bold">{{ __('Tags:') }}</span> + <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary mr-1">{{ + tag + }}</span> </p> <div v-if="job.cancel_path" class="btn-group prepend-top-5" role="group"> @@ -210,9 +200,8 @@ export default { class="js-cancel-job btn btn-sm btn-default" data-method="post" rel="nofollow" + >{{ __('Cancel') }}</gl-link > - {{ __('Cancel') }} - </gl-link> </div> </div> diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue index 77be295e802..b826007ec2c 100644 --- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue +++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue @@ -34,8 +34,7 @@ export default { </script> <template> <p class="build-detail-row"> - <span v-if="hasTitle" class="build-light-text"> {{ title }}: </span> {{ value }} - + <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }} <span v-if="hasHelpURL" class="help-button float-right"> <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow"> <i class="fa fa-question-circle" aria-hidden="true"></i> diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue index 90482500bbf..7f79e92067f 100644 --- a/app/assets/javascripts/jobs/components/stages_dropdown.vue +++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue @@ -38,11 +38,11 @@ export default { <div class="block-last dropdown"> <ci-icon :status="pipeline.details.status" class="vertical-align-middle" /> - {{ __('Pipeline') }} - <a :href="pipeline.path" class="js-pipeline-path link-commit"> #{{ pipeline.id }} </a> + <span class="font-weight-bold">{{ __('Pipeline') }}</span> + <a :href="pipeline.path" class="js-pipeline-path link-commit">#{{ pipeline.id }}</a> <template v-if="hasRef"> {{ __('from') }} - <a :href="pipeline.ref.path" class="link-commit ref-name"> {{ pipeline.ref.name }} </a> + <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a> </template> <button diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue index 7b077d5e621..ec52d272168 100644 --- a/app/assets/javascripts/jobs/components/stuck_block.vue +++ b/app/assets/javascripts/jobs/components/stuck_block.vue @@ -28,20 +28,22 @@ export default { <div class="bs-callout bs-callout-warning"> <p v-if="tags.length" class="js-stuck-with-tags append-bottom-0"> {{ - s__(`This job is stuck, because you don't have + s__(`This job is stuck because you don't have any active runners online with any of these tags assigned to them:`) }} - <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary"> {{ tag }} </span> + <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4"> + {{ tag }} + </span> </p> <p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners append-bottom-0"> {{ - s__(`Job|This job is stuck, because the project + s__(`Job|This job is stuck because the project doesn't have any runners online assigned to it.`) }} </p> <p v-else class="js-stuck-no-active-runner append-bottom-0"> {{ - s__(`This job is stuck, because you don't + s__(`This job is stuck because you don't have any active runners that can run this job.`) }} </p> diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue index 4a9b2903eec..997737b3e23 100644 --- a/app/assets/javascripts/jobs/components/trigger_block.vue +++ b/app/assets/javascripts/jobs/components/trigger_block.vue @@ -1,6 +1,9 @@ <script> +import { __ } from '~/locale'; import { GlButton } from '@gitlab/ui'; +const HIDDEN_VALUE = '••••••'; + export default { components: { GlButton, @@ -13,17 +16,26 @@ export default { }, data() { return { - areVariablesVisible: false, + showVariableValues: false, }; }, computed: { hasVariables() { return this.trigger.variables && this.trigger.variables.length > 0; }, + getToggleButtonText() { + return this.showVariableValues ? __('Hide values') : __('Reveal values'); + }, + hasValues() { + return this.trigger.variables.some(v => v.value); + }, }, methods: { - revealVariables() { - this.areVariablesVisible = true; + toggleValues() { + this.showVariableValues = !this.showVariableValues; + }, + getDisplayValue(value) { + return this.showVariableValues ? value : HIDDEN_VALUE; }, }, }; @@ -31,33 +43,36 @@ export default { <template> <div class="build-widget block"> - <h4 class="title">{{ __('Trigger') }}</h4> - - <p v-if="trigger.short_token" class="js-short-token"> - <span class="build-light-text"> {{ __('Token') }} </span> {{ trigger.short_token }} + <p + v-if="trigger.short_token" + class="js-short-token" + :class="{ 'append-bottom-5': hasVariables, 'append-bottom-0': !hasVariables }" + > + <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }} </p> - <p v-if="hasVariables"> - <gl-button - v-if="!areVariablesVisible" - type="button" - class="btn btn-default group js-reveal-variables" - @click="revealVariables" - > - {{ __('Reveal Variables') }} - </gl-button> - </p> + <template v-if="hasVariables"> + <p class="trigger-variables-btn-container"> + <span class="font-weight-bold">{{ __('Trigger variables:') }}</span> - <dl v-if="areVariablesVisible" class="js-build-variables trigger-build-variables"> - <template v-for="variable in trigger.variables"> - <dt :key="`${variable.key}-variable`" class="js-build-variable trigger-build-variable"> - {{ variable.key }} - </dt> + <gl-button + v-if="hasValues" + class="btn-sm group js-reveal-variables trigger-variables-btn" + @click="toggleValues" + >{{ getToggleButtonText }}</gl-button + > + </p> - <dd :key="`${variable.key}-value`" class="js-build-value trigger-build-value"> - {{ variable.value }} - </dd> - </template> - </dl> + <table class="js-build-variables trigger-build-variables"> + <tr v-for="(variable, index) in trigger.variables" :key="`${variable.key}-${index}`"> + <td class="js-build-variable trigger-build-variable trigger-variables-table-cell"> + {{ variable.key }} + </td> + <td class="js-build-value trigger-build-value trigger-variables-table-cell"> + {{ getDisplayValue(variable.value) }} + </td> + </tr> + </table> + </template> </div> </template> diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js index c0a76814102..f7a611fbca0 100644 --- a/app/assets/javascripts/labels_select.js +++ b/app/assets/javascripts/labels_select.js @@ -7,7 +7,6 @@ import _ from 'underscore'; import { sprintf, __ } from './locale'; import axios from './lib/utils/axios_utils'; import IssuableBulkUpdateActions from './issuable_bulk_update_actions'; -import DropdownUtils from './filtered_search/dropdown_utils'; import CreateLabelDropdown from './create_label'; import flash from './flash'; import ModalStore from './boards/stores/modal_store'; @@ -171,23 +170,7 @@ export default class LabelsSelect { axios .get(labelUrl) .then(res => { - let data = _.chain(res.data) - .groupBy(function(label) { - return label.title; - }) - .map(function(label) { - var color; - color = _.map(label, function(dup) { - return dup.color; - }); - return { - id: label[0].id, - title: label[0].title, - color: color, - duplicate: color.length > 1, - }; - }) - .value(); + let { data } = res; if ($dropdown.hasClass('js-extra-options')) { var extraData = []; if (showNo) { @@ -272,15 +255,9 @@ export default class LabelsSelect { selectedClass.push('dropdown-clear-active'); } } - if (label.duplicate) { - color = DropdownUtils.duplicateLabelColor(label.color); - } else { - if (label.color != null) { - [color] = label.color; - } - } - if (color) { - colorEl = "<span class='dropdown-label-box' style='background: " + color + "'></span>"; + if (label.color) { + colorEl = + "<span class='dropdown-label-box' style='background: " + label.color + "'></span>"; } else { colorEl = ''; } @@ -435,7 +412,7 @@ export default class LabelsSelect { new ListLabel({ id: label.id, title: label.title, - color: label.color[0], + color: label.color, textColor: '#fff', }), ); diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js index 040d0bc659e..9e22cdc04e9 100644 --- a/app/assets/javascripts/lib/utils/common_utils.js +++ b/app/assets/javascripts/lib/utils/common_utils.js @@ -192,8 +192,12 @@ export const contentTop = () => { const mrTabsHeight = $('.merge-request-tabs').height() || 0; const headerHeight = $('.navbar-gitlab').height() || 0; const diffFilesChanged = $('.js-diff-files-changed').height() || 0; + const diffFileLargeEnoughScreen = + 'matchMedia' in window ? window.matchMedia('min-width: 768') : true; + const diffFileTitleBar = + (diffFileLargeEnoughScreen && $('.diff-file .file-title-flex-parent:visible').height()) || 0; - return perfBar + mrTabsHeight + headerHeight + diffFilesChanged; + return perfBar + mrTabsHeight + headerHeight + diffFilesChanged + diffFileTitleBar; }; export const scrollToElement = element => { diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js index 6f42382246d..7933c234384 100644 --- a/app/assets/javascripts/lib/utils/dom_utils.js +++ b/app/assets/javascripts/lib/utils/dom_utils.js @@ -7,3 +7,8 @@ export const addClassIfElementExists = (element, className) => { }; export const isInVueNoteablePage = () => isInIssuePage() || isInEpicPage() || isInMRPage(); + +export const canScrollUp = ({ scrollTop }, margin = 0) => scrollTop > margin; + +export const canScrollDown = ({ scrollTop, offsetHeight, scrollHeight }, margin = 0) => + scrollTop + offsetHeight < scrollHeight - margin; diff --git a/app/assets/javascripts/lib/utils/file_upload.js b/app/assets/javascripts/lib/utils/file_upload.js new file mode 100644 index 00000000000..b41ffb44971 --- /dev/null +++ b/app/assets/javascripts/lib/utils/file_upload.js @@ -0,0 +1,13 @@ +export default (buttonSelector, fileSelector) => { + const btn = document.querySelector(buttonSelector); + const fileInput = document.querySelector(fileSelector); + const form = btn.closest('form'); + + btn.addEventListener('click', () => { + fileInput.click(); + }); + + fileInput.addEventListener('change', () => { + form.querySelector('.js-filename').textContent = fileInput.value.replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape + }); +}; diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js index e4852c85378..14c02218990 100644 --- a/app/assets/javascripts/lib/utils/http_status.js +++ b/app/assets/javascripts/lib/utils/http_status.js @@ -16,7 +16,9 @@ const httpStatusCodes = { IM_USED: 226, MULTIPLE_CHOICES: 300, BAD_REQUEST: 400, + FORBIDDEN: 403, NOT_FOUND: 404, + UNPROCESSABLE_ENTITY: 422, }; export const successCodes = [ diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js index 3618c6af7e2..c095a017866 100644 --- a/app/assets/javascripts/lib/utils/text_markdown.js +++ b/app/assets/javascripts/lib/utils/text_markdown.js @@ -39,7 +39,14 @@ function blockTagText(text, textArea, blockTag, selected) { } } -function moveCursor({ textArea, tag, positionBetweenTags, removedLastNewLine, select }) { +function moveCursor({ + textArea, + tag, + cursorOffset, + positionBetweenTags, + removedLastNewLine, + select, +}) { var pos; if (!textArea.setSelectionRange) { return; @@ -61,11 +68,24 @@ function moveCursor({ textArea, tag, positionBetweenTags, removedLastNewLine, se pos -= 1; } + if (cursorOffset) { + pos -= cursorOffset; + } + return textArea.setSelectionRange(pos, pos); } } -export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) { +export function insertMarkdownText({ + textArea, + text, + tag, + cursorOffset, + blockTag, + selected, + wrap, + select, +}) { var textToInsert, selectedSplit, startChar, @@ -154,20 +174,30 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr return moveCursor({ textArea, tag: tag.replace(textPlaceholder, selected), + cursorOffset, positionBetweenTags: wrap && selected.length === 0, removedLastNewLine, select, }); } -function updateText({ textArea, tag, blockTag, wrap, select }) { +function updateText({ textArea, tag, cursorOffset, blockTag, wrap, select, tagContent }) { var $textArea, selected, text; $textArea = $(textArea); textArea = $textArea.get(0); text = $textArea.val(); - selected = selectedText(text, textArea); + selected = selectedText(text, textArea) || tagContent; $textArea.focus(); - return insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }); + return insertMarkdownText({ + textArea, + text, + tag, + cursorOffset, + blockTag, + selected, + wrap, + select, + }); } export function addMarkdownListeners(form) { @@ -178,9 +208,11 @@ export function addMarkdownListeners(form) { return updateText({ textArea: $this.closest('.md-area').find('textarea'), tag: $this.data('mdTag'), + cursorOffset: $this.data('mdCursorOffset'), blockTag: $this.data('mdBlock'), wrap: !$this.data('mdPrepend'), select: $this.data('mdSelect'), + tagContent: $this.data('mdTagContent').toString(), }); }); } diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js index a282c2df441..9850f7ce782 100644 --- a/app/assets/javascripts/lib/utils/url_utility.js +++ b/app/assets/javascripts/lib/utils/url_utility.js @@ -17,27 +17,29 @@ export function getParameterValues(sParam) { // @param {Object} params - url keys and value to merge // @param {String} url export function mergeUrlParams(params, url) { - let newUrl = Object.keys(params).reduce((acc, paramName) => { - const paramValue = encodeURIComponent(params[paramName]); - const pattern = new RegExp(`\\b(${paramName}=).*?(&|$)`); - - if (paramValue === null) { - return acc.replace(pattern, ''); - } else if (url.search(pattern) !== -1) { - return acc.replace(pattern, `$1${paramValue}$2`); - } - - return `${acc}${acc.indexOf('?') > 0 ? '&' : '?'}${paramName}=${paramValue}`; - }, decodeURIComponent(url)); + const re = /^([^?#]*)(\?[^#]*)?(.*)/; + const merged = {}; + const urlparts = url.match(re); + + if (urlparts[2]) { + urlparts[2] + .substr(1) + .split('&') + .forEach(part => { + if (part.length) { + const kv = part.split('='); + merged[decodeURIComponent(kv[0])] = decodeURIComponent(kv.slice(1).join('=')); + } + }); + } - // Remove a trailing ampersand - const lastChar = newUrl[newUrl.length - 1]; + Object.assign(merged, params); - if (lastChar === '&') { - newUrl = newUrl.slice(0, -1); - } + const query = Object.keys(merged) + .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(merged[key])}`) + .join('&'); - return newUrl; + return `${urlparts[1]}?${query}${urlparts[3]}`; } export function removeParamQueryString(url, param) { diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js index c0d45e017b4..9f980fd4899 100644 --- a/app/assets/javascripts/lib/utils/users_cache.js +++ b/app/assets/javascripts/lib/utils/users_cache.js @@ -22,6 +22,34 @@ class UsersCache extends Cache { }); // missing catch is intentional, error handling depends on use case } + + retrieveById(userId) { + if (this.hasData(userId) && this.get(userId).username) { + return Promise.resolve(this.get(userId)); + } + + return Api.user(userId).then(({ data }) => { + this.internalStorage[userId] = data; + return data; + }); + // missing catch is intentional, error handling depends on use case + } + + retrieveStatusById(userId) { + if (this.hasData(userId) && this.get(userId).status) { + return Promise.resolve(this.get(userId).status); + } + + return Api.userStatus(userId).then(({ data }) => { + if (!this.hasData(userId)) { + this.internalStorage[userId] = {}; + } + this.internalStorage[userId].status = data; + + return data; + }); + // missing catch is intentional, error handling depends on use case + } } export default new UsersCache(); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index a88b575ad99..c866e8d180a 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -30,6 +30,7 @@ import initUsagePingConsent from './usage_ping_consent'; import initPerformanceBar from './performance_bar'; import initSearchAutocomplete from './search_autocomplete'; import GlFieldErrors from './gl_field_errors'; +import initUserPopovers from './user_popovers'; // expose jQuery as global (TODO: remove these) window.jQuery = jQuery; @@ -78,6 +79,7 @@ document.addEventListener('DOMContentLoaded', () => { initTodoToggle(); initLogoAnimation(); initUsagePingConsent(); + initUserPopovers(); if (document.querySelector('.search')) initSearchAutocomplete(); if (document.querySelector('#js-peek')) initPerformanceBar({ container: '#js-peek' }); diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js index d32f39881dd..75c18a9b6a0 100644 --- a/app/assets/javascripts/milestone_select.js +++ b/app/assets/javascripts/milestone_select.js @@ -155,7 +155,7 @@ export default class MilestoneSelect { const { $el, e } = clickEvent; let selected = clickEvent.selectedObj; - let data, boardsStore; + let data, modalStoreFilter; if (!selected) return; if (options.handleClick) { @@ -179,11 +179,11 @@ export default class MilestoneSelect { } if ($dropdown.closest('.add-issues-modal').length) { - boardsStore = ModalStore.store.filter; + modalStoreFilter = ModalStore.store.filter; } - if (boardsStore) { - boardsStore[$dropdown.data('fieldName')] = selected.name; + if (modalStoreFilter) { + modalStoreFilter[$dropdown.data('fieldName')] = selected.name; e.preventDefault(); } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) { return Issuable.filterResults($dropdown.closest('form')); diff --git a/app/assets/javascripts/mirrors/mirror_repos.js b/app/assets/javascripts/mirrors/mirror_repos.js index 0d8f31d6bfc..196b84621b6 100644 --- a/app/assets/javascripts/mirrors/mirror_repos.js +++ b/app/assets/javascripts/mirrors/mirror_repos.js @@ -30,6 +30,7 @@ export default class MirrorRepos { this.$password.on('input.updateUrl', () => this.debouncedUpdateUrl()); this.initMirrorSSH(); + this.updateProtectedBranches(); } initMirrorSSH() { diff --git a/app/assets/javascripts/monitoring/components/charts/area.vue b/app/assets/javascripts/monitoring/components/charts/area.vue new file mode 100644 index 00000000000..12224e36ba2 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/area.vue @@ -0,0 +1,97 @@ +<script> +import { GlAreaChart } from '@gitlab/ui'; +import dateFormat from 'dateformat'; + +export default { + components: { + GlAreaChart, + }, + props: { + graphData: { + type: Object, + required: true, + validator(data) { + return ( + data.queries && + Array.isArray(data.queries) && + data.queries.filter(query => { + if (Array.isArray(query.result)) { + return ( + query.result.filter(res => Array.isArray(res.values)).length === query.result.length + ); + } + return false; + }).length === data.queries.length + ); + }, + }, + }, + computed: { + chartData() { + return this.graphData.queries.reduce((accumulator, query) => { + const xLabel = `${query.unit}`; + accumulator[xLabel] = {}; + query.result.forEach(res => + res.values.forEach(v => { + accumulator[xLabel][v.time.toISOString()] = v.value; + }), + ); + return accumulator; + }, {}); + }, + chartOptions() { + return { + xAxis: { + name: 'Time', + type: 'time', + axisLabel: { + formatter: date => dateFormat(date, 'h:MMtt'), + }, + nameTextStyle: { + padding: [18, 0, 0, 0], + }, + }, + yAxis: { + name: this.graphData.y_label, + axisLabel: { + formatter: value => value.toFixed(3), + }, + nameTextStyle: { + padding: [0, 0, 36, 0], + }, + }, + legend: { + formatter: this.xAxisLabel, + }, + }; + }, + xAxisLabel() { + return this.graphData.queries.map(query => query.label).join(', '); + }, + }, + methods: { + formatTooltipText(params) { + const [date, value] = params; + return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)]; + }, + onCreated(chart) { + this.$emit('created', chart); + }, + }, +}; +</script> + +<template> + <div class="prometheus-graph"> + <div class="prometheus-graph-header"> + <h5 class="prometheus-graph-title">{{ graphData.title }}</h5> + <div class="prometheus-graph-widgets"><slot></slot></div> + </div> + <gl-area-chart + :data="chartData" + :option="chartOptions" + :format-tooltip-text="formatTooltipText" + @created="onCreated" + /> + </div> +</template> diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 218c508a608..2d9c5050c9b 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -4,6 +4,7 @@ import { s__ } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; import Flash from '../../flash'; import MonitoringService from '../services/monitoring_service'; +import MonitorAreaChart from './charts/area.vue'; import GraphGroup from './graph_group.vue'; import Graph from './graph.vue'; import EmptyState from './empty_state.vue'; @@ -12,6 +13,7 @@ import eventHub from '../event_hub'; export default { components: { + MonitorAreaChart, Graph, GraphGroup, EmptyState, @@ -102,6 +104,9 @@ export default { }; }, computed: { + graphComponent() { + return gon.features && gon.features.areaChart ? MonitorAreaChart : Graph; + }, forceRedraw() { return this.elWidth; }, @@ -207,7 +212,8 @@ export default { :name="groupData.group" :show-panels="showPanels" > - <graph + <component + :is="graphComponent" v-for="(graphData, graphIndex) in groupData.metrics" :key="graphIndex" :graph-data="graphData" @@ -220,7 +226,7 @@ export default { > <!-- EE content --> {{ null }} - </graph> + </component> </graph-group> </div> <empty-state diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue index 815063237fc..64a1df80a8e 100644 --- a/app/assets/javascripts/monitoring/components/graph.vue +++ b/app/assets/javascripts/monitoring/components/graph.vue @@ -105,6 +105,9 @@ export default { deploymentFlagData() { return this.reducedDeploymentData.find(deployment => deployment.showDeploymentFlag); }, + shouldRenderData() { + return this.graphData.queries.filter(s => s.result.length > 0).length > 0; + }, }, watch: { hoverData() { @@ -120,17 +123,17 @@ export default { }, draw() { const breakpointSize = bp.getBreakpointSize(); - const query = this.graphData.queries[0]; const svgWidth = this.$refs.baseSvg.getBoundingClientRect().width; + this.margin = measurements.large.margin; + if (this.smallGraph || breakpointSize === 'xs' || breakpointSize === 'sm') { this.graphHeight = 300; this.margin = measurements.small.margin; this.measurements = measurements.small; } - this.unitOfDisplay = query.unit || ''; + this.yAxisLabel = this.graphData.y_label || 'Values'; - this.legendTitle = query.label || 'Average'; this.graphWidth = svgWidth - this.margin.left - this.margin.right; this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom; this.baseGraphHeight = this.graphHeight - 50; @@ -139,8 +142,15 @@ export default { // pixel offsets inside the svg and outside are not 1:1 this.realPixelRatio = svgWidth / this.baseGraphWidth; - this.renderAxesPaths(); - this.formatDeployments(); + // set the legends on the axes + const [query] = this.graphData.queries; + this.legendTitle = query ? query.label : 'Average'; + this.unitOfDisplay = query ? query.unit : ''; + + if (this.shouldRenderData) { + this.renderAxesPaths(); + this.formatDeployments(); + } }, handleMouseOverGraph(e) { let point = this.$refs.graphData.createSVGPoint(); @@ -266,7 +276,7 @@ export default { :y-axis-label="yAxisLabel" :unit-of-display="unitOfDisplay" /> - <svg ref="graphData" :viewBox="innerViewBox" class="graph-data"> + <svg v-if="shouldRenderData" ref="graphData" :viewBox="innerViewBox" class="graph-data"> <slot name="additionalSvgContent" :graphDrawData="graphDrawData" /> <graph-path v-for="(path, index) in timeSeries" @@ -293,8 +303,14 @@ export default { @mousemove="handleMouseOverGraph($event);" /> </svg> + <svg v-else :viewBox="innerViewBox" class="js-no-data-to-display"> + <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle"> + {{ s__('Metrics|No data to display') }} + </text> + </svg> </svg> <graph-flag + v-if="shouldRenderData" :real-pixel-ratio="realPixelRatio" :current-x-coordinate="currentXCoordinate" :current-data="currentData" diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js index 176f7d9eef2..8692c873a41 100644 --- a/app/assets/javascripts/monitoring/stores/monitoring_store.js +++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js @@ -7,10 +7,29 @@ function sortMetrics(metrics) { .value(); } +function checkQueryEmptyData(query) { + return { + ...query, + result: query.result.filter(timeSeries => { + const newTimeSeries = timeSeries; + const hasValue = series => + !Number.isNaN(series.value) && (series.value !== null || series.value !== undefined); + const hasNonNullValue = timeSeries.values.find(hasValue); + + newTimeSeries.values = hasNonNullValue ? newTimeSeries.values : []; + + return newTimeSeries.values.length > 0; + }), + }; +} + +function removeTimeSeriesNoData(queries) { + return queries.reduce((series, query) => series.concat(checkQueryEmptyData(query)), []); +} + function normalizeMetrics(metrics) { - return metrics.map(metric => ({ - ...metric, - queries: metric.queries.map(query => ({ + return metrics.map(metric => { + const queries = metric.queries.map(query => ({ ...query, result: query.result.map(result => ({ ...result, @@ -19,8 +38,13 @@ function normalizeMetrics(metrics) { value: Number(value), })), })), - })), - })); + })); + + return { + ...metric, + queries: removeTimeSeriesNoData(queries), + }; + }); } export default class MonitoringStore { diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js index bb24a1acdb3..50ba14dfb2e 100644 --- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js +++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js @@ -92,7 +92,11 @@ function queryTimeSeries(query, graphDrawData, lineStyle) { if (seriesCustomizationData) { metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; [lineColor, areaColor] = pickColor(seriesCustomizationData.color); - shouldRenderLegend = false; + if (timeSeriesParsed.length > 0) { + shouldRenderLegend = false; + } else { + shouldRenderLegend = true; + } } else { metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`; [lineColor, areaColor] = pickColor(); @@ -101,19 +105,6 @@ function queryTimeSeries(query, graphDrawData, lineStyle) { } } - if (!shouldRenderLegend) { - if (!timeSeriesParsed[0].tracksLegend) { - timeSeriesParsed[0].tracksLegend = []; - } - timeSeriesParsed[0].tracksLegend.push({ - max: maximumValue, - average: accum / timeSeries.values.length, - lineStyle, - lineColor, - metricTag, - }); - } - const values = datesWithoutGaps.map(time => ({ time, value: findByDate(timeSeries.values, time), @@ -135,6 +126,19 @@ function queryTimeSeries(query, graphDrawData, lineStyle) { shouldRenderLegend, renderCanary, }); + + if (!shouldRenderLegend) { + if (!timeSeriesParsed[0].tracksLegend) { + timeSeriesParsed[0].tracksLegend = []; + } + timeSeriesParsed[0].tracksLegend.push({ + max: maximumValue, + average: accum / timeSeries.values.length, + lineStyle, + lineColor, + metricTag, + }); + } }); return timeSeriesParsed; diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js index 1c98683c597..e4d72eb8318 100644 --- a/app/assets/javascripts/mr_notes/index.js +++ b/app/assets/javascripts/mr_notes/index.js @@ -33,6 +33,7 @@ export default function initMrNotes() { noteableData, currentUserData: JSON.parse(notesDataset.currentUserData), notesData: JSON.parse(notesDataset.notesData), + helpPagePath: notesDataset.helpPagePath, }; }, computed: { @@ -71,6 +72,7 @@ export default function initMrNotes() { notesData: this.notesData, userData: this.currentUserData, shouldShow: this.activeTab === 'show', + helpPagePath: this.helpPagePath, }, }); }, diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 884ccca7bde..ce56beb1e6b 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/app/assets/javascripts/notes/components/comment_form.vue @@ -4,6 +4,7 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import _ from 'underscore'; import Autosize from 'autosize'; import { __, sprintf } from '~/locale'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import Flash from '../../flash'; import Autosave from '../../autosave'; import { @@ -30,6 +31,7 @@ export default { markdownField, userAvatarLink, loadingButton, + TimelineEntryItem, }, mixins: [issuableStateMixin], props: { @@ -245,15 +247,19 @@ Please check your network connection and try again.`; } else { this.reopenIssue() .then(() => this.enableButton()) - .catch(() => { + .catch(({ data }) => { this.enableButton(); this.toggleStateButtonLoading(false); - Flash( - sprintf( - __('Something went wrong while reopening the %{issuable}. Please try again later'), - { issuable: this.noteableDisplayName }, - ), + let errorMessage = sprintf( + __('Something went wrong while reopening the %{issuable}. Please try again later'), + { issuable: this.noteableDisplayName }, ); + + if (data) { + errorMessage = Object.values(data).join('\n'); + } + + Flash(errorMessage); }); } }, @@ -309,137 +315,135 @@ Please check your network connection and try again.`; <div> <note-signed-out-widget v-if="!isLoggedIn" /> <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" /> - <div v-else-if="canCreateNote" class="notes notes-form timeline"> - <div class="timeline-entry note-form"> - <div class="timeline-entry-inner"> - <div class="flash-container error-alert timeline-content"></div> - <div class="timeline-icon d-none d-sm-none d-md-block"> - <user-avatar-link - v-if="author" - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="40" - /> - </div> - <div class="timeline-content timeline-content-form"> - <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form"> - <div class="error-alert"></div> + <ul v-else-if="canCreateNote" class="notes notes-form timeline"> + <timeline-entry-item class="note-form"> + <div class="flash-container error-alert timeline-content"></div> + <div class="timeline-icon d-none d-sm-none d-md-block"> + <user-avatar-link + v-if="author" + :link-href="author.path" + :img-src="author.avatar_url" + :img-alt="author.name" + :img-size="40" + /> + </div> + <div class="timeline-content timeline-content-form"> + <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form"> + <div class="error-alert"></div> - <issue-warning - v-if="hasWarning(getNoteableData)" - :is-locked="isLocked(getNoteableData)" - :is-confidential="isConfidential(getNoteableData)" - /> + <issue-warning + v-if="hasWarning(getNoteableData)" + :is-locked="isLocked(getNoteableData)" + :is-confidential="isConfidential(getNoteableData)" + /> - <markdown-field - ref="markdownField" - :markdown-preview-path="markdownPreviewPath" - :markdown-docs-path="markdownDocsPath" - :quick-actions-docs-path="quickActionsDocsPath" - :markdown-version="markdownVersion" - :add-spacing-classes="false" - > - <textarea - id="note-body" - ref="textarea" - slot="textarea" - v-model="note" - :disabled="isSubmitting" - name="note[note]" - class="note-textarea js-vue-comment-form js-note-text + <markdown-field + ref="markdownField" + :markdown-preview-path="markdownPreviewPath" + :markdown-docs-path="markdownDocsPath" + :quick-actions-docs-path="quickActionsDocsPath" + :markdown-version="markdownVersion" + :add-spacing-classes="false" + > + <textarea + id="note-body" + ref="textarea" + slot="textarea" + v-model="note" + :disabled="isSubmitting" + name="note[note]" + class="note-textarea js-vue-comment-form js-note-text js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input" - data-supports-quick-actions="true" - aria-label="Description" - placeholder="Write a comment or drag your files here…" - @keydown.up="editCurrentUserLastNote();" - @keydown.meta.enter="handleSave();" - @keydown.ctrl.enter="handleSave();" - > - </textarea> - </markdown-field> - <div class="note-form-actions"> - <div - class="float-left btn-group + data-supports-quick-actions="true" + aria-label="Description" + placeholder="Write a comment or drag your files here…" + @keydown.up="editCurrentUserLastNote();" + @keydown.meta.enter="handleSave();" + @keydown.ctrl.enter="handleSave();" + > + </textarea> + </markdown-field> + <div class="note-form-actions"> + <div + class="float-left btn-group append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown" - > - <button - :disabled="isSubmitButtonDisabled" - class="btn btn-create comment-btn js-comment-button js-comment-submit-button + > + <button + :disabled="isSubmitButtonDisabled" + class="btn btn-create comment-btn js-comment-button js-comment-submit-button qa-comment-button" - type="submit" - @click.prevent="handleSave();" - > - {{ __(commentButtonTitle) }} - </button> - <button - :disabled="isSubmitButtonDisabled" - name="button" - type="button" - class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown" - data-display="static" - data-toggle="dropdown" - aria-label="Open comment type dropdown" - > - <i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i> - </button> - - <ul class="note-type-dropdown dropdown-open-top dropdown-menu"> - <li :class="{ 'droplab-item-selected': noteType === 'comment' }"> - <button - type="button" - class="btn btn-transparent" - @click.prevent="setNoteType('comment');" - > - <i aria-hidden="true" class="fa fa-check icon"> </i> - <div class="description"> - <strong>Comment</strong> - <p>Add a general comment to this {{ noteableDisplayName }}.</p> - </div> - </button> - </li> - <li class="divider droplab-item-ignore"></li> - <li :class="{ 'droplab-item-selected': noteType === 'discussion' }"> - <button - type="button" - class="btn btn-transparent qa-discussion-option" - @click.prevent="setNoteType('discussion');" - > - <i aria-hidden="true" class="fa fa-check icon"> </i> - <div class="description"> - <strong>Start discussion</strong> - <p>{{ startDiscussionDescription }}</p> - </div> - </button> - </li> - </ul> - </div> - - <loading-button - v-if="canUpdateIssue" - :loading="isToggleStateButtonLoading" - :container-class="[ - actionButtonClassNames, - 'btn btn-comment btn-comment-and-close js-action-button', - ]" - :disabled="isToggleStateButtonLoading || isSubmitting" - :label="issueActionButtonTitle" - @click="handleSave(true);" - /> - + type="submit" + @click.prevent="handleSave();" + > + {{ __(commentButtonTitle) }} + </button> <button - v-if="note.length" + :disabled="isSubmitButtonDisabled" + name="button" type="button" - class="btn btn-cancel js-note-discard" - @click="discard" + class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle qa-note-dropdown" + data-display="static" + data-toggle="dropdown" + aria-label="Open comment type dropdown" > - Discard draft + <i aria-hidden="true" class="fa fa-caret-down toggle-icon"> </i> </button> + + <ul class="note-type-dropdown dropdown-open-top dropdown-menu"> + <li :class="{ 'droplab-item-selected': noteType === 'comment' }"> + <button + type="button" + class="btn btn-transparent" + @click.prevent="setNoteType('comment');" + > + <i aria-hidden="true" class="fa fa-check icon"> </i> + <div class="description"> + <strong>Comment</strong> + <p>Add a general comment to this {{ noteableDisplayName }}.</p> + </div> + </button> + </li> + <li class="divider droplab-item-ignore"></li> + <li :class="{ 'droplab-item-selected': noteType === 'discussion' }"> + <button + type="button" + class="btn btn-transparent qa-discussion-option" + @click.prevent="setNoteType('discussion');" + > + <i aria-hidden="true" class="fa fa-check icon"> </i> + <div class="description"> + <strong>Start discussion</strong> + <p>{{ startDiscussionDescription }}</p> + </div> + </button> + </li> + </ul> </div> - </form> - </div> + + <loading-button + v-if="canUpdateIssue" + :loading="isToggleStateButtonLoading" + :container-class="[ + actionButtonClassNames, + 'btn btn-comment btn-comment-and-close js-action-button', + ]" + :disabled="isToggleStateButtonLoading || isSubmitting" + :label="issueActionButtonTitle" + @click="handleSave(true);" + /> + + <button + v-if="note.length" + type="button" + class="btn btn-cancel js-note-discard" + @click="discard" + > + Discard draft + </button> + </div> + </form> </div> - </div> - </div> + </timeline-entry-item> + </ul> </div> </template> diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue index 8e8bd150647..af821df0fd2 100644 --- a/app/assets/javascripts/notes/components/diff_with_note.vue +++ b/app/assets/javascripts/notes/components/diff_with_note.vue @@ -4,7 +4,9 @@ import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue'; import { GlSkeletonLoading } from '@gitlab/ui'; -import { trimFirstCharOfLineContent, getDiffMode } from '~/diffs/store/utils'; +import { getDiffMode } from '~/diffs/store/utils'; + +const FIRST_CHAR_REGEX = /^(\+|-| )/; export default { components: { @@ -26,46 +28,16 @@ export default { }, computed: { ...mapState({ - noteableData: state => state.notes.noteableData, projectPath: state => state.diffs.projectPath, }), diffMode() { - return getDiffMode(this.diffFile); + return getDiffMode(this.discussion.diff_file); }, hasTruncatedDiffLines() { return ( this.discussion.truncated_diff_lines && this.discussion.truncated_diff_lines.length !== 0 ); }, - isDiscussionsExpanded() { - return true; // TODO: @fatihacet - Fix this. - }, - isCollapsed() { - return this.diffFile.collapsed || false; - }, - isImageDiff() { - return !this.diffFile.text; - }, - diffFileClass() { - const { text } = this.diffFile; - return text ? 'text-file' : 'js-image-file'; - }, - diffFile() { - return this.discussion.diff_file; - }, - imageDiffHtml() { - return this.discussion.image_diff_html; - }, - userColorScheme() { - return window.gon.user_color_scheme; - }, - normalizedDiffLines() { - if (this.discussion.truncated_diff_lines) { - return this.discussion.truncated_diff_lines.map(line => trimFirstCharOfLineContent(line)); - } - - return []; - }, }, mounted() { if (!this.hasTruncatedDiffLines) { @@ -74,9 +46,6 @@ export default { }, methods: { ...mapActions(['fetchDiscussionDiffLines']), - rowTag(html) { - return html.outerHTML ? 'tr' : 'template'; - }, fetchDiff() { this.error = false; this.fetchDiscussionDiffLines(this.discussion) @@ -85,31 +54,45 @@ export default { this.error = true; }); }, + trimChar(line) { + return line.replace(FIRST_CHAR_REGEX, ''); + }, }, + userColorSchemeClass: window.gon.user_color_scheme, }; </script> <template> - <div ref="fileHolder" :class="diffFileClass" class="diff-file file-holder"> + <div :class="{ 'text-file': discussion.diff_file.text }" class="diff-file file-holder"> <diff-file-header :discussion-path="discussion.discussion_path" - :diff-file="diffFile" + :diff-file="discussion.diff_file" :can-current-user-fork="false" - :discussions-expanded="isDiscussionsExpanded" - :expanded="!isCollapsed" + :expanded="!discussion.diff_file.collapsed" /> - <div v-if="diffFile.text" :class="userColorScheme" class="diff-content code"> + <div + v-if="discussion.diff_file.text" + :class="$options.userColorSchemeClass" + class="diff-content code" + > <table> - <tr v-for="line in normalizedDiffLines" :key="line.line_code" class="line_holder"> - <td class="diff-line-num old_line">{{ line.old_line }}</td> - <td class="diff-line-num new_line">{{ line.new_line }}</td> - <td :class="line.type" class="line_content" v-html="line.rich_text"></td> - </tr> + <template v-if="hasTruncatedDiffLines"> + <tr + v-for="line in discussion.truncated_diff_lines" + v-once + :key="line.line_code" + class="line_holder" + > + <td class="diff-line-num old_line">{{ line.old_line }}</td> + <td class="diff-line-num new_line">{{ line.new_line }}</td> + <td :class="line.type" class="line_content" v-html="trimChar(line.rich_text)"></td> + </tr> + </template> <tr v-if="!hasTruncatedDiffLines" class="line_holder line-holder-placeholder"> <td class="old_line diff-line-num"></td> <td class="new_line diff-line-num"></td> <td v-if="error" class="js-error-lazy-load-diff diff-loading-error-block"> - Unable to load the diff + {{ error }} Unable to load the diff <button class="btn-link btn-link-retry btn-no-padding js-toggle-lazy-diff-retry-button" @click="fetchDiff" @@ -131,17 +114,17 @@ export default { <div v-else> <diff-viewer :diff-mode="diffMode" - :new-path="diffFile.new_path" - :new-sha="diffFile.diff_refs.head_sha" - :old-path="diffFile.old_path" - :old-sha="diffFile.diff_refs.base_sha" - :file-hash="diffFile.file_hash" + :new-path="discussion.diff_file.new_path" + :new-sha="discussion.diff_file.diff_refs.head_sha" + :old-path="discussion.diff_file.old_path" + :old-sha="discussion.diff_file.diff_refs.base_sha" + :file-hash="discussion.diff_file.file_hash" :project-path="projectPath" > <image-diff-overlay slot="image-overlay" :discussions="discussion" - :file-hash="diffFile.file_hash" + :file-hash="discussion.diff_file.file_hash" :show-comment-icon="true" :should-toggle-discussion="false" badge-class="image-comment-badge" diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue index ee79ecbf9b3..c7cfc0f0f3b 100644 --- a/app/assets/javascripts/notes/components/discussion_counter.vue +++ b/app/assets/javascripts/notes/components/discussion_counter.vue @@ -1,13 +1,12 @@ <script> import { mapActions, mapGetters } from 'vuex'; +import { GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; -import { pluralize } from '../../lib/utils/text_utility'; import discussionNavigation from '../mixins/discussion_navigation'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { Icon, @@ -17,9 +16,9 @@ export default { ...mapGetters([ 'getUserData', 'getNoteableData', - 'discussionCount', + 'resolvableDiscussionsCount', 'firstUnresolvedDiscussionId', - 'resolvedDiscussionCount', + 'unresolvedDiscussionsCount', ]), isLoggedIn() { return this.getUserData.id; @@ -27,15 +26,15 @@ export default { hasNextButton() { return this.isLoggedIn && !this.allResolved; }, - countText() { - return pluralize('discussion', this.discussionCount); - }, allResolved() { - return this.resolvedDiscussionCount === this.discussionCount; + return this.unresolvedDiscussionsCount === 0; }, resolveAllDiscussionsIssuePath() { return this.getNoteableData.create_issue_to_resolve_discussions_path; }, + resolvedDiscussionsCount() { + return this.resolvableDiscussionsCount - this.unresolvedDiscussionsCount; + }, }, methods: { ...mapActions(['expandDiscussion']), @@ -50,7 +49,7 @@ export default { </script> <template> - <div v-if="discussionCount > 0" class="line-resolve-all-container prepend-top-8"> + <div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container prepend-top-8"> <div> <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all"> <span @@ -61,15 +60,15 @@ export default { <icon name="check-circle" /> </span> <span class="line-resolve-text"> - {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved + {{ resolvedDiscussionsCount }}/{{ resolvableDiscussionsCount }} + {{ n__('discussion resolved', 'discussions resolved', resolvableDiscussionsCount) }} </span> </div> <div v-if="resolveAllDiscussionsIssuePath && !allResolved" class="btn-group" role="group"> <a - v-tooltip + v-gl-tooltip :href="resolveAllDiscussionsIssuePath" :title="s__('Resolve all discussions in new issue')" - data-container="body" class="new-issue-for-discussion btn btn-default discussion-create-issue-btn" > <icon name="issue-new" /> @@ -77,9 +76,8 @@ export default { </div> <div v-if="isLoggedIn && !allResolved" class="btn-group" role="group"> <button - v-tooltip + v-gl-tooltip title="Jump to first unresolved discussion" - data-container="body" class="btn btn-default discussion-next-btn" @click="jumpToFirstUnresolvedDiscussion" > diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 9a5817890c9..d99694b06e9 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -1,8 +1,7 @@ <script> import { mapGetters } from 'vuex'; import Icon from '~/vue_shared/components/icon.vue'; -import tooltip from '~/vue_shared/directives/tooltip'; -import { GlLoadingIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; export default { name: 'NoteActions', @@ -11,7 +10,7 @@ export default { GlLoadingIcon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { authorId: { @@ -119,10 +118,10 @@ export default { <template> <div class="note-actions"> - <span v-if="accessLevel" class="note-role user-access-role"> {{ accessLevel }} </span> + <span v-if="accessLevel" class="note-role user-access-role">{{ accessLevel }}</span> <div v-if="canResolve" class="note-actions-item"> <button - v-tooltip + v-gl-tooltip :class="{ 'is-disabled': !resolvable, 'is-active': isResolved }" :title="resolveButtonTitle" :aria-label="resolveButtonTitle" @@ -138,12 +137,10 @@ export default { </div> <div v-if="canAwardEmoji" class="note-actions-item"> <a - v-tooltip + v-gl-tooltip.bottom :class="{ 'js-user-authored': isAuthoredByCurrentUser }" class="note-action-button note-emoji-button js-add-award js-note-emoji" data-position="right" - data-placement="bottom" - data-container="body" href="#" title="Add reaction" > @@ -158,12 +155,10 @@ export default { </div> <div v-if="canEdit" class="note-actions-item"> <button - v-tooltip + v-gl-tooltip.bottom type="button" title="Edit comment" class="note-action-button js-note-edit btn btn-transparent" - data-container="body" - data-placement="bottom" @click="onEdit" > <icon name="pencil" css-classes="link-highlight" /> @@ -171,12 +166,10 @@ export default { </div> <div v-if="showDeleteAction" class="note-actions-item"> <button - v-tooltip + v-gl-tooltip.bottom type="button" title="Delete comment" class="note-action-button js-note-delete btn btn-transparent" - data-container="body" - data-placement="bottom" @click="onDelete" > <icon name="remove" class="link-highlight" /> @@ -184,19 +177,17 @@ export default { </div> <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item"> <button - v-tooltip + v-gl-tooltip.bottom type="button" title="More actions" class="note-action-button more-actions-toggle btn btn-transparent" data-toggle="dropdown" - data-container="body" - data-placement="bottom" > <icon css-classes="icon" name="ellipsis_v" /> </button> <ul class="dropdown-menu more-actions-dropdown dropdown-open-left"> <li v-if="canReportAsAbuse"> - <a :href="reportAbusePath"> {{ __('Report abuse to GitLab') }} </a> + <a :href="reportAbusePath">{{ __('Report abuse to GitLab') }}</a> </li> <li v-if="noteUrl"> <button @@ -213,7 +204,7 @@ export default { type="button" @click.prevent="onDelete" > - <span class="text-danger"> {{ __('Delete comment') }} </span> + <span class="text-danger">{{ __('Delete comment') }}</span> </button> </li> </ul> diff --git a/app/assets/javascripts/notes/components/note_awards_list.vue b/app/assets/javascripts/notes/components/note_awards_list.vue index 4aba2e65edb..3d60eb02db8 100644 --- a/app/assets/javascripts/notes/components/note_awards_list.vue +++ b/app/assets/javascripts/notes/components/note_awards_list.vue @@ -1,16 +1,16 @@ <script> import { mapActions, mapGetters } from 'vuex'; +import { GlTooltipDirective } from '@gitlab/ui'; import Icon from '~/vue_shared/components/icon.vue'; import Flash from '../../flash'; import { glEmojiTag } from '../../emoji'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { components: { Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { awards: { @@ -167,21 +167,19 @@ export default { <button v-for="(awardList, awardName, index) in groupedAwards" :key="index" - v-tooltip + v-gl-tooltip.bottom="{ boundary: 'viewport' }" :class="getAwardClassBindings(awardList)" :title="awardTitle(awardList)" class="btn award-control" - data-boundary="viewport" - data-placement="bottom" type="button" @click="handleAward(awardName);" > <span v-html="getAwardHTML(awardName)"></span> - <span class="award-control-text js-counter"> {{ awardList.length }} </span> + <span class="award-control-text js-counter">{{ awardList.length }}</span> </button> <div v-if="canAwardEmoji" class="award-menu-holder"> <button - v-tooltip + v-gl-tooltip :class="{ 'js-user-authored': isAuthoredByMe }" class="award-control btn js-add-award" title="Add reaction" diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue index c0bee600181..bcf5d334da4 100644 --- a/app/assets/javascripts/notes/components/note_body.vue +++ b/app/assets/javascripts/notes/components/note_body.vue @@ -1,10 +1,12 @@ <script> +import { mapActions } from 'vuex'; import $ from 'jquery'; import noteEditedText from './note_edited_text.vue'; import noteAwardsList from './note_awards_list.vue'; import noteAttachment from './note_attachment.vue'; import noteForm from './note_form.vue'; import autosave from '../mixins/autosave'; +import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; export default { components: { @@ -12,6 +14,7 @@ export default { noteAwardsList, noteAttachment, noteForm, + Suggestions, }, mixins: [autosave], props: { @@ -19,6 +22,11 @@ export default { type: Object, required: true, }, + line: { + type: Object, + required: false, + default: null, + }, canEdit: { type: Boolean, required: true, @@ -28,11 +36,22 @@ export default { required: false, default: false, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, computed: { noteBody() { return this.note.note; }, + hasSuggestion() { + return this.note.suggestions && this.note.suggestions.length; + }, + lineType() { + return this.line ? this.line.type : null; + }, }, mounted() { this.renderGFM(); @@ -53,6 +72,7 @@ export default { } }, methods: { + ...mapActions(['submitSuggestion']), renderGFM() { $(this.$refs['note-body']).renderGFM(); }, @@ -62,19 +82,35 @@ export default { formCancelHandler(shouldConfirm, isDirty) { this.$emit('cancelForm', shouldConfirm, isDirty); }, + applySuggestion({ suggestionId, flashContainer, callback }) { + const { discussion_id: discussionId, id: noteId } = this.note; + + this.submitSuggestion({ discussionId, noteId, suggestionId, flashContainer, callback }); + }, }, }; </script> <template> <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body"> - <div class="note-text md" v-html="note.note_html"></div> + <suggestions + v-if="hasSuggestion && !isEditing" + :suggestions="note.suggestions" + :note-html="note.note_html" + :line-type="lineType" + :help-page-path="helpPagePath" + @apply="applySuggestion" + /> + <div v-else class="note-text md" v-html="note.note_html"></div> <note-form v-if="isEditing" ref="noteForm" :is-editing="isEditing" :note-body="noteBody" :note-id="note.id" + :line="line" + :note="note" + :help-page-path="helpPagePath" :markdown-version="note.cached_markdown_version" @handleFormUpdate="handleFormUpdate" @cancelForm="formCancelHandler" diff --git a/app/assets/javascripts/notes/components/note_edited_text.vue b/app/assets/javascripts/notes/components/note_edited_text.vue index 3d3dbbd7fe1..15ce49d7c31 100644 --- a/app/assets/javascripts/notes/components/note_edited_text.vue +++ b/app/assets/javascripts/notes/components/note_edited_text.vue @@ -39,7 +39,10 @@ export default { <div :class="className"> {{ actionText }} <template v-if="editedBy"> - by <a :href="editedBy.path" class="js-vue-author author-link"> {{ editedBy.name }} </a> + by + <a :href="editedBy.path" :data-user-id="editedBy.id" class="js-user-link author-link"> + {{ editedBy.name }} + </a> </template> {{ actionDetailText }} <time-ago-tooltip :time="editedAt" tooltip-placement="bottom" /> diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue index ad58267b533..9b7f3d3588d 100644 --- a/app/assets/javascripts/notes/components/note_form.vue +++ b/app/assets/javascripts/notes/components/note_form.vue @@ -1,4 +1,5 @@ <script> +import { mergeUrlParams } from '~/lib/utils/url_utility'; import { mapGetters, mapActions } from 'vuex'; import eventHub from '../event_hub'; import issueWarning from '../../vue_shared/components/issue/issue_warning.vue'; @@ -48,13 +49,34 @@ export default { required: false, default: '', }, + resolveDiscussion: { + type: Boolean, + required: false, + default: false, + }, + line: { + type: Object, + required: false, + default: null, + }, + note: { + type: Object, + required: false, + default: null, + }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { return { updatedNoteBody: this.noteBody, conflictWhileEditing: false, isSubmitting: false, - isResolving: false, + isResolving: this.resolveDiscussion, + isUnresolving: !this.resolveDiscussion, resolveAsThread: true, }; }, @@ -73,7 +95,8 @@ export default { return '#'; }, markdownPreviewPath() { - return this.getNoteableDataByProp('preview_note_path'); + const notable = this.getNoteableDataByProp('preview_note_path'); + return mergeUrlParams({ preview_suggestions: true }, notable); }, markdownDocsPath() { return this.getNotesDataByProp('markdownDocsPath'); @@ -87,6 +110,18 @@ export default { isDisabled() { return !this.updatedNoteBody.length || this.isSubmitting; }, + discussionNote() { + const discussionNote = this.discussion.id + ? this.getDiscussionLastNote(this.discussion) + : this.note; + return discussionNote || {}; + }, + canSuggest() { + return ( + this.getNoteableData.can_receive_suggestion && + (this.line && this.line.can_receive_suggestion) + ); + }, }, watch: { noteBody() { @@ -149,7 +184,7 @@ export default { <div ref="editNoteForm" class="note-edit-form current-note-edit-form js-discussion-note-form"> <div v-if="conflictWhileEditing" class="js-conflict-edit-warning alert alert-danger"> This comment has changed since you started editing, please review the - <a :href="noteHash" target="_blank" rel="noopener noreferrer"> updated comment </a> to ensure + <a :href="noteHash" target="_blank" rel="noopener noreferrer">updated comment</a> to ensure information is not lost. </div> <div class="flash-container timeline-content"></div> @@ -165,7 +200,11 @@ export default { :markdown-docs-path="markdownDocsPath" :markdown-version="markdownVersion" :quick-actions-docs-path="quickActionsDocsPath" + :line="line" + :note="discussionNote" + :can-suggest="canSuggest" :add-spacing-classes="false" + :help-page-path="helpPagePath" > <textarea id="note_note" @@ -174,22 +213,20 @@ export default { v-model="updatedNoteBody" :data-supports-quick-actions="!isEditing" name="note[note]" - class="note-textarea js-gfm-input js-note-text -js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input" + class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input" aria-label="Description" placeholder="Write a comment or drag your files here…" @keydown.meta.enter="handleUpdate();" @keydown.ctrl.enter="handleUpdate();" @keydown.up="editMyLastNote();" @keydown.esc="cancelHandler(true);" - > - </textarea> + ></textarea> </markdown-field> <div class="note-form-actions clearfix"> <button :disabled="isDisabled" type="button" - class="js-vue-issue-save btn btn-success js-comment-button " + class="js-vue-issue-save btn btn-success js-comment-button" @click="handleUpdate();" > {{ saveButtonTitle }} diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue index 8b7450783c9..7b39901024d 100644 --- a/app/assets/javascripts/notes/components/note_header.vue +++ b/app/assets/javascripts/notes/components/note_header.vue @@ -73,7 +73,14 @@ export default { {{ __('Toggle discussion') }} </button> </div> - <a v-if="hasAuthor" :href="author.path"> + <a + v-if="hasAuthor" + v-once + :href="author.path" + class="js-user-link" + :data-user-id="author.id" + :data-username="author.username" + > <span class="note-header-author-name">{{ author.name }}</span> <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span> <span class="note-headline-light"> @{{ author.username }} </span> diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue index 29740ddf6ae..d9dd08a7a6b 100644 --- a/app/assets/javascripts/notes/components/noteable_discussion.vue +++ b/app/assets/javascripts/notes/components/noteable_discussion.vue @@ -1,9 +1,12 @@ <script> +import _ from 'underscore'; import { mapActions, mapGetters } from 'vuex'; +import { GlTooltipDirective } from '@gitlab/ui'; import { truncateSha } from '~/lib/utils/text_utility'; -import { s__ } from '~/locale'; +import { s__, __, sprintf } from '~/locale'; import systemNote from '~/vue_shared/components/notes/system_note.vue'; import icon from '~/vue_shared/components/icon.vue'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import Flash from '../../flash'; import { SYSTEM_NOTE } from '../constants'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; @@ -20,14 +23,12 @@ import autosave from '../mixins/autosave'; import noteable from '../mixins/noteable'; import resolvable from '../mixins/resolvable'; import discussionNavigation from '../mixins/discussion_navigation'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { name: 'NoteableDiscussion', components: { icon, noteableNote, - diffWithNote, userAvatarLink, noteHeader, noteSignedOutWidget, @@ -37,9 +38,10 @@ export default { placeholderNote, placeholderSystemNote, systemNote, + TimelineEntryItem, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, mixins: [autosave, noteable, resolvable, discussionNavigation], props: { @@ -47,6 +49,11 @@ export default { type: Object, required: true, }, + line: { + type: Object, + required: false, + default: null, + }, renderDiffFile: { type: Boolean, required: false, @@ -62,45 +69,32 @@ export default { required: false, default: false, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { + const { diff_discussion: isDiffDiscussion, resolved } = this.discussion; + return { isReplying: false, isResolving: false, resolveAsThread: true, - isRepliesToggledByUser: false, + isRepliesCollapsed: Boolean(!isDiffDiscussion && resolved), }; }, computed: { ...mapGetters([ 'getNoteableData', - 'discussionCount', - 'resolvedDiscussionCount', - 'allDiscussions', - 'unresolvedDiscussionsIdsByDiff', - 'unresolvedDiscussionsIdsByDate', - 'unresolvedDiscussions', - 'unresolvedDiscussionsIdsOrdered', 'nextUnresolvedDiscussionId', - 'isLastUnresolvedDiscussion', + 'unresolvedDiscussionsCount', + 'hasUnresolvedDiscussions', + 'showJumpToNextDiscussion', ]), - transformedDiscussion() { - return { - ...this.discussion.notes[0], - truncated_diff_lines: this.discussion.truncated_diff_lines || [], - truncated_diff_lines_path: this.discussion.truncated_diff_lines_path, - diff_file: this.discussion.diff_file, - diff_discussion: this.discussion.diff_discussion, - active: this.discussion.active, - discussion_path: this.discussion.discussion_path, - resolved: this.discussion.resolved, - resolved_by: this.discussion.resolved_by, - resolved_by_push: this.discussion.resolved_by_push, - resolved_at: this.discussion.resolved_at, - }; - }, author() { - return this.transformedDiscussion.author; + return this.initialDiscussion.author; }, canReply() { return this.getNoteableData.current_user.can_create_note; @@ -136,29 +130,19 @@ export default { return null; }, resolvedText() { - return this.transformedDiscussion.resolved_by_push ? 'Automatically resolved' : 'Resolved'; - }, - hasMultipleUnresolvedDiscussions() { - return this.unresolvedDiscussions.length > 1; + return this.discussion.resolved_by_push ? __('Automatically resolved') : __('Resolved'); }, - showJumpToNextDiscussion() { - return ( - this.hasMultipleUnresolvedDiscussions && - !this.isLastUnresolvedDiscussion(this.discussion.id, this.discussionsByDiffOrder) + shouldShowJumpToNextDiscussion() { + return this.showJumpToNextDiscussion( + this.discussion.id, + this.discussionsByDiffOrder ? 'diff' : 'discussion', ); }, shouldRenderDiffs() { - return ( - this.transformedDiscussion.diff_discussion && - this.transformedDiscussion.diff_file && - this.renderDiffFile - ); + return this.discussion.diff_discussion && this.renderDiffFile; }, shouldGroupReplies() { - return !this.shouldRenderDiffs && !this.transformedDiscussion.diff_discussion; - }, - shouldRenderHeader() { - return this.shouldRenderDiffs; + return !this.shouldRenderDiffs && !this.discussion.diff_discussion; }, wrapperComponent() { return this.shouldRenderDiffs ? diffWithNote : 'div'; @@ -170,9 +154,6 @@ export default { return {}; }, - wrapperClass() { - return this.isDiffDiscussion ? '' : 'card discussion-wrapper'; - }, componentClassName() { if (this.shouldRenderDiffs) { if (!this.lastUpdatedAt && !this.discussion.resolved) { @@ -183,28 +164,60 @@ export default { return ''; }, shouldShowDiscussions() { - const isExpanded = this.discussion.expanded; - const { resolved } = this.transformedDiscussion; - const isResolvedNonDiffDiscussion = !this.transformedDiscussion.diff_discussion && resolved; + const { expanded, resolved } = this.discussion; + const isResolvedNonDiffDiscussion = !this.discussion.diff_discussion && resolved; - return isExpanded || this.alwaysExpanded || isResolvedNonDiffDiscussion; + return expanded || this.alwaysExpanded || isResolvedNonDiffDiscussion; }, - isRepliesCollapsed() { - const { discussion, isRepliesToggledByUser } = this; - const { resolved, notes } = discussion; - const hasReplies = notes.length > 1; + actionText() { + const linkStart = `<a href="${_.escape(this.discussion.discussion_path)}">`; + const linkEnd = '</a>'; + + let { commit_id: commitId } = this.discussion; + if (commitId) { + commitId = `<span class="commit-sha">${truncateSha(commitId)}</span>`; + } - return ( - (!discussion.diff_discussion && resolved && hasReplies && !isRepliesToggledByUser) || false + let text = s__('MergeRequests|started a discussion'); + + if (this.discussion.for_commit) { + text = s__( + 'MergeRequests|started a discussion on commit %{linkStart}%{commitId}%{linkEnd}', + ); + } else if (this.discussion.diff_discussion) { + if (this.discussion.active) { + text = s__('MergeRequests|started a discussion on %{linkStart}the diff%{linkEnd}'); + } else { + text = s__( + 'MergeRequests|started a discussion on %{linkStart}an old version of the diff%{linkEnd}', + ); + } + } + + return sprintf( + text, + { + commitId, + linkStart, + linkEnd, + }, + false, ); }, + diffLine() { + if (this.discussion.diff_discussion && this.discussion.truncated_diff_lines) { + return this.discussion.truncated_diff_lines.slice(-1)[0]; + } + + return this.line; + }, }, watch: { isReplying() { if (this.isReplying) { this.$nextTick(() => { // Pass an extra key to separate reply and note edit forms - this.initAutoSave(this.transformedDiscussion, ['Reply']); + this.initAutoSave({ ...this.initialDiscussion, ...this.discussion }, ['Reply']); }); } else { this.disposeAutoSave(); @@ -242,7 +255,7 @@ export default { this.toggleDiscussion({ discussionId: this.discussion.id }); }, toggleReplies() { - this.isRepliesToggledByUser = !this.isRepliesToggledByUser; + this.isRepliesCollapsed = !this.isRepliesCollapsed; }, showReplyForm() { this.isReplying = true; @@ -311,181 +324,171 @@ Please check your network connection and try again.`; </script> <template> - <li class="note note-discussion timeline-entry" :class="componentClassName"> - <div class="timeline-entry-inner"> - <div class="timeline-content"> - <div - :data-discussion-id="transformedDiscussion.discussion_id" - class="discussion js-discussion-container" - > - <div v-if="shouldRenderHeader" class="discussion-header note-wrapper"> - <div class="timeline-icon"> - <user-avatar-link - v-if="author" - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="40" - /> - </div> - <note-header - :author="author" - :created-at="transformedDiscussion.created_at" - :note-id="transformedDiscussion.id" - :include-toggle="true" - :expanded="discussion.expanded" - @toggleHandler="toggleDiscussionHandler" - > - <template v-if="transformedDiscussion.diff_discussion"> - started a discussion on - <a :href="transformedDiscussion.discussion_path"> - <template v-if="transformedDiscussion.active"> - the diff - </template> - <template v-else> - an old version of the diff - </template> - </a> - </template> - <template v-else-if="discussion.for_commit"> - started a discussion on commit - <a :href="discussion.discussion_path"> {{ truncateSha(discussion.commit_id) }} </a> - </template> - <template v-else> - started a discussion - </template> - </note-header> - <note-edited-text - v-if="transformedDiscussion.resolved" - :edited-at="transformedDiscussion.resolved_at" - :edited-by="transformedDiscussion.resolved_by" - :action-text="resolvedText" - class-name="discussion-headline-light js-discussion-headline" - /> - <note-edited-text - v-else-if="lastUpdatedAt" - :edited-at="lastUpdatedAt" - :edited-by="lastUpdatedBy" - action-text="Last updated" - class-name="discussion-headline-light js-discussion-headline" + <timeline-entry-item class="note note-discussion" :class="componentClassName"> + <div class="timeline-content"> + <div :data-discussion-id="discussion.id" class="discussion js-discussion-container"> + <div v-if="shouldRenderDiffs" class="discussion-header note-wrapper"> + <div v-once class="timeline-icon"> + <user-avatar-link + v-if="author" + :link-href="author.path" + :img-src="author.avatar_url" + :img-alt="author.name" + :img-size="40" /> </div> - <div v-if="shouldShowDiscussions" class="discussion-body"> - <component :is="wrapperComponent" v-bind="wrapperComponentProps" :class="wrapperClass"> - <div class="discussion-notes"> - <ul class="notes"> - <template v-if="shouldGroupReplies"> - <component - :is="componentName(initialDiscussion)" - :note="componentData(initialDiscussion)" - @handleDeleteNote="deleteNoteHandler" - > - <slot slot="avatar-badge" name="avatar-badge"> </slot> - </component> - <toggle-replies-widget - v-if="hasReplies" - :collapsed="isRepliesCollapsed" - :replies="replies" - @toggle="toggleReplies" + <note-header + :author="author" + :created-at="initialDiscussion.created_at" + :note-id="initialDiscussion.id" + :include-toggle="true" + :expanded="discussion.expanded" + @toggleHandler="toggleDiscussionHandler" + > + <span v-html="actionText"></span> + </note-header> + <note-edited-text + v-if="discussion.resolved" + :edited-at="discussion.resolved_at" + :edited-by="discussion.resolved_by" + :action-text="resolvedText" + class-name="discussion-headline-light js-discussion-headline" + /> + <note-edited-text + v-else-if="lastUpdatedAt" + :edited-at="lastUpdatedAt" + :edited-by="lastUpdatedBy" + action-text="Last updated" + class-name="discussion-headline-light js-discussion-headline" + /> + </div> + <div v-if="shouldShowDiscussions" class="discussion-body"> + <component + :is="wrapperComponent" + v-bind="wrapperComponentProps" + class="card discussion-wrapper" + > + <div class="discussion-notes"> + <ul class="notes"> + <template v-if="shouldGroupReplies"> + <component + :is="componentName(initialDiscussion)" + :note="componentData(initialDiscussion)" + :line="line" + :help-page-path="helpPagePath" + @handleDeleteNote="deleteNoteHandler" + > + <note-edited-text + v-if="discussion.resolved" + slot="discussion-resolved-text" + :edited-at="discussion.resolved_at" + :edited-by="discussion.resolved_by" + :action-text="resolvedText" + class-name="discussion-headline-light js-discussion-headline discussion-resolved-text" /> - <template v-if="!isRepliesCollapsed"> - <component - :is="componentName(note)" - v-for="note in replies" - :key="note.id" - :note="componentData(note)" - @handleDeleteNote="deleteNoteHandler" - /> - </template> - </template> - <template v-else> + <slot slot="avatar-badge" name="avatar-badge"></slot> + </component> + <toggle-replies-widget + v-if="hasReplies" + :collapsed="isRepliesCollapsed" + :replies="replies" + @toggle="toggleReplies" + /> + <template v-if="!isRepliesCollapsed"> <component :is="componentName(note)" - v-for="(note, index) in discussion.notes" + v-for="note in replies" :key="note.id" :note="componentData(note)" + :help-page-path="helpPagePath" + :line="line" @handleDeleteNote="deleteNoteHandler" - > - <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"> </slot> - </component> + /> </template> - </ul> - <div - v-if="!isRepliesCollapsed" - :class="{ 'is-replying': isReplying }" - class="discussion-reply-holder" - > - <template v-if="!isReplying && canReply"> - <div class="discussion-with-resolve-btn"> + </template> + <template v-else> + <component + :is="componentName(note)" + v-for="(note, index) in discussion.notes" + :key="note.id" + :note="componentData(note)" + :help-page-path="helpPagePath" + :line="diffLine" + @handleDeleteNote="deleteNoteHandler" + > + <slot v-if="index === 0" slot="avatar-badge" name="avatar-badge"></slot> + </component> + </template> + </ul> + <div + v-if="!isRepliesCollapsed || !hasReplies" + :class="{ 'is-replying': isReplying }" + class="discussion-reply-holder" + > + <template v-if="!isReplying && canReply"> + <div class="discussion-with-resolve-btn"> + <button + type="button" + class="js-vue-discussion-reply btn btn-text-field qa-discussion-reply" + title="Add a reply" + @click="showReplyForm" + > + Reply... + </button> + <div v-if="discussion.resolvable"> <button type="button" - class="js-vue-discussion-reply btn btn-text-field mr-sm-2 qa-discussion-reply" - title="Add a reply" - @click="showReplyForm" + class="btn btn-default ml-sm-2" + @click="resolveHandler();" > - Reply... + <i v-if="isResolving" aria-hidden="true" class="fa fa-spinner fa-spin"></i> + {{ resolveButtonTitle }} </button> - <div v-if="discussion.resolvable"> + </div> + <div + v-if="discussion.resolvable" + class="btn-group discussion-actions ml-sm-2" + role="group" + > + <div v-if="!discussionResolved" class="btn-group" role="group"> + <a + v-gl-tooltip + :href="discussion.resolve_with_issue_path" + :title="s__('MergeRequests|Resolve this discussion in a new issue')" + class="new-issue-for-discussion btn btn-default discussion-create-issue-btn" + > + <icon name="issue-new" /> + </a> + </div> + <div v-if="shouldShowJumpToNextDiscussion" class="btn-group" role="group"> <button - type="button" - class="btn btn-default mr-sm-2" - @click="resolveHandler();" + v-gl-tooltip + class="btn btn-default discussion-next-btn" + title="Jump to next unresolved discussion" + @click="jumpToNextDiscussion" > - <i - v-if="isResolving" - aria-hidden="true" - class="fa fa-spinner fa-spin" - ></i> - {{ resolveButtonTitle }} + <icon name="comment-next" /> </button> </div> - <div - v-if="discussion.resolvable" - class="btn-group discussion-actions ml-sm-2" - role="group" - > - <div v-if="!discussionResolved" class="btn-group" role="group"> - <a - v-tooltip - :href="discussion.resolve_with_issue_path" - :title="s__('MergeRequests|Resolve this discussion in a new issue')" - class="new-issue-for-discussion btn - btn-default discussion-create-issue-btn" - data-container="body" - > - <icon name="issue-new" /> - </a> - </div> - <div v-if="showJumpToNextDiscussion" class="btn-group" role="group"> - <button - v-tooltip - class="btn btn-default discussion-next-btn" - title="Jump to next unresolved discussion" - data-container="body" - @click="jumpToNextDiscussion" - > - <icon name="comment-next" /> - </button> - </div> - </div> </div> - </template> - <note-form - v-if="isReplying" - ref="noteForm" - :discussion="discussion" - :is-editing="false" - save-button-title="Comment" - @handleFormUpdate="saveReply" - @cancelForm="cancelReplyForm" - /> - <note-signed-out-widget v-if="!canReply" /> - </div> + </div> + </template> + <note-form + v-if="isReplying" + ref="noteForm" + :discussion="discussion" + :is-editing="false" + :line="diffLine" + save-button-title="Comment" + @handleFormUpdate="saveReply" + @cancelForm="cancelReplyForm" + /> + <note-signed-out-widget v-if="!canReply" /> </div> - </component> - </div> + </div> + </component> </div> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue index c2e49f8b23f..4c02588127e 100644 --- a/app/assets/javascripts/notes/components/noteable_note.vue +++ b/app/assets/javascripts/notes/components/noteable_note.vue @@ -2,6 +2,7 @@ import $ from 'jquery'; import { mapGetters, mapActions } from 'vuex'; import { escape } from 'underscore'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import Flash from '../../flash'; import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import noteHeader from './note_header.vue'; @@ -18,6 +19,7 @@ export default { noteHeader, noteActions, noteBody, + TimelineEntryItem, }, mixins: [noteable, resolvable], props: { @@ -25,6 +27,16 @@ export default { type: Object, required: true, }, + line: { + type: Object, + required: false, + default: null, + }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -169,61 +181,65 @@ export default { </script> <template> - <li + <timeline-entry-item :id="noteAnchorId" :class="classNameBindings" :data-award-url="note.toggle_award_path" :data-note-id="note.id" - class="note timeline-entry note-wrapper" + class="note note-wrapper" > - <div class="timeline-entry-inner"> - <div class="timeline-icon"> - <user-avatar-link - :link-href="author.path" - :img-src="author.avatar_url" - :img-alt="author.name" - :img-size="40" - > - <slot slot="avatar-badge" name="avatar-badge"> </slot> - </user-avatar-link> + <div v-once class="timeline-icon"> + <user-avatar-link + :link-href="author.path" + :img-src="author.avatar_url" + :img-alt="author.name" + :img-size="40" + > + <slot slot="avatar-badge" name="avatar-badge"></slot> + </user-avatar-link> + </div> + <div class="timeline-content"> + <div class="note-header"> + <note-header + v-once + :author="author" + :created-at="note.created_at" + :note-id="note.id" + action-text="commented" + /> + <note-actions + :author-id="author.id" + :note-id="note.id" + :note-url="note.noteable_note_url" + :access-level="note.human_access" + :can-edit="note.current_user.can_edit" + :can-award-emoji="note.current_user.can_award_emoji" + :can-delete="note.current_user.can_edit" + :can-report-as-abuse="canReportAsAbuse" + :can-resolve="note.current_user.can_resolve" + :report-abuse-path="note.report_abuse_path" + :resolvable="note.resolvable" + :is-resolved="note.resolved" + :is-resolving="isResolving" + :resolved-by="note.resolved_by" + @handleEdit="editHandler" + @handleDelete="deleteHandler" + @handleResolve="resolveHandler" + /> </div> - <div class="timeline-content"> - <div class="note-header"> - <note-header - :author="author" - :created-at="note.created_at" - :note-id="note.id" - action-text="commented" - /> - <note-actions - :author-id="author.id" - :note-id="note.id" - :note-url="note.noteable_note_url" - :access-level="note.human_access" - :can-edit="note.current_user.can_edit" - :can-award-emoji="note.current_user.can_award_emoji" - :can-delete="note.current_user.can_edit" - :can-report-as-abuse="canReportAsAbuse" - :can-resolve="note.current_user.can_resolve" - :report-abuse-path="note.report_abuse_path" - :resolvable="note.resolvable" - :is-resolved="note.resolved" - :is-resolving="isResolving" - :resolved-by="note.resolved_by" - @handleEdit="editHandler" - @handleDelete="deleteHandler" - @handleResolve="resolveHandler" - /> - </div> + <div class="timeline-discussion-body"> + <slot name="discussion-resolved-text"></slot> <note-body ref="noteBody" :note="note" + :line="line" :can-edit="note.current_user.can_edit" :is-editing="isEditing" + :help-page-path="helpPagePath" @handleFormUpdate="formUpdateHandler" @cancelForm="formCancelHandler" /> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 79ece036e69..f3fcfdfda05 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -12,6 +12,7 @@ import placeholderNote from '../../vue_shared/components/notes/placeholder_note. import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; +import initUserPopovers from '../../user_popovers'; export default { name: 'NotesApp', @@ -22,6 +23,7 @@ export default { commentForm, placeholderNote, placeholderSystemNote, + skeletonLoadingContainer, }, props: { noteableData: { @@ -47,6 +49,11 @@ export default { required: false, default: 0, }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { return { @@ -59,7 +66,6 @@ export default { 'isNotesFetched', 'discussions', 'getNotesDataByProp', - 'discussionCount', 'isLoading', 'commentsDisabled', ]), @@ -101,47 +107,33 @@ export default { if (parentElement && parentElement.classList.contains('js-vue-notes-event')) { parentElement.addEventListener('toggleAward', event => { const { awardName, noteId } = event.detail; - this.actionToggleAward({ awardName, noteId }); + this.toggleAward({ awardName, noteId }); }); } }, updated() { - this.$nextTick(() => highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member'))); + this.$nextTick(() => { + highlightCurrentUser(this.$el.querySelectorAll('.gfm-project_member')); + initUserPopovers(this.$el.querySelectorAll('.js-user-link')); + }); }, methods: { - ...mapActions({ - setLoadingState: 'setLoadingState', - fetchDiscussions: 'fetchDiscussions', - poll: 'poll', - actionToggleAward: 'toggleAward', - scrollToNoteIfNeeded: 'scrollToNoteIfNeeded', - setNotesData: 'setNotesData', - setNoteableData: 'setNoteableData', - setUserData: 'setUserData', - setLastFetchedAt: 'setLastFetchedAt', - setTargetNoteHash: 'setTargetNoteHash', - toggleDiscussion: 'toggleDiscussion', - setNotesFetchedState: 'setNotesFetchedState', - startTaskList: 'startTaskList', - }), - getComponentName(discussion) { - if (discussion.isSkeletonNote) { - return skeletonLoadingContainer; - } - if (discussion.isPlaceholderNote) { - if (discussion.placeholderType === constants.SYSTEM_NOTE) { - return placeholderSystemNote; - } - return placeholderNote; - } else if (discussion.individual_note) { - return discussion.notes[0].system ? systemNote : noteableNote; - } - - return noteableDiscussion; - }, - getComponentData(discussion) { - return discussion.individual_note ? { note: discussion.notes[0] } : { discussion }; - }, + ...mapActions([ + 'setLoadingState', + 'fetchDiscussions', + 'poll', + 'toggleAward', + 'scrollToNoteIfNeeded', + 'setNotesData', + 'setNoteableData', + 'setUserData', + 'setLastFetchedAt', + 'setTargetNoteHash', + 'toggleDiscussion', + 'setNotesFetchedState', + 'expandDiscussion', + 'startTaskList', + ]), fetchNotes() { if (this.isFetching) return null; @@ -181,31 +173,47 @@ export default { const noteId = hash && hash.replace(/^note_/, ''); if (noteId) { - this.discussions.forEach(discussion => { - if (discussion.notes) { - discussion.notes.forEach(note => { - if (`${note.id}` === `${noteId}`) { - // FIXME: this modifies the store state without using a mutation/action - Object.assign(discussion, { expanded: true }); - } - }); - } - }); + const discussion = this.discussions.find(d => d.notes.some(({ id }) => id === noteId)); + + if (discussion) { + this.expandDiscussion({ discussionId: discussion.id }); + } } }, }, + systemNote: constants.SYSTEM_NOTE, }; </script> <template> <div v-show="shouldShow" id="notes"> <ul id="notes-list" class="notes main-notes-list timeline"> - <component - :is="getComponentName(discussion)" - v-for="discussion in allDiscussions" - :key="discussion.id" - v-bind="getComponentData(discussion)" - /> + <template v-for="discussion in allDiscussions"> + <skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" /> + <template v-else-if="discussion.isPlaceholderNote"> + <placeholder-system-note + v-if="discussion.placeholderType === $options.systemNote" + :key="discussion.id" + :note="discussion.notes[0]" + /> + <placeholder-note v-else :key="discussion.id" :note="discussion.notes[0]" /> + </template> + <template v-else-if="discussion.individual_note"> + <system-note + v-if="discussion.notes[0].system" + :key="discussion.id" + :note="discussion.notes[0]" + /> + <noteable-note v-else :key="discussion.id" :note="discussion.notes[0]" /> + </template> + <noteable-discussion + v-else + :key="discussion.id" + :discussion="discussion" + :render-diff-file="true" + :help-page-path="helpPagePath" + /> + </template> </ul> <comment-form diff --git a/app/assets/javascripts/notes/mixins/discussion_navigation.js b/app/assets/javascripts/notes/mixins/discussion_navigation.js index f7c4deee1f8..3d89d907777 100644 --- a/app/assets/javascripts/notes/mixins/discussion_navigation.js +++ b/app/assets/javascripts/notes/mixins/discussion_navigation.js @@ -1,29 +1,56 @@ import { scrollToElement } from '~/lib/utils/common_utils'; +import eventHub from '../../notes/event_hub'; export default { methods: { - jumpToDiscussion(id) { - if (id) { - const activeTab = window.mrTabs.currentAction; - const selector = - activeTab === 'diffs' - ? `ul.notes[data-discussion-id="${id}"]` - : `div.discussion[data-discussion-id="${id}"]`; - const el = document.querySelector(selector); + diffsJump(id) { + const selector = `ul.notes[data-discussion-id="${id}"]`; - if (activeTab === 'commits' || activeTab === 'pipelines') { - window.mrTabs.activateTab('show'); - } + eventHub.$once('scrollToDiscussion', () => { + const el = document.querySelector(selector); if (el) { - this.expandDiscussion({ discussionId: id }); - scrollToElement(el); + return true; } + + return false; + }); + + this.expandDiscussion({ discussionId: id }); + }, + discussionJump(id) { + const selector = `div.discussion[data-discussion-id="${id}"]`; + + const el = document.querySelector(selector); + + this.expandDiscussion({ discussionId: id }); + + if (el) { + scrollToElement(el); + + return true; } return false; }, + jumpToDiscussion(id) { + if (id) { + const activeTab = window.mrTabs.currentAction; + + if (activeTab === 'diffs') { + this.diffsJump(id); + } else if (activeTab === 'commits' || activeTab === 'pipelines') { + window.mrTabs.eventHub.$once('MergeRequestTabChange', () => { + setTimeout(() => this.discussionJump(id), 0); + }); + + window.mrTabs.tabShown('show'); + } else { + this.discussionJump(id); + } + } + }, }, }; diff --git a/app/assets/javascripts/notes/mixins/resolvable.js b/app/assets/javascripts/notes/mixins/resolvable.js index cd8394e0619..8edf3d088bb 100644 --- a/app/assets/javascripts/notes/mixins/resolvable.js +++ b/app/assets/javascripts/notes/mixins/resolvable.js @@ -36,7 +36,7 @@ export default { const discussion = this.resolveAsThread; const endpoint = discussion ? this.discussion.resolve_path : `${this.note.path}/resolve`; - this.toggleResolveNote({ endpoint, isResolved, discussion }) + return this.toggleResolveNote({ endpoint, isResolved, discussion }) .then(() => { this.isResolving = false; }) diff --git a/app/assets/javascripts/notes/services/notes_service.js b/app/assets/javascripts/notes/services/notes_service.js index 47a6f07cce2..237e70c0a4c 100644 --- a/app/assets/javascripts/notes/services/notes_service.js +++ b/app/assets/javascripts/notes/services/notes_service.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import Api from '~/api'; import VueResource from 'vue-resource'; import * as constants from '../constants'; @@ -44,4 +45,7 @@ export default { toggleIssueState(endpoint, data) { return Vue.http.put(endpoint, data); }, + applySuggestion(id) { + return Api.applySuggestion(id); + }, }; diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js index 5b2f0540020..65f85314fa0 100644 --- a/app/assets/javascripts/notes/stores/actions.js +++ b/app/assets/javascripts/notes/stores/actions.js @@ -11,13 +11,19 @@ import * as constants from '../constants'; import service from '../services/notes_service'; import loadAwardsHandler from '../../awards_handler'; import sidebarTimeTrackingEventHub from '../../sidebar/event_hub'; -import { isInViewport, scrollToElement } from '../../lib/utils/common_utils'; +import { isInViewport, scrollToElement, isInMRPage } from '../../lib/utils/common_utils'; import mrWidgetEventHub from '../../vue_merge_request_widget/event_hub'; import { __ } from '~/locale'; let eTagPoll; -export const expandDiscussion = ({ commit }, data) => commit(types.EXPAND_DISCUSSION, data); +export const expandDiscussion = ({ commit, dispatch }, data) => { + if (data.discussionId) { + dispatch('diffs/renderFileForDiscussionId', data.discussionId, { root: true }); + } + + commit(types.EXPAND_DISCUSSION, data); +}; export const collapseDiscussion = ({ commit }, data) => commit(types.COLLAPSE_DISCUSSION, data); @@ -39,12 +45,13 @@ export const setNotesFetchedState = ({ commit }, state) => export const toggleDiscussion = ({ commit }, data) => commit(types.TOGGLE_DISCUSSION, data); -export const fetchDiscussions = ({ commit }, { path, filter }) => +export const fetchDiscussions = ({ commit, dispatch }, { path, filter }) => service .fetchDiscussions(path, filter) .then(res => res.json()) .then(discussions => { commit(types.SET_INITIAL_DISCUSSIONS, discussions); + dispatch('updateResolvableDiscussonsCounts'); }); export const updateDiscussion = ({ commit, state }, discussion) => { @@ -53,11 +60,18 @@ export const updateDiscussion = ({ commit, state }, discussion) => { return utils.findNoteObjectById(state.discussions, discussion.id); }; -export const deleteNote = ({ commit, dispatch }, note) => +export const deleteNote = ({ commit, dispatch, state }, note) => service.deleteNote(note.path).then(() => { + const discussion = state.discussions.find(({ id }) => id === note.discussion_id); + commit(types.DELETE_NOTE, note); dispatch('updateMergeRequestWidget'); + dispatch('updateResolvableDiscussonsCounts'); + + if (isInMRPage()) { + dispatch('diffs/removeDiscussionsFromDiff', discussion); + } }); export const updateNote = ({ commit, dispatch }, { endpoint, note }) => @@ -89,6 +103,7 @@ export const createNewNote = ({ commit, dispatch }, { endpoint, data }) => dispatch('updateMergeRequestWidget'); dispatch('startTaskList'); + dispatch('updateResolvableDiscussonsCounts'); } return res; }); @@ -104,6 +119,8 @@ export const toggleResolveNote = ({ commit, dispatch }, { endpoint, isResolved, commit(mutationType, res); + dispatch('updateResolvableDiscussonsCounts'); + dispatch('updateMergeRequestWidget'); }); @@ -385,5 +402,28 @@ export const startTaskList = ({ dispatch }) => }), ); +export const updateResolvableDiscussonsCounts = ({ commit }) => + commit(types.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS); + +export const submitSuggestion = ( + { commit }, + { discussionId, noteId, suggestionId, flashContainer, callback }, +) => { + service + .applySuggestion(suggestionId) + .then(() => { + commit(types.APPLY_SUGGESTION, { discussionId, noteId, suggestionId }); + callback(); + }) + .catch(() => { + Flash( + __('Something went wrong while applying the suggestion. Please try again.'), + 'alert', + flashContainer, + ); + callback(); + }); +}; + // prevent babel-plugin-rewire from generating an invalid default during karma tests export default () => {}; diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js index 980d79605d7..0ffc0cb2593 100644 --- a/app/assets/javascripts/notes/stores/getters.js +++ b/app/assets/javascripts/notes/stores/getters.js @@ -53,30 +53,26 @@ export const getCurrentUserLastNote = state => export const getDiscussionLastNote = state => discussion => reverseNotes(discussion.notes).find(el => isLastNote(el, state)); -export const discussionCount = state => { - const filteredDiscussions = state.discussions.filter(n => !n.individual_note && n.resolvable); +export const unresolvedDiscussionsCount = state => state.unresolvedDiscussionsCount; +export const resolvableDiscussionsCount = state => state.resolvableDiscussionsCount; +export const hasUnresolvedDiscussions = state => state.hasUnresolvedDiscussions; - return filteredDiscussions.length; -}; - -export const unresolvedDiscussions = (state, getters) => { - const resolvedMap = getters.resolvedDiscussionsById; - - return state.discussions.filter(n => !n.individual_note && !resolvedMap[n.id]); -}; +export const showJumpToNextDiscussion = (state, getters) => (discussionId, mode = 'discussion') => { + const orderedDiffs = + mode !== 'discussion' + ? getters.unresolvedDiscussionsIdsByDiff + : getters.unresolvedDiscussionsIdsByDate; -export const allDiscussions = (state, getters) => { - const resolved = getters.resolvedDiscussionsById; - const unresolved = getters.unresolvedDiscussions; + const indexOf = orderedDiffs.indexOf(discussionId); - return Object.values(resolved).concat(unresolved); + return indexOf !== -1 && indexOf < orderedDiffs.length - 1; }; export const isDiscussionResolved = (state, getters) => discussionId => getters.resolvedDiscussionsById[discussionId] !== undefined; -export const allResolvableDiscussions = (state, getters) => - getters.allDiscussions.filter(d => !d.individual_note && d.resolvable); +export const allResolvableDiscussions = state => + state.discussions.filter(d => !d.individual_note && d.resolvable); export const resolvedDiscussionsById = state => { const map = {}; @@ -119,7 +115,7 @@ export const unresolvedDiscussionsIdsByDate = (state, getters) => // line numbers. export const unresolvedDiscussionsIdsByDiff = (state, getters) => getters.allResolvableDiscussions - .filter(d => !d.resolved) + .filter(d => !d.resolved && d.active) .sort((a, b) => { if (!a.diff_file || !b.diff_file) { return 0; @@ -147,15 +143,12 @@ export const resolvedDiscussionCount = (state, getters) => { return Object.keys(resolvedMap).length; }; -export const discussionTabCounter = state => { - let all = []; - - state.discussions.forEach(discussion => { - all = all.concat(discussion.notes.filter(note => !note.system && !note.placeholder)); - }); - - return all.length; -}; +export const discussionTabCounter = state => + state.discussions.reduce( + (acc, discussion) => + acc + discussion.notes.filter(note => !note.system && !note.placeholder).length, + 0, + ); // Returns the list of discussion IDs ordered according to given parameter // @param {Boolean} diffOrder - is ordered by diff? @@ -182,8 +175,10 @@ export const isLastUnresolvedDiscussion = (state, getters) => (discussionId, dif export const nextUnresolvedDiscussionId = (state, getters) => (discussionId, diffOrder) => { const idsOrdered = getters.unresolvedDiscussionsIdsOrdered(diffOrder); const currentIndex = idsOrdered.indexOf(discussionId); + const slicedIds = idsOrdered.slice(currentIndex + 1, currentIndex + 2); - return idsOrdered.slice(currentIndex + 1, currentIndex + 2)[0]; + // Get the first ID if there is none after the currentIndex + return slicedIds.length ? idsOrdered.slice(currentIndex + 1, currentIndex + 2)[0] : idsOrdered[0]; }; // @param {Boolean} diffOrder - is ordered by diff? diff --git a/app/assets/javascripts/notes/stores/modules/index.js b/app/assets/javascripts/notes/stores/modules/index.js index 8aea269ea7d..887e6d22b06 100644 --- a/app/assets/javascripts/notes/stores/modules/index.js +++ b/app/assets/javascripts/notes/stores/modules/index.js @@ -20,8 +20,12 @@ export default () => ({ userData: {}, noteableData: { current_user: {}, + preview_note_path: 'path/to/preview', }, commentsDisabled: false, + resolvableDiscussionsCount: 0, + unresolvedDiscussionsCount: 0, + hasUnresolvedDiscussions: false, }, actions, getters, diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js index dfbf3b7b34b..df943c155f4 100644 --- a/app/assets/javascripts/notes/stores/mutation_types.js +++ b/app/assets/javascripts/notes/stores/mutation_types.js @@ -16,11 +16,13 @@ export const SET_DISCUSSION_DIFF_LINES = 'SET_DISCUSSION_DIFF_LINES'; export const SET_NOTES_FETCHED_STATE = 'SET_NOTES_FETCHED_STATE'; export const SET_NOTES_LOADING_STATE = 'SET_NOTES_LOADING_STATE'; export const DISABLE_COMMENTS = 'DISABLE_COMMENTS'; +export const APPLY_SUGGESTION = 'APPLY_SUGGESTION'; // DISCUSSION export const COLLAPSE_DISCUSSION = 'COLLAPSE_DISCUSSION'; export const EXPAND_DISCUSSION = 'EXPAND_DISCUSSION'; export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION'; +export const UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS = 'UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS'; // Issue export const CLOSE_ISSUE = 'CLOSE_ISSUE'; diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js index f6054e0be87..8992454be2e 100644 --- a/app/assets/javascripts/notes/stores/mutations.js +++ b/app/assets/javascripts/notes/stores/mutations.js @@ -22,8 +22,10 @@ export default { if (isDiscussion && isInMRPage()) { noteData.resolvable = note.resolvable; noteData.resolved = false; + noteData.active = true; noteData.resolve_path = note.resolve_path; noteData.resolve_with_issue_path = note.resolve_with_issue_path; + noteData.diff_discussion = false; } state.discussions.push(noteData); @@ -97,33 +99,36 @@ export default { }, [types.SET_INITIAL_DISCUSSIONS](state, discussionsData) { - const discussions = []; + const discussions = discussionsData.reduce((acc, d) => { + const discussion = { ...d }; + const diffData = {}; - discussionsData.forEach(discussion => { if (discussion.diff_file) { - Object.assign(discussion, { - file_hash: discussion.diff_file.file_hash, - truncated_diff_lines: discussion.truncated_diff_lines || [], - }); + diffData.file_hash = discussion.diff_file.file_hash; + diffData.truncated_diff_lines = discussion.truncated_diff_lines || []; } // To support legacy notes, should be very rare case. if (discussion.individual_note && discussion.notes.length > 1) { discussion.notes.forEach(n => { - discussions.push({ + acc.push({ ...discussion, + ...diffData, notes: [n], // override notes array to only have one item to mimick individual_note }); }); } else { const oldNote = utils.findNoteObjectById(state.discussions, discussion.id); - discussions.push({ + acc.push({ ...discussion, + ...diffData, expanded: oldNote ? oldNote.expanded : discussion.expanded, }); } - }); + + return acc; + }, []); Object.assign(state, { discussions }); }, @@ -174,9 +179,11 @@ export default { } }, - [types.TOGGLE_DISCUSSION](state, { discussionId }) { + [types.TOGGLE_DISCUSSION](state, { discussionId, forceExpanded = null }) { const discussion = utils.findNoteObjectById(state.discussions, discussionId); - Object.assign(discussion, { expanded: !discussion.expanded }); + Object.assign(discussion, { + expanded: forceExpanded === null ? !discussion.expanded : forceExpanded, + }); }, [types.UPDATE_NOTE](state, note) { @@ -190,12 +197,25 @@ export default { } }, + [types.APPLY_SUGGESTION](state, { noteId, discussionId, suggestionId }) { + const noteObj = utils.findNoteObjectById(state.discussions, discussionId); + const comment = utils.findNoteObjectById(noteObj.notes, noteId); + + comment.suggestions = comment.suggestions.map(suggestion => ({ + ...suggestion, + applied: suggestion.applied || suggestion.id === suggestionId, + appliable: false, + })); + }, + [types.UPDATE_DISCUSSION](state, noteData) { const note = noteData; const selectedDiscussion = state.discussions.find(disc => disc.id === note.id); note.expanded = true; // override expand flag to prevent collapse if (note.diff_file) { - Object.assign(note, { file_hash: note.diff_file.file_hash }); + Object.assign(note, { + file_hash: note.diff_file.file_hash, + }); } Object.assign(selectedDiscussion, { ...note }); }, @@ -229,4 +249,16 @@ export default { [types.DISABLE_COMMENTS](state, value) { state.commentsDisabled = value; }, + [types.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS](state) { + state.resolvableDiscussionsCount = state.discussions.filter( + discussion => !discussion.individual_note && discussion.resolvable, + ).length; + state.unresolvedDiscussionsCount = state.discussions.filter( + discussion => + !discussion.individual_note && + discussion.resolvable && + discussion.notes.some(note => note.resolvable && !note.resolved), + ).length; + state.hasUnresolvedDiscussions = state.unresolvedDiscussionsCount > 1; + }, }; diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js index c4c8cf86cb0..e7fa05faa8a 100644 --- a/app/assets/javascripts/notifications_dropdown.js +++ b/app/assets/javascripts/notifications_dropdown.js @@ -12,6 +12,10 @@ export default function notificationsDropdown() { const form = $(this).parents('.notification-form:first'); form.find('.js-notification-loading').toggleClass('fa-bell fa-spin fa-spinner'); + if (form.hasClass('no-label')) { + form.find('.js-notification-loading').toggleClass('hidden'); + form.find('.js-notifications-icon').toggleClass('hidden'); + } form.find('#notification_setting_level').val(notificationLevel); form.submit(); }); diff --git a/app/assets/javascripts/pages/dashboard/projects/index.js b/app/assets/javascripts/pages/dashboard/projects/index.js index 0c585e162cb..8f98be79640 100644 --- a/app/assets/javascripts/pages/dashboard/projects/index.js +++ b/app/assets/javascripts/pages/dashboard/projects/index.js @@ -1,3 +1,7 @@ import ProjectsList from '~/projects_list'; +import Star from '../../../star'; -document.addEventListener('DOMContentLoaded', () => new ProjectsList()); +document.addEventListener('DOMContentLoaded', () => { + new ProjectsList(); // eslint-disable-line no-new + new Star('.project-row'); // eslint-disable-line no-new +}); diff --git a/app/assets/javascripts/pages/groups/clusters/index/index.js b/app/assets/javascripts/pages/groups/clusters/index/index.js index 21efc4f6d00..845a5f7042c 100644 --- a/app/assets/javascripts/pages/groups/clusters/index/index.js +++ b/app/assets/javascripts/pages/groups/clusters/index/index.js @@ -1,7 +1,5 @@ -import PersistentUserCallout from '~/persistent_user_callout'; +import initDismissableCallout from '~/dismissable_callout'; document.addEventListener('DOMContentLoaded', () => { - const callout = document.querySelector('.gcp-signup-offer'); - - if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new + initDismissableCallout('.gcp-signup-offer'); }); diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index 32b55575f95..01ef445c901 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -5,6 +5,7 @@ import initSettingsPanels from '~/settings_panels'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import { GROUP_BADGE } from '~/badges/constants'; +import groupsSelect from '~/groups_select'; import projectSelect from '~/project_select'; document.addEventListener('DOMContentLoaded', () => { @@ -17,5 +18,8 @@ document.addEventListener('DOMContentLoaded', () => { ); mountBadgeSettings(GROUP_BADGE); + // Initialize Subgroups selector + groupsSelect(); + projectSelect(); }); diff --git a/app/assets/javascripts/pages/groups/index.js b/app/assets/javascripts/pages/groups/index.js index 00e2d7fc998..bf80d8b8193 100644 --- a/app/assets/javascripts/pages/groups/index.js +++ b/app/assets/javascripts/pages/groups/index.js @@ -1,12 +1,6 @@ -import PersistentUserCallout from '~/persistent_user_callout'; +import initDismissableCallout from '~/dismissable_callout'; import initGkeDropdowns from '~/projects/gke_cluster_dropdowns'; -function initCallout() { - const callout = document.querySelector('.gcp-signup-offer'); - - if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new -} - document.addEventListener('DOMContentLoaded', () => { const { page } = document.body.dataset; const newClusterViews = [ @@ -16,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => { ]; if (newClusterViews.indexOf(page) > -1) { - initCallout(); + initDismissableCallout('.gcp-signup-offer'); initGkeDropdowns(); } }); diff --git a/app/assets/javascripts/pages/profiles/show/emoji_menu.js b/app/assets/javascripts/pages/profiles/show/emoji_menu.js index 094837b40e0..286c1f1e929 100644 --- a/app/assets/javascripts/pages/profiles/show/emoji_menu.js +++ b/app/assets/javascripts/pages/profiles/show/emoji_menu.js @@ -1,3 +1,4 @@ +import '~/commons/bootstrap'; import { AwardsHandler } from '~/awards_handler'; class EmojiMenu extends AwardsHandler { diff --git a/app/assets/javascripts/pages/projects/clusters/index/index.js b/app/assets/javascripts/pages/projects/clusters/index/index.js index 21efc4f6d00..845a5f7042c 100644 --- a/app/assets/javascripts/pages/projects/clusters/index/index.js +++ b/app/assets/javascripts/pages/projects/clusters/index/index.js @@ -1,7 +1,5 @@ -import PersistentUserCallout from '~/persistent_user_callout'; +import initDismissableCallout from '~/dismissable_callout'; document.addEventListener('DOMContentLoaded', () => { - const callout = document.querySelector('.gcp-signup-offer'); - - if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new + initDismissableCallout('.gcp-signup-offer'); }); diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js index f5b1cf85e68..899d5925956 100644 --- a/app/assets/javascripts/pages/projects/edit/index.js +++ b/app/assets/javascripts/pages/projects/edit/index.js @@ -3,8 +3,8 @@ import initSettingsPanels from '~/settings_panels'; import setupProjectEdit from '~/project_edit'; import initConfirmDangerModal from '~/confirm_danger_modal'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; +import fileUpload from '~/lib/utils/file_upload'; import initProjectLoadingSpinner from '../shared/save_project_loader'; -import projectAvatar from '../shared/project_avatar'; import initProjectPermissionsSettings from '../shared/permissions'; document.addEventListener('DOMContentLoaded', () => { @@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => { setupProjectEdit(); // Initialize expandable settings panels initSettingsPanels(); - projectAvatar(); + fileUpload('.js-choose-project-avatar-button', '.js-project-avatar-input'); initProjectPermissionsSettings(); initConfirmDangerModal(); mountBadgeSettings(PROJECT_BADGE); diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index b0345b4e50d..5659e13981a 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,5 +1,5 @@ +import initDismissableCallout from '~/dismissable_callout'; import initGkeDropdowns from '~/projects/gke_cluster_dropdowns'; -import PersistentUserCallout from '../../persistent_user_callout'; import Project from './project'; import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation'; @@ -12,9 +12,7 @@ document.addEventListener('DOMContentLoaded', () => { ]; if (newClusterViews.indexOf(page) > -1) { - const callout = document.querySelector('.gcp-signup-offer'); - if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new - + initDismissableCallout('.gcp-signup-offer'); initGkeDropdowns(); } diff --git a/app/assets/javascripts/pages/projects/issues/form.js b/app/assets/javascripts/pages/projects/issues/form.js index 02a56685a35..f99023ad8e7 100644 --- a/app/assets/javascripts/pages/projects/issues/form.js +++ b/app/assets/javascripts/pages/projects/issues/form.js @@ -17,7 +17,7 @@ export default () => { new MilestoneSelect(); new IssuableTemplateSelectors(); - if (gon.features.issueSuggestions && gon.features.graphql) { + if (gon.features.graphql) { initSuggestions(); } }; diff --git a/app/assets/javascripts/pages/projects/project.js b/app/assets/javascripts/pages/projects/project.js index a6bee49a6b1..b288989b252 100644 --- a/app/assets/javascripts/pages/projects/project.js +++ b/app/assets/javascripts/pages/projects/project.js @@ -13,6 +13,9 @@ export default class Project { const $cloneOptions = $('ul.clone-options-dropdown'); const $projectCloneField = $('#project_clone'); const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label'); + const mobileCloneField = document.querySelector( + '.js-mobile-git-clone .js-clone-dropdown-label', + ); const selectedCloneOption = $cloneBtnLabel.text().trim(); if (selectedCloneOption.length > 0) { @@ -36,7 +39,11 @@ export default class Project { $label.text(activeText); }); - $projectCloneField.val(url); + if (mobileCloneField) { + mobileCloneField.dataset.clipboardText = url; + } else { + $projectCloneField.val(url); + } $('.js-git-empty .js-clone').text(url); }); // Ref switcher diff --git a/app/assets/javascripts/pages/projects/releases/index/index.js b/app/assets/javascripts/pages/projects/releases/index/index.js new file mode 100644 index 00000000000..c183fbb9610 --- /dev/null +++ b/app/assets/javascripts/pages/projects/releases/index/index.js @@ -0,0 +1,3 @@ +import initReleases from '~/releases'; + +document.addEventListener('DOMContentLoaded', initReleases); diff --git a/app/assets/javascripts/pages/projects/serverless/index.js b/app/assets/javascripts/pages/projects/serverless/index.js new file mode 100644 index 00000000000..7b08620773c --- /dev/null +++ b/app/assets/javascripts/pages/projects/serverless/index.js @@ -0,0 +1,5 @@ +import ServerlessBundle from '~/serverless/serverless_bundle'; + +document.addEventListener('DOMContentLoaded', () => { + new ServerlessBundle(); // eslint-disable-line no-new +}); diff --git a/app/assets/javascripts/pages/projects/settings/repository/form.js b/app/assets/javascripts/pages/projects/settings/repository/form.js index a52861c9efa..3e02893f24c 100644 --- a/app/assets/javascripts/pages/projects/settings/repository/form.js +++ b/app/assets/javascripts/pages/projects/settings/repository/form.js @@ -7,6 +7,7 @@ import initDeployKeys from '~/deploy_keys'; import ProtectedBranchCreate from '~/protected_branches/protected_branch_create'; import ProtectedBranchEditList from '~/protected_branches/protected_branch_edit_list'; import DueDateSelectors from '~/due_date_select'; +import fileUpload from '~/lib/utils/file_upload'; export default () => { new ProtectedTagCreate(); @@ -16,4 +17,5 @@ export default () => { new ProtectedBranchCreate(); new ProtectedBranchEditList(); new DueDateSelectors(); + fileUpload('.js-choose-file', '.js-object-map-input'); }; diff --git a/app/assets/javascripts/pages/projects/shared/project_avatar.js b/app/assets/javascripts/pages/projects/shared/project_avatar.js deleted file mode 100644 index 1e69ecb481d..00000000000 --- a/app/assets/javascripts/pages/projects/shared/project_avatar.js +++ /dev/null @@ -1,16 +0,0 @@ -import $ from 'jquery'; - -export default function projectAvatar() { - $('.js-choose-project-avatar-button').bind('click', function onClickAvatar() { - const form = $(this).closest('form'); - return form.find('.js-project-avatar-input').click(); - }); - - $('.js-project-avatar-input').bind('change', function onClickAvatarInput() { - const form = $(this).closest('form'); - const filename = $(this) - .val() - .replace(/^.*[\\\/]/, ''); // eslint-disable-line no-useless-escape - return form.find('.js-avatar-filename').text(filename); - }); -} diff --git a/app/assets/javascripts/pages/projects/wikis/wikis.js b/app/assets/javascripts/pages/projects/wikis/wikis.js index d3e8dbf4000..9b58d42b47d 100644 --- a/app/assets/javascripts/pages/projects/wikis/wikis.js +++ b/app/assets/javascripts/pages/projects/wikis/wikis.js @@ -1,5 +1,4 @@ import bp from '../../../breakpoints'; -import { slugify } from '../../../lib/utils/text_utility'; import { parseQueryStringIntoObject } from '../../../lib/utils/common_utils'; import { mergeUrlParams, redirectTo } from '../../../lib/utils/url_utility'; @@ -26,7 +25,8 @@ export default class Wikis { if (!this.newWikiForm) return; const slugInput = this.newWikiForm.querySelector('#new_wiki_path'); - const slug = slugify(slugInput.value); + + const slug = slugInput.value; if (slug.length > 0) { const wikisPath = slugInput.getAttribute('data-wikis-path'); diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js index aa537d4a43e..1c3fd58ca74 100644 --- a/app/assets/javascripts/pages/users/user_tabs.js +++ b/app/assets/javascripts/pages/users/user_tabs.js @@ -151,8 +151,10 @@ export default class UserTabs { loadTab(action, endpoint) { this.toggleLoading(true); + const params = action === 'projects' ? { skip_namespace: true } : {}; + return axios - .get(endpoint) + .get(endpoint, { params }) .then(({ data }) => { const tabSelector = `div#${action}`; this.$parentEl.find(tabSelector).html(data.html); @@ -188,7 +190,7 @@ export default class UserTabs { requestParams: { limit: 10 }, }); UserTabs.renderMostRecentBlocks('#js-overview .projects-block', { - requestParams: { limit: 10, skip_pagination: true }, + requestParams: { limit: 10, skip_pagination: true, skip_namespace: true, compact_mode: true }, }); this.loaded.overview = true; @@ -206,6 +208,8 @@ export default class UserTabs { loadActivityCalendar() { const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar'); + if (!$calendarWrap.length) return; + const calendarPath = $calendarWrap.data('calendarPath'); AjaxCache.retrieve(calendarPath) diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js deleted file mode 100644 index 1e34e74a152..00000000000 --- a/app/assets/javascripts/persistent_user_callout.js +++ /dev/null @@ -1,34 +0,0 @@ -import axios from './lib/utils/axios_utils'; -import { __ } from './locale'; -import Flash from './flash'; - -export default class PersistentUserCallout { - constructor(container) { - const { dismissEndpoint, featureId } = container.dataset; - this.container = container; - this.dismissEndpoint = dismissEndpoint; - this.featureId = featureId; - - this.init(); - } - - init() { - const closeButton = this.container.querySelector('.js-close'); - closeButton.addEventListener('click', event => this.dismiss(event)); - } - - dismiss(event) { - event.preventDefault(); - - axios - .post(this.dismissEndpoint, { - feature_name: this.featureId, - }) - .then(() => { - this.container.remove(); - }) - .catch(() => { - Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.')); - }); - } -} diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 6f008528db4..59cebaba717 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -18,23 +18,19 @@ export default { required: true, }, }, - computed: { graph() { return this.pipeline.details && this.pipeline.details.stages; }, }, - methods: { capitalizeStageName(name) { const escapedName = _.escape(name); return escapedName.charAt(0).toUpperCase() + escapedName.slice(1); }, - isFirstColumn(index) { return index === 0; }, - stageConnectorClass(index, stage) { let className; @@ -48,7 +44,6 @@ export default { return className; }, - refreshPipelineGraph() { this.$emit('refreshPipelineGraph'); }, diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index 782494f72e4..cf9db89e32b 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_item.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue @@ -84,10 +84,6 @@ export default { return textBuilder.join(' '); }, - - tooltipBoundary() { - return this.dropdownLength < 5 ? 'viewport' : null; - }, /** * Verifies if the provided job has an action path * @@ -108,7 +104,7 @@ export default { <div class="ci-job-component"> <gl-link v-if="status.has_details" - v-gl-tooltip="{ boundary: tooltipBoundary }" + v-gl-tooltip :href="status.details_path" :title="tooltipText" :class="cssClassJobName" diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue index e5924d3a77e..30a5bbf92ce 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue @@ -65,7 +65,7 @@ export default { v-if="pipeline.flags.latest" v-gl-tooltip class="js-pipeline-url-latest badge badge-success" - title="Latest pipeline for this branch" + title="__('Latest pipeline for this branch')" > latest </span> @@ -97,6 +97,14 @@ export default { <span v-if="pipeline.flags.stuck" class="js-pipeline-url-stuck badge badge-warning"> stuck </span> + <span + v-if="pipeline.flags.merge_request" + v-gl-tooltip + title="__('This pipeline is run in a merge request context')" + class="js-pipeline-url-mergerequest badge badge-info" + > + merge request + </span> </div> </div> </template> diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue index 6233fb169e9..9af5660f764 100644 --- a/app/assets/javascripts/registry/components/app.vue +++ b/app/assets/javascripts/registry/components/app.vue @@ -1,15 +1,13 @@ <script> import { mapGetters, mapActions } from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; -import Flash from '../../flash'; import store from '../stores'; -import collapsibleContainer from './collapsible_container.vue'; -import { errorMessages, errorMessagesTypes } from '../constants'; +import CollapsibleContainer from './collapsible_container.vue'; export default { name: 'RegistryListApp', components: { - collapsibleContainer, + CollapsibleContainer, GlLoadingIcon, }, props: { @@ -26,7 +24,7 @@ export default { this.setMainEndpoint(this.endpoint); }, mounted() { - this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS])); + this.fetchRepos(); }, methods: { ...mapActions(['setMainEndpoint', 'fetchRepos']), @@ -38,9 +36,9 @@ export default { <gl-loading-icon v-if="isLoading" :size="3" /> <collapsible-container - v-for="(item, index) in repos" + v-for="item in repos" v-else-if="!isLoading && repos.length" - :key="index" + :key="item.id" :repo="item" /> diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue index 6514c05a9c7..5451c61026c 100644 --- a/app/assets/javascripts/registry/components/collapsible_container.vue +++ b/app/assets/javascripts/registry/components/collapsible_container.vue @@ -1,22 +1,24 @@ <script> import { mapActions } from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; -import Flash from '../../flash'; -import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; -import tableRegistry from './table_registry.vue'; +import { GlLoadingIcon, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import createFlash from '../../flash'; +import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; +import Icon from '../../vue_shared/components/icon.vue'; +import TableRegistry from './table_registry.vue'; import { errorMessages, errorMessagesTypes } from '../constants'; import { __ } from '../../locale'; export default { name: 'CollapsibeContainerRegisty', components: { - clipboardButton, - tableRegistry, + ClipboardButton, + TableRegistry, GlLoadingIcon, + GlButton, + Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, props: { repo: { @@ -29,30 +31,30 @@ export default { isOpen: false, }; }, + computed: { + iconName() { + return this.isOpen ? 'angle-up' : 'angle-right'; + }, + }, methods: { ...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']), - toggleRepo() { this.isOpen = !this.isOpen; if (this.isOpen) { - this.fetchList({ repo: this.repo }).catch(() => - this.showError(errorMessagesTypes.FETCH_REGISTRY), - ); + this.fetchList({ repo: this.repo }); } }, - handleDeleteRepository() { this.deleteRepo(this.repo) .then(() => { - Flash(__('This container registry has been scheduled for deletion.'), 'notice'); + createFlash(__('This container registry has been scheduled for deletion.'), 'notice'); this.fetchRepos(); }) .catch(() => this.showError(errorMessagesTypes.DELETE_REPO)); }, - showError(message) { - Flash(errorMessages[message]); + createFlash(errorMessages[message]); }, }, }; @@ -61,18 +63,9 @@ export default { <template> <div class="container-image"> <div class="container-image-head"> - <button type="button" class="js-toggle-repo btn-link" @click="toggleRepo"> - <i - :class="{ - 'fa-chevron-right': !isOpen, - 'fa-chevron-up': isOpen, - }" - class="fa" - aria-hidden="true" - > - </i> - {{ repo.name }} - </button> + <gl-button class="js-toggle-repo btn-link align-baseline" @click="toggleRepo"> + <icon :name="iconName" /> {{ repo.name }} + </gl-button> <clipboard-button v-if="repo.location" @@ -82,17 +75,17 @@ export default { /> <div class="controls d-none d-sm-block float-right"> - <button + <gl-button v-if="repo.canDelete" - v-tooltip + v-gl-tooltip :title="s__('ContainerRegistry|Remove repository')" :aria-label="s__('ContainerRegistry|Remove repository')" - type="button" - class="js-remove-repo btn btn-danger" + class="js-remove-repo" + variant="danger" @click="handleDeleteRepository" > - <i class="fa fa-trash" aria-hidden="true"> </i> - </button> + <icon name="remove" /> + </gl-button> </div> </div> diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index 6735c3ff7cf..78c7671856a 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -1,21 +1,24 @@ <script> import { mapActions } from 'vuex'; +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; import { n__ } from '../../locale'; -import Flash from '../../flash'; -import clipboardButton from '../../vue_shared/components/clipboard_button.vue'; -import tablePagination from '../../vue_shared/components/table_pagination.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; +import createFlash from '../../flash'; +import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; +import TablePagination from '../../vue_shared/components/table_pagination.vue'; +import Icon from '../../vue_shared/components/icon.vue'; import timeagoMixin from '../../vue_shared/mixins/timeago'; import { errorMessages, errorMessagesTypes } from '../constants'; import { numberToHumanSize } from '../../lib/utils/number_utils'; export default { components: { - clipboardButton, - tablePagination, + ClipboardButton, + TablePagination, + GlButton, + Icon, }, directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, mixins: [timeagoMixin], props: { @@ -31,29 +34,24 @@ export default { }, methods: { ...mapActions(['fetchList', 'deleteRegistry']), - layers(item) { return item.layers ? n__('%d layer', '%d layers', item.layers) : ''; }, - formatSize(size) { return numberToHumanSize(size); }, - handleDeleteRegistry(registry) { this.deleteRegistry(registry) .then(() => this.fetchList({ repo: this.repo })) .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY)); }, - onPageChange(pageNumber) { this.fetchList({ repo: this.repo, page: pageNumber }).catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY), ); }, - showError(message) { - Flash(errorMessages[message]); + createFlash(errorMessages[message]); }, }, }; @@ -71,10 +69,9 @@ export default { </tr> </thead> <tbody> - <tr v-for="(item, i) in repo.list" :key="i"> + <tr v-for="item in repo.list" :key="item.tag"> <td> {{ item.tag }} - <clipboard-button v-if="item.location" :title="item.location" @@ -83,37 +80,34 @@ export default { /> </td> <td> - <span v-tooltip :title="item.revision" data-placement="bottom"> - {{ item.shortRevision }} - </span> + <span v-gl-tooltip.bottom :title="item.revision">{{ item.shortRevision }}</span> </td> <td> {{ formatSize(item.size) }} - <template v-if="item.size && item.layers"> - · - </template> + <template v-if="item.size && item.layers" + >·</template + > {{ layers(item) }} </td> <td> - <span v-tooltip :title="tooltipTitle(item.createdAt)" data-placement="bottom"> - {{ timeFormated(item.createdAt) }} - </span> + <span v-gl-tooltip.bottom :title="tooltipTitle(item.createdAt)">{{ + timeFormated(item.createdAt) + }}</span> </td> <td class="content"> - <button + <gl-button v-if="item.canDelete" - v-tooltip + v-gl-tooltip :title="s__('ContainerRegistry|Remove tag')" :aria-label="s__('ContainerRegistry|Remove tag')" - type="button" - class="js-delete-registry btn btn-danger d-none d-sm-block float-right" - data-container="body" + variant="danger" + class="js-delete-registry d-none d-sm-block float-right" @click="handleDeleteRegistry(item);" > - <i class="fa fa-trash" aria-hidden="true"> </i> - </button> + <icon name="remove" /> + </gl-button> </td> </tr> </tbody> diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js index a78aa90b7b5..51d057c62c1 100644 --- a/app/assets/javascripts/registry/stores/actions.js +++ b/app/assets/javascripts/registry/stores/actions.js @@ -1,39 +1,45 @@ -import Vue from 'vue'; -import VueResource from 'vue-resource'; +import axios from '~/lib/utils/axios_utils'; +import createFlash from '~/flash'; import * as types from './mutation_types'; - -Vue.use(VueResource); +import { errorMessages, errorMessagesTypes } from '../constants'; export const fetchRepos = ({ commit, state }) => { commit(types.TOGGLE_MAIN_LOADING); - return Vue.http + return axios .get(state.endpoint) - .then(res => res.json()) - .then(response => { + .then(({ data }) => { + commit(types.TOGGLE_MAIN_LOADING); + commit(types.SET_REPOS_LIST, data); + }) + .catch(() => { commit(types.TOGGLE_MAIN_LOADING); - commit(types.SET_REPOS_LIST, response); + createFlash(errorMessages[errorMessagesTypes.FETCH_REPOS]); }); }; export const fetchList = ({ commit }, { repo, page }) => { commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo); - return Vue.http.get(repo.tagsPath, { params: { page } }).then(response => { - const { headers } = response; + return axios + .get(repo.tagsPath, { params: { page } }) + .then(response => { + const { headers, data } = response; - return response.json().then(resp => { commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo); - commit(types.SET_REGISTRY_LIST, { repo, resp, headers }); + commit(types.SET_REGISTRY_LIST, { repo, resp: data, headers }); + }) + .catch(() => { + commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo); + createFlash(errorMessages[errorMessagesTypes.FETCH_REGISTRY]); }); - }); }; // eslint-disable-next-line no-unused-vars -export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.destroyPath); +export const deleteRepo = ({ commit }, repo) => axios.delete(repo.destroyPath); // eslint-disable-next-line no-unused-vars -export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.destroyPath); +export const deleteRegistry = ({ commit }, image) => axios.delete(image.destroyPath); export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data); export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING); diff --git a/app/assets/javascripts/registry/stores/index.js b/app/assets/javascripts/registry/stores/index.js index 78b67881210..1bb06bd6e81 100644 --- a/app/assets/javascripts/registry/stores/index.js +++ b/app/assets/javascripts/registry/stores/index.js @@ -3,36 +3,12 @@ import Vuex from 'vuex'; import * as actions from './actions'; import * as getters from './getters'; import mutations from './mutations'; +import createState from './state'; Vue.use(Vuex); export default new Vuex.Store({ - state: { - isLoading: false, - endpoint: '', // initial endpoint to fetch the repos list - /** - * Each object in `repos` has the following strucure: - * { - * name: String, - * isLoading: Boolean, - * tagsPath: String // endpoint to request the list - * destroyPath: String // endpoit to delete the repo - * list: Array // List of the registry images - * } - * - * Each registry image inside `list` has the following structure: - * { - * tag: String, - * revision: String - * shortRevision: String - * size: Number - * layers: Number - * createdAt: String - * destroyPath: String // endpoit to delete each image - * } - */ - repos: [], - }, + state: createState(), actions, getters, mutations, diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/stores/mutations.js index 69c051cd2d6..1ac699c538f 100644 --- a/app/assets/javascripts/registry/stores/mutations.js +++ b/app/assets/javascripts/registry/stores/mutations.js @@ -48,6 +48,7 @@ export default { [types.TOGGLE_REGISTRY_LIST_LOADING](state, list) { const listToUpdate = state.repos.find(el => el.id === list.id); + listToUpdate.isLoading = !listToUpdate.isLoading; }, }; diff --git a/app/assets/javascripts/registry/stores/state.js b/app/assets/javascripts/registry/stores/state.js new file mode 100644 index 00000000000..feeac10cbe1 --- /dev/null +++ b/app/assets/javascripts/registry/stores/state.js @@ -0,0 +1,26 @@ +export default () => ({ + isLoading: false, + endpoint: '', // initial endpoint to fetch the repos list + /** + * Each object in `repos` has the following strucure: + * { + * name: String, + * isLoading: Boolean, + * tagsPath: String // endpoint to request the list + * destroyPath: String // endpoit to delete the repo + * list: Array // List of the registry images + * } + * + * Each registry image inside `list` has the following structure: + * { + * tag: String, + * revision: String + * shortRevision: String + * size: Number + * layers: Number + * createdAt: String + * destroyPath: String // endpoit to delete each image + * } + */ + repos: [], +}); diff --git a/app/assets/javascripts/releases/components/app.vue b/app/assets/javascripts/releases/components/app.vue new file mode 100644 index 00000000000..0ad5ee2915c --- /dev/null +++ b/app/assets/javascripts/releases/components/app.vue @@ -0,0 +1,82 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui'; +import ReleaseBlock from './release_block.vue'; + +export default { + name: 'ReleasesApp', + components: { + GlLoadingIcon, + GlEmptyState, + ReleaseBlock, + }, + props: { + projectId: { + type: String, + required: true, + }, + documentationLink: { + type: String, + required: true, + }, + illustrationPath: { + type: String, + required: true, + }, + }, + computed: { + ...mapState(['isLoading', 'releases', 'hasError']), + shouldRenderEmptyState() { + return !this.releases.length && !this.hasError && !this.isLoading; + }, + shouldRenderSuccessState() { + return this.releases.length && !this.isLoading && !this.hasError; + }, + }, + created() { + this.fetchReleases(this.projectId); + }, + methods: { + ...mapActions(['fetchReleases']), + }, +}; +</script> +<template> + <div class="prepend-top-default"> + <gl-loading-icon v-if="isLoading" :size="2" class="js-loading prepend-top-20" /> + + <gl-empty-state + v-else-if="shouldRenderEmptyState" + class="js-empty-state" + :title="__('Getting started with releases')" + :svg-path="illustrationPath" + :description=" + __( + 'Releases mark specific points in a project\'s development history, communicate information about the type of change, and deliver on prepared, often compiled, versions of the software to be reused elsewhere. Currently, releases can only be created through the API.', + ) + " + :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> + </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/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue new file mode 100644 index 00000000000..9c2aade51fc --- /dev/null +++ b/app/assets/javascripts/releases/components/release_block.vue @@ -0,0 +1,122 @@ +<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: 'ReleaseBlock', + components: { + GlLink, + Icon, + UserAvatarLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + mixins: [timeagoMixin], + props: { + release: { + type: Object, + required: true, + default: () => ({}), + }, + }, + computed: { + releasedTimeAgo() { + return sprintf('released %{time}', { + time: this.timeFormated(this.release.created_at), + }); + }, + userImageAltDescription() { + return this.commit.author && this.commit.author.username + ? sprintf("%{username}'s avatar", { username: this.commit.author.username }) + : null; + }, + commit() { + return this.release.commit || {}; + }, + assets() { + return this.release.assets || {}; + }, + }, +}; +</script> +<template> + <div class="card"> + <div class="card-body"> + <h2 class="card-title mt-0">{{ release.name }}</h2> + + <div class="card-subtitle d-flex flex-wrap text-secondary"> + <div class="append-right-8"> + <icon name="commit" class="align-middle" /> + <span v-gl-tooltip.bottom :title="commit.title">{{ commit.short_id }}</span> + </div> + + <div class="append-right-8"> + <icon name="tag" class="align-middle" /> + <span v-gl-tooltip.bottom :title="__('Tag')">{{ release.tag_name }}</span> + </div> + + <div class="append-right-4"> + • + <span v-gl-tooltip.bottom :title="tooltipTitle(release.created_at)">{{ + releasedTimeAgo + }}</span> + </div> + + <div v-if="commit.author" class="d-flex"> + by + <user-avatar-link + class="prepend-left-4" + :link-href="commit.author.path" + :img-src="commit.author.avatar_url" + :img-alt="userImageAltDescription" + :tooltip-text="commit.author.username" + /> + </div> + </div> + + <div + v-if="assets.links.length || assets.sources.length" + Sclass="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 }} + </gl-link> + </li> + </ul> + + <div v-if="assets.sources.length" 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="arrow-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> + + <div class="card-text prepend-top-default"><div v-html="release.description_html"></div></div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/releases/index.js b/app/assets/javascripts/releases/index.js new file mode 100644 index 00000000000..6fa7298ac5a --- /dev/null +++ b/app/assets/javascripts/releases/index.js @@ -0,0 +1,24 @@ +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: { + endpoint: element.dataset.endpoint, + documentationLink: element.dataset.documentationPath, + illustrationPath: element.dataset.illustrationPath, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/releases/store/actions.js b/app/assets/javascripts/releases/store/actions.js new file mode 100644 index 00000000000..baa2251403e --- /dev/null +++ b/app/assets/javascripts/releases/store/actions.js @@ -0,0 +1,37 @@ +import * as types from './mutation_types'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; +import api from '~/api'; + +/** + * 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 successfull + * Will dispatch receiveNamesapceError if the request returns an error + * + * @param {String} projectId + */ +export const fetchReleases = ({ dispatch }, projectId) => { + dispatch('requestReleases'); + + api + .releases(projectId) + .then(({ data }) => dispatch('receiveReleasesSuccess', data)) + .catch(() => dispatch('receiveReleasesError')); +}; + +export const receiveReleasesSuccess = ({ commit }, data) => + commit(types.RECEIVE_RELEASES_SUCCESS, data); + +export const receiveReleasesError = ({ commit }) => { + commit(types.RECEIVE_RELEASES_ERROR); + createFlash(__('An error occured 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/store/index.js b/app/assets/javascripts/releases/store/index.js new file mode 100644 index 00000000000..968b94f0e0d --- /dev/null +++ b/app/assets/javascripts/releases/store/index.js @@ -0,0 +1,14 @@ +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/store/mutation_types.js b/app/assets/javascripts/releases/store/mutation_types.js new file mode 100644 index 00000000000..a74bf15c515 --- /dev/null +++ b/app/assets/javascripts/releases/store/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/store/mutations.js b/app/assets/javascripts/releases/store/mutations.js new file mode 100644 index 00000000000..b97dc6cb0ab --- /dev/null +++ b/app/assets/javascripts/releases/store/mutations.js @@ -0,0 +1,37 @@ +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 + * @param {Object} state + * @param {Object} data + */ + [types.RECEIVE_RELEASES_SUCCESS](state, data) { + state.hasError = false; + state.isLoading = false; + state.releases = data; + }, + + /** + * 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/store/state.js b/app/assets/javascripts/releases/store/state.js new file mode 100644 index 00000000000..bf25e651c99 --- /dev/null +++ b/app/assets/javascripts/releases/store/state.js @@ -0,0 +1,5 @@ +export default () => ({ + isLoading: false, + hasError: false, + releases: [], +}); diff --git a/app/assets/javascripts/serverless/components/empty_state.vue b/app/assets/javascripts/serverless/components/empty_state.vue new file mode 100644 index 00000000000..2683805f2f7 --- /dev/null +++ b/app/assets/javascripts/serverless/components/empty_state.vue @@ -0,0 +1,40 @@ +<script> +export default { + props: { + clustersPath: { + type: String, + required: true, + }, + helpPath: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="row empty-state js-empty-state"> + <div class="col-12"> + <div class="text-content"> + <h4 class="state-title text-center"> + {{ s__('Serverless|Getting started with serverless') }} + </h4> + <p class="state-description"> + {{ + s__(`Serverless| In order to start using functions as a service, + you must first install Knative on your Kubernetes cluster.`) + }} + + <a :href="helpPath"> {{ __('More information') }} </a> + </p> + + <div class="text-center"> + <a :href="clustersPath" class="btn btn-success"> + {{ s__('Serverless|Install Knative') }} + </a> + </div> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/serverless/components/function_row.vue b/app/assets/javascripts/serverless/components/function_row.vue new file mode 100644 index 00000000000..31f5427c771 --- /dev/null +++ b/app/assets/javascripts/serverless/components/function_row.vue @@ -0,0 +1,40 @@ +<script> +import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; + +export default { + components: { + Timeago, + }, + props: { + func: { + type: Object, + required: true, + }, + }, + computed: { + name() { + return this.func.name; + }, + url() { + return this.func.url; + }, + image() { + return this.func.image; + }, + timestamp() { + return this.func.created_at; + }, + }, +}; +</script> + +<template> + <div class="gl-responsive-table-row"> + <div class="table-section section-20">{{ name }}</div> + <div class="table-section section-50"> + <a :href="url">{{ url }}</a> + </div> + <div class="table-section section-20">{{ image }}</div> + <div class="table-section section-10"><timeago :time="timestamp" /></div> + </div> +</template> diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue new file mode 100644 index 00000000000..7874a7b6b6a --- /dev/null +++ b/app/assets/javascripts/serverless/components/functions.vue @@ -0,0 +1,123 @@ +<script> +import { GlSkeletonLoading } from '@gitlab/ui'; +import FunctionRow from './function_row.vue'; +import EmptyState from './empty_state.vue'; + +export default { + components: { + FunctionRow, + EmptyState, + GlSkeletonLoading, + }, + props: { + functions: { + type: Array, + required: true, + default: () => [], + }, + installed: { + type: Boolean, + required: true, + }, + clustersPath: { + type: String, + required: true, + }, + helpPath: { + type: String, + required: true, + }, + loadingData: { + type: Boolean, + required: false, + default: true, + }, + hasFunctionData: { + type: Boolean, + required: false, + default: true, + }, + }, +}; +</script> + +<template> + <section id="serverless-functions"> + <div v-if="installed"> + <div v-if="hasFunctionData"> + <div class="ci-table js-services-list function-element"> + <div class="gl-responsive-table-row table-row-header" role="row"> + <div class="table-section section-20" role="rowheader"> + {{ s__('Serverless|Function') }} + </div> + <div class="table-section section-50" role="rowheader"> + {{ s__('Serverless|Domain') }} + </div> + <div class="table-section section-20" role="rowheader"> + {{ s__('Serverless|Runtime') }} + </div> + <div class="table-section section-10" role="rowheader"> + {{ s__('Serverless|Last Update') }} + </div> + </div> + <template v-if="loadingData"> + <div v-for="j in 3" :key="j" class="gl-responsive-table-row"> + <gl-skeleton-loading /> + </div> + </template> + <template v-else> + <function-row v-for="f in functions" :key="f.name" :func="f" /> + </template> + </div> + </div> + <div v-else class="empty-state js-empty-state"> + <div class="text-content"> + <h4 class="state-title text-center">{{ s__('Serverless|No functions available') }}</h4> + <p class="state-description"> + {{ + s__(`Serverless|There is currently no function data available from Knative. + This could be for a variety of reasons including:`) + }} + </p> + <ul> + <li>Your repository does not have a corresponding <code>serverless.yml</code> file.</li> + <li>Your <code>gitlab-ci.yml</code> file is not properly configured.</li> + <li> + The functions listed in the <code>serverless.yml</code> file don't match the namespace + of your cluster. + </li> + <li>The deploy job has not finished.</li> + </ul> + + <p> + {{ + s__(`Serverless|If you believe none of these apply, please check + back later as the function data may be in the process of becoming + available.`) + }} + </p> + <div class="text-center"> + <a :href="helpPath" class="btn btn-success"> + {{ s__('Serverless|Learn more about Serverless') }} + </a> + </div> + </div> + </div> + </div> + + <empty-state v-else :clusters-path="clustersPath" :help-path="helpPath" /> + </section> +</template> + +<style> +.top-area { + border-bottom: 0; +} + +.function-element { + border-bottom: 1px solid #e5e5e5; + border-bottom-color: rgb(229, 229, 229); + border-bottom-style: solid; + border-bottom-width: 1px; +} +</style> diff --git a/app/assets/javascripts/serverless/event_hub.js b/app/assets/javascripts/serverless/event_hub.js new file mode 100644 index 00000000000..0948c2e5352 --- /dev/null +++ b/app/assets/javascripts/serverless/event_hub.js @@ -0,0 +1,3 @@ +import Vue from 'vue'; + +export default new Vue(); diff --git a/app/assets/javascripts/serverless/serverless_bundle.js b/app/assets/javascripts/serverless/serverless_bundle.js new file mode 100644 index 00000000000..3e3b81ba247 --- /dev/null +++ b/app/assets/javascripts/serverless/serverless_bundle.js @@ -0,0 +1,106 @@ +import Visibility from 'visibilityjs'; +import Vue from 'vue'; +import { s__ } from '../locale'; +import Flash from '../flash'; +import Poll from '../lib/utils/poll'; +import ServerlessStore from './stores/serverless_store'; +import GetFunctionsService from './services/get_functions_service'; +import Functions from './components/functions.vue'; + +export default class Serverless { + constructor() { + const { statusPath, clustersPath, helpPath, installed } = document.querySelector( + '.js-serverless-functions-page', + ).dataset; + + this.service = new GetFunctionsService(statusPath); + this.knativeInstalled = installed !== undefined; + this.store = new ServerlessStore(this.knativeInstalled, clustersPath, helpPath); + this.initServerless(); + this.functionLoadCount = 0; + + if (statusPath && this.knativeInstalled) { + this.initPolling(); + } + } + + initServerless() { + const { store } = this; + const el = document.querySelector('#js-serverless-functions'); + + this.functions = new Vue({ + el, + data() { + return { + state: store.state, + }; + }, + render(createElement) { + return createElement(Functions, { + props: { + functions: this.state.functions, + installed: this.state.installed, + clustersPath: this.state.clustersPath, + helpPath: this.state.helpPath, + loadingData: this.state.loadingData, + hasFunctionData: this.state.hasFunctionData, + }, + }); + }, + }); + } + + initPolling() { + this.poll = new Poll({ + resource: this.service, + method: 'fetchData', + successCallback: data => this.handleSuccess(data), + errorCallback: () => this.handleError(), + }); + + if (!Visibility.hidden()) { + this.poll.makeRequest(); + } else { + this.service + .fetchData() + .then(data => this.handleSuccess(data)) + .catch(() => this.handleError()); + } + + Visibility.change(() => { + if (!Visibility.hidden() && !this.destroyed) { + this.poll.restart(); + } else { + this.poll.stop(); + } + }); + } + + handleSuccess(data) { + if (data.status === 200) { + this.store.updateFunctionsFromServer(data.data); + this.store.updateLoadingState(false); + } else if (data.status === 204) { + /* Time out after 3 attempts to retrieve data */ + this.functionLoadCount += 1; + if (this.functionLoadCount === 3) { + this.poll.stop(); + this.store.toggleNoFunctionData(); + } + } + } + + static handleError() { + Flash(s__('Serverless|An error occurred while retrieving serverless components')); + } + + destroy() { + this.destroyed = true; + + if (this.poll) { + this.poll.stop(); + } + + this.functions.$destroy(); + } +} diff --git a/app/assets/javascripts/serverless/services/get_functions_service.js b/app/assets/javascripts/serverless/services/get_functions_service.js new file mode 100644 index 00000000000..303b42dc66c --- /dev/null +++ b/app/assets/javascripts/serverless/services/get_functions_service.js @@ -0,0 +1,11 @@ +import axios from '~/lib/utils/axios_utils'; + +export default class GetFunctionsService { + constructor(endpoint) { + this.endpoint = endpoint; + } + + fetchData() { + return axios.get(this.endpoint); + } +} diff --git a/app/assets/javascripts/serverless/stores/serverless_store.js b/app/assets/javascripts/serverless/stores/serverless_store.js new file mode 100644 index 00000000000..774c15b5b12 --- /dev/null +++ b/app/assets/javascripts/serverless/stores/serverless_store.js @@ -0,0 +1,24 @@ +export default class ServerlessStore { + constructor(knativeInstalled = false, clustersPath, helpPath) { + this.state = { + functions: [], + hasFunctionData: true, + loadingData: true, + installed: knativeInstalled, + clustersPath, + helpPath, + }; + } + + updateFunctionsFromServer(functions = []) { + this.state.functions = functions; + } + + updateLoadingState(loadingData) { + this.state.loadingData = loadingData; + } + + toggleNoFunctionData() { + this.state.hasFunctionData = false; + } +} diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js index 007b83e1927..7404dfbf22a 100644 --- a/app/assets/javascripts/star.js +++ b/app/assets/javascripts/star.js @@ -5,11 +5,12 @@ import { spriteIcon } from './lib/utils/common_utils'; import axios from './lib/utils/axios_utils'; export default class Star { - constructor() { - $('.project-home-panel .toggle-star').on('click', function toggleStarClickCallback() { + constructor(container = '.project-home-panel') { + $(`${container} .toggle-star`).on('click', function toggleStarClickCallback() { const $this = $(this); const $starSpan = $this.find('span'); - const $startIcon = $this.find('svg'); + const $starIcon = $this.find('svg'); + const iconClasses = $starIcon.attr('class').split(' '); axios .post($this.data('endpoint')) @@ -22,12 +23,12 @@ export default class Star { if (isStarred) { $starSpan.removeClass('starred').text(s__('StarProject|Star')); - $startIcon.remove(); - $this.prepend(spriteIcon('star-o')); + $starIcon.remove(); + $this.prepend(spriteIcon('star-o', iconClasses)); } else { $starSpan.addClass('starred').text(__('Unstar')); - $startIcon.remove(); - $this.prepend(spriteIcon('star')); + $starIcon.remove(); + $this.prepend(spriteIcon('star', iconClasses)); } }) .catch(() => Flash('Star toggle failed. Try again later.')); diff --git a/app/assets/javascripts/terminal/index.js b/app/assets/javascripts/terminal/index.js index 49aeb377c74..8faff59fd45 100644 --- a/app/assets/javascripts/terminal/index.js +++ b/app/assets/javascripts/terminal/index.js @@ -1,3 +1,3 @@ import Terminal from './terminal'; -export default () => new Terminal({ selector: '#terminal' }); +export default () => new Terminal(document.getElementById('terminal')); diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js index b24aa8a3a34..560f50ebf8f 100644 --- a/app/assets/javascripts/terminal/terminal.js +++ b/app/assets/javascripts/terminal/terminal.js @@ -1,9 +1,15 @@ +import _ from 'underscore'; import $ from 'jquery'; import { Terminal } from 'xterm'; import * as fit from 'xterm/lib/addons/fit/fit'; +import { canScrollUp, canScrollDown } from '~/lib/utils/dom_utils'; + +const SCROLL_MARGIN = 5; + +Terminal.applyAddon(fit); export default class GLTerminal { - constructor(options = {}) { + constructor(element, options = {}) { this.options = Object.assign( {}, { @@ -13,7 +19,8 @@ export default class GLTerminal { options, ); - this.container = document.querySelector(options.selector); + this.container = element; + this.onDispose = []; this.setSocketUrl(); this.createTerminal(); @@ -34,8 +41,6 @@ export default class GLTerminal { } createTerminal() { - Terminal.applyAddon(fit); - this.terminal = new Terminal(this.options); this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']); @@ -72,4 +77,48 @@ export default class GLTerminal { handleSocketFailure() { this.terminal.write('\r\nConnection failure'); } + + addScrollListener(onScrollLimit) { + const viewport = this.container.querySelector('.xterm-viewport'); + const listener = _.throttle(() => { + onScrollLimit({ + canScrollUp: canScrollUp(viewport, SCROLL_MARGIN), + canScrollDown: canScrollDown(viewport, SCROLL_MARGIN), + }); + }); + + this.onDispose.push(() => viewport.removeEventListener('scroll', listener)); + viewport.addEventListener('scroll', listener); + + // don't forget to initialize value before scroll! + listener({ target: viewport }); + } + + disable() { + this.terminal.setOption('cursorBlink', false); + this.terminal.setOption('theme', { foreground: '#707070' }); + this.terminal.setOption('disableStdin', true); + this.socket.close(); + } + + dispose() { + this.terminal.off('data'); + this.terminal.dispose(); + this.socket.close(); + + this.onDispose.forEach(fn => fn()); + this.onDispose.length = 0; + } + + scrollToTop() { + this.terminal.scrollToTop(); + } + + scrollToBottom() { + this.terminal.scrollToBottom(); + } + + fit() { + this.terminal.fit(); + } } diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js new file mode 100644 index 00000000000..948f4d5e631 --- /dev/null +++ b/app/assets/javascripts/user_popovers.js @@ -0,0 +1,107 @@ +import Vue from 'vue'; + +import UsersCache from './lib/utils/users_cache'; +import UserPopover from './vue_shared/components/user_popover/user_popover.vue'; + +let renderedPopover; +let renderFn; + +const handleUserPopoverMouseOut = event => { + const { target } = event; + target.removeEventListener('mouseleave', handleUserPopoverMouseOut); + + if (renderFn) { + clearTimeout(renderFn); + } + if (renderedPopover) { + renderedPopover.$destroy(); + renderedPopover = null; + } +}; + +/** + * Adds a UserPopover component to the body, hands over as much data as the target element has in data attributes. + * loads based on data-user-id more data about a user from the API and sets it on the popover + */ +const handleUserPopoverMouseOver = event => { + const { target } = event; + // Add listener to actually remove it again + target.addEventListener('mouseleave', handleUserPopoverMouseOut); + + renderFn = setTimeout(() => { + // Helps us to use current markdown setup without maybe breaking or duplicating for now + if (target.dataset.user) { + target.dataset.userId = target.dataset.user; + // Removing titles so its not showing tooltips also + target.dataset.originalTitle = ''; + target.setAttribute('title', ''); + } + + const { userId, username, name, avatarUrl } = target.dataset; + const user = { + userId, + username, + name, + avatarUrl, + location: null, + bio: null, + organization: null, + status: null, + loaded: false, + }; + if (userId || username) { + const UserPopoverComponent = Vue.extend(UserPopover); + renderedPopover = new UserPopoverComponent({ + propsData: { + target, + user, + }, + }); + + renderedPopover.$mount(); + + UsersCache.retrieveById(userId) + .then(userData => { + if (!userData) { + return; + } + + Object.assign(user, { + avatarUrl: userData.avatar_url, + username: userData.username, + name: userData.name, + location: userData.location, + bio: userData.bio, + organization: userData.organization, + loaded: true, + }); + + UsersCache.retrieveStatusById(userId) + .then(status => { + if (!status) { + return; + } + + Object.assign(user, { + status, + }); + }) + .catch(() => { + throw new Error(`User status for "${userId}" could not be retrieved!`); + }); + }) + .catch(() => { + renderedPopover.$destroy(); + renderedPopover = null; + }); + } + }, 200); // 200ms delay so not every mouseover triggers Popover + API Call +}; + +export default elements => { + const userLinks = elements || [...document.querySelectorAll('.js-user-link')]; + + userLinks.forEach(el => { + el.addEventListener('mouseenter', handleUserPopoverMouseOver); + }); +}; diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue index 950347d8863..2f2a37347af 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue @@ -112,7 +112,7 @@ export default { </script> <template> - <div class="mr-widget-heading deploy-heading append-bottom-default"> + <div class="deploy-heading"> <div class="ci-widget media"> <div class="media-body"> <div class="deploy-body"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_container.vue new file mode 100644 index 00000000000..5967ca026e5 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_container.vue @@ -0,0 +1,6 @@ +<template> + <div class="mr-widget-heading"> + <div class="mr-widget-content"><slot name="default"></slot></div> + <slot name="footer"></slot> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue index 6f422ea3f27..3b9fc2661ef 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue @@ -6,6 +6,7 @@ import Icon from '~/vue_shared/components/icon.vue'; import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import tooltip from '~/vue_shared/directives/tooltip'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; +import MrWidgetIcon from './mr_widget_icon.vue'; export default { name: 'MRWidgetHeader', @@ -13,6 +14,7 @@ export default { Icon, clipboardButton, TooltipOnTruncate, + MrWidgetIcon, }, directives: { tooltip, @@ -76,7 +78,7 @@ export default { </script> <template> <div class="mr-source-target append-bottom-default"> - <div class="git-merge-icon-container append-right-default"><icon name="git-merge" /></div> + <mr-widget-icon name="git-merge" /> <div class="git-merge-container d-flex"> <div class="normal"> <strong> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue new file mode 100644 index 00000000000..4b57693e8f1 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_icon.vue @@ -0,0 +1,19 @@ +<script> +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { Icon }, + props: { + name: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="circle-icon-container append-right-default align-self-start align-self-lg-center"> + <icon :name="name" /> + </div> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index 71571ba9cab..f11cf21b0ca 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -79,67 +79,65 @@ export default { </script> <template> - <div v-if="hasPipeline || hasCIError" class="mr-widget-heading append-bottom-default"> - <div class="ci-widget media"> - <template v-if="hasCIError"> - <div - class="add-border ci-status-icon ci-status-icon-failed ci-error - js-ci-error append-right-default" - > - <icon :size="32" name="status_failed_borderless" /> - </div> - <div class="media-body" v-html="errorText"></div> - </template> - <template v-else-if="hasPipeline"> - <a :href="status.details_path" class="align-self-start append-right-default"> - <ci-icon :status="status" :size="32" :borderless="true" class="add-border" /> - </a> - <div class="ci-widget-container d-flex"> - <div class="ci-widget-content"> - <div class="media-body"> - <div class="font-weight-bold"> - Pipeline - <a :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number" - >#{{ pipeline.id }}</a - > + <div v-if="hasPipeline || hasCIError" class="ci-widget media"> + <template v-if="hasCIError"> + <div + class="add-border ci-status-icon ci-status-icon-failed ci-error + js-ci-error append-right-default" + > + <icon :size="32" name="status_failed_borderless" /> + </div> + <div class="media-body" v-html="errorText"></div> + </template> + <template v-else-if="hasPipeline"> + <a :href="status.details_path" class="align-self-start append-right-default"> + <ci-icon :status="status" :size="32" :borderless="true" class="add-border" /> + </a> + <div class="ci-widget-container d-flex"> + <div class="ci-widget-content"> + <div class="media-body"> + <div class="font-weight-bold"> + Pipeline + <a :href="pipeline.path" class="pipeline-id font-weight-normal pipeline-number" + >#{{ pipeline.id }}</a + > - {{ pipeline.details.status.label }} + {{ pipeline.details.status.label }} - <template v-if="hasCommitInfo"> - for - <a - :href="pipeline.commit.commit_path" - class="commit-sha js-commit-link font-weight-normal" - > - {{ pipeline.commit.short_id }}</a - > - on - <tooltip-on-truncate - :title="sourceBranch" - truncate-target="child" - class="label-branch label-truncate" - v-html="sourceBranchLink" - /> - </template> - </div> - <div v-if="pipeline.coverage" class="coverage">Coverage {{ pipeline.coverage }}%</div> + <template v-if="hasCommitInfo"> + for + <a + :href="pipeline.commit.commit_path" + class="commit-sha js-commit-link font-weight-normal" + > + {{ pipeline.commit.short_id }}</a + > + on + <tooltip-on-truncate + :title="sourceBranch" + truncate-target="child" + class="label-branch label-truncate" + v-html="sourceBranchLink" + /> + </template> </div> + <div v-if="pipeline.coverage" class="coverage">Coverage {{ pipeline.coverage }}%</div> </div> - <div> - <span class="mr-widget-pipeline-graph"> - <span v-if="hasStages" class="stage-cell"> - <div - v-for="(stage, i) in pipeline.details.stages" - :key="i" - class="stage-container dropdown js-mini-pipeline-graph mr-widget-pipeline-stages" - > - <pipeline-stage :stage="stage" /> - </div> - </span> + </div> + <div> + <span class="mr-widget-pipeline-graph"> + <span v-if="hasStages" class="stage-cell"> + <div + v-for="(stage, i) in pipeline.details.stages" + :key="i" + class="stage-container dropdown js-mini-pipeline-graph mr-widget-pipeline-stages" + > + <pipeline-stage :stage="stage" /> + </div> </span> - </div> + </span> </div> - </template> - </div> + </div> + </template> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue new file mode 100644 index 00000000000..5f5fe67b3c1 --- /dev/null +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue @@ -0,0 +1,74 @@ +<script> +import Deployment from './deployment.vue'; +import MrWidgetContainer from './mr_widget_container.vue'; +import MrWidgetPipeline from './mr_widget_pipeline.vue'; + +/** + * Renders the pipeline and related deployments from the store. + * + * | Props | Description + * |---------------|------------- + * | `mr` | This is the mr_widget store + * | `isPostMerge` | If true, show the "post merge" pipeline and deployments + */ +export default { + name: 'MrWidgetPipelineContainer', + components: { + Deployment, + MrWidgetContainer, + MrWidgetPipeline, + }, + props: { + mr: { + type: Object, + required: true, + }, + isPostMerge: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + pipeline() { + return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline; + }, + branch() { + return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranch; + }, + branchLink() { + return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranchLink; + }, + deployments() { + return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments; + }, + deploymentClass() { + return this.isPostMerge ? 'js-post-deployment' : 'js-pre-deployment'; + }, + hasDeploymentMetrics() { + return this.isPostMerge; + }, + }, +}; +</script> +<template> + <mr-widget-container> + <mr-widget-pipeline + :pipeline="pipeline" + :ci-status="mr.ciStatus" + :has-ci="mr.hasCI" + :source-branch="branch" + :source-branch-link="branchLink" + :troubleshooting-docs-path="mr.troubleshootingDocsPath" + /> + <div v-if="deployments.length" slot="footer" class="mr-widget-extension"> + <deployment + v-for="deployment in deployments" + :key="deployment.id" + :class="deploymentClass" + :deployment="deployment" + :show-metrics="hasDeploymentMetrics" + /> + </div> + </mr-widget-container> +</template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index adfbcd18588..0bcccc50eb2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -72,7 +72,7 @@ export default { Flash('Something went wrong. Please try again.'); } - eventHub.$emit('MRWidgetUpdateRequested'); + eventHub.$emit('MRWidgetRebaseSuccess'); stopPolling(); } }) diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue index a269c0a4e87..d8a75388e84 100644 --- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue +++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue @@ -6,7 +6,7 @@ import SmartInterval from '~/smart_interval'; import createFlash from '../flash'; import WidgetHeader from './components/mr_widget_header.vue'; import WidgetMergeHelp from './components/mr_widget_merge_help.vue'; -import WidgetPipeline from './components/mr_widget_pipeline.vue'; +import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue'; import Deployment from './components/deployment.vue'; import WidgetRelatedLinks from './components/mr_widget_related_links.vue'; import MergedState from './components/states/mr_widget_merged.vue'; @@ -44,7 +44,7 @@ export default { components: { 'mr-widget-header': WidgetHeader, 'mr-widget-merge-help': WidgetMergeHelp, - 'mr-widget-pipeline': WidgetPipeline, + MrWidgetPipelineContainer, Deployment, 'mr-widget-related-links': WidgetRelatedLinks, 'mr-widget-merged': MergedState, @@ -155,13 +155,13 @@ export default { }; return new MRWidgetService(endpoints); }, - checkStatus(cb) { + checkStatus(cb, isRebased) { return this.service .checkStatus() .then(res => res.data) .then(data => { this.handleNotification(data); - this.mr.setData(data); + this.mr.setData(data, isRebased); this.setFaviconHelper(); if (cb) { @@ -263,6 +263,10 @@ export default { this.checkStatus(cb); }); + eventHub.$on('MRWidgetRebaseSuccess', cb => { + this.checkStatus(cb, true); + }); + // `params` should be an Array contains a Boolean, like `[true]` // Passing parameter as Boolean didn't work. eventHub.$on('SetBranchRemoveFlag', params => { @@ -296,23 +300,12 @@ export default { <template> <div class="mr-state-widget prepend-top-default"> <mr-widget-header :mr="mr" /> - <mr-widget-pipeline + <mr-widget-pipeline-container v-if="shouldRenderPipelines" - :pipeline="mr.pipeline" - :ci-status="mr.ciStatus" - :has-ci="mr.hasCI" - :source-branch="mr.sourceBranch" - :source-branch-link="mr.sourceBranchLink" - :troubleshooting-docs-path="mr.troubleshootingDocsPath" + class="mr-widget-workflow" + :mr="mr" /> - <deployment - v-for="deployment in mr.deployments" - :key="`pre-merge-deploy-${deployment.id}`" - class="js-pre-merge-deploy" - :deployment="deployment" - :show-metrics="false" - /> - <div class="mr-section-container"> + <div class="mr-section-container mr-widget-workflow"> <grouped-test-reports-app v-if="mr.testResultsPath" class="js-reports-container" @@ -336,24 +329,11 @@ export default { </div> <div v-if="shouldRenderMergeHelp" class="mr-widget-footer"><mr-widget-merge-help /></div> </div> - - <template v-if="shouldRenderMergedPipeline"> - <mr-widget-pipeline - class="js-post-merge-pipeline prepend-top-default" - :pipeline="mr.mergePipeline" - :ci-status="mr.ciStatus" - :has-ci="mr.hasCI" - :source-branch="mr.targetBranch" - :source-branch-link="mr.targetBranch" - :troubleshooting-docs-path="mr.troubleshootingDocsPath" - /> - <deployment - v-for="postMergeDeployment in mr.postMergeDeployments" - :key="`post-merge-deploy-${postMergeDeployment.id}`" - :deployment="postMergeDeployment" - :show-metrics="true" - class="js-post-deployment" - /> - </template> + <mr-widget-pipeline-container + v-if="shouldRenderMergedPipeline" + class="js-post-merge-pipeline mr-widget-workflow" + :mr="mr" + :is-post-merge="true" + /> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js index f7f0c1b6cb7..066a3b833d7 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/get_state_key.js @@ -19,7 +19,7 @@ export default function deviseState(data) { return stateKey.unresolvedDiscussions; } else if (this.isPipelineBlocked) { return stateKey.pipelineBlocked; - } else if (this.hasSHAChanged) { + } else if (this.isSHAMismatch) { return stateKey.shaMismatch; } else if (this.mergeWhenPipelineSucceeds) { return this.mergeError ? stateKey.autoMergeFailed : stateKey.mergeWhenPipelineSucceeds; diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js index 5c9a7133a6e..c777bcca0fa 100644 --- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js +++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js @@ -11,7 +11,11 @@ export default class MergeRequestStore { this.setData(data); } - setData(data) { + setData(data, isRebased) { + if (isRebased) { + this.sha = data.diff_head_sha; + } + const currentUser = data.current_user; const pipelineStatus = data.pipeline ? data.pipeline.details.status : null; @@ -84,7 +88,7 @@ export default class MergeRequestStore { this.canMerge = !!data.merge_path; this.canCreateIssue = currentUser.can_create_issue || false; this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path; - this.hasSHAChanged = this.sha !== data.diff_head_sha; + this.isSHAMismatch = this.sha !== data.diff_head_sha; this.canBeMerged = data.can_be_merged || false; this.isMergeAllowed = data.mergeable || false; this.mergeOngoing = data.merge_ongoing; diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue index bb2e0e12c11..75c66ed850b 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue @@ -1,7 +1,10 @@ <script> +import { diffModes } from '~/ide/constants'; import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils'; import ImageDiffViewer from './viewers/image_diff_viewer.vue'; import DownloadDiffViewer from './viewers/download_diff_viewer.vue'; +import RenamedFile from './viewers/renamed.vue'; +import ModeChanged from './viewers/mode_changed.vue'; export default { props: { @@ -30,9 +33,25 @@ export default { required: false, default: '', }, + aMode: { + type: String, + required: false, + default: null, + }, + bMode: { + type: String, + required: false, + default: null, + }, }, computed: { viewer() { + if (this.diffMode === diffModes.renamed) { + return RenamedFile; + } else if (this.diffMode === diffModes.mode_changed) { + return ModeChanged; + } + if (!this.newPath) return null; const previewInfo = viewerInformationForPath(this.newPath); @@ -67,8 +86,10 @@ export default { :new-path="fullNewPath" :old-path="fullOldPath" :project-path="projectPath" + :a-mode="aMode" + :b-mode="bMode" > - <slot slot="image-overlay" name="image-overlay"> </slot> + <slot slot="image-overlay" name="image-overlay"></slot> </component> <slot></slot> </div> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue new file mode 100644 index 00000000000..53210cbcc93 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/empty_file.vue @@ -0,0 +1,3 @@ +<template> + <div class="nothing-here-block">{{ __('Empty file') }}</div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue new file mode 100644 index 00000000000..3c7a4ea6183 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/mode_changed.vue @@ -0,0 +1,30 @@ +<script> +import { sprintf, __ } from '~/locale'; + +export default { + props: { + aMode: { + type: String, + required: false, + default: null, + }, + bMode: { + type: String, + required: false, + default: null, + }, + }, + computed: { + outputText() { + return sprintf(__('File mode changed from %{a_mode} to %{b_mode}'), { + a_mode: this.aMode, + b_mode: this.bMode, + }); + }, + }, +}; +</script> + +<template> + <div class="nothing-here-block">{{ outputText }}</div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue new file mode 100644 index 00000000000..5c1ea59b471 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/renamed.vue @@ -0,0 +1,3 @@ +<template> + <div class="nothing-here-block">{{ __('File moved') }}</div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue new file mode 100644 index 00000000000..7e79e63aa1e --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/issue/issue_assignees.vue @@ -0,0 +1,94 @@ +<script> +import { GlTooltipDirective } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; + +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + +export default { + components: { + UserAvatarLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + assignees: { + type: Array, + required: true, + }, + }, + data() { + return { + maxVisibleAssignees: 2, + maxAssigneeAvatars: 3, + maxAssignees: 99, + }; + }, + computed: { + countOverLimit() { + return this.assignees.length - this.maxVisibleAssignees; + }, + assigneesToShow() { + if (this.assignees.length > this.maxAssigneeAvatars) { + return this.assignees.slice(0, this.maxVisibleAssignees); + } + return this.assignees; + }, + assigneesCounterTooltip() { + const { countOverLimit, maxAssignees } = this; + const count = countOverLimit > maxAssignees ? maxAssignees : countOverLimit; + + return sprintf(__('%{count} more assignees'), { count }); + }, + shouldRenderAssigneesCounter() { + const assigneesCount = this.assignees.length; + if (assigneesCount <= this.maxAssigneeAvatars) { + return false; + } + + return assigneesCount > this.countOverLimit; + }, + assigneeCounterLabel() { + if (this.countOverLimit > this.maxAssignees) { + return `${this.maxAssignees}+`; + } + + return `+${this.countOverLimit}`; + }, + }, + methods: { + avatarUrlTitle(assignee) { + return sprintf(__('Avatar for %{assigneeName}'), { + assigneeName: assignee.name, + }); + }, + }, +}; +</script> +<template> + <div class="issue-assignees"> + <user-avatar-link + v-for="assignee in assigneesToShow" + :key="assignee.id" + :link-href="assignee.web_url" + :img-alt="avatarUrlTitle(assignee)" + :img-src="assignee.avatar_url" + :img-size="24" + class="js-no-trigger" + tooltip-placement="bottom" + > + <span class="js-assignee-tooltip"> + <span class="bold d-block">{{ __('Assignee') }}</span> {{ assignee.name }} + <span class="text-white-50">@{{ assignee.username }}</span> + </span> + </user-avatar-link> + <span + v-if="shouldRenderAssigneesCounter" + v-gl-tooltip + :title="assigneesCounterTooltip" + class="avatar-counter" + data-placement="bottom" + >{{ assigneeCounterLabel }}</span + > + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue new file mode 100644 index 00000000000..d5d967e25bf --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/issue/issue_milestone.vue @@ -0,0 +1,90 @@ +<script> +import { GlTooltip } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; +import { timeFor, parsePikadayDate, dateInWords } from '~/lib/utils/datetime_utility'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + Icon, + GlTooltip, + }, + mixins: [timeagoMixin], + props: { + milestone: { + type: Object, + required: true, + }, + }, + data() { + return { + milestoneDue: this.milestone.due_date ? parsePikadayDate(this.milestone.due_date) : null, + milestoneStart: this.milestone.start_date + ? parsePikadayDate(this.milestone.start_date) + : null, + }; + }, + computed: { + isMilestoneStarted() { + if (!this.milestoneStart) { + return false; + } + return Date.now() > this.milestoneStart; + }, + isMilestonePastDue() { + if (!this.milestoneDue) { + return false; + } + return Date.now() > this.milestoneDue; + }, + milestoneDatesAbsolute() { + if (this.milestoneDue) { + return `(${dateInWords(this.milestoneDue)})`; + } else if (this.milestoneStart) { + return `(${dateInWords(this.milestoneStart)})`; + } + return ''; + }, + milestoneDatesHuman() { + if (this.milestoneStart || this.milestoneDue) { + if (this.milestoneDue) { + return timeFor( + this.milestoneDue, + sprintf(__('Expired %{expiredOn}'), { + expiredOn: this.timeFormated(this.milestoneDue), + }), + ); + } + + return sprintf( + this.isMilestoneStarted ? __('Started %{startsIn}') : __('Starts %{startsIn}'), + { + startsIn: this.timeFormated(this.milestoneStart), + }, + ); + } + return ''; + }, + }, +}; +</script> +<template> + <div ref="milestoneDetails" class="issue-milestone-details"> + <icon :size="16" class="inline icon" name="clock" /> + <span class="milestone-title">{{ milestone.title }}</span> + <gl-tooltip :target="() => $refs.milestoneDetails" placement="bottom" class="js-item-milestone"> + <span class="bold">{{ __('Milestone') }}</span> <br /> + <span>{{ milestone.title }}</span> <br /> + <span + v-if="milestoneStart || milestoneDue" + :class="{ + 'text-danger-muted': isMilestonePastDue, + 'text-tertiary': !isMilestonePastDue, + }" + ><span>{{ milestoneDatesHuman }}</span + ><br /><span>{{ milestoneDatesAbsolute }}</span> + </span> + </gl-tooltip> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 21d6519191f..2f7ed4a982c 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -1,17 +1,21 @@ <script> import $ from 'jquery'; -import { s__ } from '~/locale'; +import _ from 'underscore'; +import { __ } from '~/locale'; +import { stripHtml } from '~/lib/utils/text_utility'; import Flash from '../../../flash'; import GLForm from '../../../gl_form'; import markdownHeader from './header.vue'; import markdownToolbar from './toolbar.vue'; import icon from '../icon.vue'; +import Suggestions from '~/vue_shared/components/markdown/suggestions.vue'; export default { components: { markdownHeader, markdownToolbar, icon, + Suggestions, }, props: { markdownPreviewPath: { @@ -48,12 +52,33 @@ export default { required: false, default: true, }, + line: { + type: Object, + required: false, + default: null, + }, + note: { + type: Object, + required: false, + default: () => ({}), + }, + canSuggest: { + type: Boolean, + required: false, + default: false, + }, + helpPagePath: { + type: String, + required: false, + default: '', + }, }, data() { return { markdownPreview: '', referencedCommands: '', referencedUsers: '', + hasSuggestion: false, markdownPreviewLoading: false, previewMarkdown: false, }; @@ -63,6 +88,39 @@ export default { const referencedUsersThreshold = 10; return this.referencedUsers.length >= referencedUsersThreshold; }, + lineContent() { + const FIRST_CHAR_REGEX = /^(\+|-)/; + const [firstSuggestion] = this.suggestions; + if (firstSuggestion) { + return firstSuggestion.from_content; + } + + if (this.line) { + const { rich_text: richText, text } = this.line; + + if (text) { + return text.replace(FIRST_CHAR_REGEX, ''); + } + + return _.unescape(stripHtml(richText).replace(/\n/g, '')); + } + + return ''; + }, + lineNumber() { + let lineNumber; + if (this.line) { + const { new_line: newLine, old_line: oldLine } = this.line; + lineNumber = newLine || oldLine; + } + return lineNumber; + }, + suggestions() { + return this.note.suggestions || []; + }, + lineType() { + return this.line ? this.line.type : ''; + }, }, mounted() { /* @@ -99,11 +157,12 @@ export default { if (text) { this.markdownPreviewLoading = true; + this.markdownPreview = __('Loading…'); this.$http .post(this.versionedPreviewPath(), { text }) .then(resp => resp.json()) .then(data => this.renderMarkdown(data)) - .catch(() => new Flash(s__('Error loading markdown preview'))); + .catch(() => new Flash(__('Error loading markdown preview'))); } else { this.renderMarkdown(); } @@ -121,6 +180,7 @@ export default { if (data.references) { this.referencedCommands = data.references.commands; this.referencedUsers = data.references.users; + this.hasSuggestion = data.references.suggestions && data.references.suggestions.length; } this.$nextTick(() => { @@ -146,6 +206,8 @@ export default { > <markdown-header :preview-markdown="previewMarkdown" + :line-content="lineContent" + :can-suggest="canSuggest" @preview-markdown="showPreviewTab" @write-markdown="showWriteTab" /> @@ -162,17 +224,39 @@ export default { /> </div> </div> - <div v-show="previewMarkdown" class="md md-preview-holder md-preview js-vue-md-preview"> - <div ref="markdown-preview" v-html="markdownPreview"></div> - <span v-if="markdownPreviewLoading"> Loading... </span> - </div> + <template v-if="hasSuggestion"> + <div + v-show="previewMarkdown" + ref="markdown-preview" + class="md-preview js-vue-md-preview md md-preview-holder" + > + <suggestions + v-if="hasSuggestion" + :note-html="markdownPreview" + :from-line="lineNumber" + :from-content="lineContent" + :line-type="lineType" + :disabled="true" + :suggestions="suggestions" + :help-page-path="helpPagePath" + /> + </div> + </template> + <template v-else> + <div + v-show="previewMarkdown" + ref="markdown-preview" + class="md-preview js-vue-md-preview md md-preview-holder" + v-html="markdownPreview" + ></div> + </template> <template v-if="previewMarkdown && !markdownPreviewLoading"> <div v-if="referencedCommands" class="referenced-commands" v-html="referencedCommands"></div> <div v-if="shouldShowReferencedUsers" class="referenced-users"> <span> - <i class="fa fa-exclamation-triangle" aria-hidden="true"> </i> You are about to add + <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> You are about to add <strong> - <span class="js-referenced-users-count"> {{ referencedUsers.length }} </span> + <span class="js-referenced-users-count">{{ referencedUsers.length }}</span> </strong> people to the discussion. Proceed with caution. </span> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index 4c4ba537065..bf4d42670ee 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -17,6 +17,16 @@ export default { type: Boolean, required: true, }, + lineContent: { + type: String, + required: false, + default: '', + }, + canSuggest: { + type: Boolean, + required: false, + default: true, + }, }, computed: { mdTable() { @@ -27,6 +37,9 @@ export default { '| cell | cell |', ].join('\n'); }, + mdSuggestion() { + return ['```suggestion', `{text}`, '```'].join('\n'); + }, }, mounted() { $(document).on('markdown-preview:show.vue', this.previewMarkdownTab); @@ -119,6 +132,16 @@ export default { :button-title="__('Add a table')" icon="table" /> + <toolbar-button + v-if="canSuggest" + :tag="mdSuggestion" + :prepend="true" + :button-title="__('Insert suggestion')" + :cursor-offset="4" + :tag-content="lineContent" + icon="doc-code" + class="qa-suggestion-btn" + /> <button v-gl-tooltip aria-label="Go full screen" diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue new file mode 100644 index 00000000000..f98560f7336 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff.vue @@ -0,0 +1,74 @@ +<script> +import SuggestionDiffHeader from './suggestion_diff_header.vue'; + +export default { + components: { + SuggestionDiffHeader, + }, + props: { + newLines: { + type: Array, + required: true, + }, + fromContent: { + type: String, + required: false, + default: '', + }, + fromLine: { + type: Number, + required: true, + }, + suggestion: { + type: Object, + required: true, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + helpPagePath: { + type: String, + required: true, + }, + }, + methods: { + applySuggestion(callback) { + this.$emit('apply', { suggestionId: this.suggestion.id, callback }); + }, + }, +}; +</script> + +<template> + <div> + <suggestion-diff-header + class="qa-suggestion-diff-header" + :can-apply="suggestion.appliable && suggestion.current_user.can_apply && !disabled" + :is-applied="suggestion.applied" + :help-page-path="helpPagePath" + @apply="applySuggestion" + /> + <table class="mb-3 md-suggestion-diff"> + <tbody> + <!-- Old Line --> + <tr class="line_holder old"> + <td class="diff-line-num old_line qa-old-diff-line-number old">{{ fromLine }}</td> + <td class="diff-line-num new_line old"></td> + <td class="line_content old"> + <span>{{ fromContent }}</span> + </td> + </tr> + <!-- New Line(s) --> + <tr v-for="(line, key) of newLines" :key="key" class="line_holder new"> + <td class="diff-line-num old_line new"></td> + <td class="diff-line-num new_line qa-new-diff-line-number new">{{ line.lineNumber }}</td> + <td class="line_content new"> + <span>{{ line.content }}</span> + </td> + </tr> + </tbody> + </table> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue new file mode 100644 index 00000000000..563e2f94fcc --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue @@ -0,0 +1,60 @@ +<script> +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { Icon }, + props: { + canApply: { + type: Boolean, + required: false, + default: false, + }, + isApplied: { + type: Boolean, + required: true, + default: false, + }, + helpPagePath: { + type: String, + required: true, + }, + }, + data() { + return { + isAppliedSuccessfully: false, + isApplying: false, + }; + }, + methods: { + applySuggestion() { + if (!this.canApply) return; + this.isApplying = true; + this.$emit('apply', this.applySuggestionCallback); + }, + applySuggestionCallback() { + this.isApplying = false; + }, + }, +}; +</script> + +<template> + <div class="md-suggestion-header border-bottom-0 mt-2"> + <div class="qa-suggestion-diff-header font-weight-bold"> + {{ __('Suggested change') }} + <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')"> + <icon name="question-o" css-classes="link-highlight" /> + </a> + </div> + <span v-if="isApplied" class="badge badge-success">{{ __('Applied') }}</span> + <button + v-if="canApply" + type="button" + class="btn qa-apply-btn" + :disabled="isApplying" + @click="applySuggestion" + > + {{ __('Apply suggestion') }} + </button> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue new file mode 100644 index 00000000000..7c6dbee3e19 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue @@ -0,0 +1,136 @@ +<script> +import Vue from 'vue'; +import SuggestionDiff from './suggestion_diff.vue'; +import Flash from '~/flash'; + +export default { + components: { SuggestionDiff }, + props: { + fromLine: { + type: Number, + required: false, + default: 0, + }, + fromContent: { + type: String, + required: false, + default: '', + }, + lineType: { + type: String, + required: false, + default: '', + }, + suggestions: { + type: Array, + required: false, + default: () => [], + }, + noteHtml: { + type: String, + required: true, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + helpPagePath: { + type: String, + required: true, + }, + }, + data() { + return { + isRendered: false, + }; + }, + watch: { + suggestions() { + this.reset(); + }, + noteHtml() { + this.reset(); + }, + }, + mounted() { + this.renderSuggestions(); + }, + methods: { + renderSuggestions() { + // swaps out suggestion(s) markdown with rich diff components + // (while still keeping non-suggestion markdown in place) + + if (!this.noteHtml) return; + const { container } = this.$refs; + const suggestionElements = container.querySelectorAll('.js-render-suggestion'); + + if (this.lineType === 'old') { + Flash('Unable to apply suggestions to a deleted line.', 'alert', this.$el); + } + + suggestionElements.forEach((suggestionEl, i) => { + const suggestionParentEl = suggestionEl.parentElement; + const newLines = this.extractNewLines(suggestionParentEl); + const diffComponent = this.generateDiff(newLines, i); + diffComponent.$mount(suggestionParentEl); + }); + + this.isRendered = true; + }, + extractNewLines(suggestionEl) { + // extracts the suggested lines from the markdown + // calculates a line number for each line + + const FIRST_CHAR_REGEX = /^(\+|-)/; + const newLines = suggestionEl.querySelectorAll('.line'); + const fromLine = this.suggestions.length ? this.suggestions[0].from_line : this.fromLine; + const lines = []; + + newLines.forEach((line, i) => { + const content = `${line.innerText.replace(FIRST_CHAR_REGEX, '')}\n`; + const lineNumber = fromLine + i; + lines.push({ content, lineNumber }); + }); + + return lines; + }, + generateDiff(newLines, suggestionIndex) { + // generates the diff <suggestion-diff /> component + // all `suggestion` markdown will be swapped out by this component + + const { suggestions, disabled, helpPagePath } = this; + const suggestion = + suggestions && suggestions[suggestionIndex] ? suggestions[suggestionIndex] : {}; + const fromContent = suggestion.from_content || this.fromContent; + const fromLine = suggestion.from_line || this.fromLine; + const SuggestionDiffComponent = Vue.extend(SuggestionDiff); + const suggestionDiff = new SuggestionDiffComponent({ + propsData: { newLines, fromLine, fromContent, disabled, suggestion, helpPagePath }, + }); + + suggestionDiff.$on('apply', ({ suggestionId, callback }) => { + this.$emit('apply', { suggestionId, callback, flashContainer: this.$el }); + }); + + return suggestionDiff; + }, + reset() { + // resets the container HTML (replaces it with the updated noteHTML) + // calls `renderSuggestions` once the updated noteHTML is added to the DOM + + this.$refs.container.innerHTML = this.noteHtml; + this.isRendered = false; + this.renderSuggestions(); + this.$nextTick(() => this.renderSuggestions()); + }, + }, +}; +</script> + +<template> + <div> + <div class="flash-container mt-3"></div> + <div v-show="isRendered" ref="container" v-html="noteHtml"></div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue index a6d2cecdf7e..4572caa907b 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue @@ -37,6 +37,16 @@ export default { required: false, default: false, }, + tagContent: { + type: String, + required: false, + default: '', + }, + cursorOffset: { + type: Number, + required: false, + default: 0, + }, }, }; </script> @@ -45,8 +55,10 @@ export default { <button v-gl-tooltip :data-md-tag="tag" + :data-md-cursor-offset="cursorOffset" :data-md-select="tagSelect" :data-md-block="tagBlock" + :data-md-tag-content="tagContent" :data-md-prepend="prepend" :title="buttonTitle" :aria-label="buttonTitle" diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue index b1faebf409b..8d3a3009c55 100644 --- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue @@ -17,12 +17,14 @@ * /> */ import { mapGetters } from 'vuex'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; import userAvatarLink from '../user_avatar/user_avatar_link.vue'; export default { name: 'PlaceholderNote', components: { userAvatarLink, + TimelineEntryItem, }, props: { note: { @@ -37,30 +39,28 @@ export default { </script> <template> - <li class="note being-posted fade-in-half timeline-entry"> - <div class="timeline-entry-inner"> - <div class="timeline-icon"> - <user-avatar-link - :link-href="getUserData.path" - :img-src="getUserData.avatar_url" - :img-size="40" - /> - </div> - <div :class="{ discussion: !note.individual_note }" class="timeline-content"> - <div class="note-header"> - <div class="note-header-info"> - <a :href="getUserData.path"> - <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span> - <span class="note-headline-light">@{{ getUserData.username }}</span> - </a> - </div> + <timeline-entry-item class="note being-posted fade-in-half"> + <div class="timeline-icon"> + <user-avatar-link + :link-href="getUserData.path" + :img-src="getUserData.avatar_url" + :img-size="40" + /> + </div> + <div :class="{ discussion: !note.individual_note }" class="timeline-content"> + <div class="note-header"> + <div class="note-header-info"> + <a :href="getUserData.path"> + <span class="d-none d-sm-inline-block">{{ getUserData.name }}</span> + <span class="note-headline-light">@{{ getUserData.username }}</span> + </a> </div> - <div class="note-body"> - <div class="note-text"> - <p>{{ note.body }}</p> - </div> + </div> + <div class="note-body"> + <div class="note-text"> + <p>{{ note.body }}</p> </div> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue index 674f923478d..7689425eb52 100644 --- a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue @@ -1,4 +1,6 @@ <script> +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; + /** * Common component to render a placeholder system note. * @@ -9,6 +11,9 @@ */ export default { name: 'PlaceholderSystemNote', + components: { + TimelineEntryItem, + }, props: { note: { type: Object, @@ -19,11 +24,9 @@ export default { </script> <template> - <li class="note system-note timeline-entry being-posted fade-in-half"> - <div class="timeline-entry-inner"> - <div class="timeline-content"> - <em>{{ note.body }}</em> - </div> + <timeline-entry-item class="note system-note being-posted fade-in-half"> + <div class="timeline-content"> + <em>{{ note.body }}</em> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue index c6cf4661222..e61d1fd2031 100644 --- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -1,22 +1,22 @@ <script> import { GlSkeletonLoading } from '@gitlab/ui'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; export default { name: 'SkeletonNote', components: { GlSkeletonLoading, + TimelineEntryItem, }, }; </script> <template> - <li class="timeline-entry note note-wrapper"> - <div class="timeline-entry-inner"> - <div class="timeline-icon"></div> - <div class="timeline-content"> - <div class="note-header"></div> - <div class="note-body"><gl-skeleton-loading /></div> - </div> + <timeline-entry-item class="note note-wrapper"> + <div class="timeline-icon"></div> + <div class="timeline-content"> + <div class="note-header"></div> + <div class="note-body"><gl-skeleton-loading /></div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index fb86262d0b4..31df26f7b05 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -20,6 +20,7 @@ import $ from 'jquery'; import { mapGetters } from 'vuex'; import noteHeader from '~/notes/components/note_header.vue'; import Icon from '~/vue_shared/components/icon.vue'; +import TimelineEntryItem from './timeline_entry_item.vue'; import { spriteIcon } from '../../../lib/utils/common_utils'; const MAX_VISIBLE_COMMIT_LIST_COUNT = 3; @@ -29,6 +30,7 @@ export default { components: { Icon, noteHeader, + TimelineEntryItem, }, props: { note: { @@ -73,36 +75,34 @@ export default { </script> <template> - <li + <timeline-entry-item :id="noteAnchorId" :class="{ target: isTargetNote }" - class="note system-note timeline-entry note-wrapper" + class="note system-note note-wrapper" > - <div class="timeline-entry-inner"> - <div class="timeline-icon" v-html="iconHtml"></div> - <div class="timeline-content"> - <div class="note-header"> - <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> - <span v-html="actionTextHtml"></span> - </note-header> - </div> - <div class="note-body"> - <div - :class="{ - 'system-note-commit-list': hasMoreCommits, - 'hide-shade': expanded, - }" - class="note-text" - v-html="note.note_html" - ></div> - <div v-if="hasMoreCommits" class="flex-list"> - <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;"> - <icon :name="toggleIcon" :size="8" class="append-right-5" /> - <span>Toggle commit list</span> - </div> + <div class="timeline-icon" v-html="iconHtml"></div> + <div class="timeline-content"> + <div class="note-header"> + <note-header :author="note.author" :created-at="note.created_at" :note-id="note.id"> + <span v-html="actionTextHtml"></span> + </note-header> + </div> + <div class="note-body"> + <div + :class="{ + 'system-note-commit-list': hasMoreCommits, + 'hide-shade': expanded, + }" + class="note-text" + v-html="note.note_html" + ></div> + <div v-if="hasMoreCommits" class="flex-list"> + <div class="system-note-commit-list-toggler flex-row" @click="expanded = !expanded;"> + <icon :name="toggleIcon" :size="8" class="append-right-5" /> + <span>Toggle commit list</span> </div> </div> </div> </div> - </li> + </timeline-entry-item> </template> diff --git a/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue new file mode 100644 index 00000000000..06974a12aed --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/notes/timeline_entry_item.vue @@ -0,0 +1,11 @@ +<script> +export default { + name: 'TimelineEntryItem', +}; +</script> + +<template> + <li class="timeline-entry"> + <div class="timeline-entry-inner"><slot></slot></div> + </li> +</template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue index e742900dbcb..373794fb1f2 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue @@ -44,6 +44,7 @@ export default { class="sidebar-collapsed-icon" data-placement="left" data-container="body" + data-boundary="viewport" @click="handleClick" > <i aria-hidden="true" data-hidden="true" class="fa fa-tags"> </i> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index 01b8b94f9e3..e833a8e0483 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -67,7 +67,7 @@ export default { // In both cases we should render the defaultAvatarUrl sanitizedSource() { let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; - if (baseSrc.indexOf('?') === -1) baseSrc += `?width=${this.size}`; + if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`; return baseSrc; }, resultantSrcAttribute() { @@ -97,6 +97,7 @@ export default { class="avatar" /> <gl-tooltip + v-if="tooltipText || $slots.default" :target="() => $refs.userAvatarImage" :placement="tooltipPlacement" boundary="window" diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue new file mode 100644 index 00000000000..fad1a2f3f56 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue @@ -0,0 +1,108 @@ +<script> +import { GlPopover, GlSkeletonLoading } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; +import UserAvatarImage from '../user_avatar/user_avatar_image.vue'; +import { glEmojiTag } from '../../../emoji'; + +export default { + name: 'UserPopover', + components: { + GlPopover, + GlSkeletonLoading, + UserAvatarImage, + }, + props: { + target: { + type: HTMLAnchorElement, + required: true, + }, + user: { + type: Object, + required: true, + default: null, + }, + loaded: { + type: Boolean, + required: false, + default: false, + }, + }, + computed: { + jobLine() { + if (this.user.bio && this.user.organization) { + return sprintf( + __('%{bio} at %{organization}'), + { + bio: this.user.bio, + organization: this.user.organization, + }, + false, + ); + } else if (this.user.bio) { + return this.user.bio; + } else if (this.user.organization) { + return this.user.organization; + } + return null; + }, + statusHtml() { + if (this.user.status.emoji && this.user.status.message) { + return `${glEmojiTag(this.user.status.emoji)} ${this.user.status.message}`; + } else if (this.user.status.message) { + return this.user.status.message; + } + return ''; + }, + nameIsLoading() { + return !this.user.name; + }, + jobInfoIsLoading() { + return !this.user.loaded && this.user.organization === null; + }, + locationIsLoading() { + return !this.user.loaded && this.user.location === null; + }, + }, +}; +</script> + +<template> + <gl-popover :target="target" boundary="viewport" placement="top" show> + <div class="user-popover d-flex"> + <div class="p-1 flex-shrink-1"> + <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="mr-2" /> + </div> + <div class="p-1 w-100"> + <h5 class="m-0"> + {{ user.name }} + <gl-skeleton-loading + v-if="nameIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </h5> + <div class="text-secondary mb-2"> + <span v-if="user.username">@{{ user.username }}</span> + <gl-skeleton-loading v-else :lines="1" class="animation-container-small mb-1" /> + </div> + <div class="text-secondary"> + {{ jobLine }} + <gl-skeleton-loading + v-if="jobInfoIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </div> + <div class="text-secondary"> + {{ user.location }} + <gl-skeleton-loading + v-if="locationIsLoading" + :lines="1" + class="animation-container-small mb-1" + /> + </div> + <div v-if="user.status" class="mt-2"><span v-html="statusHtml"></span></div> + </div> + </div> + </gl-popover> +</template> diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index bd1cca69c03..bdf20866197 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -35,6 +35,11 @@ @import "pages/**/*"; /* + * Component specific styles, will be moved to gitlab-ui + */ +@import "components/**/*"; + +/* * Code highlight */ @import "highlight/dark"; @@ -42,6 +47,7 @@ @import "highlight/solarized_dark"; @import "highlight/solarized_light"; @import "highlight/white"; +@import "highlight/none"; /* * Styles for JS behaviors. diff --git a/app/assets/stylesheets/bootstrap.scss b/app/assets/stylesheets/bootstrap.scss index a040c2f8c20..4a09da3d580 100644 --- a/app/assets/stylesheets/bootstrap.scss +++ b/app/assets/stylesheets/bootstrap.scss @@ -1,5 +1,5 @@ /* - * Includes specific styles from the bootstrap4 foler in node_modules + * Includes specific styles from the bootstrap4 folder in node_modules */ @import "../../../node_modules/bootstrap/scss/functions"; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index 1e00aa4ff7e..f0671e36130 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -18,8 +18,10 @@ $input-border: $border-color; $padding-base-vertical: $gl-vert-padding; $padding-base-horizontal: $gl-padding; -html { - // Override default font size used in bs4 +body, +.form-control, +.search form { + // Override default font size used in non-csslab UI font-size: 14px; } @@ -336,3 +338,12 @@ input[type=color].form-control { .input-group-btn:last-child { @extend .input-group-append; } + +/* + Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons, + so we need to reset the vertical alignment to the default value. See: + - https://gitlab.com/gitlab-org/gitlab-ce/issues/51362 + */ +svg { + vertical-align: baseline; +} diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss new file mode 100644 index 00000000000..2f4d30fe923 --- /dev/null +++ b/app/assets/stylesheets/components/popover.scss @@ -0,0 +1,9 @@ +.popover { + min-width: 300px; + + .popover-body .user-popover { + padding: $gl-padding-8; + font-size: $gl-font-size-small; + line-height: $gl-line-height; + } +} diff --git a/app/assets/stylesheets/csslab.scss b/app/assets/stylesheets/csslab.scss new file mode 100644 index 00000000000..acaa41e2677 --- /dev/null +++ b/app/assets/stylesheets/csslab.scss @@ -0,0 +1 @@ +@import "../../../node_modules/@gitlab/csslab/dist/css/csslab-slim"; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 4041f2b4479..834e7ffce81 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -65,3 +65,4 @@ @import 'framework/feature_highlight'; @import 'framework/terms'; @import 'framework/read_more'; +@import 'framework/flex_grid'; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index fcf282a7d7c..e132aa4c216 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -21,6 +21,7 @@ &.s46 { @include avatar-size(46px, 15px); } &.s48 { @include avatar-size(48px, 10px); } &.s60 { @include avatar-size(60px, 12px); } + &.s64 { @include avatar-size(64px, 14px); } &.s70 { @include avatar-size(70px, 14px); } &.s90 { @include avatar-size(90px, 15px); } &.s100 { @include avatar-size(100px, 15px); } @@ -80,6 +81,7 @@ &.s40 { font-size: 16px; line-height: 38px; } &.s48 { font-size: 20px; line-height: 46px; } &.s60 { font-size: 32px; line-height: 58px; } + &.s64 { font-size: 32px; line-height: 64px; } &.s70 { font-size: 34px; line-height: 70px; } &.s90 { font-size: 36px; line-height: 88px; } &.s100 { font-size: 36px; line-height: 98px; } @@ -106,6 +108,7 @@ width: 100%; height: 100%; display: flex; + text-decoration: none; } .avatar { @@ -118,6 +121,7 @@ } &.s40 { min-width: 40px; min-height: 40px; } + &.s64 { min-width: 64px; min-height: 64px; } } .avatar-counter { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 219fd99b097..a4a9276c580 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -142,8 +142,14 @@ &.btn-sm { padding: 4px 10px; - font-size: 13px; - line-height: 18px; + font-size: $gl-btn-small-font-size; + line-height: $gl-btn-small-line-height; + } + + &.btn-xs { + padding: 2px $gl-btn-padding; + font-size: $gl-btn-xs-font-size; + line-height: $gl-btn-xs-line-height; } &.btn-success, diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss index bdd7f09d926..0d8e4afa76f 100644 --- a/app/assets/stylesheets/framework/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss @@ -33,7 +33,11 @@ .bs-callout-warning { background-color: $orange-100; border-color: $orange-200; - color: $orange-700; + color: $orange-900; + + a { + color: $orange-900; + } } .bs-callout-info { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 626c8f92d1d..e037b02a30c 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -386,3 +386,18 @@ img.emoji { .flex-no-shrink { flex-shrink: 0; } .mw-460 { max-width: 460px; } .ws-initial { white-space: initial; } +.min-height-0 { min-height: 0; } + +.gl-pl-0 { padding-left: 0; } +.gl-pl-1 { padding-left: #{0.5 * $grid-size}; } +.gl-pl-2 { padding-left: $grid-size; } +.gl-pl-3 { padding-left: #{2 * $grid-size}; } +.gl-pl-4 { padding-left: #{3 * $grid-size}; } +.gl-pl-5 { padding-left: #{4 * $grid-size}; } + +.gl-pr-0 { padding-right: 0; } +.gl-pr-1 { padding-right: #{0.5 * $grid-size}; } +.gl-pr-2 { padding-right: $grid-size; } +.gl-pr-3 { padding-right: #{2 * $grid-size}; } +.gl-pr-4 { padding-right: #{3 * $grid-size}; } +.gl-pr-5 { padding-right: #{4 * $grid-size}; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 6f103e4e89a..8b6a7017c47 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -261,7 +261,7 @@ height: 1px; margin: 4px -1px; padding: 0; - background-color: $dropdown-divider-color; + background-color: $dropdown-divider-bg; } > .active { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ce5d36a340f..afcb230797a 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -176,9 +176,9 @@ display: block; font-weight: $gl-font-weight-normal; position: relative; - padding: 8px 16px; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; color: $gl-text-color; - line-height: normal; + line-height: $gl-btn-line-height; white-space: normal; overflow: hidden; text-align: left; @@ -290,14 +290,18 @@ } } + .dropdown-item { + @include dropdown-link; + } + .divider { height: 1px; margin: #{$grid-size / 2} 0; padding: 0; - background-color: $dropdown-divider-color; + background-color: $dropdown-divider-bg; &:hover { - background-color: $dropdown-divider-color; + background-color: $dropdown-divider-bg; } } @@ -306,7 +310,7 @@ height: 1px; margin-top: 8px; margin-bottom: 8px; - background-color: $dropdown-divider-color; + background-color: $dropdown-divider-bg; } .dropdown-menu-empty-item a { @@ -319,8 +323,8 @@ .dropdown-header { color: $gl-text-color-secondary; font-size: 13px; - line-height: 22px; - padding: 8px 16px; + line-height: $gl-line-height; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; } &.capitalize-header .dropdown-header { @@ -329,13 +333,8 @@ .dropdown-bold-header { font-weight: $gl-font-weight-bold; - line-height: 22px; - padding: 0 16px; - } - - .separator + .dropdown-header, - .separator + .dropdown-bold-header { - padding-top: 10px; + line-height: $gl-line-height; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; } .unclickable { @@ -535,14 +534,15 @@ .dropdown-title { position: relative; - padding: 2px 25px 10px; - margin: 0 10px 10px; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + padding-bottom: #{2 * $dropdown-item-padding-y}; + margin-bottom: $dropdown-item-padding-y; font-weight: $gl-font-weight-bold; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; - border-bottom: 1px solid $dropdown-divider-color; + border-bottom: 1px solid $dropdown-divider-bg; overflow: hidden; } @@ -621,7 +621,7 @@ padding: 0 7px; color: $gl-gray-700; line-height: 30px; - border: 1px solid $dropdown-divider-color; + border: 1px solid $dropdown-divider-bg; border-radius: 2px; outline: 0; @@ -656,7 +656,7 @@ padding-top: 10px; margin-top: 10px; font-size: 13px; - border-top: 1px solid $dropdown-divider-color; + border-top: 1px solid $dropdown-divider-bg; } .dropdown-footer-content { diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 037a5adfb7e..3ac7b6b704b 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -24,7 +24,7 @@ } } - table { + &:not(.use-csslab) table { @extend .table; } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index d5693a5d1a1..f48b3ddc912 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -363,6 +363,12 @@ background-color: $white-light; border-top: 0; } + + .filter-dropdown-container { + .dropdown { + margin-left: 0; + } + } } @include media-breakpoint-down(sm) { @@ -372,16 +378,6 @@ .dropdown-menu { width: 100%; } - - .dropdown { - margin-left: 0; - } - - .fa-chevron-down { - position: absolute; - right: 10px; - top: 10px; - } } } diff --git a/app/assets/stylesheets/framework/flex_grid.scss b/app/assets/stylesheets/framework/flex_grid.scss new file mode 100644 index 00000000000..10537fd5549 --- /dev/null +++ b/app/assets/stylesheets/framework/flex_grid.scss @@ -0,0 +1,52 @@ +.flex-grid { + .grid-row { + border-bottom: 1px solid $border-color; + padding: 0; + + &:last-child { + border-bottom: 0; + } + + @include media-breakpoint-down(md) { + border-bottom: 0; + border-right: 1px solid $border-color; + + &:last-child { + border-right: 0; + } + } + + @include media-breakpoint-down(xs) { + border-right: 0; + border-bottom: 1px solid $border-color; + + &:last-child { + border-bottom: 0; + } + } + } + + .grid-cell { + padding: 10px $gl-padding; + border-right: 1px solid $border-color; + + &:last-child { + border-right: 0; + } + + @include media-breakpoint-up(md) { + flex: 1; + } + + @include media-breakpoint-down(md) { + border-right: 0; + flex: none; + } + } +} + +.card { + .card-body.flex-grid { + padding: 0; + } +} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index afd888af672..4da2243981e 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -256,7 +256,12 @@ label { } } +.input-md { + max-width: $input-md-width; + width: 100%; +} + .input-lg { - max-width: 320px; + max-width: $input-lg-width; width: 100%; } diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index b8bb9e1e07b..0ef50e139f2 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -22,6 +22,10 @@ .container-fluid { .navbar-toggler { border-left: 1px solid lighten($border-and-box-shadow, 10%); + + svg { + fill: $search-and-nav-links; + } } } @@ -309,12 +313,14 @@ body { .navbar-nav { > li { > a:hover, - > a:focus { + > a:focus, + > button:hover { color: $theme-gray-900; } &.active > a, - &.active > a:hover { + &.active > a:hover, + &.active > button { color: $white-light; } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 39410ac56af..7d283dcfb71 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -33,6 +33,7 @@ .close-icon { display: block; + margin: auto; } } @@ -90,12 +91,6 @@ padding: 2px 8px; margin: 5px 2px 5px -8px; border-radius: $border-radius-default; - - .tanuki-logo { - @include media-breakpoint-up(sm) { - margin-right: 8px; - } - } } .project-item-select { @@ -127,12 +122,6 @@ } } - li.dropdown-bold-header { - color: $gl-text-color-secondary; - font-size: 12px; - padding: 0 16px; - } - .navbar-collapse { flex: 0 0 auto; border-top: 0; @@ -180,12 +169,6 @@ color: currentColor; background-color: transparent; } - - .more-icon, - .close-icon { - fill: $white-light; - margin: auto; - } } .navbar-nav { @@ -383,6 +366,16 @@ top: 1px; } } + + .dropdown-menu li a .identicon { + width: 17px; + height: 17px; + font-size: $gl-font-size-xs; + vertical-align: middle; + text-indent: 0; + line-height: $gl-font-size-xs + 2px; + display: inline-block; + } } .breadcrumbs-list { @@ -531,7 +524,7 @@ left: auto; li.current-user { - padding: 5px 18px; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; .user-name { display: block; diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 452e946f95f..73533571a2f 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -42,11 +42,12 @@ padding: 10px; text-align: right; float: left; + line-height: 1; a { font-family: $monospace-font; display: block; - font-size: $code_font_size !important; + font-size: $code-font-size !important; min-height: 19px; white-space: nowrap; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index abd26e38d18..8db7d63266e 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -80,3 +80,15 @@ .user-avatar-link { text-decoration: none; } + +.circle-icon-container { + $border-size: 1px; + + display: flex; + align-items: center; + justify-content: center; + border: $border-size solid $theme-gray-400; + border-radius: 50%; + padding: $gl-padding-8 - $border-size; + color: $theme-gray-700; +} diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 0f6fb16774c..5609a2086e6 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -131,7 +131,7 @@ width: 100%; } -.md { +.md:not(.use-csslab) { &.md-preview-holder { // Reset ul style types since we're nested inside a ul already @include bulleted-list; @@ -277,6 +277,27 @@ } } +.md-suggestion-diff { + display: table !important; + border: 1px solid $border-color !important; +} + +.md-suggestion-header { + height: $suggestion-header-height; + display: flex; + align-items: center; + justify-content: space-between; + background-color: $gray-light; + border: 1px solid $border-color; + padding: $gl-padding; + border-radius: $border-radius-default $border-radius-default 0 0; + + svg { + vertical-align: middle; + margin-bottom: 3px; + } +} + @include media-breakpoint-down(xs) { .atwho-view-ul { width: 350px; diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 6d20c46b99d..3bb046d0e51 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -39,15 +39,6 @@ .git-clone-holder { display: none; } - - // Display Star and Fork buttons without counters on mobile. - .project-repo-buttons { - display: block; - - .count-buttons .count-badge { - margin-top: $gl-padding-8; - } - } } .group-buttons { diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index de9e7c37695..19640ab5986 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -158,6 +158,10 @@ width: 100%; } + .dropdown-menu-toggle { + margin-bottom: 0; + } + form { display: block; height: auto; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 7f0edd88dfb..a68f1e4e570 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -1,6 +1,11 @@ /** Select2 selectbox style override **/ .select2-container { width: 100% !important; + + &.input-md, + &.input-lg { + display: block; + } } .select2-container, diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 4a311da1675..3d5208c3db5 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -31,16 +31,6 @@ .timeline-entry-inner { position: relative; - - @include notes-media('max', map-get($grid-breakpoints, sm)) { - .timeline-icon { - display: none; - } - - .timeline-content { - margin-left: 0; - } - } } &:target, diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index b3b99df5790..0c81dc2e156 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -368,11 +368,11 @@ code { * Apply Markdown typography * */ -.wiki { +.wiki:not(.use-csslab) { @include md-typography; } -.md { +.md:not(.use-csslab) { @include md-typography; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index b43bb3feef5..ce5aaa8963c 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -172,6 +172,7 @@ $theme-light-red-700: #a62e21; $black: #000; $black-transparent: rgba(0, 0, 0, 0.3); +$shadow-color: rgba($black, 0.1); $almost-black: #242424; $border-white-light: darken($white-light, $darken-border-factor); @@ -197,6 +198,8 @@ $well-light-text-color: #5b6169; $gl-font-size: 14px; $gl-font-size-xs: 11px; $gl-font-size-small: 12px; +$gl-font-size-medium: 1.43rem; +$gl-font-size-large: 16px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; $gl-text-color: #2e2e2e; @@ -243,11 +246,13 @@ $gl-padding-top: 10px; $gl-sidebar-padding: 22px; $gl-bar-padding: 3px; $input-horizontal-padding: 12px; +$browserScrollbarSize: 10px; /* * Misc */ $header-height: 40px; +$suggestion-header-height: 46px; $ide-statusbar-height: 25px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; @@ -269,9 +274,11 @@ $performance-bar-height: 35px; $flash-height: 52px; $context-header-height: 60px; $breadcrumb-min-height: 48px; -$project-title-row-height: 24px; +$project-title-row-height: 64px; +$project-avatar-mobile-size: 24px; $gl-line-height: 16px; $gl-line-height-24: 24px; +$gl-line-height-14: 14px; /* * Common component specific colors @@ -331,7 +338,6 @@ $dropdown-max-height: 312px; $dropdown-vertical-offset: 4px; $dropdown-empty-row-bg: rgba(#000, 0.04); $dropdown-shadow-color: rgba(#000, 0.1); -$dropdown-divider-color: rgba(#000, 0.1); $dropdown-title-btn-color: #bfbfbf; $dropdown-input-fa-color: #c7c7c7; $dropdown-input-focus-shadow: rgba($blue-300, 0.4); @@ -365,6 +371,10 @@ $gl-btn-padding: 10px; $gl-btn-line-height: 16px; $gl-btn-vert-padding: 8px; $gl-btn-horz-padding: 12px; +$gl-btn-small-font-size: 13px; +$gl-btn-small-line-height: 18px; +$gl-btn-xs-font-size: 13px; +$gl-btn-xs-line-height: 13px; /* * Badges @@ -395,7 +405,7 @@ $award-emoji-positive-add-lines: #bb9c13; * Search Box */ $search-input-border-color: rgba($blue-400, 0.8); -$search-input-width: 240px; +$search-input-width: 200px; $search-input-active-width: 320px; $location-icon-color: #e7e9ed; @@ -499,6 +509,8 @@ $gl-field-focus-shadow: rgba(0, 0, 0, 0.075); $gl-field-focus-shadow-error: rgba($red-500, 0.6); $input-short-width: 200px; $input-short-md-width: 280px; +$input-md-width: 240px; +$input-lg-width: 320px; /* * Help diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index 759b4f333ca..5ca76bb6c5a 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -19,3 +19,12 @@ $info: $blue-500; $warning: $orange-500; $danger: $red-500; $zindex-modal-backdrop: 1040; +$nav-divider-margin-y: ($grid-size / 2); +$dropdown-divider-bg: $theme-gray-200; +$dropdown-item-padding-y: 8px; +$dropdown-item-padding-x: 12px; +$popover-max-width: 300px; +$popover-border-width: 1px; +$popover-border-color: $border-color; +$popover-box-shadow: 0 $border-radius-small $border-radius-default 0 $shadow-color; +$popover-arrow-outer-color: $shadow-color; diff --git a/app/assets/stylesheets/highlight/none.scss b/app/assets/stylesheets/highlight/none.scss new file mode 100644 index 00000000000..7d692a87e33 --- /dev/null +++ b/app/assets/stylesheets/highlight/none.scss @@ -0,0 +1,242 @@ +/* +* None Syntax Colors +*/ + + + +@mixin matchLine { + color: $black-transparent; + background-color: $white-normal; +} + +.code.none { + // Line numbers + .line-numbers, + .diff-line-num { + background-color: $gray-light; + } + + .diff-line-num, + .diff-line-num a { + color: $black-transparent; + } + + // Code itself + pre.code, + .diff-line-num { + border-color: $white-normal; + } + + &, + pre.code, + .line_holder .line_content { + background-color: $white-light; + color: $gl-text-color; + } + +// Diff line + + $none-over-bg: #ded7fc; + $none-expanded-border: #e0e0e0; + $none-expanded-bg: #f7f7f7; + + .line_holder { + + &.match .line_content, + .new-nonewline.line_content, + .old-nonewline.line_content { + @include matchLine; + } + + .diff-line-num { + &.old { + background-color: $line-number-old; + border-color: $line-removed-dark; + + a { + color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); + } + } + + &.new { + background-color: $line-number-new; + border-color: $line-added-dark; + + a { + color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); + } + } + + &.is-over, + &.hll:not(.empty-cell).is-over { + background-color: $none-over-bg; + border-color: darken($none-over-bg, 5%); + + a { + color: darken($none-over-bg, 15%); + } + } + + &.hll:not(.empty-cell) { + background-color: $line-number-select; + border-color: $line-select-yellow-dark; + } + } + + &:not(.diff-expanded) + .diff-expanded, + &.diff-expanded + .line_holder:not(.diff-expanded) { + > .diff-line-num, + > .line_content { + border-top: 1px solid $none-expanded-border; + } + } + + &.diff-expanded { + > .diff-line-num, + > .line_content { + background: $none-expanded-bg; + border-color: $none-expanded-bg; + } + } + + .line_content { + &.old { + background-color: $line-removed; + + &::before { + color: scale-color($line-number-old, $red: -30%, $green: -30%, $blue: -30%); + } + + span.idiff { + background-color: $line-removed-dark; + } + } + + &.new { + background-color: $line-added; + + &::before { + color: scale-color($line-number-new, $red: -30%, $green: -30%, $blue: -30%); + } + + span.idiff { + background-color: $line-added-dark; + } + } + + &.match { + @include matchLine; + } + + &.hll:not(.empty-cell) { + background-color: $line-select-yellow; + } + } + } + + // highlight line via anchor + pre .hll { + background-color: $white-normal; + } + + // Search result highlight + span.highlight_word { + background-color: $white-normal; + } + + // Links to URLs, emails, or dependencies + .line a { + color: $gl-text-color; + text-decoration: underline; + } + + .hll { background-color: $white-light; } + + .gd { + color: $gl-text-color; + background-color: $white-light; + + .x { + color: $gl-text-color; + background-color: $white-light; + } + } + + .gi { + color: $gl-text-color; + background-color: $white-light; + + .x { + color: $gl-text-color; + background-color: $white-light; + } + } + + .c { color: $gl-text-color; } /* Comment */ + .err { color: $gl-text-color; } /* Error */ + .g { color: $gl-text-color; } /* Generic */ + .k { color: $gl-text-color; } /* Keyword */ + .l { color: $gl-text-color; } /* Literal */ + .n { color: $gl-text-color; } /* Name */ + .o { color: $gl-text-color; } /* Operator */ + .x { color: $gl-text-color; } /* Other */ + .p { color: $gl-text-color; } /* Punctuation */ + .cm { color: $gl-text-color; } /* Comment.Multiline */ + .cp { color: $gl-text-color; } /* Comment.Preproc */ + .c1 { color: $gl-text-color; } /* Comment.Single */ + .cs { color: $gl-text-color; } /* Comment.Special */ + .ge { color: $gl-text-color; } /* Generic.Emph */ + .gr { color: $gl-text-color; } /* Generic.Error */ + .gh { color: $gl-text-color; } /* Generic.Heading */ + .go { color: $gl-text-color; } /* Generic.Output */ + .gp { color: $gl-text-color; } /* Generic.Prompt */ + .gs { color: $gl-text-color; } /* Generic.Strong */ + .gu { color: $gl-text-color; } /* Generic.Subheading */ + .gt { color: $gl-text-color; } /* Generic.Traceback */ + .kc { color: $gl-text-color; } /* Keyword.Constant */ + .kd { color: $gl-text-color; } /* Keyword.Declaration */ + .kn { color: $gl-text-color; } /* Keyword.Namespace */ + .kp { color: $gl-text-color; } /* Keyword.Pseudo */ + .kr { color: $gl-text-color; } /* Keyword.Reserved */ + .kt { color: $gl-text-color; } /* Keyword.Type */ + .ld { color: $gl-text-color; } /* Literal.Date */ + .m { color: $gl-text-color; } /* Literal.Number */ + .s { color: $gl-text-color; } /* Literal.String */ + .na { color: $gl-text-color; } /* Name.Attribute */ + .nb { color: $gl-text-color; } /* Name.Builtin */ + .nc { color: $gl-text-color; } /* Name.Class */ + .no { color: $gl-text-color; } /* Name.Constant */ + .nd { color: $gl-text-color; } /* Name.Decorator */ + .ni { color: $gl-text-color; } /* Name.Entity */ + .ne { color: $gl-text-color; } /* Name.Exception */ + .nf { color: $gl-text-color; } /* Name.Function */ + .nl { color: $gl-text-color; } /* Name.Label */ + .nn { color: $gl-text-color; } /* Name.Namespace */ + .nx { color: $gl-text-color; } /* Name.Other */ + .py { color: $gl-text-color; } /* Name.Property */ + .nt { color: $gl-text-color; } /* Name.Tag */ + .nv { color: $gl-text-color; } /* Name.Variable */ + .ow { color: $gl-text-color; } /* Operator.Word */ + .w { color: $gl-text-color; } /* Text.Whitespace */ + .mf { color: $gl-text-color; } /* Literal.Number.Float */ + .mh { color: $gl-text-color; } /* Literal.Number.Hex */ + .mi { color: $gl-text-color; } /* Literal.Number.Integer */ + .mo { color: $gl-text-color; } /* Literal.Number.Oct */ + .sb { color: $gl-text-color; } /* Literal.String.Backtick */ + .sc { color: $gl-text-color; } /* Literal.String.Char */ + .sd { color: $gl-text-color; } /* Literal.String.Doc */ + .s2 { color: $gl-text-color; } /* Literal.String.Double */ + .se { color: $gl-text-color; } /* Literal.String.Escape */ + .sh { color: $gl-text-color; } /* Literal.String.Heredoc */ + .si { color: $gl-text-color; } /* Literal.String.Interpol */ + .sx { color: $gl-text-color; } /* Literal.String.Other */ + .sr { color: $gl-text-color; } /* Literal.String.Regex */ + .s1 { color: $gl-text-color; } /* Literal.String.Single */ + .ss { color: $gl-text-color; } /* Literal.String.Symbol */ + .bp { color: $gl-text-color; } /* Name.Builtin.Pseudo */ + .vc { color: $gl-text-color; } /* Name.Variable.Class */ + .vg { color: $gl-text-color; } /* Name.Variable.Global */ + .vi { color: $gl-text-color; } /* Name.Variable.Instance */ + .il { color: $gl-text-color; } /* Literal.Number.Integer.Long */ + +} diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss new file mode 100644 index 00000000000..896a3466cb4 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss @@ -0,0 +1,18 @@ +@mixin ide-trace-view { + display: flex; + flex-direction: column; + height: 100%; + margin-top: -$grid-size; + margin-bottom: -$grid-size; + + &.build-page .top-bar { + top: 0; + height: auto; + font-size: 12px; + border-top-right-radius: $border-radius-default; + } + + .top-bar { + margin-left: -$gl-padding; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 07d82e984ba..98d0a2d43ea 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1,5 +1,6 @@ @import 'framework/variables'; @import 'framework/mixins'; +@import './ide_mixins'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -1111,11 +1112,7 @@ $ide-commit-header-height: 48px; } .ide-pipeline { - display: flex; - flex-direction: column; - height: 100%; - margin-top: -$grid-size; - margin-bottom: -$grid-size; + @include ide-trace-view(); .empty-state { margin-top: auto; @@ -1133,17 +1130,9 @@ $ide-commit-header-height: 48px; } } - .build-trace, - .top-bar { + .build-trace { margin-left: -$gl-padding; } - - &.build-page .top-bar { - top: 0; - height: auto; - font-size: 12px; - border-top-right-radius: $border-radius-default; - } } .ide-pipeline-list { diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index c6074eb9df4..37984a8666f 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -41,7 +41,7 @@ .issue-board-dropdown-content { margin: 0 8px 10px; padding-bottom: 10px; - border-bottom: 1px solid $dropdown-divider-color; + border-bottom: 1px solid $dropdown-divider-bg; > p { margin: 0; diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 81cb519883b..c7dde2f0f2a 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -228,9 +228,21 @@ padding: 16px 0; } + .trigger-variables-btn-container { + @extend .d-flex; + justify-content: space-between; + align-items: center; + + .trigger-variables-btn { + margin-top: -5px; + margin-bottom: -5px; + } + } + .trigger-build-variables { margin: 0; overflow-x: auto; + width: 100%; -ms-overflow-style: scrollbar; -webkit-overflow-scrolling: touch; } @@ -243,7 +255,15 @@ .trigger-build-value { padding: 2px 4px; color: $black; - background-color: $white-light; + } + + .trigger-variables-table-cell { + font-size: $gl-font-size-small; + line-height: $gl-line-height; + border: 1px solid $theme-gray-200; + padding: $gl-padding-4 6px; + width: 50%; + vertical-align: top; } .badge.badge-pill { diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 5405f20a760..18c62cb4f1e 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -914,6 +914,7 @@ padding: 0; width: (2px * $image-comment-cursor-left-offset); height: (2px * $image-comment-cursor-top-offset); + color: $blue-400; // center the indicator to match the top left click region margin-top: (-1px * $image-comment-cursor-top-offset) + 2; margin-left: (-1px * $image-comment-cursor-left-offset) + 1; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 8ea34f5d19d..bb6b6f84849 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -259,6 +259,16 @@ ul.related-merge-requests > li { display: block; } +.issue-sort-dropdown { + .btn-group { + width: 100%; + } + + .reverse-sort-btn { + color: $gl-text-color-secondary; + } +} + @include media-breakpoint-up(sm) { .emoji-block .row { display: flex; diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index fa0ab1a3bae..67d7a8175ac 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -49,8 +49,8 @@ .login-box, .omniauth-container { box-shadow: 0 0 0 1px $border-color; - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; + border-bottom-right-radius: $border-radius-small; + border-bottom-left-radius: $border-radius-small; padding: 15px; .login-heading h3 { @@ -95,6 +95,7 @@ } .omniauth-container { + border-radius: $border-radius-small; font-size: 13px; p { diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index d26659701e1..e0f7d075fc7 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -93,8 +93,28 @@ $colors: ( solarized-dark-line-origin-chosen : rgba(#2878c9, .35), solarized-dark-button-origin-chosen : #0082cc, - solarized-dark-header-not-chosen : rgba(#839496, .25), - solarized-dark-line-not-chosen : rgba(#839496, .15) + solarized_dark_header_not_chosen : rgba(#839496, .25), + solarized_dark_line_not_chosen : rgba(#839496, .15), + + none_header_head_neutral : $gray-normal, + none_line_head_neutral : $gray-normal, + none_button_head_neutral : $gray-normal, + + none_header_head_chosen : $gray-darker, + none_line_head_chosen : $gray-darker, + none_button_head_chosen : $gray-darker, + + none_header_origin_neutral : $gray-normal, + none_line_origin_neutral : $gray-normal, + none_button_origin_neutral : $gray-normal, + + none_header_origin_chosen : $gray-darker, + none_line_origin_chosen : $gray-darker, + none_button_origin_chosen : $gray-darker, + + none_header_not_chosen : $gray-light, + none_line_not_chosen : $gray-light + ); // scss-lint:enable ColorVariable diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index b075009b57c..221b4e934ff 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -50,9 +50,19 @@ .mr-widget-heading { position: relative; border: 1px solid $border-color; - border-radius: 4px; + border-radius: $border-radius-default; +} - &:not(.deploy-heading)::before { +.mr-widget-extension { + border-top: 1px solid $border-color; + background-color: $gray-light; +} + +.mr-widget-workflow { + margin-top: $gl-padding; + position: relative; + + &::before { content: ''; border-left: 1px solid $theme-gray-200; position: absolute; @@ -68,8 +78,8 @@ border-top: 0; } -.mr-widget-heading, .mr-widget-section, +.mr-widget-content, .mr-widget-footer { padding: $gl-padding; } @@ -560,19 +570,6 @@ color: $gl-text-color; } - .git-merge-icon-container { - border: 1px solid $theme-gray-400; - border-radius: 50%; - height: 32px; - width: 32px; - color: $theme-gray-700; - line-height: 28px; - - .ic-git-merge { - vertical-align: middle; - width: 31px; - } - } .git-merge-container { justify-content: space-between; @@ -854,11 +851,6 @@ } .deploy-heading { - margin-top: -19px; - border-top-left-radius: 0; - border-top-right-radius: 0; - background-color: $gray-light; - @include media-breakpoint-up(md) { padding: $gl-padding-8 $gl-padding; } @@ -868,6 +860,10 @@ font-size: 12px; margin-left: 48px; } + + &:not(:last-child) { + border-bottom: 1px solid $border-color; + } } .deploy-body { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 97b3f696139..5b30295adf9 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -178,7 +178,7 @@ table { .discussion-form-container { - padding: $gl-padding-top $gl-padding $gl-padding; + padding: $gl-padding; } } @@ -237,11 +237,12 @@ table { } .discussion-body, -.diff-file { +.diff-file, +.commit-diff { .discussion-reply-holder { background-color: $white-light; - padding: 10px 16px; border-radius: 0 0 3px 3px; + padding: $gl-padding; &.is-replying { padding-bottom: $gl-padding; @@ -254,7 +255,6 @@ table { display: flex; } - .discussion-actions { display: table; @@ -275,8 +275,10 @@ table { } } - .btn { - width: 100%; + @include media-breakpoint-down(xs) { + .btn { + width: 100%; + } } .btn-text-field { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4fda2964fd5..a5b1eff3e1d 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -14,7 +14,7 @@ $note-form-margin-left: 72px; } @mixin outline-comment() { - margin: $gl-padding; + margin: $gl-padding $gl-padding 0; border: 1px solid $border-color; border-radius: $border-radius-default; } @@ -27,8 +27,10 @@ $note-form-margin-left: 72px; } } -.main-notes-list { - @include vertical-line(36px); +.issuable-discussion { + .main-notes-list { + @include vertical-line(36px); + } } .notes { @@ -76,10 +78,10 @@ $note-form-margin-left: 72px; .card { border: 0; } + } - li.note { - border-bottom: 1px solid $border-color; - } + li.note { + border-bottom: 1px solid $border-color; } .replies-toggle { @@ -150,6 +152,16 @@ $note-form-margin-left: 72px; display: block; position: relative; + .timeline-discussion-body { + margin-top: -8px; + overflow-x: auto; + overflow-y: hidden; + + .discussion-resolved-text { + margin-bottom: 8px; + } + } + .diff-content { overflow: visible; padding: 0; @@ -161,20 +173,6 @@ $note-form-margin-left: 72px; position: relative; border-bottom: 0; - &:target, - &.target { - border-bottom: 1px solid $white-normal; - - &:not(:first-child) { - border-top: 1px solid $white-normal; - margin-top: -1px; - } - - .timeline-entry-inner { - border-bottom: 0; - } - } - &.being-posted { pointer-events: none; opacity: 0.5; @@ -371,10 +369,10 @@ $note-form-margin-left: 72px; &::after { content: ''; - width: 100%; height: 70px; position: absolute; - left: 0; + left: $gl-padding-24; + right: 0; bottom: 0; background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%); } @@ -462,7 +460,7 @@ $note-form-margin-left: 72px; font-family: $regular-font; td { - border: 1px solid $white-normal; + border: 1px solid $border-color; border-left: 0; &.notes_content { @@ -504,8 +502,6 @@ $note-form-margin-left: 72px; } .note-wrapper { - @include outline-comment(); - &.system-note { border: 0; margin-left: 20px; @@ -514,23 +510,14 @@ $note-form-margin-left: 72px; .discussion-reply-holder { border-radius: 0 0 $border-radius-default $border-radius-default; - border-top: 1px solid $border-color; position: relative; } } .commit-diff { - .notes { - @include vertical-line(52px); - } - .notes_content { background-color: $white-light; } - - .discussion-reply-holder { - border-top: 1px solid $border-color; - } } .discussion-header, @@ -589,12 +576,6 @@ $note-form-margin-left: 72px; padding-bottom: 0; } -.note-header-author-name { - @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { - display: none; - } -} - .note-headline-light { display: inline; @@ -949,12 +930,6 @@ $note-form-margin-left: 72px; border-bottom: 1px solid $border-color; } - .note-wrapper.outlined { - margin: 0; - border: 0; - border-radius: 0; - } - .discussion-form-container { padding: $gl-padding; } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 1d691d1d8b8..b813eb16dad 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -98,7 +98,6 @@ // Limits the width of the user bio for readability. max-width: 600px; margin: 10px auto; - padding: 0 16px; } .user-avatar-button { @@ -144,11 +143,13 @@ .provider-btn-group { display: inline-block; margin-right: 10px; + margin-bottom: 10px; border: 1px solid $border-color; border-radius: 3px; &:last-child { margin-right: 0; + margin-bottom: 0; } } @@ -220,7 +221,11 @@ } .profile-header { - margin: 0 auto; + margin: 0 $gl-padding; + + &.with-no-profile-tabs { + margin-bottom: $gl-padding-24; + } .avatar-holder { width: 90px; @@ -451,4 +456,15 @@ table.u2f-registrations { } } } + + @include media-breakpoint-down(sm) { + .input-md, + .input-lg { + max-width: 100%; + } + } +} + +.help-block { + color: $gl-text-color-secondary; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 80ec390d18e..0ce0db038a7 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -144,7 +144,6 @@ .group-home-panel { padding-top: 24px; padding-bottom: 24px; - border-bottom: 1px solid $border-color; .group-avatar { float: none; @@ -155,7 +154,6 @@ } } - .project-title, .group-title { margin-top: 10px; margin-bottom: 10px; @@ -195,25 +193,69 @@ } .project-home-panel { - padding-top: $gl-padding-8; - padding-bottom: $gl-padding-24; - - .project-title-row { - margin-right: $gl-padding-8; - } + padding-top: $gl-padding; + padding-bottom: $gl-padding; .project-avatar { width: $project-title-row-height; height: $project-title-row-height; flex-shrink: 0; flex-basis: $project-title-row-height; - margin: 0 $gl-padding-8 0 0; + margin: 0 $gl-padding 0 0; } .project-title { + margin-top: 8px; + margin-bottom: 5px; font-size: 20px; - line-height: $project-title-row-height; + line-height: $gl-line-height-24; font-weight: bold; + + .icon { + font-size: $gl-font-size-large; + } + + .project-visibility { + color: $gl-text-color-secondary; + } + + .project-tag-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .project-title-row { + @include media-breakpoint-down(sm) { + .project-avatar { + width: $project-avatar-mobile-size; + height: $project-avatar-mobile-size; + flex-basis: $project-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .project-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .project-tag-list, + .project-metadata { + font-size: $gl-font-size-small; + } + } } .project-metadata { @@ -222,16 +264,6 @@ line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - .icon { - margin-right: $gl-padding-4; - font-size: 16px; - } - - .project-visibility, - .project-license, - .project-tag-list { - margin-right: $gl-padding-8; - } .project-license { .btn { @@ -240,12 +272,22 @@ } } - .project-tag-list, - .project-license { - .icon { - position: relative; - top: 2px; - } + .access-request-link, + .project-tag-list { + padding-left: $gl-padding-8; + border-left: 1px solid $gl-text-color-secondary; + } + } + + .project-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } + + .notifications-btn { + .fa-bell { + margin-right: 0; } } } @@ -298,14 +340,6 @@ vertical-align: top; margin-top: $gl-padding; - .count-badge { - height: $input-height; - - .icon { - top: -1px; - } - } - .count-badge-count, .count-badge-button { border: 1px solid $border-color; @@ -319,29 +353,25 @@ .count-badge-count { padding: 0 12px; - border-right: 0; - border-radius: $border-radius-base 0 0 $border-radius-base; background: $gray-light; + border-radius: 0 $border-radius-base $border-radius-base 0; } .count-badge-button { - border-radius: 0 $border-radius-base $border-radius-base 0; + border-right: 0; + border-radius: $border-radius-base 0 0 $border-radius-base; } } .project-clone-holder { display: inline-block; - margin: $gl-padding $gl-padding-8 0 0; + margin: $gl-padding 0 0; input { height: $input-height; } } - .clone-dropdown-btn { - background-color: $white-light; - } - .clone-options-dropdown { min-width: 240px; @@ -355,6 +385,31 @@ } } +.project-repo-buttons { + .icon { + top: 0; + } + + .count-badge, + .btn-xs { + height: 24px; + } + + .dropdown-toggle, + .clone-dropdown-btn { + .fa { + color: unset; + } + } + + .btn { + .notifications-icon { + top: 1px; + margin-right: 0; + } + } +} + .split-one { display: inline-table; margin-right: 12px; @@ -715,15 +770,16 @@ border-bottom: 1px solid $border-color; } -.project-stats { +.project-stats, +.project-buttons { font-size: 0; text-align: center; - border-bottom: 1px solid $border-color; .scrolling-tabs-container { .scrolling-tabs { margin-top: $gl-padding-8; - margin-bottom: $gl-padding-8; + margin-bottom: $gl-padding-8 - $browserScrollbarSize; + padding-bottom: $browserScrollbarSize; flex-wrap: wrap; border-bottom: 0; } @@ -731,7 +787,7 @@ .fade-left, .fade-right { top: 0; - height: 100%; + height: calc(100% - #{$browserScrollbarSize}); .fa { top: 50%; @@ -785,23 +841,43 @@ font-size: $gl-font-size; line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - white-space: nowrap; + white-space: pre-wrap; } .stat-link { border-bottom: 0; + color: $black; &:hover, &:focus { - color: $gl-text-color; text-decoration: underline; border-bottom: 0; } + + .project-stat-value { + color: $gl-text-color; + } + + .icon { + color: $gl-text-color-secondary; + } + + .add-license-link { + &, + .icon { + color: $blue-600; + } + } } .btn { - padding: $gl-btn-vert-padding $gl-btn-horz-padding; + margin-top: $gl-padding; + padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; + + .icon { + top: 0; + } } .btn-missing { @@ -810,6 +886,13 @@ } } +.project-buttons { + .stat-text { + @extend .btn; + @extend .btn-default; + } +} + .repository-languages-bar { height: 8px; margin-bottom: $gl-padding-8; @@ -886,34 +969,73 @@ pre.light-well { @include basic-list-stats; display: flex; align-items: center; - } + color: $gl-text-color-secondary; + padding: $gl-padding 0; - h3 { - font-size: $gl-font-size; + @include media-breakpoint-up(lg) { + padding: $gl-padding-24 0; + } + + &.no-description { + @include media-breakpoint-up(sm) { + .avatar-container { + align-self: center; + } + + .metadata-info { + margin-bottom: 0; + } + } + } } - .avatar-container, - .controls { - flex: 0 0 auto; + h2 { + font-size: $gl-font-size-medium; + font-weight: $gl-font-weight-bold; + margin-bottom: 0; + + @include media-breakpoint-up(sm) { + .namespace-name { + font-weight: $gl-font-weight-normal; + } + } } .avatar-container { + flex: 0 0 auto; align-self: flex-start; } .project-details { min-width: 0; + line-height: $gl-line-height; + + .flex-wrapper { + min-width: 0; + margin-top: -$gl-padding-8; // negative margin required for flex-wrap + } p, .commit-row-message { @include str-truncated(100%); margin-bottom: 0; } - } - .controls { - margin-left: auto; - text-align: right; + .user-access-role { + margin: 0; + } + + @include media-breakpoint-up(md) { + .description { + color: $gl-text-color; + } + } + + @include media-breakpoint-down(md) { + .user-access-role { + line-height: $gl-line-height-14; + } + } } .ci-status-link { @@ -925,6 +1047,149 @@ pre.light-well { text-decoration: none; } } + + .controls { + margin-top: $gl-padding; + + @include media-breakpoint-down(md) { + margin-top: 0; + } + + @include media-breakpoint-down(xs) { + margin-top: $gl-padding-8; + } + + .icon-wrapper { + color: inherit; + margin-right: $gl-padding; + + @include media-breakpoint-down(md) { + margin-right: 0; + margin-left: $gl-padding-8; + } + + @include media-breakpoint-down(xs) { + &:first-child { + margin-left: 0; + } + } + } + + .ci-status-link { + display: inline-flex; + } + } + + .star-button { + .icon { + top: 0; + } + } + + .icon-container { + @include media-breakpoint-down(xs) { + margin-right: $gl-padding-8; + } + } + + &.compact { + .project-row { + padding: $gl-padding 0; + } + + h2 { + font-size: $gl-font-size; + } + + .avatar-container { + @include avatar-size(40px, 10px); + min-height: 40px; + min-width: 40px; + + .identicon.s64 { + font-size: 16px; + } + } + + .controls { + @include media-breakpoint-up(sm) { + margin-top: 0; + } + } + + .updated-note { + @include media-breakpoint-up(sm) { + margin-top: $gl-padding-8; + } + } + + .icon-wrapper { + margin-left: $gl-padding-8; + margin-right: 0; + + @include media-breakpoint-down(xs) { + &:first-child { + margin-left: 0; + } + } + } + + .user-access-role { + line-height: $gl-line-height-14; + } + } + + @include media-breakpoint-down(md) { + h2 { + font-size: $gl-font-size; + } + + .avatar-container { + @include avatar-size(40px, 10px); + min-height: 40px; + min-width: 40px; + + .identicon.s64 { + font-size: 16px; + } + } + } + + @include media-breakpoint-down(md) { + .updated-note { + margin-top: $gl-padding-8; + text-align: right; + } + } + + .forks, + .pipeline-status, + .updated-note { + display: flex; + } + + @include media-breakpoint-down(md) { + &:not(.explore) { + .forks { + display: none; + + } + } + + &.explore { + .pipeline-status, + .updated-note { + display: none !important; + } + } + } + + @include media-breakpoint-down(xs) { + .updated-note { + margin-top: 0; + text-align: left; + } + } } .card .projects-list li { @@ -933,8 +1198,6 @@ pre.light-well { } .git-clone-holder { - width: 320px; - .btn-clipboard { border: 1px solid $border-color; } @@ -957,6 +1220,15 @@ pre.light-well { } } +.git-clone-holder, +.mobile-git-clone { + .btn { + .icon { + fill: $white; + } + } +} + .cannot-be-merged, .cannot-be-merged:hover { color: $red-500; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 04151b1cd59..149c3254d84 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -101,8 +101,6 @@ input[type='checkbox']:hover { .dropdown-header { // Necessary because glDropdown doesn't support a second style of headers font-weight: $gl-font-weight-bold; - // .dropdown-menu li has 1px side padding - padding: $gl-padding-8 17px; color: $gl-text-color; font-size: $gl-font-size; line-height: 16px; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index dc5ca78ff58..a46b8679a42 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -104,11 +104,23 @@ border-bottom: 1px solid $white-normal; border-top: 1px solid $white-normal; + &:last-of-type { + border-bottom-color: $white-light; + } + td, th { line-height: 21px; } + th { + border-top-color: $gray-light; + } + + td { + border-color: $border-color; + } + &:hover:not(.tree-truncated-warning) { td { background-color: $blue-50; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index 800f5c68e39..82e887aa62a 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -180,7 +180,7 @@ ul.wiki-pages-list.content-list { } } -.wiki { +.wiki:not(.use-csslab) { table { @include markdown-table; } |
