feat(slice-machine): add GitHub settings page

packages/manager/src/constants/API_ENDPOINTS.ts

@@ -78,8 +78,7 @@ export const API_ENDPOINTS: APIEndpoints = (() => {
 					"https://0yyeb2g040.execute-api.us-east-1.amazonaws.com/prod/",
 				PrismicOembed: "https://oembed.prismic.io",
 				PrismicUnsplash: "https://unsplash.prismic.io",
-				SliceMachineV1:
-					"https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/",
+				SliceMachineV1: "https://sm-api.prismic.io/v1/",
 			};
 		}
 	}

packages/manager/src/index.ts

@@ -13,6 +13,8 @@ export { createSliceMachineManager } from "./managers/createSliceMachineManager"
 export { createSliceMachineManagerMiddleware } from "./managers/createSliceMachineManagerMiddleware";
 export type { CreateSliceMachineManagerMiddlewareArgs } from "./managers/createSliceMachineManagerMiddleware";
 
+export type { GitOwner, GitRepo, GitRepoSpecifier } from "./managers/git/types";
+
 export type {
 	Environment,
 	PushChangesLimit,

packages/manager/src/managers/git/GitManager.ts

@@ -14,15 +14,15 @@ import {
 
 import { BaseManager } from "../BaseManager";
 
-import { GitRepo, GitRepoSpecifier, Owner } from "./types";
+import { GitOwner, GitRepo, GitRepoSpecifier } from "./types";
 import { buildGitRepoSpecifier } from "./buildGitRepoSpecifier";
 
 type GitManagerCreateGitHubAuthStateReturnType = {
 	key: string;
 	expiresAt: Date;
 };
 
-type GitManagerFetchOwnersReturnType = Owner[];
+type GitManagerFetchOwnersReturnType = GitOwner[];
 
 type GitManagerFetchReposReturnType = GitRepo[];
 

packages/manager/src/managers/git/types.ts

@@ -1,4 +1,4 @@
-export type Owner = {
+export type GitOwner = {
 	provider: "gitHub";
 	id: string;
 	name: string;

packages/manager/test/SliceMachineManager-getState.test.ts

@@ -25,8 +25,7 @@ it("returns global Slice Machine state", async () => {
 		PrismicUser: "https://user-service.prismic.io/",
 		PrismicWroom: "https://prismic.io/",
 		PrismicUnsplash: "https://unsplash.prismic.io",
-		SliceMachineV1:
-			"https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/",
+		SliceMachineV1: "https://sm-api.prismic.io/v1/",
 	});
 	expect(result.clientError).toStrictEqual({
 		message: "__stub__",

packages/manager/test/__testutils__/mockSliceMachineAPI.ts

@@ -17,10 +17,7 @@ export const mockSliceMachineAPI = (
 	ctx: TestContext,
 	config: MockSliceMachineAPIConfig,
 ): void => {
-	// TODO: Update the default endpoint to the correct deployed URL.
-	const endpoint =
-		config.endpoint ??
-		"https://21vvgrh0s6.execute-api.us-east-1.amazonaws.com/v1/";
+	const endpoint = config.endpoint ?? "https://sm-api.prismic.io/v1/";
 
 	if (config.environmentsV1Endpoint) {
 		ctx.msw.use(

packages/slice-machine/.depcheckrc

@@ -6,6 +6,9 @@ ignores:
     "@vitest/coverage-v8",
     "monocle-ts",
     "newtype-ts",
+    "postcss",
+    "postcss-flexbugs-fixes",
+    "postcss-preset-env",
     "semver",
     "start-slicemachine",
     "stylelint-config-css-modules",

packages/slice-machine/components/DeleteVariationModal/index.tsx

@@ -52,6 +52,7 @@ export const DeleteVariationModal: FC<DeleteVariationModalProps> = ({
           <DialogActions
             ok={{
               text: "Delete",
+              color: "tomato",
               onClick: () => {
                 if (!variation) return;
                 void (async () => {

packages/slice-machine/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -45,7 +45,6 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
         <DialogHeader icon="edit" title="Rename variation" />
         <DialogContent>
           <Formik
-            validateOnChange
             validateOnMount
             initialValues={{ variationName: variation?.name ?? "" }}
             validate={(values) => {

packages/slice-machine/components/ModalFormCard/index.tsx

@@ -81,7 +81,6 @@ function ModalCard<Values extends FormikValues>({
       }}
     >
       <Formik
-        validateOnChange
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         initialValues={initialValues}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return

packages/slice-machine/components/Navigation/index.tsx

@@ -8,6 +8,7 @@ import { telemetry } from "@src/apiClient";
 import VideoItem from "@components/Navigation/VideoItem";
 import { LightningIcon } from "@src/icons/Lightning";
 import { MathPlusIcon } from "@src/icons/MathPlusIcon";
+import { SettingsIcon } from "@src/icons/SettingsIcon";
 import { CUSTOM_TYPES_CONFIG } from "@src/features/customTypes/customTypesConfig";
 import {
   SideNavSeparator,
@@ -141,17 +142,19 @@ const Navigation: FC = () => {
       )}
 
       <SideNavList position="bottom">
-        <SideNavLink
-          title="Invite team"
-          href={`${repositoryUrl}/settings/users`}
-          Icon={(props) => <MathPlusIcon {...props} />}
-          onClick={() => {
-            void telemetry.track({
-              event: "users-invite-button-clicked",
-            });
-          }}
-          target="_blank"
-        />
+        <SideNavListItem>
+          <SideNavLink
+            title="Invite team"
+            href={`${repositoryUrl}/settings/users`}
+            Icon={MathPlusIcon}
+            onClick={() => {
+              void telemetry.track({
+                event: "users-invite-button-clicked",
+              });
+            }}
+            target="_blank"
+          />
+        </SideNavListItem>
 
         <ErrorBoundary>
           <Suspense>
@@ -162,11 +165,21 @@ const Navigation: FC = () => {
           </Suspense>
         </ErrorBoundary>
 
+        <SideNavListItem>
+          <SideNavLink
+            title="Settings"
+            href="/settings"
+            Icon={SettingsIcon}
+            active={router.asPath.startsWith("/settings")}
+            component={Link}
+          />
+        </SideNavListItem>
+
         <SideNavListItem>
           <SideNavLink
             title="Changelog"
             href="/changelog"
-            Icon={(props) => <LightningIcon {...props} />}
+            Icon={LightningIcon}
             active={router.asPath.startsWith("/changelog")}
             component={Link}
             RightElement={

packages/slice-machine/components/ReviewModal/ReviewForm.tsx

@@ -94,7 +94,6 @@ export const ReviewForm: FC<ReviewFormProps> = (props) => {
     >
       <Formik
         validateOnMount
-        validateOnChange
         initialValues={{
           rating: 0,
           comment: "",

packages/slice-machine/lib/builders/common/EditModal/Form.jsx

@@ -13,7 +13,6 @@ const WidgetForm = ({
   return (
     <Box>
       <Formik
-        validateOnChange
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         initialValues={initialValues}
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment

packages/slice-machine/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -114,7 +114,6 @@ const NewField: React.FC<NewField> = ({
 
   return (
     <Formik
-      validateOnChange
       onSubmit={onSave}
       validationSchema={validationSchema}
       initialValues={initialValues}

packages/slice-machine/package.json

@@ -42,9 +42,9 @@
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
-    "@prismicio/editor-fields": "0.4.20",
-    "@prismicio/editor-support": "0.4.20",
-    "@prismicio/editor-ui": "0.4.20",
+    "@prismicio/editor-fields": "0.4.22",
+    "@prismicio/editor-support": "0.4.22",
+    "@prismicio/editor-ui": "0.4.22",
     "@prismicio/mocks": "2.0.0-alpha.2",
     "@prismicio/simulator": "0.1.4",
     "@prismicio/types-internal": "2.2.0",
@@ -104,6 +104,9 @@
     "next-router-mock": "0.8.0",
     "node-fetch": "3.3.1",
     "parse-multipart-data": "1.5.0",
+    "postcss": "8.4.21",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-preset-env": "9.3.0",
     "rc-drawer": "4.4.3",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",

packages/slice-machine/pages/settings.tsx

@@ -0,0 +1 @@
+export { SettingsPage as default } from "@src/features/settings/SettingsPage";

packages/slice-machine/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    "postcss-flexbugs-fixes": true,
+    "postcss-preset-env": {
+      autoprefixer: { flexbox: "no-2009" },
+      features: { "custom-properties": false, "nesting-rules": true },
+      stage: 3,
+    },
+  },
+};

packages/slice-machine/src/components/FieldSet/FieldSet.stories.tsx

@@ -193,11 +193,14 @@ export const WithHeaderAndBoxContent = {
           <OwnerSelect />
         </FieldSetHeader>
         <FieldSetContent>
-          {/*
-           * TODO: these `padding` values actually don't match Figma, but they
-           * are the closest allowed by the `Box` component.
-           */}
-          <Box flexDirection="column" padding={{ block: 72, inline: 100 }}>
+          <Box
+            flexDirection="column"
+            /*
+             * TODO: these `padding` values actually don't match Figma, but they
+             * are the closest allowed by the `Box` component.
+             */
+            padding={{ block: 72, inline: 100 }}
+          >
             <Text align="center" variant="emphasized">
               No Results Found
             </Text>
@@ -230,12 +233,18 @@ function OwnerSelect(props: OwnerSelectProps) {
       size="large"
       sx={{ width: "calc(50% - 8px)" }}
     >
-      <SelectItem size="large" value="owner-1">
-        Owner
-      </SelectItem>
-      <SelectItem size="large" value="owner-2">
-        Owner
-      </SelectItem>
+      {[...Array(2).keys()].map((index) => (
+        <SelectItem
+          key={index}
+          renderStartIcon={() => (
+            <GitHubIcon color={tokens.color.greyLight11} />
+          )}
+          size="large"
+          value={`owner-${index}`}
+        >
+          Owner
+        </SelectItem>
+      ))}
     </Select>
   );
 }

packages/slice-machine/src/components/RelativeTime/RelativeTime.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RelativeTime } from "./RelativeTime";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: RelativeTime,
+  argTypes: {
+    date: { control: "date" },
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    date: new Date("1 Jan 2024"),
+  },
+  render: ({ date, ...otherArgs }) => (
+    // The `date` control converts the `date` arg into a UNIX timestamp. That's
+    // why we need to convert it back into a `Date` object.
+    <RelativeTime {...otherArgs} date={new Date(date)} />
+  ),
+} satisfies Story;

packages/slice-machine/src/components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,40 @@
+import { Text } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+type RelativeTimeProps = {
+  date: Date;
+};
+
+export const RelativeTime: FC<RelativeTimeProps> = ({
+  date,
+  ...otherProps
+}) => (
+  <Text {...otherProps} color="inherit" variant="inherit">
+    {formatRelativeTime(date)}
+  </Text>
+);
+
+const rtf = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto",
+  style: "narrow",
+});
+
+function formatRelativeTime(date: Date, now = new Date()): string {
+  return rtf.format(differenceInCalendarDays(date, now), "day");
+}
+
+const millisecondsInDay = 1_000 * 60 * 60 * 24;
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/differenceInCalendarDays/index.ts.
+function differenceInCalendarDays(dateLeft: Date, dateRight: Date): number {
+  const startOfDayLeft = startOfDay(dateLeft);
+  const startOfDayRight = startOfDay(dateRight);
+  return Math.round((+startOfDayLeft - +startOfDayRight) / millisecondsInDay);
+}
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/startOfDay/index.ts.
+function startOfDay(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}

packages/slice-machine/src/components/RelativeTime/index.ts

@@ -0,0 +1 @@
+export { RelativeTime } from "./RelativeTime";

packages/slice-machine/src/features/environments/actions/setEnvironment.ts

@@ -13,6 +13,6 @@ export async function setEnvironment(
     environment: environment.domain,
   });
 
-  revalidateData(getActiveEnvironment, []);
-  revalidateData(getLegacySliceMachineState, []);
+  void revalidateData(getActiveEnvironment, []);
+  void revalidateData(getLegacySliceMachineState, []);
 }

packages/slice-machine/src/features/settings/SettingsPage.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@prismicio/editor-ui";
+import Head from "next/head";
+import type { FC } from "react";
+
+import {
+  AppLayout,
+  AppLayoutBreadcrumb,
+  AppLayoutContent,
+  AppLayoutHeader,
+} from "@components/AppLayout";
+import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
+
+export const SettingsPage: FC = () => (
+  <>
+    <Head>
+      <title>Settings - Slice Machine</title>
+    </Head>
+    <AppLayout>
+      <AppLayoutHeader>
+        <AppLayoutBreadcrumb folder="Settings" />
+      </AppLayoutHeader>
+      <AppLayoutContent>
+        <Box flexDirection="column" maxWidth={600}>
+          <ConnectGitRepository />
+        </Box>
+      </AppLayoutContent>
+    </AppLayout>
+  </>
+);