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

package/src/features/settings/git/GitRepositoriesSearch.tsx

@@ -0,0 +1,69 @@
+import type { GitOwner } from "@slicemachine/manager";
+import { type FC, Suspense, useState } from "react";
+
+import { FieldSetContent, FieldSetHeader } from "@src/components/FieldSet";
+import { ConnectGitRepositoryBlankSlate } from "@src/features/settings/git/ConnectGitRepositoryBlankSlate";
+import { GitOwnerSelect } from "@src/features/settings/git/GitOwnerSelect";
+import {
+  GitRepositoriesList,
+  GitRepositoriesListSkeleton,
+} from "@src/features/settings/git/GitRepositoriesList";
+import { useGitRepos } from "@src/features/settings/git/useGitRepos";
+
+type GitRepositoriesSearchProps = { owners: GitOwner[] };
+
+export const GitRepositoriesSearch: FC<GitRepositoriesSearchProps> = ({
+  owners,
+}) => {
+  const [selectedOwner, setSelectedOwner] = useState(owners[0]);
+  return (
+    <>
+      <FieldSetHeader>
+        <GitOwnerSelect
+          owners={owners}
+          selectedOwner={selectedOwner}
+          onSelectedOwnerChange={setSelectedOwner}
+          sx={{ width: "calc(50% - 8px)" }}
+        />
+      </FieldSetHeader>
+      <Suspense
+        fallback={<GitRepositoriesSearchSkeleton gitOwnerSelect={false} />}
+      >
+        <GitRepositoriesSearchResults owner={selectedOwner} />
+      </Suspense>
+    </>
+  );
+};
+
+type GitRepositoriesSearchResultsProps = { owner: GitOwner };
+
+const GitRepositoriesSearchResults: FC<GitRepositoriesSearchResultsProps> = ({
+  owner,
+}) => {
+  const repos = useGitRepos({ provider: owner.provider, owner: owner.name });
+  return repos.length > 0 ? (
+    <GitRepositoriesList mode="link" repos={repos} />
+  ) : (
+    <FieldSetContent>
+      <ConnectGitRepositoryBlankSlate
+        title="No Results Found"
+        description="Try selecting a different Git account or organization on the top left."
+      />
+    </FieldSetContent>
+  );
+};
+
+type GitRepositoriesSearchSkeletonProps = { gitOwnerSelect: boolean };
+
+export const GitRepositoriesSearchSkeleton: FC<
+  GitRepositoriesSearchSkeletonProps
+> = ({ gitOwnerSelect }) => (
+  <>
+    {gitOwnerSelect ? (
+      <FieldSetHeader>
+        <GitOwnerSelect disabled sx={{ width: "calc(50% - 8px)" }} />
+      </FieldSetHeader>
+    ) : undefined}
+    <GitRepositoriesListSkeleton />
+  </>
+);

package/src/features/settings/git/GitRepositoryConnectDialog.tsx

@@ -0,0 +1,85 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  FormInput,
+  Text,
+} from "@prismicio/editor-ui";
+import type { GitRepo, GitRepoSpecifier } from "@slicemachine/manager";
+import { Formik } from "formik";
+import type { FC, ReactNode } from "react";
+import { toast } from "react-toastify";
+
+import { gitProviderToConfig } from "@src/features/settings/git/GitProvider";
+import { useWriteAPIToken } from "@src/features/settings/git/useWriteAPIToken";
+
+type GitRepositoryConnectDialogProps = {
+  linkRepo: (repo: GitRepoSpecifier) => Promise<void>;
+  repo: GitRepo;
+  trigger: ReactNode;
+};
+
+export const GitRepositoryConnectDialog: FC<
+  GitRepositoryConnectDialogProps
+> = ({ linkRepo, repo, trigger }) => {
+  const providerConfig = gitProviderToConfig[repo.provider];
+  const { updateToken } = useWriteAPIToken({ git: repo });
+  return (
+    <Dialog size={{ width: 448, height: "auto" }} trigger={trigger}>
+      <DialogHeader title="Prismic Write API token required" />
+      <DialogContent>
+        <Formik
+          initialValues={{ writeAPIToken: "" }}
+          validate={(values) => {
+            if (values.writeAPIToken.length === 0) {
+              return { writeAPIToken: "Cannot be empty" };
+            }
+          }}
+          onSubmit={async (values) => {
+            try {
+              await linkRepo(repo);
+              await updateToken(values.writeAPIToken);
+            } catch (error) {
+              const message = `Could not connect to ${repo.name}`;
+              console.error(message, error);
+              toast.error(message);
+            }
+          }}
+        >
+          {(formikProps) => (
+            <form onSubmit={formikProps.handleSubmit}>
+              <Box flexDirection="column" gap={4} padding={16}>
+                <FormInput
+                  disabled={formikProps.isSubmitting}
+                  error={typeof formikProps.errors.writeAPIToken === "string"}
+                  label="Paste your Write API token"
+                  onValueChange={(value) => {
+                    void formikProps.setFieldValue("writeAPIToken", value);
+                  }}
+                  placeholder="Write API token"
+                  size="large"
+                  value={formikProps.values.writeAPIToken}
+                />
+                <Text color="grey11">
+                  Required to sync models from {providerConfig.name} to Prismic.
+                </Text>
+              </Box>
+              <DialogActions
+                cancel={{ text: "Cancel" }}
+                ok={{
+                  disabled: !formikProps.isValid,
+                  loading: formikProps.isSubmitting,
+                  onClick: () => void formikProps.submitForm(),
+                  text: "Save Token",
+                }}
+                size="medium"
+              />
+            </form>
+          )}
+        </Formik>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/settings/git/GitRepositoryDisconnectDialog.tsx

@@ -0,0 +1,60 @@
+import {
+  Box,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  Text,
+} from "@prismicio/editor-ui";
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+import { type FC, type ReactNode, useState } from "react";
+import { toast } from "react-toastify";
+
+type GitRepositoryDisconnectDialogProps = {
+  repo: GitRepoSpecifier;
+  trigger: ReactNode;
+  unlinkRepo: (repo: GitRepoSpecifier) => Promise<void>;
+};
+
+export const GitRepositoryDisconnectDialog: FC<
+  GitRepositoryDisconnectDialogProps
+> = ({ repo, trigger, unlinkRepo }) => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <Dialog size={{ width: 448, height: "auto" }} trigger={trigger}>
+      <DialogHeader title="Remove Git Connection" />
+      <DialogContent>
+        <Box flexDirection="column" padding={16}>
+          <Text>
+            You will not be able to push your code alongside your models
+            anymore. Note that you can reconnect your Git repository at any
+            time. Are you sure you want to continue?
+          </Text>
+        </Box>
+      </DialogContent>
+      <DialogActions
+        asFooter
+        cancel={{ text: "Cancel" }}
+        ok={{
+          color: "tomato",
+          loading,
+          onClick: () => {
+            void (async () => {
+              setLoading(true);
+              try {
+                await unlinkRepo(repo);
+              } catch (error) {
+                const message = `Could not disconnect from ${repo.name}`;
+                console.error(message, error);
+                toast.error(message);
+              }
+              setLoading(false);
+            })();
+          },
+          text: "Disconnect",
+        }}
+        size="medium"
+      />
+    </Dialog>
+  );
+};

package/src/features/settings/git/useGitIntegrationExperiment.ts

@@ -0,0 +1,8 @@
+import { useExperimentVariant } from "@src/hooks/useExperimentVariant";
+
+type UseGitIntegrationExperimentReturnType = { eligible: boolean };
+
+export function useGitIntegrationExperiment(): UseGitIntegrationExperimentReturnType {
+  const variant = useExperimentVariant("slicemachine-git-integration");
+  return { eligible: variant?.value === "on" };
+}

package/src/features/settings/git/useGitOwners.ts

@@ -0,0 +1,12 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitOwner } from "@slicemachine/manager";
+
+import { managerClient } from "@src/managerClient";
+
+export function useGitOwners(): GitOwner[] {
+  return useRequest(getGitOwners, []);
+}
+
+async function getGitOwners(): Promise<GitOwner[]> {
+  return await managerClient.git.fetchOwners();
+}

package/src/features/settings/git/useGitRepos.ts

@@ -0,0 +1,24 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitRepo } from "@slicemachine/manager";
+
+import { managerClient } from "@src/managerClient";
+
+type UseGitReposArgs = Parameters<typeof managerClient.git.fetchRepos>[0];
+
+export function useGitRepos(args: UseGitReposArgs): GitRepo[] {
+  return useRequest(getGitRepos, [
+    args.provider,
+    args.owner,
+    args.query,
+    args.page,
+  ]);
+}
+
+async function getGitRepos(
+  provider: "gitHub",
+  owner: string,
+  query?: string,
+  page?: number,
+): Promise<GitRepo[]> {
+  return await managerClient.git.fetchRepos({ provider, owner, query, page });
+}

package/src/features/settings/git/useLinkedGitRepos.ts

@@ -0,0 +1,41 @@
+import { revalidateData, useRequest } from "@prismicio/editor-support/Suspense";
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseLinkedGitReposReturnType = {
+  linkedGitRepos: GitRepoSpecifier[];
+  linkRepo: (git: GitRepoSpecifier) => Promise<void>;
+  unlinkRepo: (git: GitRepoSpecifier) => Promise<void>;
+};
+
+export function useLinkedGitRepos(): UseLinkedGitReposReturnType {
+  const [config] = useSliceMachineConfig();
+  const linkedGitRepos = useRequest(getLinkedGitRepos, [config.repositoryName]);
+  return {
+    linkedGitRepos,
+    linkRepo: async (git) => {
+      await managerClient.git.linkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+    unlinkRepo: async (git) => {
+      await managerClient.git.unlinkRepo({
+        prismic: { domain: config.repositoryName },
+        git,
+      });
+      await revalidateData(getLinkedGitRepos, [config.repositoryName]);
+    },
+  };
+}
+
+async function getLinkedGitRepos(
+  prismicDomain: string,
+): Promise<GitRepoSpecifier[]> {
+  return await managerClient.git.fetchLinkedRepos({
+    prismic: { domain: prismicDomain },
+  });
+}

package/src/features/settings/git/useWriteAPIToken.ts

@@ -0,0 +1,23 @@
+import type { GitRepoSpecifier } from "@slicemachine/manager";
+
+import { useSliceMachineConfig } from "@src/hooks/useSliceMachineConfig";
+import { managerClient } from "@src/managerClient";
+
+type UseWriteAPITokenReturnType = {
+  updateToken: (token: string) => Promise<void>;
+};
+
+export function useWriteAPIToken(args: {
+  git: GitRepoSpecifier;
+}): UseWriteAPITokenReturnType {
+  const [config] = useSliceMachineConfig();
+  return {
+    updateToken: async (token) => {
+      await managerClient.git.updateWriteAPIToken({
+        prismic: { domain: config.repositoryName },
+        git: args.git,
+        token,
+      });
+    },
+  };
+}

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/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -43,7 +43,6 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
       <DialogHeader title="Upgrade slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           validateOnMount
           initialValues={{
             from: libraries[0]?.name,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -47,7 +47,6 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
       <DialogHeader title="Convert to slice variation" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             libraryID: localSharedSlices[0]?.from,
             sliceID: localSharedSlices[0]?.model.id,

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -31,7 +31,6 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
       <DialogHeader title="Merge with an existing slice" />
       <DialogContent>
         <Formik
-          validateOnChange
           initialValues={{
             path: identicalSlices[0]?.path ?? "",
           }}

package/src/hooks/useUser.ts

@@ -0,0 +1,14 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { managerClient } from "@src/managerClient";
+
+type User = { isLoggedIn: boolean };
+
+export function useUser(): User {
+  return useRequest(getUser, []);
+}
+
+async function getUser(): Promise<User> {
+  const isLoggedIn = await managerClient.user.checkIsLoggedIn();
+  return { isLoggedIn };
+}

package/src/icons/SettingsIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const SettingsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12C16 13.1046 15.1046 14 14 14C12.8954 14 12 13.1046 12 12C12 10.8954 12.8954 10 14 10C15.1046 10 16 10.8954 16 12ZM14 9C15.4865 9 16.7205 10.0811 16.9585 11.5H23.5C23.7761 11.5 24 11.7239 24 12C24 12.2761 23.7761 12.5 23.5 12.5H16.9585C16.7205 13.9189 15.4865 15 14 15C12.5135 15 11.2795 13.9189 11.0415 12.5H8.5C8.22386 12.5 8 12.2761 8 12C8 11.7239 8.22386 11.5 8.5 11.5H11.0415C11.2795 10.0811 12.5135 9 14 9ZM21 20C21 21.1046 20.1046 22 19 22C17.8954 22 17 21.1046 17 20C17 18.8954 17.8954 18 19 18C20.1046 18 21 18.8954 21 20ZM16.0415 20.5C16.2795 21.9189 17.5135 23 19 23C20.4865 23 21.7205 21.9189 21.9585 20.5H23.5C23.7761 20.5 24 20.2761 24 20C24 19.7239 23.7761 19.5 23.5 19.5H21.9585C21.7205 18.0811 20.4865 17 19 17C17.5135 17 16.2795 18.0811 16.0415 19.5H8.5C8.22386 19.5 8 19.7239 8 20C8 20.2761 8.22386 20.5 8.5 20.5H16.0415Z"
+      fill="currentColor"
+    />
+  </svg>
+);