Rearrange welcome page

Update cloud button

Update welcome page entry points

Update text

Update text

Update style

Create scenario-solution help dialog

Display help in upload dialog

Update welcome page styling

Add zip icon

Change upload dialog size

Update upload dialog layout

Add CSV layout

Add CSV help dialog

Fix test

Update branding

Change JSON upload layout

Update place ids flow

Go directly into application upload file upload

Open upload dialog when CSV upload is closed on landing page

Update cloud upload icon

Add license info

Use custom ErrorStateMatcher on file upload input

Add close buttons to dialogs

Add close buttons to dialogs

Style close buttons

Update tests

Fix style

Adjust margin on logo

Add icons

Update app logo

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/actions/upload.actions.ts

@@ -7,11 +7,14 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { createAction } from '@ngrx/store';
+import { createAction, props } from '@ngrx/store';
 
 export const openDialog = createAction('[Upload] Open Dialog');
 
 export const closeDialog = createAction('[Upload] Close Dialog');
 
-export const openCsvDialog = createAction('[Upload] Open CSV Dialog');
+export const openCsvDialog = createAction(
+  '[Upload] Open CSV Dialog',
+  props<{ openUploadDialogOnClose?: boolean }>()
+);
 export const closeCsvDialog = createAction('[Upload] Close CSV Dialog');

application/frontend/src/app/core/components/logo/logo.component.html

@@ -1,8 +1,8 @@
 <a
   href="/"
   class="branding link--gray-dark"
-  title="Cloud Optimization AI"
-  aria-label="Cloud Optimization AI">
-  <img class="branding__logo" src="assets/images/cloud_optimization_ai_logo.svg" width="50px" />
-  <span class="branding__name">Cloud<br />Optimization AI</span>
+  title="Google Maps Platform"
+  aria-label="Google Maps Platform">
+  <img class="branding__logo mr-3" src="assets/images/maps.svg" width="30px" />
+  <span class="branding__name">Google<br />Maps Platform</span>
 </a>

application/frontend/src/app/core/components/logo/logo.component.scss

@@ -1,6 +1,6 @@
 :host {
   display: flex;
-  margin: 1rem 0 0 0;
+  margin: 1rem;
 }
 
 .branding,
@@ -10,7 +10,7 @@
   align-items: center;
   position: relative;
   top: 2px;
-  margin: 4px 12px;
+  margin: 0;
   user-select: none;
   white-space: nowrap;
 }
@@ -19,19 +19,16 @@
   position: relative;
   top: -1.5px;
   color: #5f6368;
-  font-family: 'Product Sans', Arial, sans-serif;
-  font-size: 20px;
+  font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
+  font-style: normal;
+  font-size: 22px;
   font-weight: 400;
-  line-height: 24px;
-  padding-left: 4px;
+  line-height: 28px;
   text-rendering: optimizeLegibility;
   text-align: left;
 }
 
-// a.branding:focus {
-//   text-decoration: none;
-// }
-
-// a.branding:focus .branding__name {
-//   text-decoration: underline;
-// }
+.branding__logo {
+  position: relative;
+  top: -4px;
+}

application/frontend/src/app/core/containers/app/app.component.ts

@@ -45,17 +45,21 @@ export class AppComponent {
       'arrow_downward',
       'arrow_drop_down',
       'arrow_upward',
+      'bookmark',
       'calendar',
       'clear',
       'clock',
       'cloud_download',
       'cloud_upload',
       'csv',
+      'csv2',
       'delete',
       'depot_outline',
       'dropoff',
       'edit',
       'help',
+      'help-filled',
+      'input',
       'map',
       'maps',
       'more_vert',
@@ -79,6 +83,7 @@ export class AppComponent {
       'select_bbox_active',
       'select_polygon',
       'select_polygon_active',
+      'zip',
     ];
     icons.forEach((icon) =>
       matIconRegistry.addSvgIcon(

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

@@ -0,0 +1,16 @@
+<h3 class="d-flex flex-column">
+  <button
+    mat-icon-button
+    class="small-close-button"
+    type="button"
+    title="Cancel"
+    (click)="cancel()">
+    <mat-icon svgIcon="clear"></mat-icon>
+  </button>
+  <div class="strong">What data can I upload via CSV?</div>
+</h3>
+<p>
+  If you have data for vehicles, shipments, or vehicle operators in individual .csv files, you can
+  use this option to upload your data. You can also use this option get sample files to see how your
+  data should be structured.
+</p>

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Use of this source code is governed by an MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CsvHelpDialogComponent } from './csv-help-dialog.component';
+import { MatDialogRef } from '@angular/material/dialog';
+
+describe('CsvHelpDialogComponent', () => {
+  let component: CsvHelpDialogComponent;
+  let fixture: ComponentFixture<CsvHelpDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CsvHelpDialogComponent],
+      providers: [{ provide: MatDialogRef, useValue: {} }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CsvHelpDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Use of this source code is governed by an MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-csv-help-dialog',
+  templateUrl: './csv-help-dialog.component.html',
+  styleUrls: ['./csv-help-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CsvHelpDialogComponent {
+  constructor(private dialogRef: MatDialogRef<CsvHelpDialogComponent>) {}
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+}

application/frontend/src/app/core/containers/main-actions/main-actions.component.ts

@@ -59,7 +59,7 @@ export class MainActionsComponent implements OnInit {
   }
 
   onCsvUpload(): void {
-    this.store.dispatch(UploadActions.openCsvDialog());
+    this.store.dispatch(UploadActions.openCsvDialog({}));
   }
 
   onCSVDownload(): void {

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

@@ -0,0 +1,20 @@
+<h3 class="d-flex flex-column">
+  <button
+    mat-icon-button
+    class="small-close-button"
+    type="button"
+    title="Cancel"
+    (click)="cancel()">
+    <mat-icon svgIcon="clear"></mat-icon>
+  </button>
+  <div class="strong">What's the difference between a scenario and a solution?</div>
+</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,33 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Use of this source code is governed by an MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScenarioSolutionHelpDialogComponent } from './scenario-solution-help-dialog.component';
+import { MatDialogRef } from '@angular/material/dialog';
+
+describe('ScenarioSolutionHelpDialogComponent', () => {
+  let component: ScenarioSolutionHelpDialogComponent;
+  let fixture: ComponentFixture<ScenarioSolutionHelpDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ScenarioSolutionHelpDialogComponent],
+      providers: [{ provide: MatDialogRef, useValue: {} }],
+    }).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,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Use of this source code is governed by an MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@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 {
+  constructor(private dialogRef: MatDialogRef<ScenarioSolutionHelpDialogComponent>) {}
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+}