slice-machine-ui 1.24.1-beta.5 → 1.24.1-beta.7

package/components/App/index.tsx

@@ -10,7 +10,6 @@ import useServerState from "@src/hooks/useServerState";
 import { SliceMachineStoreType } from "@src/redux/type";
 import { getLibraries } from "@src/modules/slices";
 import useSMTracker from "@src/hooks/useSMTracker";
-import { useChangelog } from "@src/hooks/useChangelog";
 
 type Props = Readonly<{
   children?: ReactNode;
@@ -23,7 +22,6 @@ const SliceMachineApp: FC<Props> = ({ children }) => {
 
   useSMTracker();
   useServerState();
-  useChangelog();
 
   return (
     <>

package/components/Changelog/index.tsx

@@ -1,65 +1,54 @@
-import { ProgressCircle } from "@prismicio/editor-ui";
-import { BaseStyles, Flex } from "theme-ui";
+import { Suspense, useEffect, useState } from "react";
+import { BaseStyles } from "theme-ui";
 import { useSelector } from "react-redux";
+import { ErrorBoundary, ProgressCircle } from "@prismicio/editor-ui";
+
+import { Version } from "@slicemachine/manager";
+import { AppLayout, AppLayoutContent } from "@components/AppLayout";
+import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
 import { SliceMachineStoreType } from "@src/redux/type";
-import { getChangelog, getPackageManager } from "@src/modules/environment";
-import { useEffect, useState } from "react";
-import { PackageVersion } from "@models/common/versions";
+import { getPackageManager } from "@src/modules/environment";
+
 import { Navigation } from "./navigation";
 import { VersionDetails, ReleaseWarning } from "./versionDetails";
-import { isLoading } from "@src/modules/loading";
-import { LoadingKeysEnum } from "@src/modules/loading/types";
-import { AppLayout, AppLayoutContent } from "@components/AppLayout";
 
 export default function Changelog() {
-  const { changelog, packageManager, isChangelogLoading } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      changelog: getChangelog(store),
-      packageManager: getPackageManager(store),
-      isChangelogLoading: isLoading(store, LoadingKeysEnum.CHANGELOG),
-    }),
-  );
+  const { packageManager } = useSelector((store: SliceMachineStoreType) => ({
+    packageManager: getPackageManager(store),
+  }));
+  const versions = useSliceMachineVersions();
+  const latestVersion = versions[0];
 
-  const latestVersion = changelog.sliceMachine.versions[0];
-
-  const [selectedVersion, setSelectedVersion] = useState<
-    PackageVersion | undefined
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  >(latestVersion || undefined);
+  const [selectedVersion, setSelectedVersion] = useState<Version | undefined>(
+    latestVersion ?? undefined,
+  );
 
   useEffect(() => {
     setSelectedVersion(latestVersion);
   }, [latestVersion]);
 
-  const showReleaseWarning =
-    changelog.sliceMachine.versions.length === 0 || !selectedVersion;
+  const showReleaseWarning = versions.length === 0 || !selectedVersion;
 
   return (
     <AppLayout>
       <AppLayoutContent>
         <BaseStyles sx={{ display: "flex", minWidth: 0 }}>
-          {!isChangelogLoading ? (
-            <>
-              <Navigation
-                changelog={changelog}
-                selectedVersion={selectedVersion}
-                selectVersion={(version) => setSelectedVersion(version)}
-              />
+          <Navigation
+            selectedVersion={selectedVersion}
+            selectVersion={(version) => setSelectedVersion(version)}
+          />
 
-              {showReleaseWarning ? (
-                <Flex sx={{ paddingLeft: "32px" }}>
-                  <ReleaseWarning />
-                </Flex>
-              ) : (
+          {showReleaseWarning ? (
+            <ReleaseWarning />
+          ) : (
+            <ErrorBoundary renderError={() => <ReleaseWarning />}>
+              <Suspense fallback={<ProgressCircle />}>
                 <VersionDetails
-                  changelog={changelog}
                   selectedVersion={selectedVersion}
                   packageManager={packageManager}
                 />
-              )}
-            </>
-          ) : (
-            <ProgressCircle />
+              </Suspense>
+            </ErrorBoundary>
           )}
         </BaseStyles>
       </AppLayoutContent>

package/components/Changelog/navigation/index.tsx

@@ -1,7 +1,13 @@
-import { tokens } from "@prismicio/editor-ui";
 import React from "react";
 import { Flex, Text } from "theme-ui";
-import { PackageChangelog, PackageVersion } from "@models/common/versions";
+import { tokens } from "@prismicio/editor-ui";
+
+import { Version } from "@slicemachine/manager";
+import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
+import { useSliceMachineLatestNonBreakingVersion } from "@src/features/changelog/useSliceMachineLatestNonBreakingVersion";
+import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
+import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+
 import { VersionBadge } from "./VersionBadge";
 
 export enum VersionTags {
@@ -11,21 +17,21 @@ export enum VersionTags {
 }
 
 interface NavigationProps {
-  changelog: PackageChangelog;
-  selectedVersion: PackageVersion | undefined;
-  selectVersion: (version: PackageVersion) => void;
+  selectedVersion: Version | undefined;
+  selectVersion: (version: Version) => void;
 }
 
 export const Navigation: React.FC<NavigationProps> = ({
-  changelog,
   selectedVersion,
   selectVersion,
 }) => {
-  const latestVersion: string | undefined =
-    changelog.sliceMachine.versions[0]?.versionNumber;
-  const hasUpToDateVersions =
-    !changelog.adapter.updateAvailable &&
-    !changelog.sliceMachine.updateAvailable;
+  const versions = useSliceMachineVersions();
+  const { sliceMachineUpdateAvailable, adapterUpdateAvailable } =
+    useUpdateAvailable();
+  const latestNonBreakingVersion = useSliceMachineLatestNonBreakingVersion();
+  const runningVersion = useSliceMachineRunningVersion();
+
+  const latestVersion: string | undefined = versions[0]?.version;
 
   function findVersionTags(versionNumber: string): VersionTags[] {
     const tags = [];
@@ -33,14 +39,12 @@ export const Navigation: React.FC<NavigationProps> = ({
     // Display Latest or LatestNonBreaking tag
     if (versionNumber === latestVersion) {
       tags.push(VersionTags.Latest);
-    } else if (
-      versionNumber === changelog.sliceMachine.latestNonBreakingVersion
-    ) {
+    } else if (versionNumber === latestNonBreakingVersion) {
       tags.push(VersionTags.LatestNonBreaking);
     }
 
     // Display Current tag
-    if (versionNumber === changelog.sliceMachine.currentVersion) {
+    if (versionNumber === runningVersion) {
       tags.push(VersionTags.Current);
     }
 
@@ -93,16 +97,16 @@ export const Navigation: React.FC<NavigationProps> = ({
           overflow: "auto",
         }}
       >
-        {changelog.sliceMachine.versions.map((version, index) => (
+        {versions.map((packageVersion, index) => (
           <VersionBadge
-            key={`versionBadge-${version.versionNumber}-${index}`}
-            isSelected={
-              selectedVersion?.versionNumber === version.versionNumber
+            key={`versionBadge-${packageVersion.version}-${index}`}
+            isSelected={selectedVersion?.version === packageVersion.version}
+            onClick={() => selectVersion(packageVersion)}
+            versionNumber={packageVersion.version}
+            tags={findVersionTags(packageVersion.version)}
+            hasUpToDateVersions={
+              !sliceMachineUpdateAvailable && !adapterUpdateAvailable
             }
-            onClick={() => selectVersion(version)}
-            versionNumber={version.versionNumber}
-            tags={findVersionTags(version.versionNumber)}
-            hasUpToDateVersions={hasUpToDateVersions}
           />
         ))}
       </Flex>

package/components/Changelog/versionDetails/{ReleaseNoteDetails.tsx → ReleaseNotesDetails.tsx}

@@ -2,12 +2,12 @@ import React from "react";
 import { Text } from "theme-ui";
 import { marked } from "marked";
 
-interface ReleaseNoteDetailsProps {
-  releaseNote: string;
+interface ReleaseNotesDetailsProps {
+  releaseNotes: string;
 }
 
-export const ReleaseNoteDetails: React.FC<ReleaseNoteDetailsProps> = ({
-  releaseNote,
+export const ReleaseNotesDetails: React.FC<ReleaseNotesDetailsProps> = ({
+  releaseNotes,
 }) => {
   return (
     <Text
@@ -37,7 +37,7 @@ export const ReleaseNoteDetails: React.FC<ReleaseNoteDetailsProps> = ({
         },
       }}
       dangerouslySetInnerHTML={{
-        __html: marked.parse(releaseNote),
+        __html: marked.parse(releaseNotes),
       }}
     />
   );

package/components/Changelog/versionDetails/UpdateCommandBox.tsx

@@ -1,36 +1,40 @@
 import React from "react";
 import { Button, Flex, Text } from "theme-ui";
 import { AiFillWarning } from "react-icons/ai";
-import type { PackageManager } from "@slicemachine/manager";
-import { PackageChangelog, PackageVersion } from "@models/common/versions";
+
+import type { PackageManager, Version } from "@slicemachine/manager";
+import { useSliceMachineVersions } from "@src/features/changelog/useSliceMachineVersions";
 import CodeBlock from "@components/CodeBlock";
+import { useAdapterName } from "@src/hooks/useAdapterName";
+import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
 
 interface UpdateCommandBoxProps {
-  changelog: PackageChangelog;
-  selectedVersion: PackageVersion;
+  selectedVersion: Version;
   packageManager: PackageManager;
 }
 
 export const UpdateCommandBox: React.FC<UpdateCommandBoxProps> = ({
-  changelog,
   selectedVersion,
   packageManager,
 }) => {
+  const versions = useSliceMachineVersions();
+  const adapterName = useAdapterName();
+  const { sliceMachineUpdateAvailable, adapterUpdateAvailable } =
+    useUpdateAvailable();
+
   const isLatestSliceMachineVersion =
-    selectedVersion.versionNumber ===
-    changelog.sliceMachine.versions[0].versionNumber;
+    selectedVersion.version === versions[0].version;
   const sliceMachineVersionToInstall = isLatestSliceMachineVersion
     ? "latest"
-    : selectedVersion.versionNumber;
+    : selectedVersion.version;
   const packagesSpecs = getPackagesSpecs({
     sliceMachineVersionToInstall,
     isLatestSliceMachineVersion,
-    adapterName: changelog.adapter.name,
+    adapterName,
   });
   const installCommand = getInstallCommand(packageManager, packagesSpecs);
   const isOnlyAdapterUpdate =
-    changelog.adapter.updateAvailable &&
-    !changelog.sliceMachine.updateAvailable;
+    adapterUpdateAvailable && !sliceMachineUpdateAvailable;
 
   return (
     <>

package/components/Changelog/versionDetails/VersionKindLabel.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { type ThemeUIStyleObject, Text } from "theme-ui";
 import { transparentize } from "@theme-ui/color";
-import { VersionKind } from "@models/common/versions";
+
+import { VersionKind } from "@slicemachine/manager";
 
 interface VersionKindLabelProps {
   versionKind: VersionKind;
@@ -15,7 +16,7 @@ export const VersionKindLabel: React.FC<VersionKindLabelProps> = ({
     padding: "2px 4px",
     borderRadius: "4px",
     textTransform: "uppercase",
-    ...(versionKind === VersionKind.MAJOR
+    ...(versionKind === "MAJOR"
       ? {
           color: "purple",
           bg: transparentize("purple", 0.85),

package/components/Changelog/versionDetails/index.tsx

@@ -1,21 +1,22 @@
-import { tokens } from "@prismicio/editor-ui";
 import React from "react";
 import { Flex, Text } from "theme-ui";
-import type { PackageManager } from "@slicemachine/manager";
-import { PackageChangelog, PackageVersion } from "@models/common/versions";
+import { AiFillWarning } from "react-icons/ai";
+import { tokens } from "@prismicio/editor-ui";
+
+import type { PackageManager, Version } from "@slicemachine/manager";
+import { useSliceMachineReleaseNotes } from "@src/features/changelog/useSliceMachineReleaseNotes";
+
 import { VersionKindLabel } from "./VersionKindLabel";
-import { ReleaseNoteDetails } from "./ReleaseNoteDetails";
+import { ReleaseNotesDetails } from "./ReleaseNotesDetails";
 import { UpdateCommandBox } from "./UpdateCommandBox";
-import { AiFillWarning } from "react-icons/ai";
 
 interface VersionDetailsProps {
-  changelog: PackageChangelog;
-  selectedVersion: PackageVersion;
+  selectedVersion: Version;
   packageManager: PackageManager;
 }
 
 export const ReleaseWarning = () => (
-  <div>
+  <Flex sx={{ paddingLeft: "32px" }}>
     Could not fetch release notes.{" "}
     <a
       href="https://github.com/prismicio/slice-machine/releases"
@@ -24,14 +25,15 @@ export const ReleaseWarning = () => (
     >
       Find out more on GitHub
     </a>
-  </div>
+  </Flex>
 );
 
 export const VersionDetails: React.FC<VersionDetailsProps> = ({
-  changelog,
   selectedVersion,
   packageManager,
 }) => {
+  const releaseNotes = useSliceMachineReleaseNotes(selectedVersion.version);
+
   return (
     <Flex sx={{ flexDirection: "column" }}>
       <Flex
@@ -50,7 +52,7 @@ export const VersionDetails: React.FC<VersionDetailsProps> = ({
             lineHeight: "32px",
           }}
         >
-          {`Version ${selectedVersion.versionNumber}`}
+          {`Version ${selectedVersion.version}`}
         </Text>
         {!!selectedVersion.kind && (
           <VersionKindLabel versionKind={selectedVersion.kind} />
@@ -65,7 +67,7 @@ export const VersionDetails: React.FC<VersionDetailsProps> = ({
         }}
       >
         {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
-        {selectedVersion.releaseNote?.includes("# Breaking Change") && (
+        {releaseNotes?.includes("# Breaking Change") && (
           <Flex
             sx={{
               padding: "16px",
@@ -85,13 +87,12 @@ export const VersionDetails: React.FC<VersionDetailsProps> = ({
         )}
 
         <UpdateCommandBox
-          changelog={changelog}
           selectedVersion={selectedVersion}
           packageManager={packageManager}
         />
-        {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
-        {selectedVersion?.releaseNote ? (
-          <ReleaseNoteDetails releaseNote={selectedVersion.releaseNote} />
+
+        {releaseNotes !== undefined ? (
+          <ReleaseNotesDetails releaseNotes={releaseNotes} />
         ) : (
           <ReleaseWarning />
         )}

package/components/Navigation/RunningVersion.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+import { RightElement } from "@src/components/SideNav";
+import { useSliceMachineRunningVersion } from "@src/hooks/useSliceMachineRunningVersion";
+
+export const RunningVersion: FC = () => {
+  const sliceMachineRunningVersion = useSliceMachineRunningVersion();
+
+  return (
+    <RightElement data-cy="slicemachine-version">
+      v{sliceMachineRunningVersion}
+    </RightElement>
+  );
+};

package/components/Navigation/UpdateBox.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import Link from "next/link";
+
+import { useUpdateAvailable } from "@src/hooks/useUpdateAvailable";
+import { UpdateInfo } from "@src/components/SideNav";
+
+export const UpdateBox: FC = () => {
+  const { sliceMachineUpdateAvailable, adapterUpdateAvailable } =
+    useUpdateAvailable();
+
+  if (!sliceMachineUpdateAvailable && !adapterUpdateAvailable) {
+    return null;
+  }
+
+  return <UpdateInfo href="/changelog" component={Link} />;
+};

package/components/Navigation/index.test.tsx

@@ -25,16 +25,15 @@ const mockRouter = vi.mocked(Router);
 vi.mock("next/router", () => import("next-router-mock"));
 
 type renderSideNavigationArgs = {
-  canUpdate: boolean;
   hasChanges?: boolean;
   authStatus?: AuthStatus;
 };
 
-function renderSideNavigation({
-  canUpdate,
-  hasChanges = false,
-  authStatus = AuthStatus.AUTHORIZED,
-}: renderSideNavigationArgs): RenderReturnType {
+function renderSideNavigation(
+  args: renderSideNavigationArgs = {},
+): RenderReturnType {
+  const { hasChanges = false, authStatus = AuthStatus.AUTHORIZED } = args;
+
   return render(<SideNavigation />, {
     preloadedState: {
       availableCustomTypes: {},
@@ -80,19 +79,6 @@ function renderSideNavigation({
         manifest: {
           apiEndpoint: "https://foo.cdn.prismic.io/api/v2",
         },
-        changelog: {
-          sliceMachine: {
-            currentVersion: "",
-            updateAvailable: canUpdate,
-            latestNonBreakingVersion: null,
-            versions: [],
-          },
-          adapter: {
-            name: "",
-            updateAvailable: canUpdate,
-            versions: [],
-          },
-        },
       } as unknown as FrontEndEnvironment,
       userContext: {
         hasSeenTutorialsToolTip: false,
@@ -109,7 +95,7 @@ describe("Side Navigation", () => {
   });
 
   test("Logo and repo area", async () => {
-    renderSideNavigation({ canUpdate: true });
+    renderSideNavigation();
     expect(await screen.findByText("foo")).toBeVisible();
     expect(await screen.findByText("foo.prismic.io")).toBeVisible();
     const link = await screen.findByTitle("Open prismic repository");
@@ -117,17 +103,6 @@ describe("Side Navigation", () => {
     expect(link).toHaveAttribute("target", "_blank");
   });
 
-  test("Update box when update is available", async () => {
-    renderSideNavigation({ canUpdate: true });
-    expect(await screen.findByText("Updates Available")).toBeVisible();
-  });
-
-  test("Update box when there are no updates", async () => {
-    renderSideNavigation({ canUpdate: false });
-    const element = await act(() => screen.queryByText("Updates Available"));
-    expect(element).toBeNull();
-  });
-
   test.skip.each([
     ["Page types", "/"],
     ["Custom types", "/custom-types"],
@@ -139,7 +114,7 @@ describe("Side Navigation", () => {
   ])(
     "internal navigation links: when clicking title %s it should navigate to %s",
     async (title, path) => {
-      const { user } = renderSideNavigation({ canUpdate: true });
+      const { user } = renderSideNavigation();
 
       await act(() => mockRouter.push("/"));
 
@@ -155,7 +130,7 @@ describe("Side Navigation", () => {
   );
 
   test("should display the number of changes on the 'Review changes' item", async () => {
-    renderSideNavigation({ canUpdate: true, hasChanges: true });
+    renderSideNavigation({ hasChanges: true });
 
     expect(await screen.findByText("Review changes")).toBeVisible();
     const changesItem = screen
@@ -188,7 +163,7 @@ describe("Side Navigation", () => {
       }),
     );
 
-    renderSideNavigation({ canUpdate: true });
+    renderSideNavigation();
 
     const link = (await screen.findByText("Academy")).parentElement
       ?.parentElement as HTMLElement;
@@ -204,7 +179,7 @@ describe("Side Navigation", () => {
   });
 
   test("Video Item not next", async () => {
-    renderSideNavigation({ canUpdate: true });
+    renderSideNavigation();
 
     const link = (await screen.findByText("Tutorial")).parentElement
       ?.parentElement as HTMLElement;

package/components/Navigation/index.tsx

@@ -13,8 +13,6 @@ import {
   SideNavLink,
   SideNavListItem,
   SideNavList,
-  UpdateInfo,
-  RightElement,
   SideNav,
   SideNavRepository,
 } from "@src/components/SideNav/SideNav";
@@ -23,7 +21,6 @@ import { FolderIcon } from "@src/icons/FolderIcon";
 import { userHasSeenTutorialsToolTip } from "@src/modules/userContext";
 import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import { getChangelog } from "@src/modules/environment";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
 import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
 import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
@@ -31,19 +28,19 @@ import { ErrorBoundary } from "@src/ErrorBoundary";
 
 import { ChangesItem } from "./ChangesItem";
 import { Environment } from "./Environment";
+import { RunningVersion } from "./RunningVersion";
+import { UpdateBox } from "./UpdateBox";
 
 import * as styles from "./index.css";
 
 const Navigation: FC = () => {
-  const { changelog, hasSeenTutorialsToolTip } = useSelector(
+  const { hasSeenTutorialsToolTip } = useSelector(
     (store: SliceMachineStoreType) => ({
-      changelog: getChangelog(store),
       hasSeenTutorialsToolTip: userHasSeenTutorialsToolTip(store),
     }),
   );
   const router = useRouter();
-  const { setUpdatesViewed, setSeenTutorialsToolTip } =
-    useSliceMachineActions();
+  const { setSeenTutorialsToolTip } = useSliceMachineActions();
   const { repositoryName, repositoryDomain, repositoryUrl } =
     useRepositoryInformation();
   const gitIntegrationExperiment = useGitIntegrationExperiment();
@@ -112,24 +109,11 @@ const Navigation: FC = () => {
         </SideNavListItem>
       </SideNavList>
 
-      {(changelog.sliceMachine.updateAvailable ||
-        changelog.adapter.updateAvailable) && (
-        <UpdateInfo
-          href="/changelog"
-          onClick={() => {
-            const latestVersion =
-              changelog.sliceMachine.versions.length > 0
-                ? changelog.sliceMachine.versions?.[0]
-                : null;
-            setUpdatesViewed({
-              latest: latestVersion && latestVersion.versionNumber,
-              latestNonBreaking:
-                changelog.sliceMachine.latestNonBreakingVersion,
-            });
-          }}
-          component={Link}
-        />
-      )}
+      <ErrorBoundary>
+        <Suspense>
+          <UpdateBox />
+        </Suspense>
+      </ErrorBoundary>
 
       <SideNavList position="bottom">
         <SideNavListItem>
@@ -175,10 +159,11 @@ const Navigation: FC = () => {
             active={router.asPath.startsWith("/changelog")}
             component={Link}
             RightElement={
-              <RightElement data-cy="slicemachine-version">
-                {changelog.sliceMachine.currentVersion &&
-                  `v${changelog.sliceMachine.currentVersion}`}
-              </RightElement>
+              <ErrorBoundary>
+                <Suspense>
+                  <RunningVersion />
+                </Suspense>
+              </ErrorBoundary>
             }
           />
         </SideNavListItem>