@malloy-publisher/sdk 0.0.33 → 0.0.35

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`} />
          )}
       </>
    );

package/src/components/Project/ConnectionExplorer.tsx

@@ -12,36 +12,33 @@ import {
    DialogContent,
    DialogTitle,
    IconButton,
+   Switch,
+   FormControlLabel,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
-   Switch,
-   FormControlLabel,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ConnectionsApi } from "../../client/api";
 import { Configuration } from "../../client/configuration";
-import TablesInSchema from "./TablesInSchema";
+import { useProject } from "./Project";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
 
 interface ConnectionExplorerProps {
-   server?: string;
-   projectName: string;
    connectionName: string;
-   accessToken?: string;
 }
 
 export default function ConnectionExplorer({
-   server,
-   projectName,
    connectionName,
-   accessToken,
 }: ConnectionExplorerProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const [selectedTable, setSelectedTable] = React.useState<string | undefined>(
       undefined,
    );
@@ -61,6 +58,7 @@ export default function ConnectionExplorer({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -100,9 +98,10 @@ export default function ConnectionExplorer({
                      </Typography>
                   )}
                   {isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        {`${projectName} > ${connectionName} - ${error.message}`}
-                     </Typography>
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${connectionName}`}
+                     />
                   )}
                   {isSuccess && data.data.length === 0 && (
                      <Typography variant="body2">No Schemas</Typography>
@@ -142,11 +141,8 @@ export default function ConnectionExplorer({
             {selectedSchema && (
                <Paper sx={{ p: 2 }}>
                   <TablesInSchema
-                     server={server}
-                     projectName={projectName}
                      connectionName={connectionName}
                      schemaName={selectedSchema}
-                     accessToken={accessToken}
                      onTableClick={(tableName) => {
                         setSelectedTable(tableName);
                      }}
@@ -156,12 +152,9 @@ export default function ConnectionExplorer({
          </Grid>
          {selectedTable && (
             <TableViewer
-               server={server}
-               projectName={projectName}
                connectionName={connectionName}
                schemaName={selectedSchema}
                tableName={selectedTable}
-               accessToken={accessToken}
                onClose={() => setSelectedTable(undefined)}
             />
          )}
@@ -170,23 +163,20 @@ export default function ConnectionExplorer({
 }
 
 type TableViewerProps = {
-   server: string;
-   projectName: string;
    connectionName: string;
    schemaName: string;
    tableName: string;
-   accessToken: string;
    onClose: () => void;
 };
+
 function TableViewer({
-   server,
-   projectName,
    connectionName,
    schemaName,
    tableName,
-   accessToken,
    onClose,
 }: TableViewerProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const { data, isSuccess, isError, error, isLoading } = useQuery(
       {
          queryKey: [
@@ -212,15 +202,17 @@ function TableViewer({
                },
             ),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
+
    if (isSuccess && data) {
       console.log(data);
    }
+
    return (
-      // TODO(jjs) - Add a min height to the dialog, so when it loads the UI is not so jarring.
-      <Dialog open={true} onClose={onclose} maxWidth="sm" fullWidth>
+      <Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>
          <DialogTitle>
             Table: {schemaName}.{tableName}
             <Typography
@@ -228,7 +220,9 @@ function TableViewer({
                variant="body2"
                fontFamily="monospace"
                component="span"
-            ></Typography>
+            >
+               {tableName}
+            </Typography>
             <IconButton
                aria-label="close"
                onClick={onClose}
@@ -248,32 +242,117 @@ function TableViewer({
             </IconButton>
          </DialogTitle>
          <DialogContent>
-            <TableContainer>
-               <Table
-                  size="small"
-                  sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
-               >
-                  <TableHead>
-                     <TableRow>
-                        <TableCell>NAME</TableCell>
-                        <TableCell>TYPE</TableCell>
-                     </TableRow>
-                  </TableHead>
-                  <TableBody>
-                     {isSuccess &&
-                        data &&
-                        data.data.columns.map((row) => (
-                           <TableRow key={row.name}>
-                              <TableCell>{row.name}</TableCell>
-                              <TableCell>{row.type}</TableCell>
-                           </TableRow>
-                        ))}
-                     {isLoading && <div>Loading...</div>}
-                     {isError && <div>Error: {error.message}</div>}
-                  </TableBody>
-               </Table>
-            </TableContainer>
+            {isLoading && (
+               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  Fetching Table Details...
+               </Typography>
+            )}
+            {isError && (
+               <ApiErrorDisplay
+                  error={error}
+                  context={`${projectName} > ${connectionName} > ${schemaName}.${tableName}`}
+               />
+            )}
+            {isSuccess && data && (
+               <TableContainer>
+                  <Table
+                     size="small"
+                     sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
+                  >
+                     <TableHead>
+                        <TableRow>
+                           <TableCell>NAME</TableCell>
+                           <TableCell>TYPE</TableCell>
+                        </TableRow>
+                     </TableHead>
+                     <TableBody>
+                        {data.data.columns?.map(
+                           (column: { name: string; type: string }) => (
+                              <TableRow key={column.name}>
+                                 <TableCell>{column.name}</TableCell>
+                                 <TableCell>{column.type}</TableCell>
+                              </TableRow>
+                           ),
+                        )}
+                     </TableBody>
+                  </Table>
+               </TableContainer>
+            )}
          </DialogContent>
       </Dialog>
    );
 }
+
+interface TablesInSchemaProps {
+   connectionName: string;
+   schemaName: string;
+   onTableClick: (tableName: string) => void;
+}
+
+function TablesInSchema({
+   connectionName,
+   schemaName,
+   onTableClick,
+}: TablesInSchemaProps) {
+   const { server, projectName, accessToken } = useProject();
+
+   const { data, isSuccess, isError, error, isLoading } = useQuery(
+      {
+         queryKey: [
+            "tablesInSchema",
+            server,
+            projectName,
+            connectionName,
+            schemaName,
+         ],
+         queryFn: () =>
+            connectionsApi.listTables(projectName, connectionName, schemaName, {
+               baseURL: server,
+               withCredentials: !accessToken,
+               headers: {
+                  Authorization: accessToken && `Bearer ${accessToken}`,
+               },
+            }),
+         retry: false,
+         throwOnError: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <>
+         <Typography variant="overline" fontWeight="bold">
+            Tables in {schemaName}
+         </Typography>
+         <Divider />
+         <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
+            {isLoading && (
+               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  Fetching Tables...
+               </Typography>
+            )}
+            {isError && (
+               <ApiErrorDisplay
+                  error={error}
+                  context={`${projectName} > ${connectionName} > ${schemaName}`}
+               />
+            )}
+            {isSuccess && data.data.length === 0 && (
+               <Typography variant="body2">No Tables</Typography>
+            )}
+            {isSuccess && data.data.length > 0 && (
+               <List dense disablePadding>
+                  {data.data.map((tableName: string) => (
+                     <ListItemButton
+                        key={tableName}
+                        onClick={() => onTableClick(tableName)}
+                     >
+                        <ListItemText primary={tableName} />
+                     </ListItemButton>
+                  ))}
+               </List>
+            )}
+         </Box>
+      </>
+   );
+}

package/src/components/Project/Packages.tsx

@@ -2,23 +2,19 @@ import { Box, Divider, Grid, Typography } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { useProject } from "./Project";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface ProjectProps {
-   server?: string;
-   projectName: string;
+interface PackagesProps {
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Project({
-   server,
-   projectName,
-   navigate,
-   accessToken,
-}: ProjectProps) {
+export default function Packages({ navigate }: PackagesProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["packages", server, projectName],
@@ -30,6 +26,8 @@ export default function Project({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -100,9 +98,10 @@ export default function Project({
             </StyledCard>
          )}
          {isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               {error.message}
-            </Typography>
+            <ApiErrorDisplay
+               error={error}
+               context={`${projectName} > Packages`}
+            />
          )}
       </>
    );