From e1be8caace8f32abfbd5d1c7bbeec765c93ef037 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Mon, 18 Mar 2024 09:30:14 +0100
Subject: [PATCH] MOBILE-4268 core: Rename core-error-accordion

---
 .../core-error-accordion.html}                |  2 +-
 .../error-accordion.scss}                     | 24 ++++++++---------
 .../error-accordion.ts}                       | 26 +++++++++----------
 src/core/features/login/pages/site/site.ts    |  9 ++++---
 src/core/services/utils/dom.ts                |  8 +++---
 src/theme/theme.scss                          |  2 +-
 6 files changed, 36 insertions(+), 35 deletions(-)
 rename src/core/components/{error-info/core-error-info.html => error-accordion/core-error-accordion.html} (75%)
 rename src/core/components/{error-info/error-info.scss => error-accordion/error-accordion.scss} (66%)
 rename src/core/components/{error-info/error-info.ts => error-accordion/error-accordion.ts} (73%)

diff --git a/src/core/components/error-info/core-error-info.html b/src/core/components/error-accordion/core-error-accordion.html
similarity index 75%
rename from src/core/components/error-info/core-error-info.html
rename to src/core/components/error-accordion/core-error-accordion.html
index 2808ecb68..47704faba 100644
--- a/src/core/components/error-info/core-error-info.html
+++ b/src/core/components/error-accordion/core-error-accordion.html
@@ -2,5 +2,5 @@
     The markup for this component is rendered dynamically using the static render() method
     instead of using Angular's engine. The reason for using this approach is that this
     allows injecting this component into HTML directly, rather than requiring Angular
-    to control its lifecycle.
+    to control its lifecycle. This is necessary, for example, to render within alerts.
 -->
diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-accordion/error-accordion.scss
similarity index 66%
rename from src/core/components/error-info/error-info.scss
rename to src/core/components/error-accordion/error-accordion.scss
index a0723f21f..a16ec2ac9 100644
--- a/src/core/components/error-info/error-info.scss
+++ b/src/core/components/error-accordion/error-accordion.scss
@@ -1,4 +1,4 @@
-.core-error-info {
+.core-error-accordion {
     background: var(--gray-200);
     border-radius: var(--radius-xs);
     font-size: var(--body-font-size-sm);
@@ -12,26 +12,26 @@
         margin-bottom: 0;
     }
 
-    .core-error-info--code {
+    .core-error-accordion--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
         font-size: var(--body-font-size-md);
     }
 
-    .core-error-info--details p {
+    .core-error-accordion--details p {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
         color: var(--gray-500);
     }
 
-    .core-error-info--checkbox {
+    .core-error-accordion--checkbox {
         display: none;
 
-        & + .core-error-info--details,
-        & + .core-error-info--code + .core-error-info--details {
+        & + .core-error-accordion--details,
+        & + .core-error-accordion--code + .core-error-accordion--details {
             max-height: 0;
             overflow: hidden;
             transition: max-height 600ms ease-in-out;
 
-            & + .core-error-info--toggle {
+            & + .core-error-accordion--toggle {
                 display: flex;
                 padding: var(--spacing-2);
                 min-height: var(--a11y-min-target-size);
@@ -48,7 +48,7 @@
                     width: 11px;
                 }
 
-                .core-error-info--hide-content {
+                .core-error-accordion--hide-content {
                     display: none;
                 }
 
@@ -56,15 +56,15 @@
 
         }
 
-        &:checked + .core-error-info--details,
-        &:checked + .core-error-info--code + .core-error-info--details {
+        &:checked + .core-error-accordion--details,
+        &:checked + .core-error-accordion--code + .core-error-accordion--details {
             max-height: 110px;
 
-            & + .core-error-info--toggle .core-error-info--hide-content {
+            & + .core-error-accordion--toggle .core-error-accordion--hide-content {
                 display: flex;
             }
 
-            & + .core-error-info--toggle .core-error-info--show-content {
+            & + .core-error-accordion--toggle .core-error-accordion--show-content {
                 display: none;
             }
 
diff --git a/src/core/components/error-info/error-info.ts b/src/core/components/error-accordion/error-accordion.ts
similarity index 73%
rename from src/core/components/error-info/error-info.ts
rename to src/core/components/error-accordion/error-accordion.ts
index 31666e599..b2f31d845 100644
--- a/src/core/components/error-info/error-info.ts
+++ b/src/core/components/error-accordion/error-accordion.ts
@@ -23,11 +23,11 @@ import { CoreForms } from '@singletons/form';
  * it can be rendered using the static render() method to get the raw HTML.
  */
 @Component({
-    selector: 'core-error-info',
-    templateUrl: 'core-error-info.html',
-    styleUrls: ['error-info.scss'],
+    selector: 'core-error-accordion',
+    templateUrl: 'core-error-accordion.html',
+    styleUrls: ['error-accordion.scss'],
 })
-export class CoreErrorInfoComponent implements OnInit, OnChanges {
+export class CoreErrorAccordionComponent implements OnInit, OnChanges {
 
     /**
      * Render an instance of the component into an HTML string.
@@ -37,24 +37,24 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
      * @returns Component HTML.
      */
     static render(errorDetails: string, errorCode: string): string {
-        const toggleId = CoreForms.uniqueId('error-info-toggle');
+        const toggleId = CoreForms.uniqueId('error-accordion-toggle');
         const errorCodeLabel = Translate.instant('core.errorcode', { errorCode });
         const hideDetailsLabel = Translate.instant('core.errordetailshide');
         const showDetailsLabel = Translate.instant('core.errordetailsshow');
 
         return `
-            <div class="core-error-info">
-                <input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" />
-                <div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div>
-                <div class="core-error-info--details">
+            <div class="core-error-accordion">
+                <input id="${toggleId}" type="checkbox" class="core-error-accordion--checkbox" />
+                <div class="core-error-accordion--code"><strong>${errorCodeLabel}</strong></div>
+                <div class="core-error-accordion--details">
                     <p>${errorDetails}</p>
                 </div>
-                <label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true">
-                    <span class="core-error-info--hide-content">
+                <label for="${toggleId}" class="core-error-accordion--toggle" aria-hidden="true">
+                    <span class="core-error-accordion--hide-content">
                         ${hideDetailsLabel}
                         <ion-icon name="chevron-up" />
                     </span>
-                    <span class="core-error-info--show-content">
+                    <span class="core-error-accordion--show-content">
                         ${showDetailsLabel}
                         <ion-icon name="chevron-down" />
                     </span>
@@ -86,7 +86,7 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
      * Render component html in the element created by Angular.
      */
     private render(): void {
-        this.element.nativeElement.innerHTML = CoreErrorInfoComponent.render(this.errorDetails, this.errorCode);
+        this.element.nativeElement.innerHTML = CoreErrorAccordionComponent.render(this.errorDetails, this.errorCode);
     }
 
 }
diff --git a/src/core/features/login/pages/site/site.ts b/src/core/features/login/pages/site/site.ts
index f30d0f4c8..2226dbafe 100644
--- a/src/core/features/login/pages/site/site.ts
+++ b/src/core/features/login/pages/site/site.ts
@@ -40,7 +40,7 @@ import { CoreForms } from '@singletons/form';
 import { AlertButton } from '@ionic/core';
 import { CoreSiteError, CoreSiteErrorDebug } from '@classes/errors/siteerror';
 import { CoreUserSupport } from '@features/user/services/support';
-import { CoreErrorInfoComponent } from '@components/error-info/error-info';
+import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
 import { CoreUserSupportConfig } from '@features/user/classes/support/support-config';
 import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config';
 import { CoreLoginError } from '@classes/errors/loginerror';
@@ -421,7 +421,7 @@ export class CoreLoginSitePage implements OnInit {
         }
 
         if (debug) {
-            errorMessage = `<p>${errorMessage}</p><div class="core-error-info-container"></div>`;
+            errorMessage = `<p>${errorMessage}</p><div class="core-error-accordion-container"></div>`;
         }
 
         const alertSupportConfig = supportConfig;
@@ -457,9 +457,10 @@ export class CoreLoginSitePage implements OnInit {
         });
 
         if (debug) {
-            const containerElement = alertElement.querySelector('.core-error-info-container');
+            const containerElement = alertElement.querySelector('.core-error-accordion-container');
+
             if (containerElement) {
-                containerElement.innerHTML = CoreErrorInfoComponent.render(debug.details, debug.code);
+                containerElement.innerHTML = CoreErrorAccordionComponent.render(debug.details, debug.code);
             }
         }
     }
diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index 5eaac34c7..d3f6b5a43 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -52,7 +52,7 @@ import { Subscription } from 'rxjs';
 import { CoreNetwork } from '@services/network';
 import { CoreSiteError } from '@classes/errors/siteerror';
 import { CoreUserSupport } from '@features/user/services/support';
-import { CoreErrorInfoComponent } from '@components/error-info/error-info';
+import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
 import { CorePlatform } from '@services/platform';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreLang } from '@services/lang';
@@ -1038,7 +1038,7 @@ export class CoreDomUtilsProvider {
             alertOptions.buttons = error.buttons;
         } else if (error instanceof CoreSiteError) {
             if (error.debug) {
-                alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-info-container"></div>`;
+                alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-accordion-container"></div>`;
             }
 
             const supportConfig = error.supportConfig;
@@ -1062,10 +1062,10 @@ export class CoreDomUtilsProvider {
         const alertElement = await this.showAlertWithOptions(alertOptions, autocloseTime);
 
         if (error instanceof CoreSiteError && error.debug) {
-            const containerElement = alertElement.querySelector('.core-error-info-container');
+            const containerElement = alertElement.querySelector('.core-error-accordion-container');
 
             if (containerElement) {
-                containerElement.innerHTML = CoreErrorInfoComponent.render(error.debug.details, error.debug.code);
+                containerElement.innerHTML = CoreErrorAccordionComponent.render(error.debug.details, error.debug.code);
             }
         }
 
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 341776989..68bed20f2 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -26,8 +26,8 @@
 @import "components/rubrics.scss";
 @import "components/mod-label.scss";
 @import "components/ion-icon.scss";
-@import "../core/components/error-info/error-info.scss";
 @import "components/videojs.scss";
+@import "../core/components/error-accordion/error-accordion.scss";
 
 /* Some styles from 3rd party libraries. */
 @import "bootstrap.scss";