[editor] Add variable substitution to presentation mode in editor v2

desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationMode.vue

@@ -25,6 +25,11 @@
         <i class="fa fa-times fa-fw" />
       </hue-button>
     </div>
+    <VariableSubstitution
+      :locations="locations"
+      :initial-variables="executor.variables"
+      @variables-changed="onVariablesChanged"
+    />
     <div class="presentation-mode-body">
       <div
         v-for="{ header, statement, executable } of presentationStatements"
@@ -45,6 +50,9 @@
 </template>
 
 <script lang="ts">
+  import { Variable } from 'apps/editor/components/variableSubstitution/types';
+  import VariableSubstitution from 'apps/editor/components/variableSubstitution/VariableSubstitution.vue';
+  import { IdentifierLocation } from 'parse/types';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
@@ -67,7 +75,7 @@
   const headerRegEx = /--(.*)$/m;
 
   @Component({
-    components: { HueButton, ResultTable, ExecutableActions, SqlText },
+    components: { VariableSubstitution, HueButton, ResultTable, ExecutableActions, SqlText },
     methods: { I18n }
   })
   export default class PresentationMode extends Vue {
@@ -77,6 +85,8 @@
     title?: string;
     @Prop({ required: false })
     description?: string;
+    @Prop()
+    locations!: IdentifierLocation[];
 
     get presentationStatements(): PresentationStatement[] {
       return (this.executor.executables as SqlExecutable[]).map(executable => {
@@ -104,5 +114,9 @@
       this.$emit('before-execute', executable);
       this.executor.activeExecutable = executable;
     }
+
+    onVariablesChanged(variables: Variable[]): void {
+      this.$emit('variables-changed', variables);
+    }
   }
 </script>

desktop/core/src/desktop/js/apps/editor/components/presentationMode/PresentationModeKoBridge.vue

@@ -24,10 +24,14 @@
     :description="description"
     @before-execute="onBeforeExecute"
     @close="onClose"
+    @variables-changed="onVariablesChanged"
   />
 </template>
 
 <script lang="ts">
+  import { Variable } from 'apps/editor/components/variableSubstitution/types';
+  import { IdentifierLocation } from 'parse/types';
+  import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/sqlWorkerHandler';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
@@ -45,9 +49,13 @@
     @Prop()
     executor: Executor | null = null;
     @Prop()
-    titleObservable: KnockoutObservable<string | undefined>;
+    titleObservable!: KnockoutObservable<string | undefined>;
     @Prop()
-    descriptionObservable: KnockoutObservable<string | undefined>;
+    descriptionObservable!: KnockoutObservable<string | undefined>;
+    @Prop()
+    initialVariables?: Variable[];
+
+    locations: IdentifierLocation[] = [];
 
     title: string | null = null;
     description: string | null = null;
@@ -58,15 +66,25 @@
 
     updated(): void {
       if (!this.initialized) {
-        this.title = this.titleObservable();
+        this.title = this.titleObservable() || null;
         this.subTracker.subscribe(this.titleObservable, (title?: string) => {
-          this.title = title;
+          this.title = title || null;
         });
 
-        this.description = this.descriptionObservable();
+        this.description = this.descriptionObservable() || null;
         this.subTracker.subscribe(this.descriptionObservable, (description?: string) => {
-          this.description = description;
+          this.description = description || null;
         });
+
+        this.subTracker.subscribe(
+          POST_FROM_LOCATION_WORKER_EVENT,
+          (e: { data?: { locations?: IdentifierLocation[] } }) => {
+            if (e.data && e.data.locations) {
+              this.locations = e.data.locations;
+            }
+          }
+        );
+
         this.initialized = true;
       }
     }
@@ -86,6 +104,12 @@
         new CustomEvent<void>('close', { bubbles: true })
       );
     }
+
+    onVariablesChanged(variables: Variable[]): void {
+      this.$el.dispatchEvent(
+        new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
+      );
+    }
   }
 
   export const COMPONENT_NAME = 'presentation-mode-ko-bridge';

desktop/libs/notebook/src/notebook/templates/editor2.mako

@@ -868,6 +868,9 @@
           },
           'close': function () {
             parentNotebook.isPresentationMode(false);
+          },
+          'variables-changed': function (event) {
+            setVariables(event.detail);
           }
         },
         vueKoProps: {