Browse Source

[ui] Vue 3 - Migrated ExecutableActions components

sreenaths 4 years ago
parent
commit
8b12576489

+ 6 - 6
desktop/core/src/desktop/js/apps/editor/components/ExecutableActions.test.ts

@@ -15,7 +15,7 @@
 // limitations under the License.
 // limitations under the License.
 
 
 import huePubSub from 'utils/huePubSub';
 import huePubSub from 'utils/huePubSub';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { mount, shallowMount } from '@vue/test-utils';
 import { mount, shallowMount } from '@vue/test-utils';
 import { EXECUTABLE_UPDATED_EVENT, ExecutionStatus } from 'apps/editor/execution/executable';
 import { EXECUTABLE_UPDATED_EVENT, ExecutionStatus } from 'apps/editor/execution/executable';
 import sessionManager from 'apps/editor/execution/sessionManager';
 import sessionManager from 'apps/editor/execution/sessionManager';
@@ -57,7 +57,7 @@ describe('ExecutableActions.vue', () => {
       }
       }
     });
     });
 
 
-    await Vue.nextTick();
+    await nextTick();
 
 
     expect(spy).toHaveBeenCalled();
     expect(spy).toHaveBeenCalled();
     expect(wrapper.element).toMatchSnapshot();
     expect(wrapper.element).toMatchSnapshot();
@@ -101,27 +101,27 @@ describe('ExecutableActions.vue', () => {
 
 
     expect(spy).toHaveBeenCalled();
     expect(spy).toHaveBeenCalled();
 
 
-    await Vue.nextTick();
+    await nextTick();
 
 
     // Click play
     // Click play
     expect(executeCalled).toBeFalsy();
     expect(executeCalled).toBeFalsy();
     expect(wrapper.get('button').text()).toContain('Execute');
     expect(wrapper.get('button').text()).toContain('Execute');
     wrapper.get('button').trigger('click');
     wrapper.get('button').trigger('click');
 
 
-    await Vue.nextTick();
+    await nextTick();
 
 
     expect(executeCalled).toBeTruthy();
     expect(executeCalled).toBeTruthy();
     mockExecutable.status = ExecutionStatus.running;
     mockExecutable.status = ExecutionStatus.running;
     huePubSub.publish(EXECUTABLE_UPDATED_EVENT, mockExecutable);
     huePubSub.publish(EXECUTABLE_UPDATED_EVENT, mockExecutable);
 
 
-    await Vue.nextTick();
+    await nextTick();
 
 
     // Click stop
     // Click stop
     expect(cancelCalled).toBeFalsy();
     expect(cancelCalled).toBeFalsy();
     expect(wrapper.get('button').text()).toContain('Stop');
     expect(wrapper.get('button').text()).toContain('Stop');
     wrapper.get('button').trigger('click');
     wrapper.get('button').trigger('click');
 
 
-    await Vue.nextTick();
+    await nextTick();
 
 
     expect(cancelCalled).toBeTruthy();
     expect(cancelCalled).toBeTruthy();
   });
   });

+ 133 - 98
desktop/core/src/desktop/js/apps/editor/components/ExecutableActions.vue

@@ -21,7 +21,7 @@
     <hue-button
     <hue-button
       v-if="loadingSession"
       v-if="loadingSession"
       key="loading-button"
       key="loading-button"
-      small="true"
+      :small="true"
       :disabled="disabled"
       :disabled="disabled"
       :title="I18n('Creating session')"
       :title="I18n('Creating session')"
     >
     >
@@ -31,8 +31,8 @@
     <hue-button
     <hue-button
       v-if="showExecute"
       v-if="showExecute"
       key="execute-button"
       key="execute-button"
-      small="true"
-      primary="true"
+      :small="true"
+      :primary="true"
       :disabled="disabled"
       :disabled="disabled"
       @click="execute"
       @click="execute"
     >
     >
@@ -42,7 +42,7 @@
     <hue-button
     <hue-button
       v-if="showStop && !stopping"
       v-if="showStop && !stopping"
       key="stop-button"
       key="stop-button"
-      small="true"
+      :small="true"
       alert="true"
       alert="true"
       @click="stop"
       @click="stop"
     >
     >
@@ -72,14 +72,14 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
+  import Executable from 'apps/editor/execution/executable';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import HueButton from 'components/HueButton.vue';
   import HueButton from 'components/HueButton.vue';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
   import huePubSub from 'utils/huePubSub';
   import huePubSub from 'utils/huePubSub';
   import I18n from 'utils/i18n';
   import I18n from 'utils/i18n';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop, Watch } from 'vue-property-decorator';
 
 
   import { Session } from 'apps/editor/execution/api';
   import { Session } from 'apps/editor/execution/api';
   import { EXECUTABLE_UPDATED_EVENT, ExecutionStatus } from 'apps/editor/execution/executable';
   import { EXECUTABLE_UPDATED_EVENT, ExecutionStatus } from 'apps/editor/execution/executable';
@@ -88,28 +88,91 @@
   export const EXECUTE_ACTIVE_EXECUTABLE_EVENT = 'executable.active.executable';
   export const EXECUTE_ACTIVE_EXECUTABLE_EVENT = 'executable.active.executable';
   const WHITE_SPACE_REGEX = /^\s*$/;
   const WHITE_SPACE_REGEX = /^\s*$/;
 
 
-  @Component({
-    components: { HueButton },
-    methods: { I18n }
-  })
-  export default class ExecutableActions extends Vue {
-    @Prop()
-    executable?: SqlExecutable;
-    @Prop()
-    beforeExecute?: (executable: Executable) => Promise<void>;
-
-    subTracker = new SubscriptionTracker();
-
-    loadingSession = true;
-    lastSession: Session | null = null;
-    partOfRunningExecution = false;
-    limit: number | null = null;
-    stopping = false;
-    status: ExecutionStatus = ExecutionStatus.ready;
-    hasStatement = false;
+  export default defineComponent({
+    components: {
+      HueButton
+    },
+
+    props: {
+      executable: {
+        type: Object as PropType<SqlExecutable>,
+        default: undefined
+      },
+      beforeExecute: {
+        type: Object as PropType<(executable: Executable) => Promise<void>>,
+        default: undefined
+      }
+    },
+
+    emits: ['limit-changed'],
+
+    setup(): {
+      subTracker: SubscriptionTracker;
+    } {
+      return {
+        subTracker: new SubscriptionTracker()
+      };
+    },
+
+    data(): {
+      loadingSession: boolean;
+      lastSession: Session | null;
+      partOfRunningExecution: boolean;
+      limit: number | null;
+      stopping: boolean;
+      status: ExecutionStatus;
+      hasStatement: boolean;
+    } {
+      return {
+        loadingSession: true,
+        lastSession: null,
+        partOfRunningExecution: false,
+        limit: null,
+        stopping: false,
+        status: ExecutionStatus.ready,
+        hasStatement: false
+      };
+    },
+
+    computed: {
+      waiting(): boolean {
+        return !!(this.executable && this.executable.isReady() && this.partOfRunningExecution);
+      },
+
+      disabled(): boolean {
+        return this.loadingSession || !this.executable || !this.hasStatement;
+      },
+
+      showExecute(): boolean {
+        return (
+          !!this.executable &&
+          !this.waiting &&
+          !this.loadingSession &&
+          this.status !== ExecutionStatus.running &&
+          this.status !== ExecutionStatus.streaming
+        );
+      },
+
+      showStop(): boolean {
+        return (
+          this.status === ExecutionStatus.running ||
+          this.status === ExecutionStatus.streaming ||
+          this.waiting
+        );
+      }
+    },
+
+    watch: {
+      executable(): void {
+        if (this.executable) {
+          this.updateFromExecutable(this.executable);
+        }
+      }
+    },
 
 
     mounted(): void {
     mounted(): void {
       this.subTracker.subscribe(EXECUTABLE_UPDATED_EVENT, executable => {
       this.subTracker.subscribe(EXECUTABLE_UPDATED_EVENT, executable => {
+        debugger;
         if (this.executable === executable) {
         if (this.executable === executable) {
           this.updateFromExecutable(executable);
           this.updateFromExecutable(executable);
         }
         }
@@ -120,85 +183,57 @@
           this.execute();
           this.execute();
         }
         }
       });
       });
-    }
+    },
 
 
-    destroyed(): void {
+    unmounted(): void {
       this.subTracker.dispose();
       this.subTracker.dispose();
-    }
+    },
 
 
-    get waiting(): boolean {
-      return !!(this.executable && this.executable.isReady() && this.partOfRunningExecution);
-    }
-
-    get disabled(): boolean {
-      return this.loadingSession || !this.executable || !this.hasStatement;
-    }
-
-    get showExecute(): boolean {
-      return (
-        !!this.executable &&
-        !this.waiting &&
-        !this.loadingSession &&
-        this.status !== ExecutionStatus.running &&
-        this.status !== ExecutionStatus.streaming
-      );
-    }
-
-    get showStop(): boolean {
-      return (
-        this.status === ExecutionStatus.running ||
-        this.status === ExecutionStatus.streaming ||
-        this.waiting
-      );
-    }
+    methods: {
+      I18n,
 
 
-    async execute(): Promise<void> {
-      huePubSub.publish('hue.ace.autocompleter.hide');
-      if (!this.executable) {
-        return;
-      }
-      if (this.beforeExecute) {
-        await this.beforeExecute(this.executable);
-      }
-      await this.executable.reset();
-      this.executable.execute();
-    }
-
-    async stop(): Promise<void> {
-      if (this.stopping || !this.executable) {
-        return;
-      }
-      this.stopping = true;
-      await this.executable.cancelBatchChain(true);
-      this.stopping = false;
-    }
-
-    @Watch('executable', { immediate: true })
-    executableChanged(): void {
-      if (this.executable) {
-        this.updateFromExecutable(this.executable);
-      }
-    }
+      async execute(): Promise<void> {
+        huePubSub.publish('hue.ace.autocompleter.hide');
+        if (!this.executable) {
+          return;
+        }
+        if (this.beforeExecute) {
+          await this.beforeExecute(this.executable);
+        }
+        await this.executable.reset();
+        this.executable.execute();
+      },
 
 
-    updateFromExecutable(executable: SqlExecutable): void {
-      const waitForSession =
-        !this.lastSession || this.lastSession.type !== executable.executor.connector().type;
-      this.status = executable.status;
-      this.hasStatement =
-        !executable.parsedStatement ||
-        !WHITE_SPACE_REGEX.test(executable.parsedStatement.statement);
-      this.partOfRunningExecution = executable.isPartOfRunningExecution();
-      this.limit = (executable.executor.defaultLimit && executable.executor.defaultLimit()) || null;
-      if (waitForSession) {
-        this.loadingSession = true;
-        this.lastSession = null;
-        sessionManager.getSession({ type: executable.executor.connector().id }).then(session => {
-          this.lastSession = session;
-          this.loadingSession = false;
-        });
+      async stop(): Promise<void> {
+        if (this.stopping || !this.executable) {
+          return;
+        }
+        this.stopping = true;
+        await this.executable.cancelBatchChain(true);
+        this.stopping = false;
+      },
+
+      updateFromExecutable(executable: SqlExecutable): void {
+        const waitForSession =
+          !this.lastSession || this.lastSession.type !== executable.executor.connector().type;
+        this.status = executable.status;
+        this.hasStatement =
+          !executable.parsedStatement ||
+          !WHITE_SPACE_REGEX.test(executable.parsedStatement.statement);
+        this.partOfRunningExecution = executable.isPartOfRunningExecution();
+        this.limit =
+          (executable.executor.defaultLimit && executable.executor.defaultLimit()) || null;
+        if (waitForSession) {
+          this.loadingSession = true;
+          this.lastSession = null;
+          sessionManager.getSession({ type: executable.executor.connector().id }).then(session => {
+            this.lastSession = session;
+            this.loadingSession = false;
+          });
+        }
       }
       }
     }
     }
-  }
+  });
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

+ 47 - 22
desktop/core/src/desktop/js/apps/editor/components/ExecutableActionsKoBridge.vue

@@ -25,26 +25,47 @@
 </template>
 </template>
 
 
 <script lang="ts">
 <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+
   import ExecutableActions from './ExecutableActions.vue';
   import ExecutableActions from './ExecutableActions.vue';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import SqlExecutable from 'apps/editor/execution/sqlExecutable';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
   import SubscriptionTracker from 'components/utils/SubscriptionTracker';
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
-  import { wrap } from 'vue/webComponentWrapper';
 
 
-  @Component({
-    components: { ExecutableActions }
-  })
-  export default class ExecutableActionsKoBridge extends Vue {
-    @Prop()
-    executableObservable?: KnockoutObservable<SqlExecutable | undefined>;
-    @Prop()
-    beforeExecute?: () => Promise<void>;
+  import { wrap } from 'vue/webComponentWrap';
+
+  const ExecutableActionsKoBridge = defineComponent({
+    components: {
+      ExecutableActions
+    },
+
+    props: {
+      executableObservable: {
+        type: Object as PropType<KnockoutObservable<SqlExecutable | undefined>>,
+        default: undefined
+      },
+      beforeExecute: {
+        type: Object as PropType<() => Promise<void>>,
+        default: undefined
+      }
+    },
+
+    setup(): {
+      subTracker: SubscriptionTracker;
+    } {
+      return {
+        subTracker: new SubscriptionTracker()
+      };
+    },
 
 
-    subTracker = new SubscriptionTracker();
-    initialized = false;
-    executable: SqlExecutable | null = null;
+    data(): {
+      initialized: boolean;
+      executable: SqlExecutable | null;
+    } {
+      return {
+        initialized: false,
+        executable: null
+      };
+    },
 
 
     updated(): void {
     updated(): void {
       if (!this.initialized && this.executableObservable) {
       if (!this.initialized && this.executableObservable) {
@@ -54,19 +75,23 @@
         });
         });
         this.initialized = true;
         this.initialized = true;
       }
       }
-    }
+    },
 
 
-    destroyed(): void {
+    unmounted(): void {
       this.subTracker.dispose();
       this.subTracker.dispose();
-    }
+    },
 
 
-    limitChanged(limit: number): void {
-      if (this.executable && this.executable.executor.defaultLimit) {
-        this.executable.executor.defaultLimit(limit);
+    methods: {
+      limitChanged(limit: number): void {
+        if (this.executable && this.executable.executor.defaultLimit) {
+          this.executable.executor.defaultLimit(limit);
+        }
       }
       }
     }
     }
-  }
+  });
 
 
   export const COMPONENT_NAME = 'executable-actions-ko-bridge';
   export const COMPONENT_NAME = 'executable-actions-ko-bridge';
   wrap(COMPONENT_NAME, ExecutableActionsKoBridge);
   wrap(COMPONENT_NAME, ExecutableActionsKoBridge);
+
+  export default ExecutableActionsKoBridge;
 </script>
 </script>