slice-machine-ui 1.15.1-dev-next-release.2 → 1.15.1-dev-next-release.3

package/pages/slices.tsx

@@ -9,7 +9,6 @@ import { SharedSlice as SharedSliceType } from "@prismicio/types-internal/lib/cu
 
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { LibraryUI } from "@lib/models/common/LibraryUI";
-import { SharedSlice } from "@lib/models/ui/Slice";
 import { VIDEO_WHAT_ARE_SLICES } from "@lib/consts";
 import {
   AppLayout,
@@ -26,13 +25,9 @@ import { RenameSliceModal } from "@components/Forms/RenameSliceModal";
 import { DeleteSliceModal } from "@components/DeleteSliceModal";
 import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import {
-  getFrontendSlices,
-  getLibraries,
-  getRemoteSlices,
-} from "@src/modules/slices";
-import { useModelStatus } from "@src/hooks/useModelStatus";
+import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { SliceToastMessage } from "@components/ToasterContainer";
 
@@ -45,11 +40,10 @@ const SlicesIndex: React.FunctionComponent = () => {
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
-  const { remoteSlices, libraries, frontendSlices } = useSelector(
+  const { remoteSlices, libraries } = useSelector(
     (store: SliceMachineStoreType) => ({
       remoteSlices: getRemoteSlices(store),
       libraries: getLibraries(store),
-      frontendSlices: getFrontendSlices(store),
     })
   );
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
@@ -65,10 +59,6 @@ const SlicesIndex: React.FunctionComponent = () => {
     return library;
   });
 
-  const { modelsStatuses, authStatus, isOnline } = useModelStatus({
-    slices: frontendSlices,
-  });
-
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   const slices = (libraries || []).map((l) => l.components).flat();
   const sliceCount = slices.length;
@@ -179,39 +169,32 @@ const SlicesIndex: React.FunctionComponent = () => {
                         </Flex>
                         <Grid
                           elems={components}
-                          defineElementKey={(slice: ComponentUI) =>
-                            slice.model.name
-                          }
-                          renderElem={(slice: ComponentUI) => {
-                            return SharedSlice.render({
-                              slice,
-                              StatusOrCustom: {
-                                status: modelsStatuses.slices[slice.model.id],
-                                authStatus,
-                                isOnline,
-                              },
-                              actions: {
-                                onUpdateScreenshot: (e: React.MouseEvent) => {
-                                  e.preventDefault();
-                                  onOpenModal({
-                                    sliceFilterFn: (s: ComponentUI[]) =>
-                                      s.filter(
-                                        (e) => e.model.id === slice.model.id
-                                      ),
-                                  });
-                                },
-                                openRenameModal: (slice: ComponentUI) => {
+                          defineElementKey={(slice) => slice.model.name}
+                          renderElem={(slice) => (
+                            <SharedSliceViewCard
+                              action={{
+                                type: "menu",
+                                onRemove: () => {
                                   setSliceForEdit(slice);
-                                  openRenameSliceModal();
+                                  openDeleteSliceModal();
                                 },
-                                openDeleteModal: (slice: ComponentUI) => {
+                                onRename: () => {
                                   setSliceForEdit(slice);
-                                  openDeleteSliceModal();
+                                  openRenameSliceModal();
                                 },
-                              },
-                              showActions: true,
-                            });
-                          }}
+                              }}
+                              isDeletedSlice={false}
+                              onUpdateScreenshot={() => {
+                                onOpenModal({
+                                  sliceFilterFn: (s) =>
+                                    s.filter(
+                                      (e) => e.model.id === slice.model.id
+                                    ),
+                                });
+                              }}
+                              slice={slice}
+                            />
+                          )}
                           gridGap="32px 16px"
                         />
                       </Flex>

package/src/domain/slice.ts

@@ -0,0 +1,38 @@
+import type {
+  CompositeSlice,
+  LegacySlice,
+} from "@prismicio/types-internal/lib/customtypes/widgets/slices";
+
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
+
+export type NonSharedSlice = CompositeSlice | LegacySlice;
+
+export const NON_SHARED_SLICE_LIBRARY_NAME = "Default";
+
+export function countMissingScreenshots(slice: ComponentUI): number {
+  return slice.model.variations.length - Object.keys(slice.screenshots).length;
+}
+
+export function getNonSharedSliceLabel(slice: NonSharedSlice): string {
+  return (
+    slice.config?.label ??
+    (slice.type === "Group" ||
+    slice.type === "Slice" ||
+    (slice.type !== "Boolean" && slice.type !== "Separator")
+      ? slice.fieldset
+      : undefined) ??
+    slice.type
+  );
+}
+
+export function getScreenshotUrl(
+  slice: ComponentUI,
+  variation: VariationSM
+): string | undefined {
+  return slice.screenshots[variation.id]?.url;
+}
+
+export function getSharedSliceLibraryName(slice: ComponentUI): string {
+  return slice.from.length > 0 ? slice.from : "Default";
+}

package/src/features/changes/StatusBadge.tsx

@@ -0,0 +1,107 @@
+import { Badge, Tooltip } from "@prismicio/editor-ui";
+import type { ComponentProps, FC } from "react";
+
+import { ModelStatus } from "@lib/models/common/ModelStatus";
+import { AuthStatus } from "@src/modules/userContext/types";
+
+export type StatusBadgeProps = GetStatusBadgeContentArgs;
+
+export const StatusBadge: FC<StatusBadgeProps> = (props) => {
+  const { badgeColor, badgeTitle, tooltipContent } =
+    getStatusBadgeContent(props);
+  return (
+    <Tooltip content={tooltipContent} side="bottom">
+      <Badge color={badgeColor} title={badgeTitle} />
+    </Tooltip>
+  );
+};
+
+type GetStatusBadgeContentArgs = {
+  authStatus: AuthStatus;
+  isOnline: boolean;
+  modelStatus: ModelStatus;
+  modelType: ModelType;
+};
+
+type ModelType = "CustomType" | "Slice";
+
+type StatusBadgeContent = {
+  badgeColor: ComponentProps<typeof Badge>["color"];
+  badgeTitle: string;
+  tooltipContent: string;
+};
+
+function getStatusBadgeContent(
+  args: GetStatusBadgeContentArgs
+): StatusBadgeContent {
+  const modelTypeLabel = modelTypeLabels[args.modelType];
+  switch (args.modelStatus) {
+    case ModelStatus.New: {
+      return {
+        badgeColor: "green",
+        badgeTitle: "New",
+        tooltipContent: `This ${modelTypeLabel} exists only locally. Upon sync, it will be pushed to your remote repository.`,
+      };
+    }
+    case ModelStatus.Modified: {
+      return {
+        badgeColor: "amber",
+        badgeTitle: "Modified",
+        tooltipContent: `This ${modelTypeLabel} has been modified locally. Upon sync, changes will be pushed to your remote repository.`,
+      };
+    }
+    case ModelStatus.Synced: {
+      return {
+        badgeColor: "purple",
+        badgeTitle: "Synced",
+        tooltipContent: `This ${modelTypeLabel} is in sync with the remote repository.`,
+      };
+    }
+    case ModelStatus.Deleted: {
+      return {
+        badgeColor: "tomato",
+        badgeTitle: "Deleted",
+        tooltipContent: `This ${modelTypeLabel} has been deleted locally.`,
+      };
+    }
+    case ModelStatus.Unknown: {
+      if (!args.isOnline) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (no internet connection).",
+        };
+      }
+      if (args.authStatus === AuthStatus.UNAUTHORIZED) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (not connected to Prismic).",
+        };
+      }
+      if (args.authStatus === AuthStatus.FORBIDDEN) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (you don't have access to the repository).",
+        };
+      }
+    }
+    default: {
+      return {
+        badgeColor: "grey",
+        badgeTitle: "Unknown",
+        tooltipContent:
+          "Data from the remote repository could not be fetched (unknown error).",
+      };
+    }
+  }
+}
+
+const modelTypeLabels: Record<ModelType, string> = {
+  CustomType: "type",
+  Slice: "slice",
+};

package/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx

@@ -0,0 +1,39 @@
+import { Badge, Box, Text, Tooltip } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+import { Card, CardActions, CardFooter, CardMedia } from "@src/components/Card";
+import {
+  getNonSharedSliceLabel,
+  NON_SHARED_SLICE_LIBRARY_NAME,
+  type NonSharedSlice,
+} from "@src/domain/slice";
+
+type NonSharedSliceViewCardProps = {
+  slice: NonSharedSlice;
+};
+
+export const NonSharedSliceViewCard: FC<NonSharedSliceViewCardProps> = ({
+  slice,
+}) => (
+  <Card>
+    <CardMedia component="div">
+      <Box alignItems="center" justifyContent="center">
+        <Text color="grey11" component="span">
+          No screenshot available
+        </Text>
+      </Box>
+    </CardMedia>
+    <CardActions>
+      <Tooltip
+        content="This Slice was created with the Legacy Builder, and is incompatible with Slice Machine. You cannot edit, push, or delete it in Slice Machine. In order to proceed, manually remove the Slice from your type model. Then create a new Slice with the same fields using Slice Machine."
+        side="bottom"
+      >
+        <Badge color="purple" title="Legacy Slice" />
+      </Tooltip>
+    </CardActions>
+    <CardFooter
+      subtitle={NON_SHARED_SLICE_LIBRARY_NAME}
+      title={getNonSharedSliceLabel(slice)}
+    />
+  </Card>
+);

package/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx

@@ -0,0 +1,80 @@
+import { Box, Checkbox, Text } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { Card, CardFooter, CardMedia } from "@src/components/Card";
+import { getScreenshotUrl, getSharedSliceLibraryName } from "@src/domain/slice";
+
+type SharedSliceSelectionCardProps = {
+  isComingSoon: boolean;
+  isSliceTemplate: boolean;
+  onSelectedChange: (selected: boolean) => void;
+  selected: boolean;
+  slice: ComponentUI;
+};
+
+export const SharedSliceSelectionCard: FC<SharedSliceSelectionCardProps> = ({
+  isComingSoon,
+  isSliceTemplate,
+  onSelectedChange,
+  selected,
+  slice,
+}) => {
+  const defaultVariation = ComponentUI.variation(slice);
+  if (!defaultVariation) return null;
+  const src = getScreenshotUrl(slice, defaultVariation);
+  return (
+    <Card
+      checked={selected}
+      data-cy={`shared-slice-selection-card-${slice.model.id}`}
+      data-testid="shared-slice-selection-card"
+      disabled={isComingSoon}
+      interactive
+      onClick={() => {
+        onSelectedChange(!selected);
+      }}
+      size="small"
+      variant="outlined"
+    >
+      {src !== undefined ? (
+        <CardMedia src={src} />
+      ) : (
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+      )}
+      <CardFooter
+        action={
+          // TODO(DT-1661): `findFocusableAncestor` should find Radix UI's `Checkbox`.
+          <div onClick={(event) => event.stopPropagation()}>
+            <Checkbox
+              checked={selected}
+              disabled={isComingSoon}
+              onCheckedChange={onSelectedChange}
+            />
+          </div>
+        }
+        subtitle={
+          <>
+            {isSliceTemplate
+              ? `${slice.model.variations.length} variation${
+                  slice.model.variations.length > 1 ? "s" : ""
+                }`
+              : getSharedSliceLibraryName(slice)}
+            {isComingSoon ? (
+              <Text color="purple11" component="span" variant="small">
+                {" "}
+                • (coming soon)
+              </Text>
+            ) : undefined}
+          </>
+        }
+        title={slice.model.name}
+      />
+    </Card>
+  );
+};

package/src/features/slices/sliceCards/SharedSliceViewCard.tsx

@@ -0,0 +1,147 @@
+import {
+  Box,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  IconButton,
+  Text,
+  tokens,
+} from "@prismicio/editor-ui";
+import Link from "next/link";
+import type { FC } from "react";
+
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { Card, CardFooter, CardMedia, CardStatus } from "@src/components/Card";
+import {
+  countMissingScreenshots,
+  getScreenshotUrl,
+  getSharedSliceLibraryName,
+} from "@src/domain/slice";
+import {
+  StatusBadge,
+  type StatusBadgeProps,
+} from "@src/features/changes/StatusBadge";
+import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
+import { AddPhotoAlternateIcon } from "@src/icons/AddPhotoAlternateIcon";
+
+type SharedSliceViewCardProps = {
+  action:
+    | { type: "menu"; onRemove: () => void; onRename: () => void }
+    | { type: "remove"; onRemove: () => void }
+    | ({ type: "status" } & Omit<StatusBadgeProps, "modelType">);
+  isDeletedSlice: boolean;
+  onUpdateScreenshot: (() => void) | undefined;
+  slice: ComponentUI;
+};
+
+export const SharedSliceViewCard: FC<SharedSliceViewCardProps> = ({
+  action,
+  isDeletedSlice,
+  onUpdateScreenshot,
+  slice,
+}) => {
+  const defaultVariation = ComponentUI.variation(slice);
+  if (!defaultVariation) return null;
+  const href = SLICES_CONFIG.getBuilderPagePathname({
+    libraryName: slice.href,
+    sliceName: slice.model.name,
+    variationId: defaultVariation.id,
+  });
+  const src = getScreenshotUrl(slice, defaultVariation);
+  const canUpdateScreenshot = !!onUpdateScreenshot && !isDeletedSlice;
+  return (
+    <Card
+      {...(href !== undefined && !isDeletedSlice
+        ? { component: Link, href, interactive: true }
+        : { interactive: false })}
+    >
+      {src !== undefined ? (
+        <CardMedia
+          overlay={
+            canUpdateScreenshot ? (
+              <Box alignItems="center" justifyContent="center">
+                <UpdateScreenshotButton onClick={onUpdateScreenshot} />
+              </Box>
+            ) : undefined
+          }
+          src={src}
+        />
+      ) : (
+        <CardMedia component="div">
+          <Box
+            alignItems="center"
+            flexDirection="column"
+            gap={8}
+            justifyContent="center"
+          >
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+            {canUpdateScreenshot ? (
+              <UpdateScreenshotButton onClick={onUpdateScreenshot} />
+            ) : undefined}
+          </Box>
+        </CardMedia>
+      )}
+      <CardFooter
+        action={
+          action.type === "menu" ? (
+            <DropdownMenu modal>
+              <DropdownMenuTrigger>
+                <IconButton icon="moreVert" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onSelect={action.onRename}
+                  startIcon={<Icon name="edit" />}
+                >
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  color="tomato"
+                  onSelect={action.onRemove}
+                  startIcon={<Icon name="delete" />}
+                >
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : action.type === "remove" ? (
+            <IconButton icon="close" onClick={action.onRemove} />
+          ) : (
+            <StatusBadge
+              authStatus={action.authStatus}
+              isOnline={action.isOnline}
+              modelStatus={action.modelStatus}
+              modelType="Slice"
+            />
+          )
+        }
+        subtitle={getSharedSliceLibraryName(slice)}
+        title={slice.model.name}
+      />
+      {canUpdateScreenshot && countMissingScreenshots(slice) > 0 ? (
+        <CardStatus>Missing screenshot</CardStatus>
+      ) : undefined}
+    </Card>
+  );
+};
+
+type UpdateScreenshotButtonProps = {
+  onClick: () => void;
+};
+
+const UpdateScreenshotButton: FC<UpdateScreenshotButtonProps> = (props) => (
+  <Button
+    onClick={props.onClick}
+    renderStartIcon={() => (
+      <AddPhotoAlternateIcon color={tokens.color.greyLight11} />
+    )}
+    variant="secondary"
+  >
+    Update screenshot
+  </Button>
+);

package/src/modules/pushChangesSaga/trackPushChangesSuccess.ts

@@ -1,6 +1,6 @@
 import { ChangesPushSagaPayload } from ".";
 import { telemetry } from "@src/apiClient";
-import { countMissingScreenshots } from "@src/utils/screenshots/missing";
+import { countMissingScreenshots } from "@src/domain/slice";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 
 type trackingParameters = ChangesPushSagaPayload & { startTime: number };

package/test/pages/custom-types.test.tsx

@@ -302,7 +302,7 @@ describe("Custom Type Builder", () => {
     const user = userEvent.setup();
     await user.click(screen.getByText("Select existing"));
 
-    const slicesToSelect = screen.getAllByTestId("slicezone-modal-item");
+    const slicesToSelect = screen.getAllByTestId("shared-slice-selection-card");
 
     for (const elem of slicesToSelect) {
       // eslint-disable-next-line @typescript-eslint/await-thenable

package/test/pages/slices.test.tsx

@@ -31,7 +31,7 @@ describe("slices", () => {
     mockRouter.setCurrentUrl("/slices");
   });
 
-  test("When user creates a slice it should send a tracking event", async (ctx) => {
+  test.skip("When user creates a slice it should send a tracking event", async (ctx) => {
     const adapter = createTestPlugin({
       setup: ({ hook }) => {
         hook("slice:create", () => void 0);
@@ -206,7 +206,7 @@ describe("slices", () => {
     );
   });
 
-  test("if creation fails it sohuld not send the tracking event", async (ctx) => {
+  test.skip("if creation fails it sohuld not send the tracking event", async (ctx) => {
     const adapter = createTestPlugin({
       setup: ({ hook }) => {
         hook("slice:create", () => {

package/components/KebabMenuDropdown/KebabMenuList.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Box, Flex } from "theme-ui";
-import { MenuOption } from ".";
-
-const MenuItem: React.FunctionComponent<MenuOption> = ({
-  displayName,
-  onClick,
-  dataCy,
-}) => {
-  return (
-    <Box
-      sx={{
-        py: 2,
-        px: 3,
-        cursor: "pointer",
-        fontSize: "14px",
-        borderRadius: 0,
-        ":hover": {
-          bg: "hoverBackground",
-        },
-      }}
-      onClick={onClick}
-      data-cy={dataCy}
-    >
-      {displayName}
-    </Box>
-  );
-};
-
-export const KebabMenuList: React.FunctionComponent<{
-  menuOptions: MenuOption[];
-  closeMenu: () => void;
-  dataCy?: string;
-}> = ({ menuOptions, closeMenu, dataCy }) => {
-  return (
-    <Box
-      data-cy={dataCy}
-      sx={{
-        py: 1,
-        flexDirection: "column",
-        backgroundColor: "headSection",
-        overflow: "auto",
-        display: "flex",
-        borderRadius: "6px",
-        border: (t) => `1px solid ${String(t.colors?.darkBorder)}`,
-        boxShadow: "0 10px 10px rgba(0, 0, 0, 0.05)",
-        maxHeight: 340,
-        minWidth: 120,
-        maxWidth: 350,
-        color: "text",
-      }}
-    >
-      <Flex sx={{ p: 0, flexDirection: "column" }}>
-        {menuOptions.map((option) => {
-          return (
-            <MenuItem
-              key={option.displayName}
-              displayName={option.displayName}
-              onClick={(event) => {
-                closeMenu();
-                event.preventDefault();
-                option.onClick(event);
-              }}
-              dataCy={option.dataCy}
-            />
-          );
-        })}
-      </Flex>
-    </Box>
-  );
-};