@malloy-publisher/sdk 0.0.37 → 0.0.39

package/package.json

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

package/src/components/ApiErrorDisplay.tsx

@@ -1,10 +1,9 @@
 import { Typography } from "@mui/material";
-import React from "react";
 
 export interface ApiError extends Error {
    status?: number;
    data?: {
-      code: string;
+      code: number;
       message: string;
    };
 }
@@ -27,7 +26,6 @@ export function ApiErrorDisplay({ error, context }: ApiErrorDisplayProps) {
                style={{
                   whiteSpace: "pre-wrap",
                   color: "red",
-                  backgroundColor: "black",
                   padding: "10px",
                   margin: "auto",
                }}

package/src/components/Home/Home.tsx

@@ -1,10 +1,9 @@
 import { Grid, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ProjectsApi, Configuration } from "../../client";
-import axios from "axios";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
-axios.defaults.baseURL = "http://localhost:4000";
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -63,6 +62,6 @@ export default function Home({ server, navigate }: HomeProps) {
          );
       }
    } else {
-      return <Typography variant="h6">Loading projects...</Typography>;
+      return <Loading text="Loading projects..." />;
    }
 }

package/src/components/Loading.tsx

@@ -0,0 +1,103 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+export interface LoadingProps {
+   /**
+    * The text to display below the spinner
+    */
+   text?: string;
+   /**
+    * The size of the CircularProgress component
+    * @default 20
+    */
+   size?: number | string;
+   /**
+    * The color of the CircularProgress component
+    * @default "primary"
+    */
+   color?:
+   | "primary"
+   | "secondary"
+   | "error"
+   | "info"
+   | "success"
+   | "warning"
+   | "inherit";
+   /**
+    * The thickness of the circular progress
+    * @default 3.6
+    */
+   thickness?: number;
+   /**
+    * Whether to center the component
+    * @default true
+    */
+   centered?: boolean;
+   /**
+    * Custom spacing between spinner and text
+    * @default 2
+    */
+   spacing?: number;
+   /**
+    * Typography variant for the text
+    * @default "body1"
+    */
+   textVariant?:
+   | "h1"
+   | "h2"
+   | "h3"
+   | "h4"
+   | "h5"
+   | "h6"
+   | "subtitle1"
+   | "subtitle2"
+   | "body1"
+   | "body2"
+   | "caption"
+   | "overline";
+}
+
+export function Loading({
+   text,
+   size = 20,
+   color = "primary",
+   thickness = 3.6,
+   centered = true,
+   spacing = 2,
+   textVariant = "body2",
+}: LoadingProps) {
+   const content = (
+      <Box
+         sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: spacing,
+         }}
+      >
+         <CircularProgress size={size} color={color} thickness={thickness} />
+         {text && (
+            <Typography variant={textVariant} color="text.secondary">
+               {text}
+            </Typography>
+         )}
+      </Box>
+   );
+
+   if (centered) {
+      return (
+         <Box
+            sx={{
+               display: "flex",
+               justifyContent: "center",
+               alignItems: "center",
+               minHeight: "200px",
+               width: "100%",
+            }}
+         >
+            {content}
+         </Box>
+      );
+   }
+
+   return content;
+}

package/src/components/Model/Model.tsx

@@ -23,7 +23,7 @@ import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
 import "@malloydata/malloy-explorer/styles.css";
 import { usePackage } from "../Package/PackageProvider";
 import { SourceExplorerComponent } from "./SourcesExplorer";
-import NamedQueries from "./NamedQueries";
+import { Loading } from "../Loading";
 
 const modelsApi = new ModelsApi(new Configuration());
 
@@ -118,11 +118,7 @@ export default function Model({
    );
 
    if (isLoading) {
-      return (
-         <Typography sx={{ p: "20px", m: "auto" }}>
-            Fetching Model...
-         </Typography>
-      );
+      return <Loading text="Fetching Model..." />;
    }
 
    if (isError) {

package/src/components/Notebook/Notebook.tsx

@@ -10,14 +10,15 @@ import {
 } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 import React, { useEffect } from "react";
-import { Configuration, NotebooksApi, CompiledNotebook } from "../../client";
+import { CompiledNotebook, Configuration, NotebooksApi } from "../../client";
+import { ApiError, ApiErrorDisplay } from "../ApiErrorDisplay";
 import { highlight } from "../highlighter";
+import { Loading } from "../Loading";
 import { usePackage } from "../Package";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { NotebookCell } from "./NotebookCell";
-import { ApiErrorDisplay, ApiError } from "../ApiErrorDisplay";
-import { AxiosError } from "axios";
 
 const notebooksApi = new NotebooksApi(new Configuration());
 const queryClient = new QueryClient();
@@ -191,9 +192,7 @@ export default function Notebook({
          <StyledCardMedia>
             <Stack spacing={1} component="section">
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebook...
-                  </Typography>
+                  <Loading text="Fetching Notebook..." />
                )}
                {isSuccess &&
                   notebook.notebookCells?.map((cell, index) => (
@@ -214,7 +213,14 @@ export default function Notebook({
                         key={index}
                      />
                   ))}
-               {isError && (
+               {isError && error.status === 404 && (
+                  <Typography variant="body2">
+                     <code>{`${projectName} > ${packageName} > ${notebookPath}`}</code>{" "}
+                     not found.
+                  </Typography>
+               )}
+
+               {isError && error.status !== 404 && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > ${notebookPath}`}

package/src/components/Package/Config.tsx

@@ -8,11 +8,11 @@ import {
    Typography,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
-import axios from "axios";
 import { Configuration, PackagesApi } from "../../client";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
-import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -58,7 +58,7 @@ export default function Config() {
                   </ListItem>
                   {!isSuccess && !isError && (
                      <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                        Fethching Package Metadata...
+                        <Loading text="Fetching Package Metadata..." />
                      </Typography>
                   )}
                   {isSuccess &&
@@ -70,20 +70,20 @@ export default function Config() {
                            />
                         </ListItem>
                      )) || (
-                        <ListItem
-                           disablePadding={true}
-                           dense={true}
-                           sx={{ mt: "20px" }}
-                        >
-                           <ErrorIcon
-                              sx={{
-                                 color: "grey.600",
-                                 mr: "10px",
-                              }}
-                           />
-                           <ListItemText primary={"No package manifest"} />
-                        </ListItem>
-                     ))}
+                           <ListItem
+                              disablePadding={true}
+                              dense={true}
+                              sx={{ mt: "20px" }}
+                           >
+                              <ErrorIcon
+                                 sx={{
+                                    color: "grey.600",
+                                    mr: "10px",
+                                 }}
+                              />
+                              <ListItemText primary={"No package manifest"} />
+                           </ListItem>
+                        ))}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}

package/src/components/Package/Databases.tsx

@@ -18,6 +18,7 @@ import { Configuration, Database, DatabasesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const databasesApi = new DatabasesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -83,9 +84,7 @@ export default function Databases() {
                   }}
                >
                   {!isSuccess && !isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        Fetching Databases...
-                     </Typography>
+                     <Loading text="Fetching Databases..." />
                   )}
                   {isError && (
                      <ApiErrorDisplay

package/src/components/Package/Models.tsx

@@ -2,10 +2,11 @@ import { Box, Divider, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Configuration, ModelsApi } from "../../client";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 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());
@@ -21,7 +22,7 @@ export default function Models({ navigate }: ModelsProps) {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
 
-   const { data, isError, error, isLoading, isSuccess } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["models", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -52,18 +53,14 @@ export default function Models({ navigate }: ModelsProps) {
                   overflowY: "auto",
                }}
             >
-               {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Models...
-                  </Typography>
-               )}
+               {!isSuccess && !isError && <Loading text="Fetching Models..." />}
                {isError && (
                   <ApiErrorDisplay
                      error={error}
                      context={`${projectName} > ${packageName} > Models`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -72,6 +69,9 @@ export default function Models({ navigate }: ModelsProps) {
                      defaultExpandedItems={DEFAULT_EXPANDED_FOLDERS}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography variant="body2">No models found.</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Notebooks.tsx

@@ -1,10 +1,11 @@
 import { Box, Divider, Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { Configuration, NotebooksApi } from "../../client";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 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();
@@ -19,7 +20,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
    const { server, projectName, packageName, versionId, accessToken } =
       usePackage();
 
-   const { data, isLoading, isError, error, isSuccess } = useQuery(
+   const { data, isError, error, isSuccess } = useQuery(
       {
          queryKey: ["notebooks", server, projectName, packageName, versionId],
          queryFn: () =>
@@ -51,9 +52,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                }}
             >
                {!isSuccess && !isError && (
-                  <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                     Fetching Notebooks...
-                  </Typography>
+                  <Loading text="Fetching Notebooks..." />
                )}
                {isError && (
                   <ApiErrorDisplay
@@ -61,7 +60,7 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      context={`${projectName} > ${packageName} > Notebooks`}
                   />
                )}
-               {isSuccess && (
+               {isSuccess && data.data.length > 0 && (
                   <FileTreeView
                      items={data.data.sort((a, b) => {
                         return a.path.localeCompare(b.path);
@@ -70,6 +69,9 @@ export default function Notebooks({ navigate }: NotebooksProps) {
                      navigate={navigate}
                   />
                )}
+               {isSuccess && data.data.length === 0 && (
+                  <Typography variant="body2">No notebooks found</Typography>
+               )}
             </Box>
          </StyledCardContent>
       </StyledCard>

package/src/components/Package/Schedules.tsx

@@ -15,6 +15,7 @@ import { Configuration, SchedulesApi } from "../../client";
 import { StyledCard, StyledCardContent } from "../styles";
 import { usePackage } from "./PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const schedulesApi = new SchedulesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -41,11 +42,7 @@ export default function Schedules() {
    );
 
    if (isLoading) {
-      return (
-         <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-            Fetching Schedules...
-         </Typography>
-      );
+      return <Loading text="Fetching Schedules..." />;
    }
 
    if (isError) {

package/src/components/Project/About.tsx

@@ -5,6 +5,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const projectsApi = new ProjectsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -31,11 +32,7 @@ export default function About() {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               Fetching About...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching About..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/Project/ConnectionExplorer.tsx

@@ -26,6 +26,7 @@ import { ConnectionsApi } from "../../client/api";
 import { Configuration } from "../../client/configuration";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
@@ -92,11 +93,7 @@ export default function ConnectionExplorer({
                </Box>
                <Divider />
                <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-                  {isLoading && (
-                     <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                        Fetching Table Paths...
-                     </Typography>
-                  )}
+                  {isLoading && <Loading text="Fetching Table Paths..." />}
                   {isError && (
                      <ApiErrorDisplay
                         error={error}
@@ -242,11 +239,7 @@ function TableViewer({
             </IconButton>
          </DialogTitle>
          <DialogContent>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Table Details...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Table Details..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}
@@ -326,11 +319,7 @@ function TablesInSchema({
          </Typography>
          <Divider />
          <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Tables...
-               </Typography>
-            )}
+            {isLoading && <Loading text="Fetching Tables..." />}
             {isError && (
                <ApiErrorDisplay
                   error={error}

package/src/components/Project/Packages.tsx

@@ -4,6 +4,7 @@ import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useProject } from "./Project";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
@@ -34,11 +35,7 @@ export default function Packages({ navigate }: PackagesProps) {
 
    return (
       <>
-         {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Packages...
-            </Typography>
-         )}
+         {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
          {isSuccess && (
             <StyledCard variant="outlined">
                <StyledCardContent>

package/src/components/QueryResult/QueryResult.tsx

@@ -1,14 +1,12 @@
 import { Suspense, lazy } from "react";
 import { Configuration, QueryresultsApi } from "../../client";
-import axios from "axios";
-import { Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { usePackage } from "../Package/PackageProvider";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
+import { Loading } from "../Loading";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
-axios.defaults.baseURL = "http://localhost:4000";
 const queryResultsApi = new QueryresultsApi(new Configuration());
 const queryClient = new QueryClient();
 
@@ -67,9 +65,7 @@ export default function QueryResult({
    return (
       <>
          {!isSuccess && !isError && (
-            <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-               Fetching Query Results...
-            </Typography>
+            <Loading text="Fetching Query Results..." />
          )}
          {isSuccess && (
             <Suspense fallback={<div>Loading...</div>}>