DH-4804 Query Editor Page Redesign (#274)

* DH-4875 [Enterprise] Save Send Run Refactor (#256)

* DH-4875 separation of save send and run

* DH-4875 refactor save send run

* DH-4875 [Enterprise] fix migration script location and adds enumarations

* query editor header

* remove default padding from page layout - wip query editor sections

* finished most of the layout

* add secondary message buttons

* finished query status - partial message section - partial resubmit

* added workflow limitations

* finished all flows -- cleanup pending

* cleanup

* fix bug (#277)

* set confidence score to none (#278)

* DH-4945 [ai][admin-console] display plain status when no evaluation score is present

* save generated message

* update submodule

* fix test

---------

Co-authored-by: Dishen <[email protected]>
Co-authored-by: dishenwang2023 <[email protected]>

apps/ai/clients/admin-console/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",

apps/ai/clients/admin-console/src/components/layout/page-layout.tsx

@@ -4,19 +4,22 @@ import { Separator } from '@/components/ui/separator'
 import { cn } from '@/lib/utils'
 import { FC, HTMLAttributes } from 'react'
 
-export type PageLayoutProps = HTMLAttributes<HTMLDivElement>
+interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {
+  disableBreadcrumb?: boolean
+}
 
 const PageLayout: FC<PageLayoutProps> = ({
   className,
   children,
+  disableBreadcrumb = false,
   ...props
 }: PageLayoutProps) => (
   <div className={cn('flex h-screen', className)} {...props}>
     <SidebarNav />
     <div className="w-full h-full overflow-auto flex flex-col">
-      <BreadcrumbHeader />
+      {!disableBreadcrumb && <BreadcrumbHeader />}
       <Separator />
-      <main className="grow flex flex-col overflow-auto p-6">{children}</main>
+      <main className="grow flex flex-col overflow-auto">{children}</main>
     </div>
   </div>
 )

apps/ai/clients/admin-console/src/components/query/custom-response-dialog.tsx → apps/ai/clients/admin-console/src/components/query/custom-message-dialog.tsx

@@ -10,63 +10,62 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormMessage,
 } from '@/components/ui/form'
 import { Textarea } from '@/components/ui/textarea'
 import { yupResolver } from '@hookform/resolvers/yup'
-import { Info } from 'lucide-react'
 import { FC, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import * as Yup from 'yup'
 
-const CUSTOM_RESPONSE_MAX_LENGTH = 3000
+const CUSTOM_MESSAGE_MAX_LENGTH = 3000
 
-export const customResponseFormSchema = Yup.object({
-  customResponse: Yup.string()
+export const customMessageFormSchema = Yup.object({
+  customMessage: Yup.string()
     .max(
-      CUSTOM_RESPONSE_MAX_LENGTH,
+      CUSTOM_MESSAGE_MAX_LENGTH,
       `The response can't be longer than 3000 characters`,
     )
     .required('Please enter a response for the query'),
 })
 
-type CustomResponseFormValues = Yup.InferType<typeof customResponseFormSchema>
+type CustomMessageFormValues = Yup.InferType<typeof customMessageFormSchema>
 
-interface CustomResponseDialogProps {
+interface CustomMessageDialogProps {
   initialValue: string
   isOpen: boolean
   title: string | JSX.Element
   description: string
-  onClose: (newCustomResponse?: string) => void
+  onClose: (newCustomMessage?: string) => void
 }
 
-const CustomResponseDialog: FC<CustomResponseDialogProps> = ({
+const CustomMessageDialog: FC<CustomMessageDialogProps> = ({
   initialValue,
   isOpen,
   title,
   description,
   onClose,
 }) => {
-  const form = useForm<CustomResponseFormValues>({
-    resolver: yupResolver(customResponseFormSchema),
+  const form = useForm<CustomMessageFormValues>({
+    resolver: yupResolver(customMessageFormSchema),
     defaultValues: {
-      customResponse: initialValue,
+      customMessage: initialValue,
     },
   })
 
   const handleCancel = () => {
+    form.reset({ customMessage: initialValue })
     onClose()
-    form.reset({ customResponse: initialValue })
   }
-  const handleContinue = (formValues: CustomResponseFormValues) => {
-    onClose(formValues.customResponse)
+  const handleContinue = (formValues: CustomMessageFormValues) => {
+    form.reset({ customMessage: initialValue })
+    onClose(formValues.customMessage)
   }
 
   useEffect(
-    () => form.reset({ customResponse: initialValue }),
+    () => form.reset({ customMessage: initialValue }),
     [form, initialValue],
   )
 
@@ -86,30 +85,26 @@ const CustomResponseDialog: FC<CustomResponseDialogProps> = ({
             </DialogHeader>
             <FormField
               control={form.control}
-              name="customResponse"
+              name="customMessage"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <Textarea {...field} />
+                    <Textarea {...field} rows={10} />
                   </FormControl>
                   <FormMessage />
-                  <FormDescription className="flex items-start gap-1 pt-2">
-                    <Info size={18} strokeWidth={2}></Info>
-                    {`This message will be sent as the question's response to the Slack thread.`}
-                  </FormDescription>
                 </FormItem>
               )}
             />
             <DialogFooter>
               <Button variant="outline" type="button" onClick={handleCancel}>
                 Cancel
               </Button>
-              <Button type="submit">Done</Button>
+              <Button type="submit">Save</Button>
             </DialogFooter>
           </form>
         </Form>
       </DialogContent>
     </Dialog>
   )
 }
-export default CustomResponseDialog
+export default CustomMessageDialog

apps/ai/clients/admin-console/src/components/query/loading-sql-results.tsx → apps/ai/clients/admin-console/src/components/query/loading-box.tsx

@@ -2,11 +2,9 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/utils'
 import { FC, HTMLAttributes } from 'react'
 
-export type LoadingSqlQueryResultsProps = HTMLAttributes<HTMLDivElement>
+export type LoadingBoxProps = HTMLAttributes<HTMLDivElement>
 
-const LoadingSqlQueryResults: FC<LoadingSqlQueryResultsProps> = ({
-  className,
-}) => {
+const LoadingBox: FC<LoadingBoxProps> = ({ className }) => {
   return (
     <div
       className={cn(
@@ -19,4 +17,4 @@ const LoadingSqlQueryResults: FC<LoadingSqlQueryResultsProps> = ({
   )
 }
 
-export default LoadingSqlQueryResults
+export default LoadingBox

apps/ai/clients/admin-console/src/components/query/loading.tsx

@@ -1,19 +1,28 @@
+import { SectionHeader } from '@/components/query/section-header'
 import { Skeleton } from '@/components/ui/skeleton'
 import { FC } from 'react'
 
 const LoadingQuery: FC = () => {
   return (
-    <div className="w-full h-full bg-gray-50 rounded-lg flex flex-col gap-3">
-      <div className="flex justify-between gap-5">
+    <div className="w-full h-full flex flex-col gap-3">
+      <div className="flex justify-between gap-32 p-6">
         <div className="w-2/3 flex flex-col gap-1">
+          <Skeleton className="h-10" />
+          <Skeleton className="h-6" />
+        </div>
+        <div className="w-1/3 flex flex-col gap-1">
+          <Skeleton className="h-10" />
           <Skeleton className="h-6" />
-          <Skeleton className="h-4" />
         </div>
-        <Skeleton className="w-1/3 h-11" />
       </div>
-      <Skeleton className="h-1/2" />
-      <Skeleton className="h-1/2" />
-      <Skeleton className="h-6 w-2/3" />
+      <SectionHeader>
+        <div className="h-10"></div>
+      </SectionHeader>
+      <Skeleton className="h-1/2 mx-6 my-3" />
+      <SectionHeader>
+        <div className="h-10"></div>
+      </SectionHeader>
+      <Skeleton className="h-1/2 mx-6 my-3" />
     </div>
   )
 }