Create scenario-solution help dialog

application/frontend/src/app/app.module.ts

@@ -48,6 +48,7 @@ import {
 } from './core/effects';
 import { HttpClientModule } from '@angular/common/http';
 import { initApp } from './app-initializer';
+import { ScenarioSolutionHelpDialogComponent } from './core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component';
 
 @NgModule({
   imports: [
@@ -105,5 +106,6 @@ import { initApp } from './app-initializer';
     },
   ],
   bootstrap: [AppComponent],
+  declarations: [ScenarioSolutionHelpDialogComponent],
 })
 export class AppModule {}

application/frontend/src/app/core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.html

@@ -0,0 +1,10 @@
+<h3 class="strong">What's the difference between a scenario and a solution?</h3>
+<p>
+  A scenario is a vehicle routing problem (VRP) request that Fleet Routing can solve. It consists of
+  one or more vehicles and one or more shipments to be delivered.
+</p>
+
+<p>
+  A solution is what the Fleet Routing API produces in response to a request to solve a scenario.
+  Solutions are visible in FleetRouting App via the Gantt chart, on a map, or in the Metadata view.
+</p>

application/frontend/src/app/core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScenarioSolutionHelpDialogComponent } from './scenario-solution-help-dialog.component';
+
+describe('ScenarioSolutionHelpDialogComponent', () => {
+  let component: ScenarioSolutionHelpDialogComponent;
+  let fixture: ComponentFixture<ScenarioSolutionHelpDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ScenarioSolutionHelpDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ScenarioSolutionHelpDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

application/frontend/src/app/core/containers/scenario-solution-help-dialog/scenario-solution-help-dialog.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-scenario-solution-help-dialog',
+  templateUrl: './scenario-solution-help-dialog.component.html',
+  styleUrls: ['./scenario-solution-help-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScenarioSolutionHelpDialogComponent {}

application/frontend/src/styles/main.scss

@@ -882,3 +882,7 @@ app-csv-upload-dialog
 app-bulk-edit-unset {
   color: #f44336;
 }
+
+.strong {
+  font-weight: 500 !important;
+}