@malloy-publisher/sdk 0.0.34 → 0.0.36

package/src/components/Package/FileTreeView.tsx

@@ -22,7 +22,7 @@ import Collapse from "@mui/material/Collapse";
 import DnsIcon from "@mui/icons-material/DnsOutlined";
 import DataArrayIcon from "@mui/icons-material/DataArrayOutlined";
 import { Database, Model } from "../../client";
-import { Typography } from "@mui/material";
+import { Typography, Tooltip } from "@mui/material";
 
 interface FiieTreeViewProps {
    items: Model[] | Database[];
@@ -65,6 +65,7 @@ type ExtendedTreeItemProps = {
    fileType: FileType;
    selectable: boolean;
    link: ((event?: React.MouseEvent) => void) | undefined;
+   error?: string;
 };
 
 interface CustomLabelProps {
@@ -72,13 +73,13 @@ interface CustomLabelProps {
 }
 
 function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
-   return (
+   const label = (
       <TreeItem2Label
          {...other}
          sx={{
             display: "flex",
             alignItems: "center",
-            color: "grey.600",
+            color: item.error ? "error.main" : "grey.600",
          }}
       >
          {(item.fileType === "directory" && <FolderIcon />) ||
@@ -88,12 +89,26 @@ function CustomTreeItem2Label({ item, ...other }: CustomLabelProps) {
          <Typography
             variant="body2"
             sx={{ marginLeft: "5px" }}
-            color={item.link ? "primary.main" : "grey.600"}
+            color={
+               item.error
+                  ? "error.main"
+                  : item.link
+                    ? "primary.main"
+                    : "grey.600"
+            }
          >
             {item.label}
          </Typography>
       </TreeItem2Label>
    );
+
+   return item.error ? (
+      <Tooltip title={item.error} placement="right">
+         {label}
+      </Tooltip>
+   ) : (
+      label
+   );
 }
 
 interface CustomTreeItemProps
@@ -193,6 +208,7 @@ function getTreeViewRecursive(
          "unknown";
       if (fileType !== "unknown") {
          // This is a model or database.
+         const entry = value as Model | Database;
          treeViewItems.push({
             id: path + key,
             label: key,
@@ -202,6 +218,7 @@ function getTreeViewRecursive(
                   ? (event) => navigate(path + key, event)
                   : undefined,
             selectable: fileType === "model" || fileType === "notebook",
+            error: "error" in entry ? entry.error : undefined,
          });
       } else {
          // This is a directory.

package/src/components/Package/Models.tsx

@@ -4,6 +4,8 @@ import axios from "axios";
 import { Configuration, ModelsApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 axios.defaults.baseURL = "http://localhost:4000";
 const modelsApi = new ModelsApi(new Configuration());
@@ -12,22 +14,13 @@ const queryClient = new QueryClient();
 const DEFAULT_EXPANDED_FOLDERS = ["notebooks/", "models/"];
 
 interface ModelsProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Models({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   navigate,
-   accessToken,
-}: ModelsProps) {
+export default function Models({ navigate }: ModelsProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
    const { data, isError, error, isLoading, isSuccess } = useQuery(
       {
          queryKey: ["models", server, projectName, packageName, versionId],
@@ -39,6 +32,7 @@ export default function Models({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         throwOnError: false,
          retry: false,
       },
       queryClient,
@@ -58,29 +52,25 @@ export default function Models({
                   overflowY: "auto",
                }}
             >
-               {isLoading && (
+               {!isSuccess && !isError && (
                   <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
                      Fetching Models...
                   </Typography>
                )}
-               {isSuccess &&
-                  (data.data.length > 0 ? (
-                     <FileTreeView
-                        items={data.data.sort((a, b) => {
-                           return a.path.localeCompare(b.path);
-                        })}
-                        defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
-                        navigate={navigate}
-                     />
-                  ) : (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        No models found
-                     </Typography>
-                  ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > Models`}
+                  />
+               )}
+               {isSuccess && (
+                  <FileTreeView
+                     items={data.data.sort((a, b) => {
+                        return a.path.localeCompare(b.path);
+                     })}
+                     navigate={navigate}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                  />
                )}
             </Box>
          </StyledCardContent>

package/src/components/Package/Notebooks.tsx

@@ -3,29 +3,22 @@ import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, NotebooksApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { FileTreeView } from "./FileTreeView";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
 
 const DEFAULT_EXPANDED_FOLDERS = ["notebooks/"];
 
-interface ModelsProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
+interface NotebooksProps {
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Notebooks({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   navigate,
-   accessToken,
-}: ModelsProps) {
+export default function Notebooks({ navigate }: NotebooksProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
    const { data, isLoading, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["notebooks", server, projectName, packageName, versionId],
@@ -37,6 +30,7 @@ export default function Notebooks({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         throwOnError: false,
          retry: false,
       },
       queryClient,
@@ -56,29 +50,25 @@ export default function Notebooks({
                   overflowY: "auto",
                }}
             >
-               {isLoading && (
+               {!isSuccess && !isError && (
                   <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
                      Fetching Notebooks...
                   </Typography>
                )}
-               {isSuccess &&
-                  (data.data.length > 0 ? (
-                     <FileTreeView
-                        items={data.data.sort((a, b) => {
-                           return a.path.localeCompare(b.path);
-                        })}
-                        defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
-                        navigate={navigate}
-                     />
-                  ) : (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        No notebooks found
-                     </Typography>
-                  ))}
                {isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     {`${projectName} > ${packageName} > ${versionId} - ${error.message}`}
-                  </Typography>
+                  <ApiErrorDisplay
+                     error={error}
+                     context={`${projectName} > ${packageName} > Notebooks`}
+                  />
+               )}
+               {isSuccess && (
+                  <FileTreeView
+                     items={data.data.sort((a, b) => {
+                        return a.path.localeCompare(b.path);
+                     })}
+                     defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
+                     navigate={navigate}
+                  />
                )}
             </Box>
          </StyledCardContent>

package/src/components/Package/Package.tsx

@@ -5,28 +5,15 @@ import Connections from "./Connections";
 import Databases from "./Databases";
 import Models from "./Models";
 import Notebooks from "./Notebooks";
-import { PublisherPackageProvider } from "./PublisherPackageProvider";
 import Schedules from "./Schedules";
 
 const README_NOTEBOOK = "README.malloynb";
 
 interface PackageProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
    navigate?: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Package({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   navigate,
-   accessToken,
-}: PackageProps) {
+export default function Package({ navigate }: PackageProps) {
    if (!navigate) {
       navigate = (to: string) => {
          window.location.href = to;
@@ -34,82 +21,37 @@ export default function Package({
    }
 
    return (
-      <PublisherPackageProvider
-         server={server}
-         accessToken={accessToken}
-         projectName={projectName}
-         packageName={packageName}
-         versionId={versionId}
+      <Grid
+         container
+         spacing={2}
+         columns={12}
+         sx={{ mb: (theme) => theme.spacing(2) }}
       >
-         <Grid
-            container
-            spacing={2}
-            columns={12}
-            sx={{ mb: (theme) => theme.spacing(2) }}
-         >
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Config
-                  server={server}
-                  projectName={projectName}
-                  packageName={packageName}
-                  versionId={versionId}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Notebooks
-                  server={server}
-                  projectName={projectName}
-                  packageName={packageName}
-                  versionId={versionId}
-                  navigate={navigate}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 4 }}>
-               <Models
-                  server={server}
-                  projectName={projectName}
-                  packageName={packageName}
-                  versionId={versionId}
-                  navigate={navigate}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 6 }}>
-               <Databases
-                  server={server}
-                  projectName={projectName}
-                  packageName={packageName}
-                  versionId={versionId}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 6 }}>
-               <Connections
-                  navigate={navigate}
-                  server={server}
-                  projectName={projectName}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 12 }}>
-               <Schedules
-                  server={server}
-                  projectName={projectName}
-                  packageName={packageName}
-                  versionId={versionId}
-                  accessToken={accessToken}
-               />
-            </Grid>
-            <Grid size={{ xs: 12, md: 12 }}>
-               <Notebook
-                  notebookPath={README_NOTEBOOK}
-                  expandCodeCells={false}
-                  hideEmbeddingIcons={true}
-               />
-            </Grid>
+         <Grid size={{ xs: 12, md: 4 }}>
+            <Config />
          </Grid>
-      </PublisherPackageProvider>
+         <Grid size={{ xs: 12, md: 4 }}>
+            <Notebooks navigate={navigate} />
+         </Grid>
+         <Grid size={{ xs: 12, md: 4 }}>
+            <Models navigate={navigate} />
+         </Grid>
+         <Grid size={{ xs: 12, md: 6 }}>
+            <Databases />
+         </Grid>
+         <Grid size={{ xs: 12, md: 6 }}>
+            <Connections navigate={navigate} />
+         </Grid>
+         <Grid size={{ xs: 12, md: 12 }}>
+            <Schedules />
+         </Grid>
+         <Grid size={{ xs: 12, md: 12 }}>
+            <Notebook
+               notebookPath={README_NOTEBOOK}
+               expandCodeCells={false}
+               hideEmbeddingIcons={true}
+            />
+         </Grid>
+      </Grid>
    );
 }

package/src/components/Package/PackageProvider.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext, ReactNode } from "react";
+
+export interface PackageContextProps {
+   server?: string;
+   projectName: string;
+   packageName: string;
+   versionId?: string;
+   accessToken?: string;
+}
+
+const PackageContext = createContext<PackageContextProps | undefined>(
+   undefined,
+);
+
+interface PackageProviderProps extends PackageContextProps {
+   children: ReactNode;
+}
+
+// Provider for the Package context.
+// This context is used to pass the package information to the components
+// that need it.
+// The package information is passed to the components via the usePackage hook.
+export const PackageProvider = ({
+   server,
+   projectName,
+   packageName,
+   versionId,
+   accessToken,
+   children,
+}: PackageProviderProps) => {
+   return (
+      <PackageContext.Provider
+         value={{ server, projectName, packageName, versionId, accessToken }}
+      >
+         {children}
+      </PackageContext.Provider>
+   );
+};
+
+export function usePackage() {
+   const context = useContext(PackageContext);
+   if (!context) {
+      throw new Error("usePackage must be used within a PackageProvider");
+   }
+   return context;
+}

package/src/components/Package/Schedules.tsx

@@ -11,29 +11,18 @@ import {
    Typography,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
-import axios from "axios";
 import { Configuration, SchedulesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
+import { usePackage } from "./PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const schedulesApi = new SchedulesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface PackageProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken: string;
-}
+export default function Schedules() {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
 
-export default function Package({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-}: PackageProps) {
    const { data, isError, isLoading, error } = useQuery(
       {
          queryKey: ["schedules", server, projectName, packageName, versionId],
@@ -46,6 +35,7 @@ export default function Package({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -60,9 +50,10 @@ export default function Package({
 
    if (isError) {
       return (
-         <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-            {`${packageName} > ${versionId} - ${error.message}`}
-         </Typography>
+         <ApiErrorDisplay
+            error={error}
+            context={`${projectName} > ${packageName} > Schedules`}
+         />
       );
    }
 

package/src/components/Package/index.ts

@@ -1,2 +1,7 @@
 export { default as Package } from "./Package";
-export * from "./PublisherPackageProvider";
+export * from "./PackageProvider";
+// Backward compatibility
+export {
+   PackageProvider as PublisherPackageProvider,
+   usePackage as usePublisherPackage,
+} from "./PackageProvider";

package/src/components/Project/About.tsx

@@ -1,25 +1,17 @@
 import { Divider, Typography } from "@mui/material";
 import { Configuration, ProjectsApi } from "../../client";
-import axios from "axios";
 import Markdown from "markdown-to-jsx";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { useProject } from "./Project";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface AboutProps {
-   server?: string;
-   projectName: string;
-   accessToken?: string;
-}
+export default function About() {
+   const { server, projectName, accessToken } = useProject();
 
-export default function About({
-   server,
-   projectName,
-   accessToken,
-}: AboutProps) {
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["about", server, projectName],
@@ -31,6 +23,8 @@ export default function About({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -56,9 +50,7 @@ export default function About({
             </StyledCard>
          )}
          {isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               {error.message}
-            </Typography>
+            <ApiErrorDisplay error={error} context={`${projectName} > About`} />
          )}
       </>
    );