feat: update first step of creation screen

gravitee-apim-console-webui/src/management/api/creation-get-started/api-creation-get-started.component.html

@@ -23,41 +23,44 @@ <h1 class="api-creation-get-started__header__title mat-headline-6">Choose API cr
     </div>
 
     <div class="api-creation-get-started__row">
+
       <div class="api-creation-get-started__row__card">
         <div>
           <mat-icon svgIcon="gio:rocket"></mat-icon>
-          <div class="mat-subtitle-1">Create API in Gravitee</div>
-          <div class="mat-body">Start from scratch by creating a new API directly within Gravitee.</div>
+          <div class="mat-subtitle-1">Create Classic API</div>
+          <div class="mat-body">Proxy an HTTP service using the classic (v2) version of Gravitee's API definition.</div>
         </div>
 
         <div class="api-creation-get-started__row__card__action">
-          <button mat-stroked-button [routerLink]="'./v4'" data-testid="api_create_v4_button">Create</button>
-          <button mat-stroked-button [routerLink]="'../import/v4'" data-testid="api_import_v4_button">Import</button>
+          <button mat-flat-button [routerLink]="'./v2'" color="primary">Create v2 API</button>
+          <button mat-stroked-button (click)="goToApiImport()">Import v2 API</button>
+          <div *ngIf="!isLoading && !isOEM">
+            <a [href]="cockpitLink" target="_blank" rel="noopener noreferrer" mat-stroked-button
+              >Design API<mat-icon iconPositionEnd svgIcon="gio:external-link"></mat-icon
+            ></a>
+          </div>
         </div>
       </div>
 
-      <div *ngIf="!isLoading && !isOEM" class="api-creation-get-started__row__card">
+      <div class="api-creation-get-started__row__card">
         <div>
-          <mat-icon svgIcon="gio:magic-wand"></mat-icon>
-          <div class="api-creation-get-started__row__card__header__title mat-subtitle-1">Build with API Designer</div>
-          <div class="mat-body">
-            Build faster with a design-first approach that reduces time spent translating requirements into API definitions.
-          </div>
+          <mat-icon svgIcon="gio:rocket"></mat-icon>
+          <div class="mat-subtitle-1">Create New API</div>
+          <div class="mat-body">Proxy an HTTP service, mediate between message brokers and HTTP, and expose the native Kafka protocol using the new (v4) version of Gravitee's API definition.</div>
         </div>
 
         <div class="api-creation-get-started__row__card__action">
-          <a [href]="cockpitLink" target="_blank" rel="noopener noreferrer" mat-stroked-button
-            >Build <mat-icon iconPositionEnd svgIcon="gio:external-link"></mat-icon
-          ></a>
+          <button mat-flat-button [routerLink]="'./v4'" color="primary" data-testid="api_create_v4_button">Create v4 API</button>
+          <button mat-stroked-button [routerLink]="'../import/v4'" data-testid="api_import_v4_button">Import v4 API</button>
         </div>
       </div>
+
     </div>
 
     <div class="api-creation-get-started__row">
       <div class="api-creation-get-started__row--v2">
-        <div class="mat-body">Or use a previous version</div>
-        <button mat-stroked-button [routerLink]="'./v2'">Create API v2</button>
-        <button mat-stroked-button (click)="goToApiImport()">Import API v2</button>
+        <div class="mat-body">Not sure which version to pick? v4 contains most of v2 functionality, but has some limitations.</div>
+        <button type="button" mat-stroked-button (click)="onMoreInfoClick($event)">Learn More</button>
       </div>
     </div>
   </mat-card-content>

gravitee-apim-console-webui/src/management/api/creation-get-started/api-creation-get-started.component.ts

@@ -19,7 +19,6 @@ import { catchError, filter, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { EMPTY, of, Subject } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-
 import { CockpitService, UtmCampaign } from '../../../services-ngx/cockpit.service';
 import { Constants } from '../../../entities/Constants';
 import { InstallationService } from '../../../services-ngx/installation.service';
@@ -28,6 +27,10 @@ import { GioPermissionService } from '../../../shared/components/gio-permission/
 import { PolicyService } from '../../../services-ngx/policy.service';
 import { SnackBarService } from '../../../services-ngx/snack-bar.service';
 import { GioApiImportDialogComponent, GioApiImportDialogData } from '../component/gio-api-import-dialog/gio-api-import-dialog.component';
+import {
+  GioInformationDialogComponent,
+  GioConnectorDialogData,
+} from '../component/gio-information-dialog/gio-information-dialog.component';
 
 @Component({
   selector: 'api-creation-get-started',
@@ -111,4 +114,23 @@ export class ApiCreationGetStartedComponent implements OnInit, OnDestroy {
       installation?.additionalInformation.COCKPIT_INSTALLATION_STATUS === 'ACCEPTED' ? 'ACCEPTED' : undefined,
     );
   }
+
+  onMoreInfoClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.matDialog
+      .open<GioInformationDialogComponent, GioConnectorDialogData, boolean>(GioInformationDialogComponent, {
+        data: {
+          name: 'Classic (v2) and New (v4) APIs compared',
+          information: {
+            description:
+              'Gravitee v4 APIs contain most of the same capabilities as v2 APIs, including analytics, logs, failover, and health check. They also support some features not available in v2 APIs, such as protocol mediation, shared policy groups, and native Kafka support. Some functionality is not yet included, however, including alerts, tenants, and some analytics capabilities.'
+          },
+        },
+        role: 'alertdialog',
+        id: 'moreInfoDialog',
+      })
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe();
+  }
 }