fix: save feature

src/webview_provider/docsEditPanel.ts

@@ -952,6 +952,7 @@ export class DocsEditViewPanel implements WebviewViewProvider {
             body: {
               saved: true,
               tests,
+              documentation: this.documentation,
             },
             status: true,
           },

webview_panels/src/modules/documentationEditor/DocumentationEditor.tsx

@@ -115,6 +115,7 @@ const DocumentationEditor = (): JSX.Element => {
       <Stack className="mb-2 justify-content-between">
         <SearchColumnsInput />
         <Stack>
+          <SaveDocumentation />
           <BulkGenerateButton />
           <CommonActionButtons />
         </Stack>
@@ -146,7 +147,6 @@ const DocumentationEditor = (): JSX.Element => {
               </Stack>
               <DocGeneratorColumnsList />
             </Stack>
-            <SaveDocumentation />
           </Stack>
         </Stack>
       </div>

webview_panels/src/modules/documentationEditor/components/docGenerator/BulkGenerateButton.tsx

@@ -24,7 +24,12 @@ const BulkGenerateButton = (): JSX.Element => {
   >();
   const ref = useRef<HTMLDivElement | null>(null);
   const {
-    state: { currentDocsData, userInstructions },
+    state: {
+      currentDocsData,
+      userInstructions,
+      isDocGeneratedForAnyColumn,
+      isTestUpdatedForAnyColumn,
+    },
     dispatch,
   } = useDocumentationContext();
 
@@ -143,13 +148,18 @@ const BulkGenerateButton = (): JSX.Element => {
     }
   };
 
+  const color =
+    isDocGeneratedForAnyColumn || isTestUpdatedForAnyColumn
+      ? "secondary"
+      : "primary";
+
   return (
     <>
       <div ref={ref}>
         <PopoverWithButton
           width="auto"
           button={
-            <DropdownButton onToggleClick={noop} onClick={noop}>
+            <DropdownButton onToggleClick={noop} onClick={noop} color={color}>
               <ShinesIcon /> Bulk generate
             </DropdownButton>
           }

webview_panels/src/modules/documentationEditor/components/saveDocumentation/SaveDocumentation.tsx

@@ -1,18 +1,33 @@
-import { MoreIcon } from "@assets/icons";
 import { executeRequestInSync } from "@modules/app/requestExecutor";
 import useDocumentationContext from "@modules/documentationEditor/state/useDocumentationContext";
-import { Button, IconButton, Popover, PopoverBody, List, Stack } from "@uicore";
-import { useEffect, useState } from "react";
+import {
+  Button,
+  Stack,
+  DropdownButton,
+  PopoverWithButton,
+  PopoverWithButtonRef,
+} from "@uicore";
+import { MouseEvent, useEffect, useRef, useState } from "react";
 import {
   setIsDocGeneratedForAnyColumn,
   setIsTestUpdatedForAnyColumn,
+  updateCurrentDocsData,
 } from "@modules/documentationEditor/state/documentationSlice";
 import classes from "../../styles.module.scss";
+import { noop } from "antd/es/_util/warning";
+import { DBTDocumentation } from "@modules/documentationEditor/state/types";
 
+/**
+ * Handles save documentation functionality
+ * Conditions:
+ *  - save brand new model and no schema.yml
+ *  - save brand new model but schema.yml exists, user wants to save in different yml file
+ *  - save existing model but no schema.yml entry
+ *  - update existing model
+ */
 const SaveDocumentation = (): JSX.Element | null => {
   const [patchPath, setPatchPath] = useState("");
-  const [dialogType, setDialogType] = useState("Existing file");
-  const [openPopover, setOpenPopover] = useState(false);
+  const popoverRef = useRef<PopoverWithButtonRef | null>(null);
   const {
     state: {
       currentDocsData,
@@ -23,32 +38,37 @@ const SaveDocumentation = (): JSX.Element | null => {
     dispatch,
   } = useDocumentationContext();
 
-  const saveDocumentation = async () => {
+  const saveDocumentation = async (
+    dialogType?: "New file" | "Existing file",
+  ) => {
     const result = (await executeRequestInSync("saveDocumentation", {
       ...currentDocsData,
       updatedTests: currentDocsTests,
       patchPath,
       dialogType,
-    })) as { saved: boolean };
+    })) as { saved: boolean; documentation: DBTDocumentation };
     if (result.saved) {
       dispatch(setIsDocGeneratedForAnyColumn(false));
       dispatch(setIsTestUpdatedForAnyColumn(false));
+      if (result.documentation) {
+        dispatch(updateCurrentDocsData(result.documentation));
+      }
+    }
+  };
+
+  const onSaveBtnClick = async (e: MouseEvent) => {
+    e.stopPropagation();
+    if (!currentDocsData?.patchPath) {
+      popoverRef.current?.open();
+      return;
     }
+    await saveDocumentation();
   };
 
   useEffect(() => {
     setPatchPath(currentDocsData?.patchPath ?? "");
   }, [currentDocsData?.patchPath]);
 
-  const handleChange = (newValue: string) => {
-    setDialogType(newValue);
-    onClick();
-  };
-
-  const onClick = () => {
-    setOpenPopover((prev) => !prev);
-  };
-
   const options = [
     { label: "Existing file", value: "Existing file" },
     { label: "New file", value: "New file" },
@@ -59,46 +79,57 @@ const SaveDocumentation = (): JSX.Element | null => {
   }
 
   return (
-    <Stack direction="row" className={classes.save}>
-      <h4>Path:</h4>
-      <p>{currentDocsData?.patchPath ?? "Write path"}</p>
+    <PopoverWithButton
+      width="auto"
+      ref={popoverRef}
+      button={
+        <DropdownButton
+          onToggleClick={noop}
+          color="primary"
+          onClick={onSaveBtnClick}
+        >
+          Save
+        </DropdownButton>
+      }
+      popoverProps={{
+        placement: "bottom",
+        hideArrow: true,
+      }}
+    >
+      {() => (
+        <Stack direction="column" className={classes.saveDocumentation}>
+          {currentDocsData?.patchPath ? (
+            <>
+              <h4 className="mb-0">Current path:</h4>
+              <p>{currentDocsData.patchPath}</p>
 
-      {currentDocsData?.patchPath ? null : (
-        <>
-          <IconButton id="file-path" onClick={onClick}>
-            <MoreIcon />
-          </IconButton>
-          <Popover
-            isOpen={openPopover}
-            target="file-path"
-            placement="top"
-            hideArrow
-            className={classes.popover}
-          >
-            <PopoverBody className={classes.popoverBody}>
-              <List>
-                {options.map((option) => (
-                  <li key={option.label}>
-                    <Button
-                      color="link"
-                      className={`${
-                        dialogType === option.value ? "active" : ""
-                      }`}
-                      onClick={() => handleChange(option.value)}
-                    >
-                      {option.label}
-                    </Button>
-                  </li>
-                ))}
-              </List>
-            </PopoverBody>
-          </Popover>
-        </>
+              <Stack className="justify-content-end">
+                <Button color="primary" onClick={() => saveDocumentation()}>
+                  Save
+                </Button>
+              </Stack>
+            </>
+          ) : (
+            <Stack className="align-items-center">
+              <p className="m-0">Save to: </p>
+              {options.map((option) => (
+                <Button
+                  key={option.label}
+                  color="primary"
+                  onClick={() =>
+                    saveDocumentation(
+                      option.value as "New file" | "Existing file",
+                    )
+                  }
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </Stack>
+          )}
+        </Stack>
       )}
-      <Button color="primary" onClick={saveDocumentation}>
-        Save
-      </Button>
-    </Stack>
+    </PopoverWithButton>
   );
 };
 

webview_panels/src/modules/documentationEditor/styles.module.scss

@@ -141,42 +141,6 @@
           margin-bottom: 16px;
         }
       }
-      & .save {
-        align-items: center;
-        position: sticky;
-        z-index: 5;
-        bottom: 0;
-        border-top: 1px solid var(--stroke--disable);
-        background: var(--background--02, #28292c);
-        padding: 10px 20px;
-
-        h5 {
-          margin-right: 10px;
-          margin-bottom: 0;
-        }
-
-        h5,
-        button {
-          text-wrap: nowrap;
-        }
-
-        button {
-          height: 100%;
-        }
-        & p {
-          border-radius: 2px;
-          border: 1px solid var(--stroke--disable, #424750);
-          background: var(--background--02);
-          margin-bottom: 0;
-          flex: 1;
-          font-size: 1rem;
-          padding: 8px 12px;
-        }
-        & :global #file-path {
-          background: var(--background--02);
-          color: var(--text-color--title);
-        }
-      }
     }
     & .result-body {
       width: 40%;
@@ -363,3 +327,12 @@
     min-width: 200px;
   }
 }
+
+.saveDocumentation {
+
+  li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}

webview_panels/src/testUtils/documentation/index.ts

@@ -36,7 +36,7 @@ export const DBTDocumentationFactory = Sync.makeFactory<DBTDocumentation>({
   description: each(() => faker.lorem.paragraph()),
   generated: faker.datatype.boolean(),
   name: each(() => faker.database.column()),
-  patchPath: undefined,
+  patchPath: faker.system.filePath(),
   uniqueId: "",
   resource_type: "model",
 });

webview_panels/src/uiCore/components/dropdownButton/DropdownButton.tsx

@@ -13,7 +13,10 @@ const DropdownButton = (props: Props): JSX.Element => {
       <Button color="primary" {...props}>
         {props.children}
       </Button>
-      <IconButton onClick={props.onToggleClick} color="primary">
+      <IconButton
+        onClick={props.onToggleClick}
+        color={props.color ?? "primary"}
+      >
         <ChevronDownIcon />
       </IconButton>
     </Stack>

webview_panels/src/uiCore/components/dropdownButton/styles.module.scss

@@ -7,4 +7,9 @@
     border-radius: 0 2px 2px 0;
     background: var(--action-brand-dark);
   }
+
+  & :global .btn-secondary:last-child {
+    border-radius: 0 2px 2px 0;
+    background: var(--bs-btn-active-bg);
+  }
 }