From 16e3c34cac856092627cc41a8a9d9c69f3b26c03 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Fri, 22 Jan 2021 06:08:52 +0000 Subject: [PATCH] Add latest changes from gitlab-org/gitlab@master --- .../javascripts/lib/utils/color_utils.js | 20 ++++++++ .../components/color_picker/color_picker.vue | 46 +++++++++---------- app/models/terraform/state_version.rb | 2 + app/uploaders/terraform/state_uploader.rb | 4 ++ .../terraform-states-migrate-task.yml | 5 ++ doc/administration/terraform_state.md | 10 ++++ .../alert_notifications.md | 2 +- .../terraform/state_migration_helper.rb | 31 +++++++++++++ lib/gitlab/tracking/standard_context.rb | 12 ----- lib/tasks/gitlab/terraform/migrate.rake | 23 ++++++++++ .../6_release/pages/pages_pipeline_spec.rb | 2 +- spec/frontend/lib/utils/color_utils_spec.js | 17 ++++++- .../color_picker/color_picker_spec.js | 23 ++++------ .../terraform/state_migration_helper_spec.rb | 21 +++++++++ .../gitlab/tracking/standard_context_spec.rb | 16 +++---- spec/models/terraform/state_version_spec.rb | 18 ++++++++ .../gitlab/terraform/migrate_rake_spec.rb | 45 ++++++++++++++++++ 17 files changed, 237 insertions(+), 60 deletions(-) create mode 100644 changelogs/unreleased/terraform-states-migrate-task.yml create mode 100644 lib/gitlab/terraform/state_migration_helper.rb create mode 100644 lib/tasks/gitlab/terraform/migrate.rake create mode 100644 spec/lib/gitlab/terraform/state_migration_helper_spec.rb create mode 100644 spec/tasks/gitlab/terraform/migrate_rake_spec.rb diff --git a/app/assets/javascripts/lib/utils/color_utils.js b/app/assets/javascripts/lib/utils/color_utils.js index a1f56b15631..ff176f11867 100644 --- a/app/assets/javascripts/lib/utils/color_utils.js +++ b/app/assets/javascripts/lib/utils/color_utils.js @@ -23,3 +23,23 @@ export const textColorForBackground = (backgroundColor) => { } return '#FFFFFF'; }; + +/** + * Check whether a color matches the expected hex format + * + * This matches any hex (0-9 and A-F) value which is either 3 or 6 characters in length + * + * An empty string will return `null` which means that this is neither valid nor invalid. + * This is useful for forms resetting the validation state + * + * @param color string = '' + * + * @returns {null|boolean} + */ +export const validateHexColor = (color = '') => { + if (!color) { + return null; + } + + return /^#([0-9A-F]{3}){1,2}$/i.test(color); +}; diff --git a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue index 6977692e30c..8f997149259 100644 --- a/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue +++ b/app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue @@ -3,12 +3,16 @@ * Renders a color picker input with preset colors to choose from * * @example - * + * */ import { GlFormGroup, GlFormInput, GlFormInputGroup, GlLink, GlTooltipDirective } from '@gitlab/ui'; import { __ } from '~/locale'; -const VALID_RGB_HEX_COLOR = /^#([0-9A-F]{3}){1,2}$/i; const PREVIEW_COLOR_DEFAULT_CLASSES = 'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-top-left-base gl-rounded-bottom-left-base'; @@ -24,6 +28,11 @@ export default { GlTooltip: GlTooltipDirective, }, props: { + invalidFeedback: { + type: String, + required: false, + default: __('Please enter a valid hex (#RRGGBB or #RGB) color value'), + }, label: { type: String, required: false, @@ -34,6 +43,11 @@ export default { required: false, default: '', }, + state: { + type: Boolean, + required: false, + default: null, + }, }, data() { return { @@ -50,46 +64,32 @@ export default { return gon.suggested_label_colors; }, previewColor() { - if (this.isValidColor) { + if (this.state) { return { backgroundColor: this.selectedColor }; } return {}; }, previewColorClasses() { - const borderStyle = this.isInvalidColor - ? 'gl-inset-border-1-red-500' - : 'gl-inset-border-1-gray-400'; + const borderStyle = + this.state === false ? 'gl-inset-border-1-red-500' : 'gl-inset-border-1-gray-400'; return `${PREVIEW_COLOR_DEFAULT_CLASSES} ${borderStyle}`; }, hasSuggestedColors() { return Object.keys(this.suggestedColors).length; }, - isInvalidColor() { - return this.isValidColor === false; - }, - isValidColor() { - if (this.selectedColor === '') { - return null; - } - - return VALID_RGB_HEX_COLOR.test(this.selectedColor); - }, }, methods: { handleColorChange(color) { this.selectedColor = color.trim(); - if (this.isValidColor) { - this.$emit('input', this.selectedColor); - } + this.$emit('input', this.selectedColor); }, }, i18n: { fullDescription: __('Choose any color. Or you can choose one of the suggested colors below'), shortDescription: __('Choose any color'), - invalid: __('Please enter a valid hex (#RRGGBB or #RGB) color value'), }, }; @@ -100,17 +100,17 @@ export default { :label="label" label-for="color-picker" :description="description" - :invalid-feedback="this.$options.i18n.invalid" - :state="isValidColor" + :invalid-feedback="invalidFeedback" + :state="state" :class="{ 'gl-mb-3!': hasSuggestedColors }" >