slice-machine-ui 2.17.3-beta.1 → 2.17.3-beta.11

package/src/apiClient.ts

@@ -163,7 +163,7 @@ export const pushChanges: SliceMachineManagerClient["prismicRepository"]["pushCh
 
 /** Auth Routes * */
 
-export const startAuth = async (): Promise<void> => {
+export const clearAuth = async (): Promise<void> => {
   return await managerClient.user.logout();
 };
 

package/src/domain/fields.ts

@@ -92,7 +92,7 @@ export const imageField: NestableField = {
   type: "Image",
 };
 
-export const LinkField: NestableField = {
+export const linkField: NestableField = {
   name: "Link",
   description: "A link to a website, asset, or document.",
   icon: "link",
@@ -111,8 +111,8 @@ export const contentRelationshipField: NestableField = {
   variant: "ContentRelationship",
 };
 
-export const LinkToMediaField: NestableField = {
-  name: "Link To Media",
+export const linkToMediaField: NestableField = {
+  name: "Link to Media",
   description: "A link to a media asset.",
   icon: "attachFile",
   thumbnail:
@@ -182,8 +182,8 @@ export const nestableFields: NestableField[] = [
   booleanField,
   numberField,
   selectField,
-  LinkField,
-  LinkToMediaField,
+  linkField,
+  linkToMediaField,
   colorField,
   dateField,
   tableField,
@@ -197,7 +197,7 @@ export const nestableFields: NestableField[] = [
  * UID
  */
 
-export const UIDField: UIDField = {
+export const uidField: UIDField = {
   name: "UID",
   description: "Unique Identifier",
   icon: "tag",
@@ -230,4 +230,4 @@ export const groupFields: GroupField[] = [groupField, nestedGroupField];
  * All fields
  */
 
-export const fields = [...nestableFields, UIDField, ...groupFields];
+export const fields = [...nestableFields, uidField, ...groupFields];

package/src/features/auth/LogoutButton.tsx

@@ -0,0 +1,37 @@
+import { IconButton, Tooltip } from "@prismicio/editor-ui";
+import * as Sentry from "@sentry/nextjs";
+import { toast } from "react-toastify";
+
+import { clearAuth as managerLogout, getState } from "@/apiClient";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+export function LogoutButton() {
+  const { refreshState } = useSliceMachineActions();
+
+  async function onClick() {
+    await managerLogout();
+
+    const serverState = await getState();
+    refreshState(serverState);
+
+    Sentry.setUser({ id: serverState.env.shortId });
+
+    // refresh queries to update the UI
+    invalidateEnvironmentsData();
+    invalidateActiveEnvironmentData();
+
+    toast.success("Logged out");
+  }
+
+  return (
+    <Tooltip content="Log out" side="right">
+      <IconButton
+        icon="logout"
+        onClick={() => void onClick()}
+        hiddenLabel="Log out"
+      />
+    </Tooltip>
+  );
+}

package/src/features/builder/AddFieldDropdown.tsx

@@ -18,7 +18,7 @@ import {
   FieldVariant,
   groupField,
   nestableFields,
-  UIDField,
+  uidField,
 } from "@/domain/fields";
 
 export type AddFieldDropdownProps = {
@@ -47,7 +47,7 @@ export function AddFieldDropdown(props: AddFieldDropdownProps) {
     (field) =>
       nestableFields.some(
         (nestableField) => nestableField.name === field.name,
-      ) || field.name === UIDField.name,
+      ) || field.name === uidField.name,
   );
   const groupFieldToRender = fields.find(
     (field) => field.name === groupField.name,

package/src/features/changes/PushChangesButton.tsx

@@ -1,83 +1,20 @@
-import { Button, Skeleton, Tooltip } from "@prismicio/editor-ui";
+import { Button } from "@prismicio/editor-ui";
 import {
   type ComponentPropsWithoutRef,
   type ElementRef,
-  type FC,
   forwardRef,
-  type ReactNode,
-  Suspense,
 } from "react";
 
-import { ErrorBoundary } from "@/ErrorBoundary";
-import { gitProviderToConfig } from "@/features/settings/git/GitProvider";
-import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
-import { useLinkedGitRepos } from "@/features/settings/git/useLinkedGitRepos";
-
-type PushChangesButtonProps = Required<BarePushChangesButtonProps>;
-
-export const PushChangesButton: FC<PushChangesButtonProps> = (props) => (
-  <ErrorBoundary renderError={renderError}>
-    <Suspense fallback={<PushChangesButtonSkeleton />}>
-      <PushChangesButtonUsingGitIntegrationExperiment {...props} />
-    </Suspense>
-  </ErrorBoundary>
-);
-
-const PushChangesButtonUsingGitIntegrationExperiment: FC<
-  PushChangesButtonProps
-> = (props) => {
-  const gitIntegrationExperiment = useGitIntegrationExperiment();
-  return gitIntegrationExperiment.eligible ? (
-    <PushChangesButtonUsingLinkedGitRepos {...props} />
-  ) : (
-    <BarePushChangesButton {...props} />
-  );
-};
-
-const PushChangesButtonUsingLinkedGitRepos: FC<PushChangesButtonProps> = (
-  props,
-) => {
-  const { linkedGitRepos } = useLinkedGitRepos();
-  if (linkedGitRepos.length > 0) {
-    const providerConfig = gitProviderToConfig[linkedGitRepos[0].provider];
-    return (
-      <Tooltip
-        content={`This project uses the Git workflow. Update Prismic by pushing your changes to ${providerConfig.name}.`}
-        side="bottom"
-      >
-        <BarePushChangesButton disabled />
-      </Tooltip>
-    );
-  } else {
-    return <BarePushChangesButton {...props} />;
-  }
-};
-
-type BarePushChangesButtonProps = Pick<
+type PushChangesButtonProps = Pick<
   ComponentPropsWithoutRef<typeof Button>,
   "disabled" | "loading" | "onClick"
 >;
 
-const BarePushChangesButton = forwardRef<
+export const PushChangesButton = forwardRef<
   ElementRef<typeof Button>,
-  BarePushChangesButtonProps
+  PushChangesButtonProps
 >((props, ref) => (
   <Button {...props} ref={ref} startIcon="upload">
     Push
   </Button>
 ));
-
-function renderError(): ReactNode {
-  return (
-    <Tooltip
-      content="An error occurred while fetching the list of connected Git repositories."
-      side="bottom"
-    >
-      <BarePushChangesButton disabled />
-    </Tooltip>
-  );
-}
-
-const PushChangesButtonSkeleton: FC = () => (
-  <Skeleton height={32} width={71.32} />
-);

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

@@ -22,15 +22,10 @@ import { toast } from "react-toastify";
 
 import { getState, telemetry } from "@/apiClient";
 import { addAiFeedback } from "@/features/aiFeedback";
-import {
-  useSectionsNamingExperiment,
-  UseSectionsNamingExperimentReturnType,
-} from "@/features/builder/useSectionsNamingExperiment";
 import { useOnboarding } from "@/features/onboarding/useOnboarding";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
-import { pluralize } from "@/utils/textConversion";
 
 import { Slice, SliceCard } from "./SliceCard";
 
@@ -58,7 +53,7 @@ export function CreateSliceFromImageModal(
   const { syncChanges } = useAutoSync();
   const { createSliceSuccess } = useSliceMachineActions();
   const { completeStep } = useOnboarding();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
+
   /**
    * Keeps track of the current instance id.
    * When the modal is closed, the id is reset.
@@ -244,8 +239,7 @@ export function CreateSliceFromImageModal(
       <DialogHeader title="Generate from image" />
       <DialogContent gap={0}>
         <DialogDescription hidden>
-          Upload images to generate {pluralize(sectionsNamingExperiment.value)}{" "}
-          with AI
+          Upload images to generate slices with AI
         </DialogDescription>
         {slices.length === 0 ? (
           <Box padding={16} height="100%">
@@ -285,8 +279,7 @@ export function CreateSliceFromImageModal(
             loading={isCreatingSlices}
             onClick={onSubmit}
           >
-            {getSubmitButtonLabel({ location, sectionsNamingExperiment })} (
-            {readySlices.length})
+            {getSubmitButtonLabel(location)} ({readySlices.length})
           </DialogActionButton>
         </DialogActions>
       </DialogContent>
@@ -298,7 +291,6 @@ function UploadBlankSlate(props: {
   droppingFiles?: boolean;
   onFilesSelected: (files: File[]) => void;
 }) {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const { droppingFiles = false, onFilesSelected } = props;
 
   return (
@@ -320,8 +312,7 @@ function UploadBlankSlate(props: {
         />
         <BlankSlateTitle>Upload your design images.</BlankSlateTitle>
         <BlankSlateDescription>
-          Once uploaded, you can generate{" "}
-          {pluralize(sectionsNamingExperiment.value)} automatically using AI.
+          Once uploaded, you can generate slices automatically using AI.
         </BlankSlateDescription>
         <BlankSlateActions>
           <FileUploadButton
@@ -469,19 +460,15 @@ async function addSlices(newSlices: NewSlice[]) {
   return { library, slices };
 }
 
-const getSubmitButtonLabel = ({
-  location,
-  sectionsNamingExperiment,
-}: {
-  location: "custom_type" | "page_type" | "slices";
-  sectionsNamingExperiment: UseSectionsNamingExperimentReturnType;
-}) => {
+const getSubmitButtonLabel = (
+  location: "custom_type" | "page_type" | "slices",
+) => {
   switch (location) {
     case "custom_type":
       return "Add to type";
     case "page_type":
       return "Add to page";
     case "slices":
-      return `Add to ${pluralize(sectionsNamingExperiment.value)}`;
+      return "Add to slices";
   }
 };

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

@@ -9,10 +9,6 @@ import {
 } from "@prismicio/editor-ui";
 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 = {
@@ -32,11 +28,8 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
   projectHasAvailableSlices,
   isSlicesTemplatesSupported,
 }) => {
-  const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const sliceCreationOptions = getSliceCreationOptions({
     menuType: "ActionList",
-    sectionsNamingExperiment,
   });
 
   return (
@@ -47,28 +40,23 @@ 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 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
-              }
-              onClick={openCreateSliceFromImageModal}
-              description={sliceCreationOptions.fromImage.description}
-            >
-              {sliceCreationOptions.fromImage.title}
-            </ActionListItem>
-          )}
+          <ActionListItem
+            renderStartIcon={() =>
+              sliceCreationOptions.fromImage.BackgroundIcon
+            }
+            onClick={openCreateSliceFromImageModal}
+            description={sliceCreationOptions.fromImage.description}
+          >
+            {sliceCreationOptions.fromImage.title}
+          </ActionListItem>
           <ActionListItem
             renderStartIcon={() =>
               sliceCreationOptions.fromScratch.BackgroundIcon

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

@@ -1,15 +1,11 @@
 import { BackgroundIcon } from "@prismicio/editor-ui";
 
-import { UseSectionsNamingExperimentReturnType } from "@/features/builder/useSectionsNamingExperiment";
-import { pluralize } from "@/utils/textConversion";
-
 type SliceCreationOptionArgs = {
   menuType: "ActionList" | "Dropdown";
-  sectionsNamingExperiment: UseSectionsNamingExperimentReturnType;
 };
 
 export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
-  const { menuType, sectionsNamingExperiment } = args;
+  const { menuType } = args;
 
   return {
     fromImage: {
@@ -24,7 +20,7 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
         />
       ),
       title: "Generate from image",
-      description: `Build a ${sectionsNamingExperiment.value} based on your design image.`,
+      description: "Build a slice based on your design image.",
     },
     fromScratch: {
       BackgroundIcon: (
@@ -38,7 +34,7 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
         />
       ),
       title: "Start from scratch",
-      description: `Build a custom ${sectionsNamingExperiment.value} your way.`,
+      description: "Build a custom slice your way.",
     },
     fromTemplate: {
       BackgroundIcon: (
@@ -65,10 +61,8 @@ export const getSliceCreationOptions = (args: SliceCreationOptionArgs) => {
           radius={6}
         />
       ),
-      title: `Reuse an existing ${sectionsNamingExperiment.value}`,
-      description: `Select from your created ${pluralize(
-        sectionsNamingExperiment.value,
-      )}`,
+      title: "Reuse an existing slice",
+      description: "Select from your created slices.",
     },
   };
 };

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

@@ -15,18 +15,27 @@ type GetActiveEnvironmentReturnType =
       error: unknown;
     };
 
-export async function getActiveEnvironment(): Promise<GetActiveEnvironmentReturnType> {
+export async function getActiveEnvironment(
+  retried = false,
+): Promise<GetActiveEnvironmentReturnType> {
   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(true);
     }
 
     return { error };

package/src/features/environments/useActiveEnvironment.ts

@@ -1,7 +1,14 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getActiveEnvironment } from "./actions/getActiveEnvironment";
 
+export function invalidateActiveEnvironmentData() {
+  invalidateFetcherData(getActiveEnvironment);
+}
+
 export function useActiveEnvironment() {
   return useRequest(getActiveEnvironment, []);
 }

package/src/features/environments/useEnvironments.ts

@@ -1,7 +1,14 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getEnvironments } from "./actions/getEnvironments";
 
+export function invalidateEnvironmentsData() {
+  invalidateFetcherData(getEnvironments);
+}
+
 export function useEnvironments() {
   return useRequest(getEnvironments, []);
 }

package/src/features/navigation/Navigation.tsx

@@ -8,18 +8,14 @@ import { CUSTOM_TYPES_CONFIG } from "@/features/customTypes/customTypesConfig";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
-import { useGitIntegrationExperiment } from "@/features/settings/git/useGitIntegrationExperiment";
 import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
 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";
@@ -27,9 +23,7 @@ import { UpdateInfo } from "./UpdateInfo";
 export function Navigation() {
   const router = useRouter();
 
-  const gitIntegrationExperiment = useGitIntegrationExperiment();
   const { documentationLink } = useMarketingContent();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const adapter = useAdapterName();
 
   interface CustomTypeNavigationItemProps {
@@ -60,11 +54,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 +72,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 +93,6 @@ export function Navigation() {
               <OnboardingGuide />
             </Suspense>
           </ErrorBoundary>
-
           <NavigationItem
             title="Documentation"
             href={documentationLink}
@@ -117,15 +106,6 @@ export function Navigation() {
             }}
           />
 
-          {gitIntegrationExperiment.eligible && (
-            <NavigationItem
-              title="Settings"
-              href="/settings"
-              Icon={SettingsIcon}
-              active={router.asPath.startsWith("/settings")}
-            />
-          )}
-
           <NavigationItem
             title="Changelog"
             href="/changelog"

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>