Add latest changes from gitlab-org/gitlab@master

4 files changed, 49 insertions, 23 deletions

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
- * <color-picker :label="__('Background color')" set-color="#FF0000" />
+ * <color-picker
+     :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
+     :label="__('Background color')"
+     set-color="#FF0000"
+     state="isValidColor"
+   />
  */
 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'),
   },
 };
 </script>
@@ -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 }"
     >
       <gl-form-input-group
         id="color-picker"
-        :state="isValidColor"
         max-length="7"
         type="text"
         class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
         :value="selectedColor"
+        :state="state"
         @input="handleColorChange"
       >
         <template #prepend>
diff --git a/app/models/terraform/state_version.rb b/app/models/terraform/state_version.rb
index 19d708616fc..be0803fee0e 100644
--- a/app/models/terraform/state_version.rb
+++ b/app/models/terraform/state_version.rb
@@ -9,6 +9,8 @@ module Terraform
     belongs_to :build, class_name: 'Ci::Build', optional: true, foreign_key: :ci_build_id
 
     scope :ordered_by_version_desc, -> { order(version: :desc) }
+    scope :with_files_stored_locally, -> { where(file_store: Terraform::StateUploader::Store::LOCAL) }
+    scope :preload_state, -> { includes(:terraform_state) }
 
     default_value_for(:file_store) { StateUploader.default_store }
 
diff --git a/app/uploaders/terraform/state_uploader.rb b/app/uploaders/terraform/state_uploader.rb
index d80725cb051..091b253b0ed 100644
--- a/app/uploaders/terraform/state_uploader.rb
+++ b/app/uploaders/terraform/state_uploader.rb
@@ -6,6 +6,10 @@ module Terraform
 
     storage_options Gitlab.config.terraform_state
 
+    # TODO: Remove this line
+    # See https://gitlab.com/gitlab-org/gitlab/-/issues/232917
+    alias_method :upload, :model
+
     delegate :terraform_state, :project_id, to: :model
 
     # Use Lockbox to encrypt/decrypt the stored file (registers CarrierWave callbacks)