@malloy-publisher/sdk 0.0.87 → 0.0.89

package/src/components/Workbook/MutableCell.tsx

@@ -58,6 +58,7 @@ export function MutableCell({
    onDelete,
    addButtonCallback,
 }: NotebookCellProps) {
+   const [value, setValue] = useState(cell.value);
    const [codeExpanded, setCodeExpanded] =
       React.useState<boolean>(expandCodeCell);
    const [embeddingExpanded, setEmbeddingExpanded] =
@@ -83,13 +84,9 @@ export function MutableCell({
             setHighlightedMalloyCode(code);
          });
    }, [cell]);
-   const [value, setValue] = useState(cell.value);
    React.useEffect(() => {
       document.documentElement.setAttribute("data-color-mode", "light");
    });
-   const updateMarkdown = useDebounce((newValue: string) => {
-      onCellChange({ ...cell, value: newValue });
-   });
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
    const handleDeleteConfirm = () => {
@@ -98,7 +95,7 @@ export function MutableCell({
    };
    const noSources = sourceAndPaths.length === 0;
 
-   const saveResult = () => {
+   const saveResult = React.useCallback(() => {
       // Get the current modelPath and sourceName from the selected source
       const currentSource = sourceAndPaths[selectedSourceIndex];
       const modelPath = currentSource?.modelPath || cell.modelPath || "";
@@ -109,7 +106,7 @@ export function MutableCell({
       // the stringified JSON objects that are stored in the cell.
       onCellChange({
          ...cell,
-         value: query.query,
+         value: cell.isMarkdown ? value : query.query,
          result: query.malloyResult
             ? JSON.stringify(query.malloyResult)
             : undefined,
@@ -119,7 +116,7 @@ export function MutableCell({
          sourceName,
          modelPath,
       });
-   };
+   }, [cell, value, query, onCellChange, selectedSourceIndex, sourceAndPaths]);
 
    const deleteButton = (
       <Tooltip title="Delete Cell">
@@ -160,11 +157,15 @@ export function MutableCell({
          </DialogActions>
       </Dialog>
    );
+   const saveAndClose = () => {
+      saveResult();
+      onClose();
+   };
    const buttons = cell.isMarkdown ? (
       <>
          {editingMarkdown ? (
             <Tooltip title="Save">
-               <IconButton size="small" onClick={onClose}>
+               <IconButton size="small" onClick={saveAndClose}>
                   <CheckIcon />
                </IconButton>
             </Tooltip>
@@ -207,13 +208,7 @@ export function MutableCell({
          )}
          {editingMalloy && (
             <Tooltip title="Save">
-               <IconButton
-                  size="small"
-                  onClick={() => {
-                     saveResult();
-                     onClose();
-                  }}
-               >
+               <IconButton size="small" onClick={saveAndClose}>
                   <CheckIcon />
                </IconButton>
             </Tooltip>
@@ -230,22 +225,15 @@ export function MutableCell({
    );
 
    const isEditing = editingMalloy || editingMarkdown;
-
    const editingButtons = editingMarkdown ? (
       <Tooltip title="Save">
-         <IconButton size="small" onClick={onClose}>
+         <IconButton size="small" onClick={saveAndClose}>
             <CheckIcon />
          </IconButton>
       </Tooltip>
    ) : editingMalloy ? (
       <Tooltip title="Save">
-         <IconButton
-            size="small"
-            onClick={() => {
-               saveResult();
-               onClose();
-            }}
-         >
+         <IconButton size="small" onClick={saveAndClose}>
             <CheckIcon />
          </IconButton>
       </Tooltip>
@@ -305,12 +293,12 @@ export function MutableCell({
                      autoFocus
                      onChange={(newValue) => {
                         setValue(newValue);
-                        updateMarkdown(newValue);
+                        onCellChange({ ...cell, value: newValue });
                      }}
                      onBlur={() => {
                         saveResult();
                         if (!isHovered) {
-                           onClose();
+                           saveAndClose();
                         }
                      }}
                   />
@@ -331,9 +319,9 @@ export function MutableCell({
                         "& blockquote": { mt: 0.5, mb: 0.5 },
                      }}
                   >
-                     {value ? (
+                     {cell.value ? (
                         <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
-                           <Markdown>{value}</Markdown>
+                           <Markdown>{cell.value}</Markdown>
                         </Box>
                      ) : (
                         <Box onClick={onEdit} sx={{ cursor: "pointer" }}>
@@ -469,22 +457,3 @@ export function MutableCell({
       </StyledCard>
    );
 }
-
-function useDebounce<T>(callback: (value: T) => void, delay: number = 2000) {
-   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
-      undefined,
-   );
-
-   return React.useCallback(
-      (value: T) => {
-         if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-         }
-
-         timeoutRef.current = setTimeout(() => {
-            callback(value);
-         }, delay);
-      },
-      [callback, delay],
-   );
-}

package/src/components/Workbook/Workbook.tsx

@@ -18,10 +18,8 @@ import {
 import Stack from "@mui/material/Stack";
 import React from "react";
 import { Configuration, ModelsApi } from "../../client";
-import { useRouterClickHandler } from "../click_helper";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { WorkbookManager } from "./WorkbookManager";
-import { usePackage } from "../Package";
 import { useServer } from "../ServerProvider";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { MutableCell } from "./MutableCell";
@@ -31,6 +29,7 @@ import * as Malloy from "@malloydata/malloy-interfaces";
 import { ModelPicker } from "./ModelPicker";
 import { getAxiosConfig } from "../../hooks";
 import { WorkbookLocator } from "./WorkbookStorage";
+import { useRouterClickHandler } from "../click_helper";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -39,6 +38,8 @@ interface WorkbookProps {
    expandCodeCells?: boolean;
    expandEmbeddings?: boolean;
    hideEmbeddingIcons?: boolean;
+   defaultProjectName?: string;
+   defaultPackageName?: string;
 }
 
 interface PathToSources {
@@ -51,20 +52,16 @@ export default function Workbook({
    expandCodeCells,
    expandEmbeddings,
    hideEmbeddingIcons,
+   defaultProjectName,
+   defaultPackageName,
 }: WorkbookProps) {
    const navigate = useRouterClickHandler();
-   const packageContext = usePackage();
-   const { projectName, packageName, versionId } = packageContext;
    const { server, getAccessToken } = useServer();
    const { workbookStorage } = useWorkbookStorage();
+   const [success, setSuccess] = React.useState<string | undefined>(undefined);
    const [lastError, setLastError] = React.useState<string | undefined>(
       undefined,
    );
-   if (!projectName || !packageName) {
-      throw new Error(
-         "Project and package must be provided via PubliserPackageProvider",
-      );
-   }
    if (!workbookStorage) {
       throw new Error(
          "Workbook storage be provided via WorkbookStorageProvider",
@@ -92,17 +89,20 @@ export default function Workbook({
       setMenuIndex(null);
    };
    const handleAddCell = (isMarkdown: boolean, index: number) => {
-      workbookData.insertCell(index, {
-         isMarkdown,
-         value: "",
-      });
-      saveWorkbook();
+      if (!workbookData) return;
+      setWorkbookData(
+         workbookData.insertCell(index, {
+            isMarkdown,
+            value: "",
+         }),
+      );
       if (isMarkdown) {
          setEditingMarkdownIndex(index);
       } else {
          setEditingMalloyIndex(index);
       }
       handleMenuClose();
+      console.log("handleAddCell", isMarkdown, index);
    };
 
    const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
@@ -110,19 +110,22 @@ export default function Workbook({
       setDeleteDialogOpen(true);
    };
 
-   const handleDeleteConfirm = async (event?: React.MouseEvent) => {
-      if (workbookPath && workbookStorage && packageContext) {
+   const handleDeleteConfirm = async () => {
+      if (workbookPath && workbookStorage) {
          await workbookStorage
-            .deleteWorkbook(packageContext, workbookPath)
+            .deleteWorkbook(workbookPath)
             .then(() => {
                setLastError(undefined);
+               setSuccess(undefined);
             })
             .catch((error) => {
                setLastError(`Error deleting workbook: ${error.message}`);
+               setSuccess(undefined);
             });
       }
       setDeleteDialogOpen(false);
-      navigate(`/${projectName}/${packageName}`, event);
+      // TODO(jjs) - on delete event
+      navigate(`/${defaultProjectName}/${defaultPackageName}`);
    };
 
    const handleDeleteCancel = () => {
@@ -130,11 +133,17 @@ export default function Workbook({
    };
 
    const saveWorkbook = React.useCallback(async () => {
+      if (!workbookData) {
+         console.log("No workbook data ref");
+         return;
+      }
       try {
          setWorkbookData(await workbookData.saveWorkbook());
          setLastError(undefined);
+         setSuccess("Workbook saved");
       } catch (error) {
          setLastError(`Error saving workbook: ${error.message}`);
+         setSuccess(undefined);
       }
    }, [workbookData]);
    React.useEffect(() => {
@@ -159,10 +168,10 @@ export default function Workbook({
                promises.push(
                   modelsApi
                      .getModel(
-                        projectName,
-                        packageName,
+                        defaultProjectName,
+                        defaultPackageName,
                         model,
-                        versionId,
+                        undefined,
                         await getAxiosConfig(server, getAccessToken),
                      )
                      .then((data) => ({
@@ -193,24 +202,21 @@ export default function Workbook({
       // Work this cannot depend on sourceAndPaths because it will cause an infinite loop.
       getAccessToken,
       workbookData,
-      packageName,
-      projectName,
+      defaultPackageName,
+      defaultProjectName,
       server,
-      versionId,
    ]);
 
    React.useEffect(() => {
       if (!workbookPath) {
          return;
       }
-      WorkbookManager.loadWorkbook(
-         workbookStorage,
-         packageContext,
-         workbookPath,
-      ).then((workbookData) => {
-         setWorkbookData(workbookData);
-      });
-   }, [workbookPath, workbookStorage, packageContext]);
+      WorkbookManager.loadWorkbook(workbookStorage, workbookPath).then(
+         (workbookData) => {
+            setWorkbookData(workbookData);
+         },
+      );
+   }, [workbookPath, workbookStorage]);
 
    if (!workbookData) {
       return <div>Loading...</div>;
@@ -271,13 +277,21 @@ export default function Workbook({
    return (
       <StyledCard variant="outlined">
          <StyledCardContent>
-            {lastError && (
-               <Box sx={{ mb: 2 }}>
-                  <Typography color="error" variant="body2">
-                     {lastError}
-                  </Typography>
+            <Box sx={{ mb: 2 }}>
+               <Box sx={{ minHeight: "24px" }}>
+                  {lastError ? (
+                     <Typography color="error" variant="body2">
+                        {lastError}
+                     </Typography>
+                  ) : success ? (
+                     <Typography color="success" variant="body2">
+                        {success}
+                     </Typography>
+                  ) : (
+                     <span>&nbsp;</span>
+                  )}
                </Box>
-            )}
+            </Box>
             <Stack
                sx={{
                   flexDirection: "row",
@@ -305,7 +319,7 @@ export default function Workbook({
                         ml: 1,
                      }}
                   >
-                     {`${projectName} > ${packageName} > ${workbookPath.path}`}
+                     {`${workbookPath.workspace} > ${workbookPath.path}`}
                   </Typography>
                </Stack>
                <Stack sx={{ display: "flex", flexDirection: "row", gap: 1 }}>
@@ -356,7 +370,7 @@ export default function Workbook({
                               Cancel
                            </Button>
                            <Button
-                              onClick={(event) => handleDeleteConfirm(event)}
+                              onClick={handleDeleteConfirm}
                               color="error"
                               autoFocus
                               size="small"
@@ -416,7 +430,7 @@ export default function Workbook({
                      key={`${index}-${workbookData.getCells().length}`}
                   >
                      <MutableCell
-                        key={`${index}-${cell.isMarkdown}-${workbookPath}-${projectName}-${packageName}`}
+                        key={`${index}-${cell.isMarkdown}-${workbookPath.workspace}-${workbookPath.path}`}
                         cell={cell}
                         addButtonCallback={(isMarkdown) =>
                            plusButton(isMarkdown, index)
@@ -433,7 +447,6 @@ export default function Workbook({
                         }}
                         onCellChange={(cell) => {
                            setWorkbookData(workbookData.setCell(index, cell));
-                           saveWorkbook();
                         }}
                         onEdit={() => {
                            if (cell.isMarkdown) {
@@ -448,6 +461,7 @@ export default function Workbook({
                            } else {
                               setEditingMalloyIndex(undefined);
                            }
+                           saveWorkbook();
                         }}
                      />
                   </React.Fragment>

package/src/components/Workbook/WorkbookList.tsx

@@ -8,7 +8,6 @@ import {
 } from "@mui/material";
 import React from "react";
 import { useWorkbookStorage } from "./WorkbookStorageProvider";
-import { usePackage } from "../Package";
 import { WorkbookLocator } from "./WorkbookStorage";
 
 interface WorkbookListProps {
@@ -20,7 +19,6 @@ interface WorkbookListProps {
 
 export function WorkbookList({ onWorkbookClick }: WorkbookListProps) {
    const { workbookStorage } = useWorkbookStorage();
-   const packageContext = usePackage();
    const [workbooks, setWorkbooks] = React.useState<WorkbookLocator[]>([]);
    const [lastError, setLastError] = React.useState<string | undefined>(
       undefined,
@@ -28,30 +26,28 @@ export function WorkbookList({ onWorkbookClick }: WorkbookListProps) {
 
    React.useEffect(() => {
       if (workbookStorage) {
-         workbookStorage
-            .listWorkspaces(packageContext, false)
-            .then((workspaces) => {
-               const allWorkbooks: WorkbookLocator[] = [];
-               Promise.all(
-                  workspaces.map(async (workspace) => {
-                     await workbookStorage
-                        .listWorkbooks(workspace, packageContext)
-                        .then((newWorkbooks) => {
-                           allWorkbooks.push(...newWorkbooks);
-                        })
-                        .catch((error) => {
-                           setLastError(
-                              `Error listing workbooks: ${error.message}`,
-                           );
-                        });
-                  }),
-               ).then(() => {
-                  setWorkbooks(allWorkbooks);
-                  setLastError(undefined);
-               });
+         workbookStorage.listWorkspaces(false).then((workspaces) => {
+            const allWorkbooks: WorkbookLocator[] = [];
+            Promise.all(
+               workspaces.map(async (workspace) => {
+                  await workbookStorage
+                     .listWorkbooks(workspace)
+                     .then((newWorkbooks) => {
+                        allWorkbooks.push(...newWorkbooks);
+                     })
+                     .catch((error) => {
+                        setLastError(
+                           `Error listing workbooks: ${error.message}`,
+                        );
+                     });
+               }),
+            ).then(() => {
+               setWorkbooks(allWorkbooks);
+               setLastError(undefined);
             });
+         });
       }
-   }, [workbookStorage, packageContext]);
+   }, [workbookStorage]);
 
    return (
       <>

package/src/components/Workbook/WorkbookManager.ts

@@ -1,4 +1,3 @@
-import { PackageContextProps } from "../Package";
 import type { WorkbookLocator, WorkbookStorage } from "./WorkbookStorage";
 
 /**
@@ -40,21 +39,17 @@ export interface WorkbookCellValue {
 export class WorkbookManager {
    private isSaved: boolean;
    private workbookStorage: WorkbookStorage;
-   private packageContext: PackageContextProps;
 
    /**
     * Creates a new WorkbookManager instance
     * @param {WorkbookStorage} workbookStorage - Storage implementation
-    * @param {PackageContextProps} packageContext - Package context for storage
     * @param {WorkbookData} workbookData - Initial workbook data
     */
    constructor(
       workbookStorage: WorkbookStorage,
-      packageContext: PackageContextProps,
       private workbookData: WorkbookData,
    ) {
       this.workbookStorage = workbookStorage;
-      this.packageContext = packageContext;
       if (this.workbookData) {
          this.isSaved = true;
       } else {
@@ -92,7 +87,6 @@ export class WorkbookManager {
       if (this.workbookData.workbookPath.path !== workbookPath) {
          try {
             await this.workbookStorage.moveWorkbook(
-               this.packageContext,
                this.workbookData.workbookPath,
                {
                   path: workbookPath,
@@ -154,17 +148,12 @@ export class WorkbookManager {
             throw new Error("Workbook path is not set");
          }
          await this.workbookStorage.saveWorkbook(
-            this.packageContext,
             this.workbookData.workbookPath,
             JSON.stringify(this.workbookData),
          );
          this.isSaved = true;
       }
-      return new WorkbookManager(
-         this.workbookStorage,
-         this.packageContext,
-         this.workbookData,
-      );
+      return new WorkbookManager(this.workbookStorage, this.workbookData);
    }
 
    /**
@@ -188,11 +177,8 @@ export class WorkbookManager {
          .join("\n");
    }
 
-   static newWorkbook(
-      workbookStorage: WorkbookStorage,
-      packageContext: PackageContextProps,
-   ): WorkbookManager {
-      return new WorkbookManager(workbookStorage, packageContext, undefined);
+   static newWorkbook(workbookStorage: WorkbookStorage): WorkbookManager {
+      return new WorkbookManager(workbookStorage, undefined);
    }
 
    /**
@@ -204,16 +190,11 @@ export class WorkbookManager {
     */
    static async loadWorkbook(
       workbookStorage: WorkbookStorage,
-      packageContext: PackageContextProps,
       workbookPath: WorkbookLocator,
    ): Promise<WorkbookManager> {
       let workbookData: WorkbookData | undefined = undefined;
-      console.log("loadWorkbook", workbookPath);
       try {
-         const saved = await workbookStorage.getWorkbook(
-            packageContext,
-            workbookPath,
-         );
+         const saved = await workbookStorage.getWorkbook(workbookPath);
          if (saved) {
             workbookData = JSON.parse(saved);
          }
@@ -225,6 +206,6 @@ export class WorkbookManager {
             workbookPath: workbookPath,
          };
       }
-      return new WorkbookManager(workbookStorage, packageContext, workbookData);
+      return new WorkbookManager(workbookStorage, workbookData);
    }
 }

package/src/components/Workbook/WorkbookStorage.ts

@@ -13,42 +13,22 @@ export interface WorkbookLocator {
 
 export interface WorkbookStorage {
    // Lists all available workspaces for the context.
-   listWorkspaces(
-      context: PackageContextProps,
-      writeableOnly: boolean,
-   ): Promise<Workspace[]>;
+   listWorkspaces(writeableOnly: boolean): Promise<Workspace[]>;
 
    // Lists all available workbooks for the context.
    // Workbooks names are like S3 paths- / denote hierarchical
    // folders, but otherwise folders are not "real" objects
-   listWorkbooks(
-      workspace: Workspace,
-      context: PackageContextProps,
-   ): Promise<WorkbookLocator[]>;
+   listWorkbooks(workspace: Workspace): Promise<WorkbookLocator[]>;
 
    // Returns the workbook at the specific path, throws an exception if no such workbook exists (or cannot be accessed)
-   getWorkbook(
-      context: PackageContextProps,
-      path: WorkbookLocator,
-   ): Promise<string>;
+   getWorkbook(path: WorkbookLocator): Promise<string>;
 
    // Deletes the workbook at the specified path, or throws an
    // Exception on failure
-   deleteWorkbook(
-      context: PackageContextProps,
-      path: WorkbookLocator,
-   ): Promise<void>;
+   deleteWorkbook(path: WorkbookLocator): Promise<void>;
 
-   saveWorkbook(
-      context: PackageContextProps,
-      path: WorkbookLocator,
-      workbook: string,
-   ): Promise<void>;
+   saveWorkbook(path: WorkbookLocator, workbook: string): Promise<void>;
 
    // Moves workbook from the "from" path to the "to" path
-   moveWorkbook(
-      context: PackageContextProps,
-      from: WorkbookLocator,
-      to: WorkbookLocator,
-   ): Promise<void>;
+   moveWorkbook(from: WorkbookLocator, to: WorkbookLocator): Promise<void>;
 }