Add hints

axonivy-market · Dec 26, 2024 · f9165bf · f9165bf
1 parent a5aebc4
commit f9165bf
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 66 deletions.
diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.component.html b/marketplace-ui/src/app/modules/release-preview/release-preview.component.html
@@ -19,9 +19,19 @@ <h3 [lang]="languageService.selectedLanguage()" class="text-secondary">
           class="form-control" />
         <small
           [lang]="languageService.selectedLanguage()"
-          class="text-secondary">
+          class="hint-text">
           {{ translateService.get('common.preview.hint') | async }}
         </small>
+        <small
+          [lang]="languageService.selectedLanguage()"
+          class="hint-text">
+          <a
+            href="javascript:void(0)"
+            (click)="toggleHint()"
+            class="text-decoration-underline">
+            {{ translateService.get('common.preview.link') | async }}
+          </a>
+        </small>
       </div>
       <button
         type="submit"
@@ -35,7 +45,7 @@ <h3 [lang]="languageService.selectedLanguage()" class="text-secondary">
     <div class="detail-body d-flex flex-row align-items-start p-0 w-100">
       <div
         class="tab-group d-flex flex-column justify-content-center align-items-start p-0 col-12">
-        @if (displayedTabsSignal().length > 0) {
+        @if (displayedTabsSignal().length > 0 && !shouldShowHint) {
           <div class="row-tab d-none d-xl-block col-12">
             <ul ngbNav class="nav nav-tabs form-tabs">
               @for (displayedTab of displayedTabsSignal(); track $index) {
@@ -97,6 +107,23 @@ <h3 [lang]="languageService.selectedLanguage()" class="text-secondary">
               </div>
             }
           </div>
+        } @else if (shouldShowHint) {
+          <div
+            class="hint-content"
+            *ngIf="shouldShowHint"
+            class="hint-content mt-2 text-secondary"
+            [lang]="languageService.selectedLanguage()"
+            [innerHTML]="'common.preview.hintContent' | translate"></div>
+        } @else {
+          <div class="no-tabs d-xl-block col-12">
+            @if (isUploaded) {
+              <p
+                [lang]="languageService.selectedLanguage()"
+                class="text-secondary">
+                {{ translateService.get('common.preview.noTabs') | async }}
+              </p>
+            }
+          </div>
         }
       </div>
     </div>

diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.component.scss b/marketplace-ui/src/app/modules/release-preview/release-preview.component.scss
@@ -25,6 +25,10 @@ body {
   }
 }
 
+.hint-text {
+  font-size: 8px;
+}
+
 /* Form Styles */
 .form-group {
   font-size: 18px;
@@ -62,6 +66,49 @@ button:disabled {
   cursor: not-allowed;
 }
 
+.no-tabs {
+  text-align: center;
+  padding: 50px;
+  font-size: 1.2rem;
+  color: #6c757d;
+}
+
+.no-tabs p {
+  margin: 0;
+  color: #6c757d;
+}
+
+/* Hint content styling */
+.hint-content {
+  width: 100%;
+  border-left: 4px solid #007bff; 
+  padding: 10px 15px; 
+  margin-top: 10px;
+  font-size: 1.2rem;
+  border-radius: 4px; 
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* List styling */
+.hint-content ul {
+  padding-left: 20px; /* Indent list items */
+  margin: 0;
+}
+
+.hint-content ul li {
+  margin-bottom: 5px; /* Spacing between list items */
+}
+
+/* Code block styling */
+.hint-content code {
+  padding: 2px 4px; /* Padding inside code block */
+  border-radius: 3px; /* Rounded corners */
+  color: #d63384;
+  white-space: pre-wrap;
+  border: 1px solid #e6dedf; /* Subtle border */
+  overflow-x: auto;
+}
+
 .detail-body {
   gap: 4rem;
 
@@ -84,13 +131,15 @@ button:disabled {
   }
 
   p,
-  ul, li {
+  ul,
+  li {
     font-size: 18px;
     font-weight: 400;
     color: var(--ivy-text-primary-color);
   }
 
-  ul, li {
+  ul,
+  li {
     margin: 25.2px 0;
   }
 
@@ -197,15 +246,4 @@ button:disabled {
       transition: none;
     }
   }
-}
-
-/* Error Message */
-.alert {
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-  color: #721c24;
-  padding: 15px;
-  border-radius: 5px;
-  margin-bottom: 20px;
-  font-size: 16px;
-}
+}
diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.component.spec.ts b/marketplace-ui/src/app/modules/release-preview/release-preview.component.spec.ts
@@ -11,6 +11,7 @@ import {
   withInterceptorsFromDi
 } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { MOCK_RELEASE_PREVIEW_DATA } from '../../shared/mocks/mock-data';
 
 describe('ReleasePreviewComponent', () => {
   let component: ReleasePreviewComponent;
@@ -129,11 +130,7 @@ describe('ReleasePreviewComponent', () => {
   });
 
   it('should handle successful file upload', () => {
-    const mockResponse = {
-      description: { en: 'Description content' },
-      setup: { en: 'Setup content' },
-      demo: { en: 'Demo content' }
-    };
+    const mockResponse = MOCK_RELEASE_PREVIEW_DATA
     spyOn(releasePreviewService, 'extractZipDetails').and.returnValue(
       of(mockResponse)
     );

diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.component.ts b/marketplace-ui/src/app/modules/release-preview/release-preview.component.ts
@@ -45,6 +45,8 @@ export class ReleasePreviewComponent {
   activeTab = DEFAULT_ACTIVE_TAB;
   selectedLanguage = 'en';
   isZipFile = false;
+  isUploaded = false;
+  shouldShowHint = false;
   readmeContent: WritableSignal<ReleasePreviewData> = signal(
     {} as ReleasePreviewData
   );
@@ -72,6 +74,10 @@ export class ReleasePreviewComponent {
     }
   }
 
+  toggleHint() {
+    this.shouldShowHint = !this.shouldShowHint;
+  }
+
   onSubmit(): void {
     this.handlePreviewPage();
   }
@@ -84,10 +90,11 @@ export class ReleasePreviewComponent {
     if (!this.selectedFile || !this.isZipFile) {
       return;
     }
-
     this.releasePreviewService.extractZipDetails(this.selectedFile).subscribe({
       next: response => {
         this.readmeContent.set(response);
+        this.isUploaded = true;
+        this.shouldShowHint = false;
       }
     });
   }

diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.service.spec.ts b/marketplace-ui/src/app/modules/release-preview/release-preview.service.spec.ts
@@ -4,6 +4,7 @@ import { ReleasePreviewService } from './release-preview.service';
 import { environment } from '../../../environments/environment';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { ReleasePreviewData } from '../../shared/models/release-preview-data.model';
+import { MOCK_RELEASE_PREVIEW_DATA } from '../../shared/mocks/mock-data';
 
 describe('SecurityMonitorService', () => {
     let service: ReleasePreviewService;
@@ -35,25 +36,7 @@ describe('SecurityMonitorService', () => {
         const mockFile = new File(['content'], 'test.zip', {
           type: 'application/zip'
         });
-        const mockResponse: ReleasePreviewData = {
-          description: {
-            English: 'This is a description in English.',
-            Spanish: 'Esta es una descripción en español.',
-            French: 'Ceci est une description en français.'
-          },
-          setup: {
-            English: 'To set up the application, follow these steps...',
-            Spanish: 'Para configurar la aplicación, siga estos pasos...',
-            French: "Pour configurer l'application, suivez ces étapes..."
-          },
-          demo: {
-            English: 'To demo the app, use the following commands...',
-            Spanish:
-              'Para mostrar la aplicación, use los siguientes comandos...',
-            French:
-              "Pour démontrer l'application, utilisez les commandes suivantes..."
-          }
-        };
+        const mockResponse: ReleasePreviewData = MOCK_RELEASE_PREVIEW_DATA
 
         service.extractZipDetails(mockFile).subscribe(data => {
           expect(data).toEqual(mockResponse);

diff --git a/marketplace-ui/src/app/modules/release-preview/release-preview.service.ts b/marketplace-ui/src/app/modules/release-preview/release-preview.service.ts
@@ -16,25 +16,4 @@ export class ReleasePreviewService {
 
     return this.http.post<ReleasePreviewData>(this.apiUrl, formData);
   }
-
-  getMockResponse(): Observable<ReleasePreviewData> {
-    return of({
-      description: {
-        English: 'This is a description in English.',
-        Spanish: 'Esta es una descripción en español.',
-        French: 'Ceci est une description en français.'
-      },
-      setup: {
-        English: 'To set up the application, follow these steps...',
-        Spanish: 'Para configurar la aplicación, siga estos pasos...',
-        French: "Pour configurer l'application, suivez ces étapes..."
-      },
-      demo: {
-        English: 'To demo the app, use the following commands...',
-        Spanish: 'Para mostrar la aplicación, use los siguientes comandos...',
-        French:
-          "Pour démontrer l'application, utilisez les commandes suivantes..."
-      }
-    });
-  }
 }
diff --git a/marketplace-ui/src/app/shared/mocks/mock-data.ts b/marketplace-ui/src/app/shared/mocks/mock-data.ts
@@ -3,6 +3,7 @@ import { ProductApiResponse } from '../models/apis/product-response.model';
 import { ExternalDocument } from '../models/external-document.model';
 import { ProductDetail } from '../models/product-detail.model';
 import { ProductModuleContent } from '../models/product-module-content.model';
+import { ReleasePreviewData } from '../models/release-preview-data.model';
 import { StarRatingCounting } from '../models/star-rating-counting.model';
 
 export const MOCK_PRODUCTS = {
@@ -336,6 +337,24 @@ export const MOCK_EXTERNAL_DOCUMENT: ExternalDocument = {
   relativeLink: '/market-cache/portal/portal-guide/10.0.0/doc/index.html'
 };
 
+export const MOCK_RELEASE_PREVIEW_DATA: ReleasePreviewData = {
+  description: {
+    English: 'This is a description in English.',
+    Spanish: 'Esta es una descripción en español.',
+    French: 'Ceci est une description en français.'
+  },
+  setup: {
+    English: 'To set up the application, follow these steps...',
+    Spanish: 'Para configurar la aplicación, siga estos pasos...',
+    French: "Pour configurer l'application, suivez ces étapes..."
+  },
+  demo: {
+    English: 'To demo the app, use the following commands...',
+    Spanish: 'Para mostrar la aplicación, use los siguientes comandos...',
+    French: "Pour démontrer l'application, utilisez les commandes suivantes..."
+  }
+};
+
 export const MOCK_FEEDBACK_API_RESPONSE: FeedbackApiResponse = {
   _embedded: {
     feedbacks: [

diff --git a/marketplace-ui/src/assets/i18n/de.yaml b/marketplace-ui/src/assets/i18n/de.yaml
@@ -6,8 +6,42 @@ common:
   preview:
     title: Vorschau auf die Produktfreigabe
     description: Vorschau der Beschreibung Ihres Produkts
-    buttonLabel: Hochladen  
+    buttonLabel: Hochladen
     hint: Es sind nur .zip-Dateien erlaubt und die Dateigröße sollte kleiner als 20 MB sein.
+    noTabs: Seem like there's a problem with your Zip file.
+    link: So erstellen Sie eine gültige README.
+    hintContent: <p>
+      Befolgen Sie die README-Vorlage strikt. Stellen Sie Folgendes sicher.
+      </p></br>
+      <code>
+      `# Name Ihres Produkts
+      </br></br>
+      Hallo, dies ist unser Connector.
+      </br></br>
+      `## Demo
+      </br></br>
+      Hier sollten Sie die Demo-Inhalte zeigen.
+      </br></br>
+      `## Setup
+      </br></br>
+      Dieser Abschnitt sollte zeigen, wie Sie Ihr Produkt herunterladen und einrichten, ..
+      </br></br>
+      ```</br>
+      @variables.yaml@</br>
+      ```
+      </code>
+      <div>
+      <ul>
+      <li>Falls Sie Variablen in die README-Datei einfügen möchten, platzieren Sie sie wie in der oben angegebenen Vorlage und deklarieren Sie eine Datei mit dem Namen <code>variables.yaml</code></li>
+      <li><b>SETUP AND DEMO</b> Diese Überschriften sollten immer auf Englisch sein, unabhängig von der Sprache.</li>
+      <li>
+      Stellen Sie sicher, dass "Setup" und "Demo" den vordefinierten Überschriften und der Struktur der Vorlage folgen.
+      </li>
+      <li>
+      Bilder sollten das folgende Format verwenden
+      <code>![image-name](image-directory.png)</code>
+      </li>
+      </ul>
   nav:
     news: News
     doc: Dokumentation
@@ -146,4 +180,4 @@ common:
     secondAgo: vor einer Sekunde
     secondsAgo: 'vor {{ number }} Sekunden'
   showLess: Weniger anzeigen
-  showMore: Mehr anzeigen
+  showMore: Mehr anzeigen
diff --git a/marketplace-ui/src/assets/i18n/en.yaml b/marketplace-ui/src/assets/i18n/en.yaml
@@ -6,9 +6,43 @@ common:
     german: Deutsch
   preview:
     title: Product Release Preview
-    description: Preview your product's description
+    description: Preview your product's details
     buttonLabel: Upload
-    hint: Only .zip files are allowed and file size should smaller than 20MB.
+    noTabs: Seem like there's a problem with your Zip file.
+    hint: Only .zip file is allowed and file size should be smaller than 20MB.
+    link: See how to configure a valid README.
+    hintContent: <p>
+      Follow the README template strictly. Ensure the following.
+      </p></br>
+      <code>
+      `# Your Product Name
+      </br></br>
+      Hello, this is our connector.
+      </br></br>
+      `## Demo
+      </br></br>
+      You should show the demo content here.
+      </br></br>
+      `## Setup
+      </br></br>
+      This session should show how to download, setup your product,...
+      </br></br>
+      ```</br>
+      @variables.yaml@</br>
+      ```
+      </code>
+      <div>
+      <ul>
+      <li>In case you want to pass variables to README file, put in template as above and declare a file name <code>variables.yaml</code></li>
+      <li><b>SETUP AND DEMO</b> These headings should always be in English, regardless of the language.</li>
+      <li>
+      Ensure "Setup" and "Demo" follow the template's predefined headings and structure.
+      </li>
+      <li>
+      Images should use the following format
+      <code>![image-name](image-directory.png)</code>
+      </li>
+      </ul>
   nav:
     news: News
     doc: Doc