Issue #3228271 by e0ipso: Improve documentation links

modules/typed_entity_ui/assets/close.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="close.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="34.625"
+     inkscape:cx="12.577617"
+     inkscape:cy="11.98556"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     fill="none"
+     d="M 20,4 7.7780682,16.221932 4,20"
+     stroke="#000000"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path2"
+     style="fill:#e6e6e6;stroke:#e6e6e6"
+     sodipodi:nodetypes="ccc" />
+  <path
+     fill="none"
+     d="M4 4L20 20"
+     stroke="black"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     id="path4"
+     style="stroke:#e6e6e6" />
+</svg>

modules/typed_entity_ui/css/typed_entity_ui.admin.css

@@ -4,3 +4,38 @@ td.plugin-id span {
   border-radius: 3px;
   font-weight: bold;
 }
+
+#video-thumbnail {
+  position: relative;
+  float: right;
+  background-color: white;
+  border: 1px solid #DDD;
+  padding: 0;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
+  z-index: 1;
+  text-align: center;
+  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
+}
+#video-thumbnail a { display: block }
+#video-thumbnail .fake-button {
+  font-weight: bold;
+  padding: 1rem;
+}
+
+.hide-video {
+  position: absolute;
+  display: block;
+  width: 20px;
+  height: 20px;
+  top: 5px;
+  left: 325px;
+  overflow: hidden;
+  background-image: url('../assets/close.svg');
+}
+
+.hide-video,
+.hide-video:hover,
+.hide-video:visited {
+  color: rgba(0, 0, 0, 0);
+}

modules/typed_entity_ui/src/Controller/ExploreDetails.php

@@ -5,14 +5,18 @@ namespace Drupal\typed_entity_ui\Controller;
 use Drupal\Component\Plugin\Exception\PluginNotFoundException;
 use Drupal\Component\Plugin\PluginInspectionInterface;
 use Drupal\Component\Render\MarkupInterface;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\RemoveCommand;
 use Drupal\Core\Controller\ControllerBase;
 use Drupal\Core\Entity\EntityTypeBundleInfoInterface;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Url;
 use Drupal\typed_entity\Render\TypedEntityRendererBase;
 use Drupal\typed_entity\RepositoryManager;
 use Drupal\typed_entity\TypedRepositories\TypedRepositoryBase;
 use Drupal\typed_entity\TypedRepositories\TypedRepositoryInterface;
 use Drupal\typed_entity\WrappedEntities\WrappedEntityBase;
+use Drupal\typed_entity_ui\Form\ExploreForm;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
 /**
@@ -194,6 +198,7 @@ class ExploreDetails extends ControllerBase {
   protected function getNotFoundOutput(string $typed_entity_id): array {
     [$entity_type_label, $bundle_label] = $this->getLabels($typed_entity_id);
     return [
+      $this->state()->get('typed_entity_ui.hide_video_thumbnail', FALSE) ? [] : ExploreForm::getDocLinks(),
       [
         '#type' => 'html_tag',
         '#tag' => 'h2',
@@ -217,4 +222,17 @@ class ExploreDetails extends ControllerBase {
     ];
   }
 
+  /**
+   * Hides the video thumbnail for admin interfaces.
+   *
+   * @return \Drupal\Core\Ajax\AjaxResponse
+   */
+  public function hideVideo() {
+    // Remember decision.
+    $this->state()->set('typed_entity_ui.hide_video_thumbnail', TRUE);
+    $response = new AjaxResponse();
+    $response->addCommand(new RemoveCommand('#video-thumbnail'));
+    return $response;
+  }
+
 }

modules/typed_entity_ui/src/Form/ExploreForm.php

@@ -9,6 +9,8 @@ use Drupal\Core\Entity\EntityTypeInterface;
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Form\FormBase;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\State\StateInterface;
+use Drupal\Core\Url;
 use Drupal\typed_entity\RepositoryManager;
 use Drupal\typed_entity\TypedRepositories\TypedRepositoryBase;
 use Drupal\typed_entity\TypedRepositoryPluginManager;
@@ -45,7 +47,14 @@ class ExploreForm extends FormBase {
   protected $repositoryManager;
 
   /**
-   * Constructs a new Explore form form.
+   * The state service.
+   *
+   * @var \Drupal\Core\State\StateInterface
+   */
+  private $state;
+
+  /**
+   * Constructs a new Explore form.
    *
    * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
    *   The entity type manager.
@@ -53,11 +62,14 @@ class ExploreForm extends FormBase {
    *   The entity type bundle info service for discovering entity type bundles.
    * @param \Drupal\typed_entity\RepositoryManager $repository_manager
    *   The plugin manager.
+   * @param \Drupal\Core\State\StateInterface $state
+   *   The state interface.
    */
-  public function __construct(EntityTypeManagerInterface $entityTypeManager, EntityTypeBundleInfoInterface $bundleInfo, RepositoryManager $repository_manager) {
+  public function __construct(EntityTypeManagerInterface $entityTypeManager, EntityTypeBundleInfoInterface $bundleInfo, RepositoryManager $repository_manager, StateInterface $state) {
     $this->entityTypeManager = $entityTypeManager;
     $this->bundleInfo = $bundleInfo;
     $this->repositoryManager = $repository_manager;
+    $this->state = $state;
   }
 
   /**
@@ -67,7 +79,8 @@ class ExploreForm extends FormBase {
     return new static(
       $container->get('entity_type.manager'),
       $container->get('entity_type.bundle.info'),
-      $container->get(RepositoryManager::class)
+      $container->get(RepositoryManager::class),
+      $container->get('state')
     );
   }
 
@@ -90,6 +103,10 @@ class ExploreForm extends FormBase {
       return $carry;
     }, []);
 
+    if ($this->state && !$this->state->get('typed_entity_ui.hide_video_thumbnail', FALSE)) {
+      $form['doc_links'] = static::getDocLinks();
+    };
+
     $form['entity_type_id'] = [
       '#title' => $this->t('Entity Type'),
       '#type' => 'select',
@@ -210,4 +227,46 @@ class ExploreForm extends FormBase {
     );
   }
 
+  /**
+   * Generates the render array for the documentation links.
+   *
+   * @return array
+   *   The render array.
+   */
+  public static function getDocLinks(): array {
+    return [
+      '#type' => 'container',
+      '#attributes' => ['id' => 'video-thumbnail'],
+      [
+        '#type' => 'link',
+        '#url' => Url::fromUri('https://video.mateuaguilo.com/w/exgsNqCSQZ6antJXjDGXc9'),
+        '#title' => [
+          '#theme' => 'image',
+          '#uri' => drupal_get_path('module', 'typed_entity_ui') . '/assets/video-series.png',
+          '#alt' => 'Screenshot of the video preview',
+          '#width' => '350',
+        ],
+        '#attributes' => ['target' => '_blank'],
+      ],
+      [
+        '#type' => 'link',
+        '#url' => Url::fromUri('https://www.lullabot.com/articles/write-better-code-typed-entity'),
+        '#title' => t('Read it in text form.'),
+        '#attributes' => ['class' => ['fake-button'], 'target' => '_blank'],
+      ],
+      [
+        '#type' => 'link',
+        '#url' => Url::fromRoute('typed_entity_ui.hide_video'),
+        '#title' => t('Hide this.'),
+        '#attributes' => ['class' => ['use-ajax', 'hide-video']],
+        '#attached' => [
+          'library' => [
+            'core/drupal.ajax',
+            'typed_entity_ui/admin',
+          ],
+        ],
+      ],
+    ];
+  }
+
 }

modules/typed_entity_ui/src/Form/RepositoryTable/BuildRepositoryTableService.php

@@ -29,8 +29,8 @@ class BuildRepositoryTableService {
       '#title' => $this->t('Available Typed Repositories'),
       '#rows' => $this->buildRows($request->getAllTypedRepositories()),
       '#empty' => $this->t(
-        'There are no typed repositories yet. Check the <a href="!link">documentation</a> to learn how to create one.',
-        ['!link' => 'https://www.drupal.org/project/typed_entity']
+        'There are no typed repositories yet. Check the <a href="@link">documentation</a> to learn how to create one.',
+        ['@link' => 'https://www.drupal.org/project/typed_entity']
       ),
 //      '#cache' => [
 //        'contexts' => $this->entityType->getListCacheContexts(),

modules/typed_entity_ui/typed_entity_ui.info.yml

@@ -2,3 +2,5 @@ name: Typed Entity UI
 description: Adds a helper UI to the Typed Entity module to understand class hierarchy.
 type: module
 core_version_requirement: ^8 || ^9
+dependencies:
+  - typed_entity:typed_entity

modules/typed_entity_ui/typed_entity_ui.install

+<?php
+
+/**
+ * @file
+ * Module install file.
+ */
+
+/**
+ * Implements hook_uninstall().
+ */
+function typed_entity_ui_uninstall($is_syncing) {
+  \Drupal::state()->delete('typed_entity_ui.hide_video_thumbnail');
+}

modules/typed_entity_ui/typed_entity_ui.routing.yml

@@ -13,3 +13,10 @@ typed_entity_ui.details:
     _title_callback: '\Drupal\typed_entity_ui\Controller\ExploreDetails::title'
   requirements:
     _permission: 'explore typed entity classes'
+
+typed_entity_ui.hide_video:
+  path: '/admin/config/development/typed-entity/hide-video'
+  defaults:
+    _controller: '\Drupal\typed_entity_ui\Controller\ExploreDetails::hideVideo'
+  requirements:
+    _permission: 'access content'