Add basic examples to the repl.

- Add examples covering basic CEL features and extensions
- Add evaluate button to repl console

repl/appengine/README.md

@@ -17,15 +17,15 @@ and run the Go server as follows:
 
 ```
 # from the `repl/appengine/web` directory:
-npm run watch
+ng run web:build --watch
 
 # from the repl/appengine directory:
 go run ./main --serve_static ./web/dist/web
 ```
 
 ## Deploy on google cloud appengine
 
-1. Build the angular application with `npm run build`.
+1. Build the angular application with `npm run web:build`.
 
 1. Follow the instructions here:
 (https://cloud.google.com/appengine/docs/standard/go/building-app). Make sure to

repl/appengine/web/src/app/app-component.html

@@ -33,6 +33,7 @@
       <app-repl-console></app-repl-console>
     </div>
     <div class="control-button-bar">
+      <button mat-raised-button (click)="submitConsole()" color="primary">Evaluate</button> &nbsp;
       <button mat-raised-button (click)="drawer.toggle()" color="primary">Show / Hide References</button>
     </div>
   </mat-drawer-content>

repl/appengine/web/src/app/app-component.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { ReplConsoleComponent } from './repl_console/repl-console-component';
 
 
 /**
@@ -26,4 +27,10 @@ import { Component } from '@angular/core';
   styleUrls: ['./app-component.scss']
 })
 export class AppComponent {
+  @ViewChild(ReplConsoleComponent)
+  private console!: ReplConsoleComponent;
+
+  submitConsole() {
+    this.console.submit();
+  }
 }

repl/appengine/web/src/app/reference_panel/reference-panel-component.html

@@ -16,8 +16,46 @@
 
 <h1>References</h1>
 
-<p>See <a href="https://github.com/google/cel-spec">github.com/google/cel-spec</a> for CEL language
-    overview. </p>
-<p>See
-    <a href="https://github.com/google/cel-go/tree/master/repl/main">github.com/google/cel-go/tree/master/repl/main</a>
-    for REPL syntax guide.</p>
+<mat-accordion>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+        <mat-panel-title>
+            CEL Specification
+        </mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>See <a href="https://github.com/google/cel-spec">github.com/google/cel-spec</a> for CEL language
+            overview.</p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+            REPL Syntax
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>See <a href="https://github.com/google/cel-go/tree/master/repl/main">github.com/google/cel-go/tree/master/repl/main</a>
+            for REPL syntax guide.</p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+            Examples
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <p>Standard features</p>
+        <mat-action-list>
+            <button mat-list-item (click)="startExample('hello-world')">Hello World!</button>
+            <button mat-list-item (click)="startExample('variables')">Variables</button>
+            <button mat-list-item (click)="startExample('errors')">Errors</button>
+            <button mat-list-item (click)="startExample('extension-functions')">Extension Functions</button>
+            <button mat-list-item (click)="startExample('json')">JSON</button>
+            <button mat-list-item (click)="startExample('macros')">Macros</button>
+        </mat-action-list>
+        <p>Canonical Extensions</p>
+        <mat-action-list>
+            <button mat-list-item (click)="startExample('optionals')">Optionals</button>
+            <button mat-list-item (click)="startExample('strings')">Strings</button>
+            <button mat-list-item (click)="startExample('math')">Math</button>
+            <button mat-list-item (click)="startExample('bind')">Bind</button>
+        </mat-action-list>
+    </mat-expansion-panel>
+</mat-accordion>

repl/appengine/web/src/app/reference_panel/reference-panel-component.ts

@@ -15,6 +15,152 @@
  */
 
 import { Component } from '@angular/core';
+import { ReplExampleService, Example } from '../shared/repl-example-service';
+
+const examples = new Map<string, Example>([
+  ["hello-world",
+  {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `"hello world!"`
+      ]
+    }
+  }],
+  ["variables", {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `%let x = 10`,
+        `x + 2`,
+      ]
+    }
+  }],
+  ["errors", {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `%let x = 0`,
+        `false || 10 / x > 5`,
+        `true || 10 / x > 5`,
+        `10 / x > 5 || false`,
+        `10 / x > 5 || true`,
+      ]
+    }
+  }],
+  ["extension-functions", {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `%let string.prepend(prefix: string) : string -> prefix + this`,
+        `"def".prepend("abc")`,
+        `%let exp(base: double, exponent: int) : double -> 
+          {-2: 1.0 / base / base,
+           -1: 1.0 / base,
+           0: 1.0,
+           1: base,
+           2: base * base 
+          }[exponent]`,
+        `exp(2.0, -2) == 0.25`,
+      ]
+    }
+  }],
+  ["json", {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `%let now = timestamp("2001-01-01T00:00:01Z")`,
+        `%let sa_user = ""`,
+        `{'aud': 'my-project',
+          'exp': now + duration('300s'),
+          'extra_claims': {
+            'group': 'admin'
+          },
+          'iat': now,
+          'iss': 'auth.acme.com:12350',
+          'nbf': now,
+          'sub': 'serviceAccount:' + sa_user + '@acme.com'
+        }`
+      ]
+    }
+  }],
+  ["macros", {
+    "description": 
+      ``,
+    "request": {
+      commands: [
+        `[1, 2, 3, 4].exists(x, x > 3)`,
+        `[1, 2, 3, 4].all(x, x < 4)`,
+        `[1, 2, 3, 4].exists_one(x, x % 2 == 0)`,
+        `[1, 2, 3, 4].filter(x, x % 2 == 0)`,
+        `[1, 2, 3, 4].map(x, x * x)`,
+        `{'abc': 1, 'def': 2}.exists(key, key == 'def')`,
+      ]
+    }
+  }],
+  ["optionals",
+  {
+    description: ``,
+    request: {
+      commands: [
+        `%option --extension "optional"`,
+        `%let x = optional.of("one")`,
+        `%let y = optional.ofNonZeroValue("")  // to infer optional(string)`,
+        `{?1: x, ?2: y}  // optional construction`,
+        `optional.none().orValue(true)`,
+        `optional.of(2).optMap(x, x * 2).orValue(1)`,
+        `{}[?'key'].orValue(10)`,
+        `%let values = {1: 2, 2: 4, 3: 6}`,
+        `optional.ofNonZeroValue(1).optFlatMap(x, values[?x]).value()`,
+        `optional.none().hasValue()`
+      ]
+    }
+  }],
+  [
+    "strings",
+  {
+    description: ``,
+    request: {
+      commands: [
+        `%option --extension "strings"`,
+        `"%s_%s_0x0%x".format([false, 5.0e20, 15])`,
+        `["a", "b", "c"].join("-")`,
+        `"123".reverse()`,
+        `"  abc  ".trim()`,
+      ]
+    }
+  }],
+  [
+    "math",
+  {
+    description: ``,
+    request: {
+      commands: [
+        `%option --extension "math"`,
+        `math.least(-42, 40, 20)`,
+        `math.least(-42, 40u, -20e2)`,
+        `math.greatest([1, 2, 3, 4, 5])`,
+      ]
+    }
+  }],
+  [
+    "bind",
+  {
+    description: ``,
+    request: {
+      commands: [
+        `%option --extension "bindings"`,
+        `cel.bind(x, 20, x * x)`,
+        `cel.bind(allow, [1, 2, 3, 4], [3, 2, 1, 1, 4].all(x, x in allow))`
+      ]
+    }
+  }]
+]);
 
 /**
  * Reference panel for REPL.
@@ -26,5 +172,14 @@ import { Component } from '@angular/core';
   styleUrls: ['./reference-panel-component.scss']
 })
 export class ReferencePanelComponent {
+  constructor(private readonly exampleService: ReplExampleService){}
 
+  startExample(id: string) {
+    const example = examples.get(id);
+    if (example) {
+      this.exampleService.postExample(example);
+    } else {
+      console.error("unknown example id: ", id);
+    }
+  }
 }

repl/appengine/web/src/app/reference_panel/reference-panel-module.ts

@@ -17,15 +17,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReferencePanelComponent } from './reference-panel-component';
-
-
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatListModule } from '@angular/material/list';
 
 @NgModule({
   declarations: [
     ReferencePanelComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatListModule,
   ],
   exports: [
     ReferencePanelComponent

repl/appengine/web/src/app/repl_console/repl-console-component.html

@@ -25,17 +25,18 @@ <h1>REPL Console</h1>
 
     <div class="repl-input-block" (keydown)="onEnter($event)">
         <!-- Inputs for previously entered REPL commands -->
-        <div class="statement-block" *ngFor="let response of lastEvaluate.responses; let i = index">
+        <div class="statement-block" *ngFor="let command of lastRequest.commands; let i = index">
             <mat-form-field class="statement-container" appearance="outline">
                 <mat-label>{{i + 1}}</mat-label>
 
                 <input matInput class="repl-stmt-input"
-                  value="{{lastRequest.commands[i]}}"
+                  value="{{command}}"
                   [attr.data-stmt-index]="i"
                   (keydown.ArrowUp)="handleUp(i)"
                   (keydown.ArrowDown)="handleDown(i)">
+
                 <mat-hint>
-                    <code class="repl-out-ok">{{response.replOutput || (response.issue? '&lt;err&gt;' : '&lt;ok&gt;' ) | trim:80}}</code>
+                    <code *ngIf="getResponse(i).evaluated" class="repl-out-ok">{{getResponse(i).replOutput || (getResponse(i).issue ? '&lt;err&gt;' : '&lt;ok&gt;' ) | trim:80}}</code>
                 </mat-hint>
 
             </mat-form-field>

repl/appengine/web/src/app/repl_console/repl-console-component.ts

@@ -15,7 +15,8 @@
  */
 
 import { Component } from '@angular/core';
-import { ReplApiService, EvaluateResponse, EvaluateRequest } from '../shared/repl-api-service';
+import { ReplApiService, EvaluateResponse, EvaluateRequest, CommandResponse } from '../shared/repl-api-service';
+import { Example, ReplExampleService } from '../shared/repl-example-service';
 
 /**
  * Component for the repl console.
@@ -30,7 +31,16 @@ export class ReplConsoleComponent {
   lastEvaluate: EvaluateResponse = {responses: [], evalTime: 0};
   lastRequest: EvaluateRequest = {commands: []};
 
-  constructor (private readonly replService: ReplApiService) {}
+  constructor (private readonly replService: ReplApiService, private readonly exampleService: ReplExampleService) {
+    exampleService.examplePosted$.subscribe({
+      next: (ex: Example) => {
+        this.lastRequest = ex.request;
+        this.lastEvaluate = {responses: [], evalTime: 0};
+        const input = document.querySelector<HTMLInputElement>(".repl-stmt-new");
+        if (input) { input.value = ""; input.focus(); }
+      }
+    });
+  }
 
   private evaluate(request : EvaluateRequest) {
     this.replService.evaluate(request)
@@ -45,13 +55,8 @@ export class ReplConsoleComponent {
       });
   }
 
-  onEnter(event : KeyboardEvent) : void {
-    if (event.key !== "Enter" || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    event.stopPropagation();
+  submit() {
     const request : EvaluateRequest = {commands: []};
-
     document.querySelectorAll(".repl-stmt-input").forEach(
       (el : Element) => {
         if (!(el instanceof HTMLInputElement)) {
@@ -65,6 +70,21 @@ export class ReplConsoleComponent {
     this.evaluate(request);
   }
 
+  onEnter(event : KeyboardEvent) : void {
+    if (event.key !== "Enter" || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    event.stopPropagation();
+    this.submit();
+  }
+
+  getResponse(i: number) : CommandResponse {
+    if (i < this.lastEvaluate.responses.length) {
+      return this.lastEvaluate.responses[i];
+    }
+    return {replOutput: "", issue: "", evaluated: false};
+  }
+
   reset() : void {
     this.lastEvaluate = {responses: [], evalTime: 0};
     this.lastRequest = {commands: []};

repl/appengine/web/src/app/shared/repl-api-service.ts

@@ -59,12 +59,11 @@ export class ReplApiService {
 
   constructor(private readonly httpClient : HttpClient) { }
 
-
   evalInternal(request : EvaluateRequest) : Observable<EvaluateResponse> {
     return this.httpClient.post<EvaluateResponse>(API, request, HTTP_OPTIONS);
   }
 
   evaluate(request : EvaluateRequest) : Observable<EvaluateResponse> {
     return this.evalInternal(request);
-  } 
+  }
 }