Add latest changes from gitlab-org/gitlab@master

3 files changed, 60 insertions, 32 deletions

diff --git a/app/assets/javascripts/crm/components/contacts_root.vue b/app/assets/javascripts/crm/components/contacts_root.vue
index 180a450f839..7ff1d4fa1fd 100644
--- a/app/assets/javascripts/crm/components/contacts_root.vue
+++ b/app/assets/javascripts/crm/components/contacts_root.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAlert, GlButton, GlLoadingIcon, GlTable, GlTooltipDirective } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { s__, __ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import getGroupContactsQuery from './queries/get_group_contacts.query.graphql';
@@ -21,7 +22,6 @@ export default {
     return {
       contacts: [],
       error: false,
-      errorMessages: [],
     };
   },
   apollo: {
@@ -49,6 +49,9 @@ export default {
     showNewForm() {
       return this.$route.path.startsWith('/new');
     },
+    canCreateNew() {
+      return parseBoolean(this.canAdminCrmContact);
+    },
   },
   methods: {
     extractContacts(data) {
@@ -60,17 +63,11 @@ export default {
 
       this.$router.push({ path: '/new' });
     },
-    hideNewForm() {
+    hideNewForm(success) {
+      if (success) this.$toast.show(s__('Crm|Contact has been added'));
+
       this.$router.replace({ path: '/' });
     },
-    handleError(errors) {
-      this.error = true;
-      if (errors) this.errorMessages = errors;
-    },
-    dismissError() {
-      this.error = false;
-      this.errorMessages = [];
-    },
     getIssuesPath(path, value) {
       return `${path}?scope=all&state=opened&crm_contact_id=${value}`;
     },
@@ -108,9 +105,8 @@ export default {
 
 <template>
   <div>
-    <gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="dismissError">
-      <div v-if="errorMessages.length == 0">{{ $options.i18n.errorText }}</div>
-      <div v-for="(message, index) in errorMessages" :key="index">{{ message }}</div>
+    <gl-alert v-if="error" variant="danger" class="gl-mt-6" @dismiss="error = false">
+      {{ $options.i18n.errorText }}
     </gl-alert>
     <div
       class="gl-display-flex gl-align-items-baseline gl-flex-direction-row gl-justify-content-space-between gl-mt-6"
@@ -120,7 +116,7 @@ export default {
       </h2>
       <div class="gl-display-none gl-md-display-flex gl-align-items-center gl-justify-content-end">
         <gl-button
-          v-if="canAdminCrmContact"
+          v-if="canCreateNew"
           variant="confirm"
           data-testid="new-contact-button"
           @click="displayNewForm"
@@ -129,7 +125,7 @@ export default {
         </gl-button>
       </div>
     </div>
-    <new-contact-form v-if="showNewForm" @close="hideNewForm" @error="handleError" />
+    <new-contact-form v-if="showNewForm" :drawer-open="showNewForm" @close="hideNewForm" />
     <gl-loading-icon v-if="isLoading" class="gl-mt-5" size="lg" />
     <gl-table
       v-else
diff --git a/app/assets/javascripts/crm/components/new_contact_form.vue b/app/assets/javascripts/crm/components/new_contact_form.vue
index 77ff82c5af4..53e6bb1a123 100644
--- a/app/assets/javascripts/crm/components/new_contact_form.vue
+++ b/app/assets/javascripts/crm/components/new_contact_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlAlert, GlButton, GlDrawer, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { produce } from 'immer';
 import { __, s__ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
@@ -9,11 +9,19 @@ import getGroupContactsQuery from './queries/get_group_contacts.query.graphql';
 
 export default {
   components: {
+    GlAlert,
     GlButton,
+    GlDrawer,
     GlFormGroup,
     GlFormInput,
   },
   inject: ['groupFullPath', 'groupId'],
+  props: {
+    drawerOpen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   data() {
     return {
       firstName: '',
@@ -22,6 +30,7 @@ export default {
       email: '',
       description: '',
       submitting: false,
+      errorMessages: [],
     };
   },
   computed: {
@@ -48,24 +57,21 @@ export default {
           update: this.updateCache,
         })
         .then(({ data }) => {
-          if (data.customerRelationsContactCreate.errors.length === 0) this.close();
+          if (data.customerRelationsContactCreate.errors.length === 0) this.close(true);
 
           this.submitting = false;
         })
         .catch(() => {
-          this.error();
+          this.errorMessages = [__('Something went wrong. Please try again.')];
           this.submitting = false;
         });
     },
-    close() {
-      this.$emit('close');
-    },
-    error(errors = null) {
-      this.$emit('error', errors);
+    close(success) {
+      this.$emit('close', success);
     },
     updateCache(store, { data: { customerRelationsContactCreate } }) {
       if (customerRelationsContactCreate.errors.length > 0) {
-        this.error(customerRelationsContactCreate.errors);
+        this.errorMessages = customerRelationsContactCreate.errors;
         return;
       }
 
@@ -90,6 +96,15 @@ export default {
         data,
       });
     },
+    getDrawerHeaderHeight() {
+      const wrapperEl = document.querySelector('.content-wrapper');
+
+      if (wrapperEl) {
+        return `${wrapperEl.offsetTop}px`;
+      }
+
+      return '';
+    },
   },
   i18n: {
     buttonLabel: s__('Crm|Create new contact'),
@@ -99,12 +114,28 @@ export default {
     email: s__('Crm|Email'),
     phone: s__('Crm|Phone number (optional)'),
     description: s__('Crm|Description (optional)'),
+    title: s__('Crm|New Contact'),
   },
 };
 </script>
 
 <template>
-  <div class="col-md-4">
+  <gl-drawer
+    class="gl-drawer-responsive"
+    :open="drawerOpen"
+    :header-height="getDrawerHeaderHeight()"
+    @close="close(false)"
+  >
+    <template #title>
+      <h4>{{ $options.i18n.title }}</h4>
+    </template>
+    <gl-alert v-if="errorMessages.length" variant="danger" @dismiss="errorMessages = []">
+      <ul class="gl-mb-0! gl-ml-5">
+        <li v-for="error in errorMessages" :key="error">
+          {{ error }}
+        </li>
+      </ul>
+    </gl-alert>
     <form @submit.prevent="save">
       <gl-form-group :label="$options.i18n.firstName" label-for="contact-first-name">
         <gl-form-input id="contact-first-name" v-model="firstName" />
@@ -121,7 +152,10 @@ export default {
       <gl-form-group :label="$options.i18n.description" label-for="contact-description">
         <gl-form-input id="contact-description" v-model="description" />
       </gl-form-group>
-      <div class="form-actions">
+      <span class="gl-float-right">
+        <gl-button data-testid="cancel-button" @click="close(false)">
+          {{ $options.i18n.cancel }}
+        </gl-button>
         <gl-button
           variant="confirm"
           :disabled="invalid"
@@ -130,11 +164,7 @@ export default {
           type="submit"
           >{{ $options.i18n.buttonLabel }}</gl-button
         >
-        <gl-button data-testid="cancel-button" @click="close">
-          {{ $options.i18n.cancel }}
-        </gl-button>
-      </div>
+      </span>
     </form>
-    <div class="gl-pb-5"></div>
-  </div>
+  </gl-drawer>
 </template>
diff --git a/app/assets/javascripts/crm/contacts_bundle.js b/app/assets/javascripts/crm/contacts_bundle.js
index 6ddc53840cc..2362a593d45 100644
--- a/app/assets/javascripts/crm/contacts_bundle.js
+++ b/app/assets/javascripts/crm/contacts_bundle.js
@@ -1,3 +1,4 @@
+import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
@@ -6,6 +7,7 @@ import CrmContactsRoot from './components/contacts_root.vue';
 
 Vue.use(VueApollo);
 Vue.use(VueRouter);
+Vue.use(GlToast);
 
 export default () => {
   const el = document.getElementById('js-crm-contacts-app');