From 2efadce5e77fb0b17ea0e859ae5359cd63c7f711 Mon Sep 17 00:00:00 2001 From: Jakub Jirutka Date: Wed, 24 Jan 2018 19:02:40 +0100 Subject: Disable throwOnError in KaTeX to reveal user where is the problem From KaTeX documentation: > throwOnError: boolean. If true, KaTeX will throw a ParseError when > it encounters an unsupported command. If false, KaTeX will render > the unsupported command as text in the color given by errorColor. > (default: true) It's better to render the formula and highlight unsupported commands than just give up and render whole formula as a code; users are confused and don't know what's wrong. --- app/assets/javascripts/render_math.js | 2 +- changelogs/unreleased/disable-throwOnError-in-katex.yml | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 changelogs/unreleased/disable-throwOnError-in-katex.yml diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js index a759992cd54..15205d8a4e2 100644 --- a/app/assets/javascripts/render_math.js +++ b/app/assets/javascripts/render_math.js @@ -18,7 +18,7 @@ function renderWithKaTeX(elements) { const display = $this.attr('data-math-style') === 'display'; try { - katex.render($this.text(), mathNode.get(0), { displayMode: display }); + katex.render($this.text(), mathNode.get(0), { displayMode: display, throwOnError: false }); mathNode.insertAfter($this); $this.remove(); } catch (err) { diff --git a/changelogs/unreleased/disable-throwOnError-in-katex.yml b/changelogs/unreleased/disable-throwOnError-in-katex.yml new file mode 100644 index 00000000000..0cd17bb29fe --- /dev/null +++ b/changelogs/unreleased/disable-throwOnError-in-katex.yml @@ -0,0 +1,5 @@ +--- +title: Disable throwOnError in KaTeX to reveal user where is the problem +merge_request: 16684 +author: Jakub Jirutka +type: other -- cgit v1.2.1 From 0e7e622712c99cd271aa026e636bfcf3b557e855 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Wed, 24 Jan 2018 12:57:05 -0800 Subject: Add note within ux documentation that further changes should be made within the design.gitlab project --- changelogs/unreleased/ux-guide-deprecation.yml | 6 ++++++ doc/development/ux_guide/index.md | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 changelogs/unreleased/ux-guide-deprecation.yml diff --git a/changelogs/unreleased/ux-guide-deprecation.yml b/changelogs/unreleased/ux-guide-deprecation.yml new file mode 100644 index 00000000000..16477f59abf --- /dev/null +++ b/changelogs/unreleased/ux-guide-deprecation.yml @@ -0,0 +1,6 @@ +--- +title: Add note within ux documentation that further changes should be made within + the design.gitlab project +merge_request: +author: +type: deprecated diff --git a/doc/development/ux_guide/index.md b/doc/development/ux_guide/index.md index 42bcf234e12..c59e7b72a1a 100644 --- a/doc/development/ux_guide/index.md +++ b/doc/development/ux_guide/index.md @@ -1,3 +1,5 @@ +> We are in the process of transferring UX documentation to the [design.gitlab.com](https://gitlab.com/gitlab-org/design.gitlab.com) project. Any updates to these docs should be made in that project. If documentation does not yet exist within [design.gitlab.com](https://gitlab.com/gitlab-org/design.gitlab.com), [create an issue](https://gitlab.com/gitlab-org/design.gitlab.com/issues) and merge request to add your new changes. + # GitLab UX Guide The goal of this guide is to provide standards, principles and in-depth information to design beautiful and effective GitLab features. This will be a living document, and we welcome contributions, feedback and suggestions. -- cgit v1.2.1 From 2f0ab2526a87fea9e6b178c0094f42c0a5ffe6ff Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Wed, 24 Jan 2018 01:36:21 -0600 Subject: Update secret_values to support dynamic elements within parent Used in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110 which introduces a dynamic variable list and needs secrets. We use the valueSelector/placeholderSelector options to avoid selecting the last empty row. --- app/assets/javascripts/behaviors/secret_values.js | 21 ++-- .../pages/groups/settings/ci_cd/show/index.js | 4 +- .../pages/projects/settings/ci_cd/show/index.js | 8 +- spec/javascripts/behaviors/secret_values_spec.js | 110 ++++++++++++++++++--- 4 files changed, 117 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js index 1cf0b960eb0..7f70fce913a 100644 --- a/app/assets/javascripts/behaviors/secret_values.js +++ b/app/assets/javascripts/behaviors/secret_values.js @@ -2,18 +2,19 @@ import { n__ } from '../locale'; import { convertPermissionToBoolean } from '../lib/utils/common_utils'; export default class SecretValues { - constructor(container) { + constructor({ + container, + valueSelector = '.js-secret-value', + placeholderSelector = '.js-secret-value-placeholder', + }) { this.container = container; + this.valueSelector = valueSelector; + this.placeholderSelector = placeholderSelector; } init() { - this.values = this.container.querySelectorAll('.js-secret-value'); - this.placeholders = this.container.querySelectorAll('.js-secret-value-placeholder'); this.revealButton = this.container.querySelector('.js-secret-value-reveal-button'); - this.revealText = n__('Reveal value', 'Reveal values', this.values.length); - this.hideText = n__('Hide value', 'Hide values', this.values.length); - const isRevealed = convertPermissionToBoolean(this.revealButton.dataset.secretRevealStatus); this.updateDom(isRevealed); @@ -28,15 +29,17 @@ export default class SecretValues { } updateDom(isRevealed) { - this.values.forEach((value) => { + const values = this.container.querySelectorAll(this.valueSelector); + values.forEach((value) => { value.classList.toggle('hide', !isRevealed); }); - this.placeholders.forEach((placeholder) => { + const placeholders = this.container.querySelectorAll(this.placeholderSelector); + placeholders.forEach((placeholder) => { placeholder.classList.toggle('hide', isRevealed); }); - this.revealButton.textContent = isRevealed ? this.hideText : this.revealText; + this.revealButton.textContent = isRevealed ? n__('Hide value', 'Hide values', values.length) : n__('Reveal value', 'Reveal values', values.length); this.revealButton.dataset.secretRevealStatus = isRevealed; } } diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js index c4691cd367c..f26c7360fbe 100644 --- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js @@ -3,7 +3,9 @@ import SecretValues from '~/behaviors/secret_values'; export default () => { const secretVariableTable = document.querySelector('.js-secret-variable-table'); if (secretVariableTable) { - const secretVariableTableValues = new SecretValues(secretVariableTable); + const secretVariableTableValues = new SecretValues({ + container: secretVariableTable, + }); secretVariableTableValues.init(); } }; diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js index 94b927a1548..18dc1dc03a5 100644 --- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js @@ -6,13 +6,17 @@ export default function () { initSettingsPanels(); const runnerToken = document.querySelector('.js-secret-runner-token'); if (runnerToken) { - const runnerTokenSecretValue = new SecretValues(runnerToken); + const runnerTokenSecretValue = new SecretValues({ + container: runnerToken, + }); runnerTokenSecretValue.init(); } const secretVariableTable = document.querySelector('.js-secret-variable-table'); if (secretVariableTable) { - const secretVariableTableValues = new SecretValues(secretVariableTable); + const secretVariableTableValues = new SecretValues({ + container: secretVariableTable, + }); secretVariableTableValues.init(); } } diff --git a/spec/javascripts/behaviors/secret_values_spec.js b/spec/javascripts/behaviors/secret_values_spec.js index 9eeae474e7d..38d9bba6868 100644 --- a/spec/javascripts/behaviors/secret_values_spec.js +++ b/spec/javascripts/behaviors/secret_values_spec.js @@ -1,16 +1,24 @@ import SecretValues from '~/behaviors/secret_values'; -function generateFixtureMarkup(secrets, isRevealed) { +function generateValueMarkup( + secret, + valueClass = 'js-secret-value', + placeholderClass = 'js-secret-value-placeholder', +) { + return ` +
+ *** +
+
+ ${secret} +
+ `; +} + +function generateFixtureMarkup(secrets, isRevealed, valueClass, placeholderClass) { return `
- ${secrets.map(secret => ` -
- *** -
-
- ${secret} -
- `).join('')} + ${secrets.map(secret => generateValueMarkup(secret, valueClass, placeholderClass)).join('')}