Commit 10cc335c authored by Fatih Acet's avatar Fatih Acet

Merge branch 'prettify-all-the-things-1' into 'master'

Prettify all the things (part 1)

See merge request gitlab-org/gitlab-ce!22248
parents 68eafa50 8b090caf
...@@ -51,7 +51,7 @@ export default function initCopyToClipboard() { ...@@ -51,7 +51,7 @@ export default function initCopyToClipboard() {
* the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy * the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy
* data types to the intended values. * data types to the intended values.
*/ */
$(document).on('copy', 'body > textarea[readonly]', (e) => { $(document).on('copy', 'body > textarea[readonly]', e => {
const { clipboardData } = e.originalEvent; const { clipboardData } = e.originalEvent;
if (!clipboardData) return; if (!clipboardData) return;
......
...@@ -2,7 +2,9 @@ import $ from 'jquery'; ...@@ -2,7 +2,9 @@ import $ from 'jquery';
$(() => { $(() => {
$('body').on('click', '.js-details-target', function target() { $('body').on('click', '.js-details-target', function target() {
$(this).closest('.js-details-container').toggleClass('open'); $(this)
.closest('.js-details-container')
.toggleClass('open');
}); });
// Show details content. Hides link after click. // Show details content. Hides link after click.
...@@ -13,7 +15,9 @@ $(() => { ...@@ -13,7 +15,9 @@ $(() => {
// //
$('body').on('click', '.js-details-expand', function expand(e) { $('body').on('click', '.js-details-expand', function expand(e) {
e.preventDefault(); e.preventDefault();
$(this).next('.js-details-content').removeClass('hide'); $(this)
.next('.js-details-content')
.removeClass('hide');
$(this).hide(); $(this).hide();
const truncatedItem = $(this).siblings('.js-details-short'); const truncatedItem = $(this).siblings('.js-details-short');
......
...@@ -34,7 +34,7 @@ const gfmRules = { ...@@ -34,7 +34,7 @@ const gfmRules = {
}, },
}, },
AutolinkFilter: { AutolinkFilter: {
'a'(el, text) { a(el, text) {
// Fallback on the regular MarkdownFilter's `a` handler. // Fallback on the regular MarkdownFilter's `a` handler.
if (text !== el.getAttribute('href')) return false; if (text !== el.getAttribute('href')) return false;
...@@ -60,7 +60,7 @@ const gfmRules = { ...@@ -60,7 +60,7 @@ const gfmRules = {
}, },
}, },
ImageLazyLoadFilter: { ImageLazyLoadFilter: {
'img'(el, text) { img(el, text) {
return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`; return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
}, },
}, },
...@@ -71,7 +71,7 @@ const gfmRules = { ...@@ -71,7 +71,7 @@ const gfmRules = {
return CopyAsGFM.nodeToGFM(videoEl); return CopyAsGFM.nodeToGFM(videoEl);
}, },
'video'(el) { video(el) {
return `![${el.dataset.title}](${el.getAttribute('src')})`; return `![${el.dataset.title}](${el.getAttribute('src')})`;
}, },
}, },
...@@ -118,11 +118,14 @@ const gfmRules = { ...@@ -118,11 +118,14 @@ const gfmRules = {
'a[name]:not([href]):empty'(el) { 'a[name]:not([href]):empty'(el) {
return el.outerHTML; return el.outerHTML;
}, },
'dl'(el, text) { dl(el, text) {
let lines = text.replace(/\n\n/g, '\n').trim().split('\n'); let lines = text
.replace(/\n\n/g, '\n')
.trim()
.split('\n');
// Add two spaces to the front of subsequent list items lines, // Add two spaces to the front of subsequent list items lines,
// or leave the line entirely blank. // or leave the line entirely blank.
lines = lines.map((l) => { lines = lines.map(l => {
const line = l.trim(); const line = l.trim();
if (line.length === 0) return ''; if (line.length === 0) return '';
...@@ -151,12 +154,15 @@ const gfmRules = { ...@@ -151,12 +154,15 @@ const gfmRules = {
// Prefixes lines with 4 spaces if the code contains triple backticks // Prefixes lines with 4 spaces if the code contains triple backticks
if (lang === '' && text.match(/^```/gm)) { if (lang === '' && text.match(/^```/gm)) {
return text.split('\n').map((l) => { return text
.split('\n')
.map(l => {
const line = l.trim(); const line = l.trim();
if (line.length === 0) return ''; if (line.length === 0) return '';
return ` ${line}`; return ` ${line}`;
}).join('\n'); })
.join('\n');
} }
return `\`\`\`${lang}\n${text}\n\`\`\``; return `\`\`\`${lang}\n${text}\n\`\`\``;
...@@ -167,11 +173,11 @@ const gfmRules = { ...@@ -167,11 +173,11 @@ const gfmRules = {
}, },
}, },
MarkdownFilter: { MarkdownFilter: {
'br'(el) { br(el) {
// Two spaces at the end of a line are turned into a BR // Two spaces at the end of a line are turned into a BR
return ' '; return ' ';
}, },
'code'(el, text) { code(el, text) {
let backtickCount = 1; let backtickCount = 1;
const backtickMatch = text.match(/`+/); const backtickMatch = text.match(/`+/);
if (backtickMatch) { if (backtickMatch) {
...@@ -183,27 +189,31 @@ const gfmRules = { ...@@ -183,27 +189,31 @@ const gfmRules = {
return backticks + spaceOrNoSpace + text.trim() + spaceOrNoSpace + backticks; return backticks + spaceOrNoSpace + text.trim() + spaceOrNoSpace + backticks;
}, },
'blockquote'(el, text) { blockquote(el, text) {
return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n'); return text
.trim()
.split('\n')
.map(s => `> ${s}`.trim())
.join('\n');
}, },
'img'(el) { img(el) {
const imageSrc = el.src; const imageSrc = el.src;
const imageUrl = imageSrc && imageSrc !== placeholderImage ? imageSrc : (el.dataset.src || ''); const imageUrl = imageSrc && imageSrc !== placeholderImage ? imageSrc : el.dataset.src || '';
return `![${el.getAttribute('alt')}](${imageUrl})`; return `![${el.getAttribute('alt')}](${imageUrl})`;
}, },
'a.anchor'(el, text) { 'a.anchor'(el, text) {
// Don't render a Markdown link for the anchor link inside a heading // Don't render a Markdown link for the anchor link inside a heading
return text; return text;
}, },
'a'(el, text) { a(el, text) {
return `[${text}](${el.getAttribute('href')})`; return `[${text}](${el.getAttribute('href')})`;
}, },
'li'(el, text) { li(el, text) {
const lines = text.trim().split('\n'); const lines = text.trim().split('\n');
const firstLine = `- ${lines.shift()}`; const firstLine = `- ${lines.shift()}`;
// Add four spaces to the front of subsequent list items lines, // Add four spaces to the front of subsequent list items lines,
// or leave the line entirely blank. // or leave the line entirely blank.
const nextLines = lines.map((s) => { const nextLines = lines.map(s => {
if (s.trim().length === 0) return ''; if (s.trim().length === 0) return '';
return ` ${s}`; return ` ${s}`;
...@@ -211,49 +221,49 @@ const gfmRules = { ...@@ -211,49 +221,49 @@ const gfmRules = {
return `${firstLine}\n${nextLines.join('\n')}`; return `${firstLine}\n${nextLines.join('\n')}`;
}, },
'ul'(el, text) { ul(el, text) {
return text; return text;
}, },
'ol'(el, text) { ol(el, text) {
// LIs get a `- ` prefix by default, which we replace by `1. ` for ordered lists. // LIs get a `- ` prefix by default, which we replace by `1. ` for ordered lists.
return text.replace(/^- /mg, '1. '); return text.replace(/^- /gm, '1. ');
}, },
'h1'(el, text) { h1(el, text) {
return `# ${text.trim()}\n`; return `# ${text.trim()}\n`;
}, },
'h2'(el, text) { h2(el, text) {
return `## ${text.trim()}\n`; return `## ${text.trim()}\n`;
}, },
'h3'(el, text) { h3(el, text) {
return `### ${text.trim()}\n`; return `### ${text.trim()}\n`;
}, },
'h4'(el, text) { h4(el, text) {
return `#### ${text.trim()}\n`; return `#### ${text.trim()}\n`;
}, },
'h5'(el, text) { h5(el, text) {
return `##### ${text.trim()}\n`; return `##### ${text.trim()}\n`;
}, },
'h6'(el, text) { h6(el, text) {
return `###### ${text.trim()}\n`; return `###### ${text.trim()}\n`;
}, },
'strong'(el, text) { strong(el, text) {
return `**${text}**`; return `**${text}**`;
}, },
'em'(el, text) { em(el, text) {
return `_${text}_`; return `_${text}_`;
}, },
'del'(el, text) { del(el, text) {
return `~~${text}~~`; return `~~${text}~~`;
}, },
'hr'(el) { hr(el) {
// extra leading \n is to ensure that there is a blank line between // extra leading \n is to ensure that there is a blank line between
// a list followed by an hr, otherwise this breaks old redcarpet rendering // a list followed by an hr, otherwise this breaks old redcarpet rendering
return '\n-----\n'; return '\n-----\n';
}, },
'p'(el, text) { p(el, text) {
return `${text.trim()}\n`; return `${text.trim()}\n`;
}, },
'table'(el) { table(el) {
const theadEl = el.querySelector('thead'); const theadEl = el.querySelector('thead');
const tbodyEl = el.querySelector('tbody'); const tbodyEl = el.querySelector('tbody');
if (!theadEl || !tbodyEl) return false; if (!theadEl || !tbodyEl) return false;
...@@ -263,8 +273,8 @@ const gfmRules = { ...@@ -263,8 +273,8 @@ const gfmRules = {
return [theadText, tbodyText].join('\n'); return [theadText, tbodyText].join('\n');
}, },
'thead'(el, text) { thead(el, text) {
const cells = _.map(el.querySelectorAll('th'), (cell) => { const cells = _.map(el.querySelectorAll('th'), cell => {
let chars = CopyAsGFM.nodeToGFM(cell).length + 2; let chars = CopyAsGFM.nodeToGFM(cell).length + 2;
let before = ''; let before = '';
...@@ -296,7 +306,7 @@ const gfmRules = { ...@@ -296,7 +306,7 @@ const gfmRules = {
return [text, separatorRow].join('\n'); return [text, separatorRow].join('\n');
}, },
'tr'(el) { tr(el) {
const cellEls = el.querySelectorAll('td, th'); const cellEls = el.querySelectorAll('td, th');
if (cellEls.length === 0) return false; if (cellEls.length === 0) return false;
...@@ -315,8 +325,12 @@ export class CopyAsGFM { ...@@ -315,8 +325,12 @@ export class CopyAsGFM {
const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent); const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
if (isIOS) return; if (isIOS) return;
$(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); }); $(document).on('copy', '.md, .wiki', e => {
$(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); }); CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
});
$(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection);
});
$(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM); $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
} }
...@@ -356,7 +370,7 @@ export class CopyAsGFM { ...@@ -356,7 +370,7 @@ export class CopyAsGFM {
// This will break down when the actual code block contains an uneven // This will break down when the actual code block contains an uneven
// number of backticks, but this is a rare edge case. // number of backticks, but this is a rare edge case.
const backtickMatch = textBefore.match(/`/g); const backtickMatch = textBefore.match(/`/g);
const insideCodeBlock = backtickMatch && (backtickMatch.length % 2) === 1; const insideCodeBlock = backtickMatch && backtickMatch.length % 2 === 1;
if (insideCodeBlock) { if (insideCodeBlock) {
return text; return text;
...@@ -393,7 +407,9 @@ export class CopyAsGFM { ...@@ -393,7 +407,9 @@ export class CopyAsGFM {
let lineSelector = '.line'; let lineSelector = '.line';
if (target) { if (target) {
const lineClass = ['left-side', 'right-side'].filter(name => target.classList.contains(name))[0]; const lineClass = ['left-side', 'right-side'].filter(name =>
target.classList.contains(name),
)[0];
if (lineClass) { if (lineClass) {
lineSelector = `.line_content.${lineClass} ${lineSelector}`; lineSelector = `.line_content.${lineClass} ${lineSelector}`;
} }
...@@ -436,7 +452,8 @@ export class CopyAsGFM { ...@@ -436,7 +452,8 @@ export class CopyAsGFM {
return node.textContent; return node.textContent;
} }
const respectWhitespace = respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE'); const respectWhitespace =
respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE');
const text = this.innerGFM(node, respectWhitespace); const text = this.innerGFM(node, respectWhitespace);
......
...@@ -32,7 +32,9 @@ export default function renderMath($els) { ...@@ -32,7 +32,9 @@ export default function renderMath($els) {
Promise.all([ Promise.all([
import(/* webpackChunkName: 'katex' */ 'katex'), import(/* webpackChunkName: 'katex' */ 'katex'),
import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.min.css'), import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.min.css'),
]).then(([katex]) => { ])
.then(([katex]) => {
renderWithKaTeX($els, katex); renderWithKaTeX($els, katex);
}).catch(() => flash(__('An error occurred while rendering KaTeX'))); })
.catch(() => flash(__('An error occurred while rendering KaTeX')));
} }
...@@ -17,7 +17,8 @@ import flash from '~/flash'; ...@@ -17,7 +17,8 @@ import flash from '~/flash';
export default function renderMermaid($els) { export default function renderMermaid($els) {
if (!$els.length) return; if (!$els.length) return;
import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => { import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid')
.then(mermaid => {
mermaid.initialize({ mermaid.initialize({
// mermaid core options // mermaid core options
mermaid: { mermaid: {
...@@ -33,7 +34,7 @@ export default function renderMermaid($els) { ...@@ -33,7 +34,7 @@ export default function renderMermaid($els) {
// Remove any extra spans added by the backend syntax highlighting. // Remove any extra spans added by the backend syntax highlighting.
Object.assign(el, { textContent: source }); Object.assign(el, { textContent: source });
mermaid.init(undefined, el, (id) => { mermaid.init(undefined, el, id => {
const svg = document.getElementById(id); const svg = document.getElementById(id);
svg.classList.add('mermaid'); svg.classList.add('mermaid');
...@@ -51,7 +52,8 @@ export default function renderMermaid($els) { ...@@ -51,7 +52,8 @@ export default function renderMermaid($els) {
svg.appendChild(sourceEl); svg.appendChild(sourceEl);
}); });
}); });
}).catch((err) => { })
.catch(err => {
flash(`Can't load mermaid module: ${err}`); flash(`Can't load mermaid module: ${err}`);
}); });
} }
...@@ -26,7 +26,7 @@ MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.'; ...@@ -26,7 +26,7 @@ MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
MarkdownPreview.prototype.ajaxCache = {}; MarkdownPreview.prototype.ajaxCache = {};
MarkdownPreview.prototype.showPreview = function ($form) { MarkdownPreview.prototype.showPreview = function($form) {
var mdText; var mdText;
var markdownVersion; var markdownVersion;
var url; var url;
...@@ -44,7 +44,10 @@ MarkdownPreview.prototype.showPreview = function ($form) { ...@@ -44,7 +44,10 @@ MarkdownPreview.prototype.showPreview = function ($form) {
this.hideReferencedUsers($form); this.hideReferencedUsers($form);
} else { } else {
preview.addClass('md-preview-loading').text('Loading...'); preview.addClass('md-preview-loading').text('Loading...');
this.fetchMarkdownPreview(mdText, url, (function (response) { this.fetchMarkdownPreview(
mdText,
url,
function(response) {
var body; var body;
if (response.body.length > 0) { if (response.body.length > 0) {
({ body } = response); ({ body } = response);
...@@ -59,19 +62,22 @@ MarkdownPreview.prototype.showPreview = function ($form) { ...@@ -59,19 +62,22 @@ MarkdownPreview.prototype.showPreview = function ($form) {
if (response.references.commands) { if (response.references.commands) {
this.renderReferencedCommands(response.references.commands, $form); this.renderReferencedCommands(response.references.commands, $form);
} }
}).bind(this)); }.bind(this),
);
} }
}; };
MarkdownPreview.prototype.versionedPreviewPath = function (markdownPreviewPath, markdownVersion) { MarkdownPreview.prototype.versionedPreviewPath = function(markdownPreviewPath, markdownVersion) {
if (typeof markdownVersion === 'undefined') { if (typeof markdownVersion === 'undefined') {
return markdownPreviewPath; return markdownPreviewPath;
} }
return `${markdownPreviewPath}${markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'}markdown_version=${markdownVersion}`; return `${markdownPreviewPath}${
markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
}markdown_version=${markdownVersion}`;
}; };
MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) { MarkdownPreview.prototype.fetchMarkdownPreview = function(text, url, success) {
if (!url) { if (!url) {
return; return;
} }
...@@ -79,7 +85,8 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) { ...@@ -79,7 +85,8 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
success(this.ajaxCache.response); success(this.ajaxCache.response);
return; return;
} }
axios.post(url, { axios
.post(url, {
text, text,
}) })
.then(({ data }) => { .then(({ data }) => {
...@@ -92,11 +99,11 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) { ...@@ -92,11 +99,11 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
.catch(() => flash(__('An error occurred while fetching markdown preview'))); .catch(() => flash(__('An error occurred while fetching markdown preview')));
}; };
MarkdownPreview.prototype.hideReferencedUsers = function ($form) { MarkdownPreview.prototype.hideReferencedUsers = function($form) {
$form.find('.referenced-users').hide(); $form.find('.referenced-users').hide();
}; };
MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) { MarkdownPreview.prototype.renderReferencedUsers = function(users, $form) {
var referencedUsers; var referencedUsers;
referencedUsers = $form.find('.referenced-users'); referencedUsers = $form.find('.referenced-users');
if (referencedUsers.length) { if (referencedUsers.length) {
...@@ -109,11 +116,11 @@ MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) { ...@@ -109,11 +116,11 @@ MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
} }
}; };
MarkdownPreview.prototype.hideReferencedCommands = function ($form) { MarkdownPreview.prototype.hideReferencedCommands = function($form) {
$form.find('.referenced-commands').hide(); $form.find('.referenced-commands').hide();
}; };
MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form) { MarkdownPreview.prototype.renderReferencedCommands = function(commands, $form) {
var referencedCommands; var referencedCommands;
referencedCommands = $form.find('.referenced-commands'); referencedCommands = $form.find('.referenced-commands');
if (commands.length > 0) { if (commands.length > 0) {
...@@ -132,14 +139,14 @@ writeButtonSelector = '.js-md-write-button'; ...@@ -132,14 +139,14 @@ writeButtonSelector = '.js-md-write-button';
lastTextareaPreviewed = null; lastTextareaPreviewed = null;
const markdownToolbar = $('.md-header-toolbar'); const markdownToolbar = $('.md-header-toolbar');
$.fn.setupMarkdownPreview = function () { $.fn.setupMarkdownPreview = function() {
var $form = $(this); var $form = $(this);
$form.find('textarea.markdown-area').on('input', function () { $form.find('textarea.markdown-area').on('input', function() {
markdownPreview.hideReferencedUsers($form); markdownPreview.hideReferencedUsers($form);
}); });
}; };
$(document).on('markdown-preview:show', function (e, $form) { $(document).on('markdown-preview:show', function(e, $form) {
if (!$form) { if (!$form) {
return; return;
} }
...@@ -148,8 +155,14 @@ $(document).on('markdown-preview:show', function (e, $form) { ...@@ -148,8 +155,14 @@ $(document).on('markdown-preview:show', function (e, $form) {
lastTextareaHeight = lastTextareaPreviewed.height(); lastTextareaHeight = lastTextareaPreviewed.height();
// toggle tabs // toggle tabs
$form.find(writeButtonSelector).parent().removeClass('active'); $form
$form.find(previewButtonSelector).parent().addClass('active'); .find(writeButtonSelector)
.parent()
.removeClass('active');
$form
.find(previewButtonSelector)
.parent()
.addClass('active');
// toggle content // toggle content
$form.find('.md-write-holder').hide(); $form.find('.md-write-holder').hide();
...@@ -158,7 +171,7 @@ $(document).on('markdown-preview:show', function (e, $form) { ...@@ -158,7 +171,7 @@ $(document).on('markdown-preview:show', function (e, $form) {
markdownPreview.showPreview($form); markdownPreview.showPreview($form);
}); });
$(document).on('markdown-preview:hide', function (e, $form) { $(document).on('markdown-preview:hide', function(e, $form) {
if (!$form) { if (!$form) {
return; return;
} }
...@@ -169,8 +182,14 @@ $(document).on('markdown-preview:hide', function (e, $form) { ...@@ -169,8 +182,14 @@ $(document).on('markdown-preview:hide', function (e, $form) {
} }
// toggle tabs // toggle tabs
$form.find(writeButtonSelector).parent().addClass('active'); $form
$form.find(previewButtonSelector).parent().removeClass('active'); .find(writeButtonSelector)
.parent()
.addClass('active');
$form
.find(previewButtonSelector)
.parent()
.removeClass('active');
// toggle content // toggle content
$form.find('.md-write-holder').show(); $form.find('.md-write-holder').show();
...@@ -181,7 +200,7 @@ $(document).on('markdown-preview:hide', function (e, $form) { ...@@ -181,7 +200,7 @@ $(document).on('markdown-preview:hide', function (e, $form) {
markdownPreview.hideReferencedCommands($form); markdownPreview.hideReferencedCommands($form);
}); });
$(document).on('markdown-preview:toggle', function (e, keyboardEvent) { $(document).on('markdown-preview:toggle', function(e, keyboardEvent) {
var $target; var $target;
$target = $(keyboardEvent.target); $target = $(keyboardEvent.target);
if ($target.is('textarea.markdown-area')) { if ($target.is('textarea.markdown-area')) {
...@@ -194,14 +213,14 @@ $(document).on('markdown-preview:toggle', function (e, keyboardEvent) { ...@@ -194,14 +213,14 @@ $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
} }
}); });
$(document).on('click', previewButtonSelector, function (e) { $(document).on('click', previewButtonSelector, function(e) {
var $form; var $form;
e.preventDefault(); e.preventDefault();
$form = $(this).closest('form'); $form = $(this).closest('form');
$(document).triggerHandler('markdown-preview:show', [$form]); $(document).triggerHandler('markdown-preview:show', [$form]);
}); });
$(document).on('click', writeButtonSelector, function (e) { $(document).on('click', writeButtonSelector, function(e) {
var $form; var $form;
e.preventDefault(); e.preventDefault();
$form = $(this).closest('form'); $form = $(this).closest('form');
......
...@@ -28,7 +28,7 @@ function keyCodeIs(e, keyCode) { ...@@ -28,7 +28,7 @@ function keyCodeIs(e, keyCode) {
return e.keyCode === keyCode; return e.keyCode === keyCode;
} }
$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => { $(document).on('keydown.quick_submit', '.js-quick-submit', e => {
// Enter // Enter
if (!keyCodeIs(e, 13)) { if (!keyCodeIs(e, 13)) {
return; return;
...@@ -55,16 +55,17 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => { ...@@ -55,16 +55,17 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
// If the user tabs to a submit button on a `js-quick-submit` form, display a // If the user tabs to a submit button on a `js-quick-submit` form, display a
// tooltip to let them know they could've used the hotkey // tooltip to let them know they could've used the hotkey
$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) { $(document).on(
'keyup.quick_submit',
'.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]',
function displayTooltip(e) {
// Tab // Tab
if (!keyCodeIs(e, 9)) { if (!keyCodeIs(e, 9)) {
return; return;
} }
const $this = $(this); const $this = $(this);
const title = isMac() ? const title = isMac() ? 'You can also press ⌘-Enter' : 'You can also press Ctrl-Enter';
'You can also press ⌘-Enter' :
'You can also press Ctrl-Enter';
$this.tooltip({ $this.tooltip({
container: 'body', container: 'body',
...@@ -74,4 +75,5 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q ...@@ -74,4 +75,5 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q
trigger: 'manual', trigger: 'manual',
}); });
$this.tooltip('show').one('blur click', () => $this.tooltip('hide')); $this.tooltip('show').one('blur click', () => $this.tooltip('hide'));
}); },
);
...@@ -18,7 +18,8 @@ import '../commons/bootstrap'; ...@@ -18,7 +18,8 @@ import '../commons/bootstrap';
$.fn.requiresInput = function requiresInput() { $.fn.requiresInput = function requiresInput() {
const $form = $(this); const $form = $(this);
const $button = $('button[type=submit], input[type=submit]', $form); const $button = $('button[type=submit], input[type=submit]', $form);
const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]'; const fieldSelector =
'input[required=required], select[required=required], textarea[required=required]';
function requireInput() { function requireInput() {
// Collect the input values of *all* required fields // Collect the input values of *all* required fields
......
...@@ -32,16 +32,18 @@ export default class SecretValues { ...@@ -32,16 +32,18 @@ export default class SecretValues {
updateDom(isRevealed) { updateDom(isRevealed) {
const values = this.container.querySelectorAll(this.valueSelector); const values = this.container.querySelectorAll(this.valueSelector);
values.forEach((value) => { values.forEach(value => {
value.classList.toggle('hide', !isRevealed); value.classList.toggle('hide', !isRevealed);
}); });
const placeholders = this.container.querySelectorAll(this.placeholderSelector); const placeholders = this.container.querySelectorAll(this.placeholderSelector);
placeholders.forEach((placeholder) => { placeholders.forEach(placeholder => {
placeholder.classList.toggle('hide', isRevealed); placeholder.classList.toggle('hide', isRevealed);
}); });
this.revealButton.textContent = isRevealed ? n__('Hide value', 'Hide values', values.length) : n__('Reveal value', 'Reveal values', values.length); this.revealButton.textContent = isRevealed
? n__('Hide value', 'Hide values', values.length)
: n__('Reveal value', 'Reveal values', values.length);
this.revealButton.dataset.secretRevealStatus = isRevealed; this.revealButton.dataset.secretRevealStatus = isRevealed;
} }
} }
...@@ -88,9 +88,11 @@ export default class Shortcuts { ...@@ -88,9 +88,11 @@ export default class Shortcuts {
return null; return null;
} }
return axios.get(gon.shortcuts_path, { return axios
.get(gon.shortcuts_path, {
responseType: 'text', responseType: 'text',
}).then(({ data }) => { })
.then(({ data }) => {
$.globalEval(data); $.globalEval(data);
if (location && location.length > 0) { if (location && location.length > 0) {
......
...@@ -18,9 +18,7 @@ $(() => { ...@@ -18,9 +18,7 @@ $(() => {
.toggleClass('fa-chevron-up', toggleState) .toggleClass('fa-chevron-up', toggleState)
.toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined); .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
$container $container.find('.js-toggle-content').toggle(toggleState);
.find('.js-toggle-content')
.toggle(toggleState);
} }
$('body').on('click', '.js-toggle-button', function toggleButton(e) { $('body').on('click', '.js-toggle-button', function toggleButton(e) {
......
...@@ -18,12 +18,7 @@ export default class Renderer { ...@@ -18,12 +18,7 @@ export default class Renderer {
this.loader = new STLLoader(); this.loader = new STLLoader();
this.fov = 45; this.fov = 45;
this.camera = new THREE.PerspectiveCamera( this.camera = new THREE.PerspectiveCamera(this.fov, this.width / this.height, 1, 1000);
this.fov,
this.width / this.height,
1,
1000,
);
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
...@@ -35,10 +30,7 @@ export default class Renderer { ...@@ -35,10 +30,7 @@ export default class Renderer {
this.setupLight(); this.setupLight();
// Set up OrbitControls // Set up OrbitControls
this.controls = new OrbitControls( this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.camera,
this.renderer.domElement,
);
this.controls.minDistance = 5; this.controls.minDistance = 5;
this.controls.maxDistance = 30; this.controls.maxDistance = 30;
this.controls.enableKeys = false; this.controls.enableKeys = false;
...@@ -51,47 +43,32 @@ export default class Renderer { ...@@ -51,47 +43,32 @@ export default class Renderer {
antialias: true, antialias: true,
}); });
this.renderer.setClearColor(0xFFFFFF); this.renderer.setClearColor(0xffffff);
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize( this.renderer.setSize(this.width, this.height);
this.width,
this.height,
);
} }
setupLight() { setupLight() {
// Point light illuminates the object // Point light illuminates the object
const pointLight = new THREE.PointLight( const pointLight = new THREE.PointLight(0xffffff, 2, 0);
0xFFFFFF,
2,
0,
);
pointLight.castShadow = true; pointLight.castShadow = true;
this.camera.add(pointLight); this.camera.add(pointLight);
// Ambient light illuminates the scene // Ambient light illuminates the scene
const ambientLight = new THREE.AmbientLight( const ambientLight = new THREE.AmbientLight(0xffffff, 1);
0xFFFFFF,
1,
);
this.scene.add(ambientLight); this.scene.add(ambientLight);
} }
setupGrid() { setupGrid() {
this.grid = new THREE.GridHelper( this.grid = new THREE.GridHelper(20, 20, 0x000000, 0x000000);
20,
20,
0x000000,
0x000000,
);
this.scene.add(this.grid); this.scene.add(this.grid);
} }
loadFile() { loadFile() {
this.loader.load(this.container.dataset.endpoint, (geo) => { this.loader.load(this.container.dataset.endpoint, geo => {
const obj = new MeshObject(geo); const obj = new MeshObject(geo);
this.objects.push(obj); this.objects.push(obj);
...@@ -116,30 +93,23 @@ export default class Renderer { ...@@ -116,30 +93,23 @@ export default class Renderer {
} }
render() { render() {
this.renderer.render( this.renderer.render(this.scene, this.camera);
this.scene,
this.camera,
);
requestAnimationFrame(this.renderWrapper); requestAnimationFrame(this.renderWrapper);
} }
changeObjectMaterials(type) { changeObjectMaterials(type) {
this.objects.forEach((obj) => { this.objects.forEach(obj => {
obj.changeMaterial(type); obj.changeMaterial(type);
}); });
} }
setDefaultCameraPosition() { setDefaultCameraPosition() {
const obj = this.objects[0]; const obj = this.objects[0];
const radius = (obj.geometry.boundingSphere.radius / 1.5); const radius = obj.geometry.boundingSphere.radius / 1.5;
const dist = radius / (Math.sin((this.fov * (Math.PI / 180)) / 2)); const dist = radius / Math.sin((this.fov * (Math.PI / 180)) / 2);
this.camera.position.set( this.camera.position.set(0, dist + 1, dist);
0,
dist + 1,
dist,
);
this.camera.lookAt(this.grid); this.camera.lookAt(this.grid);
this.controls.update(); this.controls.update();
......
import { import { Matrix4, MeshLambertMaterial, Mesh } from 'three/build/three.module';
Matrix4,
MeshLambertMaterial,
Mesh,
} from 'three/build/three.module';
const defaultColor = 0xE24329; const defaultColor = 0xe24329;
const materials = { const materials = {
default: new MeshLambertMaterial({ default: new MeshLambertMaterial({
color: defaultColor, color: defaultColor,
...@@ -17,10 +13,7 @@ const materials = { ...@@ -17,10 +13,7 @@ const materials = {
export default class MeshObject extends Mesh { export default class MeshObject extends Mesh {
constructor(geo) { constructor(geo) {
super( super(geo, materials.default);
geo,
materials.default,
);
this.geometry.computeBoundingSphere(); this.geometry.computeBoundingSphere();
...@@ -29,13 +22,7 @@ export default class MeshObject extends Mesh { ...@@ -29,13 +22,7 @@ export default class MeshObject extends Mesh {
if (this.geometry.boundingSphere.radius > 4) { if (this.geometry.boundingSphere.radius > 4) {
const scale = 4 / this.geometry.boundingSphere.radius; const scale = 4 / this.geometry.boundingSphere.radius;
this.geometry.applyMatrix( this.geometry.applyMatrix(new Matrix4().makeScale(scale, scale, scale));
new Matrix4().makeScale(
scale,
scale,
scale,
),
);
this.geometry.computeBoundingSphere(); this.geometry.computeBoundingSphere();
this.position.x = -this.geometry.boundingSphere.center.x; this.position.x = -this.geometry.boundingSphere.center.x;
......
...@@ -42,7 +42,7 @@ class BalsamiqViewer { ...@@ -42,7 +42,7 @@ class BalsamiqViewer {
this.initDatabase(loadEvent.target.response); this.initDatabase(loadEvent.target.response);
const previews = this.getPreviews(); const previews = this.getPreviews();
previews.forEach((preview) => { previews.forEach(preview => {
const renderedPreview = this.renderPreview(preview); const renderedPreview = this.renderPreview(preview);
container.appendChild(renderedPreview); container.appendChild(renderedPreview);
......
...@@ -41,39 +41,45 @@ export default class BlobFileDropzone { ...@@ -41,39 +41,45 @@ export default class BlobFileDropzone {
addRemoveLinks: true, addRemoveLinks: true,
previewsContainer: '.dropzone-previews', previewsContainer: '.dropzone-previews',
headers: csrf.headers, headers: csrf.headers,
init: function () { init: function() {
this.on('addedfile', function () { this.on('addedfile', function() {
toggleLoading(submitButton, submitButtonLoadingIcon, false); toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.addClass(HIDDEN_CLASS); dropzoneMessage.addClass(HIDDEN_CLASS);
$('.dropzone-alerts').html('').hide(); $('.dropzone-alerts')
.html('')
.hide();
}); });
this.on('removedfile', function () { this.on('removedfile', function() {
toggleLoading(submitButton, submitButtonLoadingIcon, false); toggleLoading(submitButton, submitButtonLoadingIcon, false);
dropzoneMessage.removeClass(HIDDEN_CLASS); dropzoneMessage.removeClass(HIDDEN_CLASS);
}); });
this.on('success', function (header, response) { this.on('success', function(header, response) {
$('#modal-upload-blob').modal('hide'); $('#modal-upload-blob').modal('hide');
visitUrl(response.filePath); visitUrl(response.filePath);
}); });
this.on('maxfilesexceeded', function (file) { this.on('maxfilesexceeded', function(file) {
dropzoneMessage.addClass(HIDDEN_CLASS); dropzoneMessage.addClass(HIDDEN_CLASS);
this.removeFile(file); this.removeFile(file);
}); });
this.on('sending', function (file, xhr, formData) { this.on('sending', function(file, xhr, formData) {
formData.append('branch_name', form.find('.js-branch-name').val()); formData.append('branch_name', form.find('.js-branch-name').val());
formData.append('create_merge_request', form.find('.js-create-merge-request').val()); formData.append('create_merge_request', form.find('.js-create-merge-request').val());
formData.append('commit_message', form.find('.js-commit-message').val()); formData.append('commit_message', form.find('.js-commit-message').val());
}); });
}, },
// Override behavior of adding error underneath preview // Override behavior of adding error underneath preview
error: function (file, errorMessage) { error: function(file, errorMessage) {
const stripped = $('<div/>').html(errorMessage).text(); const stripped = $('<div/>')
$('.dropzone-alerts').html(`Error uploading file: "${stripped}"`).show(); .html(errorMessage)
.text();
$('.dropzone-alerts')
.html(`Error uploading file: "${stripped}"`)
.show();
this.removeFile(file); this.removeFile(file);
}, },
}); });
submitButton.on('click', (e) => { submitButton.on('click', e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if (dropzone[0].dropzone.getQueuedFiles().length === 0) { if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
......
...@@ -2,13 +2,15 @@ import { getLocationHash } from '../lib/utils/url_utility'; ...@@ -2,13 +2,15 @@ import { getLocationHash } from '../lib/utils/url_utility';
const lineNumberRe = /^L[0-9]+/; const lineNumberRe = /^L[0-9]+/;
const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => { const updateLineNumbersOnBlobPermalinks = linksToUpdate => {
const hash = getLocationHash(); const hash = getLocationHash();
if (hash && lineNumberRe.test(hash)) { if (hash && lineNumberRe.test(hash)) {
const hashUrlString = `#${hash}`; const hashUrlString = `#${hash}`;
[].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => { [].concat(Array.prototype.slice.call(linksToUpdate)).forEach(permalinkButton => {
const baseHref = permalinkButton.getAttribute('data-original-href') || (() => { const baseHref =
permalinkButton.getAttribute('data-original-href') ||
(() => {
const href = permalinkButton.getAttribute('href'); const href = permalinkButton.getAttribute('href');
permalinkButton.setAttribute('data-original-href', href); permalinkButton.setAttribute('data-original-href', href);
return href; return href;
...@@ -26,7 +28,7 @@ function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, element ...@@ -26,7 +28,7 @@ function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, element
}, 0); }, 0);
}; };
blobContentHolder.addEventListener('click', (e) => { blobContentHolder.addEventListener('click', e => {
if (e.target.matches(lineNumberSelector)) { if (e.target.matches(lineNumberSelector)) {
updateBlameAndBlobPermalinkCb(); updateBlameAndBlobPermalinkCb();
} }
......
...@@ -45,15 +45,11 @@ export default class FileTemplateSelector { ...@@ -45,15 +45,11 @@ export default class FileTemplateSelector {
} }
renderLoading() { renderLoading() {
this.$loadingIcon this.$loadingIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
.addClass('fa-spinner fa-spin')
.removeClass('fa-chevron-down');
} }
renderLoaded() { renderLoaded() {
this.$loadingIcon this.$loadingIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
.addClass('fa-chevron-down')
.removeClass('fa-spinner fa-spin');
} }
reportSelection(options) { reportSelection(options) {
......
...@@ -40,13 +40,14 @@ export default () => { ...@@ -40,13 +40,14 @@ export default () => {
}, },
methods: { methods: {
loadFile() { loadFile() {
axios.get(el.dataset.endpoint) axios
.get(el.dataset.endpoint)
.then(res => res.data) .then(res => res.data)
.then((data) => { .then(data => {
this.json = data; this.json = data;
this.loading = false; this.loading = false;
}) })
.catch((e) => { .catch(e => {
if (e.status !== 200) { if (e.status !== 200) {
this.loadError = true; this.loadError = true;
} }
......
...@@ -13,7 +13,7 @@ export default class SketchLoader { ...@@ -13,7 +13,7 @@ export default class SketchLoader {
return this.getZipFile() return this.getZipFile()
.then(data => JSZip.loadAsync(data)) .then(data => JSZip.loadAsync(data))
.then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array')) .then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array'))
.then((content) => { .then(content => {
const url = window.URL || window.webkitURL; const url = window.URL || window.webkitURL;
const blob = new Blob([new Uint8Array(content)], { const blob = new Blob([new Uint8Array(content)], {
type: 'image/png', type: 'image/png',
......
...@@ -3,8 +3,8 @@ import Renderer from './3d_viewer'; ...@@ -3,8 +3,8 @@ import Renderer from './3d_viewer';
export default () => { export default () => {
const viewer = new Renderer(document.getElementById('js-stl-viewer')); const viewer = new Renderer(document.getElementById('js-stl-viewer'));
[].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => { [].slice.call(document.querySelectorAll('.js-material-changer')).forEach(el => {
el.addEventListener('click', (e) => { el.addEventListener('click', e => {
const { target } = e; const { target } = e;
e.preventDefault(); e.preventDefault();
......
...@@ -81,14 +81,10 @@ export default class TemplateSelector { ...@@ -81,14 +81,10 @@ export default class TemplateSelector {
} }
startLoadingSpinner() { startLoadingSpinner() {
this.$dropdownIcon this.$dropdownIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
.addClass('fa-spinner fa-spin')
.removeClass('fa-chevron-down');
} }
stopLoadingSpinner() { stopLoadingSpinner() {
this.$dropdownIcon this.$dropdownIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
.addClass('fa-chevron-down')
.removeClass('fa-spinner fa-spin');
} }
} }
...@@ -22,7 +22,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector { ...@@ -22,7 +22,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
search: { search: {
fields: ['name'], fields: ['name'],
}, },
clicked: (options) => { clicked: options => {
const { e } = options; const { e } = options;
const el = options.$el; const el = options.$el;
const query = options.selectedObj; const query = options.selectedObj;
......
...@@ -21,5 +21,4 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector { ...@@ -21,5 +21,4 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
text: item => item.name, text: item => item.name,
}); });
} }
} }
...@@ -22,9 +22,8 @@ export default class BlobViewer { ...@@ -22,9 +22,8 @@ export default class BlobViewer {
const viewer = document.querySelector('.blob-viewer[data-type="rich"]'); const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
if (!viewer || !viewer.dataset.richType) return; if (!viewer || !viewer.dataset.richType) return;
const initViewer = promise => promise const initViewer = promise =>
.then(module => module.default(viewer)) promise.then(module => module.default(viewer)).catch(error => {
.catch((error) => {
Flash('Error loading file viewer.'); Flash('Error loading file viewer.');
throw error; throw error;
}); });
...@@ -79,8 +78,7 @@ export default class BlobViewer { ...@@ -79,8 +78,7 @@ export default class BlobViewer {
initBindings() { initBindings() {
if (this.switcherBtns.length) { if (this.switcherBtns.length) {
Array.from(this.switcherBtns) Array.from(this.switcherBtns).forEach(el => {
.forEach((el) => {
el.addEventListener('click', this.switchViewHandler.bind(this)); el.addEventListener('click', this.switchViewHandler.bind(this));
}); });
} }
...@@ -109,7 +107,10 @@ export default class BlobViewer { ...@@ -109,7 +107,10 @@ export default class BlobViewer {
this.copySourceBtn.setAttribute('title', 'Copy source to clipboard'); this.copySourceBtn.setAttribute('title', 'Copy source to clipboard');
this.copySourceBtn.classList.remove('disabled'); this.copySourceBtn.classList.remove('disabled');
} else if (this.activeViewer === this.simpleViewer) { } else if (this.activeViewer === this.simpleViewer) {
this.copySourceBtn.setAttribute('title', 'Wait for the source to load to copy it to the clipboard'); this.copySourceBtn.setAttribute(
'title',
'Wait for the source to load to copy it to the clipboard',
);
this.copySourceBtn.classList.add('disabled'); this.copySourceBtn.classList.add('disabled');
} else { } else {
this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard'); this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard');
...@@ -147,7 +148,7 @@ export default class BlobViewer { ...@@ -147,7 +148,7 @@ export default class BlobViewer {
this.toggleCopyButtonState(); this.toggleCopyButtonState();
BlobViewer.loadViewer(newViewer) BlobViewer.loadViewer(newViewer)
.then((viewer) => { .then(viewer => {
$(viewer).renderGFM(); $(viewer).renderGFM();
this.$fileHolder.trigger('highlight:line'); this.$fileHolder.trigger('highlight:line');
...@@ -168,8 +169,7 @@ export default class BlobViewer { ...@@ -168,8 +169,7 @@ export default class BlobViewer {
viewer.setAttribute('data-loading', 'true'); viewer.setAttribute('data-loading', 'true');
return axios.get(url) return axios.get(url).then(({ data }) => {
.then(({ data }) => {
viewer.innerHTML = data.html; viewer.innerHTML = data.html;
viewer.setAttribute('data-loaded', 'true'); viewer.setAttribute('data-loaded', 'true');
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg'; import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
export default { export default {
components: { components: {
Icon, Icon,
}, },
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
this.$emit('dismiss-overview-dialog'); this.$emit('dismiss-overview-dialog');
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="landing content-block"> <div class="landing content-block">
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
directives: { directives: {
tooltip, tooltip,
}, },
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
required: true, required: true,
}, },
}, },
}; };
</script> </script>
<template> <template>
<span <span
......
<script> <script>
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
components: { components: {
userAvatarImage, userAvatarImage,
limitWarning, limitWarning,
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
default: () => ({}), default: () => ({}),
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
<script> <script>
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
components: { components: {
userAvatarImage, userAvatarImage,
limitWarning, limitWarning,
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
default: () => ({}), default: () => ({}),
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
...@@ -73,4 +73,3 @@ ...@@ -73,4 +73,3 @@
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import iconCommit from '../svg/icon_commit.svg'; import iconCommit from '../svg/icon_commit.svg';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
return iconCommit; return iconCommit;
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
...@@ -74,4 +74,3 @@ ...@@ -74,4 +74,3 @@
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
default: () => ({}), default: () => ({}),
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
<script> <script>
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
return iconBranch; return iconBranch;
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
<script> <script>
import iconBuildStatus from '../svg/icon_build_status.svg'; import iconBuildStatus from '../svg/icon_build_status.svg';
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
components: { components: {
totalTime, totalTime,
limitWarning, limitWarning,
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
return iconBranch; return iconBranch;
}, },
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
......
<script> <script>
export default { export default {
props: { props: {
time: { time: {
type: Object, type: Object,
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
return Object.keys(this.time).length; return Object.keys(this.time).length;
}, },
}, },
}; };
</script> </script>
<template> <template>
<span class="total-time"> <span class="total-time">
......
...@@ -18,7 +18,8 @@ Vue.use(Translate); ...@@ -18,7 +18,8 @@ Vue.use(Translate);
export default () => { export default () => {
const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed'; const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
new Vue({ // eslint-disable-line no-new // eslint-disable-next-line no-new
new Vue({
el: '#cycle-analytics', el: '#cycle-analytics',
name: 'CycleAnalytics', name: 'CycleAnalytics',
components: { components: {
...@@ -66,7 +67,10 @@ export default () => { ...@@ -66,7 +67,10 @@ export default () => {
const $dropdown = $('.js-ca-dropdown'); const $dropdown = $('.js-ca-dropdown');
const $label = $dropdown.find('.dropdown-label'); const $label = $dropdown.find('.dropdown-label');
$dropdown.find('li a').off('click').on('click', (e) => { $dropdown
.find('li a')
.off('click')
.on('click', e => {
e.preventDefault(); e.preventDefault();
const $target = $(e.currentTarget); const $target = $(e.currentTarget);
this.startDate = $target.data('value'); this.startDate = $target.data('value');
...@@ -82,7 +86,7 @@ export default () => { ...@@ -82,7 +86,7 @@ export default () => {
this.service this.service
.fetchCycleAnalyticsData(fetchOptions) .fetchCycleAnalyticsData(fetchOptions)
.then((response) => { .then(response => {
this.store.setCycleAnalyticsData(response); this.store.setCycleAnalyticsData(response);
this.selectDefaultStage(); this.selectDefaultStage();
this.initDropdown(); this.initDropdown();
...@@ -115,7 +119,7 @@ export default () => { ...@@ -115,7 +119,7 @@ export default () => {
stage, stage,
startDate: this.startDate, startDate: this.startDate,
}) })
.then((response) => { .then(response => {
this.isEmptyStage = !response.events.length; this.isEmptyStage = !response.events.length;
this.store.setStageEvents(response.events, stage); this.store.setStageEvents(response.events, stage);
this.isLoadingStage = false; this.isLoadingStage = false;
......
...@@ -18,10 +18,7 @@ export default class CycleAnalyticsService { ...@@ -18,10 +18,7 @@ export default class CycleAnalyticsService {
} }
fetchStageData(options) { fetchStageData(options) {
const { const { stage, startDate } = options;
stage,
startDate,
} = options;
return this.axios return this.axios
.get(`events/${stage.name}.json`, { .get(`events/${stage.name}.json`, {
......
...@@ -5,13 +5,27 @@ import { dasherize } from '../lib/utils/text_utility'; ...@@ -5,13 +5,27 @@ import { dasherize } from '../lib/utils/text_utility';
import DEFAULT_EVENT_OBJECTS from './default_event_objects'; import DEFAULT_EVENT_OBJECTS from './default_event_objects';
const EMPTY_STAGE_TEXTS = { const EMPTY_STAGE_TEXTS = {
issue: __('The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.'), issue: __(
plan: __('The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.'), 'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
code: __('The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.'), ),
test: __('The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.'), plan: __(
review: __('The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.'), 'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
staging: __('The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.'), ),
production: __('The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.'), code: __(
'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
),
test: __(
'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
),
review: __(
'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
),
staging: __(
'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
),
production: __(
'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.',
),
}; };
export default { export default {
...@@ -31,11 +45,11 @@ export default { ...@@ -31,11 +45,11 @@ export default {
newData.stages = data.stats || []; newData.stages = data.stats || [];
newData.summary = data.summary || []; newData.summary = data.summary || [];
newData.summary.forEach((item) => { newData.summary.forEach(item => {
item.value = item.value || '-'; item.value = item.value || '-';
}); });
newData.stages.forEach((item) => { newData.stages.forEach(item => {
const stageSlug = dasherize(item.name.toLowerCase()); const stageSlug = dasherize(item.name.toLowerCase());
item.active = false; item.active = false;
item.isUserAllowed = data.permissions[stageSlug]; item.isUserAllowed = data.permissions[stageSlug];
...@@ -53,7 +67,7 @@ export default { ...@@ -53,7 +67,7 @@ export default {
this.state.hasError = state; this.state.hasError = state;
}, },
deactivateAllStages() { deactivateAllStages() {
this.state.stages.forEach((stage) => { this.state.stages.forEach(stage => {
stage.active = false; stage.active = false;
}); });
}, },
...@@ -67,7 +81,7 @@ export default { ...@@ -67,7 +81,7 @@ export default {
decorateEvents(events, stage) { decorateEvents(events, stage) {
const newEvents = []; const newEvents = [];
events.forEach((item) => { events.forEach(item => {
if (!item) return; if (!item) return;
const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item); const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
......
...@@ -18,52 +18,56 @@ const CommentAndResolveBtn = Vue.extend({ ...@@ -18,52 +18,56 @@ const CommentAndResolveBtn = Vue.extend({
}; };
}, },
computed: { computed: {
showButton: function () { showButton: function() {
if (this.discussion) { if (this.discussion) {
return this.discussion.isResolvable(); return this.discussion.isResolvable();
} else { } else {
return false; return false;
} }
}, },
isDiscussionResolved: function () { isDiscussionResolved: function() {
return this.discussion.isResolved(); return this.discussion.isResolved();
}, },
buttonText: function () { buttonText: function() {
if (this.isDiscussionResolved) { if (this.isDiscussionResolved) {
if (this.textareaIsEmpty) { if (this.textareaIsEmpty) {
return "Unresolve discussion"; return 'Unresolve discussion';
} else { } else {
return "Comment & unresolve discussion"; return 'Comment & unresolve discussion';
} }
} else { } else {
if (this.textareaIsEmpty) { if (this.textareaIsEmpty) {
return "Resolve discussion"; return 'Resolve discussion';
} else { } else {
return "Comment & resolve discussion"; return 'Comment & resolve discussion';
}
} }
} }
}, },
},
created() { created() {
if (this.discussionId) { if (this.discussionId) {
this.discussion = CommentsStore.state[this.discussionId]; this.discussion = CommentsStore.state[this.discussionId];
} }
}, },
mounted: function () { mounted: function() {
if (!this.discussionId) return; if (!this.discussionId) return;
const $textarea = $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`); const $textarea = $(
`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`,
);
this.textareaIsEmpty = $textarea.val() === ''; this.textareaIsEmpty = $textarea.val() === '';
$textarea.on('input.comment-and-resolve-btn', () => { $textarea.on('input.comment-and-resolve-btn', () => {
this.textareaIsEmpty = $textarea.val() === ''; this.textareaIsEmpty = $textarea.val() === '';
}); });
}, },
destroyed: function () { destroyed: function() {
if (!this.discussionId) return; if (!this.discussionId) return;
$(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn'); $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off(
} 'input.comment-and-resolve-btn',
);
},
}); });
Vue.component('comment-and-resolve-btn', CommentAndResolveBtn); Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
...@@ -83,7 +83,11 @@ const DiffNoteAvatars = Vue.extend({ ...@@ -83,7 +83,11 @@ const DiffNoteAvatars = Vue.extend({
this.addNoCommentClass(); this.addNoCommentClass();
this.setDiscussionVisible(); this.setDiscussionVisible();
this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new'; this.lineType = $(this.$el)
.closest('.diff-line-num')
.hasClass('old_line')
? 'old'
: 'new';
}); });
$(document).on('toggle.comments', () => { $(document).on('toggle.comments', () => {
...@@ -113,20 +117,30 @@ const DiffNoteAvatars = Vue.extend({ ...@@ -113,20 +117,30 @@ const DiffNoteAvatars = Vue.extend({
addNoCommentClass() { addNoCommentClass() {
const { notesCount } = this; const { notesCount } = this;
$(this.$el).closest('.js-avatar-container') $(this.$el)
.closest('.js-avatar-container')
.toggleClass('no-comment-btn', notesCount > 0) .toggleClass('no-comment-btn', notesCount > 0)
.nextUntil('.js-avatar-container') .nextUntil('.js-avatar-container')
.toggleClass('no-comment-btn', notesCount > 0); .toggleClass('no-comment-btn', notesCount > 0);
}, },
toggleDiscussionsToggleState() { toggleDiscussionsToggleState() {
const $notesHolders = $(this.$el).closest('.code').find('.notes_holder'); const $notesHolders = $(this.$el)
.closest('.code')
.find('.notes_holder');
const $visibleNotesHolders = $notesHolders.filter(':visible'); const $visibleNotesHolders = $notesHolders.filter(':visible');
const $toggleDiffCommentsBtn = $(this.$el).closest('.diff-file').find('.js-toggle-diff-comments'); const $toggleDiffCommentsBtn = $(this.$el)
.closest('.diff-file')
.find('.js-toggle-diff-comments');
$toggleDiffCommentsBtn.toggleClass('active', $notesHolders.length === $visibleNotesHolders.length); $toggleDiffCommentsBtn.toggleClass(
'active',
$notesHolders.length === $visibleNotesHolders.length,
);
}, },
setDiscussionVisible() { setDiscussionVisible() {
this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible'); this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(
':visible',
);
}, },
getTooltipText(note) { getTooltipText(note) {
return `${note.authorName}: ${note.noteTruncated}`; return `${note.authorName}: ${note.noteTruncated}`;
......
...@@ -14,24 +14,24 @@ const JumpToDiscussion = Vue.extend({ ...@@ -14,24 +14,24 @@ const JumpToDiscussion = Vue.extend({
required: true, required: true,
}, },
}, },
data: function () { data: function() {
return { return {
discussions: CommentsStore.state, discussions: CommentsStore.state,
discussion: {}, discussion: {},
}; };
}, },
computed: { computed: {
buttonText: function () { buttonText: function() {
if (this.discussionId) { if (this.discussionId) {
return 'Jump to next unresolved discussion'; return 'Jump to next unresolved discussion';
} else { } else {
return 'Jump to first unresolved discussion'; return 'Jump to first unresolved discussion';
} }
}, },
allResolved: function () { allResolved: function() {
return this.unresolvedDiscussionCount === 0; return this.unresolvedDiscussionCount === 0;
}, },
showButton: function () { showButton: function() {
if (this.discussionId) { if (this.discussionId) {
if (this.unresolvedDiscussionCount > 1) { if (this.unresolvedDiscussionCount > 1) {
return true; return true;
...@@ -42,7 +42,7 @@ const JumpToDiscussion = Vue.extend({ ...@@ -42,7 +42,7 @@ const JumpToDiscussion = Vue.extend({
return this.unresolvedDiscussionCount >= 1; return this.unresolvedDiscussionCount >= 1;
} }
}, },
lastResolvedId: function () { lastResolvedId: function() {
let lastId; let lastId;
for (const discussionId in this.discussions) { for (const discussionId in this.discussions) {
const discussion = this.discussions[discussionId]; const discussion = this.discussions[discussionId];
...@@ -52,13 +52,13 @@ const JumpToDiscussion = Vue.extend({ ...@@ -52,13 +52,13 @@ const JumpToDiscussion = Vue.extend({
} }
} }
return lastId; return lastId;
} },
}, },
created() { created() {
this.discussion = this.discussions[this.discussionId]; this.discussion = this.discussions[this.discussionId];
}, },
methods: { methods: {
jumpToNextUnresolvedDiscussion: function () { jumpToNextUnresolvedDiscussion: function() {
let discussionsSelector; let discussionsSelector;
let discussionIdsInScope; let discussionIdsInScope;
let firstUnresolvedDiscussionId; let firstUnresolvedDiscussionId;
...@@ -68,9 +68,11 @@ const JumpToDiscussion = Vue.extend({ ...@@ -68,9 +68,11 @@ const JumpToDiscussion = Vue.extend({
let jumpToFirstDiscussion = !this.discussionId; let jumpToFirstDiscussion = !this.discussionId;
const discussionIdsForElements = function(elements) { const discussionIdsForElements = function(elements) {
return elements.map(function() { return elements
.map(function() {
return $(this).attr('data-discussion-id'); return $(this).attr('data-discussion-id');
}).toArray(); })
.toArray();
}; };
const { discussions } = this; const { discussions } = this;
...@@ -144,8 +146,7 @@ const JumpToDiscussion = Vue.extend({ ...@@ -144,8 +146,7 @@ const JumpToDiscussion = Vue.extend({
if (!discussion.isResolved()) { if (!discussion.isResolved()) {
nextUnresolvedDiscussionId = discussionId; nextUnresolvedDiscussionId = discussionId;
break; break;
} } else {
else {
continue; continue;
} }
} }
...@@ -175,9 +176,9 @@ const JumpToDiscussion = Vue.extend({ ...@@ -175,9 +176,9 @@ const JumpToDiscussion = Vue.extend({
// Resolved discussions are hidden in the diffs tab by default. // Resolved discussions are hidden in the diffs tab by default.
// If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab. // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
// When jumping between unresolved discussions on the diffs tab, we show them. // When jumping between unresolved discussions on the diffs tab, we show them.
$target.closest(".content").show(); $target.closest('.content').show();
const $notesHolder = $target.closest("tr.notes_holder"); const $notesHolder = $target.closest('tr.notes_holder');
// Image diff discussions does not use notes_holder // Image diff discussions does not use notes_holder
// so we should keep original $target value in those cases // so we should keep original $target value in those cases
...@@ -194,7 +195,7 @@ const JumpToDiscussion = Vue.extend({ ...@@ -194,7 +195,7 @@ const JumpToDiscussion = Vue.extend({
prevEl = $target.prev(); prevEl = $target.prev();
// If the discussion doesn't have 4 lines above it, we'll have to do with fewer. // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
if (!prevEl.hasClass("line_holder")) { if (!prevEl.hasClass('line_holder')) {
break; break;
} }
...@@ -203,9 +204,9 @@ const JumpToDiscussion = Vue.extend({ ...@@ -203,9 +204,9 @@ const JumpToDiscussion = Vue.extend({
} }
$.scrollTo($target, { $.scrollTo($target, {
offset: -150 offset: -150,
}); });
} },
}, },
}); });
......
...@@ -13,17 +13,17 @@ window.ResolveCount = Vue.extend({ ...@@ -13,17 +13,17 @@ window.ResolveCount = Vue.extend({
required: true, required: true,
}, },
}, },
data: function () { data: function() {
return { return {
discussions: CommentsStore.state discussions: CommentsStore.state,
}; };
}, },
computed: { computed: {
allResolved: function () { allResolved: function() {
return this.resolvedDiscussionCount === this.discussionCount; return this.resolvedDiscussionCount === this.discussionCount;
}, },
resolvedCountText() { resolvedCountText() {
return this.discussionCount === 1 ? 'discussion' : 'discussions'; return this.discussionCount === 1 ? 'discussion' : 'discussions';
} },
} },
}); });
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
const DiscussionMixins = { const DiscussionMixins = {
computed: { computed: {
discussionCount: function () { discussionCount: function() {
return Object.keys(this.discussions).length; return Object.keys(this.discussions).length;
}, },
resolvedDiscussionCount: function () { resolvedDiscussionCount: function() {
let resolvedCount = 0; let resolvedCount = 0;
for (const discussionId in this.discussions) { for (const discussionId in this.discussions) {
...@@ -18,7 +18,7 @@ const DiscussionMixins = { ...@@ -18,7 +18,7 @@ const DiscussionMixins = {
return resolvedCount; return resolvedCount;
}, },
unresolvedDiscussionCount: function () { unresolvedDiscussionCount: function() {
let unresolvedCount = 0; let unresolvedCount = 0;
for (const discussionId in this.discussions) { for (const discussionId in this.discussions) {
...@@ -30,8 +30,8 @@ const DiscussionMixins = { ...@@ -30,8 +30,8 @@ const DiscussionMixins = {
} }
return unresolvedCount; return unresolvedCount;
} },
} },
}; };
export default DiscussionMixins; export default DiscussionMixins;
...@@ -6,22 +6,22 @@ import Vue from 'vue'; ...@@ -6,22 +6,22 @@ import Vue from 'vue';
import { localTimeAgo } from '../../lib/utils/datetime_utility'; import { localTimeAgo } from '../../lib/utils/datetime_utility';
class DiscussionModel { class DiscussionModel {
constructor (discussionId) { constructor(discussionId) {
this.id = discussionId; this.id = discussionId;
this.notes = {}; this.notes = {};
this.loading = false; this.loading = false;
this.canResolve = false; this.canResolve = false;
} }
createNote (noteObj) { createNote(noteObj) {
Vue.set(this.notes, noteObj.noteId, new NoteModel(this.id, noteObj)); Vue.set(this.notes, noteObj.noteId, new NoteModel(this.id, noteObj));
} }
deleteNote (noteId) { deleteNote(noteId) {
Vue.delete(this.notes, noteId); Vue.delete(this.notes, noteId);
} }
getNote (noteId) { getNote(noteId) {
return this.notes[noteId]; return this.notes[noteId];
} }
...@@ -29,7 +29,7 @@ class DiscussionModel { ...@@ -29,7 +29,7 @@ class DiscussionModel {
return Object.keys(this.notes).length; return Object.keys(this.notes).length;
} }
isResolved () { isResolved() {
for (const noteId in this.notes) { for (const noteId in this.notes) {
const note = this.notes[noteId]; const note = this.notes[noteId];
...@@ -40,7 +40,7 @@ class DiscussionModel { ...@@ -40,7 +40,7 @@ class DiscussionModel {
return true; return true;
} }
resolveAllNotes (resolved_by) { resolveAllNotes(resolved_by) {
for (const noteId in this.notes) { for (const noteId in this.notes) {
const note = this.notes[noteId]; const note = this.notes[noteId];
...@@ -51,7 +51,7 @@ class DiscussionModel { ...@@ -51,7 +51,7 @@ class DiscussionModel {
} }
} }
unResolveAllNotes () { unResolveAllNotes() {
for (const noteId in this.notes) { for (const noteId in this.notes) {
const note = this.notes[noteId]; const note = this.notes[noteId];
...@@ -62,7 +62,7 @@ class DiscussionModel { ...@@ -62,7 +62,7 @@ class DiscussionModel {
} }
} }
updateHeadline (data) { updateHeadline(data) {
const discussionSelector = `.discussion[data-discussion-id="${this.id}"]`; const discussionSelector = `.discussion[data-discussion-id="${this.id}"]`;
const $discussionHeadline = $(`${discussionSelector} .js-discussion-headline`); const $discussionHeadline = $(`${discussionSelector} .js-discussion-headline`);
...@@ -79,7 +79,7 @@ class DiscussionModel { ...@@ -79,7 +79,7 @@ class DiscussionModel {
} }
} }
isResolvable () { isResolvable() {
if (!this.canResolve) { if (!this.canResolve) {
return false; return false;
} }
......
...@@ -5,10 +5,10 @@ import Vue from 'vue'; ...@@ -5,10 +5,10 @@ import Vue from 'vue';
window.CommentsStore = { window.CommentsStore = {
state: {}, state: {},
get: function (discussionId, noteId) { get: function(discussionId, noteId) {
return this.state[discussionId].getNote(noteId); return this.state[discussionId].getNote(noteId);
}, },
createDiscussion: function (discussionId, canResolve) { createDiscussion: function(discussionId, canResolve) {
let discussion = this.state[discussionId]; let discussion = this.state[discussionId];
if (!this.state[discussionId]) { if (!this.state[discussionId]) {
discussion = new DiscussionModel(discussionId); discussion = new DiscussionModel(discussionId);
...@@ -21,18 +21,18 @@ window.CommentsStore = { ...@@ -21,18 +21,18 @@ window.CommentsStore = {
return discussion; return discussion;
}, },
create: function (noteObj) { create: function(noteObj) {
const discussion = this.createDiscussion(noteObj.discussionId); const discussion = this.createDiscussion(noteObj.discussionId);
discussion.createNote(noteObj); discussion.createNote(noteObj);
}, },
update: function (discussionId, noteId, resolved, resolved_by) { update: function(discussionId, noteId, resolved, resolved_by) {
const discussion = this.state[discussionId]; const discussion = this.state[discussionId];
const note = discussion.getNote(noteId); const note = discussion.getNote(noteId);
note.resolved = resolved; note.resolved = resolved;
note.resolved_by = resolved_by; note.resolved_by = resolved_by;
}, },
delete: function (discussionId, noteId) { delete: function(discussionId, noteId) {
const discussion = this.state[discussionId]; const discussion = this.state[discussionId];
discussion.deleteNote(noteId); discussion.deleteNote(noteId);
...@@ -40,7 +40,7 @@ window.CommentsStore = { ...@@ -40,7 +40,7 @@ window.CommentsStore = {
Vue.delete(this.state, discussionId); Vue.delete(this.state, discussionId);
} }
}, },
unresolvedDiscussionIds: function () { unresolvedDiscussionIds: function() {
const ids = []; const ids = [];
for (const discussionId in this.state) { for (const discussionId in this.state) {
...@@ -52,5 +52,5 @@ window.CommentsStore = { ...@@ -52,5 +52,5 @@ window.CommentsStore = {
} }
return ids; return ids;
} },
}; };
...@@ -43,7 +43,9 @@ export default { ...@@ -43,7 +43,9 @@ export default {
return (this.commit.author && this.commit.author.name) || this.commit.authorName; return (this.commit.author && this.commit.author.name) || this.commit.authorName;
}, },
authorUrl() { authorUrl() {
return (this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`; return (
(this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`
);
}, },
authorAvatar() { authorAvatar() {
return (this.commit.author && this.commit.author.avatarUrl) || this.commit.authorGravatarUrl; return (this.commit.author && this.commit.author.avatarUrl) || this.commit.authorGravatarUrl;
......
...@@ -46,10 +46,10 @@ export default { ...@@ -46,10 +46,10 @@ export default {
showExpandMessage() { showExpandMessage() {
return ( return (
this.isCollapsed || this.isCollapsed ||
!this.file.highlightedDiffLines && (!this.file.highlightedDiffLines &&
!this.isLoadingCollapsedDiff && !this.isLoadingCollapsedDiff &&
!this.file.tooLarge && !this.file.tooLarge &&
this.file.text this.file.text)
); );
}, },
showLoadingIcon() { showLoadingIcon() {
......
...@@ -6,11 +6,4 @@ const IGNORE_CLASS = 'droplab-item-ignore'; ...@@ -6,11 +6,4 @@ const IGNORE_CLASS = 'droplab-item-ignore';
// Matches `{{anything}}` and `{{ everything }}`. // Matches `{{anything}}` and `{{ everything }}`.
const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g; const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
export { export { DATA_TRIGGER, DATA_DROPDOWN, SELECTED_CLASS, ACTIVE_CLASS, TEMPLATE_REGEX, IGNORE_CLASS };
DATA_TRIGGER,
DATA_DROPDOWN,
SELECTED_CLASS,
ACTIVE_CLASS,
TEMPLATE_REGEX,
IGNORE_CLASS,
};
...@@ -2,7 +2,7 @@ import utils from './utils'; ...@@ -2,7 +2,7 @@ import utils from './utils';
import { SELECTED_CLASS, IGNORE_CLASS } from './constants'; import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
class DropDown { class DropDown {
constructor(list, config = { }) { constructor(list, config = {}) {
this.currentIndex = 0; this.currentIndex = 0;
this.hidden = true; this.hidden = true;
this.list = typeof list === 'string' ? document.querySelector(list) : list; this.list = typeof list === 'string' ? document.querySelector(list) : list;
...@@ -157,7 +157,7 @@ class DropDown { ...@@ -157,7 +157,7 @@ class DropDown {
static setImagesSrc(template) { static setImagesSrc(template) {
const images = [...template.querySelectorAll('img[data-src]')]; const images = [...template.querySelectorAll('img[data-src]')];
images.forEach((image) => { images.forEach(image => {
const img = image; const img = image;
img.src = img.getAttribute('data-src'); img.src = img.getAttribute('data-src');
......
...@@ -51,7 +51,7 @@ class DropLab { ...@@ -51,7 +51,7 @@ class DropLab {
} }
processData(trigger, data, methodName) { processData(trigger, data, methodName) {
this.hooks.forEach((hook) => { this.hooks.forEach(hook => {
if (Array.isArray(trigger)) hook.list[methodName](trigger); if (Array.isArray(trigger)) hook.list[methodName](trigger);
if (hook.trigger.id === trigger) hook.list[methodName](data); if (hook.trigger.id === trigger) hook.list[methodName](data);
...@@ -78,7 +78,8 @@ class DropLab { ...@@ -78,7 +78,8 @@ class DropLab {
} }
changeHookList(trigger, list, plugins, config) { changeHookList(trigger, list, plugins, config) {
const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger; const availableTrigger =
typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
this.hooks.forEach((hook, i) => { this.hooks.forEach((hook, i) => {
const aHook = hook; const aHook = hook;
......
...@@ -2,15 +2,18 @@ ...@@ -2,15 +2,18 @@
import { ACTIVE_CLASS } from './constants'; import { ACTIVE_CLASS } from './constants';
const Keyboard = function () { const Keyboard = function() {
var currentKey; var currentKey;
var currentFocus; var currentFocus;
var isUpArrow = false; var isUpArrow = false;
var isDownArrow = false; var isDownArrow = false;
var removeHighlight = function removeHighlight(list) { var removeHighlight = function removeHighlight(list) {
var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider):not(.hidden)'), 0); var itemElements = Array.prototype.slice.call(
list.list.querySelectorAll('li:not(.divider):not(.hidden)'),
0,
);
var listItems = []; var listItems = [];
for(var i = 0; i < itemElements.length; i++) { for (var i = 0; i < itemElements.length; i++) {
var listItem = itemElements[i]; var listItem = itemElements[i];
listItem.classList.remove(ACTIVE_CLASS); listItem.classList.remove(ACTIVE_CLASS);
...@@ -23,13 +26,13 @@ const Keyboard = function () { ...@@ -23,13 +26,13 @@ const Keyboard = function () {
var setMenuForArrows = function setMenuForArrows(list) { var setMenuForArrows = function setMenuForArrows(list) {
var listItems = removeHighlight(list); var listItems = removeHighlight(list);
if(list.currentIndex>0){ if (list.currentIndex > 0) {
if(!listItems[list.currentIndex-1]){ if (!listItems[list.currentIndex - 1]) {
list.currentIndex = list.currentIndex-1; list.currentIndex = list.currentIndex - 1;
} }
if (listItems[list.currentIndex-1]) { if (listItems[list.currentIndex - 1]) {
var el = listItems[list.currentIndex-1]; var el = listItems[list.currentIndex - 1];
var filterDropdownEl = el.closest('.filter-dropdown'); var filterDropdownEl = el.closest('.filter-dropdown');
el.classList.add(ACTIVE_CLASS); el.classList.add(ACTIVE_CLASS);
...@@ -55,7 +58,7 @@ const Keyboard = function () { ...@@ -55,7 +58,7 @@ const Keyboard = function () {
}; };
var selectItem = function selectItem(list) { var selectItem = function selectItem(list) {
var listItems = removeHighlight(list); var listItems = removeHighlight(list);
var currentItem = listItems[list.currentIndex-1]; var currentItem = listItems[list.currentIndex - 1];
var listEvent = new CustomEvent('click.dl', { var listEvent = new CustomEvent('click.dl', {
detail: { detail: {
list: list, list: list,
...@@ -65,43 +68,49 @@ const Keyboard = function () { ...@@ -65,43 +68,49 @@ const Keyboard = function () {
}); });
list.list.dispatchEvent(listEvent); list.list.dispatchEvent(listEvent);
list.hide(); list.hide();
} };
var keydown = function keydown(e){ var keydown = function keydown(e) {
var typedOn = e.target; var typedOn = e.target;
var list = e.detail.hook.list; var list = e.detail.hook.list;
var currentIndex = list.currentIndex; var currentIndex = list.currentIndex;
isUpArrow = false; isUpArrow = false;
isDownArrow = false; isDownArrow = false;
if(e.detail.which){ if (e.detail.which) {
currentKey = e.detail.which; currentKey = e.detail.which;
if(currentKey === 13){ if (currentKey === 13) {
selectItem(e.detail.hook.list); selectItem(e.detail.hook.list);
return; return;
} }
if(currentKey === 38) { if (currentKey === 38) {
isUpArrow = true; isUpArrow = true;
} }
if(currentKey === 40) { if (currentKey === 40) {
isDownArrow = true; isDownArrow = true;
} }
} else if(e.detail.key) { } else if (e.detail.key) {
currentKey = e.detail.key; currentKey = e.detail.key;
if(currentKey === 'Enter'){ if (currentKey === 'Enter') {
selectItem(e.detail.hook.list); selectItem(e.detail.hook.list);
return; return;
} }
if(currentKey === 'ArrowUp') { if (currentKey === 'ArrowUp') {
isUpArrow = true; isUpArrow = true;
} }
if(currentKey === 'ArrowDown') { if (currentKey === 'ArrowDown') {
isDownArrow = true; isDownArrow = true;
} }
} }
if(isUpArrow){ currentIndex--; } if (isUpArrow) {
if(isDownArrow){ currentIndex++; } currentIndex--;
if(currentIndex < 0){ currentIndex = 0; } }
if (isDownArrow) {
currentIndex++;
}
if (currentIndex < 0) {
currentIndex = 0;
}
list.currentIndex = currentIndex; list.currentIndex = currentIndex;
setMenuForArrows(e.detail.hook.list); setMenuForArrows(e.detail.hook.list);
}; };
......
...@@ -43,12 +43,12 @@ const Ajax = { ...@@ -43,12 +43,12 @@ const Ajax = {
return AjaxCache.retrieve(config.endpoint) return AjaxCache.retrieve(config.endpoint)
.then(self.preprocessing.bind(null, config)) .then(self.preprocessing.bind(null, config))
.then((data) => self._loadData(data, config, self)) .then(data => self._loadData(data, config, self))
.catch(config.onError); .catch(config.onError);
}, },
destroy: function() { destroy: function() {
this.destroyed = true; this.destroyed = true;
} },
}; };
export default Ajax; export default Ajax;
...@@ -41,8 +41,10 @@ const AjaxFilter = { ...@@ -41,8 +41,10 @@ const AjaxFilter = {
if (config.searchValueFunction) { if (config.searchValueFunction) {
searchValue = config.searchValueFunction(); searchValue = config.searchValueFunction();
} }
if (config.loadingTemplate && this.hook.list.data === undefined || if (
this.hook.list.data.length === 0) { (config.loadingTemplate && this.hook.list.data === undefined) ||
this.hook.list.data.length === 0
) {
var dynamicList = this.hook.list.list.querySelector('[data-dynamic]'); var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
var loadingTemplate = document.createElement('div'); var loadingTemplate = document.createElement('div');
loadingTemplate.innerHTML = config.loadingTemplate; loadingTemplate.innerHTML = config.loadingTemplate;
...@@ -61,7 +63,7 @@ const AjaxFilter = { ...@@ -61,7 +63,7 @@ const AjaxFilter = {
params[config.searchKey] = searchValue; params[config.searchKey] = searchValue;
var url = config.endpoint + this.buildParams(params); var url = config.endpoint + this.buildParams(params);
return AjaxCache.retrieve(url) return AjaxCache.retrieve(url)
.then((data) => { .then(data => {
this._loadData(data, config); this._loadData(data, config);
if (config.onLoadingFinished) { if (config.onLoadingFinished) {
config.onLoadingFinished(data); config.onLoadingFinished(data);
...@@ -72,8 +74,7 @@ const AjaxFilter = { ...@@ -72,8 +74,7 @@ const AjaxFilter = {
_loadData(data, config) { _loadData(data, config) {
const list = this.hook.list; const list = this.hook.list;
if (config.loadingTemplate && list.data === undefined || if ((config.loadingTemplate && list.data === undefined) || list.data.length === 0) {
list.data.length === 0) {
const dataLoadingTemplate = list.list.querySelector('[data-loading-template]'); const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
if (dataLoadingTemplate) { if (dataLoadingTemplate) {
dataLoadingTemplate.outerHTML = this.listTemplate; dataLoadingTemplate.outerHTML = this.listTemplate;
...@@ -81,7 +82,8 @@ const AjaxFilter = { ...@@ -81,7 +82,8 @@ const AjaxFilter = {
} }
if (!this.destroyed) { if (!this.destroyed) {
var hookListChildren = list.list.children; var hookListChildren = list.list.children;
var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic'); var onlyDynamicList =
hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
if (onlyDynamicList && data.length === 0) { if (onlyDynamicList && data.length === 0) {
list.hide(); list.hide();
} }
...@@ -100,12 +102,12 @@ const AjaxFilter = { ...@@ -100,12 +102,12 @@ const AjaxFilter = {
}, },
destroy: function destroy() { destroy: function destroy() {
if (this.timeout)clearTimeout(this.timeout); if (this.timeout) clearTimeout(this.timeout);
this.destroyed = true; this.destroyed = true;
this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceTrigger); this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
this.hook.trigger.removeEventListener('focus', this.eventWrapper.debounceTrigger); this.hook.trigger.removeEventListener('focus', this.eventWrapper.debounceTrigger);
} },
}; };
export default AjaxFilter; export default AjaxFilter;
/* eslint-disable */ /* eslint-disable */
const Filter = { const Filter = {
keydown: function(e){ keydown: function(e) {
if (this.destroyed) return; if (this.destroyed) return;
var hiddenCount = 0; var hiddenCount = 0;
...@@ -14,14 +14,14 @@ const Filter = { ...@@ -14,14 +14,14 @@ const Filter = {
var matches = []; var matches = [];
var filterFunction; var filterFunction;
// will only work on dynamically set data // will only work on dynamically set data
if(!data){ if (!data) {
return; return;
} }
if (config && config.filterFunction && typeof config.filterFunction === 'function') { if (config && config.filterFunction && typeof config.filterFunction === 'function') {
filterFunction = config.filterFunction; filterFunction = config.filterFunction;
} else { } else {
filterFunction = function(o){ filterFunction = function(o) {
// cheap string search // cheap string search
o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1; o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
return o; return o;
...@@ -47,7 +47,8 @@ const Filter = { ...@@ -47,7 +47,8 @@ const Filter = {
}, },
debounceKeydown: function debounceKeydown(e) { debounceKeydown: function debounceKeydown(e) {
if ([ if (
[
13, // enter 13, // enter
16, // shift 16, // shift
17, // ctrl 17, // ctrl
...@@ -60,7 +61,9 @@ const Filter = { ...@@ -60,7 +61,9 @@ const Filter = {
91, // left window 91, // left window
92, // right window 92, // right window
93, // select 93, // select
].indexOf(e.detail.which || e.detail.keyCode) > -1) return; ].indexOf(e.detail.which || e.detail.keyCode) > -1
)
return;
if (this.timeout) clearTimeout(this.timeout); if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(this.keydown.bind(this, e), 200); this.timeout = setTimeout(this.keydown.bind(this, e), 200);
...@@ -87,7 +90,7 @@ const Filter = { ...@@ -87,7 +90,7 @@ const Filter = {
this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown); this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown); this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
} },
}; };
export default Filter; export default Filter;
...@@ -36,8 +36,8 @@ const InputSetter = { ...@@ -36,8 +36,8 @@ const InputSetter = {
const inputAttribute = config.inputAttribute; const inputAttribute = config.inputAttribute;
if (input.hasAttribute(inputAttribute)) return input.setAttribute(inputAttribute, newValue); if (input.hasAttribute(inputAttribute)) return input.setAttribute(inputAttribute, newValue);
if (input.tagName === 'INPUT') return input.value = newValue; if (input.tagName === 'INPUT') return (input.value = newValue);
return input.textContent = newValue; return (input.textContent = newValue);
}, },
destroy() { destroy() {
......
...@@ -5,7 +5,12 @@ import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants'; ...@@ -5,7 +5,12 @@ import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants';
const utils = { const utils = {
toCamelCase(attr) { toCamelCase(attr) {
return this.camelize(attr.split('-').slice(1).join(' ')); return this.camelize(
attr
.split('-')
.slice(1)
.join(' '),
);
}, },
template(templateString, data) { template(templateString, data) {
...@@ -17,9 +22,11 @@ const utils = { ...@@ -17,9 +22,11 @@ const utils = {
}, },
camelize(str) { camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => { return str
.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
return index === 0 ? letter.toLowerCase() : letter.toUpperCase(); return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
}).replace(/\s+/g, ''); })
.replace(/\s+/g, '');
}, },
closest(thisTag, stopTag) { closest(thisTag, stopTag) {
......
<script> <script>
import tablePagination from '../../vue_shared/components/table_pagination.vue'; import tablePagination from '../../vue_shared/components/table_pagination.vue';
import environmentTable from '../components/environments_table.vue'; import environmentTable from '../components/environments_table.vue';
export default { export default {
components: { components: {
environmentTable, environmentTable,
tablePagination, tablePagination,
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
this.$emit('onChangePage', page); this.$emit('onChangePage', page);
}, },
}, },
}; };
</script> </script>
<template> <template>
......
<script> <script>
export default { export default {
name: 'EnvironmentsEmptyState', name: 'EnvironmentsEmptyState',
props: { props: {
newPath: { newPath: {
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
required: true, required: true,
}, },
}, },
}; };
</script> </script>
<template> <template>
<div class="blank-state-row"> <div class="blank-state-row">
......
...@@ -38,7 +38,9 @@ export default { ...@@ -38,7 +38,9 @@ export default {
computed: { computed: {
title() { title() {
return this.isLastDeployment ? s__('Environments|Re-deploy to environment') : s__('Environments|Rollback environment'); return this.isLastDeployment
? s__('Environments|Re-deploy to environment')
: s__('Environments|Rollback environment');
}, },
}, },
......
...@@ -5,7 +5,8 @@ import Translate from '../../vue_shared/translate'; ...@@ -5,7 +5,8 @@ import Translate from '../../vue_shared/translate';
Vue.use(Translate); Vue.use(Translate);
export default () => new Vue({ export default () =>
new Vue({
el: '#environments-folder-list-view', el: '#environments-folder-list-view',
components: { components: {
environmentsFolderApp, environmentsFolderApp,
...@@ -32,4 +33,4 @@ export default () => new Vue({ ...@@ -32,4 +33,4 @@ export default () => new Vue({
}, },
}); });
}, },
}); });
<script> <script>
import environmentsMixin from '../mixins/environments_mixin'; import environmentsMixin from '../mixins/environments_mixin';
import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
import StopEnvironmentModal from '../components/stop_environment_modal.vue'; import StopEnvironmentModal from '../components/stop_environment_modal.vue';
export default { export default {
components: { components: {
StopEnvironmentModal, StopEnvironmentModal,
}, },
mixins: [ mixins: [environmentsMixin, CIPaginationMixin],
environmentsMixin,
CIPaginationMixin,
],
props: { props: {
endpoint: { endpoint: {
...@@ -40,7 +37,7 @@ ...@@ -40,7 +37,7 @@
this.saveData(resp); this.saveData(resp);
}, },
}, },
}; };
</script> </script>
<template> <template>
<div :class="cssContainerClass"> <div :class="cssContainerClass">
......
...@@ -5,7 +5,8 @@ import Translate from '../vue_shared/translate'; ...@@ -5,7 +5,8 @@ import Translate from '../vue_shared/translate';
Vue.use(Translate); Vue.use(Translate);
export default () => new Vue({ export default () =>
new Vue({
el: '#environments-list-view', el: '#environments-list-view',
components: { components: {
environmentsComponent, environmentsComponent,
...@@ -36,4 +37,4 @@ export default () => new Vue({ ...@@ -36,4 +37,4 @@ export default () => new Vue({
}, },
}); });
}, },
}); });
...@@ -4,9 +4,7 @@ ...@@ -4,9 +4,7 @@
import _ from 'underscore'; import _ from 'underscore';
import Visibility from 'visibilityjs'; import Visibility from 'visibilityjs';
import Poll from '../../lib/utils/poll'; import Poll from '../../lib/utils/poll';
import { import { getParameterByName } from '../../lib/utils/common_utils';
getParameterByName,
} from '../../lib/utils/common_utils';
import { s__ } from '../../locale'; import { s__ } from '../../locale';
import Flash from '../../flash'; import Flash from '../../flash';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
...@@ -19,7 +17,6 @@ import tabs from '../../vue_shared/components/navigation_tabs.vue'; ...@@ -19,7 +17,6 @@ import tabs from '../../vue_shared/components/navigation_tabs.vue';
import container from '../components/container.vue'; import container from '../components/container.vue';
export default { export default {
components: { components: {
environmentTable, environmentTable,
container, container,
...@@ -65,7 +62,8 @@ export default { ...@@ -65,7 +62,8 @@ export default {
updateContent(parameters) { updateContent(parameters) {
this.updateInternalState(parameters); this.updateInternalState(parameters);
// fetch new data // fetch new data
return this.service.fetchEnvironments(this.requestData) return this.service
.fetchEnvironments(this.requestData)
.then(response => this.successCallback(response)) .then(response => this.successCallback(response))
.then(() => { .then(() => {
// restart polling // restart polling
...@@ -88,7 +86,8 @@ export default { ...@@ -88,7 +86,8 @@ export default {
if (!this.isMakingRequest) { if (!this.isMakingRequest) {
this.isLoading = true; this.isLoading = true;
this.service.postAction(endpoint) this.service
.postAction(endpoint)
.then(() => this.fetchEnvironments()) .then(() => this.fetchEnvironments())
.catch(() => { .catch(() => {
this.isLoading = false; this.isLoading = false;
...@@ -100,7 +99,8 @@ export default { ...@@ -100,7 +99,8 @@ export default {
fetchEnvironments() { fetchEnvironments() {
this.isLoading = true; this.isLoading = true;
return this.service.fetchEnvironments(this.requestData) return this.service
.fetchEnvironments(this.requestData)
.then(this.successCallback) .then(this.successCallback)
.catch(this.errorCallback); .catch(this.errorCallback);
}, },
...@@ -111,7 +111,9 @@ export default { ...@@ -111,7 +111,9 @@ export default {
stopEnvironment(environment) { stopEnvironment(environment) {
const endpoint = environment.stop_path; const endpoint = environment.stop_path;
const errorMessage = s__('Environments|An error occurred while stopping the environment, please try again'); const errorMessage = s__(
'Environments|An error occurred while stopping the environment, please try again',
);
this.postAction({ endpoint, errorMessage }); this.postAction({ endpoint, errorMessage });
}, },
}, },
...@@ -149,7 +151,7 @@ export default { ...@@ -149,7 +151,7 @@ export default {
data: this.requestData, data: this.requestData,
successCallback: this.successCallback, successCallback: this.successCallback,
errorCallback: this.errorCallback, errorCallback: this.errorCallback,
notificationCallback: (isMakingRequest) => { notificationCallback: isMakingRequest => {
this.isMakingRequest = isMakingRequest; this.isMakingRequest = isMakingRequest;
}, },
}); });
......
import $ from 'jquery'; import $ from 'jquery';
import { import { getSelector, inserted } from './feature_highlight_helper';
getSelector, import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
inserted,
} from './feature_highlight_helper';
import {
togglePopover,
mouseenter,
debouncedMouseleave,
} from '../shared/popover';
export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
const $selector = $(getSelector(id)); const $selector = $(getSelector(id));
...@@ -41,8 +34,9 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) { ...@@ -41,8 +34,9 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
export function findHighestPriorityFeature() { export function findHighestPriorityFeature() {
let priorityFeature; let priorityFeature;
const sortedFeatureEls = [].slice.call(document.querySelectorAll('.js-feature-highlight')).sort((a, b) => const sortedFeatureEls = [].slice
(a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0)); .call(document.querySelectorAll('.js-feature-highlight'))
.sort((a, b) => (a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0));
const [priorityFeatureEl] = sortedFeatureEls; const [priorityFeatureEl] = sortedFeatureEls;
if (priorityFeatureEl) { if (priorityFeatureEl) {
......
...@@ -8,10 +8,17 @@ import { togglePopover } from '../shared/popover'; ...@@ -8,10 +8,17 @@ import { togglePopover } from '../shared/popover';
export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`; export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
export function dismiss(highlightId) { export function dismiss(highlightId) {
axios.post(this.attr('data-dismiss-endpoint'), { axios
.post(this.attr('data-dismiss-endpoint'), {
feature_name: highlightId, feature_name: highlightId,
}) })
.catch(() => Flash(__('An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.'))); .catch(() =>
Flash(
__(
'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
),
),
);
togglePopover.call(this, false); togglePopover.call(this, false);
this.hide(); this.hide();
...@@ -23,8 +30,7 @@ export function inserted() { ...@@ -23,8 +30,7 @@ export function inserted() {
const $popover = $(this); const $popover = $(this);
const dismissWrapper = dismiss.bind($popover, highlightId); const dismissWrapper = dismiss.bind($popover, highlightId);
$(`#${popoverId} .dismiss-feature-highlight`) $(`#${popoverId} .dismiss-feature-highlight`).on('click', dismissWrapper);
.on('click', dismissWrapper);
const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0]; const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
if (lazyImg) { if (lazyImg) {
......
import FilteredSearchTokenKeys from './filtered_search_token_keys'; import FilteredSearchTokenKeys from './filtered_search_token_keys';
const tokenKeys = [{ const tokenKeys = [
{
key: 'status', key: 'status',
type: 'string', type: 'string',
param: 'status', param: 'status',
symbol: '', symbol: '',
icon: 'messages', icon: 'messages',
tag: 'status', tag: 'status',
}, { },
{
key: 'type', key: 'type',
type: 'string', type: 'string',
param: 'type', param: 'type',
symbol: '', symbol: '',
icon: 'cube', icon: 'cube',
tag: 'type', tag: 'type',
}]; },
];
const AdminRunnersFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys); const AdminRunnersFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys);
......
...@@ -21,9 +21,11 @@ export default { ...@@ -21,9 +21,11 @@ export default {
}, },
computed: { computed: {
processedItems() { processedItems() {
return this.items.map((item) => { return this.items.map(item => {
const { tokens, searchToken } const { tokens, searchToken } = FilteredSearchTokenizer.processTokens(
= FilteredSearchTokenizer.processTokens(item, this.allowedKeys); item,
this.allowedKeys,
);
const resultantTokens = tokens.map(token => ({ const resultantTokens = tokens.map(token => ({
prefix: `${token.key}:`, prefix: `${token.key}:`,
......
...@@ -24,8 +24,12 @@ export default class DropdownEmoji extends FilteredSearchDropdown { ...@@ -24,8 +24,12 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
}; };
import(/* webpackChunkName: 'emoji' */ '~/emoji') import(/* webpackChunkName: 'emoji' */ '~/emoji')
.then(({ glEmojiTag }) => { this.glEmojiTag = glEmojiTag; }) .then(({ glEmojiTag }) => {
.catch(() => { /* ignore error and leave emoji name in the search bar */ }); this.glEmojiTag = glEmojiTag;
})
.catch(() => {
/* ignore error and leave emoji name in the search bar */
});
this.unbindEvents(); this.unbindEvents();
this.bindEvents(); this.bindEvents();
...@@ -48,7 +52,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown { ...@@ -48,7 +52,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
} }
itemClicked(e) { itemClicked(e) {
super.itemClicked(e, (selected) => { super.itemClicked(e, selected => {
const name = selected.querySelector('.js-data-value').innerText.trim(); const name = selected.querySelector('.js-data-value').innerText.trim();
return DropdownUtils.getEscapedText(name); return DropdownUtils.getEscapedText(name);
}); });
...@@ -64,7 +68,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown { ...@@ -64,7 +68,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
// Replace empty gl-emoji tag to real content // Replace empty gl-emoji tag to real content
const dropdownItems = [...this.dropdown.querySelectorAll('.filter-dropdown-item')]; const dropdownItems = [...this.dropdown.querySelectorAll('.filter-dropdown-item')];
dropdownItems.forEach((dropdownItem) => { dropdownItems.forEach(dropdownItem => {
const name = dropdownItem.querySelector('.js-data-value').innerText; const name = dropdownItem.querySelector('.js-data-value').innerText;
const emojiTag = this.glEmojiTag(name); const emojiTag = this.glEmojiTag(name);
const emojiElement = dropdownItem.querySelector('gl-emoji'); const emojiElement = dropdownItem.querySelector('gl-emoji');
...@@ -73,7 +77,6 @@ export default class DropdownEmoji extends FilteredSearchDropdown { ...@@ -73,7 +77,6 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
} }
init() { init() {
this.droplab this.droplab.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
} }
} }
...@@ -41,8 +41,10 @@ export default class DropdownHint extends FilteredSearchDropdown { ...@@ -41,8 +41,10 @@ export default class DropdownHint extends FilteredSearchDropdown {
previousInputValues.forEach((value, index) => { previousInputValues.forEach((value, index) => {
searchTerms.push(value); searchTerms.push(value);
if (index === previousInputValues.length - 1 if (
&& token.indexOf(value.toLowerCase()) !== -1) { index === previousInputValues.length - 1 &&
token.indexOf(value.toLowerCase()) !== -1
) {
searchTerms.pop(); searchTerms.pop();
} }
}); });
...@@ -64,8 +66,7 @@ export default class DropdownHint extends FilteredSearchDropdown { ...@@ -64,8 +66,7 @@ export default class DropdownHint extends FilteredSearchDropdown {
} }
renderContent() { renderContent() {
const dropdownData = this.tokenKeys.get() const dropdownData = this.tokenKeys.get().map(tokenKey => ({
.map(tokenKey => ({
icon: `${gon.sprite_icons}#${tokenKey.icon}`, icon: `${gon.sprite_icons}#${tokenKey.icon}`,
hint: tokenKey.key, hint: tokenKey.key,
tag: `:${tokenKey.tag}`, tag: `:${tokenKey.tag}`,
......
...@@ -29,20 +29,18 @@ export default class DropdownNonUser extends FilteredSearchDropdown { ...@@ -29,20 +29,18 @@ export default class DropdownNonUser extends FilteredSearchDropdown {
} }
itemClicked(e) { itemClicked(e) {
super.itemClicked(e, (selected) => { super.itemClicked(e, selected => {
const title = selected.querySelector('.js-data-value').innerText.trim(); const title = selected.querySelector('.js-data-value').innerText.trim();
return `${this.symbol}${DropdownUtils.getEscapedText(title)}`; return `${this.symbol}${DropdownUtils.getEscapedText(title)}`;
}); });
} }
renderContent(forceShowList = false) { renderContent(forceShowList = false) {
this.droplab this.droplab.changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
.changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
super.renderContent(forceShowList); super.renderContent(forceShowList);
} }
init() { init() {
this.droplab this.droplab.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
} }
} }
...@@ -41,7 +41,7 @@ export default class DropdownUtils { ...@@ -41,7 +41,7 @@ export default class DropdownUtils {
// Removes the first character if it is a quotation so that we can search // Removes the first character if it is a quotation so that we can search
// with multiple words // with multiple words
if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) { if ((value[0] === '"' || value[0] === "'") && title.indexOf(' ') !== -1) {
value = value.slice(1); value = value.slice(1);
} }
...@@ -82,11 +82,13 @@ export default class DropdownUtils { ...@@ -82,11 +82,13 @@ export default class DropdownUtils {
// Reduce the colors to 4 // Reduce the colors to 4
colors.length = Math.min(colors.length, 4); colors.length = Math.min(colors.length, 4);
const color = colors.map((c, i) => { const color = colors
.map((c, i) => {
const percentFirst = Math.floor(spacing * i); const percentFirst = Math.floor(spacing * i);
const percentSecond = Math.floor(spacing * (i + 1)); const percentSecond = Math.floor(spacing * (i + 1));
return `${c} ${percentFirst}%, ${c} ${percentSecond}%`; return `${c} ${percentFirst}%, ${c} ${percentSecond}%`;
}).join(', '); })
.join(', ');
return `linear-gradient(${color})`; return `linear-gradient(${color})`;
} }
...@@ -97,8 +99,7 @@ export default class DropdownUtils { ...@@ -97,8 +99,7 @@ export default class DropdownUtils {
data.forEach(DropdownUtils.mergeDuplicateLabels.bind(null, dataMap)); data.forEach(DropdownUtils.mergeDuplicateLabels.bind(null, dataMap));
Object.keys(dataMap) Object.keys(dataMap).forEach(key => {
.forEach((key) => {
const label = dataMap[key]; const label = dataMap[key];
if (label.multipleColors) { if (label.multipleColors) {
...@@ -118,8 +119,7 @@ export default class DropdownUtils { ...@@ -118,8 +119,7 @@ export default class DropdownUtils {
const { input, allowedKeys } = config; const { input, allowedKeys } = config;
const updatedItem = item; const updatedItem = item;
const searchInput = DropdownUtils.getSearchQuery(input); const searchInput = DropdownUtils.getSearchQuery(input);
const { lastToken, tokens } = const { lastToken, tokens } = FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
const lastKey = lastToken.key || lastToken || ''; const lastKey = lastToken.key || lastToken || '';
const allowMultiple = item.type === 'array'; const allowMultiple = item.type === 'array';
const itemInExistingTokens = tokens.some(t => t.key === item.hint); const itemInExistingTokens = tokens.some(t => t.key === item.hint);
...@@ -154,7 +154,10 @@ export default class DropdownUtils { ...@@ -154,7 +154,10 @@ export default class DropdownUtils {
static getVisualTokenValues(visualToken) { static getVisualTokenValues(visualToken) {
const tokenName = visualToken && visualToken.querySelector('.name').textContent.trim(); const tokenName = visualToken && visualToken.querySelector('.name').textContent.trim();
let tokenValue = visualToken && visualToken.querySelector('.value') && visualToken.querySelector('.value').textContent.trim(); let tokenValue =
visualToken &&
visualToken.querySelector('.value') &&
visualToken.querySelector('.value').textContent.trim();
if (tokenName === 'label' && tokenValue) { if (tokenName === 'label' && tokenValue) {
// remove leading symbol and wrapping quotes // remove leading symbol and wrapping quotes
tokenValue = tokenValue.replace(/^~("|')?(.*)/, '$2').replace(/("|')$/, ''); tokenValue = tokenValue.replace(/^~("|')?(.*)/, '$2').replace(/("|')$/, '');
...@@ -174,7 +177,7 @@ export default class DropdownUtils { ...@@ -174,7 +177,7 @@ export default class DropdownUtils {
tokens.splice(inputIndex + 1); tokens.splice(inputIndex + 1);
} }
tokens.forEach((token) => { tokens.forEach(token => {
if (token.classList.contains('js-visual-token')) { if (token.classList.contains('js-visual-token')) {
const name = token.querySelector('.name'); const name = token.querySelector('.name');
const value = token.querySelector('.value'); const value = token.querySelector('.value');
...@@ -194,8 +197,9 @@ export default class DropdownUtils { ...@@ -194,8 +197,9 @@ export default class DropdownUtils {
values.push(name.innerText); values.push(name.innerText);
} }
} else if (token.classList.contains('input-token')) { } else if (token.classList.contains('input-token')) {
const { isLastVisualTokenValid } = const {
FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); isLastVisualTokenValid,
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
const input = FilteredSearchContainer.container.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const inputValue = input && input.value; const inputValue = input && input.value;
...@@ -209,9 +213,7 @@ export default class DropdownUtils { ...@@ -209,9 +213,7 @@ export default class DropdownUtils {
} }
}); });
return values return values.map(value => value.trim()).join(' ');
.map(value => value.trim())
.join(' ');
} }
static getSearchInput(filteredSearchInput) { static getSearchInput(filteredSearchInput) {
...@@ -227,7 +229,9 @@ export default class DropdownUtils { ...@@ -227,7 +229,9 @@ export default class DropdownUtils {
// Replace all spaces inside quote marks with underscores // Replace all spaces inside quote marks with underscores
// (will continue to match entire string until an end quote is found if any) // (will continue to match entire string until an end quote is found if any)
// This helps with matching the beginning & end of a token:key // This helps with matching the beginning & end of a token:key
inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str => str.replace(/\s/g, '_')); inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str =>
str.replace(/\s/g, '_'),
);
// Get the right position for the word selected // Get the right position for the word selected
// Regex matches first space // Regex matches first space
......
...@@ -87,10 +87,12 @@ export default class FilteredSearchDropdown { ...@@ -87,10 +87,12 @@ export default class FilteredSearchDropdown {
dispatchInputEvent() { dispatchInputEvent() {
// Propogate input change to FilteredSearchDropdownManager // Propogate input change to FilteredSearchDropdownManager
// so that it can determine which dropdowns to open // so that it can determine which dropdowns to open
this.input.dispatchEvent(new CustomEvent('input', { this.input.dispatchEvent(
new CustomEvent('input', {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
})); }),
);
} }
dispatchFormSubmitEvent() { dispatchFormSubmitEvent() {
...@@ -114,7 +116,7 @@ export default class FilteredSearchDropdown { ...@@ -114,7 +116,7 @@ export default class FilteredSearchDropdown {
if (!data) return; if (!data) return;
const results = data.map((o) => { const results = data.map(o => {
const updated = o; const updated = o;
updated.droplab_hidden = false; updated.droplab_hidden = false;
return updated; return updated;
......
...@@ -42,7 +42,8 @@ export default class FilteredSearchTokenKeys { ...@@ -42,7 +42,8 @@ export default class FilteredSearchTokenKeys {
} }
searchByKeyParam(keyParam) { searchByKeyParam(keyParam) {
return this.tokenKeysWithAlternative.find((tokenKey) => { return (
this.tokenKeysWithAlternative.find(tokenKey => {
let tokenKeyParam = tokenKey.key; let tokenKeyParam = tokenKey.key;
// Replace hyphen with underscore to compare keyParam with tokenKeyParam // Replace hyphen with underscore to compare keyParam with tokenKeyParam
...@@ -54,7 +55,8 @@ export default class FilteredSearchTokenKeys { ...@@ -54,7 +55,8 @@ export default class FilteredSearchTokenKeys {
} }
return keyParam === tokenKeyParam; return keyParam === tokenKeyParam;
}) || null; }) || null
);
} }
searchByConditionUrl(url) { searchByConditionUrl(url) {
...@@ -62,8 +64,10 @@ export default class FilteredSearchTokenKeys { ...@@ -62,8 +64,10 @@ export default class FilteredSearchTokenKeys {
} }
searchByConditionKeyValue(key, value) { searchByConditionKeyValue(key, value) {
return this.conditions return (
.find(condition => condition.tokenKey === key && condition.value === value) || null; this.conditions.find(condition => condition.tokenKey === key && condition.value === value) ||
null
);
} }
addExtraTokensForMergeRequests() { addExtraTokensForMergeRequests() {
......
...@@ -4,11 +4,16 @@ export default class FilteredSearchTokenizer { ...@@ -4,11 +4,16 @@ export default class FilteredSearchTokenizer {
static processTokens(input, allowedKeys) { static processTokens(input, allowedKeys) {
// Regex extracts `(token):(symbol)(value)` // Regex extracts `(token):(symbol)(value)`
// Values that start with a double quote must end in a double quote (same for single) // Values that start with a double quote must end in a double quote (same for single)
const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g'); const tokenRegex = new RegExp(
`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`,
'g',
);
const tokens = []; const tokens = [];
const tokenIndexes = []; // stores key+value for simple search const tokenIndexes = []; // stores key+value for simple search
let lastToken = null; let lastToken = null;
const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => { const searchToken =
input
.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
let tokenValue = v1 || v2 || v3; let tokenValue = v1 || v2 || v3;
let tokenSymbol = symbol; let tokenSymbol = symbol;
let tokenIndex = ''; let tokenIndex = '';
...@@ -32,13 +37,15 @@ export default class FilteredSearchTokenizer { ...@@ -32,13 +37,15 @@ export default class FilteredSearchTokenizer {
} }
return ''; return '';
}).replace(/\s{2,}/g, ' ').trim() || ''; })
.replace(/\s{2,}/g, ' ')
.trim() || '';
if (tokens.length > 0) { if (tokens.length > 0) {
const last = tokens[tokens.length - 1]; const last = tokens[tokens.length - 1];
const lastString = `${last.key}:${last.symbol}${last.value}`; const lastString = `${last.key}:${last.symbol}${last.value}`;
lastToken = input.lastIndexOf(lastString) === lastToken =
input.length - lastString.length ? last : searchToken; input.lastIndexOf(lastString) === input.length - lastString.length ? last : searchToken;
} else { } else {
lastToken = searchToken; lastToken = searchToken;
} }
......
...@@ -13,7 +13,10 @@ export default class FilteredSearchVisualTokens { ...@@ -13,7 +13,10 @@ export default class FilteredSearchVisualTokens {
return { return {
lastVisualToken, lastVisualToken,
isLastVisualTokenValid: lastVisualToken === null || lastVisualToken.className.indexOf('filtered-search-term') !== -1 || (lastVisualToken && lastVisualToken.querySelector('.value') !== null), isLastVisualTokenValid:
lastVisualToken === null ||
lastVisualToken.className.indexOf('filtered-search-term') !== -1 ||
(lastVisualToken && lastVisualToken.querySelector('.value') !== null),
}; };
} }
...@@ -33,7 +36,9 @@ export default class FilteredSearchVisualTokens { ...@@ -33,7 +36,9 @@ export default class FilteredSearchVisualTokens {
} }
static unselectTokens() { static unselectTokens() {
const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected'); const otherTokens = FilteredSearchContainer.container.querySelectorAll(
'.js-visual-token .selectable.selected',
);
[].forEach.call(otherTokens, t => t.classList.remove('selected')); [].forEach.call(otherTokens, t => t.classList.remove('selected'));
} }
...@@ -56,11 +61,7 @@ export default class FilteredSearchVisualTokens { ...@@ -56,11 +61,7 @@ export default class FilteredSearchVisualTokens {
} }
static createVisualTokenElementHTML(options = {}) { static createVisualTokenElementHTML(options = {}) {
const { const { canEdit = true, uppercaseTokenName = false, capitalizeTokenValue = false } = options;
canEdit = true,
uppercaseTokenName = false,
capitalizeTokenValue = false,
} = options;
return ` return `
<div class="${canEdit ? 'selectable' : 'hidden'}" role="button"> <div class="${canEdit ? 'selectable' : 'hidden'}" role="button">
...@@ -115,15 +116,20 @@ export default class FilteredSearchVisualTokens { ...@@ -115,15 +116,20 @@ export default class FilteredSearchVisualTokens {
return AjaxCache.retrieve(labelsEndpoint) return AjaxCache.retrieve(labelsEndpoint)
.then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint)) .then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint))
.then((labels) => { .then(labels => {
const matchingLabel = (labels || []).find(label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue); const matchingLabel = (labels || []).find(
label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
);
if (!matchingLabel) { if (!matchingLabel) {
return; return;
} }
FilteredSearchVisualTokens FilteredSearchVisualTokens.setTokenStyle(
.setTokenStyle(tokenValueContainer, matchingLabel.color, matchingLabel.text_color); tokenValueContainer,
matchingLabel.color,
matchingLabel.text_color,
);
}) })
.catch(() => new Flash('An error occurred while fetching label colors.')); .catch(() => new Flash('An error occurred while fetching label colors.'));
} }
...@@ -134,8 +140,9 @@ export default class FilteredSearchVisualTokens { ...@@ -134,8 +140,9 @@ export default class FilteredSearchVisualTokens {
} }
const username = tokenValue.replace(/^@/, ''); const username = tokenValue.replace(/^@/, '');
return UsersCache.retrieve(username) return (
.then((user) => { UsersCache.retrieve(username)
.then(user => {
if (!user) { if (!user) {
return; return;
} }
...@@ -149,15 +156,17 @@ export default class FilteredSearchVisualTokens { ...@@ -149,15 +156,17 @@ export default class FilteredSearchVisualTokens {
/* eslint-enable no-param-reassign */ /* eslint-enable no-param-reassign */
}) })
// ignore error and leave username in the search bar // ignore error and leave username in the search bar
.catch(() => { }); .catch(() => {})
);
} }
static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) { static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
const container = tokenValueContainer; const container = tokenValueContainer;
const element = tokenValueElement; const element = tokenValueElement;
return import(/* webpackChunkName: 'emoji' */ '../emoji') return (
.then((Emoji) => { import(/* webpackChunkName: 'emoji' */ '../emoji')
.then(Emoji => {
if (!Emoji.isEmojiNameValid(tokenValue)) { if (!Emoji.isEmojiNameValid(tokenValue)) {
return; return;
} }
...@@ -166,7 +175,8 @@ export default class FilteredSearchVisualTokens { ...@@ -166,7 +175,8 @@ export default class FilteredSearchVisualTokens {
element.innerHTML = Emoji.glEmojiTag(tokenValue); element.innerHTML = Emoji.glEmojiTag(tokenValue);
}) })
// ignore error and leave emoji name in the search bar // ignore error and leave emoji name in the search bar
.catch(() => { }); .catch(() => {})
);
} }
static renderVisualTokenValue(parentElement, tokenName, tokenValue) { static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
...@@ -177,24 +187,23 @@ export default class FilteredSearchVisualTokens { ...@@ -177,24 +187,23 @@ export default class FilteredSearchVisualTokens {
const tokenType = tokenName.toLowerCase(); const tokenType = tokenName.toLowerCase();
if (tokenType === 'label') { if (tokenType === 'label') {
FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue); FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
} else if ((tokenType === 'author') || (tokenType === 'assignee')) { } else if (tokenType === 'author' || tokenType === 'assignee') {
FilteredSearchVisualTokens.updateUserTokenAppearance( FilteredSearchVisualTokens.updateUserTokenAppearance(
tokenValueContainer, tokenValueElement, tokenValue, tokenValueContainer,
tokenValueElement,
tokenValue,
); );
} else if (tokenType === 'my-reaction') { } else if (tokenType === 'my-reaction') {
FilteredSearchVisualTokens.updateEmojiTokenAppearance( FilteredSearchVisualTokens.updateEmojiTokenAppearance(
tokenValueContainer, tokenValueElement, tokenValue, tokenValueContainer,
tokenValueElement,
tokenValue,
); );
} }
} }
static addVisualTokenElement(name, value, options = {}) { static addVisualTokenElement(name, value, options = {}) {
const { const { isSearchTerm = false, canEdit, uppercaseTokenName, capitalizeTokenValue } = options;
isSearchTerm = false,
canEdit,
uppercaseTokenName,
capitalizeTokenValue,
} = options;
const li = document.createElement('li'); const li = document.createElement('li');
li.classList.add('js-visual-token'); li.classList.add('js-visual-token');
li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token'); li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
...@@ -217,8 +226,10 @@ export default class FilteredSearchVisualTokens { ...@@ -217,8 +226,10 @@ export default class FilteredSearchVisualTokens {
} }
static addValueToPreviousVisualTokenElement(value) { static addValueToPreviousVisualTokenElement(value) {
const { lastVisualToken, isLastVisualTokenValid } = const {
FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); lastVisualToken,
isLastVisualTokenValid,
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
if (!isLastVisualTokenValid && lastVisualToken.classList.contains('filtered-search-token')) { if (!isLastVisualTokenValid && lastVisualToken.classList.contains('filtered-search-token')) {
const name = FilteredSearchVisualTokens.getLastTokenPartial(); const name = FilteredSearchVisualTokens.getLastTokenPartial();
...@@ -228,13 +239,15 @@ export default class FilteredSearchVisualTokens { ...@@ -228,13 +239,15 @@ export default class FilteredSearchVisualTokens {
} }
} }
static addFilterVisualToken(tokenName, tokenValue, { static addFilterVisualToken(
canEdit, tokenName,
uppercaseTokenName = false, tokenValue,
capitalizeTokenValue = false, { canEdit, uppercaseTokenName = false, capitalizeTokenValue = false } = {},
} = {}) { ) {
const { lastVisualToken, isLastVisualTokenValid } const {
= FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); lastVisualToken,
isLastVisualTokenValid,
} = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
const { addVisualTokenElement } = FilteredSearchVisualTokens; const { addVisualTokenElement } = FilteredSearchVisualTokens;
if (isLastVisualTokenValid) { if (isLastVisualTokenValid) {
...@@ -308,8 +321,7 @@ export default class FilteredSearchVisualTokens { ...@@ -308,8 +321,7 @@ export default class FilteredSearchVisualTokens {
static tokenizeInput() { static tokenizeInput() {
const input = FilteredSearchContainer.container.querySelector('.filtered-search'); const input = FilteredSearchContainer.container.querySelector('.filtered-search');
const { isLastVisualTokenValid } = const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
if (input.value) { if (input.value) {
if (isLastVisualTokenValid) { if (isLastVisualTokenValid) {
...@@ -375,8 +387,7 @@ export default class FilteredSearchVisualTokens { ...@@ -375,8 +387,7 @@ export default class FilteredSearchVisualTokens {
FilteredSearchVisualTokens.tokenizeInput(); FilteredSearchVisualTokens.tokenizeInput();
if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) { if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) {
const { isLastVisualTokenValid } = const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
if (!isLastVisualTokenValid) { if (!isLastVisualTokenValid) {
const lastPartial = FilteredSearchVisualTokens.getLastTokenPartial(); const lastPartial = FilteredSearchVisualTokens.getLastTokenPartial();
......
import FilteredSearchTokenKeys from './filtered_search_token_keys'; import FilteredSearchTokenKeys from './filtered_search_token_keys';
export const tokenKeys = [{ export const tokenKeys = [
{
key: 'author', key: 'author',
type: 'string', type: 'string',
param: 'username', param: 'username',
symbol: '@', symbol: '@',
icon: 'pencil', icon: 'pencil',
tag: '@author', tag: '@author',
}, { },
{
key: 'assignee', key: 'assignee',
type: 'string', type: 'string',
param: 'username', param: 'username',
symbol: '@', symbol: '@',
icon: 'user', icon: 'user',
tag: '@assignee', tag: '@assignee',
}, { },
{
key: 'milestone', key: 'milestone',
type: 'string', type: 'string',
param: 'title', param: 'title',
symbol: '%', symbol: '%',
icon: 'clock', icon: 'clock',
tag: '%milestone', tag: '%milestone',
}, { },
{
key: 'label', key: 'label',
type: 'array', type: 'array',
param: 'name[]', param: 'name[]',
symbol: '~', symbol: '~',
icon: 'labels', icon: 'labels',
tag: '~label', tag: '~label',
}]; },
];
if (gon.current_user_id) { if (gon.current_user_id) {
// Appending tokenkeys only logged-in // Appending tokenkeys only logged-in
...@@ -42,36 +47,47 @@ if (gon.current_user_id) { ...@@ -42,36 +47,47 @@ if (gon.current_user_id) {
}); });
} }
export const alternativeTokenKeys = [{ export const alternativeTokenKeys = [
{
key: 'label', key: 'label',
type: 'string', type: 'string',
param: 'name', param: 'name',
symbol: '~', symbol: '~',
}]; },
];
export const conditions = [{ export const conditions = [
{
url: 'assignee_id=0', url: 'assignee_id=0',
tokenKey: 'assignee', tokenKey: 'assignee',
value: 'none', value: 'none',
}, { },
{
url: 'milestone_title=No+Milestone', url: 'milestone_title=No+Milestone',
tokenKey: 'milestone', tokenKey: 'milestone',
value: 'none', value: 'none',
}, { },
{
url: 'milestone_title=%23upcoming', url: 'milestone_title=%23upcoming',
tokenKey: 'milestone', tokenKey: 'milestone',
value: 'upcoming', value: 'upcoming',
}, { },
{
url: 'milestone_title=%23started', url: 'milestone_title=%23started',
tokenKey: 'milestone', tokenKey: 'milestone',
value: 'started', value: 'started',
}, { },
{
url: 'label_name[]=No+Label', url: 'label_name[]=No+Label',
tokenKey: 'label', tokenKey: 'label',
value: 'none', value: 'none',
}]; },
];
const IssuableFilteredSearchTokenKeys = const IssuableFilteredSearchTokenKeys = new FilteredSearchTokenKeys(
new FilteredSearchTokenKeys(tokenKeys, alternativeTokenKeys, conditions); tokenKeys,
alternativeTokenKeys,
conditions,
);
export default IssuableFilteredSearchTokenKeys; export default IssuableFilteredSearchTokenKeys;
...@@ -3,11 +3,7 @@ import RecentSearchesDropdownContent from './components/recent_searches_dropdown ...@@ -3,11 +3,7 @@ import RecentSearchesDropdownContent from './components/recent_searches_dropdown
import eventHub from './event_hub'; import eventHub from './event_hub';
class RecentSearchesRoot { class RecentSearchesRoot {
constructor( constructor(recentSearchesStore, recentSearchesService, wrapperElement) {
recentSearchesStore,
recentSearchesService,
wrapperElement,
) {
this.store = recentSearchesStore; this.store = recentSearchesStore;
this.service = recentSearchesService; this.service = recentSearchesService;
this.wrapperElement = wrapperElement; this.wrapperElement = wrapperElement;
...@@ -35,7 +31,9 @@ class RecentSearchesRoot { ...@@ -35,7 +31,9 @@ class RecentSearchesRoot {
components: { components: {
RecentSearchesDropdownContent, RecentSearchesDropdownContent,
}, },
data() { return state; }, data() {
return state;
},
template: ` template: `
<recent-searches-dropdown-content <recent-searches-dropdown-content
:items="recentSearches" :items="recentSearches"
...@@ -57,7 +55,6 @@ class RecentSearchesRoot { ...@@ -57,7 +55,6 @@ class RecentSearchesRoot {
this.vm.$destroy(); this.vm.$destroy();
} }
} }
} }
export default RecentSearchesRoot; export default RecentSearchesRoot;
...@@ -2,11 +2,14 @@ import _ from 'underscore'; ...@@ -2,11 +2,14 @@ import _ from 'underscore';
class RecentSearchesStore { class RecentSearchesStore {
constructor(initialState = {}, allowedKeys) { constructor(initialState = {}, allowedKeys) {
this.state = Object.assign({ this.state = Object.assign(
{
isLocalStorageAvailable: true, isLocalStorageAvailable: true,
recentSearches: [], recentSearches: [],
allowedKeys, allowedKeys,
}, initialState); },
initialState,
);
} }
addRecentSearch(newSearch) { addRecentSearch(newSearch) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment