Updated service desk settings copy

Added still supported email message
Updated UX

Removed merged duplicate component

app/assets/javascripts/projects/settings_service_desk/components/service_desk_root.vue

 <script>
 import { GlAlert } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import ServiceDeskSetting from './service_desk_setting.vue';
 import ServiceDeskService from '../services/service_desk_service';
 import eventHub from '../event_hub';
@@ -122,11 +122,13 @@ export default {
           this.incomingEmail = data?.service_desk_address;
           this.showAlert(__('Changes were successfully made.'), 'success');
         })
-        .catch(() =>
+        .catch(err => {
           this.showAlert(
-            __('An error occurred while saving the template. Please check if the template exists.'),
-          ),
-        )
+            sprintf(__('An error occured while making the changes: %{error}'), {
+              error: err?.response?.data?.message,
+            }),
+          );
+        })
         .finally(() => {
           this.isTemplateSaving = false;
         });

app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue

 <script>
-import { GlButton, GlFormSelect, GlToggle, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlFormSelect, GlToggle, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -17,6 +17,7 @@ export default {
     GlFormSelect,
     GlToggle,
     GlLoadingIcon,
+    GlSprintf,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -60,6 +61,7 @@ export default {
       selectedTemplate: this.initialSelectedTemplate,
       outgoingName: this.initialOutgoingName || __('GitLab Support Bot'),
       projectKey: this.initialProjectKey,
+      baseEmail: this.incomingEmail.replace(this.initialProjectKey, ''),
     };
   },
   computed: {
@@ -123,12 +125,33 @@ export default {
               />
             </div>
           </div>
+          <span v-if="projectKey" class="form-text text-muted">
+            <gl-sprintf :message="__('Emails sent to %{email} will still be supported')">
+              <template #email>
+                <code>{{ baseEmail }}</code>
+              </template>
+            </gl-sprintf>
+          </span>
         </template>
         <template v-else>
           <gl-loading-icon :inline="true" />
           <span class="sr-only">{{ __('Fetching incoming email') }}</span>
         </template>
 
+        <template v-if="hasProjectKeySupport">
+          <label for="service-desk-project-suffix" class="mt-3">
+            {{ __('Project name suffix') }}
+          </label>
+          <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" />
+          <span class="form-text text-muted">
+            {{
+              __(
+                'Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address.',
+              )
+            }}
+          </span>
+        </template>
+
         <label for="service-desk-template-select" class="mt-3">
           {{ __('Template to append to all Service Desk issues') }}
         </label>
@@ -144,27 +167,16 @@ export default {
         <span class="form-text text-muted">
           {{ __('Emails sent from Service Desk will have this name') }}
         </span>
-        <template v-if="hasProjectKeySupport">
-          <label for="service-desk-project-suffix" class="mt-3">
-            {{ __('Project name suffix') }}
-          </label>
-          <input id="service-desk-project-suffix" v-model.trim="projectKey" class="form-control" />
-          <span class="form-text text-muted mb-3">
-            {{
-              __(
-                'Project name suffix is a user-defined string which will be appended to the project path, and will form the Service Desk email address.',
-              )
-            }}
-          </span>
-        </template>
-        <gl-button
-          variant="success"
-          class="gl-mt-5"
-          :disabled="isTemplateSaving"
-          @click="onSaveTemplate"
-        >
-          {{ __('Save changes') }}
-        </gl-button>
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button
+            variant="success"
+            class="gl-mt-5"
+            :disabled="isTemplateSaving"
+            @click="onSaveTemplate"
+          >
+            {{ __('Save changes') }}
+          </gl-button>
+        </div>
       </div>
     </div>
   </div>

spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js

@@ -218,9 +218,7 @@ describe('ServiceDeskRoot', () => {
       .$nextTick()
       .then(waitForPromises)
       .then(() => {
-        expect(wrapper.html()).toContain(
-          'An error occurred while saving the template. Please check if the template exists.',
-        );
+        expect(wrapper.html()).toContain('An error occured while making the changes:');
       });
   });
 });