Fix JS and copy of message

- Fix JS for dismissable message both when feature
flag is enabled and disabled
- Update message type from tip to info
- Update copy

app/views/admin/application_settings/integrations.html.haml

@@ -4,19 +4,19 @@
 
 - if Feature.enabled?(:instance_level_integrations)
   - if show_admin_integrations_moved?
-    .gl-alert.gl-alert-tip.js-admin-integrations-moved.mt-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::ADMIN_INTEGRATIONS_MOVED, dismiss_endpoint: user_callouts_path } }
-      = sprite_icon('bulb', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    .gl-alert.gl-alert-info.js-admin-integrations-moved.mt-3{ role: 'alert', data: { feature_id: UserCalloutsHelper::ADMIN_INTEGRATIONS_MOVED, dismiss_endpoint: user_callouts_path } }
+      = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
       %button.js-close.gl-alert-dismiss{ type: 'button', 'aria-label' => _('Dismiss') }
         = sprite_icon('close', size: 16, css_class: 'gl-icon')
       .gl-alert-body
-        %h4.gl-alert-title= _('Not finding all your integrations?')
-        = _('Elasticsearch, PlantUML,  Slack application,  Third party offers, Snowplow, Amazon EKS have moved to Settings > General.')
+        %h4.gl-alert-title= s_('AdminSettings|Some settings have moved')
+        = s_('AdminSettings|Elasticsearch, PlantUML, Slack application, Third party offers, Snowplow, Amazon EKS have moved to Settings > General.')
       .gl-alert-actions
-        = link_to _('Go to Settings'), admin_application_settings_path, class: 'btn gl-alert-action new-gl-button'
+        = link_to s_('AdminSettings|Go to General Settings'), admin_application_settings_path, class: 'btn gl-alert-action btn-info new-gl-button'
 
-  %h4= s_('Integrations|Apply integration settings to all Projects')
+  %h4= s_('AdminSettings|Apply integration settings to all Projects')
   %p
-    = s_('Integrations|Integrations configured here will automatically apply to all projects on this instance.')
+    = s_('AdminSettings|Integrations configured here will automatically apply to all projects on this instance.')
     = link_to _('Learn more'), '#'
   = render 'projects/services/integrations'
 

changelogs/unreleased/196525-admin-area-add-instance-level-integration-settings-ui.yml

+---
+title: Add Instance-Level Integration Settings UI
+merge_request: 25752
+author:
+type: added

ee/app/assets/javascripts/pages/admin/application_settings/integrations/index.js

@@ -2,6 +2,7 @@ import 'select2/select2';
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import Api from '~/api';
+import PersistentUserCallout from '~/persistent_user_callout';
 
 const onLimitCheckboxChange = (checked, $limitByNamespaces, $limitByProjects) => {
   $limitByNamespaces.find('.select2').select2('data', null);
@@ -37,6 +38,10 @@ const getDropdownConfig = (placeholder, apiPath, textProp) => ({
 });
 
 document.addEventListener('DOMContentLoaded', () => {
+  const callout = document.querySelector('.js-admin-integrations-moved');
+  PersistentUserCallout.factory(callout);
+
+  // ElasticSearch
   const $container = $('#js-elasticsearch-settings');
 
   $container

locale/gitlab.pot

@@ -1343,15 +1343,27 @@ msgstr ""
 msgid "AdminProjects|Delete project"
 msgstr ""
 
+msgid "AdminSettings|Apply integration settings to all Projects"
+msgstr ""
+
 msgid "AdminSettings|Auto DevOps domain"
 msgstr ""
 
+msgid "AdminSettings|Elasticsearch, PlantUML, Slack application, Third party offers, Snowplow, Amazon EKS have moved to Settings > General."
+msgstr ""
+
 msgid "AdminSettings|Enable shared runners for new projects"
 msgstr ""
 
 msgid "AdminSettings|Environment variables are protected by default"
 msgstr ""
 
+msgid "AdminSettings|Go to General Settings"
+msgstr ""
+
+msgid "AdminSettings|Integrations configured here will automatically apply to all projects on this instance."
+msgstr ""
+
 msgid "AdminSettings|No required pipeline"
 msgstr ""
 
@@ -1367,6 +1379,9 @@ msgstr ""
 msgid "AdminSettings|Set an instance-wide auto included %{link_start}pipeline configuration%{link_end}. This pipeline configuration will be run after the project's own configuration."
 msgstr ""
 
+msgid "AdminSettings|Some settings have moved"
+msgstr ""
+
 msgid "AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages."
 msgstr ""
 
@@ -10955,6 +10970,9 @@ msgstr ""
 msgid "Instance license"
 msgstr ""
 
+msgid "Integration"
+msgstr ""
+
 msgid "Integration Settings"
 msgstr ""