slice-machine-ui 1.23.2-beta.10 → 1.23.2-beta.11

package/src/hooks/useModelStatus.ts

@@ -1,78 +0,0 @@
-import {
-  computeModelStatus,
-  ModelStatus,
-} from "@lib/models/common/ModelStatus";
-import { getAuthStatus } from "@src/modules/environment";
-import { AuthStatus } from "@src/modules/userContext/types";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useSelector } from "react-redux";
-import { useNetwork } from "./useNetwork";
-import {
-  hasLocal,
-  LocalOrRemoteCustomType,
-  LocalOrRemoteModel,
-  LocalOrRemoteSlice,
-} from "@lib/models/common/ModelData";
-
-// Slices and Custom Types needs to be separated as Ids are not unique amongst each others.
-export interface ModelStatusInformation {
-  modelsStatuses: {
-    slices: { [sliceId: string]: ModelStatus };
-    customTypes: { [ctId: string]: ModelStatus };
-  };
-  authStatus: AuthStatus;
-  isOnline: boolean;
-}
-
-function computeStatuses(
-  models: LocalOrRemoteCustomType[],
-  userHasAccessToModels: boolean,
-): { [sliceId: string]: ModelStatus };
-function computeStatuses(
-  models: LocalOrRemoteSlice[],
-  userHasAccessToModels: boolean,
-): { [sliceId: string]: ModelStatus };
-function computeStatuses(
-  models: LocalOrRemoteModel[],
-  userHasAccessToModels: boolean,
-) {
-  return models.reduce<{ [id: string]: ModelStatus }>(
-    (acc, model) => {
-      const { status } = computeModelStatus(model, userHasAccessToModels);
-
-      return {
-        ...acc,
-        [hasLocal(model) ? model.local.id : model.remote.id]: status,
-      };
-    },
-    {} as { [sliceId: string]: ModelStatus },
-  );
-}
-
-export const useModelStatus = ({
-  slices = [],
-  customTypes = [],
-}: {
-  slices?: LocalOrRemoteSlice[];
-  customTypes?: LocalOrRemoteCustomType[];
-}): ModelStatusInformation => {
-  const isOnline = useNetwork();
-  const { authStatus } = useSelector((store: SliceMachineStoreType) => ({
-    authStatus: getAuthStatus(store),
-  }));
-  const userHasAccessToModels =
-    isOnline &&
-    authStatus != AuthStatus.FORBIDDEN &&
-    authStatus != AuthStatus.UNAUTHORIZED;
-
-  const modelsStatuses = {
-    slices: computeStatuses(slices, userHasAccessToModels),
-    customTypes: computeStatuses(customTypes, userHasAccessToModels),
-  };
-
-  return {
-    modelsStatuses,
-    authStatus,
-    isOnline,
-  };
-};

package/src/hooks/useUnSyncChanges.ts

@@ -1,88 +0,0 @@
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-import { selectAllCustomTypes } from "@src/modules/availableCustomTypes";
-import { getFrontendSlices, getLibraries } from "@src/modules/slices";
-import { SliceMachineStoreType } from "@src/redux/type";
-import { useSelector } from "react-redux";
-import { ModelStatusInformation, useModelStatus } from "./useModelStatus";
-import {
-  LocalOrRemoteCustomType,
-  RemoteOnlySlice,
-  getModelId,
-  isRemoteOnly,
-} from "@lib/models/common/ModelData";
-
-export const unSyncStatuses = [
-  ModelStatus.New,
-  ModelStatus.Modified,
-  ModelStatus.Deleted,
-];
-
-export interface UnSyncChanges extends ModelStatusInformation {
-  unSyncedSlices: ComponentUI[];
-  unSyncedCustomTypes: LocalOrRemoteCustomType[];
-}
-
-// ComponentUI are manipulated on all the relevant pages
-// But the data is not available for remote only slices
-// which have been deleted locally
-// Should revisit this with the sync improvements
-const wrapDeletedSlice = (s: RemoteOnlySlice): ComponentUI => ({
-  model: s.remote,
-  screenshots: {},
-  from: "",
-  href: "",
-  pathToSlice: "",
-  fileName: "",
-  extension: "",
-});
-
-export const useUnSyncChanges = (): UnSyncChanges => {
-  const { customTypes, slices, libraries } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      customTypes: selectAllCustomTypes(store),
-      slices: getFrontendSlices(store),
-      libraries: getLibraries(store),
-    }),
-  );
-
-  const { modelsStatuses, authStatus, isOnline } = useModelStatus({
-    slices,
-    customTypes,
-  });
-
-  const localComponents: ComponentUI[] = libraries.flatMap(
-    (lib) => lib.components,
-  );
-
-  const deletedComponents: ComponentUI[] = slices
-    .filter(isRemoteOnly)
-    .map(wrapDeletedSlice);
-
-  const components: ComponentUI[] = localComponents
-    .concat(deletedComponents)
-    .sort((s1, s2) => (s1.model.name > s2.model.name ? 1 : -1));
-
-  const unSyncedSlices = components.filter(
-    (component) =>
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      modelsStatuses.slices[component.model.id] &&
-      unSyncStatuses.includes(modelsStatuses.slices[component.model.id]),
-  );
-  const unSyncedCustomTypes = customTypes.filter(
-    (customType) =>
-      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-      modelsStatuses.customTypes[getModelId(customType)] &&
-      unSyncStatuses.includes(
-        modelsStatuses.customTypes[getModelId(customType)],
-      ),
-  );
-
-  return {
-    unSyncedSlices,
-    unSyncedCustomTypes,
-    modelsStatuses,
-    authStatus,
-    isOnline,
-  };
-};

package/test/components/LoginModal.test.tsx

@@ -1,67 +0,0 @@
-// @vitest-environment jsdom
-
-import { describe, test, expect, vi } from "vitest";
-import React from "react";
-import { render } from "@testing-library/react";
-import LoginModal from "@components/LoginModal";
-import { FrontEndEnvironment } from "@lib/models/common/Environment";
-import { useSelector } from "react-redux";
-
-const mockDispatch = vi.fn();
-vi.mock("react-beautiful-dnd", () => {
-  return {};
-});
-vi.mock("react-redux", () => ({
-  useSelector: vi.fn(),
-  useDispatch: () => mockDispatch,
-}));
-
-const useSelectorMock = vi.mocked(useSelector);
-
-const App = () => <LoginModal />;
-
-describe("LoginModal", () => {
-  window.open = vi.fn();
-
-  const div = document.createElement("div");
-  div.id = "__next";
-  document.body.appendChild(div);
-
-  test("when given a prismic url in env it should open to prismic.io/dashboard", () => {
-    useSelectorMock.mockImplementation(() => ({
-      env: {
-        manifest: {
-          apiEndpoint: "https://foo.prismic.io/api/v2",
-        },
-      } as FrontEndEnvironment,
-      isOpen: true,
-      isLoginLoading: true,
-    }));
-    const result = render(<App />);
-
-    expect(result.getByText("Click here").closest("a")).toHaveAttribute(
-      "href",
-      // Since we're not using the `start-slicemachine` server proxy, port defaults to Next/React Testing Library's default port
-      "https://prismic.io/dashboard/cli/login?source=slice-machine&port=3000&path=/api/auth",
-    );
-  });
-
-  test("when given wroom.io url it should open to wroom.io/dashboard", () => {
-    useSelectorMock.mockImplementation(() => ({
-      env: {
-        manifest: {
-          apiEndpoint: "https://foo.wroom.io/api/v2",
-        },
-      } as FrontEndEnvironment,
-      isOpen: true,
-      isLoginLoading: true,
-    }));
-    const result = render(<App />);
-
-    expect(result.getByText("Click here").closest("a")).toHaveAttribute(
-      "href",
-      // Since we're not using the `start-slicemachine` server proxy, port defaults to Next/React Testing Library's default port
-      "https://wroom.io/dashboard/cli/login?source=slice-machine&port=3000&path=/api/auth",
-    );
-  });
-});

package/test/src/hooks/useModelStatus.test.ts

@@ -1,115 +0,0 @@
-import { describe, test, beforeEach, expect, vi } from "vitest";
-import { useModelStatus } from "../../../src/hooks/useModelStatus";
-import * as networkHook from "../../../src/hooks/useNetwork";
-import { AuthStatus } from "@src/modules/userContext/types";
-
-import { Slices } from "@lib/models/common/Slice";
-import SliceMock from "../../__fixtures__/sliceModel";
-
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { customTypeMock } from "../../__fixtures__/customType";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
-
-const mockSelector = vi.fn();
-vi.mock("react-redux", async () => {
-  const actual: typeof import("react-redux") =
-    await vi.importActual("react-redux");
-
-  return {
-    ...actual,
-    useSelector: () => mockSelector(),
-  };
-});
-
-const BaseSliceMock = {
-  ...SliceMock,
-  variations: SliceMock.variations.map((variation) => {
-    // @ts-expect-error we know imageUrl is optional
-    delete variation["imageUrl"];
-    return variation;
-  }),
-};
-const sliceModel = Slices.toSM(BaseSliceMock);
-const customTypeModel = CustomTypes.toSM(customTypeMock);
-
-describe("[useModelStatus hook]", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test("it should return the model status correctly", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.AUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Synced },
-        customTypes: { [customTypeModel.id]: ModelStatus.New },
-      },
-      authStatus: AuthStatus.AUTHORIZED,
-      isOnline: true,
-    });
-  });
-
-  test("it should return Unknown status is the user doesn't have internet", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => false); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.AUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.AUTHORIZED,
-      isOnline: false,
-    });
-  });
-
-  test("it should return Unknown status is the user is not connected to Prismic", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.UNAUTHORIZED });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.UNAUTHORIZED,
-      isOnline: true,
-    });
-  });
-
-  test("it should return Unknown status is the user doesn't have access to the repository", () => {
-    vi.spyOn(networkHook, "useNetwork").mockImplementation(() => true); // isOnline
-    mockSelector.mockReturnValue({ authStatus: AuthStatus.FORBIDDEN });
-
-    const result = useModelStatus({
-      slices: [{ local: sliceModel, remote: sliceModel, localScreenshots: {} }],
-      customTypes: [{ local: customTypeModel }],
-    });
-
-    expect(result).toEqual({
-      modelsStatuses: {
-        slices: { [sliceModel.id]: ModelStatus.Unknown },
-        customTypes: { [customTypeModel.id]: ModelStatus.Unknown },
-      },
-      authStatus: AuthStatus.FORBIDDEN,
-      isOnline: true,
-    });
-  });
-});