@malloy-publisher/sdk 0.0.45 → 0.0.48

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/sdk",
    "description": "Malloy Publisher SDK",
-   "version": "0.0.45",
+   "version": "0.0.48",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",

package/src/components/AnalyzePackageButton.tsx

@@ -0,0 +1,185 @@
+import { Add, Launch } from "@mui/icons-material";
+import {
+   Button,
+   Menu,
+   MenuItem,
+   ListItemIcon,
+   ListItemText,
+   Typography,
+   Dialog,
+   DialogTitle,
+   DialogContent,
+   FormControl,
+   TextField,
+} from "@mui/material";
+import {
+   NotebookStorageProvider,
+   BrowserNotebookStorage,
+   MutableNotebookList,
+} from "./MutableNotebook";
+import React from "react";
+import { useRouterClickHandler } from "./click_helper";
+
+export interface AnalyzePackageButtonProps {
+   projectName: string;
+   packageName: string;
+}
+
+export function AnalyzePackageButton({
+   projectName,
+   packageName,
+}: AnalyzePackageButtonProps) {
+   const [workbookName, setWorkbookName] = React.useState("");
+   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+   const [newDialogOpen, setNewDialogOpen] = React.useState(false);
+   const [openDialogOpen, setOpenDialogOpen] = React.useState(false);
+   const navigate = useRouterClickHandler();
+
+   const open = Boolean(anchorEl);
+   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+   };
+   const handleMenuClose = () => {
+      setAnchorEl(null);
+   };
+   const handleOpenDialogClose = () => {
+      setOpenDialogOpen(false);
+   };
+   const handleNewDialogClose = () => {
+      setNewDialogOpen(false);
+   };
+
+   const handleNotebookClick = (notebook: string, event: React.MouseEvent) => {
+      setOpenDialogOpen(false);
+      // Navigate to the ScratchNotebookPage with anchor text for notebookPath
+      navigate(
+         `/${projectName}/${packageName}/scratchNotebook/${encodeURIComponent(notebook)}`,
+         event,
+      );
+   };
+
+   const createNotebookClick = (event?: React.MouseEvent) => {
+      setNewDialogOpen(false);
+      // Navigate to the ScratchNotebookPage with anchor text for notebookPath
+      navigate(
+         `/${projectName}/${packageName}/scratchNotebook/${encodeURIComponent(workbookName)}`,
+         event,
+      );
+      setWorkbookName("");
+   };
+
+   return (
+      <>
+         <Button
+            aria-controls={open ? "basic-menu" : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? "true" : undefined}
+            onClick={handleClick}
+            sx={{ height: "40px" }}
+         >
+            Analyze Package
+         </Button>
+         <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleMenuClose}
+            slotProps={{
+               list: {
+                  "aria-labelledby": "basic-button",
+               },
+            }}
+         >
+            <MenuItem
+               onClick={() => {
+                  setNewDialogOpen(true);
+                  handleMenuClose();
+               }}
+            >
+               <ListItemIcon>
+                  <Add fontSize="small" />
+               </ListItemIcon>
+               <ListItemText>
+                  <Typography variant="body2">New Workbook</Typography>
+               </ListItemText>
+            </MenuItem>
+            <MenuItem
+               onClick={() => {
+                  setOpenDialogOpen(true);
+                  handleMenuClose();
+               }}
+            >
+               <ListItemIcon>
+                  <Launch fontSize="small" />
+               </ListItemIcon>
+               <ListItemText>
+                  <Typography variant="body2">Open Workbook</Typography>
+               </ListItemText>
+            </MenuItem>
+         </Menu>
+         <Dialog
+            open={newDialogOpen}
+            onClose={handleNewDialogClose}
+            sx={{
+               "& .MuiDialog-paper": {
+                  width: "100%",
+                  maxWidth: "300px",
+               },
+            }}
+         >
+            <DialogTitle variant="subtitle1" sx={{ fontWeight: "medium" }}>
+               Create Workbook
+            </DialogTitle>
+            <DialogContent>
+               <FormControl
+                  sx={{
+                     width: "100%",
+                     display: "flex",
+                     alignItems: "center",
+                     gap: 2,
+                  }}
+               >
+                  <TextField
+                     label="Workbook Name"
+                     value={workbookName}
+                     onChange={(e) => setWorkbookName(e.target.value)}
+                     sx={{
+                        width: "100%",
+                        maxWidth: "400px",
+                        mt: 1,
+                     }}
+                  />
+                  <Button onClick={(event) => createNotebookClick(event)}>
+                     Create
+                  </Button>
+               </FormControl>
+            </DialogContent>
+         </Dialog>
+         <Dialog
+            open={openDialogOpen}
+            onClose={handleOpenDialogClose}
+            sx={{
+               "& .MuiDialog-paper": {
+                  width: "100%",
+                  maxWidth: "300px",
+               },
+            }}
+         >
+            <DialogTitle variant="subtitle1" sx={{ fontWeight: "medium" }}>
+               Open Workbook
+            </DialogTitle>
+            <DialogContent>
+               <NotebookStorageProvider
+                  notebookStorage={new BrowserNotebookStorage()}
+                  userContext={{
+                     project: projectName,
+                     package: packageName,
+                  }}
+               >
+                  <MutableNotebookList onNotebookClick={handleNotebookClick} />
+               </NotebookStorageProvider>
+            </DialogContent>
+         </Dialog>
+      </>
+   );
+}

package/src/components/Home/Home.tsx

@@ -7,22 +7,15 @@ import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 const projectsApi = new ProjectsApi(new Configuration());
 
 interface HomeProps {
-   server?: string;
    navigate?: (to: string, event?: React.MouseEvent) => void;
 }
 
-export default function Home({ server, navigate }: HomeProps) {
+export default function Home({ navigate }: HomeProps) {
    const { data, isSuccess, isError, error } = useQueryWithApiError({
-      queryKey: ["projects", server],
-      queryFn: () =>
-         projectsApi.listProjects({
-            baseURL: server,
-            withCredentials: true,
-         }),
+      queryKey: ["projects"],
+      queryFn: (config) => projectsApi.listProjects(config),
    });
 
-   console.log(JSON.stringify(data?.data, null, 2));
-
    if (isError) {
       return <ApiErrorDisplay error={error} context="Projects List" />;
    }

package/src/components/Model/Model.tsx

@@ -53,9 +53,8 @@ export default function Model({
       React.useState<string>();
    const [selectedTab, setSelectedTab] = React.useState(0);
 
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
-   const modelCodeSnippet = getModelCodeSnippet(server, packageName, modelPath);
+   const { projectName, packageName, versionId } = usePackage();
+   const modelCodeSnippet = getModelCodeSnippet(modelPath);
    useEffect(() => {
       highlight(modelCodeSnippet, "typescript").then((code) => {
          setHighlightedEmbedCode(code);
@@ -64,27 +63,14 @@ export default function Model({
 
    const { data, isError, isLoading, error } =
       useQueryWithApiError<CompiledModel>({
-         queryKey: [
-            "package",
-            server,
-            projectName,
-            packageName,
-            modelPath,
-            versionId,
-         ],
-         queryFn: async () => {
+         queryKey: ["package", projectName, packageName, modelPath, versionId],
+         queryFn: async (config) => {
             const response = await modelsApi.getModel(
                projectName,
                packageName,
                modelPath,
                versionId,
-               {
-                  baseURL: server,
-                  withCredentials: !accessToken,
-                  headers: {
-                     Authorization: accessToken && `Bearer ${accessToken}`,
-                  },
-               },
+               config,
             );
             return response.data;
          },
@@ -254,14 +240,8 @@ export default function Model({
    );
 }
 
-function getModelCodeSnippet(
-   server: string,
-   packageName: string,
-   modelPath: string,
-): string {
+function getModelCodeSnippet(modelPath: string): string {
    return `<Model
-   server="${server}"
-   packageName="${packageName}"
    modelPath="${modelPath}"
    accessToken={accessToken}
 />`;

package/src/components/Model/ModelCell.tsx

@@ -17,7 +17,6 @@ import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { useEffect } from "react";
 import { highlight } from "../highlighter";
-import { usePackage } from "../Package/PackageProvider";
 
 const StyledCard = styled(Card)({
    display: "flex",
@@ -56,13 +55,7 @@ export function ModelCell({
    const [highlightedAnnotations, setHighlightedAnnotations] =
       React.useState<string>();
 
-   const { server, projectName, packageName, versionId } = usePackage();
-
    const queryResultCodeSnippet = getQueryResultCodeSnippet(
-      server,
-      projectName,
-      packageName,
-      versionId,
       sourceName,
       queryName,
    );
@@ -219,19 +212,10 @@ export function ModelCell({
 }
 
 function getQueryResultCodeSnippet(
-   server: string,
-   projectName: string,
-   packageName: string,
-   versionId: string,
    sourceName: string,
    queryName: string,
 ): string {
    return `<QueryResult
-server="${server}"
-accessToken={accessToken}
-projectName="${projectName}"
-packageName="${packageName}"
-versionId="${versionId}"
 sourceName="${sourceName}"
 queryName="${queryName}"
 />`;

package/src/components/Model/NamedQueries.tsx

@@ -25,8 +25,7 @@ export default function NamedQueries({
    namedQueries,
    modelPath,
 }: NamedQueryProps) {
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
+   const { projectName, packageName, versionId } = usePackage();
    const [namedQueryResults, setNamedQueryResults] = React.useState<
       Record<string, string>
    >({});
@@ -35,7 +34,7 @@ export default function NamedQueries({
    >({});
 
    const mutation = useMutationWithApiError({
-      mutationFn: ({ query }: { query: Query }) => {
+      mutationFn: ({ query }: { query: Query }, config) => {
          const val = queryResultsApi.executeQuery(
             projectName,
             packageName,
@@ -44,13 +43,7 @@ export default function NamedQueries({
             undefined,
             query.name,
             versionId,
-            {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            },
+            config,
          );
          return val;
       },

package/src/components/Model/SourcesExplorer.tsx

@@ -171,10 +171,9 @@ export function SourceExplorerComponent({
          onChange(query);
       }
    }, [onChange, query]);
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
+   const { projectName, packageName, versionId } = usePackage();
    const mutation = useMutationWithApiError({
-      mutationFn: () => {
+      mutationFn: (_, config) => {
          const malloy = new QueryBuilder.ASTQuery({
             source: sourceAndPath.sourceInfo,
             query: query?.malloyQuery,
@@ -192,13 +191,7 @@ export function SourceExplorerComponent({
             // sourceInfo.name,
             undefined,
             versionId,
-            {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            },
+            config,
          );
       },
       onSuccess: (data) => {

package/src/components/MutableNotebook/ModelPicker.tsx

@@ -31,18 +31,11 @@ export function ModelPicker({
    initialSelectedModels,
    onModelChange,
 }: ModelPickerProps) {
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
+   const { projectName, packageName, versionId } = usePackage();
    const { data, isLoading, isSuccess, isError, error } = useQueryWithApiError({
-      queryKey: ["models", server, projectName, packageName, versionId],
-      queryFn: () =>
-         modelsApi.listModels(projectName, packageName, versionId, {
-            baseURL: server,
-            withCredentials: !accessToken,
-            headers: {
-               Authorization: accessToken && `Bearer ${accessToken}`,
-            },
-         }),
+      queryKey: ["models", projectName, packageName, versionId],
+      queryFn: (config) =>
+         modelsApi.listModels(projectName, packageName, versionId, config),
    });
    const [selectedModels, setSelectedModels] = React.useState<string[]>(
       initialSelectedModels || [],

package/src/components/MutableNotebook/MutableNotebook.tsx

@@ -22,6 +22,7 @@ import { useRouterClickHandler } from "../click_helper";
 import { SourceAndPath } from "../Model/SourcesExplorer";
 import { NotebookManager } from "../NotebookManager";
 import { usePackage } from "../Package";
+import { useServer } from "../ServerProvider";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { MutableCell } from "./MutableCell";
 import { useNotebookStorage } from "./NotebookStorageProvider";
@@ -50,14 +51,14 @@ export default function MutableNotebook({
    hideEmbeddingIcons,
 }: MutableNotebookProps) {
    const navigate = useRouterClickHandler();
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
+   const { projectName, packageName, versionId } = usePackage();
+   const { server, accessToken } = useServer();
+   const { notebookStorage, userContext } = useNotebookStorage();
    if (!projectName || !packageName) {
       throw new Error(
          "Project and package must be provided via PubliserPackageProvider",
       );
    }
-   const { notebookStorage, userContext } = useNotebookStorage();
    if (!notebookStorage || !userContext) {
       throw new Error(
          "Notebook storage and user context must be provided via NotebookStorageProvider",

package/src/components/MutableNotebook/MutableNotebookList.tsx

@@ -0,0 +1,69 @@
+import { Box, Divider, List, ListItem, ListItemText } from "@mui/material";
+import React from "react";
+import { useNotebookStorage } from "./NotebookStorageProvider";
+
+interface MutableNotebookListProps {
+   onNotebookClick: (notebook: string, event: React.MouseEvent) => void;
+}
+
+export function MutableNotebookList({
+   onNotebookClick,
+}: MutableNotebookListProps) {
+   const { notebookStorage, userContext } = useNotebookStorage();
+   const [notebooks, setNotebooks] = React.useState<string[]>([]);
+
+   React.useEffect(() => {
+      if (notebookStorage && userContext) {
+         setNotebooks(notebookStorage.listNotebooks(userContext));
+      }
+   }, [notebookStorage, userContext]);
+
+   return (
+      <>
+         <Divider />
+         <Box
+            sx={{
+               maxHeight: "300px",
+               overflow: "auto",
+               "&::-webkit-scrollbar": {
+                  width: "8px",
+               },
+               "&::-webkit-scrollbar-track": {
+                  background: "transparent",
+               },
+               "&::-webkit-scrollbar-thumb": {
+                  background: "rgba(0,0,0,0.2)",
+                  borderRadius: "4px",
+               },
+            }}
+         >
+            <List dense>
+               {notebooks.length === 0 && (
+                  <ListItem>
+                     <ListItemText
+                        primary="No notebooks found."
+                        sx={{ textAlign: "center" }}
+                     />
+                  </ListItem>
+               )}
+               {notebooks.map((notebook) => (
+                  <ListItem
+                     key={notebook}
+                     onClick={(event: React.MouseEvent) =>
+                        onNotebookClick(notebook, event)
+                     }
+                     sx={{
+                        cursor: "pointer",
+                        "&:hover": {
+                           backgroundColor: "action.hover",
+                        },
+                     }}
+                  >
+                     <ListItemText primary={notebook} />
+                  </ListItem>
+               ))}
+            </List>
+         </Box>
+      </>
+   );
+}

package/src/components/MutableNotebook/index.ts

@@ -1,8 +1,8 @@
 export { BrowserNotebookStorage } from "./BrowserNotebookStorage";
 export { default as MutableNotebook } from "./MutableNotebook";
 export type { NotebookStorage, UserContext } from "./NotebookStorage";
+export { MutableNotebookList } from "./MutableNotebookList";
 export {
-    default as NotebookStorageProvider,
-    useNotebookStorage
+   default as NotebookStorageProvider,
+   useNotebookStorage,
 } from "./NotebookStorageProvider";
-

package/src/components/Notebook/Notebook.tsx

@@ -44,14 +44,8 @@ export default function Notebook({
       React.useState<boolean>(false);
    const [highlightedEmbedCode, setHighlightedEmbedCode] =
       React.useState<string>();
-   const { server, projectName, packageName, accessToken, versionId } =
-      usePackage();
-   const notebookCodeSnippet = getNotebookCodeSnippet(
-      server,
-      packageName,
-      notebookPath,
-      true,
-   );
+   const { projectName, packageName, versionId } = usePackage();
+   const notebookCodeSnippet = getNotebookCodeSnippet(notebookPath, true);
 
    useEffect(() => {
       highlight(notebookCodeSnippet, "typescript").then((code) => {
@@ -65,27 +59,14 @@ export default function Notebook({
       isError,
       error,
    } = useQueryWithApiError<CompiledNotebook>({
-      queryKey: [
-         "notebook",
-         server,
-         projectName,
-         packageName,
-         notebookPath,
-         versionId,
-      ],
-      queryFn: async () => {
+      queryKey: ["notebook", projectName, packageName, notebookPath, versionId],
+      queryFn: async (config) => {
          const response = await notebooksApi.getNotebook(
             projectName,
             packageName,
             notebookPath,
             versionId,
-            {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            },
+            config,
          );
          return response.data;
       },
@@ -177,9 +158,6 @@ export default function Notebook({
                         cell={cell}
                         notebookPath={notebookPath}
                         queryResultCodeSnippet={getQueryResultCodeSnippet(
-                           server,
-                           projectName,
-                           packageName,
                            notebookPath,
                            cell.text,
                         )}
@@ -209,18 +187,8 @@ export default function Notebook({
    );
 }
 
-function getQueryResultCodeSnippet(
-   server: string,
-   projectName: string,
-   packageName: string,
-   modelPath: string,
-   query: string,
-): string {
+function getQueryResultCodeSnippet(modelPath: string, query: string): string {
    return `<QueryResult
-   server="${server}"
-   accessToken={accessToken}
-   projectName="${projectName}"
-   packageName="${packageName}"
    modelPath="${modelPath}"
    query="
       ${query}
@@ -229,17 +197,11 @@ function getQueryResultCodeSnippet(
 }
 
 function getNotebookCodeSnippet(
-   server: string,
-   packageName: string,
    notebookPath: string,
    expandedCodeCells: boolean,
 ): string {
    return `<Notebook
-   server="${server}"
-   packageName="${packageName}"
    notebookPath="${notebookPath}"
-   versionId={versionId}
-   accessToken={accessToken}
    expandCodeCells={${expandedCodeCells}}
 />`;
 }

package/src/components/Package/Config.tsx

@@ -17,19 +17,18 @@ import { useQueryWithApiError } from "../../hooks/useQueryWithApiError";
 const packagesApi = new PackagesApi(new Configuration());
 
 export default function Config() {
-   const { server, projectName, packageName, versionId, accessToken } =
-      usePackage();
+   const { projectName, packageName, versionId } = usePackage();
 
    const { data, isSuccess, isError, error } = useQueryWithApiError({
-      queryKey: ["package", server, projectName, packageName, versionId],
-      queryFn: () =>
-         packagesApi.getPackage(projectName, packageName, versionId, false, {
-            baseURL: server,
-            withCredentials: !accessToken,
-            headers: {
-               Authorization: accessToken && `Bearer ${accessToken}`,
-            },
-         }),
+      queryKey: ["package", projectName, packageName, versionId],
+      queryFn: (config) =>
+         packagesApi.getPackage(
+            projectName,
+            packageName,
+            versionId,
+            false,
+            config,
+         ),
    });
 
    return (

package/src/components/Package/Connections.tsx

@@ -31,18 +31,11 @@ function Connection({ connection }: { connection: ApiConnection }) {
 }
 
 export default function Connections() {
-   const { server, projectName, accessToken } = usePackage();
+   const { projectName } = usePackage();
 
    const { data, isSuccess, isError, error } = useQueryWithApiError({
-      queryKey: ["connections", server, projectName],
-      queryFn: () =>
-         connectionsApi.listConnections(projectName, {
-            baseURL: server,
-            withCredentials: !accessToken,
-            headers: {
-               Authorization: accessToken && `Bearer ${accessToken}`,
-            },
-         }),
+      queryKey: ["connections", projectName],
+      queryFn: (config) => connectionsApi.listConnections(projectName, config),
    });
 
    return (