Introduce display text for external medium links (#480)

app/assets/stylesheets/media.scss

@@ -328,4 +328,8 @@
 
 .tab-content > .active {
   visibility: visible;
+}
+
+.break-text-any-where {
+  word-break: break-all;
 }

app/controllers/media_controller.rb

@@ -501,6 +501,7 @@ def fill_reassign_modal
   def medium_params
     params.require(:medium).permit(:sort, :description, :video, :manuscript,
                                    :external_reference_link,
+                                   :external_link_description,
                                    :geogebra, :geogebra_app_name,
                                    :teachable_type, :teachable_id,
                                    :released, :text, :locale,

app/helpers/media_helper.rb

@@ -134,4 +134,11 @@ def edit_or_show_medium_path(medium)
     return edit_medium_path(medium) if current_user.can_edit?(medium)
     medium_path(medium)
   end
+
+  def external_link_description_not_empty(medium)
+    # Uses link display name if not empty, otherwise falls back to the
+    # link url itself.
+    return medium.external_link_description.empty?\
+      ? medium.external_reference_link : medium.external_link_description
+  end
 end

app/views/media/_external_link.html.erb

@@ -18,5 +18,12 @@
         <%= t('buttons.test') %>
       </button>
     </div>
+    <div class="col-12 mt-3 form-floating">
+      <%# TODO: Replace with floating label in Bootstrap5 %>
+      <%= f.label :external_link_description, t('basics.external_link_description') %>
+      <%= helpdesk(t('admin.medium.info.external_link_description'), false) %>
+      <%= f.text_field :external_link_description,
+                        class: 'form-control' %>
+    </div>
   </div>
 </div>

app/views/media/_external_link_card.html.erb

@@ -5,9 +5,10 @@
     </h5>
   </div>
   <div class="card-body text-center">
-    <%= link_to t('click_here'),
+    <%= link_to external_link_description_not_empty(medium),
                 medium.external_reference_link,
-                class: "btn btn-info",
+                class: "btn btn-info break-text-any-where",
+                title: medium.external_reference_link,
                 target: :_blank %>
   </div>
 </div>

app/views/media/medium/_buttons.html.erb

@@ -51,7 +51,7 @@
       <i class="material-icons text-secondary"
          data-toggle="tooltip"
          data-placement="bottom"
-         title="<%= t('external_link_lc') %>">
+         title="<%= external_link_description_not_empty(medium) %>">
         link
       </i>
     </a>

config/locales/de.yml

@@ -1175,8 +1175,10 @@ de:
           Informationen z.T. automatisch über die im THymE-editor hinterlegten
           Daten ausgelesen werden können.
         external_link: >
-          Externer Link, der einen Teil diese Mediums ausmacht.
+          Externer Link, der einen Teil dieses Mediums ausmacht.
           Das könnte z.B. ein Link auf das Stacks-Project sein.
+        external_link_description: >
+          Anzeigetext für den Button, der zum externen Link führt.
         access_rights: >
           Die Varianten von Zugriffsrechten sind möglich:
           <ul>
@@ -3181,6 +3183,7 @@ de:
     related_media: 'Verknüpfte Medien'
     related_questions: 'Verknüpfte Fragen'
     external_link: 'Externer Link'
+    external_link_description: 'Anzeigetext'
     editor: 'EditorIn'
     thyme: 'THymE'
     thyme_editor: 'Editor'

config/locales/en.yml

@@ -1113,6 +1113,8 @@ en:
         external_link: >
           External link that constitutes a part of the medium. E.g., this might
           be a link to the Stacks Project.
+        external_link_description: >
+          Display text for the button pointing to the external link.
         access_rights: >
           There are the following options:
           <ul>
@@ -2999,6 +3001,7 @@ en:
     related_media: 'Related media'
     related_questions: 'Related questions'
     external_link: 'External Link'
+    external_link_description: 'Display text'
     editor: 'Editor'
     thyme: 'THymE'
     thyme_editor: 'Editor'

db/migrate/20230427124337_add_external_reference_link_description_to_medium.rb

@@ -0,0 +1,5 @@
+class AddExternalReferenceLinkDescriptionToMedium < ActiveRecord::Migration[7.0]
+  def change
+    add_column :media, :external_link_description, :text
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2023_04_07_093205) do
+ActiveRecord::Schema[7.0].define(version: 2023_04_27_124337) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pgcrypto"
   enable_extension "plpgsql"
@@ -350,6 +350,7 @@
     t.datetime "released_at", precision: nil
     t.text "publisher"
     t.datetime "file_last_edited", precision: nil
+    t.text "external_link_description"
     t.index ["quizzable_type", "quizzable_id"], name: "index_media_on_quizzable_type_and_quizzable_id"
     t.index ["teachable_type", "teachable_id"], name: "index_media_on_teachable_type_and_teachable_id"
   end