Add latest changes from gitlab-org/gitlab@master

2 files changed, 70 insertions, 11 deletions

diff --git a/app/assets/javascripts/crm/components/form.vue b/app/assets/javascripts/crm/components/form.vue
index 1725711d81f..72def54aedf 100644
--- a/app/assets/javascripts/crm/components/form.vue
+++ b/app/assets/javascripts/crm/components/form.vue
@@ -1,5 +1,5 @@
 <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)">
diff --git a/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue b/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue
index 58eaabfbb7f..f114ffedfe6 100644
--- a/app/assets/javascripts/crm/contacts/components/contact_form_wrapper.vue
+++ b/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"
   />