Drawer updates

questdb · Oct 12, 2023 · f236d7a · f236d7a
1 parent 56dc02e
commit f236d7a
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 61 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@styled-icons-remix-editor-npm-10.46.0-72d68f03ca-d72340d2de.zip b/.yarn/cache/@styled-icons-remix-editor-npm-10.46.0-72d68f03ca-d72340d2de.zip
diff --git a/packages/web-console/package.json b/packages/web-console/package.json
@@ -40,6 +40,7 @@
     "@styled-icons/fa-regular": "10.47.0",
     "@styled-icons/fluentui-system-filled": "10.47.0",
     "@styled-icons/material": "10.47.0",
+    "@styled-icons/remix-editor": "^10.46.0",
     "@styled-icons/remix-fill": "10.46.0",
     "@styled-icons/remix-line": "10.46.0",
     "animate.css": "3.7.2",

diff --git a/packages/web-console/src/components/Drawer/content-wrapper.tsx b/packages/web-console/src/components/Drawer/content-wrapper.tsx
@@ -10,7 +10,7 @@ export const ContentWrapper = styled(Box).attrs({
     4.5rem = drawer title
     4.5rem = footer
   */
-  height: calc(100vh - 4.5rem - 4.5rem - 4.5rem);
+  height: calc(100vh - 4.5rem - 4.5rem);
 
   form {
     width: 100%;

diff --git a/packages/web-console/src/components/Drawer/index.tsx b/packages/web-console/src/components/Drawer/index.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import * as RadixDialog from "@radix-ui/react-dialog"
 import styled, { css } from "styled-components"
-import { ForwardRef, Heading, Overlay } from "@questdb/react-components"
+import { ForwardRef, Overlay } from "@questdb/react-components"
 import { Close } from "@styled-icons/remix-line"
 import { GroupHeader } from "./group-header"
 import { GroupItem } from "./group-item"
@@ -14,6 +14,7 @@ type DrawerProps = {
   mode?: "modal" | "side"
   children: React.ReactNode
   title?: React.ReactNode
+  afterTitle?: React.ReactNode
   trigger: React.ReactNode
   width?: string
   open?: boolean
@@ -101,6 +102,7 @@ export const Drawer = ({
   children,
   trigger,
   title,
+  afterTitle,
   width,
   open,
   onOpenChange,
@@ -144,6 +146,7 @@ export const Drawer = ({
           {(title || withCloseButton) && (
             <Panel.Header
               title={title}
+              afterTitle={afterTitle}
               {...(withCloseButton && {
                 afterTitle: (
                   <StyledClose {...(onDismiss ? { onClick: onDismiss } : {})}>

diff --git a/packages/web-console/src/components/Sidebar/navigation.tsx b/packages/web-console/src/components/Sidebar/navigation.tsx
@@ -8,7 +8,6 @@ type NavigationProps = Readonly<{
 export const Navigation = styled(PrimaryToggleButton)<NavigationProps>`
   display: flex;
   flex-direction: column;
-  height: 4rem;
   align-items: center;
   justify-content: center;
   cursor: pointer;

diff --git a/packages/web-console/src/components/TableSchemaDialog/columns.tsx b/packages/web-console/src/components/TableSchemaDialog/columns.tsx
@@ -6,8 +6,7 @@ import { Form } from "../Form"
 import { Text } from ".."
 import { Drawer } from "../Drawer"
 import { VirtualList } from "../VirtualList"
-import { Button } from "@questdb/react-components"
-import { AddCircle, Information } from "@styled-icons/remix-line"
+import { Information } from "@styled-icons/remix-line"
 import { Action, SchemaColumn } from "./types"
 import { Column } from "./column"
 
@@ -36,21 +35,6 @@ const Error = styled(Drawer.GroupItem).attrs({ direction: "column" })`
   align-items: center;
 `
 
-const AddColumn = ({ onAdd }: { onAdd: () => void }) => (
-  <Drawer.GroupItem direction="column">
-    <AddBox>
-      <Button
-        prefixIcon={<AddCircle size="18px" />}
-        skin="transparent"
-        onClick={onAdd}
-        type="button"
-      >
-        Add column
-      </Button>
-    </AddBox>
-  </Drawer.GroupItem>
-)
-
 export const Columns = ({
   action,
   isEditLocked,
@@ -66,15 +50,6 @@ export const Columns = ({
   const watchTimestamp = watch("timestamp")
   const watchSchemaColumns = getValues()["schemaColumns"]
 
-  const addColumn = () => {
-    append({
-      name: "",
-      type: action === "import" ? "" : "STRING",
-      pattern: "",
-      precision: "",
-    })
-  }
-
   const listItemContent = useCallback(
     (index: number) => {
       const column = watch(`schemaColumns.${index}`)
@@ -99,10 +74,6 @@ export const Columns = ({
             }}
             timestamp={watchTimestamp}
           />
-
-          {index === watchSchemaColumns.length - 1 && !isEditLocked && (
-            <AddColumn onAdd={addColumn} />
-          )}
         </>
       )
     },
@@ -134,14 +105,12 @@ export const Columns = ({
           </Error>
         ))}
       <SchemaRoot>
-        {watchSchemaColumns.length > 0 ? (
+        {watchSchemaColumns.length > 0 && (
           <VirtualList
             itemContent={listItemContent}
             totalCount={watchSchemaColumns.length}
             followOutput={true}
           />
-        ) : (
-          !isEditLocked && <AddColumn onAdd={addColumn} />
         )}
       </SchemaRoot>
 

diff --git a/packages/web-console/src/components/TableSchemaDialog/dialog.tsx b/packages/web-console/src/components/TableSchemaDialog/dialog.tsx
@@ -3,8 +3,8 @@ import { Button } from "@questdb/react-components"
 import { Box } from "../Box"
 import { Text } from "../Text"
 import styled from "styled-components"
-import { Table as TableIcon, Edit } from "@styled-icons/remix-line"
-import { InfoCircle, Undo } from "@styled-icons/boxicons-regular"
+import { AddCircle, Table as TableIcon, Edit } from "@styled-icons/remix-line"
+import { InfoCircle } from "@styled-icons/boxicons-regular"
 import { Form } from "../Form"
 import { Columns } from "./columns"
 import { Drawer } from "../Drawer"
@@ -16,9 +16,12 @@ import { isValidTableName } from "./isValidTableName"
 import * as QuestDB from "../../utils/questdb"
 import { useDispatch } from "react-redux"
 import { actions } from "../../store"
+import { Panel } from "../../components/Panel"
+import { useFieldArray } from "react-hook-form"
 
 const StyledContentWrapper = styled(Drawer.ContentWrapper)`
   --columns: auto 120px; /* magic numbers to fit input, type dropdown and remove button nicely */
+  height: calc(100vh - 4.5rem - 4.5rem);
 `
 
 const Items = styled(Box).attrs({ gap: "0", flexDirection: "column" })`
@@ -59,6 +62,41 @@ type Props = {
   ctaText: string
 }
 
+const Actions = ({
+  action,
+  ctaText,
+}: {
+  action: Props["action"]
+  ctaText: Props["ctaText"]
+}) => {
+  const { append } = useFieldArray({
+    name: "schemaColumns",
+  })
+
+  return (
+    <Box gap="1rem">
+      <Button
+        prefixIcon={<AddCircle size="18px" />}
+        skin="secondary"
+        onClick={() => {
+          append({
+            name: "",
+            type: action === "import" ? "" : "STRING",
+            pattern: "",
+            precision: "",
+          })
+        }}
+        type="button"
+      >
+        Add column
+      </Button>
+      <Form.Submit prefixIcon={<TableIcon size={18} />} variant="success">
+        {ctaText}
+      </Form.Submit>
+    </Box>
+  )
+}
+
 export const Dialog = ({
   action,
   name,
@@ -159,7 +197,6 @@ export const Dialog = ({
   return (
     <Drawer
       mode={action === "add" ? "side" : "modal"}
-      title={name !== "" ? `Table schema for ${name}` : "Create table"}
       open={open}
       trigger={
         trigger ?? (
@@ -199,6 +236,10 @@ export const Dialog = ({
           onChange={(values) => setCurrentValues(values as SchemaFormValues)}
           validationSchema={validationSchema}
         >
+          <Panel.Header
+            title={name !== "" ? `Table schema for ${name}` : "Create table"}
+            afterTitle={<Actions ctaText={ctaText} action={action} />}
+          />
           <Items>
             <Inputs>
               <Drawer.GroupItem direction="column">
@@ -305,28 +346,6 @@ export const Dialog = ({
 
               <Columns action={action} isEditLocked={isEditLocked} />
             </Inputs>
-
-            <Drawer.Actions>
-              {action === "import" && (
-                <Form.Cancel<SchemaFormValues>
-                  prefixIcon={<Undo size={18} />}
-                  variant="secondary"
-                  defaultValues={defaults}
-                  onClick={() => {
-                    onOpenChange(undefined)
-                  }}
-                >
-                  Dismiss
-                </Form.Cancel>
-              )}
-
-              <Form.Submit
-                prefixIcon={<TableIcon size={18} />}
-                variant="success"
-              >
-                {ctaText}
-              </Form.Submit>
-            </Drawer.Actions>
           </Items>
         </Form>
       </StyledContentWrapper>

diff --git a/packages/web-console/src/scenes/News/index.tsx b/packages/web-console/src/scenes/News/index.tsx
@@ -64,6 +64,11 @@ const NewsText = styled(Text).attrs({ color: "foreground" })`
     font-size: 1.6rem;
   }
 
+  p {
+    font-size: ${({ theme }) => theme.fontSize.lg};
+    line-height: 1.75;
+  }
+
   code {
     background-color: ${({ theme }) => theme.color.selection};
     padding: 0.2rem 0.4rem;

diff --git a/yarn.lock b/yarn.lock
@@ -3000,6 +3000,7 @@ __metadata:
     "@styled-icons/fa-regular": 10.47.0
     "@styled-icons/fluentui-system-filled": 10.47.0
     "@styled-icons/material": 10.47.0
+    "@styled-icons/remix-editor": ^10.46.0
     "@styled-icons/remix-fill": 10.46.0
     "@styled-icons/remix-line": 10.46.0
     "@styled-icons/styled-icon": ^10.7.0
@@ -5224,6 +5225,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@styled-icons/remix-editor@npm:^10.46.0":
+  version: 10.46.0
+  resolution: "@styled-icons/remix-editor@npm:10.46.0"
+  dependencies:
+    "@babel/runtime": ^7.19.0
+    "@styled-icons/styled-icon": ^10.7.0
+  peerDependencies:
+    react: "*"
+    styled-components: "*"
+  checksum: d72340d2de4711d0ac4a36e57860178b115fa691f930744ae25405c34c45027d2073d147cf2ef39d40e32dad5d3e7f8341b297b1dae386b0a2a90df1675a6422
+  languageName: node
+  linkType: hard
+
 "@styled-icons/remix-fill@npm:10.46.0":
   version: 10.46.0
   resolution: "@styled-icons/remix-fill@npm:10.46.0"