feat: button to create model from pretemplated sql

quarylabs · May 9, 2024 · c8931df · c8931df
1 parent fad5437
commit c8931df
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 21 deletions.
diff --git a/js/packages/quary-extension-bus/src/callBacks.ts b/js/packages/quary-extension-bus/src/callBacks.ts
@@ -54,6 +54,7 @@ export type Callbacks = {
   chartViewRunQuery: ChartFile
   chartViewChangeHandler: ChartFile
   chartViewOpenTextEditor: null
+  chartViewCreateModel: string
 }
 
 export const useCallBackFrontEnd = <T extends keyof Callbacks>(

diff --git a/js/packages/quary-extension-ui/src/components/ChartEditor.stories.tsx b/js/packages/quary-extension-ui/src/components/ChartEditor.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta<typeof Card> = {
     registerChangeChartFile: { action: 'change chart file' },
     onClickRunQuery: { action: 'run query' },
     onClickEdit: { action: 'edit' },
+    onClickCreateModel: { action: 'create model' },
   },
 }
 

diff --git a/js/packages/quary-extension-ui/src/components/ChartEditor.tsx b/js/packages/quary-extension-ui/src/components/ChartEditor.tsx
@@ -13,6 +13,7 @@ interface Props {
   allAssets: string[]
   onClickEdit: () => void
   onClickRunQuery: (chartFile: ChartFile) => void
+  onCLickCreateModel: (sql: string) => void
   registerChangeChartFile: (config: ChartFile) => void
 }
 
@@ -24,13 +25,15 @@ export const ChartEditor: React.FC<Props> = ({
   onClickEdit,
   registerChangeChartFile,
   title,
+  onCLickCreateModel,
 }) => (
   <div className="pt-1">
     <WrappedMemoizedChartEditorHeader
       data={chartFile.source}
       allAssets={allAssets}
       disabled={chartResults.type === 'loading'}
       onClickEdit={onClickEdit}
+      onClickCreateModel={onCLickCreateModel}
       onClickRunQuery={(source) => {
         onClickRunQuery({
           ...chartFile,

diff --git a/js/packages/quary-extension-ui/src/components/ChartEditorHeader.stories.tsx b/js/packages/quary-extension-ui/src/components/ChartEditorHeader.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
+import * as React from 'react'
 import { Card } from './Card'
 import { ChartEditorHeader } from './ChartEditorHeader'
 

diff --git a/js/packages/quary-extension-ui/src/components/ChartEditorHeader.tsx b/js/packages/quary-extension-ui/src/components/ChartEditorHeader.tsx
@@ -1,6 +1,6 @@
 import { ChartFile } from '@quary/proto/quary/service/v1/chart_file'
 import * as z from 'zod'
-import { PencilSquareIcon, PlayIcon } from '@heroicons/react/20/solid'
+import { PencilSquareIcon, PlayIcon, PlusIcon } from '@heroicons/react/20/solid'
 import React, { useState } from 'react'
 import {
   Select,
@@ -12,6 +12,12 @@ import {
   SelectValue,
 } from './ui/select'
 import { Button } from './ui/button'
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from './ui/tooltip'
 import { Input } from '@/components/ui/input.tsx'
 
 interface Props {
@@ -24,6 +30,8 @@ interface Props {
   onClickRunQuery: (source: ChartFile['source']) => void
   // open text editor
   onClickEdit: () => void
+  // create a model from the sql should open file
+  onClickCreateModel: (sql: string) => void
 }
 
 export const ChartEditorHeader: React.FC<Props> = ({
@@ -32,6 +40,7 @@ export const ChartEditorHeader: React.FC<Props> = ({
   disabled,
   onChangeSource: onChangeSourceProp,
   onClickRunQuery,
+  onClickCreateModel,
   onClickEdit,
 }) => {
   const [state, changeState] = useState(data)
@@ -86,18 +95,25 @@ export const ChartEditorHeader: React.FC<Props> = ({
         allAssets={allAssets}
         disabled={disabled}
         values={values}
-        onChangeSource={changeState}
+        onChangeSource={onChangeSource}
+        onClickCreateModel={onClickCreateModel}
       />
-      <Button
+      <RunQueryButton
         disabled={disabled}
-        size="icon"
         onClick={() => onClickRunQuery(mapFormToChartFileSource(values))}
-      >
-        <PlayIcon className="h-4 w-4" />
-      </Button>
-      <Button size="icon" onClick={onClickEdit}>
-        <PencilSquareIcon className="h-4 w-4" />
-      </Button>
+      />
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>
+            <Button size="icon" onClick={onClickEdit} disabled={disabled}>
+              <PencilSquareIcon className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Edit Yaml</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   )
 }
@@ -107,16 +123,17 @@ interface SubFormProps {
   disabled: boolean
   onChangeSource: (source: ChartFile['source']) => void
   allAssets: string[]
+  onClickCreateModel: (sql: string) => void
 }
 
 const SubForm: React.FC<SubFormProps> = ({
   values,
   disabled,
   onChangeSource,
   allAssets,
+  onClickCreateModel,
 }) => {
   switch (values.type) {
-    // TODO Implement other cases
     case 'rawSql':
       return (
         <div className="flex-1">
@@ -134,7 +151,7 @@ const SubForm: React.FC<SubFormProps> = ({
       )
     case 'preTemplatedSql':
       return (
-        <div className="flex-1">
+        <div className="flex flex-1 flex-row items-center gap-1">
           <Input
             disabled={disabled}
             value={values.preTemplatedSql}
@@ -145,6 +162,10 @@ const SubForm: React.FC<SubFormProps> = ({
               })
             }}
           />
+          <CreateModelButton
+            onClick={() => onClickCreateModel(values.preTemplatedSql)}
+            disabled={disabled}
+          />
         </div>
       )
     case 'reference':
@@ -245,3 +266,45 @@ const FormSchema = z.union([
 ])
 
 type FormValues = z.infer<typeof FormSchema>
+
+const CreateModelButton = ({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void
+  disabled: boolean
+}) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger>
+        <Button size="icon" onClick={onClick} disabled={disabled}>
+          <PlusIcon className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Create Model</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+)
+
+const RunQueryButton = ({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void
+  disabled: boolean
+}) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger>
+        <Button size="icon" onClick={onClick} disabled={disabled}>
+          <PlayIcon className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Run Query</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+)
diff --git a/js/packages/quary-extension-ui/src/views/ChartEditorView.tsx b/js/packages/quary-extension-ui/src/views/ChartEditorView.tsx
@@ -9,19 +9,25 @@ interface Props {
 }
 
 export const ChartEditorView: React.FC<Props> = ({ chart }) => {
-  const { chartViewChangeHandler, chartViewRunQuery, chartViewOpenTextEditor } =
-    useCallBackFrontEnd(
-      [
-        'chartViewChangeHandler',
-        'chartViewRunQuery',
-        'chartViewOpenTextEditor',
-      ],
-      vscode.postMessage,
-    )
+  const {
+    chartViewChangeHandler,
+    chartViewRunQuery,
+    chartViewOpenTextEditor,
+    chartViewCreateModel,
+  } = useCallBackFrontEnd(
+    [
+      'chartViewChangeHandler',
+      'chartViewRunQuery',
+      'chartViewOpenTextEditor',
+      'chartViewCreateModel',
+    ],
+    vscode.postMessage,
+  )
   const [chartFile, setChartFile] = React.useState(chart.chartFile)
 
   return (
     <ChartEditor
+      onCLickCreateModel={chartViewCreateModel}
       title={chart.title}
       chartResults={chart.results}
       chartFile={

diff --git a/js/packages/quary-extension/src/web/chartCustomEditor.ts b/js/packages/quary-extension/src/web/chartCustomEditor.ts
@@ -474,6 +474,16 @@ export class ChartEditorProvider
           'default',
         )
       }
+      case 'chartViewCreateModel': {
+        const sql = e.payload as string
+        const doc = await vscode.workspace.openTextDocument({
+          language: 'sql',
+          content: sql,
+        })
+        return vscode.window.showTextDocument(doc, {
+          preview: true,
+        })
+      }
       default: {
         throw new Error(`Error message, received message of type ${e.type}`)
       }