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

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/ListItem/Header.tsx

@@ -1,3 +1,4 @@
+import { Box, Tooltip } from "@prismicio/editor-ui";
 import * as CSS from "csstype";
 import { IconType } from "react-icons";
 import { Flex, Text, Theme } from "theme-ui";
@@ -9,6 +10,7 @@ interface ItemHeaderProps {
   sliceFieldName: string | undefined;
   theme: Theme;
   WidgetIcon: IconType;
+  widgetIconTooltip: string;
 }
 
 const ItemHeader: React.FC<ItemHeaderProps> = ({
@@ -16,20 +18,24 @@ const ItemHeader: React.FC<ItemHeaderProps> = ({
   sliceFieldName,
   theme,
   WidgetIcon,
+  widgetIconTooltip,
 }) => (
   <Flex sx={{ alignItems: "center", position: "relative" }}>
-    <WidgetIcon
-      size={28}
-      style={{
-        color: theme.colors?.primary as CSS.Property.Color,
-        marginRight: "8px",
-        borderRadius: "4px",
-        padding: "4px",
-        border: "2px solid",
-        borderColor: theme.colors?.primary as CSS.Property.Color,
-        flexShrink: 0,
-      }}
-    />
+    <Tooltip content={widgetIconTooltip} sideOffset={2} disableHoverableContent>
+      <Box margin={{ right: 8 }}>
+        <WidgetIcon
+          size={28}
+          style={{
+            color: theme.colors?.primary as CSS.Property.Color,
+            borderRadius: "4px",
+            padding: "4px",
+            border: "2px solid",
+            borderColor: theme.colors?.primary as CSS.Property.Color,
+            flexShrink: 0,
+          }}
+        />
+      </Box>
+    </Tooltip>
     <TextWithTooltip
       text={text}
       as="p"

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

@@ -114,6 +114,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                         renderFieldAccessor && renderFieldAccessor(key)
                       }
                       WidgetIcon={widget.Meta.icon}
+                      widgetIconTooltip={widget.label}
                     />
                     <Flex sx={{ flex: "0 0 auto" }}>
                       {shouldDisplayRepeatableBadge && (

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

@@ -13,8 +13,10 @@ import {
   Text,
 } from "theme-ui";
 
-import { checkAuthStatus, getState, startAuth } from "@/apiClient";
+import { checkAuthStatus, clearAuth, getState } from "@/apiClient";
 import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
@@ -50,7 +52,7 @@ const LoginModal: React.FunctionComponent = () => {
     }),
   );
   const { syncChanges } = useAutoSync();
-  const { closeModals, startLoadingLogin, stopLoadingLogin } =
+  const { closeModals, startLoadingLogin, stopLoadingLogin, refreshState } =
     useSliceMachineActions();
 
   const prismicBase = preferWroomBase(env.manifest.apiEndpoint);
@@ -64,7 +66,7 @@ const LoginModal: React.FunctionComponent = () => {
 
     try {
       startLoadingLogin();
-      await startAuth();
+      await clearAuth();
       window.open(loginRedirectUrl, "_blank");
       await startPolling<CheckAuthStatusResponse, ValidAuthStatus>(
         checkAuthStatus,
@@ -76,11 +78,17 @@ const LoginModal: React.FunctionComponent = () => {
         60,
       );
 
+      // refresh queries to update the UI
+      invalidateEnvironmentsData();
+      invalidateActiveEnvironmentData();
+
       toast.success("Logged in");
       stopLoadingLogin();
       closeModals();
 
       const serverState = await getState();
+      refreshState(serverState);
+
       const slices = normalizeFrontendSlices(
         serverState.libraries,
         serverState.remoteSlices,

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/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -18,6 +18,7 @@ import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
 
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -138,6 +139,8 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
                 }
               />
             ) : undefined}
+
+            {variant === "default" && <LogoutButton />}
           </Box>
         </>
       )}

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

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/SlicesTemplatesModal.tsx

@@ -3,7 +3,6 @@ import { FC } from "react";
 import { Text } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { createSlicesTemplates } from "@/features/slicesTemplates/actions/createSlicesTemplates";
 import { SliceTemplate } from "@/features/slicesTemplates/useSlicesTemplates";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
@@ -12,9 +11,7 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { Slices } from "@/legacy/lib/models/common/Slice";
 import { managerClient } from "@/managerClient";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
-import { pluralize } from "@/utils/textConversion";
 
-import { sliceTemplatesComingSoon } from "./sliceTemplatesComingSoon";
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
 interface UpdateSliceModalProps {
@@ -39,7 +36,6 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
   location,
 }) => {
   const { createSliceSuccess } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   return (
     <ModalFormCard
@@ -83,7 +79,7 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
         sliceKeys: [],
       }}
       content={{
-        title: `Use template ${pluralize(sectionsNamingExperiment.value)}`,
+        title: "Use template slices",
       }}
       validate={(values) => {
         if (values.sliceKeys.length === 0) {
@@ -101,29 +97,25 @@ export const SlicesTemplatesModal: FC<UpdateSliceModalProps> = ({
       {({ values }) => (
         <UpdateSliceZoneModalList
           values={values}
-          placeholderSlices={sliceTemplatesComingSoon}
-          availableSlices={[
-            ...availableSlicesTemplates.map(
-              (slice): ComponentUI => ({
-                extension: "",
-                fileName: "",
-                from: "",
-                href: "",
-                pathToSlice: "",
-                model: Slices.toSM(slice.model),
-                screenshots: Object.entries(slice.screenshots).reduce(
-                  (acc, curr) => ({
-                    ...acc,
-                    [curr[0]]: {
-                      url: curr[1],
-                    },
-                  }),
-                  {},
-                ),
-              }),
-            ),
-            ...sliceTemplatesComingSoon,
-          ]}
+          availableSlices={availableSlicesTemplates.map(
+            (slice): ComponentUI => ({
+              extension: "",
+              fileName: "",
+              from: "",
+              href: "",
+              pathToSlice: "",
+              model: Slices.toSM(slice.model),
+              screenshots: Object.entries(slice.screenshots).reduce(
+                (acc, curr) => ({
+                  ...acc,
+                  [curr[0]]: {
+                    url: curr[1],
+                  },
+                }),
+                {},
+              ),
+            }),
+          )}
         />
       )}
     </ModalFormCard>

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModal.tsx

@@ -1,10 +1,8 @@
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 import { Text } from "theme-ui";
 
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import ModalFormCard from "@/legacy/components/ModalFormCard";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
-import { pluralize } from "@/utils/textConversion";
 
 import UpdateSliceZoneModalList from "./UpdateSliceZoneModalList";
 
@@ -25,8 +23,6 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
   onSubmit,
   availableSlices,
 }) => {
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
-
   return (
     <ModalFormCard
       isOpen
@@ -47,7 +43,7 @@ const UpdateSliceZoneModal: React.FC<UpdateSliceModalProps> = ({
         sliceKeys: [],
       }}
       content={{
-        title: `Select existing ${pluralize(sectionsNamingExperiment.value)}`,
+        title: "Select existing slices",
       }}
       testId="update-slices-modal"
       validate={(values) => {

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

@@ -9,8 +9,7 @@ import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
   values: SliceZoneFormValues;
-  placeholderSlices?: ReadonlyArray<ComponentUI>;
-}> = ({ availableSlices, values, placeholderSlices }) => (
+}> = ({ availableSlices, values }) => (
   <FieldArray
     name="sliceKeys"
     render={(arrayHelpers) => (
@@ -19,14 +18,10 @@ const UpdateSliceZoneModalList: React.FC<{
         elems={availableSlices}
         defineElementKey={(slice) => `${slice.from}-${slice.model.name}`}
         renderElem={(slice) => {
-          const isComingSoon =
-            placeholderSlices?.some((s) => s.model.id === slice.model.id) ??
-            false;
           const isInSliceZone = values.sliceKeys.includes(slice.model.id);
           return (
             <SharedSliceCard
               action={{ type: "checkbox" }}
-              isComingSoon={isComingSoon}
               mode="selection"
               onSelectedChange={(selected) => {
                 if (selected) {

package/src/legacy/lib/builders/CustomTypeBuilder/SliceZone/index.tsx

@@ -15,8 +15,6 @@ import { BaseStyles } from "theme-ui";
 
 import { telemetry } from "@/apiClient";
 import { ListHeader } from "@/components/List";
-import { useAiSliceGenerationExperiment } from "@/features/builder/useAiSliceGenerationExperiment";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { CreateSliceFromImageModal } from "@/features/customTypes/customTypesBuilder/CreateSliceFromImageModal";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
 import { getSliceCreationOptions } from "@/features/customTypes/customTypesBuilder/sliceCreationOptions";
@@ -42,7 +40,6 @@ import {
 } from "@/modules/slices";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 import type { SliceMachineStoreType } from "@/redux/type";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import { DeleteSliceZoneModal } from "./DeleteSliceZoneModal";
 import { SlicesList } from "./List";
@@ -116,7 +113,6 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   sliceZone,
   tabId,
 }) => {
-  const aiSliceGenerationExperiment = useAiSliceGenerationExperiment();
   const availableSlicesTemplates = useSlicesTemplates();
   const [isSlicesTemplatesModalOpen, setIsSlicesTemplatesModalOpen] =
     useState(false);
@@ -135,10 +131,8 @@ const SliceZone: React.FC<SliceZoneProps> = ({
   const { setCustomType } = useCustomTypeState();
   const { completeStep } = useOnboarding();
   const { openLoginModal } = useSliceMachineActions();
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
   const sliceCreationOptions = getSliceCreationOptions({
     menuType: "Dropdown",
-    sectionsNamingExperiment,
   });
 
   const localLibraries: readonly LibraryUI[] = libraries.filter(
@@ -236,17 +230,15 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               </DropdownMenuTrigger>
 
               <DropdownMenuContent align="end">
-                {aiSliceGenerationExperiment.eligible && (
-                  <DropdownMenuItem
-                    renderStartIcon={() =>
-                      sliceCreationOptions.fromImage.BackgroundIcon
-                    }
-                    onSelect={() => void openCreateSliceFromImageModal()}
-                    description={sliceCreationOptions.fromImage.description}
-                  >
-                    {sliceCreationOptions.fromImage.title}
-                  </DropdownMenuItem>
-                )}
+                <DropdownMenuItem
+                  renderStartIcon={() =>
+                    sliceCreationOptions.fromImage.BackgroundIcon
+                  }
+                  onSelect={() => void openCreateSliceFromImageModal()}
+                  description={sliceCreationOptions.fromImage.description}
+                >
+                  {sliceCreationOptions.fromImage.title}
+                </DropdownMenuItem>
                 <DropdownMenuItem
                   renderStartIcon={() =>
                     sliceCreationOptions.fromScratch.BackgroundIcon
@@ -301,7 +293,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
           ) : undefined
         }
       >
-        {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
+        Slices
       </ListHeader>
 
       {sliceZone ? (
@@ -378,11 +370,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               onSaveCallback: () => {
                 toast.success(
                   <ToastMessageWithPath
-                    message={`${capitalizeFirstLetter(
-                      sectionsNamingExperiment.value,
-                    )} template(s) added to ${
-                      sectionsNamingExperiment.value
-                    } zone and created at: `}
+                    message="Slice template(s) added to slice zone and created at: "
                     path={`${localLibraries[0].name}/`}
                   />,
                 );
@@ -418,7 +406,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
               onSaveCallback: () => {
                 toast.success(
                   <ToastMessageWithPath
-                    message={`New ${sectionsNamingExperiment.value} added to ${sectionsNamingExperiment.value} zone and created at: `}
+                    message="New slice added to slice zone and created at: "
                     path={`${localLibraries[0].name}/`}
                   />,
                 );
@@ -446,11 +434,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
             onSaveCallback: () => {
               toast.success(
                 <ToastMessageWithPath
-                  message={`${capitalizeFirstLetter(
-                    sectionsNamingExperiment.value,
-                  )}(s) added to ${
-                    sectionsNamingExperiment.value
-                  } zone and created at: `}
+                  message="Slice(s) added to slice zone and created at: "
                   path={library}
                 />,
               );

package/src/legacy/lib/builders/SliceBuilder/index.tsx

@@ -3,7 +3,6 @@ import { type FC } from "react";
 
 import { BreadcrumbItem } from "@/components/Breadcrumb";
 import { AutoSaveStatusIndicator } from "@/features/autoSave/AutoSaveStatusIndicator";
-import { useSectionsNamingExperiment } from "@/features/builder/useSectionsNamingExperiment";
 import { FloatingBackButton } from "@/features/slices/sliceBuilder/FloatingBackButton";
 import { useSliceState } from "@/features/slices/sliceBuilder/SliceBuilderProvider";
 import {
@@ -15,7 +14,6 @@ import {
   AppLayoutHeader,
 } from "@/legacy/components/AppLayout";
 import SimulatorButton from "@/legacy/lib/builders/SliceBuilder/SimulatorButton";
-import { capitalizeFirstLetter, pluralize } from "@/utils/textConversion";
 
 import FieldZones from "./FieldZones";
 import { VariationsList } from "./VariationsList";
@@ -23,7 +21,6 @@ import { VariationsList } from "./VariationsList";
 export const SliceBuilder: FC = () => {
   const { slice, actionQueueStatus } = useSliceState();
   const horizontalScroll = useMediaQuery({ max: "large" });
-  const sectionsNamingExperiment = useSectionsNamingExperiment();
 
   const contentDisplayProps = horizontalScroll
     ? { gridTemplateRows: "304px 1fr" }
@@ -34,9 +31,7 @@ export const SliceBuilder: FC = () => {
       <AppLayoutHeader>
         <AppLayoutBackButton url="/slices" />
         <AppLayoutBreadcrumb>
-          <BreadcrumbItem>
-            {pluralize(capitalizeFirstLetter(sectionsNamingExperiment.value))}
-          </BreadcrumbItem>
+          <BreadcrumbItem>Slices</BreadcrumbItem>
           <BreadcrumbItem active>{slice.model.name}</BreadcrumbItem>
         </AppLayoutBreadcrumb>
         <AppLayoutActions>

package/src/legacy/lib/builders/common/EditModal/index.jsx

@@ -60,6 +60,7 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
     FormFields,
     Form: CustomForm,
     schema: widgetSchema,
+    label: widgetLabel,
   } = maybeWidget;
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -163,15 +164,7 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
       >
         {(props) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment
-          const {
-            values: {
-              id,
-              config: { label },
-            },
-            isValid,
-            isSubmitting,
-            initialValues,
-          } = props;
+          const { isValid, isSubmitting, initialValues } = props;
 
           // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
           const fieldModelTabContent = CustomForm ? (
@@ -226,7 +219,7 @@ const EditModal = ({ close, data, fields, onSave, zoneType }) => {
                   <ItemHeader
                     theme={theme}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/strict-boolean-expressions
-                    text={label || id}
+                    text={widgetLabel}
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     WidgetIcon={WidgetIcon}
                   />