slice-machine-ui 1.20.1-dev-environments.1 → 1.20.1-dev-next-release.1

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -1,163 +0,0 @@
-import {
-  Box,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-  Icon,
-  IconButton,
-  Text,
-} from "@prismicio/editor-ui";
-import { Environment } from "@slicemachine/manager/client";
-import type { FC } from "react";
-import clsx from "clsx";
-
-import LogoIcon from "@src/icons/LogoIcon";
-
-import * as styles from "./SideNavEnvironmentSelector.css";
-
-type SideNavEnvironmentSelectorProps = {
-  variant?: "default" | "unauthorized";
-  environments?: Environment[];
-  activeEnvironment?: Environment;
-  onSelect?: (environment: Environment) => void | Promise<void>;
-  onLogInClick?: () => void;
-};
-
-export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
-  props,
-) => {
-  const {
-    variant = "default",
-    environments = [],
-    activeEnvironment,
-    onSelect,
-    onLogInClick,
-  } = props;
-
-  const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
-
-  return (
-    <Box alignItems="center" gap={16}>
-      <Box position="relative">
-        <LogoIcon className={styles.logo} />
-        {activeEnvironment !== undefined && (
-          <EnvironmentDot
-            kind={activeEnvironment.kind}
-            className={styles.activeEnvironmentDot}
-          />
-        )}
-      </Box>
-      <Box flexGrow={1} flexDirection="column" overflow="hidden">
-        <Text component="span" variant="small" color="grey11">
-          Environment
-        </Text>
-        {variant === "unauthorized" ? (
-          <Text component="span" className={styles.actionRequiredLabel}>
-            Login required
-          </Text>
-        ) : activeEnvironment === undefined ? (
-          <Text component="span" className={styles.actionRequiredLabel}>
-            Select environment
-          </Text>
-        ) : (
-          <Text component="span" className={styles.activeEnvironmentName}>
-            {isProductionEnvironmentActive
-              ? "Production"
-              : activeEnvironment?.name}
-          </Text>
-        )}
-      </Box>
-      <Box flexShrink={0}>
-        {variant === "unauthorized" ? (
-          <IconButton icon="arrowForward" onClick={onLogInClick} />
-        ) : !activeEnvironment || environments.length > 1 ? (
-          <EnvironmentDropdownMenu
-            environments={environments}
-            activeEnvironment={activeEnvironment}
-            onSelect={onSelect}
-          />
-        ) : null}
-      </Box>
-    </Box>
-  );
-};
-
-type EnvironmentDropdownMenuProps = Pick<
-  SideNavEnvironmentSelectorProps,
-  "environments" | "activeEnvironment" | "onSelect"
->;
-
-const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
-  const { environments = [], activeEnvironment, onSelect } = props;
-
-  return (
-    <DropdownMenu modal>
-      <DropdownMenuTrigger>
-        <IconButton icon="unfoldMore" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" minWidth={256}>
-        <DropdownMenuLabel>Regular Environments</DropdownMenuLabel>
-        {environments.map((environment) =>
-          environment.kind !== "dev" ? (
-            <EnvironmentDropdownMenuItem
-              key={environment.domain}
-              environment={environment}
-              onSelect={onSelect}
-              isActive={environment.domain === activeEnvironment?.domain}
-            />
-          ) : (
-            <>
-              <DropdownMenuLabel>Personal Environment</DropdownMenuLabel>
-              <EnvironmentDropdownMenuItem
-                key={environment.domain}
-                environment={environment}
-                onSelect={onSelect}
-                isActive={environment.domain === activeEnvironment?.domain}
-              />
-            </>
-          ),
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};
-
-type EnvironmentDropdownMenuItemProps = {
-  environment: Environment;
-  isActive?: boolean;
-} & Pick<SideNavEnvironmentSelectorProps, "onSelect">;
-
-const EnvironmentDropdownMenuItem: FC<EnvironmentDropdownMenuItemProps> = (
-  props,
-) => {
-  const { environment, onSelect, isActive } = props;
-  const isProductionEnvironment = environment.kind === "prod";
-
-  return (
-    <DropdownMenuItem
-      startIcon={
-        <EnvironmentDot
-          kind={environment.kind}
-          className={styles.menuItemEnvironmentDot}
-        />
-      }
-      endIcon={Boolean(isActive) ? <Icon name="check" /> : undefined}
-      onSelect={() => void onSelect?.(environment)}
-    >
-      {isProductionEnvironment ? "Production" : environment.name}
-    </DropdownMenuItem>
-  );
-};
-
-type EnvironmentDotProps = {
-  kind: Environment["kind"];
-  className?: string;
-};
-
-const EnvironmentDot: FC<EnvironmentDotProps> = (props) => {
-  const { kind, className } = props;
-
-  return <div className={clsx(styles.environmentDot[kind], className)} />;
-};

package/src/features/environments/actions/getActiveEnvironmentDomain.ts

@@ -1,11 +0,0 @@
-import { managerClient } from "@src/managerClient";
-
-export async function getActiveEnvironmentDomain() {
-  try {
-    const { environment } = await managerClient.project.readEnvironment();
-
-    return { activeEnvironmentDomain: environment };
-  } catch (error) {
-    return { error };
-  }
-}

package/src/features/environments/actions/getEnvironments.ts

@@ -1,12 +0,0 @@
-import { managerClient } from "@src/managerClient";
-
-export async function getEnvironments() {
-  try {
-    const environments =
-      await managerClient.prismicRepository.fetchEnvironments();
-
-    return { environments };
-  } catch (error) {
-    return { error };
-  }
-}

package/src/features/environments/actions/setEnvironment.ts

@@ -1,18 +0,0 @@
-import { revalidateData } from "@prismicio/editor-support/Suspense";
-import { Environment } from "@slicemachine/manager/client";
-
-import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
-import { managerClient } from "@src/managerClient";
-
-import { getActiveEnvironmentDomain } from "./getActiveEnvironmentDomain";
-
-export async function setEnvironment(
-  environment: Pick<Environment, "domain">,
-): Promise<void> {
-  await managerClient.project.updateEnvironment({
-    environment: environment.domain,
-  });
-
-  revalidateData(getActiveEnvironmentDomain, []);
-  revalidateData(getLegacySliceMachineState, []);
-}

package/src/features/environments/useActiveEnvironment.ts

@@ -1,38 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getActiveEnvironmentDomain } from "./actions/getActiveEnvironmentDomain";
-import { useEnvironments } from "./useEnvironments";
-
-export function useActiveEnvironment() {
-  const { environments, error: useEnvironmentsError } = useEnvironments();
-  const { activeEnvironmentDomain, error: getActiveEnvironmentError } =
-    useRequest(getActiveEnvironmentDomain, []);
-
-  if (useEnvironmentsError !== undefined) {
-    return { error: useEnvironmentsError };
-  }
-
-  if (getActiveEnvironmentError !== undefined) {
-    return { error: getActiveEnvironmentError };
-  }
-
-  const activeEnvironment = environments?.find((environment) => {
-    if (activeEnvironmentDomain === undefined) {
-      return environment.kind === "prod";
-    }
-
-    return environment.domain === activeEnvironmentDomain;
-  });
-
-  if (!activeEnvironment) {
-    return {
-      error: new Error(
-        `The active environment (${
-          activeEnvironmentDomain ?? "Production"
-        }) does not match one of the repository's environments.`,
-      ),
-    };
-  }
-
-  return { activeEnvironment };
-}

package/src/features/environments/useEnvironments.ts

@@ -1,7 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getEnvironments } from "./actions/getEnvironments";
-
-export function useEnvironments() {
-  return useRequest(getEnvironments, []);
-}

package/src/features/legacyState/actions/getLegacySliceMachineState.ts

@@ -1,53 +0,0 @@
-import ServerState from "@models/server/ServerState";
-import { Slices } from "@lib/models/common/Slice";
-import { CustomTypes } from "@lib/models/common/CustomType";
-import { managerClient } from "@src/managerClient";
-
-export async function getLegacySliceMachineState() {
-  const rawState = await managerClient.getState();
-
-  // `rawState` from the client contains non-SM-specific models. We need to
-  // transform the data to something SM recognizes.
-  const state: ServerState = {
-    ...rawState,
-    libraries: rawState.libraries.map((library) => {
-      return {
-        ...library,
-        components: library.components.map((component) => {
-          return {
-            ...component,
-            model: Slices.toSM(component.model),
-
-            // Replace screnshot Blobs with URLs.
-            screenshots: Object.fromEntries(
-              Object.entries(component.screenshots).map(
-                ([variationID, screenshot]) => {
-                  return [
-                    variationID,
-                    {
-                      ...screenshot,
-                      url: URL.createObjectURL(screenshot.data),
-                    },
-                  ];
-                },
-              ),
-            ),
-          };
-        }),
-      };
-    }),
-    customTypes: rawState.customTypes.map((customTypeModel) => {
-      return CustomTypes.toSM(customTypeModel);
-    }),
-    remoteCustomTypes: rawState.remoteCustomTypes.map(
-      (remoteCustomTypeModel) => {
-        return CustomTypes.toSM(remoteCustomTypeModel);
-      },
-    ),
-    remoteSlices: rawState.remoteSlices.map((remoteSliceModel) => {
-      return Slices.toSM(remoteSliceModel);
-    }),
-  };
-
-  return state;
-}

package/src/features/legacyState/useLegacySliceMachineState.ts

@@ -1,7 +0,0 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
-
-import { getLegacySliceMachineState } from "./actions/getLegacySliceMachineState";
-
-export function useLegacySliceMachineState() {
-  return useRequest(getLegacySliceMachineState, []);
-}