slice-machine-ui 2.17.3-alpha.jp-cli-auth-localhost.1 → 2.17.3-alpha.jp-revert-section-naming-experiment.1

package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx

@@ -1,6 +1,7 @@
 import {
   ActionList,
   ActionListItem,
+  BackgroundIcon,
   BlankSlate,
   BlankSlateActions,
   BlankSlateDescription,
@@ -10,10 +11,6 @@ import {
 import { FC } from "react";
 
 import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
-
-import { getSliceCreationOptions } from "./sliceCreationOptions";
 
 export type SliceZoneBlankSlateProps = {
   openUpdateSliceZoneModal: () => void;
@@ -33,11 +30,6 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   isSlicesTemplatesSupported,
 }) => {
   const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-  const sliceCreationOptions = getSliceCreationOptions({
-    menuType: "ActionList",
-    sectionsNamingExperiment,
-  });
 
   return (
     <BlankSlate data-testid="slice-zone-blank-slate" sx={{ width: 648 }}>
@@ -47,57 +39,81 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
         name="add"
         size="large"
       />
-      <BlankSlateTitle size="big">
-        Add {pluralize(sectionsNamingExperiment.value)}
-      </BlankSlateTitle>
+      <BlankSlateTitle size="big">Add slices</BlankSlateTitle>
       <BlankSlateDescription>
-        {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))} are
-        website sections that you can reuse on different pages with different
-        content. Each on different pages with different content. Each{" "}
-        {sectionsNamingExperiment.value} has its own component in your code.
+        Slices are website sections that you can reuse on different pages with
+        different content. Each slice has its own component in your code.
       </BlankSlateDescription>
       <BlankSlateActions>
         <ActionList>
           {aiSliceGenerationExperiment.eligible && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromImage.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="autoFixHigh"
+                  size="small"
+                  iconSize="medium"
+                  color="purple"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openCreateSliceFromImageModal}
-              description={sliceCreationOptions.fromImage.description}
+              description="Build a slice based on your design image."
             >
-              {sliceCreationOptions.fromImage.title}
+              Generate from image
             </ActionListItem>
           )}
           <ActionListItem
-            renderStartIcon={() =>
-              sliceCreationOptions.fromScratch.BackgroundIcon
-            }
+            renderStartIcon={() => (
+              <BackgroundIcon
+                name="add"
+                size="small"
+                iconSize="medium"
+                color="white"
+                variant="solid"
+                radius={6}
+              />
+            )}
             onClick={openCreateSliceModal}
-            description={sliceCreationOptions.fromScratch.description}
+            description="Build a custom slice your way."
           >
-            {sliceCreationOptions.fromScratch.title}
+            Start from scratch
           </ActionListItem>
           {isSlicesTemplatesSupported && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromTemplate.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="contentCopy"
+                  size="small"
+                  iconSize="medium"
+                  color="white"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openSlicesTemplatesModal}
-              description={sliceCreationOptions.fromTemplate.description}
+              description="Choose from ready-made examples."
             >
-              {sliceCreationOptions.fromTemplate.title}
+              Use a template
             </ActionListItem>
           )}
           {projectHasAvailableSlices && (
             <ActionListItem
-              renderStartIcon={() =>
-                sliceCreationOptions.fromExisting.BackgroundIcon
-              }
+              renderStartIcon={() => (
+                <BackgroundIcon
+                  name="folder"
+                  size="small"
+                  iconSize="medium"
+                  color="white"
+                  variant="solid"
+                  radius={6}
+                />
+              )}
               onClick={openUpdateSliceZoneModal}
-              description={sliceCreationOptions.fromExisting.description}
+              description="Select from your created slices."
             >
-              {sliceCreationOptions.fromExisting.title}
+              Reuse an existing slice
             </ActionListItem>
           )}
         </ActionList>

package/src/features/environments/actions/getActiveEnvironment.ts

@@ -5,6 +5,10 @@ import {
 
 import { managerClient } from "@/managerClient";
 
+type GetActiveEnvironmentArgs = {
+  retried?: boolean;
+};
+
 type GetActiveEnvironmentReturnType =
   | {
       activeEnvironment: Environment;
@@ -15,18 +19,29 @@ type GetActiveEnvironmentReturnType =
       error: unknown;
     };
 
-export async function getActiveEnvironment(): Promise<GetActiveEnvironmentReturnType> {
+export async function getActiveEnvironment(
+  args?: GetActiveEnvironmentArgs,
+): Promise<GetActiveEnvironmentReturnType> {
+  const { retried = false } = args ?? {};
+
   try {
-    const { activeEnvironment } =
+    const activeEnvironmentResult =
       await managerClient.project.fetchActiveEnvironment();
 
-    return { activeEnvironment };
+    if (activeEnvironmentResult.type === "error") {
+      const errorInstance = new Error(activeEnvironmentResult.error.message);
+      errorInstance.name = activeEnvironmentResult.error.name;
+      throw errorInstance;
+    }
+
+    return { activeEnvironment: activeEnvironmentResult.activeEnvironment };
   } catch (error) {
-    if (isInvalidActiveEnvironmentError(error)) {
+    if (isInvalidActiveEnvironmentError(error) && !retried) {
       // Reset to the production environment.
       await managerClient.project.updateEnvironment({ environment: undefined });
 
-      return await getActiveEnvironment();
+      // Call recursively with isRetry=true to prevent infinite loop if it fails again and again.
+      return await getActiveEnvironment({ retried: true });
     }
 
     return { error };

package/src/features/navigation/Navigation.tsx

@@ -15,11 +15,9 @@ import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
 import { MenuBookIcon } from "@/icons/MenuBookIcon";
 import { SettingsIcon } from "@/icons/SettingsIcon";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import { ChangesItem } from "../../legacy/components/Navigation/ChangesItem";
 import { Environment } from "../../legacy/components/Navigation/Environment";
-import { useSectionsNamingExperiment } from "../builder/useSectionsNamingExperiment";
 import { NavigationItem } from "./NavigationItem";
 import { SliceMachineVersion } from "./SliceMachineVersion";
 import { UpdateInfo } from "./UpdateInfo";
@@ -29,7 +27,6 @@ export function Navigation() {
 
   const gitIntegrationExperiment = useGitIntegrationExperiment();
   const { documentationLink } = useMarketingContent();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const adapter = useAdapterName();
 
   interface CustomTypeNavigationItemProps {
@@ -60,11 +57,9 @@ export function Navigation() {
       minWidth={0}
     >
       <Box flexDirection="column" gap={16}>
-        <ErrorBoundary>
-          <Suspense fallback={<Skeleton height={40} />}>
-            <Environment />
-          </Suspense>
-        </ErrorBoundary>
+        <Suspense fallback={<Skeleton height={40} />}>
+          <Environment />
+        </Suspense>
 
         <Separator style="dashed" />
 
@@ -80,9 +75,7 @@ export function Navigation() {
           <CustomTypeNavigationItem type="custom" />
 
           <NavigationItem
-            title={pluralize(
-              capitalizeFirstLetter(sectionsNamingExperiment.value),
-            )}
+            title="Slices"
             href="/slices"
             Icon={FolderIcon}
             active={router.asPath.startsWith("/slices")}
@@ -103,7 +96,6 @@ export function Navigation() {
               <OnboardingGuide />
             </Suspense>
           </ErrorBoundary>
-
           <NavigationItem
             title="Documentation"
             href={documentationLink}

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

@@ -27,7 +27,6 @@ import { AddPhotoAlternateIcon } from "@/icons/AddPhotoAlternateIcon";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 
 type SharedSliceCardProps = {
-  isComingSoon?: boolean;
   isDeleted?: boolean;
   onUpdateScreenshot?: () => void;
   slice: ComponentUI;
@@ -36,7 +35,7 @@ type SharedSliceCardProps = {
 } & (
   | /*
    * Props for rendering a `Card` with a Next.js `Link` component (or with a
-   * non-interactive element if either `isComingSoon` or `isDeleted` is true).
+   * non-interactive element if `isDeleted` is true).
    */
   {
       mode: "navigation";
@@ -66,7 +65,6 @@ type Action =
 export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
   const {
     action,
-    isComingSoon = false,
     isDeleted = false,
     onUpdateScreenshot,
     selected = false,
@@ -79,7 +77,7 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
   if (!variation) return null;
   const src = getScreenshotUrl(slice, variation);
 
-  const disabled = isComingSoon || isDeleted;
+  const disabled = isDeleted;
   const canUpdateScreenshot = !disabled && !!onUpdateScreenshot;
   const disableOverlay = variant === "outlined";
   const hasVariationId = variationId !== undefined;
@@ -224,12 +222,6 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
               : `${slice.model.variations.length} variation${
                   slice.model.variations.length > 1 ? "s" : ""
                 }`}
-            {isComingSoon ? (
-              <Text color="purple11" component="span" variant="small">
-                {" "}
-                • (coming soon)
-              </Text>
-            ) : undefined}
           </>
         }
         title={hasVariationId ? variation.name : slice.model.name}

package/src/legacy/components/AppLayout/index.tsx

@@ -1,4 +1,12 @@
-import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
+import {
+  BlankSlate,
+  BlankSlateDescription,
+  BlankSlateIcon,
+  BlankSlateTitle,
+  Box,
+  Button,
+  ButtonGroup,
+} from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { FC, PropsWithChildren, Suspense } from "react";
 
@@ -18,7 +26,31 @@ export const AppLayout: FC<PropsWithChildren> = ({
   ...otherProps
 }) => {
   return (
-    <ErrorBoundary>
+    <ErrorBoundary
+      renderError={(error) => {
+        return (
+          <Box
+            position="absolute"
+            top={64}
+            width="100%"
+            justifyContent="center"
+            flexDirection="column"
+          >
+            <BlankSlate>
+              <BlankSlateIcon
+                lineColor="tomato11"
+                backgroundColor="tomato3"
+                name="alert"
+              />
+              <BlankSlateTitle>Failed to load Slice Machine</BlankSlateTitle>
+              <BlankSlateDescription>
+                {JSON.stringify(error)}
+              </BlankSlateDescription>
+            </BlankSlate>
+          </Box>
+        );
+      }}
+    >
       <Suspense>
         <PageLayoutWithActiveEnvironment {...otherProps}>
           <PageLayoutPane>

package/src/legacy/components/ChangesItems/ChangesItems.tsx

@@ -4,7 +4,6 @@ import { AiOutlineExclamationCircle } from "react-icons/ai";
 
 import { countMissingScreenshots } from "@/domain/slice";
 import { ErrorBoundary } from "@/ErrorBoundary";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { ModelsStatuses } from "@/features/sync/getUnSyncChanges";
 import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
@@ -16,7 +15,6 @@ import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 import { LocalOrRemoteCustomType } from "@/legacy/lib/models/common/ModelData";
 import { ModelStatus } from "@/legacy/lib/models/common/ModelStatus";
 import { AuthStatus } from "@/modules/userContext/types";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
 
@@ -36,7 +34,6 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
   isOnline,
 }) => {
   const { modalPayload, onOpenModal } = useScreenshotChangesModal();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
@@ -71,11 +68,7 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
               <Box padding={{ bottom: 8 }}>
                 <ChangesSectionHeader>
                   <Box>
-                    <Text variant="h5">
-                      {pluralize(
-                        capitalizeFirstLetter(sectionsNamingExperiment.value),
-                      )}
-                    </Text>
+                    <Text variant="h5">Slices</Text>
                     <Text variant="h5" sx={{ marginLeft: 8 }}>
                       {unSyncedSlices.length}
                     </Text>

package/src/legacy/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -4,7 +4,6 @@ import Select from "react-select";
 import { Box, Label } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { createSlice } from "@/features/slices/actions/createSlice";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
@@ -12,7 +11,6 @@ import ModalFormCard from "@/legacy/components/ModalFormCard";
 import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { SliceSM } from "@/legacy/lib/models/common/Slice";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
-import { capitalizeFirstLetter } from "@/utils/textConversion";
 
 import { InputBox } from "../components/InputBox";
 import { validateSliceModalValues } from "../formsValidator";
@@ -38,7 +36,6 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
   const [isCreatingSlice, setIsCreatingSlice] = useState(false);
   const { syncChanges } = useAutoSync();
   const { completeStep } = useOnboarding();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   const onSubmit = async (values: FormValues) => {
     const sliceName = values.sliceName;
@@ -82,17 +79,15 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         validateSliceModalValues(values, localLibraries, remoteSlices)
       }
       content={{
-        title: `Create a new ${sectionsNamingExperiment.value}`,
+        title: "Create a new slice",
       }}
     >
       {({ touched, values, setFieldValue, errors }) => (
         <Box>
           <InputBox
             name="sliceName"
-            label={`${capitalizeFirstLetter(
-              sectionsNamingExperiment.value,
-            )} name`}
-            placeholder={`Pascalised ${sectionsNamingExperiment.value} API ID (e.g. TextBlock)`}
+            label="Slice name"
+            placeholder="Pascalised slice API ID (e.g. TextBlock)"
             // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
             error={touched.sliceName ? errors.sliceName : undefined}
             testId="slice-name-input"

package/src/legacy/components/Navigation/Environment.tsx

@@ -21,7 +21,8 @@ import { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector/SideNav
 
 export function Environment() {
   const { environments, error: useEnvironmentsError } = useEnvironments();
-  const { activeEnvironment } = useActiveEnvironment();
+  const { activeEnvironment, error: activeEnvironmentError } =
+    useActiveEnvironment();
   const { refreshState, openLoginModal } = useSliceMachineActions();
   const { syncChanges } = useAutoSync();
   const isOnline = useNetwork();
@@ -82,7 +83,10 @@ export function Environment() {
     return <SideNavEnvironmentSelector variant="offline" />;
   }
 
-  if (useEnvironmentsError === undefined) {
+  if (
+    useEnvironmentsError === undefined &&
+    activeEnvironmentError === undefined
+  ) {
     return (
       <SideNavEnvironmentSelector
         environments={environments}
@@ -110,5 +114,9 @@ export function Environment() {
     );
   }
 
-  throw useEnvironmentsError;
+  if (useEnvironmentsError !== undefined) {
+    throw useEnvironmentsError;
+  }
+
+  throw activeEnvironmentError;
 }

package/src/legacy/components/Simulator/components/FailedConnect/index.tsx

@@ -1,71 +1,66 @@
 import { IoMdRefresh } from "react-icons/io";
 import { Image, Link, Text } from "theme-ui";
 
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { Button } from "@/legacy/components/Button";
 
 import FullPage from "../FullPage";
 
-const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-
-  return (
-    <FullPage>
-      <Image src="/iframe-not-running.png" sx={{ width: "320px" }} />
+const FailedConnect = ({ onRetrigger }: { onRetrigger: () => void }) => (
+  <FullPage>
+    <Image src="/iframe-not-running.png" sx={{ width: "320px" }} />
+    <Text
+      sx={{
+        color: "textClear",
+        mb: 2,
+        fontSize: "14px",
+        lineHeight: "24px",
+        fontWeight: "600",
+      }}
+    >
+      Slice Machine can't render your slice
+    </Text>
+    <Text
+      sx={{
+        color: "failedConnectText",
+        maxWidth: "400px",
+        textAlign: "center",
+        fontSize: "12px",
+        lineHeight: "22px",
+      }}
+    >
+      Ensure your website's development server is running by typing
+      <br />
       <Text
-        sx={{
-          color: "textClear",
-          mb: 2,
-          fontSize: "14px",
-          lineHeight: "24px",
-          fontWeight: "600",
-        }}
+        as="code"
+        variant="styles.inlineCode"
+        sx={{ padding: "4px", borderRadius: "6px" }}
       >
-        Slice Machine can't render your {sectionsNamingExperiment.value}
+        npm run dev
       </Text>
-      <Text
+      &nbsp; in your terminal at the root of your website directory.
+      <br /> If that doesn't work, see the&nbsp;
+      <Link
+        target="_blank"
+        href="https://prismic.io/docs/slice-machine#simulate-slices"
         sx={{
-          color: "failedConnectText",
-          maxWidth: "400px",
-          textAlign: "center",
-          fontSize: "12px",
-          lineHeight: "22px",
+          color: "link",
         }}
       >
-        Ensure your website's development server is running by typing
-        <br />
-        <Text
-          as="code"
-          variant="styles.inlineCode"
-          sx={{ padding: "4px", borderRadius: "6px" }}
-        >
-          npm run dev
-        </Text>
-        &nbsp; in your terminal at the root of your website directory.
-        <br /> If that doesn't work, see the&nbsp;
-        <Link
-          target="_blank"
-          href="https://prismic.io/docs/slice-machine#simulate-slices"
-          sx={{
-            color: "link",
-          }}
-        >
-          troubleshooting instructions.
-        </Link>
-      </Text>
-      <Button
-        onClick={onRetrigger}
-        label="Refresh"
-        Icon={IoMdRefresh}
-        iconSize={20}
-        iconFill="#6F6E77"
-        variant="secondaryMedium"
-        sx={{
-          mt: "16px",
-        }}
-      />
-    </FullPage>
-  );
-};
+        troubleshooting instructions.
+      </Link>
+    </Text>
+    <Button
+      onClick={onRetrigger}
+      label="Refresh"
+      Icon={IoMdRefresh}
+      iconSize={20}
+      iconFill="#6F6E77"
+      variant="secondaryMedium"
+      sx={{
+        mt: "16px",
+      }}
+    />
+  </FullPage>
+);
 
 export default FailedConnect;

package/src/legacy/components/ToasterContainer/index.tsx

@@ -7,9 +7,6 @@ import {
   TypeOptions,
 } from "react-toastify";
 
-import { UseSectionsNamingExperimentReturnType } from "@/features/builder/useSectionsNamingExperiment";
-import { capitalizeFirstLetter } from "@/utils/textConversion";
-
 const getIconAccordingToasterType = ({
   type,
 }: {
@@ -70,14 +67,6 @@ export const ToastMessageWithPath: React.FC<{
 
 export const SliceToastMessage: React.FC<{
   path: string;
-  sectionsNamingExperiment: UseSectionsNamingExperimentReturnType;
-}> = (props) => {
-  return (
-    <ToastMessageWithPath
-      message={`${capitalizeFirstLetter(
-        props.sectionsNamingExperiment.value,
-      )} saved successfully at `}
-      {...props}
-    />
-  );
-};
+}> = (props) => (
+  <ToastMessageWithPath message="Slice saved successfully at " {...props} />
+);