Use modal for feature flag configuration information

app/views/projects/feature_flags/_configure_feature_flags_modal.html.haml

+#configure-feature-flags-modal.modal{ tabindex: -1,
+  role: 'dialog' }
+  .modal-dialog{ role: 'document' }
+    .modal-content
+      .modal-header
+        %h5.modal-title
+          = s_('FeatureFlags|Configure feature flags')
+        %button.close{ type: 'button', data: { dismiss: 'modal' }, aria: { label: _('Close') } }
+          %span{ "aria-hidden": true } ×
+      .modal-body
+        %p
+          = s_('FeatureFlags|Install a compatible client library and specify the API URL, application name, and instance ID during the configuration setup.')
+          = link_to s_('FeatureFlags|More information'), '#'
+
+        .form-group
+          = label_tag :api_url, s_('FeatureFlags|API URL'), class: 'label-light'
+          .input-group
+            - unleash_api_url = "#{root_url(only_path: false)}api/v4/unleash"
+            = text_field_tag :api_url,
+              unleash_api_url,
+              readonly: true,
+              class: "form-control js-select-on-focus"
+            %span.input-group-append
+              = clipboard_button(target: '#api_url',
+                title: _("Copy URL to clipboard"),
+                placement: "left",
+                container: '#configure-feature-flags-modal',
+                class: "input-group-text btn btn-default")
+
+        .form-group
+          = label_tag :application_name, s_('FeatureFlags|Application name'), class: 'label-light'
+          .input-group
+            = text_field_tag :application_name,
+              @project.id,
+              readonly: true,
+              class: "form-control js-select-on-focus"
+            %span.input-group-append
+              = clipboard_button(target: '#application_name',
+                title: _("Copy name to clipboard"),
+                placement: "left",
+                container: '#configure-feature-flags-modal',
+                class: "input-group-text btn btn-default")
+
+        .form-group
+          = label_tag :instance_id, s_('FeatureFlags|Instance ID'), class: 'label-light'
+          .input-group
+            = text_field_tag :instance_id,
+              @unleash_instanceid,
+              readonly: true,
+              class: "form-control js-select-on-focus"
+            %span.input-group-append
+              = clipboard_button(target: '#instance_id',
+                title: _("Copy ID to clipboard"),
+                placement: "left",
+                container: '#configure-feature-flags-modal',
+                class: "input-group-text btn btn-default")

app/views/projects/feature_flags/_use.html.haml

-.card.bg-info
-  .card-header
-    Configure feature flags
-  .card-body
-    %p
-      Learn how to enable feature flags for your application.
-
-    %ol
-      %li
-        = _("Install a compatible with client library")
-        = (_("(checkout the %{link} for information on how to install it).") % { link: "here" }).html_safe
-      %li
-        = _("Specify the following URL during for the library configuration setup:")
-        %code#coordinator_address= "#{root_url(only_path: false)}api/v4/unleash"
-      %li
-        = _("Use the following application name:")
-        %code#registration_token= @project.id
-      %li
-        = _("Use the following application name:")
-        %code#registration_token= @unleash_instanceid
-      %li
-        = _("You can also see all features online:")
-        %code#registration_token= "#{root_url(only_path: false)}api/v4/unleash/features?appname=#{@project.id}&instanceid=#{@unleash_instanceid}"
\ No newline at end of file

app/views/projects/feature_flags/index.html.haml

@@ -3,14 +3,18 @@
 %h3.page-title.with-button
   Feature Flags
 
-  - if can?(current_user, :create_feature_flags, @project)
-    = link_to new_project_feature_flag_path(@project), class: 'btn btn-new float-right', title: 'New Feature Flag' do
-      New Feature Flag
+  .pull-right
+    %button.btn.btn-default{ type: 'button', data: { toggle: 'modal', target: '#configure-feature-flags-modal' } }
+      = s_('FeatureFlags|Configure')
+
+    - if can?(current_user, :create_feature_flags, @project)
+      = link_to new_project_feature_flag_path(@project), class: 'btn btn-new' do
+        = s_('FeatureFlags|New Feature Flag')
 
 %p.light
   With GitLab Feature Flags
 
 %hr.clearfix
 
-= render 'use'
+= render 'configure_feature_flags_modal'
 = render 'list'