slice-machine-ui 1.23.2-alpha.xru-auto-sync-provider.3 → 1.23.2-beta.2

package/components/ChangesItems/ChangesItems.tsx

@@ -6,23 +6,19 @@ import { ChangesSectionHeader } from "@components/ChangesSectionHeader";
 import { CustomTypeTable } from "@components/CustomTypeTable/changesPage";
 import Grid from "@components/Grid";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ModelStatusInformation } from "@src/hooks/useModelStatus";
 import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
 import { countMissingScreenshots } from "@src/domain/slice";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
 import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
 
 import { DevCollaborationExperiment } from "./DevCollaborationExperiment";
 
-interface ChangesItemsProps {
+interface ChangesItemsProps extends ModelStatusInformation {
   unSyncedCustomTypes: LocalOrRemoteCustomType[];
   unSyncedSlices: ComponentUI[];
-  modelsStatuses: ModelsStatuses;
-  authStatus: AuthStatus;
-  isOnline: boolean;
 }
 
 export const ChangesItems: React.FC<ChangesItemsProps> = ({

package/components/CustomTypeTable/changesPage.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import { Box, Text } from "theme-ui";
+import { ModelStatusInformation } from "@src/hooks/useModelStatus";
 import { CustomTypeSM } from "@lib/models/common/CustomType";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import {
@@ -9,26 +10,18 @@ import {
 } from "@lib/models/common/ModelData";
 import { StatusBadge } from "@src/features/changes/StatusBadge";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { ModelsStatuses } from "@src/features/sync/getUnSyncChanges";
 
-interface CustomTypeTableProps {
+interface CustomTypeTableProps extends ModelStatusInformation {
   customTypes: LocalOrRemoteCustomType[];
-  modelsStatuses: ModelsStatuses;
-  authStatus: AuthStatus;
-  isOnline: boolean;
 }
 
 const firstColumnWidth = "40%";
 const secondColumnWidth = "40%";
 const thirdColumnWidth = "20%";
 
-const CustomTypeChangeRow: React.FC<{
-  ct: CustomTypeSM;
-  status: ModelStatus;
-  authStatus: AuthStatus;
-  isOnline: boolean;
-}> = ({ ct, status, authStatus, isOnline }) => {
+const CustomTypeChangeRow: React.FC<
+  { ct: CustomTypeSM; status: ModelStatus } & ModelStatusInformation
+> = ({ ct, status, authStatus, isOnline }) => {
   return (
     <>
       <Box as={"td"} style={{ width: firstColumnWidth }}>
@@ -87,6 +80,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
                   status={modelsStatuses.customTypes[customType.local.id]}
                   authStatus={authStatus}
                   isOnline={isOnline}
+                  modelsStatuses={modelsStatuses}
                   key={customType.local.id}
                 />
               </tr>
@@ -103,6 +97,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
                 status={modelsStatuses.customTypes[customType.remote.id]}
                 authStatus={authStatus}
                 isOnline={isOnline}
+                modelsStatuses={modelsStatuses}
                 key={customType.remote.id}
               />
             </tr>

package/components/DeleteSliceModal/index.tsx

@@ -1,57 +1,46 @@
-import { useState } from "react";
-import { MdOutlineDelete } from "react-icons/md";
-import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
-
 import SliceMachineModal from "@components/SliceMachineModal";
+import { useSelector } from "react-redux";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { isModalOpen } from "@src/modules/modal";
+import { ModalKeysEnum } from "@src/modules/modal/types";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
 import Card from "@components/Card";
+import { MdOutlineDelete } from "react-icons/md";
 import { Button } from "@components/Button";
-import { deleteSlice } from "@src/features/slices/actions/deleteSlice";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { isLoading } from "@src/modules/loading";
 
 type DeleteSliceModalProps = {
-  isOpen: boolean;
-  libName: string;
   sliceId: string;
   sliceName: string;
-  onClose: () => void;
+  libName: string;
 };
 
 export const DeleteSliceModal: React.FunctionComponent<
   DeleteSliceModalProps
-> = ({ sliceId, sliceName, libName, isOpen, onClose }) => {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const { deleteSliceSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
-  const { theme } = useThemeUI();
-
-  const onDelete = async () => {
-    setIsDeleting(true);
+> = ({ sliceId, sliceName, libName }) => {
+  const { isSliceModalOpen, isDeletingSlice } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      isSliceModalOpen: isModalOpen(store, ModalKeysEnum.DELETE_SLICE),
+      isDeletingSlice: isLoading(store, LoadingKeysEnum.DELETE_SLICE),
+    }),
+  );
 
-    await deleteSlice({
-      sliceID: sliceId,
-      sliceName,
-      libraryID: libName,
-      onSuccess: () => {
-        deleteSliceSuccess(sliceId, libName);
-        syncChanges();
-      },
-    });
+  const { closeModals, deleteSlice } = useSliceMachineActions();
 
-    onClose();
-    setIsDeleting(false);
-  };
+  const { theme } = useThemeUI();
 
   return (
     <SliceMachineModal
-      isOpen={isOpen}
+      isOpen={isSliceModalOpen}
       shouldCloseOnOverlayClick={true}
       style={{
         content: {
           maxWidth: 612,
         },
       }}
-      onRequestClose={onClose}
+      onRequestClose={closeModals}
     >
       <Card
         bodySx={{
@@ -90,7 +79,7 @@ export const DeleteSliceModal: React.FunctionComponent<
                 Delete Slice
               </Heading>
             </Flex>
-            <Close type="button" onClick={onClose} />
+            <Close type="button" onClick={closeModals} />
           </Flex>
         )}
         Footer={() => (
@@ -107,7 +96,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Cancel"
               variant="secondary"
-              onClick={onClose}
+              onClick={() => closeModals()}
               sx={{
                 mr: "10px",
                 fontWeight: "bold",
@@ -118,11 +107,9 @@ export const DeleteSliceModal: React.FunctionComponent<
             <Button
               label="Delete"
               variant="danger"
-              isLoading={isDeleting}
+              isLoading={isDeletingSlice}
               sx={{ minHeight: 39, minWidth: 78 }}
-              onClick={() => {
-                void onDelete();
-              }}
+              onClick={() => deleteSlice(sliceId, sliceName, libName)}
             />
           </Flex>
         )}

package/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx

@@ -2,29 +2,25 @@ import { SetStateAction, useState } from "react";
 import { Box } from "theme-ui";
 import { FormikErrors } from "formik";
 import { useSelector } from "react-redux";
-import { useRouter } from "next/router";
 
 import ModalFormCard from "@components/ModalFormCard";
+import { InputBox } from "../components/InputBox";
+import { SelectRepeatable } from "../components/SelectRepeatable";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { SliceMachineStoreType } from "@src/redux/type";
 import {
   selectAllCustomTypeIds,
   selectAllCustomTypeLabels,
 } from "@src/modules/availableCustomTypes";
+import { isModalOpen } from "@src/modules/modal";
+import { ModalKeysEnum } from "@src/modules/modal/types";
+import { isLoading } from "@src/modules/loading";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { telemetry } from "@src/apiClient";
 import { slugify } from "@lib/utils/str";
 import { API_ID_REGEX } from "@lib/consts";
 import type { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import {
-  CustomTypeOrigin,
-  createCustomType,
-} from "@src/features/customTypes/actions/createCustomType";
-import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { getFormat } from "@src/domain/customType";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-
-import { InputBox } from "../components/InputBox";
-import { SelectRepeatable } from "../components/SelectRepeatable";
 
 interface FormValues {
   id: string;
@@ -34,67 +30,46 @@ interface FormValues {
 
 type CreateCustomTypeModalProps = {
   format: CustomTypeFormat;
-  isCreating: boolean;
-  isOpen: boolean;
-  origin?: CustomTypeOrigin;
-  onCreateChange: (isCreating: boolean) => void;
-  onOpenChange: (isOpen: boolean) => void;
+  origin?: "onboarding" | "table";
 };
 
 export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   format,
-  isCreating,
-  isOpen,
   origin = "table",
-  onCreateChange,
-  onOpenChange,
 }) => {
-  const { createCustomTypeSuccess } = useSliceMachineActions();
-
-  const { customTypeIds, customTypeLabels } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      customTypeIds: selectAllCustomTypeIds(store),
-      customTypeLabels: selectAllCustomTypeLabels(store),
-    }),
-  );
+  const { createCustomType, closeModals } = useSliceMachineActions();
+
+  const {
+    customTypeIds,
+    isCreateCustomTypeModalOpen,
+    isCreatingCustomType,
+    customTypeLabels,
+  } = useSelector((store: SliceMachineStoreType) => ({
+    customTypeIds: selectAllCustomTypeIds(store),
+    customTypeLabels: selectAllCustomTypeLabels(store),
+    isCreateCustomTypeModalOpen: isModalOpen(
+      store,
+      ModalKeysEnum.CREATE_CUSTOM_TYPE,
+    ),
+    isCreatingCustomType: isLoading(store, LoadingKeysEnum.CREATE_CUSTOM_TYPE),
+  }));
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
   const [isIdFieldPristine, setIsIdFieldPristine] = useState(true);
-  const { syncChanges } = useAutoSync();
-  const router = useRouter();
 
-  const onSubmit = async ({ id, label, repeatable }: FormValues) => {
-    onCreateChange(true);
+  const createCustomTypeAndTrack = ({ id, label, repeatable }: FormValues) => {
+    const name = label || id;
 
-    await createCustomType({
-      format,
+    void telemetry.track({
+      event: "custom-type:created",
       id,
-      label,
+      name,
+      format,
+      type: repeatable ? "repeatable" : "single",
       origin,
-      repeatable,
-      onSuccess: async (newCustomType) => {
-        createCustomTypeSuccess(newCustomType);
-
-        const format = getFormat(newCustomType);
-        const customTypesConfig = CUSTOM_TYPES_CONFIG[format];
-
-        setIsIdFieldPristine(true);
-
-        await router.push({
-          pathname: customTypesConfig.getBuilderPagePathname(id),
-          query:
-            newCustomType.format === "page"
-              ? {
-                  newPageType: true,
-                }
-              : undefined,
-        });
-
-        syncChanges();
-      },
     });
-
-    onCreateChange(false);
-    onOpenChange(false);
+    createCustomType(id, name, repeatable, format);
+    closeModals();
+    setIsIdFieldPristine(true);
   };
 
   const handleLabelChange = (
@@ -131,18 +106,16 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
   return (
     <ModalFormCard
       dataCy="create-ct-modal"
-      isOpen={isOpen}
+      isOpen={isCreateCustomTypeModalOpen}
       widthInPx="530px"
       formId="create-custom-type"
       buttonLabel={"Create"}
       close={() => {
-        onOpenChange(false);
+        closeModals();
         setIsIdFieldPristine(true);
       }}
-      onSubmit={(values) => {
-        void onSubmit(values);
-      }}
-      isLoading={isCreating}
+      onSubmit={createCustomTypeAndTrack}
+      isLoading={isCreatingCustomType}
       initialValues={{
         repeatable: true,
         id: "",

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -9,7 +9,6 @@ import ModalFormCard from "@components/ModalFormCard";
 import { createSlice } from "@src/features/slices/actions/createSlice";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getState } from "@src/apiClient";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 import { validateSliceModalValues } from "../formsValidator";
 import { InputBox } from "../components/InputBox";
@@ -31,7 +30,6 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
 }) => {
   const { createSliceSuccess } = useSliceMachineActions();
   const [isCreatingSlice, setIsCreatingSlice] = useState(false);
-  const { syncChanges } = useAutoSync();
 
   const onSubmit = async (values: FormValues) => {
     const sliceName = values.sliceName;
@@ -47,8 +45,8 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         const serverState = await getState();
         // Update Redux store
         createSliceSuccess(serverState.libraries);
+
         onSuccess(newSlice, libraryName);
-        syncChanges();
       },
     });
   };

package/components/Forms/RenameCustomTypeModal/RenameCustomTypeModal.tsx

@@ -13,7 +13,6 @@ import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 
 import { renameCustomType } from "@src/features/customTypes/actions/renameCustomType";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 
 interface RenameCustomTypeModalProps {
   isChangesLocal: boolean;
@@ -32,8 +31,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
 }) => {
   const customTypeName = customType?.label ?? "";
   const customTypeId = customType?.id ?? "";
-  const { renameCustomTypeSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
+  const { renameAvailableCustomTypeSuccess } = useSliceMachineActions();
 
   const [isRenaming, setIsRenaming] = useState(false);
 
@@ -48,10 +46,7 @@ export const RenameCustomTypeModal: React.FC<RenameCustomTypeModalProps> = ({
       await renameCustomType({
         model: customType,
         newLabel: values.customTypeName,
-        onSuccess: (renamedCustomType) => {
-          renameCustomTypeSuccess(renamedCustomType);
-          syncChanges();
-        },
+        onSuccess: renameAvailableCustomTypeSuccess,
       });
     }
     setIsRenaming(false);

package/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -1,65 +1,50 @@
 import { Box } from "theme-ui";
-import { useSelector } from "react-redux";
-
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import ModalFormCard from "../../ModalFormCard";
+import { InputBox } from "../components/InputBox";
+import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
+import { isModalOpen } from "@src/modules/modal";
+import { ModalKeysEnum } from "@src/modules/modal/types";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { renameSlice } from "@src/features/slices/actions/renameSlice";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-
-import { InputBox } from "../components/InputBox";
-import ModalFormCard from "../../ModalFormCard";
 import { SliceModalValues } from "../formsTypes";
 import { validateSliceModalValues } from "../formsValidator";
 
 interface RenameSliceModalProps {
-  isOpen: boolean;
-  slice?: ComponentUI;
-  onClose: () => void;
+  sliceName: string;
+  sliceId: string;
+  libName: string;
 }
 
 export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
-  slice,
-  isOpen,
-  onClose,
+  sliceName,
+  sliceId,
+  libName,
 }) => {
-  const { renameSliceSuccess } = useSliceMachineActions();
-  const { syncChanges } = useAutoSync();
-  const { localLibs, remoteLibs } = useSelector(
+  const { renameSlice, closeModals } = useSliceMachineActions();
+  const { isRenameSliceModalOpen, localLibs, remoteLibs } = useSelector(
     (store: SliceMachineStoreType) => ({
+      isRenameSliceModalOpen: isModalOpen(store, ModalKeysEnum.RENAME_SLICE),
       localLibs: getLibraries(store),
       remoteLibs: getRemoteSlices(store),
     }),
   );
-  const initialSliceName = slice?.model.name ?? "";
-
-  const handleOnSubmit = async (values: SliceModalValues) => {
-    if (slice) {
-      await renameSlice({
-        slice,
-        newSliceName: values.sliceName,
-        onSuccess: (renamedSlice) => {
-          renameSliceSuccess(renamedSlice.from, renamedSlice.model);
-          syncChanges();
-        },
-      });
 
-      onClose();
-    }
+  const handleOnSubmit = (values: SliceModalValues) => {
+    renameSlice(libName, sliceId, values.sliceName);
   };
 
   return (
     <ModalFormCard<SliceModalValues>
       dataCy="rename-slice-modal"
-      isOpen={isOpen}
+      isOpen={isRenameSliceModalOpen}
       widthInPx="530px"
-      formId={`rename-slice-modal-${slice?.model.id ?? ""}`}
-      close={onClose}
+      formId={`rename-slice-modal-${sliceId}`}
+      close={closeModals}
       buttonLabel="Rename"
-      onSubmit={(values) => void handleOnSubmit(values)}
+      onSubmit={handleOnSubmit}
       initialValues={{
-        sliceName: initialSliceName,
+        sliceName: sliceName,
       }}
       content={{
         title: "Rename a slice",

package/components/LoginModal/index.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from "theme-ui";
 import SliceMachineModal from "@components/SliceMachineModal";
-import { checkAuthStatus, getState, startAuth } from "@src/apiClient";
+import { checkAuthStatus, startAuth } from "@src/apiClient";
 import { buildEndpoints } from "@lib/prismic/endpoints";
 import { startPolling } from "@lib/utils/poll";
 import { CheckAuthStatusResponse } from "@models/common/Auth";
@@ -25,12 +25,6 @@ import { getEnvironment } from "@src/modules/environment";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import preferWroomBase from "@lib/utils/preferWroomBase";
 import { ToasterType } from "@src/modules/toaster";
-import { getUnSyncedChanges } from "@src/features/sync/getUnSyncChanges";
-import { normalizeFrontendCustomTypes } from "@lib/models/common/normalizers/customType";
-import { normalizeFrontendSlices } from "@lib/models/common/normalizers/slices";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
-import { getActiveEnvironment } from "@src/features/environments/actions/getActiveEnvironment";
 
 interface ValidAuthStatus extends CheckAuthStatusResponse {
   status: "ok";
@@ -48,7 +42,7 @@ const LoginModal: React.FunctionComponent = () => {
       env: getEnvironment(store),
     }),
   );
-  const { syncChanges } = useAutoSync();
+
   const { closeModals, startLoadingLogin, stopLoadingLogin, openToaster } =
     useSliceMachineActions();
 
@@ -78,38 +72,6 @@ const LoginModal: React.FunctionComponent = () => {
       openToaster("Logged in", ToasterType.SUCCESS);
       stopLoadingLogin();
       closeModals();
-
-      const serverState = await getState();
-      const slices = normalizeFrontendSlices(
-        serverState.libraries,
-        serverState.remoteSlices,
-      );
-      const customTypes = Object.values(
-        normalizeFrontendCustomTypes(
-          serverState.customTypes,
-          serverState.remoteCustomTypes,
-        ),
-      );
-      const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
-        authStatus: AuthStatus.AUTHORIZED,
-        customTypes,
-        isOnline: true,
-        libraries: serverState.libraries,
-        slices,
-      });
-      const { activeEnvironment } = await getActiveEnvironment();
-
-      if (
-        activeEnvironment?.kind === "dev" &&
-        (changedCustomTypes.length > 0 || changedSlices.length > 0)
-      ) {
-        syncChanges({
-          environment: activeEnvironment,
-          loggedIn: true,
-          changedCustomTypes,
-          changedSlices,
-        });
-      }
     } catch (e) {
       stopLoadingLogin();
       openToaster("Login failed", ToasterType.ERROR);

package/components/Navigation/ChangesListItem.tsx

@@ -0,0 +1,92 @@
+import { type FC, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { SliceMachineStoreType } from "@src/redux/type";
+import { useSelector } from "react-redux";
+
+import { SideNavLink, SideNavListItem } from "@src/components/SideNav";
+import { RadarIcon } from "@src/icons/RadarIcon";
+import { isLoading } from "@src/modules/loading";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import {
+  HoverCard,
+  HoverCardCloseButton,
+  HoverCardDescription,
+  HoverCardMedia,
+  HoverCardTitle,
+} from "@src/components/HoverCard";
+import {
+  userHasSeenChangesToolTip,
+  userHasSeenSimulatorToolTip,
+} from "@src/modules/userContext";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { ChangesRightElement } from "./ChangesRightElement";
+
+export const ChangesListItem: FC = () => {
+  const { setSeenChangesToolTip } = useSliceMachineActions();
+  const open = useOpenChangesHoverCard();
+  const router = useRouter();
+
+  const onClose = () => {
+    setSeenChangesToolTip();
+  };
+
+  return (
+    <HoverCard
+      open={open}
+      openDelay={3000}
+      onClose={onClose}
+      side="right"
+      sideOffset={24}
+      collisionPadding={280}
+      trigger={
+        <SideNavListItem>
+          <SideNavLink
+            title="Changes"
+            href="/changes"
+            active={router.asPath.startsWith("/changes")}
+            component={Link}
+            Icon={RadarIcon}
+            RightElement={<ChangesRightElement />}
+          />
+        </SideNavListItem>
+      }
+    >
+      <HoverCardTitle>Push your changes</HoverCardTitle>
+      <HoverCardMedia component="image" src="/push.png" />
+      <HoverCardDescription>
+        When you click Save, your changes are saved locally. Then, you can push
+        your models to Prismic from the Changes page.
+      </HoverCardDescription>
+      <HoverCardCloseButton>Got it</HoverCardCloseButton>
+    </HoverCard>
+  );
+};
+
+const useOpenChangesHoverCard = () => {
+  const {
+    hasSeenChangesToolTip,
+    hasSeenSimulatorToolTip,
+    isSavingCustomType,
+    isSavingSlice,
+  } = useSelector((store: SliceMachineStoreType) => ({
+    hasSeenChangesToolTip: userHasSeenChangesToolTip(store),
+    hasSeenSimulatorToolTip: userHasSeenSimulatorToolTip(store),
+    isSavingCustomType: isLoading(store, LoadingKeysEnum.SAVE_CUSTOM_TYPE),
+    isSavingSlice: isLoading(store, LoadingKeysEnum.SAVE_SLICE),
+  }));
+
+  const isSaving = isSavingCustomType || isSavingSlice;
+  const [prevIsSaving, setPrevIsSaving] = useState(isSaving);
+
+  if (!prevIsSaving && isSaving) {
+    setPrevIsSaving(isSaving);
+  }
+
+  return (
+    !hasSeenChangesToolTip &&
+    hasSeenSimulatorToolTip &&
+    !isSaving &&
+    prevIsSaving
+  );
+};