slice-machine-ui 1.23.2-beta.3 → 1.23.2-beta.5

package/src/features/customTypes/actions/convertCustomToPageType.ts

@@ -9,17 +9,20 @@ import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 export async function convertCustomToPageType(
   customType: CustomType,
-  saveCustomType: (customType: CustomType) => void,
+  onSuccess: (newCustomType: CustomType) => void,
 ) {
   const customTypesMessages =
     CUSTOM_TYPES_MESSAGES[customType.format as CustomTypeFormat];
 
   try {
     const newCustomType = convertToPageType(customType);
-    await updateCustomType(newCustomType);
+    const { errors } = await updateCustomType(newCustomType);
 
-    // Update the custom type in the redux store
-    saveCustomType(newCustomType);
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess(newCustomType);
 
     toast.success(
       `${customTypesMessages.name({
@@ -28,11 +31,12 @@ export async function convertCustomToPageType(
       })} converted to page type`,
     );
   } catch (e) {
-    toast.error(
-      `Internal Error: ${customTypesMessages.name({
-        start: true,
-        plural: false,
-      })} not converted to page type`,
-    );
+    const errorMessage = `Internal Error: ${customTypesMessages.name({
+      start: true,
+      plural: false,
+    })} not converted to page type`;
+
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
   }
 }

package/src/features/customTypes/actions/createCustomType.ts

@@ -0,0 +1,69 @@
+import { toast } from "react-toastify";
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
+import { ToastMessageWithPath } from "@components/ToasterContainer";
+import { CustomTypeFormat } from "@slicemachine/manager";
+import { telemetry, updateCustomType } from "@src/apiClient";
+import { create } from "@src/domain/customType";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
+
+type DeleteCustomTypeArgs = {
+  format: CustomTypeFormat;
+  id: string;
+  label: string;
+  origin: CustomTypeOrigin;
+  repeatable: boolean;
+  onSuccess: (newCustomType: CustomType) => Promise<void>;
+};
+
+export type CustomTypeOrigin = "onboarding" | "table";
+
+export async function createCustomType(args: DeleteCustomTypeArgs) {
+  const { id, label, repeatable, format, onSuccess } = args;
+  const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
+
+  const newCustomType: CustomType = create({
+    id,
+    label,
+    repeatable,
+    format,
+  });
+
+  try {
+    const { errors } = await updateCustomType(newCustomType);
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    void telemetry.track({
+      event: "custom-type:created",
+      id: newCustomType.id,
+      name: label,
+      format: format,
+      type: repeatable ? "repeatable" : "single",
+      origin: "table",
+    });
+
+    await onSuccess(newCustomType);
+
+    toast.success(
+      ToastMessageWithPath({
+        message: `${customTypesMessages.name({
+          start: true,
+          plural: false,
+        })} saved successfully at `,
+        path: `./customtypes/${newCustomType.id}/index.json`,
+      }),
+    );
+  } catch (e) {
+    const errorMessage = `Internal Error: ${customTypesMessages.name({
+      start: true,
+      plural: false,
+    })} not saved`;
+
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

package/src/features/customTypes/actions/deleteCustomType.ts

@@ -1,8 +1,10 @@
+import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { managerClient } from "@src/managerClient";
+import { CustomTypeFormat } from "@slicemachine/manager";
+
 import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
-import { CustomTypeFormat } from "@slicemachine/manager/*";
-import { toast } from "react-toastify";
 
 type DeleteCustomTypeArgs = {
   customType: CustomType;
@@ -17,7 +19,13 @@ export async function deleteCustomType({
     CUSTOM_TYPES_MESSAGES[customType.format as CustomTypeFormat];
 
   try {
-    await managerClient.customTypes.deleteCustomType({ id: customType.id });
+    const { errors } = await managerClient.customTypes.deleteCustomType({
+      id: customType.id,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
 
     onSuccess();
 
@@ -32,6 +40,8 @@ export async function deleteCustomType({
       start: true,
       plural: false,
     })} could not be deleted`;
+
     console.error(errorMessage, e);
+    toast.error(errorMessage);
   }
 }

package/src/features/customTypes/actions/renameCustomType.ts

@@ -1,8 +1,10 @@
+import { toast } from "react-toastify";
 import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+
 import { managerClient } from "@src/managerClient";
-import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { CustomTypeFormat } from "@slicemachine/manager";
-import { toast } from "react-toastify";
+
+import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 
 type RenameCustomTypeArgs = {
   model: CustomType;
@@ -23,10 +25,14 @@ export async function renameCustomType({
       label: newLabel,
     };
 
-    await managerClient.customTypes.renameCustomType({
+    const { errors } = await managerClient.customTypes.renameCustomType({
       model: renamedCustomType,
     });
 
+    if (errors.length > 0) {
+      throw errors;
+    }
+
     onSuccess(renamedCustomType);
 
     toast.success(
@@ -40,8 +46,8 @@ export async function renameCustomType({
       start: true,
       plural: false,
     })} could not be renamed`;
-    console.error(errorMessage, e);
 
+    console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }

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

@@ -39,7 +39,9 @@ export const CustomTypesBuilderPage: FC = () => {
   );
 
   useEffect(() => {
-    // TODO(DT-1801): When creating a custom type, don't redirect to the builder page until the custom type is created
+    // This is a fallback in case the user try to directly access a custom type
+    // that don't exist
+    // TODO(DT-1801): Implement a 404 page
     if (!selectedCustomType || !hasLocal(selectedCustomType)) {
       void router.replace("/");
     }

package/src/features/customTypes/customTypesTable/CustomTypesTable.tsx

@@ -11,16 +11,9 @@ import {
 } from "@src/components/Table";
 import { ReusableIcon } from "@src/icons/ReusableIcon";
 import { UniqueIcon } from "@src/icons/UniqueIcon";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { type CustomType } from "@prismicio/types-internal/lib/customtypes";
 import { type CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
-import {
-  useCustomTypes,
-  useCustomTypesAutoRevalidation,
-} from "./useCustomTypes";
-
 import {
   BlankSlate,
   BlankSlateImage,
@@ -29,18 +22,25 @@ import {
   BlankSlateActions,
   BlankSlateContent,
 } from "@src/components/BlankSlate";
+
+import { CUSTOM_TYPES_CONFIG } from "../customTypesConfig";
 import { EditDropdown } from "../EditDropdown";
+import {
+  useCustomTypes,
+  useCustomTypesAutoRevalidation,
+} from "./useCustomTypes";
 
 type CustomTypesTableProps = {
   format: CustomTypeFormat;
   isCreatingCustomType: boolean;
+  openCreateCustomTypeModal: () => void;
 };
 
 export const CustomTypesTable: FC<CustomTypesTableProps> = ({
   format,
   isCreatingCustomType,
+  openCreateCustomTypeModal,
 }) => {
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
   const router = useRouter();
   const { customTypes, updateCustomTypes } = useCustomTypes(format);
   const sortedCustomTypes = customTypes.sort(

package/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx

@@ -1,4 +1,4 @@
-import { type FC, Suspense } from "react";
+import { type FC, Suspense, useState } from "react";
 import {
   Button,
   ErrorBoundary,
@@ -7,7 +7,6 @@ import {
   DefaultErrorMessage,
 } from "@prismicio/editor-ui";
 import Head from "next/head";
-import { useSelector } from "react-redux";
 
 import {
   AppLayout,
@@ -16,13 +15,10 @@ import {
   AppLayoutContent,
   AppLayoutHeader,
 } from "@components/AppLayout";
-import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { isLoading } from "@src/modules/loading";
-import { type SliceMachineStoreType } from "@src/redux/type";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
 import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import type { CustomTypeFormat } from "@slicemachine/manager";
+
 import { CustomTypesTable } from "./CustomTypesTable";
 
 type CustomTypesTablePageProps = {
@@ -33,15 +29,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
   format,
 }) => {
   const customTypesMessages = CUSTOM_TYPES_MESSAGES[format];
-  const { openCreateCustomTypeModal } = useSliceMachineActions();
-  const { isCreatingCustomType } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isCreatingCustomType: isLoading(
-        store,
-        LoadingKeysEnum.CREATE_CUSTOM_TYPE,
-      ),
-    }),
-  );
+  const [isCreatingCustomType, setIsCreatingCustomType] = useState(false);
+  const [isCreateCustomTypeModalOpen, setIsCreateCustomTypeModalOpen] =
+    useState(false);
 
   return (
     <>
@@ -101,7 +91,9 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <Button
                   data-cy="create-ct"
                   loading={isCreatingCustomType}
-                  onClick={openCreateCustomTypeModal}
+                  onClick={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
                   startIcon="add"
                 >
                   Create
@@ -113,8 +105,17 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
                 <CustomTypesTable
                   format={format}
                   isCreatingCustomType={isCreatingCustomType}
+                  openCreateCustomTypeModal={() => {
+                    setIsCreateCustomTypeModalOpen(true);
+                  }}
+                />
+                <CreateCustomTypeModal
+                  format={format}
+                  isCreating={isCreatingCustomType}
+                  isOpen={isCreateCustomTypeModalOpen}
+                  onCreateChange={setIsCreatingCustomType}
+                  onOpenChange={setIsCreateCustomTypeModalOpen}
                 />
-                <CreateCustomTypeModal format={format} />
               </Box>
             </AppLayoutContent>
           </AppLayout>

package/src/features/slices/actions/createSlice.ts

@@ -1,9 +1,10 @@
 import { toast } from "react-toastify";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
 
-import { pascalize, snakelize } from "@lib/utils/str";
+import { pascalize } from "@lib/utils/str";
 import { managerClient } from "@src/managerClient";
 import { telemetry } from "@src/apiClient";
+import { buildEmptySliceModel } from "@src/domain/slice";
 
 type CreateSliceArgs = {
   sliceName: string;
@@ -12,8 +13,9 @@ type CreateSliceArgs = {
 };
 
 export async function createSlice(args: CreateSliceArgs) {
+  const { sliceName, libraryName, onSuccess } = args;
+
   try {
-    const { sliceName, libraryName, onSuccess } = args;
     const newSlice = buildEmptySliceModel(sliceName);
     const { errors } = await managerClient.slices.createSlice({
       libraryID: libraryName,
@@ -33,34 +35,8 @@ export async function createSlice(args: CreateSliceArgs) {
 
     await onSuccess(newSlice);
   } catch (e) {
-    const errorMessage = "Internal Error: Slice not created";
+    const errorMessage = `An unexpected error happened while creating slice ${sliceName}.`;
     console.error(errorMessage, e);
     toast.error(errorMessage);
   }
 }
-
-const DEFAULT_VARIATION_ID = "default";
-
-function buildEmptySliceModel(sliceName: string): SharedSlice {
-  return {
-    id: snakelize(sliceName),
-    type: "SharedSlice",
-    name: sliceName,
-    description: sliceName,
-    variations: [
-      {
-        id: DEFAULT_VARIATION_ID,
-        name: pascalize(DEFAULT_VARIATION_ID),
-        // Property not used yet. Fallback to "...".
-        docURL: "...",
-        // "initial" is fine here as default value.
-        version: "initial",
-        description: pascalize(DEFAULT_VARIATION_ID),
-        // Empty string is fine, we don't want to save imageUrl.
-        // We don't want to compare local and remote image with imageUrl.
-        // It will be striped anyway when doing the comparison.
-        imageUrl: "",
-      },
-    ],
-  };
-}

package/src/features/slices/actions/deleteSlice.ts

@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+
+type DeleteSliceArgs = {
+  libraryID: string;
+  sliceID: string;
+  sliceName: string;
+  onSuccess: () => void;
+};
+
+export async function deleteSlice(args: DeleteSliceArgs) {
+  const { sliceName, sliceID, libraryID, onSuccess } = args;
+
+  try {
+    const { errors } = await managerClient.slices.deleteSlice({
+      libraryID,
+      sliceID,
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess();
+
+    toast.success(`Successfully deleted slice “${sliceName}”`);
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while deleting slice “${sliceName}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

package/src/features/slices/actions/renameSlice.ts

@@ -0,0 +1,37 @@
+import { toast } from "react-toastify";
+
+import { managerClient } from "@src/managerClient";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { rename } from "@src/domain/slice";
+import { Slices } from "@lib/models/common/Slice";
+
+type DeleteSliceArgs = {
+  newSliceName: string;
+  slice: ComponentUI;
+  onSuccess: (renamedSlice: ComponentUI) => void;
+};
+
+export async function renameSlice(args: DeleteSliceArgs) {
+  const { slice, newSliceName, onSuccess } = args;
+
+  try {
+    const renamedSlice = rename(slice, newSliceName);
+
+    const { errors } = await managerClient.slices.renameSlice({
+      libraryID: slice.from,
+      model: Slices.fromSM(renamedSlice.model),
+    });
+
+    if (errors.length > 0) {
+      throw errors;
+    }
+
+    onSuccess(renamedSlice);
+
+    toast.success("Slice name updated");
+  } catch (e) {
+    const errorMessage = `An unexpected error happened while renaming “${slice.model.name}”.`;
+    console.error(errorMessage, e);
+    toast.error(errorMessage);
+  }
+}

package/src/modules/availableCustomTypes/index.ts

@@ -1,28 +1,15 @@
 import { Reducer } from "redux";
 import { AvailableCustomTypesStoreType } from "./types";
-import {
-  ActionType,
-  createAction,
-  createAsyncAction,
-  getType,
-} from "typesafe-actions";
+import { ActionType, createAction, getType } from "typesafe-actions";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { refreshStateCreator } from "@src/modules/environment";
-import { call, fork, put, takeLatest } from "redux-saga/effects";
-import { withLoader } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { updateCustomType } from "@src/apiClient";
-import { modalCloseCreator } from "@src/modules/modal";
-import { push } from "connected-next-router";
-import { createCustomType } from "@src/features/customTypes/customTypesTable/createCustomType";
-import { openToasterCreator, ToasterType } from "@src/modules/toaster";
 import { CustomTypeSM } from "@lib/models/common/CustomType";
 import {
   normalizeFrontendCustomType,
   normalizeFrontendCustomTypes,
 } from "@lib/models/common/normalizers/customType";
 import { omit } from "lodash";
-import { deleteSliceCreator } from "../slices";
+import { sliceDeleteSuccess } from "../slices";
 import { filterSliceFromCustomType } from "@lib/utils/shared/customTypes";
 import {
   LocalOrRemoteCustomType,
@@ -30,63 +17,37 @@ import {
   hasLocal,
   hasLocalAndRemote,
 } from "@lib/models/common/ModelData";
-import { CustomTypeFormat } from "@slicemachine/manager";
-import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
-import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { ToastMessageWithPath } from "@components/ToasterContainer";
-
-export const saveCustomTypeCreator = createAsyncAction(
-  "CUSTOM_TYPE/SAVE.REQUEST",
-  "CUSTOM_TYPE/SAVE.RESPONSE",
-  "CUSTOM_TYPE/SAVE.FAILURE",
-)<undefined, { customType: CustomTypeSM }>();
 
 // Action Creators
-export const createCustomTypeCreator = createAsyncAction(
-  "CUSTOM_TYPES/CREATE.REQUEST",
-  "CUSTOM_TYPES/CREATE.RESPONSE",
-  "CUSTOM_TYPES/CREATE.FAILURE",
-)<
-  {
-    id: string;
-    label: string;
-    repeatable: boolean;
-    format: CustomTypeFormat;
-  },
-  {
-    newCustomType: CustomTypeSM;
-  }
->();
+export const customTypeSaveSuccess = createAction("CUSTOM_TYPE/SAVE_SUCCESS")<{
+  newCustomType: CustomTypeSM;
+}>();
 
-export const renameAvailableCustomType = createAction(
-  "CUSTOM_TYPES/RENAME_CUSTOM_TYPE",
+export const customTypeCreateSuccess = createAction(
+  "CUSTOM_TYPES/CREATE_SUCCESS",
+)<{
+  newCustomType: CustomTypeSM;
+}>();
+
+export const customTypeRenameSuccess = createAction(
+  "CUSTOM_TYPES/RENAME_SUCCESS",
 )<{
   renamedCustomType: CustomTypeSM;
 }>();
 
-export const deleteCustomTypeCreator = createAsyncAction(
-  "CUSTOM_TYPES/DELETE.REQUEST",
-  "CUSTOM_TYPES/DELETE.RESPONSE",
-  "CUSTOM_TYPES/DELETE.FAILURE",
-)<
-  {
-    customTypeId: string;
-    customTypeName: string;
-    format: CustomTypeFormat;
-  },
-  {
-    customTypeId: string;
-  }
->();
+export const customTypeDeleteSuccess = createAction(
+  "CUSTOM_TYPES/DELETE_SUCCESS",
+)<{
+  customTypeId: string;
+}>();
 
 type CustomTypesActions =
   | ActionType<typeof refreshStateCreator>
-  | ActionType<typeof createCustomTypeCreator>
-  | ActionType<typeof renameAvailableCustomType>
-  | ActionType<typeof saveCustomTypeCreator>
-  | ActionType<typeof deleteCustomTypeCreator>
-  | ActionType<typeof deleteSliceCreator.success>;
+  | ActionType<typeof customTypeCreateSuccess>
+  | ActionType<typeof customTypeRenameSuccess>
+  | ActionType<typeof customTypeSaveSuccess>
+  | ActionType<typeof customTypeDeleteSuccess>
+  | ActionType<typeof sliceDeleteSuccess>;
 
 // Selectors
 export const selectAllCustomTypes = (
@@ -134,7 +95,7 @@ export const availableCustomTypesReducer: Reducer<
         ...normalizedNewCustomType,
       };
     }
-    case getType(createCustomTypeCreator.success): {
+    case getType(customTypeCreateSuccess): {
       const normalizedNewCustomType = normalizeFrontendCustomType(
         action.payload.newCustomType,
       );
@@ -145,8 +106,8 @@ export const availableCustomTypesReducer: Reducer<
       };
     }
 
-    case getType(saveCustomTypeCreator.success): {
-      const localCustomType = action.payload.customType;
+    case getType(customTypeSaveSuccess): {
+      const localCustomType = action.payload.newCustomType;
 
       return {
         ...state,
@@ -157,7 +118,7 @@ export const availableCustomTypesReducer: Reducer<
       };
     }
 
-    case getType(renameAvailableCustomType): {
+    case getType(customTypeRenameSuccess): {
       const id = action.payload.renamedCustomType.id;
       const customType = state[id];
 
@@ -172,7 +133,7 @@ export const availableCustomTypesReducer: Reducer<
       };
     }
 
-    case getType(deleteCustomTypeCreator.success): {
+    case getType(customTypeDeleteSuccess): {
       const customType = state[action.payload.customTypeId];
 
       if (hasLocalAndRemote(customType)) {
@@ -191,7 +152,7 @@ export const availableCustomTypesReducer: Reducer<
       return state;
     }
 
-    case getType(deleteSliceCreator.success): {
+    case getType(sliceDeleteSuccess): {
       const sliceId = action.payload.sliceId;
 
       const customTypesUpdated: AvailableCustomTypesStoreType = Object.entries(
@@ -229,70 +190,3 @@ export const availableCustomTypesReducer: Reducer<
       return state;
   }
 };
-
-export function* createCustomTypeSaga({
-  payload,
-}: ReturnType<typeof createCustomTypeCreator.request>) {
-  const customTypesConfig = CUSTOM_TYPES_CONFIG[payload.format];
-  const customTypesMessages = CUSTOM_TYPES_MESSAGES[payload.format];
-
-  try {
-    const newCustomType = CustomTypes.toSM(
-      createCustomType(
-        payload.id,
-        payload.label,
-        payload.repeatable,
-        payload.format,
-      ),
-    );
-    yield call(updateCustomType, CustomTypes.fromSM(newCustomType));
-    yield put(createCustomTypeCreator.success({ newCustomType }));
-    yield put(modalCloseCreator());
-    yield put(
-      push({
-        pathname: customTypesConfig.getBuilderPagePathname(payload.id),
-        query:
-          newCustomType.format === "page"
-            ? {
-                newPageType: true,
-              }
-            : undefined,
-      }),
-    );
-    yield put(
-      openToasterCreator({
-        content: ToastMessageWithPath({
-          message: `${customTypesMessages.name({
-            start: true,
-            plural: false,
-          })} saved successfully at `,
-          path: `./customtypes/${newCustomType.id}/index.json`,
-        }),
-        type: ToasterType.SUCCESS,
-      }),
-    );
-  } catch (e) {
-    yield put(
-      openToasterCreator({
-        content: `Internal Error: ${customTypesMessages.name({
-          start: true,
-          plural: false,
-        })} not saved`,
-        type: ToasterType.ERROR,
-      }),
-    );
-  }
-}
-
-// Saga watchers
-function* handleCustomTypeRequests() {
-  yield takeLatest(
-    getType(createCustomTypeCreator.request),
-    withLoader(createCustomTypeSaga, LoadingKeysEnum.CREATE_CUSTOM_TYPE),
-  );
-}
-
-// Saga Exports
-export function* watchAvailableCustomTypesSagas() {
-  yield fork(handleCustomTypeRequests);
-}