@malloy-publisher/sdk 0.0.198-dev → 0.0.198-dev1

package/src/components/Environment/Packages.tsx

@@ -1,10 +1,13 @@
 import { MoreVert } from "@mui/icons-material";
+import Inventory2OutlinedIcon from "@mui/icons-material/Inventory2Outlined";
 import {
    Box,
-   Divider,
+   Card,
+   CardContent,
    Grid,
    IconButton,
    Menu,
+   Tooltip,
    Typography,
 } from "@mui/material";
 import { useState } from "react";
@@ -14,7 +17,6 @@ import { encodeResourceUri, parseResourceUri } from "../../utils/formatting";
 import { ApiErrorDisplay } from "../ApiErrorDisplay";
 import { Loading } from "../Loading";
 import { useServer } from "../ServerProvider";
-import { PackageCard, PackageCardContent } from "../styles";
 import DeletePackageDialog from "./DeletePackageDialog";
 import EditPackageDialog from "./EditPackageDialog";
 
@@ -23,170 +25,176 @@ interface PackagesProps {
    resourceUri: string;
 }
 
-const PackageMenu = ({
-   package: p,
-   resourceUri: packageResourceUri,
-}: {
-   package: Package;
-   resourceUri: string;
-}) => {
-   const { mutable } = useServer();
-   const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
-   const isMenuOpen = Boolean(menuAnchorEl);
-   const openMenu = (event: React.MouseEvent<HTMLElement>) => {
-      setMenuAnchorEl(event.currentTarget);
-   };
-   const closeMenu = () => {
-      setMenuAnchorEl(null);
-   };
-
-   return (
-      <>
-         {mutable && (
-            <>
-               <IconButton
-                  aria-label={`Package actions for ${p.name}`}
-                  onClick={(event) => {
-                     event.stopPropagation();
-                     openMenu(event);
-                  }}
-                  aria-controls={isMenuOpen ? "package-menu" : undefined}
-                  aria-haspopup="true"
-                  aria-expanded={isMenuOpen ? "true" : undefined}
-               >
-                  <MoreVert fontSize="small" />
-               </IconButton>
-               <Menu
-                  id="package-menu"
-                  aria-haspopup="true"
-                  aria-expanded={isMenuOpen ? "true" : undefined}
-                  open={isMenuOpen}
-                  anchorEl={menuAnchorEl}
-                  onClose={closeMenu}
-                  disableRestoreFocus
-                  anchorOrigin={{
-                     vertical: "top",
-                     horizontal: "left",
-                  }}
-                  transformOrigin={{
-                     vertical: "top",
-                     horizontal: "right",
-                  }}
-                  onClick={(event) => {
-                     event.stopPropagation();
-                  }}
-               >
-                  <EditPackageDialog
-                     package={p}
-                     resourceUri={packageResourceUri}
-                     onCloseDialog={closeMenu}
-                  />
-                  <DeletePackageDialog
-                     resourceUri={packageResourceUri}
-                     onCloseDialog={closeMenu}
-                  />
-               </Menu>
-            </>
-         )}
-      </>
-   );
-};
-
 export default function Packages({
    onSelectPackage,
    resourceUri,
 }: PackagesProps) {
    const { apiClients } = useServer();
-   const { environmentName: environmentName } = parseResourceUri(resourceUri);
+   const { environmentName } = parseResourceUri(resourceUri);
    const { data, isSuccess, isError, error } = useQueryWithApiError({
       queryKey: ["packages", environmentName],
       queryFn: () => apiClients.packages.listPackages(environmentName),
    });
 
+   if (isError) {
+      return (
+         <ApiErrorDisplay
+            error={error}
+            context={`${environmentName} > Packages`}
+         />
+      );
+   }
+
+   if (!isSuccess) {
+      return <Loading text="Fetching Packages..." />;
+   }
+
+   const packages = [...data.data].sort((a, b) => a.name.localeCompare(b.name));
+
    return (
-      <>
-         {!isSuccess && !isError && <Loading text="Fetching Packages..." />}
-         {isSuccess && (
-            <Grid container spacing={3} columns={12}>
-               {data.data
-                  .sort((a, b) => {
-                     return a.name.localeCompare(b.name);
-                  })
-                  .map((p) => {
-                     const packageResourceUri = encodeResourceUri({
-                        environmentName,
-                        packageName: p.name,
-                     });
-                     return (
-                        <Grid
-                           size={{ xs: 12, sm: 12, md: 12, lg: 4 }}
-                           key={p.name}
-                        >
-                           <PackageCard
-                              sx={{
-                                 cursor: "pointer",
-                                 transition: "all 0.2s ease-in-out",
-                                 paddingTop: "8px",
-                                 "&:hover": {
-                                    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
-                                    transform: "translateY(-1px)",
-                                 },
-                              }}
-                              onClick={(event) => {
-                                 onSelectPackage(p.name, event);
-                              }}
-                           >
-                              <PackageCardContent>
-                                 <Box
-                                    display="flex"
-                                    alignItems="center"
-                                    justifyContent="space-between"
-                                    sx={{
-                                       marginBottom: "8px",
-                                    }}
-                                 >
-                                    <Typography
-                                       variant="overline"
-                                       sx={{
-                                          fontSize: "12px",
-                                          fontWeight: "600",
-                                          color: "primary.main",
-                                          textTransform: "uppercase",
-                                          letterSpacing: "0.5px",
-                                       }}
-                                    >
-                                       {p.name}
-                                    </Typography>
-                                    <PackageMenu
-                                       package={p}
-                                       resourceUri={packageResourceUri}
-                                    />
-                                 </Box>
-                                 <Divider sx={{ mb: 2 }} />
-                                 <Box
-                                    sx={{
-                                       maxHeight: "120px",
-                                       overflowY: "auto",
-                                       mt: 2,
-                                    }}
-                                 >
-                                    <Typography variant="body2">
-                                       {p.description}
-                                    </Typography>
-                                 </Box>
-                              </PackageCardContent>
-                           </PackageCard>
-                        </Grid>
-                     );
-                  })}
-            </Grid>
-         )}
-         {isError && (
-            <ApiErrorDisplay
-               error={error}
-               context={`${environmentName} > Packages`}
-            />
-         )}
-      </>
+      <Grid container spacing={2}>
+         {packages.map((pkg) => {
+            const packageResourceUri = encodeResourceUri({
+               environmentName,
+               packageName: pkg.name,
+            });
+            return (
+               <Grid size={{ xs: 12, sm: 6, md: 4 }} key={pkg.name}>
+                  <PackageCard
+                     pkg={pkg}
+                     packageResourceUri={packageResourceUri}
+                     onSelectPackage={onSelectPackage}
+                  />
+               </Grid>
+            );
+         })}
+      </Grid>
+   );
+}
+
+function PackageCard({
+   pkg,
+   packageResourceUri,
+   onSelectPackage,
+}: {
+   pkg: Package;
+   packageResourceUri: string;
+   onSelectPackage: (to: string, event?: React.MouseEvent) => void;
+}) {
+   const { mutable } = useServer();
+   const [menuAnchorEl, setMenuAnchorEl] = useState<null | HTMLElement>(null);
+   const menuOpen = Boolean(menuAnchorEl);
+
+   const handleClick = (event: React.MouseEvent) => {
+      onSelectPackage(pkg.name, event);
+   };
+
+   const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      setMenuAnchorEl(event.currentTarget);
+   };
+
+   const handleMenuClose = () => {
+      setMenuAnchorEl(null);
+   };
+
+   const description = pkg.description ?? "";
+
+   return (
+      <Card
+         variant="outlined"
+         onClick={handleClick}
+         sx={{
+            height: "100%",
+            cursor: "pointer",
+            borderRadius: 3,
+            borderColor: "divider",
+            boxShadow: "none",
+            transition: "all 0.2s ease-in-out",
+            "&:hover": { boxShadow: 2, borderColor: "primary.main" },
+         }}
+      >
+         <CardContent sx={{ p: 2.5, "&:last-child": { pb: 2.5 } }}>
+            <Box sx={{ display: "flex", alignItems: "flex-start", gap: 1.5 }}>
+               <Box
+                  sx={{
+                     width: 36,
+                     height: 36,
+                     borderRadius: 1.5,
+                     bgcolor: "grey.100",
+                     display: "flex",
+                     alignItems: "center",
+                     justifyContent: "center",
+                     flexShrink: 0,
+                     color: "text.primary",
+                  }}
+               >
+                  <Inventory2OutlinedIcon sx={{ fontSize: 20 }} />
+               </Box>
+               <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Typography
+                     variant="subtitle1"
+                     component="h6"
+                     noWrap
+                     sx={{ fontWeight: 600, mb: 0.5 }}
+                  >
+                     {pkg.name}
+                  </Typography>
+                  <Tooltip title={description} followCursor enterDelay={1000}>
+                     <Typography
+                        variant="body2"
+                        color="text.secondary"
+                        sx={{
+                           overflow: "hidden",
+                           textOverflow: "ellipsis",
+                           display: "-webkit-box",
+                           WebkitLineClamp: 2,
+                           WebkitBoxOrient: "vertical",
+                           lineHeight: 1.5,
+                        }}
+                     >
+                        {description}
+                     </Typography>
+                  </Tooltip>
+               </Box>
+               {mutable && (
+                  <>
+                     <IconButton
+                        size="small"
+                        onClick={handleMenuClick}
+                        aria-label={`Package actions for ${pkg.name}`}
+                        sx={{ flexShrink: 0, mt: -0.5, mr: -0.5 }}
+                     >
+                        <MoreVert fontSize="small" />
+                     </IconButton>
+                     <Menu
+                        anchorEl={menuAnchorEl}
+                        open={menuOpen}
+                        onClose={handleMenuClose}
+                        onClick={(e) => e.stopPropagation()}
+                        anchorOrigin={{
+                           vertical: "bottom",
+                           horizontal: "right",
+                        }}
+                        transformOrigin={{
+                           vertical: "top",
+                           horizontal: "right",
+                        }}
+                     >
+                        <EditPackageDialog
+                           package={pkg}
+                           resourceUri={packageResourceUri}
+                           onCloseDialog={handleMenuClose}
+                        />
+                        <DeletePackageDialog
+                           resourceUri={packageResourceUri}
+                           onCloseDialog={handleMenuClose}
+                        />
+                     </Menu>
+                  </>
+               )}
+            </Box>
+         </CardContent>
+      </Card>
    );
 }

package/src/components/Home/DeleteEnvironmentDialog.tsx

@@ -13,6 +13,7 @@ import { Environment } from "../../client";
 import { useMutationWithApiError } from "../../hooks/useQueryWithApiError";
 import { useServer } from "../ServerProvider";
 import { useQueryClient } from "@tanstack/react-query";
+import { MALLOY_BRAND } from "../styles";
 
 export default function DeleteEnvironmentDialog({
    environment,
@@ -89,8 +90,8 @@ export default function DeleteEnvironmentDialog({
                   variant="outlined"
                   onClick={handleClose}
                   style={{
-                     borderColor: "#14b3cb",
-                     color: "#14b3cb",
+                     borderColor: MALLOY_BRAND.teal,
+                     color: MALLOY_BRAND.teal,
                   }}
                >
                   Cancel