Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

2 files changed, 89 insertions, 0 deletions

diff --git a/app/assets/javascripts/listbox/index.js b/app/assets/javascripts/listbox/index.js
new file mode 100644
index 00000000000..f63171e2785
--- /dev/null
+++ b/app/assets/javascripts/listbox/index.js
@@ -0,0 +1,67 @@
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+
+export function parseAttributes(el) {
+  const { items: itemsString, selected, right: rightString } = el.dataset;
+
+  const items = JSON.parse(itemsString);
+  const right = parseBoolean(rightString);
+
+  const { className } = el;
+
+  return { items, selected, right, className };
+}
+
+export function initListbox(el, { onChange } = {}) {
+  if (!el) return null;
+
+  const { items, selected, right, className } = parseAttributes(el);
+
+  return new Vue({
+    el,
+    data() {
+      return {
+        selected,
+      };
+    },
+    computed: {
+      text() {
+        return items.find(({ value }) => value === this.selected)?.text;
+      },
+    },
+    render(h) {
+      return h(
+        GlDropdown,
+        {
+          props: {
+            text: this.text,
+            right,
+          },
+          class: className,
+        },
+        items.map((item) =>
+          h(
+            GlDropdownItem,
+            {
+              props: {
+                isCheckItem: true,
+                isChecked: this.selected === item.value,
+              },
+              on: {
+                click: () => {
+                  this.selected = item.value;
+
+                  if (typeof onChange === 'function') {
+                    onChange(item);
+                  }
+                },
+              },
+            },
+            item.text,
+          ),
+        ),
+      );
+    },
+  });
+}
diff --git a/app/assets/javascripts/listbox/redirect_behavior.js b/app/assets/javascripts/listbox/redirect_behavior.js
new file mode 100644
index 00000000000..7e0ea2c4dfd
--- /dev/null
+++ b/app/assets/javascripts/listbox/redirect_behavior.js
@@ -0,0 +1,22 @@
+import { initListbox } from '~/listbox';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+/**
+ * Instantiates GlListbox components with redirect behavior for tags created
+ * with the `gl_redirect_listbox_tag` HAML helper.
+ *
+ * NOTE: Do not import this script explicitly. Using `gl_redirect_listbox_tag`
+ * automatically injects the `redirect_listbox` bundle, which calls this
+ * function.
+ */
+export function initRedirectListboxBehavior() {
+  const elements = Array.from(document.querySelectorAll('.js-redirect-listbox'));
+
+  return elements.map((el) =>
+    initListbox(el, {
+      onChange({ href }) {
+        redirectTo(href);
+      },
+    }),
+  );
+}