Issue #3441100 by markconroy, finnsky, plopesc, smustgrave, gxleano, ckrina,...

Issue #3441100 by markconroy, finnsky, plopesc, smustgrave, gxleano, ckrina, codeenigma: Integrate Umami message

core/modules/navigation/assets/icons/radioactive.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M92,136H40a16,16,0,0,1-11.76-5.21,16.21,16.21,0,0,1-4.17-12.37A103.83,103.83,0,0,1,67.65,42.93,16,16,0,0,1,90.75,48l26,45a8,8,0,1,1-13.86,8L76.89,56A87.83,87.83,0,0,0,40,119.86a.19.19,0,0,0,.07.16L92,120a8,8,0,0,1,0,16Zm139.93-17.58a103.83,103.83,0,0,0-43.58-75.49A16,16,0,0,0,165.25,48L139.3,93a8,8,0,0,0,13.86,8l26-45A87.87,87.87,0,0,1,216,119.86c0,.07,0,.12,0,.14H164a8,8,0,0,0,0,16h52a16,16,0,0,0,11.76-5.21A16.21,16.21,0,0,0,231.93,118.42Zm-79,36.76a8,8,0,1,0-13.86,8l25.84,44.73a88.22,88.22,0,0,1-73.81,0l25.83-44.73a8,8,0,1,0-13.86-8L77.25,199.91a16,16,0,0,0,7.12,22.52,104.24,104.24,0,0,0,87.26,0,16,16,0,0,0,7.12-22.52ZM128,140a12,12,0,1,0-12-12A12,12,0,0,0,128,140Z"></path></svg>
\ No newline at end of file

core/modules/navigation/assets/icons/warning.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>
\ No newline at end of file

core/modules/navigation/css/components/toolbar-message.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/* cspell:ignore wght */
+
+.toolbar-message {
+  --icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M13.125 16.875C13.125 17.0975 13.059 17.315 12.9354 17.5C12.8118 17.685 12.6361 17.8292 12.4305 17.9144C12.225 17.9995 11.9988 18.0218 11.7805 17.9784C11.5623 17.935 11.3618 17.8278 11.2045 17.6705C11.0472 17.5132 10.94 17.3127 10.8966 17.0945C10.8532 16.8762 10.8755 16.65 10.9606 16.4445C11.0458 16.2389 11.19 16.0632 11.375 15.9396C11.56 15.816 11.7775 15.75 12 15.75C12.2984 15.75 12.5845 15.8685 12.7955 16.0795C13.0065 16.2905 13.125 16.5766 13.125 16.875ZM12 6.75C9.93188 6.75 8.25 8.26406 8.25 10.125V10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61033 11.171 8.80109 11.25 9 11.25C9.19892 11.25 9.38968 11.171 9.53033 11.0303C9.67099 10.8897 9.75 10.6989 9.75 10.5V10.125C9.75 9.09375 10.7597 8.25 12 8.25C13.2403 8.25 14.25 9.09375 14.25 10.125C14.25 11.1562 13.2403 12 12 12C11.8011 12 11.6103 12.079 11.4697 12.2197C11.329 12.3603 11.25 12.5511 11.25 12.75V13.5C11.25 13.6989 11.329 13.8897 11.4697 14.0303C11.6103 14.171 11.8011 14.25 12 14.25C12.1989 14.25 12.3897 14.171 12.5303 14.0303C12.671 13.8897 12.75 13.6989 12.75 13.5V13.4325C14.46 13.1184 15.75 11.7544 15.75 10.125C15.75 8.26406 14.0681 6.75 12 6.75ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96452 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7662 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z' fill='currentColor'/%3e%3c/svg%3e");
+
+  z-index: 1;
+  display: flex;
+  align-items: start;
+  cursor: pointer;
+  text-align: start;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  word-break: break-word;
+  color: var(--admin-toolbar-color-gray-800);
+  border: 0;
+  border-radius: var(--admin-toolbar-space-8);
+  background-color: var(--admin-toolbar-color-gray-050);
+  font-size: var(--admin-toolbar-font-size-info-sm);
+  line-height: var(--admin-toolbar-line-height-info-sm);
+  padding-inline: calc(0.75 * var(--admin-toolbar-rem));
+  padding-block: calc(0.75 * var(--admin-toolbar-rem));
+  font-variation-settings: "wght" 700;
+  gap: calc(0.5 * var(--admin-toolbar-rem));
+}
+
+.toolbar-message::before {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  content: attr(data-icon-text);
+  color: currentColor;
+  background-image: linear-gradient(currentColor, currentColor 50%, transparent 50%);
+  background-position-y: calc(100% - (100% * var(--icon, 0)));
+  background-size: 100% 200%;
+  font-size: calc(0.75 * var(--admin-toolbar-rem));
+  inline-size: var(--admin-toolbar-space-20);
+  block-size: var(--admin-toolbar-space-20);
+  mask-repeat: no-repeat;
+  mask-position: center center;
+  mask-size: 100% auto;
+  mask-image: var(--icon);
+}
+
+.toolbar-message--type--error {
+  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3e%3cpath d='M92,136H40a16,16,0,0,1-11.76-5.21,16.21,16.21,0,0,1-4.17-12.37A103.83,103.83,0,0,1,67.65,42.93,16,16,0,0,1,90.75,48l26,45a8,8,0,1,1-13.86,8L76.89,56A87.83,87.83,0,0,0,40,119.86a.19.19,0,0,0,.07.16L92,120a8,8,0,0,1,0,16Zm139.93-17.58a103.83,103.83,0,0,0-43.58-75.49A16,16,0,0,0,165.25,48L139.3,93a8,8,0,0,0,13.86,8l26-45A87.87,87.87,0,0,1,216,119.86c0,.07,0,.12,0,.14H164a8,8,0,0,0,0,16h52a16,16,0,0,0,11.76-5.21A16.21,16.21,0,0,0,231.93,118.42Zm-79,36.76a8,8,0,1,0-13.86,8l25.84,44.73a88.22,88.22,0,0,1-73.81,0l25.83-44.73a8,8,0,1,0-13.86-8L77.25,199.91a16,16,0,0,0,7.12,22.52,104.24,104.24,0,0,0,87.26,0,16,16,0,0,0,7.12-22.52ZM128,140a12,12,0,1,0-12-12A12,12,0,0,0,128,140Z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.toolbar-message--type--warning {
+  --icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3e%3cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+html:not([data-admin-toolbar="expanded"]) .toolbar-message__label {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  opacity: 0;
+}
+
+html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-message__label {
+  display: none;
+}

core/modules/navigation/css/components/toolbar-message.pcss.css

+/* cspell:ignore wght */
+
+.toolbar-message {
+  --icon: url(../../components/toolbar-button/assets/help.svg);
+
+  z-index: 1;
+  display: flex;
+  align-items: start;
+  cursor: pointer;
+  text-align: start;
+  text-decoration: none;
+  word-break: break-word;
+  color: var(--admin-toolbar-color-gray-800);
+  border: 0;
+  border-radius: var(--admin-toolbar-space-8);
+  background-color: var(--admin-toolbar-color-gray-050);
+  font-size: var(--admin-toolbar-font-size-info-sm);
+  line-height: var(--admin-toolbar-line-height-info-sm);
+  padding-inline: calc(0.75 * var(--admin-toolbar-rem));
+  padding-block: calc(0.75 * var(--admin-toolbar-rem));
+  font-variation-settings: "wght" 700;
+  gap: calc(0.5 * var(--admin-toolbar-rem));
+
+  &::before {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    content: attr(data-icon-text);
+    color: currentColor;
+    background-image: linear-gradient(currentColor, currentColor 50%, transparent 50%);
+    background-position-y: calc(100% - (100% * var(--icon, 0)));
+    background-size: 100% 200%;
+    font-size: calc(0.75 * var(--admin-toolbar-rem));
+    inline-size: var(--admin-toolbar-space-20);
+    block-size: var(--admin-toolbar-space-20);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-size: 100% auto;
+    mask-image: var(--icon);
+  }
+}
+
+.toolbar-message--type--error {
+  --icon: url(../../assets/icons/radioactive.svg);
+}
+
+.toolbar-message--type--warning {
+  --icon: url(../../assets/icons/warning.svg);
+}
+
+html:not([data-admin-toolbar="expanded"]) .toolbar-message__label {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  opacity: 0;
+}
+
+html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-message__label {
+  display: none;
+}

core/modules/navigation/navigation.libraries.yml

@@ -38,6 +38,15 @@ internal.navigation-workspaces:
   dependencies:
     - navigation/internal.navigation
 
+internal.navigation-messages:
+  # Internal library. Do not depend on it outside core nor add core usage
+  # beyond the Navigation module.
+  css:
+    theme:
+      css/components/toolbar-message.css: { }
+  dependencies:
+    - navigation/internal.navigation
+
 admin-reset-styles:
   css:
     base:

core/modules/navigation/src/Hook/NavigationHooks.php

@@ -99,6 +99,19 @@ public function theme($existing, $type, $theme, $path) : array {
         'items' => [],
       ],
     ];
+    $items['navigation__messages'] = [
+      'variables' => [
+        'message_list' => NULL,
+      ],
+    ];
+    $items['navigation__message'] = [
+      'variables' => [
+        'attributes' => [],
+        'url' => NULL,
+        'content' => NULL,
+        'type' => 'status',
+      ],
+    ];
     return $items;
   }
 

core/modules/navigation/templates/navigation--message.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display a single message in the navigation toolbar.
+ *
+ * Available variables:
+ * - content: The message to display.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'toolbar-message',
+    'toolbar-message--type--' ~ type,
+  ]
+%}
+
+{% if url is not empty %}
+  <a {{ attributes.addClass(classes).setAttribute('href', url).setAttribute('data-drupal-tooltip', content).setAttribute('data-drupal-tooltip-class', 'admin-toolbar__tooltip') }}>
+    <div class="toolbar-message__label">
+      {{ content }}
+    </div>
+  </a>
+{% else %}
+  <div {{ attributes.addClass(classes) }}>
+    <div class="toolbar-message__label">
+      {{ content }}
+    </div>
+  </div>
+{% endif %}

core/modules/navigation/templates/navigation--messages.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display messages in the navigation toolbar.
+ *
+ * Available variables:
+ * - messages: An array containing the messages to display.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('navigation/internal.navigation-messages') }}
+<div class="toolbar-block__list">
+  {% for message in message_list %}
+    {{ message }}
+  {% endfor %}
+</div>

core/profiles/demo_umami/src/Hook/DemoUmamiHooks.php

@@ -3,9 +3,14 @@
 namespace Drupal\demo_umami\Hook;
 
 use Drupal\contact\Entity\ContactForm;
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Extension\ModuleHandlerInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Hook\Attribute\Hook;
+use Drupal\Core\Routing\AdminContext;
 use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Session\AccountInterface;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
 use Drupal\Core\Url;
 
 /**
@@ -13,6 +18,28 @@
  */
 class DemoUmamiHooks {
 
+  use StringTranslationTrait;
+
+  /**
+   * DemoUmamiHooks constructor.
+   *
+   * @param \Drupal\Core\Extension\ModuleHandlerInterface $moduleHandler
+   *   The module handler.
+   * @param \Drupal\Core\Session\AccountInterface $currentUser
+   *   The current user.
+   * @param \Drupal\Core\Routing\AdminContext $adminContext
+   *   The admin context.
+   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
+   *   The entity type manager.
+   */
+  public function __construct(
+    protected ModuleHandlerInterface $moduleHandler,
+    protected AccountInterface $currentUser,
+    protected AdminContext $adminContext,
+    protected EntityTypeManagerInterface $entityTypeManager,
+  ) {
+  }
+
   /**
    * Implements hook_help().
    */
@@ -21,15 +48,15 @@ public function help($route_name, RouteMatchInterface $route_match): string {
     $output = '';
     switch ($route_name) {
       case 'help.page.demo_umami':
-        $output .= '<h2>' . t('About') . '</h2>';
-        $output .= '<p>' . t('Umami is an example food magazine website that demonstrates some of the features of Drupal core. It is intended to be used as an example site, rather than as a foundation for building your own site. For more information, see the <a href=":demo_umami">online documentation for the Umami installation profile</a>.', [':demo_umami' => 'https://www.drupal.org/node/2941833']) . '</p>';
-        $output .= '<h2>' . t('Uses') . '</h2>';
-        $output .= '<h3>' . t('Demonstrating Drupal core functionality') . '</h3>';
-        $output .= '<p>' . t('You can look around the site to get ideas for what kinds of features Drupal is capable of, and to see how an actual site can be built using Drupal core.') . '</p>';
-        $output .= '<h3>' . t('Sample content') . '</h3>';
-        $output .= '<p>' . t('The Umami profile is very handy if you are developing a feature and need some sample content.') . '</p>';
-        $output .= '<h2>' . t('What to do when you are ready to build your Drupal website') . '</h2>';
-        $output .= '<p>' . t("Once you've tried Drupal using Umami and want to build your own site, simply reinstall Drupal and select a different installation profile (such as Standard) from the install screen.") . '</p>';
+        $output .= '<h2>' . $this->t('About') . '</h2>';
+        $output .= '<p>' . $this->t('Umami is an example food magazine website that demonstrates some of the features of Drupal core. It is intended to be used as an example site, rather than as a foundation for building your own site. For more information, see the <a href=":demo_umami">online documentation for the Umami installation profile</a>.', [':demo_umami' => 'https://www.drupal.org/node/2941833']) . '</p>';
+        $output .= '<h2>' . $this->t('Uses') . '</h2>';
+        $output .= '<h3>' . $this->t('Demonstrating Drupal core functionality') . '</h3>';
+        $output .= '<p>' . $this->t('You can look around the site to get ideas for what kinds of features Drupal is capable of, and to see how an actual site can be built using Drupal core.') . '</p>';
+        $output .= '<h3>' . $this->t('Sample content') . '</h3>';
+        $output .= '<p>' . $this->t('The Umami profile is very handy if you are developing a feature and need some sample content.') . '</p>';
+        $output .= '<h2>' . $this->t('What to do when you are ready to build your Drupal website') . '</h2>';
+        $output .= '<p>' . $this->t("Once you've tried Drupal using Umami and want to build your own site, simply reinstall Drupal and select a different installation profile (such as Standard) from the install screen.") . '</p>';
     }
 
     return $output;
@@ -78,9 +105,8 @@ public function toolbar(): array {
     ];
 
     // Show warning only on administration pages.
-    $admin_context = \Drupal::service('router.admin_context');
-    if ($admin_context->isAdminRoute()) {
-      $link_to_help_page = \Drupal::moduleHandler()->moduleExists('help') && \Drupal::currentUser()->hasPermission('access help pages');
+    if ($this->adminContext->isAdminRoute()) {
+      $link_to_help_page = $this->moduleHandler->moduleExists('help') && $this->currentUser->hasPermission('access help pages');
       $items['experimental-profile-warning']['#type'] = 'toolbar_item';
       $items['experimental-profile-warning']['tab'] = [
         '#type' => 'inline_template',
@@ -103,13 +129,14 @@ public function toolbar(): array {
    * Sets the password of admin to be the password for all users.
    */
   public function setUserPasswords(#[\SensitiveParameter] $admin_password): void {
+    $user_storage = $this->entityTypeManager->getStorage('user');
     // Collect the IDs of all users with roles editor or author.
-    $ids = \Drupal::entityQuery('user')
+    $ids = $user_storage->getQuery()
       ->accessCheck(FALSE)
       ->condition('roles', ['author', 'editor'], 'IN')
       ->execute();
 
-    $users = \Drupal::entityTypeManager()->getStorage('user')->loadMultiple($ids);
+    $users = $user_storage->loadMultiple($ids);
 
     foreach ($users as $user) {
       $user->setPassword($admin_password);
@@ -117,4 +144,51 @@ public function setUserPasswords(#[\SensitiveParameter] $admin_password): void {
     }
   }
 
+  /**
+   * Implements hook_navigation_content_top().
+   */
+  #[Hook('navigation_content_top')]
+  public function navigationContentTop(): array {
+    // Add a warning about using an experimental profile.
+    // @todo This can be removed once a generic warning for experimental
+    //   profiles has been introduced.
+    //   https://www.drupal.org/project/drupal/issues/2934374
+    $build = [
+      'experimental-profile-warning' => [
+        '#weight' => 3400,
+        '#cache' => [
+          'contexts' => [
+            'route',
+            'user.permissions',
+          ],
+        ],
+      ],
+    ];
+
+    // Show warning only on administration pages.
+    if (!$this->adminContext->isAdminRoute()) {
+      return $build;
+    }
+
+    $link_to_help_page = $this->moduleHandler->moduleExists('help') && $this->currentUser->hasPermission('access help pages');
+    $url = $link_to_help_page ? Url::fromRoute('help.page', ['name' => 'demo_umami'])->toString()
+      : 'https://www.drupal.org/node/2941833';
+
+    $build['experimental-profile-warning'] += [
+      '#theme' => 'navigation__messages',
+      '#message_list' => [
+        [
+          '#theme' => 'navigation__message',
+          '#content' => [
+            '#markup' => $this->t('This site is intended for demonstration purposes.'),
+          ],
+          '#url' => $url,
+          '#type' => 'warning',
+        ],
+      ],
+    ];
+
+    return $build;
+  }
+
 }

core/profiles/demo_umami/tests/src/Functional/DemoUmamiProfileTest.php

@@ -213,40 +213,23 @@ protected function testDemonstrationWarningMessage(): void {
       'create recipe content',
       'use editorial transition create_new_draft',
     ];
-    $account = $this->drupalCreateUser($permissions);
-    $this->drupalLogin($account);
-    $web_assert = $this->assertSession();
-
-    $nodes = $this->container->get('entity_type.manager')
-      ->getStorage('node')
-      ->loadByProperties(['title' => 'Deep mediterranean quiche']);
-    /** @var \Drupal\node\Entity\Node $recipe_node */
-    $recipe_node = reset($nodes);
-
-    // Check when editing a node, the warning is visible.
-    $this->drupalGet($recipe_node->toUrl('edit-form'));
-    $web_assert->statusCodeEquals(200);
-    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
-
-    // Check when adding a node, the warning is visible.
-    $this->drupalGet('node/add/recipe');
-    $web_assert->statusCodeEquals(200);
-    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
-
-    // Check when looking at admin/content, the warning is visible.
-    $this->drupalGet('admin/content');
-    $web_assert->statusCodeEquals(200);
-    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
-
-    // Check when viewing a node, the warning is not visible.
-    $this->drupalGet($recipe_node->toUrl());
-    $web_assert->statusCodeEquals(200);
-    $web_assert->pageTextNotContains('This site is intended for demonstration purposes.');
+    $this->assertDemonstrationWarningMessage($permissions);
+  }
 
-    // Check when viewing the homepage, the warning is not visible.
-    $this->drupalGet('<front>');
-    $web_assert->statusCodeEquals(200);
-    $web_assert->pageTextNotContains('This site is intended for demonstration purposes.');
+  /**
+   * Tests that the navigation warning only appears on the admin pages.
+   */
+  protected function testNavigationDemonstrationWarningMessage(): void {
+    \Drupal::service('module_installer')->install(['navigation']);
+    $permissions = [
+      'access content overview',
+      'access navigation',
+      'administer nodes',
+      'edit any recipe content',
+      'create recipe content',
+      'use editorial transition create_new_draft',
+    ];
+    $this->assertDemonstrationWarningMessage($permissions);
   }
 
   /**
@@ -297,4 +280,47 @@ protected function drupalLoginWithPassword(AccountInterface $account, $password)
     $this->container->get('current_user')->setAccount($account);
   }
 
+  /**
+   * Asserts if the demonstration warning message is displayed properly.
+   *
+   * @param array $permissions
+   *   The user permissions needed to make the assertions.
+   */
+  protected function assertDemonstrationWarningMessage(array $permissions): void {
+    $account = $this->drupalCreateUser($permissions);
+    $this->drupalLogin($account);
+    $web_assert = $this->assertSession();
+
+    $nodes = $this->container->get('entity_type.manager')
+      ->getStorage('node')
+      ->loadByProperties(['title' => 'Deep mediterranean quiche']);
+    /** @var \Drupal\node\Entity\Node $recipe_node */
+    $recipe_node = reset($nodes);
+
+    // Check when editing a node, the warning is visible.
+    $this->drupalGet($recipe_node->toUrl('edit-form'));
+    $web_assert->statusCodeEquals(200);
+    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
+
+    // Check when adding a node, the warning is visible.
+    $this->drupalGet('node/add/recipe');
+    $web_assert->statusCodeEquals(200);
+    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
+
+    // Check when looking at admin/content, the warning is visible.
+    $this->drupalGet('admin/content');
+    $web_assert->statusCodeEquals(200);
+    $web_assert->pageTextContains('This site is intended for demonstration purposes.');
+
+    // Check when viewing a node, the warning is not visible.
+    $this->drupalGet($recipe_node->toUrl());
+    $web_assert->statusCodeEquals(200);
+    $web_assert->pageTextNotContains('This site is intended for demonstration purposes.');
+
+    // Check when viewing the homepage, the warning is not visible.
+    $this->drupalGet('<front>');
+    $web_assert->statusCodeEquals(200);
+    $web_assert->pageTextNotContains('This site is intended for demonstration purposes.');
+  }
+
 }