.eslintrc.yml

@@ -108,6 +108,8 @@ rules:
       message: 'Migrate to GlSkeletonLoader, or import GlDeprecatedSkeletonLoading.'
   # See https://gitlab.com/gitlab-org/gitlab/-/issues/360551
   vue/multi-word-component-names: off
+  unicorn/prefer-dom-node-dataset:
+    - error
 overrides:
   - files:
     - '{,ee/,jh/}spec/frontend*/**/*'

.gitlab/ci/global.gitlab-ci.yml

@@ -53,6 +53,7 @@
     - ${TMP_TEST_FOLDER}/gitaly/run2/
     - ${TMP_TEST_FOLDER}/gitaly/Makefile
     - ${TMP_TEST_FOLDER}/gitaly/praefect.config.toml
+    - ${TMP_TEST_FOLDER}/gitaly/praefect-db.config.toml
     - ${TMP_TEST_FOLDER}/gitaly/ruby/
   policy: pull
 

.gitlab/ci/rails.gitlab-ci.yml

@@ -25,6 +25,10 @@
 .single-db-rspec:
   extends: .single-db
 
+.praefect-with-db:
+  variables:
+    GITALY_PRAEFECT_WITH_DB: '1'
+
 .rspec-base:
   extends:
     - .rails-job-base
@@ -192,6 +196,7 @@ setup-test-env:
       - ${TMP_TEST_FOLDER}/gitaly/run2/
       - ${TMP_TEST_FOLDER}/gitaly/Makefile
       - ${TMP_TEST_FOLDER}/gitaly/praefect.config.toml
+      - ${TMP_TEST_FOLDER}/gitaly/praefect-db.config.toml
       - ${TMP_TEST_FOLDER}/gitaly/ruby/
       - ${TMP_TEST_FOLDER}/gitlab-elasticsearch-indexer/bin/gitlab-elasticsearch-indexer
       - ${TMP_TEST_FOLDER}/gitlab-shell/
@@ -262,6 +267,12 @@ rspec migration pg12 single-db:
     - .single-db-rspec
     - .rails:rules:single-db
 
+rspec migration pg12 praefect:
+  extends:
+    - rspec migration pg12
+    - .praefect-with-db
+    - .rails:rules:praefect-with-db
+
 rspec unit pg12:
   extends:
     - .rspec-base-pg12
@@ -280,6 +291,12 @@ rspec unit pg12 single-db:
     - .single-db-rspec
     - .rails:rules:single-db
 
+rspec unit pg12 praefect:
+  extends:
+    - rspec unit pg12
+    - .praefect-with-db
+    - .rails:rules:praefect-with-db
+
 rspec integration pg12:
   extends:
     - .rspec-base-pg12
@@ -298,6 +315,12 @@ rspec integration pg12 single-db:
     - .single-db-rspec
     - .rails:rules:single-db
 
+rspec integration pg12 praefect:
+  extends:
+    - rspec integration pg12
+    - .praefect-with-db
+    - .rails:rules:praefect-with-db
+
 rspec system pg12:
   extends:
     - .rspec-base-pg12
@@ -318,6 +341,12 @@ rspec system pg12 single-db:
     - .single-db-rspec
     - .rails:rules:single-db
 
+rspec system pg12 praefect:
+  extends:
+    - rspec system pg12
+    - .praefect-with-db
+    - .rails:rules:praefect-with-db
+
 # Dedicated job to test DB library code against PG11.
 # Note that these are already tested against PG12 in the `rspec unit pg12` / `rspec-ee unit pg12` jobs.
 rspec db-library-code pg11:

.gitlab/ci/review-apps/qa.gitlab-ci.yml

@@ -5,6 +5,12 @@ include:
       - /ci/allure-report.yml
       - /ci/knapsack-report.yml
 
+.bundler_variables:
+  variables:
+    BUNDLE_SUPPRESS_INSTALL_USING_MESSAGES: "true"
+    BUNDLE_SILENCE_ROOT_WARNING: "true"
+    BUNDLE_PATH: vendor
+
 .test_variables:
   variables:
     QA_DEBUG: "true"
@@ -21,16 +27,17 @@ include:
     - .use-docker-in-docker
     - .qa-cache
     - .test_variables
+    - .bundler_variables
   image: ${REGISTRY_HOST}/${REGISTRY_GROUP}/gitlab-build-images:debian-bullseye-ruby-2.7-bundler-2.3-git-2.33-lfs-2.9-chrome-99-docker-20.10.14-gcloud-383-kubectl-1.23
   stage: qa
-  needs: ["review-deploy"]
+  needs:
+    - review-deploy
+    - download-knapsack-report
   variables:
     DOCKER_HOST: tcp://docker:2376
     DOCKER_TLS_CERTDIR: /certs
     DOCKER_CERT_PATH: /certs/client
     DOCKER_TLS_VERIFY: 1
-    BUNDLE_SUPPRESS_INSTALL_USING_MESSAGES: "true"
-    BUNDLE_PATH: vendor
   before_script:
     - export EE_LICENSE="$(cat $REVIEW_APPS_EE_LICENSE_FILE)"
     - export QA_GITLAB_URL="$(cat environment_url.txt)"
@@ -71,11 +78,29 @@ include:
     ALLURE_MERGE_REQUEST_IID: $CI_MERGE_REQUEST_IID
     ALLURE_RESULTS_GLOB: qa/tmp/allure-results/*
 
+# Store knapsack report as artifact so the same report is reused across all jobs
+download-knapsack-report:
+  image: ${REGISTRY_HOST}/${REGISTRY_GROUP}/gitlab-build-images/debian-bullseye-ruby-2.7:bundler-2.3-git-2.33-chrome-99
+  extends:
+    - .qa-cache
+    - .bundler_variables
+    - .review:rules:review-qa-reliable
+  stage: prepare
+  before_script:
+    - cd qa && bundle install
+  script:
+    - QA_KNAPSACK_REPORT_NAME=review-qa-reliable bundle exec rake "knapsack:download"
+    - QA_KNAPSACK_REPORT_NAME=review-qa-all bundle exec rake "knapsack:download"
+  allow_failure: true
+  artifacts:
+    paths:
+      - qa/knapsack/review-qa-*.json
+    expire_in: 1 day
+
 review-qa-smoke:
   extends:
     - .review-qa-base
     - .review:rules:review-qa-smoke
-  retry: 1
   variables:
     QA_RUN_TYPE: review-qa-smoke
     RSPEC_TAGS: --tag smoke
@@ -84,7 +109,6 @@ review-qa-reliable:
   extends:
     - .review-qa-base
     - .review:rules:review-qa-reliable
-  retry: 1
   parallel: 10
   variables:
     QA_RUN_TYPE: review-qa-reliable
@@ -147,7 +171,7 @@ allure-report-qa-all:
   variables:
     ALLURE_JOB_NAME: review-qa-all
 
-knapsack-report:
+upload-knapsack-report:
   extends:
     - .generate-knapsack-report-base
   stage: post-qa

.gitlab/ci/rules.gitlab-ci.yml

@@ -961,6 +961,11 @@
       changes: *db-patterns
     - <<: *if-default-branch-schedule-nightly
 
+.rails:rules:praefect-with-db:
+  rules:
+    - if: '$CI_MERGE_REQUEST_LABELS =~ /pipeline:run-praefect-with-db/'
+      allow_failure: true
+
 .rails:rules:ee-and-foss-migration:
   rules:
     - <<: *if-fork-merge-request
@@ -1497,13 +1502,13 @@
 
 .reports:rules:gemnasium-dependency_scanning:
   rules:
-    - if: '$DEPENDENCY_SCANNING_DISABLED || $GITLAB_FEATURES !~ /\bdependency_scanning\b/ || $DS_EXCLUDED_ANALYZERS =~ /gemnasium([^-]|$)/ || $DS_DEFAULT_ANALYZERS !~ /gemnasium([^-]|$)/'
+    - if: '$DEPENDENCY_SCANNING_DISABLED || $GITLAB_FEATURES !~ /\bdependency_scanning\b/ || $DS_EXCLUDED_ANALYZERS =~ /gemnasium([^-]|$)/'
       when: never
     - changes: *dependency-patterns
 
 .reports:rules:gemnasium-python-dependency_scanning:
   rules:
-    - if: '$DEPENDENCY_SCANNING_DISABLED || $GITLAB_FEATURES !~ /\bdependency_scanning\b/ || $DS_EXCLUDED_ANALYZERS =~ /gemnasium-python/ || $DS_DEFAULT_ANALYZERS !~ /gemnasium-python/'
+    - if: '$DEPENDENCY_SCANNING_DISABLED || $GITLAB_FEATURES !~ /\bdependency_scanning\b/ || $DS_EXCLUDED_ANALYZERS =~ /gemnasium-python/'
       when: never
     - changes: *python-patterns
 

.gitlab/merge_request_templates/Removals.md

@@ -67,7 +67,7 @@ with the same process as regular docs MRs. Add suggestions as needed, @ message
 the PM to inform them the first review is complete, and remove
 yourself as a reviewer if it's not yet ready for merge.
 
-**Removal notices should not be merged before the code is removed from the product.** 
+**Removal notices should not be merged before the code is removed from the product.**
 
 <details>
 <summary>Expand for Details</summary>
@@ -75,7 +75,7 @@ yourself as a reviewer if it's not yet ready for merge.
 - [ ] Title:
   - Length limit: 7 words (not including articles or prepositions).
   - Capitalization: ensure the title is [sentence cased](https://design.gitlab.com/content/punctuation#case).
-  - No Markdown `` `code` `` formatting in the title, as it doesn't render correctly in the release post.
+  - Rewrite to exclude the words `removal` and `remove` if necessary.
 - [ ] Consistency:
   - Ensure that all resources (docs, removal, etc.) refer to the feature with the same term / feature name.
 - [ ] Content:

.rubocop_todo/database/multiple_databases.yml

 ---
 Database/MultipleDatabases:
   Exclude:
-    - 'config/application.rb'
     - 'config/initializers/active_record_data_types.rb'
-    - 'config/initializers/active_record_force_reconnects.rb'
-    - 'config/initializers/active_record_lifecycle.rb'
     - 'config/initializers/sidekiq.rb'
-    - 'config/initializers/validate_database_config.rb'
     - 'db/post_migrate/20210317104032_set_iteration_cadence_automatic_to_false.rb'
     - 'db/post_migrate/20210811122206_update_external_project_bots.rb'
     - 'db/post_migrate/20210812013042_remove_duplicate_project_authorizations.rb'
-    - 'ee/lib/tasks/geo.rake'
     - 'ee/spec/services/ee/merge_requests/update_service_spec.rb'
-    - 'lib/backup/database.rb'
     - 'lib/backup/manager.rb'
-    - lib/gitlab/background_migration/backfill_projects_with_coverage.rb
-    - lib/gitlab/background_migration/copy_ci_builds_columns_to_security_scans.rb
+    - 'lib/gitlab/background_migration/backfill_projects_with_coverage.rb'
+    - 'lib/gitlab/background_migration/copy_ci_builds_columns_to_security_scans.rb'
     - 'lib/gitlab/database.rb'
     - 'lib/gitlab/database/load_balancing/load_balancer.rb'
     - 'lib/gitlab/database/migrations/observers/query_log.rb'
-    - 'lib/tasks/dev.rake'
     - 'lib/tasks/gitlab/db/validate_config.rake'
     - 'spec/db/schema_spec.rb'
     - 'spec/initializers/database_config_spec.rb'

GITALY_SERVER_VERSION

-4729c4575139660a3aa945bd6df3c66996e26e0f
+60a7383d965aa6a8e69aa2e33a84792cde486cd3

app/assets/javascripts/behaviors/markdown/render_kroki.js

@@ -55,8 +55,8 @@ export function renderKroki(krokiImages) {
 
     // A single Kroki image is processed multiple times for some reason,
     // so this condition ensures we only create one alert per Kroki image
-    if (!parent.hasAttribute('data-kroki-processed')) {
-      parent.setAttribute('data-kroki-processed', 'true');
+    if (!Object.hasOwn(parent.dataset, 'krokiProcessed')) {
+      parent.dataset.krokiProcessed = 'true';
       parent.after(createAlert(krokiImage));
     }
   });

app/assets/javascripts/behaviors/markdown/render_math.js

@@ -110,7 +110,7 @@ class SafeMathRenderer {
 
       try {
         displayContainer.innerHTML = this.katex.renderToString(text, {
-          displayMode: el.getAttribute('data-math-style') === 'display',
+          displayMode: el.dataset.mathStyle === 'display',
           throwOnError: true,
           maxSize: 20,
           maxExpand: 20,
@@ -143,7 +143,7 @@ class SafeMathRenderer {
     this.elements.forEach((el) => {
       const placeholder = document.createElement('span');
       placeholder.style.display = 'none';
-      placeholder.setAttribute('data-math-style', el.getAttribute('data-math-style'));
+      placeholder.dataset.mathStyle = el.dataset.mathStyle;
       placeholder.textContent = el.textContent;
       el.parentNode.replaceChild(placeholder, el);
       this.queue.push(placeholder);

app/assets/javascripts/blob/blob_line_permalink_updater.js

@@ -9,10 +9,11 @@ const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
 
     [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
       const baseHref =
-        permalinkButton.getAttribute('data-original-href') ||
+        permalinkButton.dataset.originalHref ||
         (() => {
           const href = permalinkButton.getAttribute('href');
-          permalinkButton.setAttribute('data-original-href', href);
+          // eslint-disable-next-line no-param-reassign
+          permalinkButton.dataset.originalHref = href;
           return href;
         })();
       permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);

app/assets/javascripts/blob/viewer/index.js

@@ -36,19 +36,19 @@ const loadRichBlobViewer = (type) => {
 
 const loadViewer = (viewerParam) => {
   const viewer = viewerParam;
-  const url = viewer.getAttribute('data-url');
+  const { url } = viewer.dataset;
 
-  if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+  if (!url || viewer.dataset.loaded || viewer.dataset.loading) {
     return Promise.resolve(viewer);
   }
 
-  viewer.setAttribute('data-loading', 'true');
+  viewer.dataset.loading = 'true';
 
   return axios.get(url).then(({ data }) => {
     viewer.innerHTML = data.html;
 
     window.requestIdleCallback(() => {
-      viewer.removeAttribute('data-loading');
+      delete viewer.dataset.loading;
     });
 
     return viewer;
@@ -108,7 +108,7 @@ export class BlobViewer {
 
   switchToInitialViewer() {
     const initialViewer = this.$fileHolder[0].querySelector('.blob-viewer:not(.hidden)');
-    let initialViewerName = initialViewer.getAttribute('data-type');
+    let initialViewerName = initialViewer.dataset.type;
 
     if (this.switcher && window.location.hash.indexOf('#L') === 0) {
       initialViewerName = 'simple';
@@ -138,12 +138,12 @@ export class BlobViewer {
 
     e.preventDefault();
 
-    this.switchToViewer(target.getAttribute('data-viewer'));
+    this.switchToViewer(target.dataset.viewer);
   }
 
   toggleCopyButtonState() {
     if (!this.copySourceBtn) return;
-    if (this.simpleViewer.getAttribute('data-loaded')) {
+    if (this.simpleViewer.dataset.loaded) {
       this.copySourceBtnTooltip.setAttribute('title', __('Copy file contents'));
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
@@ -199,7 +199,8 @@ export class BlobViewer {
           this.$fileHolder.trigger('highlight:line');
           handleLocationHash();
 
-          viewer.setAttribute('data-loaded', 'true');
+          // eslint-disable-next-line no-param-reassign
+          viewer.dataset.loaded = 'true';
           this.toggleCopyButtonState();
           eventHub.$emit('showBlobInteractionZones', viewer.dataset.path);
         });

app/assets/javascripts/breadcrumb.js

@@ -5,7 +5,7 @@ export const addTooltipToEl = (el) => {
 
   if (textEl && textEl.scrollWidth > textEl.offsetWidth) {
     el.setAttribute('title', el.textContent);
-    el.setAttribute('data-container', 'body');
+    el.dataset.container = 'body';
     el.classList.add('has-tooltip');
   }
 };

app/assets/javascripts/code_navigation/utils/index.js

@@ -32,8 +32,8 @@ export const addInteractionClass = ({ path, d, wrapTextNodes }) => {
     });
 
     if (el && !isTextNode(el)) {
-      el.setAttribute('data-char-index', d.start_char);
-      el.setAttribute('data-line-index', d.start_line);
+      el.dataset.charIndex = d.start_char;
+      el.dataset.lineIndex = d.start_line;
       el.classList.add('cursor-pointer', 'code-navigation', 'js-code-navigation');
       el.closest('.line').classList.add('code-navigation-line');
     }

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -48,7 +48,6 @@ import Text from '../extensions/text';
 import Video from '../extensions/video';
 import WordBreak from '../extensions/word_break';
 import {
-  isPlainURL,
   renderCodeBlock,
   renderHardBreak,
   renderTable,
@@ -62,36 +61,29 @@ import {
   renderHTMLNode,
   renderContent,
   preserveUnchanged,
+  bold,
+  italic,
+  link,
+  code,
 } from './serialization_helpers';
 
 const defaultSerializerConfig = {
   marks: {
-    [Bold.name]: defaultMarkdownSerializer.marks.strong,
-    [Italic.name]: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
-    [Code.name]: defaultMarkdownSerializer.marks.code,
+    [Bold.name]: bold,
+    [Italic.name]: italic,
+    [Code.name]: code,
     [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
     [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
     [InlineDiff.name]: {
       mixable: true,
-      open(state, mark) {
+      open(_, mark) {
         return mark.attrs.type === 'addition' ? '{+' : '{-';
       },
-      close(state, mark) {
+      close(_, mark) {
         return mark.attrs.type === 'addition' ? '+}' : '-}';
       },
     },
-    [Link.name]: {
-      open(state, mark, parent, index) {
-        return isPlainURL(mark, parent, index, 1) ? '<' : '[';
-      },
-      close(state, mark, parent, index) {
-        const href = mark.attrs.canonicalSrc || mark.attrs.href;
-
-        return isPlainURL(mark, parent, index, -1)
-          ? '>'
-          : `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
-      },
-    },
+    [Link.name]: link,
     [MathInline.name]: {
       open: (...args) => `$${defaultMarkdownSerializer.marks.code.open(...args)}`,
       close: (...args) => `${defaultMarkdownSerializer.marks.code.close(...args)}$`,

app/assets/javascripts/content_editor/services/serialization_helpers.js

@@ -363,3 +363,120 @@ export function preserveUnchanged(render) {
     }
   };
 }
+
+const generateBoldTags = (open = true) => {
+  return (_, mark) => {
+    const type = /^(\*\*|__|<strong|<b).*/.exec(mark.attrs.sourceMarkdown)?.[1];
+
+    switch (type) {
+      case '**':
+      case '__':
+        return type;
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      case '<strong':
+      case '<b':
+        return (open ? openTag : closeTag)(type.substring(1));
+      default:
+        return '**';
+    }
+  };
+};
+
+export const bold = {
+  open: generateBoldTags(),
+  close: generateBoldTags(false),
+  mixable: true,
+  expelEnclosingWhitespace: true,
+};
+
+const generateItalicTag = (open = true) => {
+  return (_, mark) => {
+    const type = /^(\*|_|<em|<i).*/.exec(mark.attrs.sourceMarkdown)?.[1];
+
+    switch (type) {
+      case '*':
+      case '_':
+        return type;
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      case '<em':
+      case '<i':
+        return (open ? openTag : closeTag)(type.substring(1));
+      default:
+        return '_';
+    }
+  };
+};
+
+export const italic = {
+  open: generateItalicTag(),
+  close: generateItalicTag(false),
+  mixable: true,
+  expelEnclosingWhitespace: true,
+};
+
+const generateCodeTag = (open = true) => {
+  return (_, mark) => {
+    const type = /^(`|<code).*/.exec(mark.attrs.sourceMarkdown)?.[1];
+
+    if (type === '<code') {
+      return (open ? openTag : closeTag)(type.substring(1));
+    }
+
+    return '`';
+  };
+};
+
+export const code = {
+  open: generateCodeTag(),
+  close: generateCodeTag(false),
+  mixable: true,
+  expelEnclosingWhitespace: true,
+};
+
+const LINK_HTML = 'linkHtml';
+const LINK_MARKDOWN = 'linkMarkdown';
+
+const linkType = (sourceMarkdown) => {
+  const expression = /^(\[|<a).*/.exec(sourceMarkdown)?.[1];
+
+  if (!expression || expression === '[') {
+    return LINK_MARKDOWN;
+  }
+
+  return LINK_HTML;
+};
+
+export const link = {
+  open(state, mark, parent, index) {
+    if (isPlainURL(mark, parent, index, 1)) {
+      return '<';
+    }
+
+    const { canonicalSrc, href, title, sourceMarkdown } = mark.attrs;
+
+    if (linkType(sourceMarkdown) === LINK_MARKDOWN) {
+      return '[';
+    }
+
+    const attrs = { href: state.esc(href || canonicalSrc) };
+
+    if (title) {
+      attrs.title = title;
+    }
+
+    return openTag('a', attrs);
+  },
+  close(state, mark, parent, index) {
+    if (isPlainURL(mark, parent, index, -1)) {
+      return '>';
+    }
+
+    const { canonicalSrc, href, title, sourceMarkdown } = mark.attrs;
+
+    if (linkType(sourceMarkdown) === LINK_HTML) {
+      return closeTag('a');
+    }
+
+    return `](${state.esc(canonicalSrc || href)}${title ? ` ${state.quote(title)}` : ''})`;
+  },
+};

app/assets/javascripts/crm/components/form.vue

 <script>
-import { GlAlert, GlButton, GlDrawer, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlAlert, GlButton, GlDrawer, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
 import { get as getPropValueByPath, isEmpty } from 'lodash';
 import { produce } from 'immer';
 import { MountingPortal } from 'portal-vue';
@@ -28,6 +28,7 @@ export default {
     GlDrawer,
     GlFormGroup,
     GlFormInput,
+    GlFormSelect,
     MountingPortal,
   },
   props: {
@@ -136,15 +137,25 @@ export default {
   methods: {
     setInitialModel() {
       const existingModel = this.records.find(({ id }) => id === this.existingId);
+      const noModel = !this.isEditMode || !existingModel;
 
       this.model = this.fields.reduce(
         (map, field) =>
           Object.assign(map, {
-            [field.name]: !this.isEditMode || !existingModel ? null : existingModel[field.name],
+            [field.name]: noModel ? null : this.extractValue(existingModel, field.name),
           }),
         {},
       );
     },
+    extractValue(existingModel, fieldName) {
+      const value = existingModel[fieldName];
+      if (value != null) return value;
+
+      /* eslint-disable-next-line @gitlab/require-i18n-strings */
+      if (!fieldName.endsWith('Id')) return null;
+
+      return existingModel[fieldName.slice(0, -2)]?.id;
+    },
     formatValue(model, field) {
       if (!isEmpty(model[field.name]) && field.input?.type === 'number') {
         return parseFloat(model[field.name]);
@@ -256,7 +267,13 @@ export default {
           :label="getFieldLabel(field)"
           :label-for="field.name"
         >
-          <gl-form-input :id="field.name" v-bind="field.input" v-model="model[field.name]" />
+          <gl-form-select
+            v-if="field.values"
+            :id="field.name"
+            v-model="model[field.name]"
+            :options="field.values"
+          />
+          <gl-form-input v-else :id="field.name" v-bind="field.input" v-model="model[field.name]" />
         </gl-form-group>
         <span class="gl-float-right">
           <gl-button data-testid="cancel-button" @click="close(false)">

app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue

@@ -3,6 +3,7 @@ import { s__, __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_CRM_CONTACT, TYPE_GROUP } from '~/graphql_shared/constants';
 import ContactForm from '../../components/form.vue';
+import getGroupOrganizationsQuery from '../../organizations/components/graphql/get_group_organizations.query.graphql';
 import getGroupContactsQuery from './graphql/get_group_contacts.query.graphql';
 import createContactMutation from './graphql/create_contact.mutation.graphql';
 import updateContactMutation from './graphql/update_contact.mutation.graphql';
@@ -19,6 +20,26 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      organizations: [],
+    };
+  },
+  apollo: {
+    organizations: {
+      query() {
+        return getGroupOrganizationsQuery;
+      },
+      variables() {
+        return {
+          groupFullPath: this.groupFullPath,
+        };
+      },
+      update(data) {
+        return this.extractOrganizations(data);
+      },
+    },
+  },
   computed: {
     contactGraphQLId() {
       if (!this.isEditMode) return null;
@@ -52,14 +73,35 @@ export default {
     additionalCreateParams() {
       return { groupId: this.groupGraphQLId };
     },
+    fields() {
+      return [
+        { name: 'firstName', label: __('First name'), required: true },
+        { name: 'lastName', label: __('Last name'), required: true },
+        { name: 'email', label: __('Email'), required: true },
+        { name: 'phone', label: __('Phone') },
+        {
+          name: 'organizationId',
+          label: s__('Crm|Organization'),
+          values: this.organizationSelectValues,
+        },
+        { name: 'description', label: __('Description') },
+      ];
+    },
+    organizationSelectValues() {
+      const values = this.organizations.map((o) => {
+        return { value: o.id, text: o.name };
+      });
+
+      values.unshift({ value: null, text: s__('Crm|No organization') });
+      return values;
+    },
+  },
+  methods: {
+    extractOrganizations(data) {
+      const organizations = data?.group?.organizations?.nodes || [];
+      return organizations.slice().sort((a, b) => a.name.localeCompare(b.name));
+    },
   },
-  fields: [
-    { name: 'firstName', label: __('First name'), required: true },
-    { name: 'lastName', label: __('Last name'), required: true },
-    { name: 'email', label: __('Email'), required: true },
-    { name: 'phone', label: __('Phone') },
-    { name: 'description', label: __('Description') },
-  ],
 };
 </script>
 
@@ -71,7 +113,7 @@ export default {
     :mutation="mutation"
     :additional-create-params="additionalCreateParams"
     :existing-id="contactGraphQLId"
-    :fields="$options.fields"
+    :fields="fields"
     :title="title"
     :success-message="successMessage"
   />

app/assets/javascripts/deprecated_jquery_dropdown/render.js

@@ -107,10 +107,10 @@ function createLink(data, selected, options, index) {
   }
 
   if (options.trackSuggestionClickedLabel) {
-    link.setAttribute('data-track-action', 'click_text');
-    link.setAttribute('data-track-label', options.trackSuggestionClickedLabel);
-    link.setAttribute('data-track-value', index);
-    link.setAttribute('data-track-property', slugify(data.category || 'no-category'));
+    link.dataset.trackAction = 'click_text';
+    link.dataset.trackLabel = options.trackSuggestionClickedLabel;
+    link.dataset.trackValue = index;
+    link.dataset.trackProperty = slugify(data.category || 'no-category');
   }
 
   link.classList.toggle('is-active', selected);